*/
.recaptcha-wrap { margin-top: 1rem; margin-bottom: 1rem; }
/* Form submission status messages (success / error) */
.form-msg {
margin-top: var(--sp-4);
padding: 1rem 1.25rem;
border-radius: var(--r-lg);
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: 0.9375rem;
line-height: 1.5;
}
.form-msg__icon {
flex-shrink: 0;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.875rem;
}
.form-msg__text { flex: 1; }
.form-msg--success {
background: rgba(16,185,129,.08);
border: 1px solid rgba(16,185,129,.35);
color: #047857;
}
.form-msg--success .form-msg__icon { background: var(--c-success); color: #fff; }
.form-msg--error {
background: rgba(220,38,38,.06);
border: 1px solid rgba(220,38,38,.35);
color: #b91c1c;
}
.form-msg--error .form-msg__icon { background: #dc2626; color: #fff; }
/* ── Abstract Page ── */
/* Guidelines */
.gl-head { margin-bottom: var(--sp-8); }
.gl-head h2 { margin-top: var(--sp-2); }
.gl-list { display: flex; flex-direction: column; }
.gl-row {
display: grid;
grid-template-columns: 48px 200px 1fr;
align-items: center;
gap: 2rem;
padding: 1.25rem 0;
border-bottom: 1px solid var(--c-border);
}
.gl-row:last-child { border-bottom: none; }
.gl-rule-num {
font-size: 0.75rem;
font-weight: 800;
color: var(--c-accent);
letter-spacing: .04em;
}
.gl-rule-name {
font-size: 0.9375rem;
font-weight: 600;
color: var(--c-text);
}
.gl-rule-desc {
font-size: 0.9rem;
color: var(--c-text-2);
line-height: 1.55;
}
/* Review Process */
.rp-stepper { width: 100%; }
.rp-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
position: relative;
}
.rp-steps::before {
content: '';
position: absolute;
top: 28px;
left: 12.5%;
right: 12.5%;
height: 2px;
background: var(--c-cobalt-border);
z-index: 0;
}
.rp-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 1.25rem;
position: relative;
z-index: 1;
}
.rp-circle {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--c-cobalt);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 0 8px var(--c-surface);
margin-bottom: var(--sp-5);
}
.rp-circle svg { width: 22px; height: 22px; color: #fff; }
.rp-step-num {
font-size: 0.68rem;
font-weight: 800;
letter-spacing: .12em;
color: var(--c-cobalt);
text-transform: uppercase;
margin-bottom: var(--sp-2);
}
.rp-step h4 { font-size: 0.9375rem; margin-bottom: var(--sp-2); }
.rp-step p { font-size: 0.8125rem; color: var(--c-text-2); line-height: 1.6; }
/* Why Submit bento */
.wsb-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
}
.wsb-col { display: flex; flex-direction: column; gap: 1.25rem; }
.wsb-eyebrow {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
color: var(--c-accent);
background: var(--c-accent-subtle);
border: 1px solid var(--c-accent-border);
border-radius: var(--r-full);
padding: 0.25rem 0.75rem;
margin-bottom: 0.875rem;
}
/* Large left card */
.wsb-card-lg {
background: var(--c-bg);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-2xl);
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
}
.wsb-card-lg h3 { font-size: 1.375rem; margin-bottom: 0.625rem; }
.wsb-card-lg p { font-size: 0.875rem; color: var(--c-text-2); line-height: 1.65; }
/* Globe visual */
.wsb-visual-lg { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; }
.wsb-globe-wrap {
display: flex;
align-items: center;
justify-content: center;
padding: 40px;
}
.wsb-globe-center {
width: 110px; height: 110px;
border-radius: 50%;
background: var(--c-accent-subtle);
border: 1.5px solid var(--c-accent-border);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
box-shadow:
0 0 0 22px rgba(0,89,173,.07),
0 0 0 44px rgba(0,89,173,.04);
}
.wsb-globe-num {
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 900;
letter-spacing: -0.03em;
color: var(--c-accent);
line-height: 1;
}
.wsb-globe-sub { font-size: 0.75rem; color: var(--c-text-3); margin-top: 0.25rem; }
.wsb-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.wsb-pills span {
font-size: 0.8125rem;
color: var(--c-text-2);
background: var(--c-surface);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-full);
padding: 0.3rem 0.75rem;
}
/* Small right cards */
.wsb-card-sm {
background: var(--c-bg);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-2xl);
padding: 1.75rem;
display: grid;
grid-template-columns: 1fr auto;
gap: 1.5rem;
align-items: center;
flex: 1;
overflow: hidden;
}
.wsb-card-sm h3 { font-size: 1.125rem; margin-bottom: 0.5rem; }
.wsb-card-sm p { font-size: 0.8125rem; color: var(--c-text-2); line-height: 1.6; margin: 0; }
/* Publication flow */
.wsb-visual-pub { flex-shrink: 0; }
.wsb-pub-flow { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; }
.wsb-pub-box {
font-size: 0.75rem; font-weight: 600;
color: var(--c-text-2);
background: var(--c-surface);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-lg);
padding: 0.4rem 0.875rem;
white-space: nowrap;
}
.wsb-pub-active { background: var(--c-accent-subtle); border-color: var(--c-accent-border); color: var(--c-accent); }
.wsb-pub-arrow { font-size: 0.75rem; color: var(--c-text-3); transform: rotate(90deg); }
/* Award tags */
.wsb-visual-awards { flex-shrink: 0; }
.wsb-award-tags { display: flex; flex-direction: column; gap: 0.4rem; }
.wsb-award-tag {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.75rem;
font-weight: 600;
color: var(--c-text-2);
background: var(--c-surface);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-lg);
padding: 0.375rem 0.75rem;
white-space: nowrap;
}
.wsb-award-tag svg { width: 13px; height: 13px; color: var(--c-text-3); }
.wsb-award-tag-featured { background: var(--c-accent-subtle); border-color: var(--c-accent-border); color: var(--c-accent); }
.wsb-award-tag-featured svg { color: var(--c-accent); }
@media (max-width: 768px) {
.wsb-grid { grid-template-columns: 1fr; }
.wsb-card-sm { grid-template-columns: 1fr; }
}
/* Travel Grants */
.grant-kpi-bar {
background: var(--c-accent);
border-radius: var(--r-xl);
display: flex;
align-items: stretch;
overflow: hidden;
margin-bottom: 1rem;
}
.grant-kpi-item {
flex: 1;
padding: 2.5rem 1.5rem;
text-align: center;
}
.grant-kpi-sep {
width: 1px;
background: rgba(255,255,255,0.15);
flex-shrink: 0;
}
.grant-kpi-val {
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 900;
color: #fff;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 0.5rem;
}
.grant-kpi-lbl {
font-size: 0.8rem;
color: rgba(255,255,255,0.65);
font-weight: 500;
line-height: 1.4;
}
.grant-footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1.25rem;
background: var(--c-bg);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-xl);
padding: 1.25rem 1.75rem;
margin-bottom: var(--sp-4);
}
.grant-covers {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.grant-covers-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--c-text-2);
white-space: nowrap;
}
.grant-pill {
display: inline-flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 500;
color: var(--c-text-2);
background: var(--c-surface);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-full);
padding: 0.3rem 0.75rem;
}
.grant-pill svg { width: 13px; height: 13px; color: var(--c-accent); }
.grant-note {
font-size: 0.8125rem;
color: var(--c-text-3);
text-align: center;
line-height: 1.6;
}
/* Eligibility rows */
.elig-rows { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: var(--sp-6); }
.elig-row {
display: grid;
grid-template-columns: 52px 1fr auto;
align-items: center;
gap: 1.25rem;
background: var(--c-bg);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-xl);
padding: 1.375rem 1.5rem;
transition: box-shadow var(--t-base);
}
.elig-row:hover { box-shadow: var(--sh-card); }
.elig-row-icon {
width: 48px; height: 48px;
border-radius: var(--r-lg);
background: var(--c-accent-subtle);
border: 1px solid var(--c-accent-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.elig-row-icon svg { width: 22px; height: 22px; color: var(--c-accent); }
.elig-row-body h4 { font-size: 0.9375rem; margin-bottom: 0.25rem; }
.elig-row-body p { font-size: 0.8125rem; color: var(--c-text-2); line-height: 1.5; margin: 0; }
.elig-row-check {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
font-weight: 700;
color: var(--c-accent);
white-space: nowrap;
flex-shrink: 0;
}
.elig-row-check svg { width: 16px; height: 16px; }
.elig-note {
display: flex;
align-items: flex-start;
gap: 0.75rem;
background: var(--c-accent-subtle);
border: 1px solid var(--c-accent-border);
border-radius: var(--r-lg);
padding: 1rem 1.25rem;
font-size: 0.875rem;
color: var(--c-text-2);
line-height: 1.6;
}
.elig-note svg { width: 16px; height: 16px; color: var(--c-accent); flex-shrink: 0; margin-top: 2px; }
@media (max-width: 900px) {
.gl-row { grid-template-columns: 40px 1fr; }
.gl-rule-name { display: none; }
.rp-timeline { grid-template-columns: 1fr 1fr; }
.rp-steps { grid-template-columns: 1fr 1fr; }
.rp-steps::before { display: none; }
.grant-kpi-bar { flex-direction: column; }
.grant-kpi-sep { width: 100%; height: 1px; }
.grant-footer { flex-direction: column; align-items: flex-start; }
.elig-row { grid-template-columns: 48px 1fr; }
.elig-row-check { display: none; }
.rp-sub { text-align: left; }
.rp-step { padding: 0 0.75rem; }
}
@media (max-width: 500px) {
.rp-timeline { grid-template-columns: 1fr; }
.rp-steps { grid-template-columns: 1fr; }
.rp-step { align-items: flex-start; text-align: left; padding: 0; }
}
/* Deadline banner */
.deadline-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-6);
background: var(--c-accent-subtle);
border: 1px solid var(--c-accent-border);
border-left: 4px solid var(--c-accent);
border-radius: var(--r-xl);
padding: 1.125rem 1.5rem;
flex-wrap: wrap;
}
.deadline-banner-left {
display: flex;
align-items: center;
gap: 1rem;
flex: 1;
}
.deadline-banner-left svg { width: 22px; height: 22px; color: var(--c-accent); flex-shrink: 0; }
.deadline-banner-title {
font-weight: 700;
font-size: 0.9375rem;
color: var(--c-accent);
line-height: 1.3;
}
.deadline-banner-sub {
font-size: 0.8125rem;
color: var(--c-text-2);
margin-top: 0.2rem;
}
/* Presentation categories */
.pres-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
max-width: 900px;
margin: 0 auto;
}
.pres-card {
background: var(--c-bg);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-xl);
display: flex;
gap: 1.5rem;
padding: 2rem;
align-items: flex-start;
transition: box-shadow var(--t-base);
}
.pres-card:hover { box-shadow: var(--sh-card); }
.pres-card-icon {
width: 48px; height: 48px;
border-radius: var(--r-lg);
background: var(--c-accent-subtle);
border: 1px solid var(--c-accent-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pres-card-icon svg { width: 22px; height: 22px; color: var(--c-accent); }
.pres-card-body h3 { font-size: 1.0625rem; margin-bottom: var(--sp-3); }
.pres-card-body p { color: var(--c-text-2); font-size: 0.9375rem; line-height: 1.65; margin-bottom: var(--sp-4); }
.pres-checklist {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pres-checklist li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--c-text-2);
}
.pres-checklist svg { width: 14px; height: 14px; color: var(--c-accent); flex-shrink: 0; }
/* Requirements list */
.req-list {
list-style: none;
display: flex;
flex-direction: column;
gap: 0;
margin-top: var(--sp-6);
}
.req-list li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--c-border);
font-size: 0.9375rem;
color: var(--c-text-2);
line-height: 1.5;
}
.req-list li:last-child { border-bottom: none; }
.req-list svg { width: 14px; height: 14px; color: var(--c-accent); flex-shrink: 0; margin-top: 4px; }
/* Process steps */
.process-steps {
display: flex;
flex-direction: column;
gap: 0;
}
.process-step {
display: flex;
align-items: flex-start;
gap: 1.25rem;
padding: 1rem 0;
border-bottom: 1px solid var(--c-border);
}
.process-step:last-child { border-bottom: none; }
.process-num {
font-size: 0.75rem;
font-weight: 800;
color: var(--c-accent);
background: var(--c-accent-subtle);
border: 1px solid var(--c-accent-border);
border-radius: var(--r-full);
width: 36px; height: 36px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
letter-spacing: .03em;
}
.process-info { display: flex; flex-direction: column; gap: 0.2rem; padding-top: 0.4rem; }
.process-info strong { font-size: 0.9375rem; color: var(--c-text); }
.process-info span { font-size: 0.8125rem; color: var(--c-text-2); }
/* Eligibility list */
.eligibility-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: var(--sp-6);
}
.eligibility-item {
display: flex;
align-items: flex-start;
gap: 1rem;
background: var(--c-surface);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-lg);
padding: 1rem 1.25rem;
}
.eligibility-item--highlight {
background: var(--c-accent-subtle);
border-color: var(--c-accent-border);
}
.eligibility-icon {
width: 36px; height: 36px;
border-radius: var(--r-md);
background: var(--c-bg);
border: 1px solid rgba(26,26,26,.15);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.eligibility-item--highlight .eligibility-icon { background: var(--c-accent-subtle); border-color: var(--c-accent-border); }
.eligibility-icon svg { width: 16px; height: 16px; color: var(--c-accent); }
.eligibility-item strong { display: block; font-size: 0.9rem; color: var(--c-text); margin-bottom: 0.2rem; }
.eligibility-item p { font-size: 0.8125rem; color: var(--c-text-2); line-height: 1.5; margin: 0; }
/* Awards grid */
.awards-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.award-card {
background: var(--c-bg);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-xl);
overflow: hidden;
display: flex;
align-items: stretch;
transition: transform var(--t-base), box-shadow var(--t-base);
}
.award-card:hover { transform: translateY(-3px); box-shadow: var(--sh-lg); }
.award-side {
width: 72px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.award-side svg { width: 24px; height: 24px; color: #fff; }
.aw-yi { background: linear-gradient(180deg, #003F7A, #0059AD); }
.aw-oral { background: linear-gradient(180deg, #005B9E, #0070D2); }
.aw-poster { background: linear-gradient(180deg, #9CB800, #B4D800); }
.aw-lifetime{ background: linear-gradient(180deg, #0059AD, #5686BB); }
.award-card-body {
padding: 1.375rem 1.5rem;
flex: 1;
}
.award-card-body h3 { font-size: 1rem; margin-bottom: 0.375rem; }
.award-card-body p { font-size: 0.8125rem; color: var(--c-text-2); line-height: 1.6; margin-bottom: 0.875rem; }
.award-prize {
display: flex;
flex-wrap: wrap;
gap: 0.375rem;
}
.award-prize span {
font-size: 0.75rem;
font-weight: 700;
color: var(--c-accent);
background: var(--c-accent-subtle);
border: 1px solid var(--c-accent-border);
border-radius: var(--r-full);
padding: 0.2rem 0.625rem;
}
/* Form wrapper */
.abstract-form-wrap {
max-width: 800px;
margin: 0 auto;
}
.abstract-form-header {
margin-bottom: var(--sp-8);
}
.abstract-form-header h2 { margin-top: var(--sp-2); margin-bottom: var(--sp-3); }
.abstract-form-header p { color: var(--c-text-2); }
@media (max-width: 768px) {
.pres-grid { grid-template-columns: 1fr; }
.pres-card { flex-direction: column; gap: 1rem; }
.awards-grid { grid-template-columns: 1fr; }
.deadline-banner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 500px) {
.awards-grid { grid-template-columns: 1fr; }
}
/* ── Faculty Directory ── */
.faculty-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: var(--sp-8);
}
.faculty-head h2 { margin-top: var(--sp-2); }
.faculty-note {
font-size: 0.8125rem;
color: var(--c-text-3);
max-width: 28ch;
text-align: right;
line-height: 1.5;
}
.faculty-list {
background: var(--c-bg);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-xl);
overflow: hidden;
}
.faculty-row {
display: grid;
grid-template-columns: 44px 240px 1fr 140px;
align-items: center;
gap: 1.5rem;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--c-border);
transition: background var(--t-fast);
text-align: left;
}
.faculty-row:last-child { border-bottom: none; }
.faculty-row:hover { background: var(--c-surface); }
.faculty-av {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--c-accent);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.faculty-name {
font-weight: 600;
font-size: 0.9375rem;
color: var(--c-text);
line-height: 1.3;
}
.faculty-inst {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.8rem;
color: var(--c-text-3);
margin-top: 0.2rem;
}
.faculty-inst svg { width: 11px; height: 11px; flex-shrink: 0; }
.faculty-topic {
font-size: 0.875rem;
color: var(--c-text-2);
line-height: 1.4;
}
.faculty-row .session-type {
justify-self: start;
white-space: nowrap;
}
@media (max-width: 900px) {
.faculty-row { grid-template-columns: 40px 1fr 120px; }
.faculty-topic { display: none; }
}
@media (max-width: 600px) {
.faculty-row { grid-template-columns: 36px 1fr; gap: 0.75rem; padding: 0.875rem 1rem; }
.faculty-row .session-type { display: none; }
.faculty-head { flex-direction: column; align-items: flex-start; }
.faculty-note { text-align: left; }
}
/* ── IFSI Organiser Section ── */
.ifsi-section {
background: var(--c-surface);
padding-block: clamp(4rem, 8vw, 7rem);
position: relative;
overflow: hidden;
}
.ifsi-section::before {
content: 'IFSI';
position: absolute;
right: -1rem;
top: 50%;
transform: translateY(-50%);
font-family: var(--font-display);
font-size: clamp(10rem, 22vw, 20rem);
font-weight: 900;
letter-spacing: -0.04em;
color: rgba(0,89,173,.05);
line-height: 1;
pointer-events: none;
user-select: none;
}
.ifsi-org-label {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-accent);
margin-bottom: var(--sp-4);
}
.ifsi-title {
color: var(--c-text);
font-size: clamp(1.75rem, 4vw, 2.75rem);
margin-bottom: var(--sp-5);
max-width: 700px;
}
.ifsi-body {
color: var(--c-text-2);
line-height: 1.75;
max-width: 600px;
margin-bottom: var(--sp-12);
font-size: 1rem;
}
.ifsi-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 2rem;
padding-top: var(--sp-8);
border-top: 1px solid var(--c-border-md);
}
.ifsi-kpis { display: flex; align-items: center; }
.ifsi-kpi {
display: flex;
flex-direction: column;
padding: 0 2rem;
text-align: center;
}
.ifsi-kpi:first-child { padding-left: 0; }
.ifsi-kpi-num {
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.5rem);
font-weight: 900;
letter-spacing: -0.03em;
color: var(--c-accent);
line-height: 1;
margin-bottom: 0.25rem;
}
.ifsi-kpi-lbl { font-size: 0.75rem; color: var(--c-text-3); font-weight: 500; }
.ifsi-kpi-sep { width: 1px; height: 40px; background: var(--c-border-md); flex-shrink: 0; }
.ifsi-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ifsi-tags span {
font-size: 0.8125rem;
font-weight: 500;
color: var(--c-accent);
background: var(--c-accent-subtle);
border: 1px solid var(--c-accent-border);
border-radius: var(--r-full);
padding: 0.3rem 0.875rem;
}
@media (max-width: 768px) {
.ifsi-bottom { flex-direction: column; align-items: flex-start; }
.ifsi-kpi { padding: 0 1.25rem; }
}
/* ≤480px — four KPIs + three 1px separators can no longer fit in a single
row, so re-flow into a 2×2 grid and hide the now-meaningless vertical
dividers. minmax(0,1fr) prevents long labels (e.g. "WCI Edition") from
blowing out the cell width. */
@media (max-width: 480px) {
.ifsi-kpis {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem 0.75rem;
width: 100%;
}
.ifsi-kpi { padding: 0; }
.ifsi-kpi-sep { display: none; }
}
/* ── Timeline (horizontal) ── */
.timeline {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
/* subtle fade hint on the right edge when scrollable */
-ms-overflow-style: none;
scrollbar-width: thin;
}
.timeline::-webkit-scrollbar { height: 4px; }
.timeline::-webkit-scrollbar-track { background: transparent; }
.timeline::-webkit-scrollbar-thumb { background: var(--c-border-md); border-radius: 4px; }
.tl-years, .tl-dots, .tl-cards {
display: grid;
grid-template-columns: repeat(4, minmax(160px, 1fr));
min-width: 640px;
}
.tl-year {
text-align: center;
font-family: var(--font-display);
font-size: 1.5rem;
font-weight: 900;
letter-spacing: -0.03em;
color: var(--c-text-3);
line-height: 1;
padding-bottom: 1rem;
}
.tl-year--next { color: var(--c-accent); }
.tl-dots {
position: relative;
padding: 0.625rem 0;
}
.tl-dots::before {
content: '';
position: absolute;
top: 50%;
left: 12.5%;
right: 12.5%;
height: 2px;
background: var(--c-border-md);
transform: translateY(-50%);
z-index: 0;
}
.tl-dot-wrap {
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.tl-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--c-bg);
border: 2px solid var(--c-border-md);
flex-shrink: 0;
}
.tl-dot--next {
background: var(--c-accent);
border-color: var(--c-accent);
box-shadow: 0 0 0 5px var(--c-accent-subtle);
width: 16px;
height: 16px;
}
.tl-cards {
gap: 0.75rem;
padding-top: 1rem;
align-items: stretch;
}
.tl-card {
background: var(--c-bg);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-xl);
padding: 1.25rem;
transition: box-shadow var(--t-base), transform var(--t-base);
}
.tl-card:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); }
.tl-card--next {
background: var(--c-accent-subtle);
border-color: var(--c-accent-border);
border-top: 3px solid var(--c-accent);
}
.timeline-badge {
display: block;
width: fit-content;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--c-accent);
background: var(--c-accent-subtle);
border: 1px solid var(--c-accent-border);
border-radius: var(--r-full);
padding: 0.15rem 0.6rem;
margin-bottom: 0.625rem;
}
.tl-location {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.9375rem;
font-weight: 700;
color: var(--c-text);
margin-bottom: 0.5rem;
}
.tl-location svg { width: 13px; height: 13px; color: var(--c-accent); flex-shrink: 0; }
.tl-card--next .tl-location { color: var(--c-accent); }
.tl-card p { font-size: 0.8125rem; color: var(--c-text-2); line-height: 1.65; margin: 0; }
/* ── Welcome band (about page) ── */
.welcome-band {
background: var(--c-bg);
padding-bottom: clamp(3rem, 6vw, 5rem);
position: relative;
overflow: hidden;
}
.welcome-band::before {
content: '';
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 700px; height: 700px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,89,173,.05) 0%, transparent 65%);
pointer-events: none;
}
.welcome-band::after {
content: 'WCI';
position: absolute;
right: -2rem;
bottom: -2rem;
font-family: var(--font-display);
font-size: clamp(10rem, 20vw, 18rem);
font-weight: 900;
letter-spacing: -0.04em;
color: rgba(0,89,173,.03);
line-height: 1;
pointer-events: none;
user-select: none;
}
.welcome-ticker {
overflow: hidden;
border-top: 1px solid var(--c-border-md);
border-bottom: 1px solid var(--c-border-md);
padding: 0.75rem 0;
background: var(--c-surface);
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.welcome-ticker-track {
display: flex;
align-items: center;
gap: 1.5rem;
width: max-content;
animation: ticker-scroll 25s linear infinite;
}
.welcome-ticker-track span {
font-size: 0.875rem;
font-weight: 500;
color: var(--c-text-2);
white-space: nowrap;
}
.ticker-sep { color: var(--c-text-4) !important; }
@keyframes ticker-scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
.welcome-content {
text-align: center;
max-width: 760px;
margin: 0 auto var(--sp-10);
}
.welcome-heading {
font-size: clamp(1.75rem, 3.5vw, 2.75rem);
margin-top: var(--sp-3);
margin-bottom: var(--sp-8);
line-height: 1.4;
}
.wh-dark {
color: var(--c-text-3);
transition: color 0.8s ease;
}
.wh-grey {
color: var(--c-text-4);
transition: color 0.8s ease 0.15s;
}
.welcome-heading.anim-in .wh-dark { color: var(--c-text); }
.welcome-heading.anim-in .wh-grey { color: var(--c-text-2); }
.welcome-pills {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.welcome-pills span {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.875rem;
font-weight: 500;
color: var(--c-text-2);
background: var(--c-surface);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-full);
padding: 0.5rem 1.125rem;
font-style: italic;
}
.welcome-pills svg { width: 15px; height: 15px; color: var(--c-accent); }
.welcome-stats {
display: flex;
align-items: center;
justify-content: center;
border-top: 1px solid var(--c-border-md);
padding-top: var(--sp-8);
}
.welcome-stat { flex: 1; text-align: center; padding: var(--sp-4) var(--sp-6); }
.welcome-stat-num {
font-family: var(--font-display);
font-size: clamp(2rem, 4vw, 2.75rem);
font-weight: 900;
letter-spacing: -0.04em;
color: var(--c-text);
line-height: 1;
margin-bottom: 0.5rem;
}
.welcome-stat-lbl { font-size: 0.8125rem; color: var(--c-text-3); }
.welcome-stat-sep { width: 1px; height: 56px; background: var(--c-border-md); flex-shrink: 0; }
@media (max-width: 600px) {
.welcome-stats { flex-wrap: wrap; }
.welcome-stat-sep { display: none; }
.welcome-stat { min-width: 50%; }
}
/* ── Congress Objectives bento ── */
.co-bento {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
grid-template-rows: 280px 280px;
gap: 1rem;
}
/* Explicit placement */
.co-bento > *:nth-child(1) { grid-column: 1; grid-row: 1; }
.co-bento > *:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
.co-bento > *:nth-child(3) { grid-column: 3; grid-row: 1; }
.co-bento > *:nth-child(4) { grid-column: 1; grid-row: 2; }
.co-bento > *:nth-child(5) { grid-column: 3; grid-row: 2; }
.co-text-card {
background: var(--c-bg);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-2xl);
padding: 1.75rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 1rem;
overflow: hidden;
}
.co-eyebrow {
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-accent);
}
.co-text-card p { font-size: 0.8125rem; color: var(--c-text-2); line-height: 1.7; margin: 0; }
.co-stat-num {
font-family: var(--font-display);
font-size: clamp(2.5rem, 4vw, 3.5rem);
font-weight: 900;
letter-spacing: -0.04em;
color: var(--c-text);
line-height: 1;
margin-bottom: 0.5rem;
}
.co-stat-label { font-size: 0.9375rem; font-weight: 600; color: var(--c-text-2); }
.co-img-card {
border-radius: var(--r-2xl);
overflow: hidden;
position: relative;
}
.co-img-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.co-img-overlay {
position: absolute;
bottom: 1rem; left: 1rem; right: 1rem;
background: rgba(0,0,0,.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: var(--r-lg);
padding: 0.75rem 1rem;
}
.co-img-label { font-size: 0.9375rem; font-weight: 600; color: #fff; }
.co-tall-card {
border-radius: var(--r-2xl);
overflow: hidden;
position: relative;
}
.co-tall-card img {
width: 100%; height: 100%;
object-fit: cover; object-position: center top;
display: block;
position: absolute; inset: 0;
}
.co-tall-overlay {
position: absolute;
bottom: 1rem; left: 1rem; right: 1rem;
background: rgba(0,0,0,.6);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border-radius: var(--r-lg);
padding: 1rem 1.25rem;
}
.co-tall-stat {
font-family: var(--font-display);
font-size: 2.5rem;
font-weight: 900;
letter-spacing: -0.04em;
color: #fff;
line-height: 1;
margin-bottom: 0.375rem;
}
.co-tall-overlay p { font-size: 0.8125rem; color: rgba(255,255,255,.8); line-height: 1.55; margin: 0; }
@media (max-width: 768px) {
.co-bento { grid-template-columns: 1fr; grid-template-rows: auto; }
.co-bento > * { grid-column: 1 !important; grid-row: auto !important; }
.co-tall-card { min-height: 320px; }
.co-img-card { min-height: 240px; }
}
/* ── Who Should Attend cards ── */
.attend-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.attend-card {
background: var(--c-bg);
border: 1px solid rgba(26,26,26,.15);
border-radius: var(--r-2xl);
overflow: hidden;
transition: transform var(--t-base), box-shadow var(--t-base);
}
.attend-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.attend-visual {
height: 200px;
background: linear-gradient(145deg, #EEF3FC 0%, #F8FBFF 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.attend-visual::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 55%, rgba(0,89,173,.13) 0%, transparent 65%);
}
.attend-icon {
width: 80px; height: 80px;
background: var(--c-cobalt);
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
box-shadow: 0 10px 36px rgba(0,89,173,.35), 0 2px 8px rgba(0,89,173,.2);
}
.attend-icon svg { width: 36px; height: 36px; color: #fff; }
.attend-text {
padding: 1.5rem;
text-align: center;
border-top: 1px solid var(--c-border-md);
}
.attend-text h3 { font-size: 1rem; margin-bottom: 0.5rem; }
.attend-text p { font-size: 0.8125rem; color: var(--c-text-2); line-height: 1.65; margin: 0; }
@media (max-width: 900px) { .attend-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { .attend-grid { grid-template-columns: 1fr; } }
/* ── Sponsor Tier Cards ── */
.sponsor-tier-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
align-items: stretch;
}
.tier-card {
border-radius: var(--r-xl);
overflow: hidden;
background: var(--c-card);
border: 1px solid var(--c-border);
box-shadow: var(--sh-card);
display: flex;
flex-direction: column;
transition: box-shadow var(--t-base), transform var(--t-base);
}
.tier-card:hover { box-shadow: var(--sh-lg); transform: translateY(-3px); }
.tier-card--featured {
background: #001830;
border-color: rgba(0,89,173,.5);
box-shadow: 0 8px 32px rgba(0,89,173,.2);
}
.tier-card--featured:hover { transform: translateY(-3px); box-shadow: 0 16px 48px rgba(0,89,173,.25); }
.tier-card-top {
height: 5px;
}
.tier-card-top.t-exhibitor { background: var(--c-border-md); }
.tier-card-top.t-silver { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.tier-card-top.t-gold { background: linear-gradient(90deg, #D97706, #FBBF24); }
.tier-card-top.t-platinum { background: linear-gradient(90deg, var(--c-accent), #0070D2); }
.tier-card-body {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
flex: 1;
}
.tier-label {
font-size: .6875rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-text-3);
}
.tier-card--featured .tier-label { color: rgba(255,255,255,.45); }
.tier-price-row { display: flex; align-items: flex-end; gap: .375rem; }
.tier-from { font-size: .75rem; color: var(--c-text-3); margin-bottom: .25rem; }
.tier-amount {
font-family: var(--font-display);
font-size: clamp(1.75rem, 3vw, 2.25rem);
font-weight: 900;
letter-spacing: -0.04em;
color: var(--c-text);
line-height: 1;
}
.tier-card--featured .tier-amount { color: #ffffff; }
.t-gold-price { color: #D97706; }
.tier-divider { border: none; border-top: 1px solid var(--c-border); margin: 0; }
.tier-card--featured .tier-divider { border-color: rgba(255,255,255,.1); }
.tier-features {
list-style: none;
display: flex;
flex-direction: column;
gap: .625rem;
flex: 1;
}
.tier-features li {
font-size: .8125rem;
color: var(--c-text-2);
padding-left: 1.125rem;
position: relative;
line-height: 1.5;
}
.tier-features li::before {
content: '';
position: absolute;
left: 0;
top: .5em;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--c-accent);
}
.tier-card--featured .tier-features li { color: rgba(255,255,255,.7); }
.tier-card--featured .tier-features li::before { background: var(--c-highlight); }
.tier-best-tag {
font-size: .5625rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--c-highlight);
background: rgba(180,216,0,.12);
border: 1px solid rgba(180,216,0,.3);
border-radius: var(--r-full);
padding: .25rem .625rem;
}
@media (max-width: 900px) {
.sponsor-tier-grid { grid-template-columns: 1fr 1fr; }
.tier-card--featured:hover { transform: translateY(-3px); }
}
@media (max-width: 560px) {
.sponsor-tier-grid { grid-template-columns: 1fr; }
}
/* ── Tier badge (legacy, kept for compatibility) ── */
.tier-badge {
display: inline-block;
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
padding: var(--sp-1) var(--sp-3);
border-radius: var(--r-full);
}
.tier-badge.platinum { background: rgba(100,116,139,.1); color: #475569; border: 1px solid rgba(100,116,139,.25); }
.tier-badge.gold { background: rgba(217,119,6,.1); color: #92400E; border: 1px solid rgba(217,119,6,.25); }
.tier-badge.silver { background: rgba(107,114,128,.1); color: #374151; border: 1px solid rgba(107,114,128,.25); }
.tier-badge.exhibitor { background: var(--c-accent-subtle); color: var(--c-accent-bright); border: 1px solid var(--c-accent-border); }
/* ── Nav Inline Search ── */
.nav-search-wrap {
position: relative;
margin-left: auto;
flex-shrink: 0;
}
.nav-search-box {
display: flex;
align-items: center;
gap: 0.4rem;
background: var(--c-surface);
border: 1.5px solid var(--c-border-md);
border-radius: var(--r-full);
padding: 0.4375rem 0.875rem;
width: 240px;
transition: border-color var(--t-fast), background var(--t-fast);
cursor: text;
}
.nav-search-box:focus-within {
border-color: var(--c-accent);
background: #fff;
}
.nav-search-box svg { color: var(--c-text-3); flex-shrink: 0; }
.nav-search-input {
flex: 1;
border: none;
background: none;
font-size: 0.8125rem;
font-family: var(--font-body);
color: var(--c-text);
outline: none;
min-width: 0;
}
.nav-search-input::placeholder { color: var(--c-text-3); }
.nav-search-results {
display: none;
position: absolute;
top: calc(100% + 0.75rem);
left: 0;
right: auto;
width: 420px;
max-width: min(420px, calc(100vw - 2rem));
max-height: min(70vh, 540px);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--c-bg);
border: 1px solid rgba(26,26,26,.12);
border-radius: var(--r-xl);
box-shadow: 0 12px 48px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.05);
z-index: 500;
flex-direction: column;
padding: 0.4rem;
}
.nav-search-results.active { display: flex; }
/* Custom scrollbar for the dropdown (webkit + firefox). */
.nav-search-results { scrollbar-width: thin; scrollbar-color: rgba(26,26,26,.2) transparent; }
.nav-search-results::-webkit-scrollbar { width: 6px; }
.nav-search-results::-webkit-scrollbar-thumb { background: rgba(26,26,26,.2); border-radius: 3px; }
.search-result-item {
position: relative;
display: block;
padding: 0.7rem 2.4rem 0.7rem 0.85rem; /* extra right pad for chevron */
text-decoration: none;
transition: background var(--t-fast), color var(--t-fast);
border-radius: var(--r-lg);
outline: none;
}
.search-result-item + .search-result-item {
border-top: 1px solid rgba(26,26,26,.06);
}
.search-result-item:hover,
.search-result-item.is-active,
.search-result-item:focus-visible {
background: var(--c-surface);
}
.search-result-item.is-active { box-shadow: inset 2px 0 0 var(--c-accent); }
.search-result-head {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.3rem;
}
.search-result-page {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-accent);
line-height: 1;
}
.search-result-flag {
font-size: 0.6rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--c-text-3);
background: rgba(26,26,26,.06);
padding: 0.18rem 0.45rem;
border-radius: var(--r-full);
line-height: 1;
}
.search-result-title {
display: block;
font-size: 0.9rem;
font-weight: 600;
color: var(--c-text);
line-height: 1.35;
letter-spacing: -0.005em;
}
.search-result-desc {
margin-top: 0.25rem;
font-size: 0.78rem;
font-weight: 400;
color: var(--c-text-2);
line-height: 1.45;
/* Clamp to two lines so cards stay tidy. */
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.search-result-item:hover .search-result-title,
.search-result-item.is-active .search-result-title,
.search-result-item:focus-visible .search-result-title { color: var(--c-accent); }
/* Highlighted matched terms inside the result card. */
.search-result-item mark {
background: rgba(0,89,173,.14);
color: var(--c-accent);
padding: 0 0.18em;
border-radius: 3px;
font-weight: 700;
}
/* Chevron arrow on the right (active/hover only). */
.search-result-arrow {
position: absolute;
right: 0.85rem;
top: 50%;
transform: translate(-4px, -50%);
color: var(--c-text-3);
opacity: 0;
transition: opacity var(--t-fast), transform var(--t-fast), color var(--t-fast);
}
.search-result-item:hover .search-result-arrow,
.search-result-item.is-active .search-result-arrow,
.search-result-item:focus-visible .search-result-arrow {
opacity: 1;
transform: translate(0, -50%);
color: var(--c-accent);
}
/* "Coming Soon" search results: muted look + reset hover so they don't pretend to be live. */
.search-result-item.coming-soon {
cursor: not-allowed;
}
.search-result-item.coming-soon .search-result-title { color: var(--c-text-2); }
.search-result-item.coming-soon:hover,
.search-result-item.coming-soon.is-active {
background: rgba(26,26,26,.03);
}
.search-result-item.coming-soon:hover .search-result-title,
.search-result-item.coming-soon.is-active .search-result-title {
color: var(--c-text);
}
.search-result-item.coming-soon .search-result-flag {
color: #fff;
background: var(--c-accent);
letter-spacing: .1em;
}
/* The "Coming soon" badge already conveys the disabled state, and the dropdown's
overflow would clip the floating tooltip — so suppress the pseudo-element
tooltip for search results specifically (it's still active everywhere else). */
.search-result-item.coming-soon::before,
.search-result-item.coming-soon::after { display: none !important; }
/* Empty / no-results state. */
.search-no-results {
padding: 1.5rem 1rem 1.25rem;
text-align: center;
color: var(--c-text-2);
}
.search-no-results__icon {
display: inline-block;
color: var(--c-text-3);
margin-bottom: 0.5rem;
opacity: 0.7;
}
.search-no-results__title {
margin: 0 0 0.4rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--c-text);
}
.search-no-results__hint {
margin: 0;
font-size: 0.8rem;
color: var(--c-text-3);
line-height: 1.5;
}
.search-no-results__hint em {
font-style: normal;
font-weight: 600;
color: var(--c-text-2);
background: rgba(26,26,26,.05);
padding: 0.05em 0.4em;
border-radius: 3px;
margin: 0 0.1em;
}
@media (max-width: 900px) {
.nav-search-wrap { display: none; }
}
.sponsor-logo-slot {
background: var(--c-card);
border: 1px dashed var(--c-border-md);
border-radius: var(--r-lg);
display: flex;
align-items: center;
justify-content: center;
color: var(--c-text-3);
font-family: var(--font-display);
font-size: 0.8125rem;
font-weight: 600;
transition: border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.sponsor-logo-slot:hover { border-color: var(--c-accent-border); color: var(--c-accent-bright); background: var(--c-accent-subtle); }
/* ── Steps ── */
.steps-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--sp-4);
counter-reset: step-ctr;
}
.step-card {
padding: var(--sp-6);
counter-increment: step-ctr;
}
.step-card::before {
content: counter(step-ctr, decimal-leading-zero);
font-family: var(--font-display);
font-size: 2rem;
font-weight: 900;
color: var(--c-accent-subtle);
display: block;
margin-bottom: var(--sp-4);
border-bottom: 1px solid var(--c-line);
padding-bottom: var(--sp-3);
}
/* ── Grid utilities ── */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.grid-auto-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.grid-auto-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
/* ── Footer ── */
.site-footer {
padding: clamp(3rem, 6vw, 5rem) 0 clamp(1.5rem, 3vw, 2.5rem);
}
/* Footer head — branding + CTA */
.footer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
margin-bottom: 2.5rem;
}
.footer-head-left {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.site-footer .footer-head-left img {
height: 88px;
width: auto;
display: block;
filter: none;
background: #fff;
border-radius: 8px;
padding: 4px 10px;
}
.footer-brand {
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0;
}
.footer-title {
font-family: inherit;
font-size: clamp(1.125rem, 1.6vw, 1.5rem);
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.15;
color: #fff;
margin: 0;
}
.footer-title-accent { color: #BCD800; }
.footer-event-info {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.footer-event-info span {
font-size: 0.875rem;
color: rgba(255,255,255,.6);
}
.footer-dot { color: rgba(255,255,255,.25) !important; }
/* Divider */
.footer-rule {
height: 1px;
background: rgba(255,255,255,.1);
margin-bottom: 2.5rem;
}
/* Links grid */
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-bottom: 2.5rem;
}
.footer-col h5 {
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: rgba(255,255,255,.35);
margin-bottom: 1.25rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col a {
font-size: 0.875rem;
color: rgba(255,255,255,.75);
transition: color var(--t-fast);
text-decoration: none;
}
.footer-col a:hover { color: #fff; }
/* Bottom bar */
.footer-bottom {
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,.08);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
}
.footer-bottom p { font-size: 0.8125rem; color: rgba(255,255,255,.3); }
.footer-bottom-right {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.footer-bottom-right > a {
font-size: 0.8125rem;
color: rgba(255,255,255,.35);
text-decoration: none;
transition: color var(--t-fast);
}
.footer-bottom-right > a:hover { color: rgba(255,255,255,.7); }
.social-links { display: flex; gap: 0.625rem; }
/* When the social cluster lives inside the Contact footer-col (sibling of
the email
), give it some breathing room from the email list above. */
.footer-col .social-links { margin-top: 1rem; }
.social-link {
width: 34px; height: 34px;
border-radius: 50%;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8125rem;
color: rgba(255,255,255,.6);
transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
text-decoration: none;
}
.social-link:hover { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
/* Powered-by attribution — sits inline at the end of .footer-bottom-right,
alongside the social icons. Spacing between it and the social-links
cluster comes from the parent's gap:1.5rem; flex-wrap on the parent
handles narrow viewports cleanly. Image height fixed at 36px per spec;
the SVG's white fill matches the dark footer background. */
.footer-powered {
display: inline-flex;
align-items: center;
text-decoration: none;
opacity: .7;
transition: opacity var(--t-fast);
}
.footer-powered:hover,
.footer-powered:focus-visible { opacity: 1; }
.footer-powered img {
height: 36px;
width: auto;
display: block;
/* Guard against the SVG overflowing on very narrow viewports. */
max-width: 100%;
}
@media (max-width: 768px) {
.footer-head { flex-direction: column; align-items: flex-start; }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
.footer-grid { grid-template-columns: 1fr; }
}
/* ── Animations ── */
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
@keyframes scroll-down {
0% { opacity: 0; transform: scaleY(0); transform-origin: top; }
40% { opacity: 1; transform: scaleY(1); transform-origin: top; }
80% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
100% { opacity: 0; }
}
.anim-ready {
opacity: 0;
transform: translateY(24px);
transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
}
.anim-ready.anim-in { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .08s; }
.d2 { transition-delay: .16s; }
.d3 { transition-delay: .24s; }
.d4 { transition-delay: .32s; }
.d5 { transition-delay: .40s; }
.d6 { transition-delay: .48s; }
/* If JS is disabled or hasn't run yet, never hide content. */
html:not(.js) .anim-ready { opacity: 1; transform: none; }
/* ── Page transitions (fade-in on load, fade-out on internal navigation) ── */
@keyframes pageEnter {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes pageLeave {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-4px); }
}
html.js body {
animation: pageEnter 280ms cubic-bezier(.16,1,.3,1) both;
background: var(--c-bg);
}
html.js body.is-leaving {
animation: pageLeave 200ms cubic-bezier(.4,0,.2,1) both;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
html.js body,
html.js body.is-leaving { animation: none !important; }
}
/* ── Utilities ── */
.w-full { width: 100%; }
.text-accent { color: var(--c-accent-bright); }
.text-muted { color: var(--c-text-3); }
.text-center { text-align: center; }
.mt-2 { margin-top: var(--sp-2); }
.mt-4 { margin-top: var(--sp-4); }
.mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); }
.mt-10 { margin-top: var(--sp-10); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-6 { margin-bottom: var(--sp-6); }
.mb-8 { margin-bottom: var(--sp-8); }
.d-flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }
.align-center { align-items: center; }
/* ── Responsive ── */
@media (max-width: 1024px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.grid-4 { grid-template-columns: repeat(2,1fr); }
.split { grid-template-columns: 1fr; }
.split.reverse { direction: ltr; }
}
@media (max-width: 768px) {
.nav-links, .nav-cta { display: none; }
.nav-dropdown { display: none; }
.nav-toggle { display: flex; margin-left: auto; }
.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
.grid-auto-3, .grid-auto-2 { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.session-item { grid-template-columns: 1fr; gap: var(--sp-2); }
.footer-grid { grid-template-columns: 1fr; }
.cta-actions { flex-direction: column; align-items: center; }
.cta-actions .btn { width: 100%; max-width: 320px; }
.pricing-grid { grid-template-columns: 1fr; }
.reg-grid { grid-template-columns: 1fr; }
.hero-h1 { font-size: clamp(2.75rem, 14vw, 4rem); }
}
@media (max-width: 480px) {
.hero-actions { flex-direction: column; }
.hero-actions .btn { width: 100%; }
.hero-chips { flex-direction: column; }
.day-tabs { gap: 0; }
.day-tab { padding: .75rem 1rem; font-size: .75rem; }
}
/* ════════════════════════════════════════
LIGHT THEME — TARGETED OVERRIDES
════════════════════════════════════════ */
/* ── Headings: Inter looks best with tight negative tracking ── */
h1, h2 { letter-spacing: -0.025em; }
h3, h4, h5 { letter-spacing: -0.015em; }
/* ── Nav: white links + white button on blue homepage banner ── */
.site-header:not(.scrolled) .nav-logo img { filter: none; }
.site-header:not(.scrolled) .nav-logo { background: none; padding: 0; border-radius: 0; }
.site-header:not(.scrolled) .nav-links a { color: var(--c-text-2); }
.site-header:not(.scrolled) .nav-links a:hover,
.site-header:not(.scrolled) .nav-links a.active { color: var(--c-accent); }
.site-header:not(.scrolled) .nav-toggle span { background: var(--c-text); }
.site-header:not(.scrolled) .nav-cta {
background: #ffffff;
color: #0059AD;
box-shadow: 0 2px 12px rgba(0,0,0,.15);
}
.site-header:not(.scrolled) .nav-cta:hover {
background: rgba(255,255,255,.9);
box-shadow: 0 4px 20px rgba(0,0,0,.2);
transform: translateY(-1px);
}
/* scrolled nav → dark text, blue button */
.site-header.scrolled .nav-links a { color: var(--c-text); }
.site-header.scrolled .nav-links a:hover,
.site-header.scrolled .nav-links a.active { color: var(--c-text); }
.site-header.scrolled .nav-toggle span { background: var(--c-text); }
.site-header.scrolled .nav-cta {
background: var(--c-accent);
color: #ffffff;
}
.site-header.scrolled .nav-cta:hover { background: #003F7A; }
/* inner pages: blue page-hero → nav stays white on initial load */
body.inner-page .site-header.scrolled {
background: transparent;
box-shadow: none;
border-bottom-color: rgba(255,255,255,.12);
}
body.inner-page .site-header.scrolled .nav-logo img { filter: none; }
body.inner-page .site-header.scrolled .nav-logo {
background: rgba(255,255,255,.92);
border-radius: 8px;
padding: 4px 10px;
}
body.inner-page .site-header.scrolled:not(.scrolled-past) .nav-links a { color: rgba(255,255,255,.8); }
body.inner-page .site-header.scrolled:not(.scrolled-past) .nav-links a:hover,
body.inner-page .site-header.scrolled:not(.scrolled-past) .nav-links a.active { color: #fff; }
body.inner-page .site-header.scrolled:not(.scrolled-past) .nav-toggle span { background: #fff; }
body.inner-page .site-header.scrolled:not(.scrolled-past) .nav-cta { background: #fff; color: var(--c-accent); }
body.inner-page .site-header.scrolled:not(.scrolled-past) .nav-cta:hover { background: rgba(255,255,255,.9); }
/* once user scrolls past hero, JS adds .scrolled-past and nav becomes normal */
body.inner-page .site-header.scrolled-past {
background: rgba(255,255,255,.96);
backdrop-filter: blur(20px) saturate(200%);
box-shadow: 0 1px 24px rgba(0,0,0,.07);
border-bottom-color: var(--c-border);
}
body.inner-page .site-header.scrolled-past .nav-logo img { filter: none; }
body.inner-page .site-header.scrolled-past .nav-logo { background: none; padding: 0; border-radius: 0; }
body.inner-page .site-header.scrolled-past .nav-links a { color: var(--c-text) !important; }
body.inner-page .site-header.scrolled-past .nav-links a:hover,
body.inner-page .site-header.scrolled-past .nav-links a.active { color: var(--c-accent) !important; }
body.inner-page .site-header.scrolled-past .nav-toggle span { background: var(--c-text); }
body.inner-page .site-header.scrolled-past .nav-cta { background: var(--c-accent); color: #fff; }
body.inner-page .site-header.scrolled-past .nav-cta:hover { background: #003F7A; }
/* ── Mobile nav ── */
.mobile-nav a { color: var(--c-text-2); }
.mobile-nav a:hover { color: var(--c-text); background: var(--c-surface); }
/* ── Dropdown on light nav ── */
.dropdown-menu { box-shadow: 0 8px 32px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.06); }
.dropdown-menu a { color: var(--c-text-2) !important; }
.dropdown-menu a:hover { background: var(--c-surface) !important; color: var(--c-text) !important; }
/* ── Footer ── */
.site-footer { background: #001830; }
/* ── Visual box — light tint ── */
.visual-box-inner {
background:
radial-gradient(ellipse 60% 60% at 30% 50%, rgba(0,89,173,.18) 0%, transparent 60%),
linear-gradient(135deg, var(--c-surface) 0%, #FFFFFF 100%);
}
/* ── Page hero — light version ── */
.page-hero::before {
background: radial-gradient(ellipse 70% 80% at 20% 50%, rgba(0,89,173,.10) 0%, transparent 60%);
}
/* ── Step card counter ── */
.step-card::before { color: var(--c-accent-subtle); filter: brightness(.5); }
/* ── FAQ items on light bg ── */
.faq-question { color: var(--c-text); }
.faq-question:hover { color: var(--c-accent); }
.faq-answer { color: var(--c-text-2); background: var(--c-surface); }
.faq-item { border-bottom-color: var(--c-border); }
/* ── Session items ── */
.session-time { color: var(--c-text-3); }
.session-type.keynote { background: rgba(0,89,173,.1); color: #5686BB; border-color: rgba(0,89,173,.25); }
.session-type.plenary { background: rgba(0,89,173,.08); color: #0070D2; }
.session-type.clinical { background: rgba(0,89,173,.08); color: #0059AD; }
.session-type.workshop { background: rgba(245,158,11,.1); color: #92400E; }
/* ── Pricing cards ── */
.pricing-card { background: var(--c-card); border-color: var(--c-border); }
.pricing-card.featured { border-color: var(--c-accent); }
.pricing-card .pricing-header { background: var(--c-surface); }
.pricing-card.featured .pricing-header { background: linear-gradient(135deg, var(--c-accent) 0%, #0070D2 100%); }
/* ── Speaker / spk cards on light ── */
.speaker-card, .card { background: var(--c-card); border-color: var(--c-border); }
.card:hover { background: var(--c-card-hover); }
/* ── Eyebrow on light ── */
.eyebrow { color: var(--c-accent); }
.eyebrow::before { background: var(--c-accent); }
/* ── Program day tabs on light ── */
.day-tab { color: var(--c-text-2); border-color: var(--c-border); }
.day-tab.active { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
/* ── Obj list arrow ── */
.obj-arrow { color: var(--c-accent); }
/* ── Info icon ── */
.info-icon { background: var(--c-surface); color: var(--c-accent); border: 1px solid var(--c-border); }
/* ── Feature icon ── */
.feature-icon { background: var(--c-accent-subtle); }
/* ── Form inputs on light ── */
.form-input, .form-select, .form-textarea {
background: #ffffff;
border-color: var(--c-border-md);
color: var(--c-text);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
background: #ffffff;
border-color: var(--c-accent);
box-shadow: 0 0 0 3px rgba(0,89,173,.10);
}
/* ── Badge ring text on blue banner ── */
.hb-badge-inner {
background: rgba(255,255,255,.2);
border-color: rgba(255,255,255,.3);
color: #ffffff;
}
/* ══════════════════════════════════════════════════════════════
COLOUR HIERARCHY CORRECTIONS
Primary (red #0059AD): buttons, CTAs, hero banners
Secondary (orange #0070D2): hover states, eyebrows, accents
Cobalt (#5686BB): icons, informational elements, body links
Yellow (#B4D800): soft section backgrounds only (no text)
══════════════════════════════════════════════════════════════ */
/* 1. Global links — inherit context colour; cobalt only for body content */
a { color: inherit; }
.info-body a,
.visa-card p a,
.grant-note a,
.disc-info p a,
.tl-card p a { color: var(--c-cobalt); }
/* 2. Icon containers — cobalt, not red */
.feature-icon {
background: var(--c-cobalt-subtle) !important;
border-color: var(--c-cobalt-border) !important;
}
.feature-icon svg { stroke: var(--c-cobalt) !important; color: var(--c-cobalt) !important; }
.card:hover .feature-icon { background: var(--c-cobalt) !important; box-shadow: none !important; }
.card:hover .feature-icon svg { stroke: #fff !important; color: #fff !important; }
.info-icon {
background: var(--c-cobalt-subtle) !important;
border-color: var(--c-cobalt-border) !important;
}
.info-icon svg { stroke: var(--c-cobalt) !important; }
.venue-detail-icon { background: var(--c-cobalt-subtle) !important; border-color: var(--c-cobalt-border) !important; }
.venue-detail-icon svg { color: var(--c-cobalt) !important; }
.glance-icon { background: var(--c-cobalt-subtle) !important; border-color: var(--c-cobalt-border) !important; }
.glance-icon svg { color: var(--c-cobalt) !important; }
.visa-card-icon { background: var(--c-cobalt-subtle) !important; border-color: var(--c-cobalt-border) !important; }
.visa-card-icon svg { color: var(--c-cobalt) !important; }
.travel-card-icon { background: var(--c-cobalt-subtle) !important; border-color: var(--c-cobalt-border) !important; }
.travel-card-icon svg { color: var(--c-cobalt) !important; }
.contact-card-icon { background: var(--c-cobalt-subtle) !important; border-color: var(--c-cobalt-border) !important; }
.contact-card-icon svg { color: var(--c-cobalt) !important; }
.award-icon { background: var(--c-cobalt-subtle) !important; border-color: var(--c-cobalt-border) !important; }
.award-icon svg { color: var(--c-cobalt) !important; }
.explore-card-icon { border-color: var(--c-cobalt-border) !important; }
.explore-card-icon svg { color: var(--c-cobalt) !important; }
/* 3. Review process circles — cobalt (informational steps, not CTAs) */
.rp-circle { background: var(--c-cobalt) !important; box-shadow: 0 0 0 6px var(--c-cobalt-subtle) !important; }
/* 4. Speaker avatars — use yellow bg with dark text (warm, cultural feel) */
.speaker-avatar {
background: var(--c-yellow-subtle) !important;
border-color: rgba(180,216,0,.4) !important;
color: var(--c-text) !important;
}
.card:hover .speaker-avatar { background: var(--c-accent) !important; border-color: var(--c-accent) !important; color: #fff !important; }
/* 5. Eyebrow labels — secondary orange (not red) */
.eyebrow { color: var(--c-accent) !important; }
.why-section .eyebrow { color: rgba(255,255,255,.75) !important; border-color: rgba(255,255,255,.25) !important; }
.why-section .eyebrow::before { background: rgba(255,255,255,.75) !important; }
.page-hero .eyebrow { color: rgba(255,255,255,.75) !important; }
.ifsi-section .eyebrow,
.ifsi-org-label { color: var(--c-accent-bright) !important; }
/* 6. Nav active/hover */
.site-header:not(.scrolled) .nav-links a:hover,
.site-header:not(.scrolled) .nav-links a.active { color: var(--c-accent) !important; }
body.inner-page .site-header.scrolled:not(.scrolled-past) .nav-links a:hover,
body.inner-page .site-header.scrolled:not(.scrolled-past) .nav-links a.active { color: #fff !important; }
.site-header.scrolled-past .nav-links a { color: var(--c-text) !important; }
.site-header.scrolled-past .nav-links a:hover,
.site-header.scrolled-past .nav-links a.active { color: var(--c-accent) !important; }
/* 7. Stat numbers and timeline — cobalt for informational stats */
.explore-stat-num,
.welcome-stat-num { color: var(--c-cobalt) !important; }
/* 8. Section-type badges — keep plenary red, make keynote cobalt */
.session-type.keynote { background: rgba(0,89,173,.1) !important; color: #5686BB !important; border-color: rgba(0,89,173,.25) !important; }
.session-type.plenary { background: rgba(0,89,173,.1) !important; color: var(--c-accent) !important; border-color: var(--c-accent-border) !important; }
.session-type.clinical { background: rgba(0,112,210,.1) !important; color: var(--c-accent-bright) !important; border-color: rgba(0,112,210,.25) !important; }
.session-type.workshop { background: rgba(180,216,0,.2) !important; color: #7a5a00 !important; border-color: rgba(180,216,0,.5) !important; }
/* 9. Award card colour bars */
.aw-yi { background: linear-gradient(180deg, #003F7A, #0059AD) !important; }
.aw-oral { background: linear-gradient(180deg, #005B9E, #0070D2) !important; }
.aw-poster { background: linear-gradient(180deg, #9CB800, #B4D800) !important; }
.aw-lifetime{ background: linear-gradient(180deg, #0059AD, #5686BB) !important; }
/* 10. Day tabs active state — cobalt accent, not red */
.day-tab.active { color: #fff !important; background: var(--c-accent) !important; border-bottom-color: var(--c-accent) !important; }
/* 11. Footer link hover — keep white */
.footer-col a:hover { color: #fff !important; }
.footer-bottom-right > a { color: rgba(255,255,255,.4) !important; }
.footer-bottom-right > a:hover { color: rgba(255,255,255,.8) !important; }
/* 12. Grant KPI bar — use red (CTA/important stats) — already correct via var(--c-accent) */
/* 13. Why-section cards on yellow bg — border dark, not red */
.why-grid { border-color: rgba(26,26,26,.15) !important; }
.why-card { border-color: rgba(26,26,26,.12) !important; }
.why-card:hover { background: rgba(0,0,0,.05) !important; }
/* ============================================================
TEMPORARY — "Coming Soon" disabled links
Applied (via JS in js/page-transitions.js) to nav + footer links
that point to pages not yet launched (program / abstract / registration).
Remove this whole block AND the matching JS block when those pages go live.
============================================================ */
a.coming-soon {
position: relative;
cursor: not-allowed;
}
a.coming-soon:hover,
a.coming-soon:focus-visible { color: inherit; }
/* Tooltip body */
a.coming-soon::after {
content: attr(data-tooltip);
position: absolute;
left: 50%;
bottom: calc(100% + 10px);
transform: translate(-50%, 4px);
background: var(--c-text);
color: #fff;
font-family: var(--font-display);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
padding: 0.45rem 0.7rem;
border-radius: var(--r-md);
white-space: nowrap;
pointer-events: none;
opacity: 0;
z-index: 1000;
box-shadow: 0 6px 18px rgba(0,0,0,.22);
transition: opacity 180ms cubic-bezier(.16,1,.3,1), transform 180ms cubic-bezier(.16,1,.3,1);
}
/* Tooltip arrow */
a.coming-soon::before {
content: "";
position: absolute;
left: 50%;
bottom: calc(100% + 4px);
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--c-text);
pointer-events: none;
opacity: 0;
z-index: 1000;
transition: opacity 180ms;
}
a.coming-soon:hover::after,
a.coming-soon:focus-visible::after,
a.coming-soon.is-touched::after {
opacity: 1;
transform: translate(-50%, 0);
}
a.coming-soon:hover::before,
a.coming-soon:focus-visible::before,
a.coming-soon.is-touched::before {
opacity: 1;
}
/* Sticky desktop nav: tooltip-above would overflow the viewport top — flip it BELOW. */
.site-header a.coming-soon::after {
bottom: auto;
top: calc(100% + 10px);
transform: translate(-50%, -4px);
}
.site-header a.coming-soon::before {
bottom: auto;
top: calc(100% + 4px);
border-top-color: transparent;
border-bottom-color: var(--c-text);
}
.site-header a.coming-soon:hover::after,
.site-header a.coming-soon:focus-visible::after,
.site-header a.coming-soon.is-touched::after {
transform: translate(-50%, 0);
}
/* Mobile-nav vertical list: tooltip is tighter to the link */
.mobile-nav a.coming-soon::after { font-size: 0.68rem; padding: 0.4rem 0.65rem; }
/* Footer column links sit on a dark background — match the dark tooltip with a subtle border */
.site-footer a.coming-soon::after {
background: #fff;
color: var(--c-text);
box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.site-footer a.coming-soon::before { border-top-color: #fff; }
/* Styled CTA buttons (Register Now in nav/footer) — slightly muted when disabled */
.btn.coming-soon {
opacity: 0.78;
filter: saturate(0.85);
}
.btn.coming-soon:hover { transform: none !important; box-shadow: none !important; }
/* Footer social icons + privacy/terms links: suppress active-looking hover state
so they read as inert while still showing the tooltip. */
.site-footer .social-link.coming-soon:hover,
.site-footer .social-link.coming-soon:focus-visible {
background: rgba(255,255,255,.08) !important;
border-color: rgba(255,255,255,.12) !important;
color: rgba(255,255,255,.6) !important;
}
.site-footer .footer-bottom-right > a.coming-soon:hover,
.site-footer .footer-bottom-right > a.coming-soon:focus-visible {
color: rgba(255,255,255,.4) !important;
}