tags in a single
(they contain only inline-safe children, no blank line between
them) — the flex layout has to target that
, not .branch-cards
itself. */
.branch-cards > p {
display: flex;
gap: 20px;
margin: 0;
}
.branch-card {
flex: 1 1 0;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
padding: 36px 30px;
border-radius: 16px;
color: #ffffff;
text-decoration: none;
box-shadow: 0 6px 20px rgba(15, 23, 42, 0.14);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.branch-card:hover,
.branch-card:focus-visible {
transform: translateY(-6px);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.24);
text-decoration: none;
color: #ffffff;
}
.branch-card-statistics {
background: linear-gradient(135deg, #3a7cba 0%, #1d4e7a 100%);
}
.branch-card-mathematics {
background: linear-gradient(135deg, #e69a3d 0%, #b85c00 100%);
}
.branch-card-mark {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.2);
font-weight: 700;
font-size: 1.3rem;
letter-spacing: -0.02em;
}
.branch-card-name {
display: block;
font-weight: 700;
font-size: 1.55rem;
letter-spacing: -0.02em;
}
.branch-card-tagline {
display: block;
font-size: 1rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
}
.branch-card-cta {
margin-top: auto;
padding-top: 16px;
font-weight: 660;
font-size: 0.94rem;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.18s ease;
}
.branch-card:hover .branch-card-cta,
.branch-card:focus-visible .branch-card-cta {
gap: 11px;
}
@media (max-width: 640px) {
.branch-cards > p {
flex-direction: column;
}
}
/* ============================================================
LEGACY DONATION-PANEL COMPATIBILITY
Retained for an earlier donation-status panel. The current Support page
states in ordinary prose that donations are not accepted yet and explains
the possible future association framework without a payment component.
Used with class="donate-panel" wrapping a heading, body text,
and a placeholder/status-badge for payment details.
============================================================ */
.donate-panel {
background: linear-gradient(135deg, #f4f7fb 0%, #eaf1f9 100%);
border: 1px solid #d7e3ef;
border-radius: 12px;
padding: 30px 34px;
margin: 24px 0 32px;
}
.donate-panel h3 {
margin-top: 0;
}
.donate-panel p:last-child {
margin-bottom: 0;
}
.donate-panel .donate-status {
margin-top: 16px;
}
/* ============================================================
TEAM SECTION (contact page)
A responsive text-only profile layout for named team members on the localized
contact-ratiomera pages.
Structure:
.team-section → vertical stack of members
.team-member → one text-only member card
============================================================ */
/* Vertical stack of all team members with generous gap between rows */
.team-section {
display: flex;
flex-direction: column;
gap: 52px;
margin: 32px 0 56px;
}
/* Text-only member layout */
.team-member {
display: grid;
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
/* Container for name, role, and bio text */
.team-bio {
padding-top: 4px;
}
/* Team member name */
.team-name {
font-size: 1.12rem;
font-weight: 660;
color: #111827;
margin-bottom: 4px;
line-height: 1.3;
}
/* Job title / role */
.team-role {
font-size: 0.875rem;
font-weight: 580;
color: #374151;
margin-bottom: 2px;
}
/* Brief experience summary (e.g. "8 years teaching statistics") */
.team-experience {
font-size: 0.82rem;
color: #6b7280;
margin-bottom: 16px;
}
/* Full biography paragraph */
.team-text {
font-size: 0.875rem;
color: #4b5563;
line-height: 1.72; /* Generous spacing for longer bio text */
margin: 0;
}
/* ============================================================
ROADMAP TABLE (Statistics landing page)
A status table showing the text-labelled development state of the
learning sequence, downloads, and counter infrastructure.
Structure: