.sdm-homepage {
font-family: var(--sm-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
background-color: var(--sm-background, #fcfcfc);
color: var(--sm-foreground, #171717);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.sdm-homepage a {
text-decoration: none;
color: inherit;
transition: color var(--sm-transition-fast, 150ms ease);
} .sdm-homepage .sdm-container {
width: 100%;
max-width: var(--sm-max-width, 1200px);
margin-left: auto;
margin-right: auto;
padding-left: var(--sm-space-4, 16px);
padding-right: var(--sm-space-4, 16px);
box-sizing: border-box;
}
@media (min-width: 768px) {
.sdm-homepage .sdm-container {
padding-left: var(--sm-space-6, 24px);
padding-right: var(--sm-space-6, 24px);
}
} .sdm-section {
padding-top: var(--sm-space-8, 32px);
padding-bottom: var(--sm-space-8, 32px);
border-bottom: 1px solid var(--sm-border, #e5e5e5);
}
@media (min-width: 768px) {
.sdm-section {
padding-top: 48px;
padding-bottom: 48px;
}
}
.sdm-section--alt {
background-color: var(--sm-surface-alt, #f5f5f5);
}
.sdm-section--white {
background-color: var(--sm-surface, #ffffff);
} .sdm-section-header {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: var(--sm-space-6, 24px);
}
@media (min-width: 640px) {
.sdm-section-header {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
}
.sdm-kicker {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--sm-accent, #16a34a);
margin: 0 0 4px 0;
}
.sdm-section-title {
font-size: 1.75rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--sm-foreground, #111111);
margin: 0;
line-height: 1.25;
}
@media (min-width: 768px) {
.sdm-section-title {
font-size: 2rem;
}
}
.sdm-section-link {
font-size: 0.9375rem;
font-weight: 600;
color: var(--sm-foreground, #111111);
display: inline-flex;
align-items: center;
gap: 6px;
border-bottom: 1.5px solid transparent;
transition: all var(--sm-transition-fast, 150ms ease);
}
.sdm-section-link:hover {
color: var(--sm-accent, #16a34a);
border-bottom-color: var(--sm-accent, #16a34a);
} .sdm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 24px;
font-size: 0.9375rem;
font-weight: 600;
border-radius: var(--sm-radius-full, 9999px);
cursor: pointer;
transition: all var(--sm-transition-fast, 150ms ease);
gap: 8px;
}
.sdm-btn--primary {
background: var(--sm-foreground, #171717);
color: #ffffff !important;
border: 1px solid var(--sm-foreground, #171717);
}
.sdm-btn--primary:hover {
background: #262626;
border-color: #262626;
transform: translateY(-1px);
}
.sdm-btn--secondary {
background: var(--sm-surface, #ffffff);
color: var(--sm-foreground, #171717) !important;
border: 1px solid var(--sm-border, #e5e5e5);
}
.sdm-btn--secondary:hover {
background: var(--sm-surface-alt, #f5f5f5);
border-color: #d4d4d4;
transform: translateY(-1px);
}
.sdm-btn--donate {
background: #0070ba;
color: #ffffff !important;
border: 1px solid #0070ba;
font-weight: 700;
}
.sdm-btn--donate:hover {
background: #005ea6;
border-color: #005ea6;
} .sdm-trending-bar {
background: var(--sm-surface, #ffffff);
border-bottom: 1px solid var(--sm-border, #e5e5e5);
font-size: 0.875rem;
padding: 8px 0;
}
.sdm-trending-bar__inner {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.sdm-trending-bar .sdm-live-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
background: #f0fdf4;
color: #15803d;
border: 1px solid #bbf7d0;
border-radius: var(--sm-radius-full, 9999px);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sdm-live-badge__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: #16a34a;
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
animation: sdm-pulse 2s infinite;
}
@keyframes sdm-pulse {
0% {
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.7);
}
70% {
box-shadow: 0 0 0 6px rgba(22, 163, 74, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(22, 163, 74, 0);
}
}
.sdm-trending-bar__label {
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--sm-muted, #737373);
}
.sdm-trending-bar__items {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
color: var(--sm-foreground, #171717);
}
.sdm-trending-bar__item:hover {
color: var(--sm-accent, #16a34a);
}
.sdm-trending-bar__sep {
color: var(--sm-border, #d4d4d4);
} .sdm-hero {
padding-top: 48px;
padding-bottom: 48px;
background: var(--sm-surface, #ffffff);
border-bottom: 1px solid var(--sm-border, #e5e5e5);
}
@media (min-width: 768px) {
.sdm-hero {
padding-top: 72px;
padding-bottom: 64px;
}
}
.sdm-hero__content {
max-width: 860px;
}
.sdm-hero__title {
font-size: 2.75rem;
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.035em;
color: var(--sm-foreground, #111111);
margin: 12px 0 16px 0;
}
@media (min-width: 768px) {
.sdm-hero__title {
font-size: 3.75rem;
}
}
.sdm-hero__title-accent {
color: var(--sm-accent, #16a34a);
display: inline;
}
.sdm-hero__desc {
font-size: 1.125rem;
color: var(--sm-muted, #525252);
line-height: 1.6;
margin: 0 0 28px 0;
max-width: 720px;
}
@media (min-width: 768px) {
.sdm-hero__desc {
font-size: 1.25rem;
}
}
.sdm-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-bottom: 32px;
}
.sdm-hero__stats {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding-top: 24px;
border-top: 1px solid var(--sm-border, #e5e5e5);
}
.sdm-hero-stat {
display: flex;
align-items: baseline;
gap: 6px;
}
.sdm-hero-stat__num {
font-size: 1.25rem;
font-weight: 700;
color: var(--sm-foreground, #111111);
}
.sdm-hero-stat__label {
font-size: 0.875rem;
color: var(--sm-muted, #737373);
} .sdm-live-hub-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
margin-bottom: 32px;
}
@media (min-width: 900px) {
.sdm-live-hub-grid {
grid-template-columns: 1.1fr 0.9fr;
}
}
.sdm-card {
background: var(--sm-surface, #ffffff);
border: 1px solid var(--sm-border, #e5e5e5);
border-radius: var(--sm-radius-md, 12px);
padding: 24px;
box-sizing: border-box;
box-shadow: var(--sm-shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}
.sdm-card__header {
margin-bottom: 16px;
}
.sdm-card__title {
font-size: 1.25rem;
font-weight: 700;
color: var(--sm-foreground, #111111);
margin: 0 0 6px 0;
display: flex;
align-items: center;
gap: 8px;
}
.sdm-card__desc {
font-size: 0.875rem;
color: var(--sm-muted, #737373);
margin: 0;
line-height: 1.5;
}
.sdm-mixlr-iframe {
width: 100%;
border: 0;
border-radius: 8px;
display: block;
}
.sdm-live-card-meta {
margin-top: 12px;
font-size: 0.8125rem;
color: var(--sm-muted, #737373);
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
.sdm-live-card-meta a {
font-weight: 600;
color: var(--sm-accent, #16a34a);
} .sdm-card--seasonal .sdm-seasonal-img-wrap {
position: relative;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--sm-border, #e5e5e5);
}
.sdm-card--seasonal img {
width: 100%;
height: auto;
display: block;
transition: transform var(--sm-transition-fast, 150ms ease);
}
.sdm-card--seasonal:hover img {
transform: scale(1.01);
}
.sdm-seasonal-footer {
margin-top: 10px;
font-size: 0.8125rem;
color: var(--sm-muted, #737373);
display: flex;
justify-content: space-between;
align-items: center;
} .sdm-schedule-section {
margin-top: 16px;
}
.sdm-schedule-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.sdm-schedule-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-bottom: 20px;
gap: 16px;
flex-wrap: wrap;
}
.sdm-schedule-header__title {
font-size: 1.1875rem;
font-weight: 700;
margin: 0;
color: var(--sm-foreground, #111111);
letter-spacing: 0.02em;
}
.sdm-schedule-header__count {
font-size: 0.875rem;
font-weight: 500;
color: var(--sm-muted, #64748b);
letter-spacing: normal;
}
.sdm-reel-controls {
display: inline-flex;
align-items: center;
gap: 10px;
}
.sdm-reel-counter {
font-size: 0.8125rem;
font-weight: 600;
color: var(--sm-muted, #64748b);
background: var(--sm-surface-alt, #f1f5f9);
padding: 4px 12px;
border-radius: 9999px;
border: 1px solid var(--sm-border, #e2e8f0);
user-select: none;
}
.sdm-reel-btn {
width: 38px !important;
height: 38px !important;
min-width: 38px !important;
min-height: 38px !important;
border-radius: 50% !important;
border: 1px solid var(--sm-border, #e2e8f0) !important;
background: var(--sm-surface, #ffffff) !important;
color: var(--sm-foreground, #1e293b) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
line-height: 1 !important;
letter-spacing: normal !important;
text-transform: none !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
transition: all var(--sm-transition-fast, 150ms ease) !important;
}
.sdm-reel-btn svg {
width: 18px !important;
height: 18px !important;
flex-shrink: 0 !important;
display: block !important;
}
.sdm-reel-btn:hover:not(:disabled) {
background: var(--sm-accent, #d32424) !important;
border-color: var(--sm-accent, #d32424) !important;
color: #ffffff !important;
box-shadow: 0 4px 12px rgba(211, 36, 36, 0.25) !important;
transform: translateY(-1px) !important;
}
.sdm-reel-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
pointer-events: none;
box-shadow: none;
}
.sdm-schedule-reel {
display: flex;
gap: 18px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding: 8px 4px 20px 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.sdm-schedule-reel::-webkit-scrollbar {
display: none;
}
.sdm-flyer-card {
flex: 0 0 280px;
scroll-snap-align: start;
background: var(--sm-surface, #ffffff);
border: 1px solid var(--sm-border, #e2e8f0);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
transition: transform var(--sm-transition-fast, 180ms ease), box-shadow var(--sm-transition-fast, 180ms ease), border-color var(--sm-transition-fast, 180ms ease);
}
@media (min-width: 640px) {
.sdm-flyer-card {
flex: 0 0 340px;
}
}
.sdm-flyer-card:hover {
transform: translateY(-4px);
border-color: #a7f3d0;
box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.08), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
}
.sdm-flyer-card__img-link {
display: block;
position: relative;
background: #0f172a;
aspect-ratio: 1600 / 675; overflow: hidden;
cursor: zoom-in;
}
.sdm-flyer-card__img-link img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.sdm-flyer-card:hover .sdm-flyer-card__img-link img {
transform: scale(1.02);
}
.sdm-flyer-card__zoom-hint {
position: absolute;
top: 10px;
right: 10px;
display: inline-flex;
align-items: center;
gap: 5px;
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(4px);
color: #ffffff;
font-size: 0.6875rem;
font-weight: 600;
padding: 4px 9px;
border-radius: 9999px;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}
.sdm-flyer-card:hover .sdm-flyer-card__zoom-hint {
opacity: 1;
transform: translateY(0);
}
.sdm-flyer-card__body {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
background: var(--sm-surface, #ffffff);
}
.sdm-flyer-badge {
display: inline-flex;
align-items: center;
font-size: 0.75rem;
font-weight: 700;
color: #047857;
background: #ecfdf5;
border: 1px solid #d1fae5;
padding: 3px 9px;
border-radius: 9999px;
letter-spacing: 0.02em;
}
.sdm-flyer-card__title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--sm-foreground, #0f172a);
line-height: 1.35;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .sdm-flyer-modal {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
.sdm-flyer-modal.is-open {
opacity: 1;
pointer-events: auto;
}
.sdm-flyer-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(8px);
}
.sdm-flyer-modal__container {
position: relative;
z-index: 1;
max-width: 900px;
width: 100%;
background: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
transform: scale(0.95);
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
display: flex;
flex-direction: column;
}
.sdm-flyer-modal.is-open .sdm-flyer-modal__container {
transform: scale(1);
}
.sdm-flyer-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 12px 20px;
background: var(--sm-surface, #ffffff);
border-bottom: 1px solid var(--sm-border, #f1f5f9);
}
.sdm-flyer-modal__close {
position: static;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
min-width: 38px;
min-height: 38px;
padding: 0 !important;
margin: 0 !important;
border-radius: 50%;
border: 1px solid var(--sm-border, #e2e8f0);
background: var(--sm-surface, #ffffff);
color: var(--sm-foreground, #1e293b);
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all var(--sm-transition-fast, 150ms ease);
flex-shrink: 0;
line-height: 1;
}
.sdm-flyer-modal__close:hover {
background: var(--sm-surface-alt, #f1f5f9);
border-color: var(--sm-border-dark, #cbd5e1);
color: var(--sm-accent, #d32424);
transform: scale(1.05);
}
.sdm-flyer-modal__close:focus-visible {
outline: 2px solid var(--sm-accent, #d32424);
outline-offset: 2px;
}
.sdm-flyer-modal__close svg {
width: 18px;
height: 18px;
display: block;
stroke: currentColor;
flex-shrink: 0;
}
.sdm-flyer-modal__img-box {
background: #0f172a;
aspect-ratio: 1600 / 675;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.sdm-flyer-modal__img-box img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.sdm-flyer-modal__footer {
padding: 16px 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
background: #ffffff;
border-top: 1px solid #f1f5f9;
}
.sdm-flyer-modal__title {
font-size: 1.0625rem;
font-weight: 700;
color: #0f172a;
margin: 0;
}
@media (max-width: 640px) {
.sdm-flyer-modal {
padding: 12px;
}
.sdm-flyer-modal__header {
padding: 10px 14px;
}
.sdm-flyer-modal__footer {
padding: 14px;
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.sdm-flyer-modal__footer .sdm-btn {
text-align: center;
justify-content: center;
width: 100%;
}
} .sdm-khutbahs-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 768px) {
.sdm-khutbahs-grid {
grid-template-columns: repeat(2, 1fr);
}
}
.sdm-khutbah-card {
background: var(--sm-surface, #ffffff);
border: 1px solid var(--sm-border, #e5e5e5);
border-radius: var(--sm-radius-md, 12px);
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 14px;
transition: border-color var(--sm-transition-fast, 150ms ease), box-shadow var(--sm-transition-fast, 150ms ease);
}
.sdm-khutbah-card:hover {
border-color: #d4d4d4;
box-shadow: var(--sm-shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
}
.sdm-khutbah-card__badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
background: #f0fdf4;
color: #15803d;
border-radius: 4px;
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.sdm-khutbah-card__title {
font-size: 1.0625rem;
font-weight: 700;
line-height: 1.35;
color: var(--sm-foreground, #111111);
margin: 0;
}
.sdm-khutbah-card__title a:hover {
color: var(--sm-accent, #16a34a);
}
.sdm-khutbah-card__meta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
padding-top: 12px;
border-top: 1px solid var(--sm-border, #f0f0f0);
}
.sdm-khutbah-card__date {
font-size: 0.8125rem;
color: var(--sm-muted, #737373);
}
.sdm-btn-play {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 6px 14px !important;
margin: 0 !important;
box-sizing: border-box !important;
border-radius: var(--sm-radius-full, 9999px) !important;
background: var(--sm-foreground, #171717) !important;
color: #ffffff !important;
font-size: 0.8125rem !important;
font-weight: 600 !important;
letter-spacing: normal !important;
text-transform: none !important;
border: none !important;
cursor: pointer !important;
font-family: inherit !important;
line-height: 1 !important;
transition: background var(--sm-transition-fast, 150ms ease), transform var(--sm-transition-fast, 150ms ease) !important;
}
.sdm-btn-play:hover {
background: var(--sm-accent, #d32424) !important;
color: #ffffff !important;
}
.sdm-btn-play:active {
transform: scale(0.97);
}
.sdm-khutbah-card__player-wrap {
margin: 12px 0 6px 0;
width: 100%;
}
.sdm-khutbah-audio {
width: 100%;
height: 38px;
border-radius: 8px;
background-color: var(--sm-surface-alt, #f5f5f5);
display: block;
}
.sdm-khutbah-card.is-playing {
border-color: var(--sm-accent, #16a34a);
box-shadow: 0 4px 16px rgba(22, 163, 74, 0.12);
}
.sdm-khutbah-card.is-playing .sdm-btn-play {
background: var(--sm-accent, #16a34a);
} .sdm-courses-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 640px) {
.sdm-courses-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 1024px) {
.sdm-courses-grid {
grid-template-columns: repeat(4, 1fr);
}
} .sdm-topics-pills {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.sdm-topic-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--sm-surface, #ffffff);
border: 1px solid var(--sm-border, #e5e5e5);
border-radius: var(--sm-radius-full, 9999px);
font-size: 0.875rem;
font-weight: 600;
color: var(--sm-foreground, #171717);
transition: all var(--sm-transition-fast, 150ms ease);
}
.sdm-topic-pill:hover {
background: var(--sm-foreground, #171717);
color: #ffffff;
border-color: var(--sm-foreground, #171717);
transform: translateY(-1px);
}
.sdm-topic-pill__count {
font-size: 0.75rem;
padding: 2px 6px;
background: var(--sm-surface-alt, #f5f5f5);
border-radius: var(--sm-radius-full, 9999px);
color: var(--sm-muted, #737373);
}
.sdm-topic-pill:hover .sdm-topic-pill__count {
background: #333333;
color: #ffffff;
} .sdm-publications-split {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 900px) {
.sdm-publications-split {
grid-template-columns: repeat(2, 1fr);
}
}
.sdm-pub-subhead {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 1.5px solid var(--sm-border, #e5e5e5);
}
.sdm-pub-subhead__title {
font-size: 1.25rem;
font-weight: 700;
margin: 0;
color: var(--sm-foreground, #111111);
}
.sdm-pub-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.sdm-pub-card {
display: flex;
gap: 14px;
background: var(--sm-surface, #ffffff);
border: 1px solid var(--sm-border, #e5e5e5);
border-radius: var(--sm-radius-md, 12px);
padding: 12px;
transition: transform var(--sm-transition-fast, 150ms ease), box-shadow var(--sm-transition-fast, 150ms ease);
}
.sdm-pub-card:hover {
transform: translateY(-2px);
box-shadow: var(--sm-shadow-sm, 0 1px 3px rgba(0,0,0,0.05));
border-color: #d4d4d4;
}
.sdm-pub-card__thumb {
flex: 0 0 76px;
height: 96px;
border-radius: 6px;
overflow: hidden;
background: #f0f0f0;
}
.sdm-pub-card__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sdm-pub-card__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sdm-pub-card__meta-top {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.sdm-pub-card__badge {
font-size: 0.6875rem;
font-weight: 700;
text-transform: uppercase;
color: var(--sm-accent, #16a34a);
}
.sdm-pub-card__title {
font-size: 0.9375rem;
font-weight: 700;
line-height: 1.35;
margin: 0 0 6px 0;
color: var(--sm-foreground, #111111);
}
.sdm-pub-card__title a:hover {
color: var(--sm-accent, #16a34a);
}
.sdm-pub-card__date {
font-size: 0.75rem;
color: var(--sm-muted, #737373);
}
.sdm-pub-card__thumb--fallback {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--sm-surface-alt, #f5f5f5) 0%, #ebebeb 100%);
border: 1px solid var(--sm-border, #e5e5e5);
}
.sdm-pub-card__thumb--fallback a {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: var(--sm-accent, #16a34a);
text-decoration: none;
transition: transform var(--sm-transition-fast, 150ms ease), color var(--sm-transition-fast, 150ms ease);
}
.sdm-pub-card:hover .sdm-pub-card__thumb--fallback a {
transform: scale(1.08);
} #lamosquee {
margin-top: 0 !important;
padding-top: var(--sm-space-8, 32px);
scroll-margin-top: 80px;
} .site {
overflow: visible !important;
}
.sdm-mosque-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 24px;
}
.sdm-mosque-grid > * {
min-width: 0;
}
@media (min-width: 1024px) {
.sdm-mosque-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 32px;
}
}
.sdm-mosque-card {
display: flex;
flex-direction: column;
height: 100%;
box-sizing: border-box;
}
.sdm-mosque-card--map .sdm-map-box {
flex: 1 1 auto;
min-height: 280px;
border-radius: var(--sm-radius-md, 12px);
overflow: hidden;
border: 1px solid var(--sm-border, #e5e5e5);
margin-bottom: 20px;
}
.sdm-mosque-card--map .sdm-map-box iframe {
width: 100%;
height: 100%;
min-height: 280px;
border: 0;
display: block;
}
.sdm-mosque-transit-note {
font-size: 0.8125rem;
color: var(--sm-foreground-muted, #666666);
margin: 6px 0 0 0;
display: flex;
align-items: center;
}
.sdm-address-actions {
margin-top: 16px;
}
.sdm-mosque-card--hub {
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 20px;
}
.sdm-mosque-hub__prayers {
background: var(--sm-surface-alt, #f9fafb);
border: 1px solid var(--sm-border, #e5e7eb);
border-radius: var(--sm-radius-md, 12px);
padding: 24px;
box-sizing: border-box;
}
.sdm-mosque-hub__pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 18px;
}
.sdm-hub-pill {
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: #ffffff;
border: 1px solid var(--sm-border, #e5e7eb);
border-radius: var(--sm-radius-full, 9999px);
font-size: 0.75rem;
font-weight: 600;
color: var(--sm-foreground, #171717);
letter-spacing: 0.02em;
}
.sdm-prayer-cta-row .sdm-btn {
width: 100%;
font-weight: 600;
padding: 12px 20px;
box-sizing: border-box;
}
.sdm-address-block {
font-size: 0.9375rem;
line-height: 1.5;
color: var(--sm-foreground, #171717);
}
.sdm-social-links {
display: flex;
gap: 12px;
}
.sdm-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--sm-surface-alt, #f5f5f5);
border: 1px solid var(--sm-border, #e5e5e5);
color: var(--sm-foreground, #171717);
transition: all var(--sm-transition-fast, 150ms ease);
}
.sdm-social-link:hover {
background: var(--sm-foreground, #171717);
color: #ffffff;
border-color: var(--sm-foreground, #171717);
}
.sdm-social-link--radio:hover {
background: #dc2626 !important;
color: #ffffff !important;
border-color: #dc2626 !important;
}
.sdm-mosque-hub__footer {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 12px;
padding-top: 4px;
}
.sdm-mosque-hub__social-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--sm-foreground-muted, #666666);
} .sdm-donate-card {
background: linear-gradient(135deg, #f0fdf4 0%, #e0f2fe 100%);
border: 1px solid #bbf7d0;
border-radius: var(--sm-radius-md, 12px);
padding: 20px;
box-sizing: border-box;
}
.sdm-donate-card__title {
font-size: 1.125rem;
font-weight: 700;
color: #166534;
margin: 0 0 6px 0;
}
.sdm-donate-card__desc {
font-size: 0.875rem;
color: #14532d;
margin: 0 0 16px 0;
line-height: 1.5;
} @media (max-width: 767px) {
.sdm-hero__title {
font-size: 2.25rem;
}
.sdm-hero__actions {
flex-direction: column;
}
.sdm-hero__actions .sdm-btn {
width: 100%;
}
.sdm-trending-bar__inner {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.sdm-trending-bar__sep {
display: none;
}
.sdm-trending-bar__items {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
}