has no bottom padding, so the last
* element on any page (article, basic page, view) butts straight against
* the footer background. A generous bottom pad creates a natural pause.
*/
.main {
padding-bottom: clamp(56px, 8vw, 100px);
}
/* Pages that have their own full-bleed section as the last child (e.g. the
downloads header) don't need the extra pad — they provide their own. */
.page-downloads .main {
padding-bottom: 0;
}
/*=============================
53. Account icon dropdown (nav bar)
===============================*/
/* ── Container ─────────────────────────────────────────── */
.tbm-user-menu {
position: relative;
flex-shrink: 0;
}
/* ── Toggle (summary styled as icon button) ─────────────── */
.tbm-user-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: transparent;
border: none;
border-radius: 8px;
cursor: pointer;
color: var(--tbm-link-color, #0d1b2a);
flex-shrink: 0;
list-style: none;
user-select: none;
transition:
background var(--tbm-transition, 0.28s ease),
color var(--tbm-transition, 0.28s ease);
}
.tbm-user-btn::-webkit-details-marker {
display: none;
}
.tbm-user-btn::marker {
display: none;
}
.tbm-user-btn:hover,
.tbm-user-btn:focus-visible,
.tbm-user-menu[open] .tbm-user-btn {
background: rgba(0, 0, 0, 0.06);
color: var(--tg-primary-color);
outline: none;
}
.tbm-user-btn .material-symbols-sharp {
font-size: 22px;
line-height: 1;
font-variation-settings:
"wght" 400,
"FILL" 0,
"GRAD" 0,
"opsz" 24;
transition: font-variation-settings 0.18s ease;
}
.tbm-user-menu[open] .tbm-user-btn .material-symbols-sharp,
.tbm-user-menu--logged-in .tbm-user-btn .tbm-user-btn__avatar {
font-variation-settings:
"wght" 400,
"FILL" 1,
"GRAD" 0,
"opsz" 24;
}
/* Login status dot — wraps the avatar so position: absolute anchors to the icon */
.tbm-user-btn {
position: relative; /* ensure status dot positions relative to this */
}
.tbm-user-btn__status {
position: absolute;
bottom: 7px;
right: 7px;
width: 9px;
height: 9px;
border-radius: 50%;
border: 2px solid var(--tg-white, #fff);
}
[data-bs-theme="dark"] .tbm-user-btn__status {
border-color: var(--tg-secondary-color, #0d1b2a);
}
.tbm-user-btn__status--online {
background: #28b45a;
}
.tbm-user-btn__status--offline {
background: #9e9e9e;
}
/* ── Dropdown panel ─────────────────────────────────────── */
.tbm-user-dropdown {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 190px;
z-index: 400;
background: rgba(255, 255, 255, 0.96);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 14px;
padding: 6px 4px;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.05),
0 12px 30px rgba(0, 0, 0, 0.14);
visibility: hidden;
opacity: 0;
pointer-events: none;
transform-origin: top right;
transition:
opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0s linear 0.18s;
}
.tbm-user-menu[open] .tbm-user-dropdown {
visibility: visible;
opacity: 1;
pointer-events: auto;
transition:
opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
visibility 0s linear 0s;
}
/* ── Menu items ─────────────────────────────────────────── */
.tbm-user-dropdown__item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
border-radius: 8px;
color: var(--tg-body-font-color);
text-decoration: none;
font-size: 13px;
font-weight: 500;
white-space: nowrap;
transition: background 0.12s ease;
}
.tbm-user-dropdown__item:hover,
.tbm-user-dropdown__item:focus-visible {
background: rgba(0, 0, 0, 0.05);
color: var(--tg-primary-color);
outline: none;
}
.tbm-user-dropdown__item .material-symbols-sharp {
font-size: 16px;
line-height: 1;
flex-shrink: 0;
font-variation-settings:
"wght" 300,
"FILL" 0,
"GRAD" 0,
"opsz" 24;
}
/* ── Dark mode ──────────────────────────────────────────── */
[data-bs-theme="dark"] .tbm-user-btn {
color: var(--tbm-link-color, #e4eaf0);
}
[data-bs-theme="dark"] .tbm-user-btn:hover,
[data-bs-theme="dark"] .tbm-user-menu[open] .tbm-user-btn {
background: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .tbm-user-dropdown {
background: rgba(15, 30, 53, 0.97);
border-color: rgba(255, 255, 255, 0.1);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.25),
0 12px 30px rgba(0, 0, 0, 0.5);
}
[data-bs-theme="dark"] .tbm-user-dropdown__item {
color: #d4dbe4;
}
[data-bs-theme="dark"] .tbm-user-dropdown__item:hover,
[data-bs-theme="dark"] .tbm-user-dropdown__item:focus-visible {
background: rgba(255, 255, 255, 0.07);
color: var(--tg-primary-color);
}
/*=============================
54. User profile page
===============================*/
/* ── Page shell ─────────────────────────────────────────── */
.profile-page {
--profile-cover-h: 220px;
--profile-avatar-sz: 120px;
--profile-radius: 60px; /* half of avatar-sz */
padding-bottom: clamp(48px, 8vw, 96px);
}
/* ── Cover banner ───────────────────────────────────────── */
.profile-cover {
height: var(--profile-cover-h);
background: linear-gradient(135deg, #0d1b2a 0%, #162843 40%, #c09a52 100%);
position: relative;
overflow: hidden;
}
.profile-cover::after {
content: "";
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='30' cy='30' r='1.5' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E");
pointer-events: none;
}
/* ── Identity block (avatar, name, roles, social) ────────── */
.profile-identity {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-top: clamp(32px, 5vw, 56px);
padding-bottom: clamp(24px, 4vw, 40px);
}
/* ── Avatar ─────────────────────────────────────────────── */
.profile-avatar {
width: var(--profile-avatar-sz);
height: var(--profile-avatar-sz);
border-radius: var(--profile-radius);
border: 4px solid #ffffff;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
overflow: hidden;
background: var(--tg-primary-color);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-bottom: 20px;
}
.profile-avatar img,
.profile-avatar .field--name-user-picture img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Strip the field wrapper's default padding */
.profile-avatar .field--name-user-picture {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.profile-avatar__initials {
font-size: 2.8rem;
font-weight: 700;
color: #ffffff;
line-height: 1;
letter-spacing: -0.02em;
user-select: none;
}
/* ── Name ───────────────────────────────────────────────── */
.profile-identity__name {
font-size: clamp(1.6rem, 4vw, 2.4rem);
font-weight: 700;
color: var(--tg-black, #0d1b2a);
margin: 0 0 12px;
line-height: 1.2;
}
/* ── Role badges ────────────────────────────────────────── */
.profile-identity__roles {
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: 20px;
}
.profile-role-badge {
display: inline-block;
padding: 4px 14px;
border-radius: 20px;
background: rgba(192, 154, 82, 0.12);
color: var(--tg-primary-color, #c09a52);
border: 1px solid rgba(192, 154, 82, 0.3);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
/* ── Social links ───────────────────────────────────────── */
.profile-social {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
}
.profile-social__link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(13, 27, 42, 0.07);
color: var(--tg-black, #0d1b2a);
font-size: 15px;
text-decoration: none;
transition:
background 0.18s ease,
color 0.18s ease,
transform 0.18s ease;
}
.profile-social__link:hover {
background: var(--tg-primary-color, #c09a52);
color: #ffffff;
}
/* ── Bio ────────────────────────────────────────────────── */
.profile-bio {
font-size: 1.05rem;
line-height: 1.75;
color: var(--tg-body-font-color);
margin-bottom: 32px;
text-align: center;
}
.profile-bio p {
margin-bottom: 0.6em;
}
.profile-bio p:last-child {
margin-bottom: 0;
}
/* ── Stats bar ──────────────────────────────────────────── */
.profile-stats {
display: flex;
justify-content: center;
gap: clamp(24px, 5vw, 56px);
padding: 24px 0;
border-top: 1px solid rgba(0, 0, 0, 0.08);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
margin-bottom: 32px;
}
.profile-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
}
.profile-stat__value {
font-size: 1.35rem;
font-weight: 700;
color: var(--tg-black, #0d1b2a);
line-height: 1;
}
.profile-stat__label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--tg-icon-color, #8a9bae);
}
/* ── Edit profile button ────────────────────────────────── */
.profile-actions {
display: flex;
justify-content: center;
margin-bottom: 8px;
}
.profile-edit-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 28px;
border-radius: 8px;
background: var(--tg-primary-color, #c09a52);
color: #ffffff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition:
background 0.18s ease,
transform 0.18s ease,
box-shadow 0.18s ease;
box-shadow: 0 2px 10px rgba(192, 154, 82, 0.3);
}
.profile-edit-btn:hover {
background: color-mix(
in srgb,
var(--tg-primary-color, #c09a52) 85%,
#000 15%
);
color: #ffffff;
box-shadow: 0 4px 16px rgba(192, 154, 82, 0.4);
}
.profile-edit-btn .material-symbols-sharp {
font-size: 18px;
font-variation-settings:
"wght" 300,
"FILL" 0,
"GRAD" 0,
"opsz" 24;
}
/* ── Articles section ───────────────────────────────────── */
.profile-articles {
margin-top: clamp(40px, 6vw, 72px);
padding-top: 40px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.profile-articles__heading {
font-size: clamp(1.25rem, 3vw, 1.65rem);
font-weight: 700;
color: var(--tg-black, #0d1b2a);
margin-bottom: 32px;
text-align: center;
}
.profile-articles__heading::after {
content: "";
display: block;
width: 48px;
height: 3px;
background: var(--tg-primary-color, #c09a52);
margin: 10px auto 0;
border-radius: 2px;
}
/* ── Dark mode ──────────────────────────────────────────── */
[data-bs-theme="dark"] .profile-identity__name,
[data-bs-theme="dark"] .profile-stat__value,
[data-bs-theme="dark"] .profile-articles__heading {
color: #e4eaf0;
}
[data-bs-theme="dark"] .profile-bio {
color: #c8d0da;
}
[data-bs-theme="dark"] .profile-stats {
border-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .profile-articles {
border-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .profile-avatar {
border-color: #1a2b40;
}
[data-bs-theme="dark"] .profile-role-badge {
background: rgba(192, 154, 82, 0.15);
border-color: rgba(192, 154, 82, 0.35);
}
[data-bs-theme="dark"] .profile-social__link {
background: rgba(255, 255, 255, 0.08);
color: #c8d0da;
}
[data-bs-theme="dark"] .profile-social__link:hover {
background: var(--tg-primary-color, #c09a52);
color: #ffffff;
}
[data-bs-theme="dark"] .profile-cover {
background: linear-gradient(135deg, #060e18 0%, #0d1e35 40%, #8a6c30 100%);
}
/* ── No extra bottom gap — profile already has its own ──── */
.page-user .main {
padding-bottom: 0;
}
/*=============================
55. Inline quiz — teaser card, overlay, questions, results, newsletter nudge
===============================*/
/* ─── Design tokens ──────────────────────────────────────────────────────── */
:root {
--quiz-gold: #c09a52;
--quiz-gold-light: rgba(192, 154, 82, 0.12);
--quiz-gold-glow: rgba(192, 154, 82, 0.3);
--quiz-navy: #0d1b2a;
--quiz-navy-2: #162843;
--quiz-radius: 16px;
--quiz-transition: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
/* ═══════════════════════════════════════════════════════════════════════════
TEASER CARD (.article-quiz-cta)
═══════════════════════════════════════════════════════════════════════════ */
.article-quiz-cta {
display: flex;
align-items: flex-start;
gap: 24px;
margin: clamp(28px, 5vw, 48px) 0;
padding: clamp(24px, 4vw, 36px);
border-radius: var(--quiz-radius);
background: linear-gradient(
135deg,
var(--quiz-navy) 0%,
var(--quiz-navy-2) 60%,
#1c3354 100%
);
border: 1px solid rgba(192, 154, 82, 0.25);
box-shadow:
0 4px 24px rgba(13, 27, 42, 0.18),
0 0 0 1px rgba(192, 154, 82, 0.1) inset;
cursor: pointer;
position: relative;
overflow: hidden;
transition:
transform var(--quiz-transition),
box-shadow var(--quiz-transition);
}
.article-quiz-cta::before {
content: "";
position: absolute;
top: -60px;
right: -60px;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(192, 154, 82, 0.15) 0%,
transparent 70%
);
pointer-events: none;
}
.article-quiz-cta:hover {
box-shadow:
0 8px 32px rgba(13, 27, 42, 0.28),
0 0 0 1px rgba(192, 154, 82, 0.2) inset;
}
.article-quiz-cta.is-complete {
background: linear-gradient(135deg, #0a2010 0%, #0d2918 60%, #1a3d25 100%);
border-color: rgba(40, 180, 90, 0.3);
}
/* Icon badge */
.article-quiz-cta__icon {
flex-shrink: 0;
width: 52px;
height: 52px;
border-radius: 14px;
background: var(--quiz-gold-light);
border: 1px solid var(--quiz-gold-glow);
display: flex;
align-items: center;
justify-content: center;
}
.article-quiz-cta__icon .material-symbols-sharp {
font-size: 28px;
color: var(--quiz-gold);
font-variation-settings:
"wght" 300,
"FILL" 0,
"GRAD" 0,
"opsz" 24;
}
/* Content block */
.article-quiz-cta__content {
flex: 1;
min-width: 0;
}
.article-quiz-cta__eyebrow {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--quiz-gold);
margin: 0 0 6px;
}
.article-quiz-cta__title {
font-size: clamp(1.1rem, 2.5vw, 1.4rem);
font-weight: 700;
color: #ffffff;
margin: 0 0 12px;
line-height: 1.3;
}
.article-quiz-cta__meta {
display: flex;
flex-wrap: wrap;
gap: 14px;
font-size: 12px;
color: rgba(228, 234, 240, 0.75);
margin-bottom: 12px;
}
.article-quiz-cta__meta span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.article-quiz-cta__meta .material-symbols-sharp {
font-size: 15px;
font-variation-settings:
"wght" 300,
"FILL" 0,
"GRAD" 0,
"opsz" 20;
}
.article-quiz-cta__desc {
font-size: 0.9rem;
color: rgba(228, 234, 240, 0.65);
margin: 0;
line-height: 1.55;
}
/* Action area */
.article-quiz-cta__actions {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
min-width: 160px;
}
.article-quiz-cta__btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 10px;
background: var(--quiz-gold);
color: var(--quiz-navy);
border: none;
font-size: 14px;
font-weight: 700;
cursor: pointer;
white-space: nowrap;
transition:
background var(--quiz-transition),
transform var(--quiz-transition);
box-shadow: 0 2px 12px rgba(192, 154, 82, 0.35);
}
.article-quiz-cta__btn .material-symbols-sharp {
font-size: 18px;
font-variation-settings:
"wght" 500,
"FILL" 1,
"GRAD" 0,
"opsz" 20;
}
.article-quiz-cta__btn:hover {
background: color-mix(in srgb, var(--quiz-gold) 80%, #fff 20%);
}
.article-quiz-cta.is-complete .article-quiz-cta__btn {
background: #28b45a;
color: #ffffff;
box-shadow: 0 2px 12px rgba(40, 180, 90, 0.35);
}
.article-quiz-cta__nudge {
display: flex;
align-items: flex-start;
gap: 6px;
font-size: 11px;
color: rgba(228, 234, 240, 0.5);
text-align: center;
margin: 0;
line-height: 1.4;
}
.article-quiz-cta__nudge .material-symbols-sharp {
font-size: 14px;
flex-shrink: 0;
margin-top: 1px;
}
.article-quiz-cta__nudge a {
color: var(--quiz-gold);
text-decoration: none;
}
.article-quiz-cta__nudge a:hover {
text-decoration: underline;
}
/* Mobile: stack vertically */
@media (max-width: 600px) {
.article-quiz-cta {
flex-direction: column;
align-items: stretch;
}
.article-quiz-cta__actions {
align-items: stretch;
}
.article-quiz-cta__btn {
justify-content: center;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
QUIZ OVERLAY
═══════════════════════════════════════════════════════════════════════════ */
/* Prevent body scroll while overlay is open */
body.quiz-overlay-open {
overflow: hidden;
}
.quiz-overlay {
position: fixed;
inset: 0;
z-index: 1080;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.quiz-overlay__backdrop {
position: absolute;
inset: 0;
background: rgba(8, 15, 25, 0.7);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
transition: opacity var(--quiz-transition);
}
.quiz-overlay.is-open .quiz-overlay__backdrop {
opacity: 1;
}
.quiz-overlay__panel {
position: relative;
z-index: 1;
width: 100%;
max-width: 640px;
max-height: 90vh;
border-radius: 20px;
background: #ffffff;
box-shadow:
0 8px 40px rgba(0, 0, 0, 0.25),
0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 0;
transition:
transform var(--quiz-transition),
opacity var(--quiz-transition);
}
.quiz-overlay.is-open .quiz-overlay__panel {
opacity: 1;
}
/* Panel header */
.quiz-overlay__header {
display: flex;
align-items: center;
gap: 12px;
padding: 20px 24px 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
flex-shrink: 0;
}
.quiz-overlay__header-icon {
font-size: 24px;
color: var(--quiz-gold);
font-variation-settings:
"wght" 300,
"FILL" 0,
"GRAD" 0,
"opsz" 24;
flex-shrink: 0;
}
.quiz-overlay__header-title {
flex: 1;
font-size: 1rem;
font-weight: 700;
color: var(--quiz-navy);
margin: 0;
line-height: 1.3;
}
.quiz-overlay__close {
flex-shrink: 0;
width: 36px;
height: 36px;
border-radius: 8px;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--tg-icon-color, #8a9bae);
transition:
background 0.15s ease,
color 0.15s ease;
}
.quiz-overlay__close:hover {
background: rgba(0, 0, 0, 0.06);
color: var(--quiz-navy);
}
.quiz-overlay__close .material-symbols-sharp {
font-size: 20px;
}
.quiz-overlay__progress-slot {
flex-shrink: 0;
padding: 12px 24px 0;
}
/* Scrollable body */
.quiz-overlay__body {
flex: 1;
overflow-y: auto;
padding: 20px 24px 28px;
outline: none;
transition: opacity 0.2s ease;
}
.quiz-overlay__body.is-exiting {
opacity: 0;
}
.quiz-overlay__body.is-entering {
opacity: 0;
animation: quizFadeIn 0.25s ease forwards;
}
.quiz-overlay__body.is-loading {
pointer-events: none;
}
@keyframes quizFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Loading state */
.quiz-overlay__loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 48px 0;
color: var(--tg-icon-color, #8a9bae);
}
.quiz-overlay__spinner {
font-size: 40px;
animation: quizSpin 1s linear infinite;
font-variation-settings:
"wght" 200,
"FILL" 0,
"GRAD" 0,
"opsz" 40;
}
@keyframes quizSpin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.quiz-overlay__error {
text-align: center;
padding: 32px;
color: var(--tg-body-font-color);
}
.quiz-overlay__error .material-symbols-sharp {
font-size: 40px;
color: #e05252;
display: block;
margin-bottom: 12px;
}
/* Mobile: full-screen panel */
@media (max-width: 600px) {
.quiz-overlay {
padding: 0;
align-items: flex-end;
}
.quiz-overlay__panel {
max-height: 92vh;
border-radius: 20px 20px 0 0;
}
}
/* ═══════════════════════════════════════════════════════════════════════════
QUIZ PROGRESS BAR (.zaira-quiz-progress)
═══════════════════════════════════════════════════════════════════════════ */
.zaira-quiz-progress {
margin-bottom: 8px;
}
.zaira-quiz-progress__meta {
display: flex;
justify-content: space-between;
font-size: 12px;
font-weight: 600;
color: var(--tg-icon-color, #8a9bae);
letter-spacing: 0.03em;
text-transform: uppercase;
margin-bottom: 6px;
}
.zaira-quiz-progress__track {
height: 6px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.08);
overflow: hidden;
}
.zaira-quiz-progress__fill {
height: 100%;
border-radius: 3px;
background: linear-gradient(
90deg,
var(--quiz-gold) 0%,
color-mix(in srgb, var(--quiz-gold) 70%, #fff 30%) 100%
);
transition: width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
min-width: 6px;
}
/* ═══════════════════════════════════════════════════════════════════════════
QUIZ QUESTION + ANSWERING FORM
═══════════════════════════════════════════════════════════════════════════ */
.zaira-quiz-question {
margin-bottom: 20px;
}
.zaira-quiz-question__body,
.zaira-quiz-question__body p {
font-size: 1.05rem;
font-weight: 600;
color: var(--quiz-navy);
line-height: 1.55;
margin: 0;
}
#quiz-question-answering-form.answering-form {
margin: 0;
}
/* ── Answer options: radios and checkboxes as card rows ──── */
#quiz-question-answering-form .form-radios,
#quiz-question-answering-form .form-checkboxes,
#quiz-question-answering-form .form-type-radios > .form-radios,
#quiz-question-answering-form .form-type-checkboxes > .form-checkboxes {
display: flex;
flex-direction: column;
gap: 10px;
margin: 16px 0 24px;
}
#quiz-question-answering-form .form-type-radio,
#quiz-question-answering-form .form-type-checkbox {
position: relative;
margin: 0;
}
#quiz-question-answering-form .form-type-radio label,
#quiz-question-answering-form .form-type-checkbox label {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
border-radius: 12px;
border: 2px solid rgba(0, 0, 0, 0.1);
background: #f9f8f7;
cursor: pointer;
font-size: 0.95rem;
font-weight: 500;
color: var(--quiz-navy);
line-height: 1.45;
transition:
border-color 0.15s ease,
background 0.15s ease,
box-shadow 0.15s ease;
user-select: none;
}
#quiz-question-answering-form .form-type-radio label:hover,
#quiz-question-answering-form .form-type-checkbox label:hover {
border-color: var(--quiz-gold);
background: var(--quiz-gold-light);
}
/* Hide native input, show custom indicator */
#quiz-question-answering-form .form-type-radio input[type="radio"],
#quiz-question-answering-form .form-type-checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
flex-shrink: 0;
width: 20px;
height: 20px;
border: 2px solid rgba(0, 0, 0, 0.2);
border-radius: 50%; /* radio */
background: #fff;
transition:
border-color 0.15s ease,
background 0.15s ease;
position: relative;
}
#quiz-question-answering-form .form-type-checkbox input[type="checkbox"] {
border-radius: 5px; /* checkbox */
}
#quiz-question-answering-form .form-type-radio input[type="radio"]:checked,
#quiz-question-answering-form
.form-type-checkbox
input[type="checkbox"]:checked {
background: var(--quiz-gold);
border-color: var(--quiz-gold);
}
#quiz-question-answering-form
.form-type-radio
input[type="radio"]:checked::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
}
#quiz-question-answering-form
.form-type-checkbox
input[type="checkbox"]:checked::after {
content: "✓";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 12px;
line-height: 1;
}
/* Selected state: highlight the whole card */
#quiz-question-answering-form .form-type-radio:has(input:checked) label,
#quiz-question-answering-form .form-type-checkbox:has(input:checked) label {
border-color: var(--quiz-gold);
background: var(--quiz-gold-light);
box-shadow: 0 0 0 3px var(--quiz-gold-glow);
}
/* Feedback states (after question is graded) */
#quiz-question-answering-form .q-correct label {
border-color: #28b45a !important;
background: #edfaf3 !important;
}
#quiz-question-answering-form .q-wrong label {
border-color: #e05252 !important;
background: #fdf1f1 !important;
}
#quiz-question-answering-form .q-waiting label {
border-color: #e0a030 !important;
background: #fff9ed !important;
}
/* Navigation buttons */
#quiz-question-answering-form .form-actions,
#quiz-question-answering-form .form-type-actions,
#quiz-question-answering-form [data-drupal-selector*="navigation"] {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-top: 8px;
}
#quiz-question-answering-form #edit-navigation-submit,
#quiz-question-answering-form .form-submit {
padding: 12px 32px;
border-radius: 10px;
background: var(--quiz-gold);
color: var(--quiz-navy);
border: none;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition:
background var(--quiz-transition),
transform var(--quiz-transition);
box-shadow: 0 2px 10px rgba(192, 154, 82, 0.3);
}
#quiz-question-answering-form #edit-navigation-submit:hover {
background: color-mix(in srgb, var(--quiz-gold) 80%, #fff 20%);
}
#quiz-question-answering-form #edit-navigation-skip {
padding: 12px 24px;
border-radius: 10px;
background: transparent;
color: var(--tg-icon-color, #8a9bae);
border: 1px solid rgba(0, 0, 0, 0.12);
font-size: 14px;
cursor: pointer;
transition:
background 0.15s ease,
color 0.15s ease;
}
#quiz-question-answering-form #edit-navigation-skip:hover {
background: rgba(0, 0, 0, 0.05);
color: var(--quiz-navy);
}
#quiz-question-answering-form [type="submit"]:disabled {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
/* ═══════════════════════════════════════════════════════════════════════════
QUIZ RESULT SCORE (.zaira-quiz-score)
═══════════════════════════════════════════════════════════════════════════ */
.zaira-quiz-score {
display: flex;
flex-direction: column;
align-items: center;
padding: 24px 0 8px;
}
.zaira-quiz-score__circle-wrap {
position: relative;
width: 140px;
height: 140px;
margin-bottom: 16px;
}
.zaira-quiz-score__ring {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.zaira-quiz-score__ring-track {
fill: none;
stroke: rgba(0, 0, 0, 0.08);
stroke-width: 8;
}
.zaira-quiz-score__ring-fill {
fill: none;
stroke: var(--quiz-gold);
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 0 263.8;
transition: stroke-dasharray 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
}
.zaira-quiz-score--excellent .zaira-quiz-score__ring-fill {
stroke: #28b45a;
}
.zaira-quiz-score--try-again .zaira-quiz-score__ring-fill {
stroke: #e05252;
}
.zaira-quiz-score__center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
}
.zaira-quiz-score__pct {
font-size: 1.9rem;
font-weight: 800;
color: var(--quiz-navy);
line-height: 1;
}
.zaira-quiz-score__verdict {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--quiz-gold);
}
.zaira-quiz-score--excellent .zaira-quiz-score__verdict {
color: #28b45a;
}
.zaira-quiz-score--try-again .zaira-quiz-score__verdict {
color: #e05252;
}
.zaira-quiz-score__detail {
text-align: center;
}
.zaira-quiz-score__points {
font-size: 0.9rem;
color: var(--tg-icon-color, #8a9bae);
margin: 0;
}
/* ═══════════════════════════════════════════════════════════════════════════
QUIZ RESULT SUMMARY + NEWSLETTER NUDGE
═══════════════════════════════════════════════════════════════════════════ */
.zaira-quiz-result-summary {
margin-top: 20px;
}
.zaira-quiz-result-summary__text {
font-size: 0.95rem;
color: var(--tg-body-font-color);
line-height: 1.65;
margin-bottom: 24px;
padding: 16px 20px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.04);
border-left: 3px solid var(--quiz-gold);
}
/* Newsletter nudge */
.zaira-quiz-newsletter {
display: flex;
align-items: flex-start;
gap: 16px;
margin-top: 28px;
padding: 20px 24px;
border-radius: 14px;
background: linear-gradient(
135deg,
var(--quiz-navy) 0%,
var(--quiz-navy-2) 100%
);
border: 1px solid rgba(192, 154, 82, 0.22);
}
.zaira-quiz-newsletter__icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--quiz-gold-light);
border: 1px solid var(--quiz-gold-glow);
display: flex;
align-items: center;
justify-content: center;
}
.zaira-quiz-newsletter__icon .material-symbols-sharp {
font-size: 22px;
color: var(--quiz-gold);
font-variation-settings:
"wght" 300,
"FILL" 0,
"GRAD" 0,
"opsz" 24;
}
.zaira-quiz-newsletter__heading {
font-size: 0.95rem;
font-weight: 700;
color: #ffffff;
margin: 0 0 6px;
}
.zaira-quiz-newsletter__body {
font-size: 0.85rem;
color: rgba(228, 234, 240, 0.65);
margin: 0 0 14px;
line-height: 1.55;
}
.zaira-quiz-newsletter__cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 22px;
border-radius: 8px;
background: var(--quiz-gold);
color: var(--quiz-navy);
font-size: 13px;
font-weight: 700;
text-decoration: none;
transition:
background var(--quiz-transition),
transform var(--quiz-transition);
}
.zaira-quiz-newsletter__cta:hover {
background: color-mix(in srgb, var(--quiz-gold) 80%, #fff 20%);
color: var(--quiz-navy);
}
.zaira-quiz-newsletter__cta .material-symbols-sharp {
font-size: 16px;
}
/* ═══════════════════════════════════════════════════════════════════════════
DARK MODE
═══════════════════════════════════════════════════════════════════════════ */
/* Teaser: already uses dark (navy) background — no change needed. */
[data-bs-theme="dark"] .quiz-overlay__panel {
background: #0f1e35;
box-shadow:
0 8px 40px rgba(0, 0, 0, 0.55),
0 2px 8px rgba(0, 0, 0, 0.3);
}
[data-bs-theme="dark"] .quiz-overlay__header {
border-color: rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .quiz-overlay__header-title {
color: #e4eaf0;
}
[data-bs-theme="dark"] .quiz-overlay__close:hover {
background: rgba(255, 255, 255, 0.08);
color: #e4eaf0;
}
[data-bs-theme="dark"] .zaira-quiz-progress__track {
background: rgba(255, 255, 255, 0.1);
}
/* Question text */
[data-bs-theme="dark"] .zaira-quiz-question__body,
[data-bs-theme="dark"] .zaira-quiz-question__body p {
color: #e4eaf0;
}
/* Answer option cards */
[data-bs-theme="dark"] #quiz-question-answering-form .form-type-radio label,
[data-bs-theme="dark"] #quiz-question-answering-form .form-type-checkbox label {
background: #162843;
border-color: rgba(255, 255, 255, 0.1);
color: #c8d0da;
}
[data-bs-theme="dark"]
#quiz-question-answering-form
.form-type-radio
label:hover,
[data-bs-theme="dark"]
#quiz-question-answering-form
.form-type-checkbox
label:hover {
border-color: var(--quiz-gold);
background: rgba(192, 154, 82, 0.1);
}
[data-bs-theme="dark"]
#quiz-question-answering-form
.form-type-radio
input[type="radio"],
[data-bs-theme="dark"]
#quiz-question-answering-form
.form-type-checkbox
input[type="checkbox"] {
background: #0d1b2a;
border-color: rgba(255, 255, 255, 0.2);
}
[data-bs-theme="dark"]
#quiz-question-answering-form
.form-type-radio:has(input:checked)
label,
[data-bs-theme="dark"]
#quiz-question-answering-form
.form-type-checkbox:has(input:checked)
label {
border-color: var(--quiz-gold);
background: rgba(192, 154, 82, 0.12);
}
/* Skip button */
[data-bs-theme="dark"] #quiz-question-answering-form #edit-navigation-skip {
border-color: rgba(255, 255, 255, 0.12);
color: rgba(228, 234, 240, 0.55);
}
[data-bs-theme="dark"]
#quiz-question-answering-form
#edit-navigation-skip:hover {
background: rgba(255, 255, 255, 0.06);
color: #e4eaf0;
}
/* Score circle */
[data-bs-theme="dark"] .zaira-quiz-score__pct {
color: #e4eaf0;
}
[data-bs-theme="dark"] .zaira-quiz-score__ring-track {
stroke: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .zaira-quiz-result-summary__text {
background: rgba(255, 255, 255, 0.05);
color: #c8d0da;
}
/*=============================
56. Flag bookmark — post-meta icon + profile bookmarks
===============================*/
/* ── Flag inside the overflow panel ─────────────────────────────────────────
The flag module wraps its link in two extra divs:
div.meta-overflow__item.meta-overflow__item--flag
div.flag.zaira-flag
a.zaira-flag__btn ← the only element that should carry visual state
Strategy: make the outer two divs invisible pass-throughs (no padding, no
hover of their own) and replicate .meta-overflow__item styling on the
.
─────────────────────────────────────────────────────────────────────────── */
/* Outer wrapper: remove padding so the inner controls all spacing */
.meta-overflow__item.meta-overflow__item--flag {
padding: 0;
}
/* Suppress hover background on the outer div — only the inner should react */
.meta-overflow__item.meta-overflow__item--flag:hover,
.meta-overflow__item.meta-overflow__item--flag:focus-visible {
background: transparent;
color: inherit;
}
/* Flag module wrapper divs — transparent layout containers */
.meta-overflow__item--flag .flag,
.meta-overflow__item--flag .zaira-flag {
display: block;
width: 100%;
}
/* ── The actual link (.zaira-flag__btn) — identical to .meta-overflow__item ── */
.zaira-flag__btn {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
border-radius: 8px;
text-decoration: none;
font-size: 13px;
font-weight: 500;
text-transform: none;
letter-spacing: 0;
white-space: nowrap;
color: var(--tg-body-font-color);
width: 100%;
transition:
background 0.12s ease,
color 0.12s ease;
cursor: pointer;
}
.zaira-flag__btn:hover,
.zaira-flag__btn:focus-visible {
background: rgba(0, 0, 0, 0.05);
color: var(--tg-primary-color, #c09a52);
outline: none;
}
/* ── Icon — identical to .meta-overflow__item .material-symbols-sharp ── */
.zaira-flag__icon {
font-size: 16px;
line-height: 1;
flex-shrink: 0;
font-variation-settings:
"wght" 300,
"FILL" 0,
"GRAD" 0,
"opsz" 24;
transition:
color 0.15s ease,
font-variation-settings 0.15s ease;
}
/* Filled icon when already bookmarked */
.zaira-flag__icon--filled {
font-variation-settings:
"wght" 400,
"FILL" 1,
"GRAD" 0,
"opsz" 24;
color: var(--tg-primary-color, #c09a52);
}
/* "Remove bookmark" row: hover turns red as a delete affordance */
.action-unflag .zaira-flag__btn:hover {
color: #d94f4f;
background: rgba(217, 79, 79, 0.06);
}
.action-unflag .zaira-flag__btn:hover .zaira-flag__icon {
color: #d94f4f;
font-variation-settings:
"wght" 400,
"FILL" 1,
"GRAD" 0,
"opsz" 24;
}
/* AJAX "waiting" pulse while the request is in flight */
.flag-waiting .zaira-flag__icon {
animation: flagPulse 0.55s ease-in-out infinite alternate;
}
@keyframes flagPulse {
from {
opacity: 1;
}
to {
opacity: 0.3;
}
}
/* Denied / anonymous-only state */
.zaira-flag__denied {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 14px;
font-size: 13px;
color: var(--tg-icon-color, #8a9bae);
cursor: default;
opacity: 0.6;
}
/* ── Dark mode ── */
[data-bs-theme="dark"] .zaira-flag__btn {
color: #d4dbe4;
}
[data-bs-theme="dark"] .zaira-flag__btn:hover {
background: rgba(255, 255, 255, 0.07);
color: var(--tg-primary-color, #c09a52);
}
[data-bs-theme="dark"] .action-unflag .zaira-flag__btn:hover {
color: #e07070;
background: rgba(217, 79, 79, 0.1);
}
/* ── Quiz access-denied card (.quiz-access-denied) ───────────────────────── */
.quiz-access-denied {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: clamp(24px, 5vw, 40px) 24px;
gap: 14px;
}
.quiz-access-denied__icon {
font-size: 52px;
color: var(--quiz-gold, #c09a52);
font-variation-settings:
"wght" 200,
"FILL" 0,
"GRAD" 0,
"opsz" 48;
opacity: 0.85;
}
.quiz-access-denied__heading {
font-size: 1.15rem;
font-weight: 700;
color: var(--tg-black, #0d1b2a);
margin: 0;
}
.quiz-access-denied__body {
font-size: 0.9rem;
line-height: 1.65;
color: var(--tg-icon-color, #8a9bae);
max-width: 42ch;
margin: 0;
}
.quiz-access-denied__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
margin-top: 6px;
}
.quiz-access-denied__btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 24px;
border-radius: 9px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition:
background var(--quiz-transition, 0.22s ease),
transform var(--quiz-transition, 0.22s ease);
}
.quiz-access-denied__btn .material-symbols-sharp {
font-size: 16px;
}
.quiz-access-denied__btn--primary {
background: var(--quiz-gold, #c09a52);
color: var(--quiz-navy, #0d1b2a);
box-shadow: 0 2px 10px rgba(192, 154, 82, 0.3);
}
.quiz-access-denied__btn--primary:hover {
background: color-mix(in srgb, var(--quiz-gold, #c09a52) 80%, #fff 20%);
color: var(--quiz-navy, #0d1b2a);
}
.quiz-access-denied__btn--secondary {
background: rgba(0, 0, 0, 0.06);
color: var(--tg-body-font-color);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.quiz-access-denied__btn--secondary:hover {
background: rgba(0, 0, 0, 0.1);
color: var(--tg-body-font-color);
}
/* Teaser CTA: access-denied state */
.article-quiz-cta.is-access-denied .article-quiz-cta__btn {
background: rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.7);
box-shadow: none;
cursor: default;
}
/* Reassurance footnote below the action buttons */
.quiz-access-denied__footnote {
font-size: 11px;
color: var(--tg-icon-color, #8a9bae);
margin: 8px 0 0;
text-align: center;
}
/* Dark mode */
[data-bs-theme="dark"] .quiz-access-denied__heading {
color: #e4eaf0;
}
[data-bs-theme="dark"] .quiz-access-denied__btn--secondary {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.12);
color: #c8d0da;
}
[data-bs-theme="dark"] .quiz-access-denied__btn--secondary:hover {
background: rgba(255, 255, 255, 0.13);
color: #e4eaf0;
}
/* ── Profile page: bookmarks section ─────────────────────────────────────── */
.profile-bookmarks {
margin-top: clamp(40px, 6vw, 72px);
padding-top: 40px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.profile-bookmarks__icon {
font-size: 1.2rem;
vertical-align: -2px;
margin-right: 6px;
font-variation-settings:
"wght" 300,
"FILL" 0,
"GRAD" 0,
"opsz" 24;
color: var(--tg-primary-color, #c09a52);
}
/* Override the flag_bookmark view's default table style to a card grid */
.profile-bookmarks .view-flag-bookmark .views-table {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
width: 100%;
border: none;
}
.profile-bookmarks .view-flag-bookmark thead {
display: none;
}
.profile-bookmarks .view-flag-bookmark tbody {
display: contents;
}
.profile-bookmarks .view-flag-bookmark .views-row {
display: flex;
flex-direction: column;
gap: 10px;
padding: 18px 20px;
border-radius: 12px;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
transition:
box-shadow 0.18s ease,
transform 0.18s ease;
}
.profile-bookmarks .view-flag-bookmark .views-row:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.profile-bookmarks .view-flag-bookmark .views-field-title a {
font-size: 0.95rem;
font-weight: 600;
color: var(--tg-black, #0d1b2a);
text-decoration: none;
line-height: 1.4;
display: block;
}
.profile-bookmarks .view-flag-bookmark .views-field-title a:hover {
color: var(--tg-primary-color, #c09a52);
}
.profile-bookmarks .view-flag-bookmark .views-field-created,
.profile-bookmarks .view-flag-bookmark .views-field-created-1 {
font-size: 11px;
color: var(--tg-icon-color, #8a9bae);
}
/* Flag (unflag) link within the bookmark card — compact */
.profile-bookmarks .view-flag-bookmark .zaira-flag__btn {
padding: 6px 10px;
font-size: 12px;
}
.profile-bookmarks .view-flag-bookmark .zaira-flag__icon {
font-size: 14px;
}
/* Empty state */
.profile-bookmarks__empty {
text-align: center;
padding: 48px 24px;
color: var(--tg-icon-color, #8a9bae);
}
.profile-bookmarks__empty-icon {
font-size: 48px;
display: block;
margin: 0 auto 16px;
color: rgba(192, 154, 82, 0.4);
font-variation-settings:
"wght" 200,
"FILL" 0,
"GRAD" 0,
"opsz" 48;
}
.profile-bookmarks__empty p {
margin: 0 0 8px;
font-size: 0.95rem;
}
.profile-bookmarks__empty-hint {
font-size: 0.85rem !important;
}
.profile-bookmarks__inline-icon {
font-size: 15px;
vertical-align: -3px;
font-variation-settings:
"wght" 300,
"FILL" 0,
"GRAD" 0,
"opsz" 20;
}
/* Dark mode */
[data-bs-theme="dark"] .profile-bookmarks {
border-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .profile-bookmarks .view-flag-bookmark .views-row {
background: #162843;
border-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
[data-bs-theme="dark"]
.profile-bookmarks
.view-flag-bookmark
.views-field-title
a {
color: #e4eaf0;
}
[data-bs-theme="dark"]
.profile-bookmarks
.view-flag-bookmark
.views-field-title
a:hover {
color: var(--tg-primary-color, #c09a52);
}
/*=============================
57. User edit form — label visibility
===============================*/
/* Programmatic form-label class (added via zaira_form_user_form_alter) gives
Bootstrap's native margin-bottom: 0.5rem. The rules below reinforce visual
prominence regardless of which browser or which upstream rule wins. */
/* form-label added programmatically — ensure it is always visible */
#user-form label.form-label {
display: block !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
color: var(--tg-heading-font-color, #0d1b2a) !important;
margin-bottom: 0.45rem !important;
line-height: 1.4 !important;
}
/* Fallback for any label that didn't get form-label (e.g. nested widgets) */
#user-form .js-form-item > label,
#user-form .js-form-item .js-form-item > label {
display: block !important;
font-size: 0.875rem !important;
font-weight: 600 !important;
color: var(--tg-heading-font-color, #0d1b2a) !important;
margin-bottom: 0.45rem !important;
}
/* "Account information" and similar fieldset legends */
#user-form fieldset legend,
#user-form .fieldgroup legend {
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--tg-heading-font-color, #0d1b2a) !important;
}
/* Dark mode */
[data-bs-theme="dark"] #user-form label.form-label,
[data-bs-theme="dark"] #user-form .js-form-item > label,
[data-bs-theme="dark"] #user-form .js-form-item .js-form-item > label,
[data-bs-theme="dark"] #user-form fieldset legend {
color: #e4eaf0 !important;
}
/*=============================
Publisher product page — full template
===============================*/
/* ── Hero ──────────────────────────────────────────────────────────── */
.pub-product__hero {
background: var(--tg-white, #fff);
border-bottom: 1px solid var(--tg-border-color, #e2ddd7);
padding-block: clamp(3rem, 7vw, 5.5rem);
}
[data-bs-theme="dark"] .pub-product__hero {
background: var(--tg-secondary-color, #0d1b2a);
border-color: rgba(255, 255, 255, 0.08);
}
.pub-product__hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(2rem, 5vw, 4rem);
align-items: start;
}
.pub-product__badge {
display: inline-block;
font-size: 0.675rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.25rem 0.875rem;
border-radius: 999px;
background: var(--tg-primary-color, #c09a52);
color: #fff;
margin-bottom: 1rem;
}
.pub-product__title {
font-size: clamp(1.75rem, 3vw + 0.5rem, 2.75rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
color: var(--tg-heading-font-color, #0d1b2a);
margin-bottom: 0.875rem;
}
[data-bs-theme="dark"] .pub-product__title {
color: #e4eaf0;
}
.pub-product__tagline {
font-size: 1rem;
color: var(--tg-body-font-color, #3d4a56);
margin-bottom: 1.75rem;
line-height: 1.6;
}
.pub-product__price-block {
display: flex;
align-items: baseline;
gap: 0.5rem;
margin-bottom: 1.75rem;
}
.pub-product__currency {
font-size: 1.125rem;
font-weight: 600;
color: var(--tg-body-font-color, #3d4a56);
}
.pub-product__amount {
font-size: clamp(2.25rem, 4vw, 3rem);
font-weight: 700;
letter-spacing: -0.04em;
color: var(--tg-heading-font-color, #0d1b2a);
line-height: 1;
}
[data-bs-theme="dark"] .pub-product__amount {
color: #e4eaf0;
}
.pub-product__vat {
font-size: 0.8rem;
color: var(--tg-icon-color, #6b788a);
}
.pub-product__cart {
margin-bottom: 1.5rem;
}
/* Style Commerce's add-to-cart button */
.pub-product__cart .btn-primary,
.pub-product__cart input[type="submit"],
.pub-product__cart button[type="submit"] {
background: var(--tg-primary-color, #c09a52) !important;
border-color: var(--tg-primary-color, #c09a52) !important;
padding: 0.875rem 2rem !important;
font-size: 1rem !important;
font-weight: 700 !important;
border-radius: 8px !important;
transition:
background 0.2s ease,
box-shadow 0.2s ease !important;
}
.pub-product__cart .btn-primary:hover,
.pub-product__cart input[type="submit"]:hover,
.pub-product__cart button[type="submit"]:hover {
background: color-mix(
in srgb,
var(--tg-primary-color, #c09a52) 80%,
#000 20%
) !important;
box-shadow: 0 4px 16px rgba(192, 154, 82, 0.35) !important;
}
.pub-product__guarantees {
display: flex;
gap: 1.25rem;
flex-wrap: wrap;
font-size: 0.8125rem;
color: var(--tg-icon-color, #6b788a);
}
.pub-product__guarantees span {
display: flex;
align-items: center;
gap: 0.375rem;
}
.pub-product__guarantees .material-symbols-sharp {
font-size: 16px;
}
/* Includes card (right side) */
.pub-product__includes-card {
background: var(--tg-white, #fff);
border: 1px solid var(--tg-border-color, #e2ddd7);
border-radius: 12px;
padding: 1.75rem;
box-shadow: 0 2px 16px rgba(13, 27, 42, 0.06);
}
[data-bs-theme="dark"] .pub-product__includes-card {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
}
.pub-product__includes-heading {
font-size: 1rem;
font-weight: 700;
color: var(--tg-heading-font-color, #0d1b2a);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
[data-bs-theme="dark"] .pub-product__includes-heading {
color: #e4eaf0;
}
.pub-product__includes-list {
list-style: none;
padding: 0;
margin: 0 0 1.25rem;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.pub-product__includes-list li {
display: flex;
gap: 0.625rem;
font-size: 0.9rem;
color: var(--tg-body-font-color, #3d4a56);
line-height: 1.5;
}
.pub-product__includes-list li::before {
content: "✓";
color: var(--tg-primary-color, #c09a52);
font-weight: 700;
flex-shrink: 0;
}
.pub-product__social-proof {
padding-top: 1rem;
border-top: 1px solid var(--tg-border-color, #e2ddd7);
font-size: 0.8125rem;
color: var(--tg-icon-color, #6b788a);
display: flex;
align-items: flex-start;
gap: 0.5rem;
line-height: 1.5;
}
.pub-product__social-proof .material-symbols-sharp {
font-size: 18px;
flex-shrink: 0;
}
/* ── Trust strip ───────────────────────────────────────────────────── */
.pub-product__trust-strip {
background: var(--tg-secondary-color, #0d1b2a);
padding-block: 1rem;
}
.pub-product__trust-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 2.5rem;
flex-wrap: wrap;
}
.pub-product__trust-list li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8125rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.75);
}
.pub-product__trust-list .material-symbols-sharp {
font-size: 18px;
opacity: 0.7;
}
/* ── Tabs ──────────────────────────────────────────────────────────── */
.pub-product__tabs-section {
padding-block: clamp(3rem, 6vw, 5rem);
background: var(--tg-white, #fff);
}
[data-bs-theme="dark"] .pub-product__tabs-section {
background: var(--tg-secondary-color, #0d1b2a);
}
.pub-product__tab-nav {
border-bottom: 2px solid var(--tg-border-color, #e2ddd7);
gap: 0.25rem;
margin-bottom: 2rem;
}
[data-bs-theme="dark"] .pub-product__tab-nav {
border-color: rgba(255, 255, 255, 0.1);
}
.pub-product__tab-nav .nav-link {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9375rem;
font-weight: 600;
color: var(--tg-icon-color, #6b788a);
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
padding: 0.75rem 1.25rem;
margin-bottom: -2px;
transition:
color 0.18s ease,
border-color 0.18s ease;
}
.pub-product__tab-nav .nav-link:hover {
color: var(--tg-heading-font-color, #0d1b2a);
border-color: var(--tg-border-color, #e2ddd7);
}
.pub-product__tab-nav .nav-link.active {
color: var(--tg-primary-color, #c09a52);
border-color: var(--tg-primary-color, #c09a52);
background: transparent;
}
.pub-product__tab-pane {
padding-top: 0.5rem;
}
.pub-product__desc-summary {
font-size: 1rem;
color: var(--tg-body-font-color, #3d4a56);
line-height: 1.75;
max-width: 68ch;
margin-bottom: 2rem;
}
.pub-product__desc-includes {
list-style: none;
padding: 0;
margin: 0 0 2rem;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.pub-product__desc-includes li {
display: flex;
gap: 0.75rem;
font-size: 0.9375rem;
color: var(--tg-body-font-color, #3d4a56);
line-height: 1.55;
}
.pub-product__desc-includes li::before {
content: "✓";
color: var(--tg-primary-color, #c09a52);
font-weight: 700;
flex-shrink: 0;
}
.pub-product__urgency {
display: flex;
align-items: flex-start;
gap: 0.625rem;
background: rgba(192, 154, 82, 0.08);
border: 1px solid rgba(192, 154, 82, 0.25);
border-radius: 8px;
padding: 0.875rem 1.125rem;
font-size: 0.875rem;
color: var(--tg-body-font-color, #3d4a56);
line-height: 1.55;
}
.pub-product__urgency .material-symbols-sharp {
font-size: 20px;
color: var(--tg-primary-color, #c09a52);
flex-shrink: 0;
}
/* Submit tab */
.pub-product__submit-steps {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 2rem;
}
.pub-product__submit-step {
display: flex;
gap: 1rem;
align-items: flex-start;
}
.pub-product__submit-step-num {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--tg-primary-color, #c09a52);
color: #fff;
font-size: 0.875rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.pub-product__submit-step p {
font-size: 0.9375rem;
color: var(--tg-body-font-color, #3d4a56);
line-height: 1.6;
padding-top: 0.375rem;
margin: 0;
}
/* FAQ tab */
.pub-product__faq-item {
border-color: var(--tg-border-color, #e2ddd7);
}
.pub-product__faq-body {
font-size: 0.9375rem;
color: var(--tg-body-font-color, #3d4a56);
line-height: 1.7;
}
.pub-product__faq-cta {
margin-top: 2rem;
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.9rem;
color: var(--tg-icon-color, #6b788a);
}
/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
.pub-product__hero-grid {
grid-template-columns: 1fr;
}
.pub-product__trust-list {
gap: 1.25rem;
}
}
@media (max-width: 600px) {
.pub-product__tab-nav .nav-link {
padding: 0.625rem 0.875rem;
font-size: 0.875rem;
}
.pub-product__tab-nav .nav-link .material-symbols-sharp {
display: none;
}
.pub-product__trust-list {
justify-content: flex-start;
}
}
/*=============================
Publisher product teaser card (View grid)
===============================*/
.pub-teaser {
background: var(--tg-white, #fff);
border: 1px solid var(--tg-border-color, #e2ddd7);
border-radius: 12px;
padding: 1.75rem;
display: flex;
flex-direction: column;
height: 100%;
transition:
box-shadow 0.2s ease,
border-color 0.2s ease;
}
.pub-teaser:hover {
box-shadow: 0 6px 24px rgba(13, 27, 42, 0.1);
border-color: rgba(192, 154, 82, 0.3);
}
[data-bs-theme="dark"] .pub-teaser {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
.pub-teaser__head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.125rem;
}
.pub-teaser__icon {
width: 44px;
height: 44px;
border-radius: 8px;
background: rgba(192, 154, 82, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: var(--tg-primary-color, #c09a52);
flex-shrink: 0;
}
.pub-teaser__badge {
font-size: 0.675rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.2rem 0.75rem;
border-radius: 999px;
background: var(--tg-primary-color, #c09a52);
color: #fff;
}
.pub-teaser__title {
font-size: 1.2rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--tg-heading-font-color, #0d1b2a);
margin-bottom: 0.5rem;
}
.pub-teaser__title a {
color: inherit;
text-decoration: none;
}
.pub-teaser__title a:hover {
color: var(--tg-primary-color, #c09a52);
}
[data-bs-theme="dark"] .pub-teaser__title {
color: #e4eaf0;
}
.pub-teaser__tagline {
font-size: 0.875rem;
color: var(--tg-icon-color, #6b788a);
line-height: 1.55;
margin-bottom: 1rem;
}
.pub-teaser__price {
display: flex;
align-items: baseline;
gap: 0.375rem;
margin-bottom: 1.125rem;
}
.pub-teaser__amount {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--tg-heading-font-color, #0d1b2a);
}
[data-bs-theme="dark"] .pub-teaser__amount {
color: #e4eaf0;
}
.pub-teaser__vat {
font-size: 0.75rem;
color: var(--tg-icon-color, #6b788a);
}
.pub-teaser__includes {
list-style: none;
padding: 0;
margin: 0 0 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
flex-grow: 1;
}
.pub-teaser__includes li {
display: flex;
gap: 0.5rem;
font-size: 0.8125rem;
color: var(--tg-body-font-color, #3d4a56);
line-height: 1.5;
}
.pub-teaser__includes li::before {
content: "✓";
color: var(--tg-primary-color, #c09a52);
font-weight: 700;
flex-shrink: 0;
}
[data-bs-theme="dark"] .pub-teaser__includes li {
color: #c8d0da;
}
.pub-teaser__actions {
display: flex;
align-items: center;
gap: 1rem;
margin-top: auto;
}
.pub-teaser__cta-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
background: var(--tg-primary-color, #c09a52);
color: #fff;
font-size: 0.875rem;
font-weight: 700;
padding: 0.625rem 1.25rem;
border-radius: 6px;
text-decoration: none;
transition:
background 0.2s ease,
box-shadow 0.2s ease;
}
.pub-teaser__cta-btn:hover {
background: color-mix(
in srgb,
var(--tg-primary-color, #c09a52) 80%,
#000 20%
);
box-shadow: 0 3px 12px rgba(192, 154, 82, 0.35);
color: #fff;
}
.pub-teaser__cta-btn .material-symbols-sharp {
font-size: 16px;
}
.pub-teaser__details-link {
font-size: 0.8125rem;
color: var(--tg-icon-color, #6b788a);
text-decoration: none;
}
.pub-teaser__details-link:hover {
color: var(--tg-primary-color, #c09a52);
text-decoration: underline;
}
/* Landing page grid override for the publish_shop view block.
*
* Views' grid style floats columns and stamps an inline width on each.
* Convert the row to flex so we get a proper gap, and neutralise the
* inline width so flex: 1 can take over.
*/
.lp-publish-shop .views-row {
display: flex;
gap: 1.5rem;
align-items: stretch; /* equal-height cards */
flex-wrap: wrap;
}
.lp-publish-shop .views-col {
width: auto !important; /* override inline style="width:33.333%" */
flex: 1 1 0; /* equal-width columns */
min-width: 0; /* allow flex shrink below content size */
}
@media (max-width: 700px) {
.lp-publish-shop .views-row {
flex-direction: column;
}
.lp-publish-shop .views-col {
flex: none;
width: 100% !important;
}
}
/*=============================
/topics — Category topic cards
===============================*/
/* ── Design tokens ──────────────────────────────────────────────────────── */
.topics-hero,
.topics-main,
.topics-stats {
--tp-navy: var(--tg-secondary-color, #0d1b2a);
--tp-gold: var(--tg-primary-color, #c09a52);
--tp-text: var(--tg-body-font-color, #3d4a56);
--tp-head: var(--tg-heading-font-color, #0d1b2a);
--tp-muted: var(--tg-icon-color, #6b788a);
--tp-border: var(--tg-border-color, #e2ddd7);
--tp-white: var(--tg-white, #fff);
--tp-radius: 14px;
--tp-ease: cubic-bezier(0.16, 1, 0.3, 1);
}
[data-bs-theme="dark"] .topics-hero,
[data-bs-theme="dark"] .topics-main,
[data-bs-theme="dark"] .topics-stats {
--tp-head: #e4eaf0;
--tp-text: #c8d0da;
--tp-muted: #6b7a8a;
--tp-border: rgba(255, 255, 255, 0.1);
--tp-white: #111e2d;
}
/* ── Shared container ───────────────────────────────────────────────────── */
.topics-container {
max-width: 1280px;
margin-inline: auto;
padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
/* ── Hero — two-column editorial layout ─────────────────────────────────── */
.topics-hero {
background: var(--tp-navy);
padding-block: clamp(4rem, 10vw, 7.5rem);
position: relative;
overflow: hidden;
}
/* Subtle radial glow behind the "7" */
.topics-hero::before {
content: "";
position: absolute;
top: -60px;
left: -40px;
width: 600px;
height: 600px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(192, 154, 82, 0.07) 0%,
transparent 65%
);
pointer-events: none;
}
/* Decorative large "7" ghost in the background */
.topics-hero::after {
content: "7";
position: absolute;
top: -0.15em;
left: -0.06em;
font-size: clamp(18rem, 35vw, 32rem);
font-weight: 900;
letter-spacing: -0.08em;
line-height: 1;
color: rgba(192, 154, 82, 0.04);
pointer-events: none;
user-select: none;
z-index: 0;
}
/* Two-column grid */
.topics-hero__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(3rem, 7vw, 6rem);
align-items: center;
position: relative;
z-index: 1;
}
/* ── Left: display typography ───────────────────────────────────────────── */
.topics-hero__content {
/* left column */
}
.topics-eyebrow {
display: inline-flex;
align-items: center;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--tp-gold);
padding: 0.35rem 0.875rem;
border-radius: 999px;
background: rgba(192, 154, 82, 0.12);
border: 1px solid rgba(192, 154, 82, 0.25);
margin-bottom: 1.75rem;
}
/* H1 with layered typographic treatment */
.topics-hero__title {
margin-bottom: 1.5rem;
line-height: 1;
display: flex;
align-items: flex-end;
gap: 0.5rem;
flex-wrap: wrap;
}
/* Giant gold "7" */
.topics-hero__num {
display: block;
font-family: var(--tg-heading-font-family, "Inter", sans-serif);
font-size: clamp(6rem, 14vw, 11rem);
font-weight: 900;
letter-spacing: -0.06em;
line-height: 0.88;
color: var(--tp-gold);
flex-shrink: 0;
}
/* "strategic / domains." stacked beside the "7" */
.topics-hero__words {
display: flex;
flex-direction: column;
padding-bottom: 0.4em; /* align baseline with bottom of "7" */
}
.topics-hero__word-1 {
display: block;
font-family: var(--tg-heading-font-family, "Inter", sans-serif);
font-size: clamp(1.5rem, 3.5vw, 3.25rem);
font-style: italic;
font-weight: 300;
letter-spacing: -0.01em;
line-height: 1.15;
color: rgba(255, 255, 255, 0.72);
}
.topics-hero__word-2 {
display: block;
font-family: var(--tg-heading-font-family, "Inter", sans-serif);
font-size: clamp(1.5rem, 3.5vw, 3.25rem);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.1;
color: #ffffff;
}
.topics-hero__lead {
font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.125rem);
color: rgba(255, 255, 255, 0.62);
line-height: 1.7;
max-width: 46ch;
margin-bottom: 1.5rem;
}
.topics-hero__meta {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.03em;
color: rgba(255, 255, 255, 0.35);
flex-wrap: wrap;
}
.topics-hero__meta-sep {
color: rgba(255, 255, 255, 0.18);
}
/* ── Right: numbered topic index ────────────────────────────────────────── */
.topics-hero__index {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.topics-hero__index-item {
display: grid;
grid-template-columns: 2.25rem 1fr auto;
align-items: center;
gap: 0.875rem;
padding: 0.75rem 1rem;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.07);
text-decoration: none;
transition:
background 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
.topics-hero__index-item:hover {
background: rgba(192, 154, 82, 0.1);
border-color: rgba(192, 154, 82, 0.28);
transform: translateX(4px);
}
.topics-hero__index-num {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--tp-gold);
font-variant-numeric: tabular-nums;
}
.topics-hero__index-name {
font-size: 0.9375rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.85);
line-height: 1.2;
transition: color 0.2s ease;
}
.topics-hero__index-item:hover .topics-hero__index-name {
color: #ffffff;
}
.topics-hero__index-count {
font-size: 0.8125rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.3);
font-variant-numeric: tabular-nums;
text-align: right;
}
/* ── Stats strip ────────────────────────────────────────────────────────── */
.topics-stats {
background: rgba(13, 27, 42, 0.96);
padding-block: 1.25rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.topics-stats__grid {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(2rem, 5vw, 5rem);
flex-wrap: wrap;
}
.topics-stat {
display: flex;
align-items: baseline;
gap: 0.625rem;
}
.topics-stat__num {
font-size: clamp(1.25rem, 2vw, 1.75rem);
font-weight: 700;
letter-spacing: -0.03em;
color: var(--tp-gold);
line-height: 1;
}
.topics-stat__label {
font-size: 0.8125rem;
color: rgba(255, 255, 255, 0.55);
font-weight: 500;
}
/* ── Main content area ──────────────────────────────────────────────────── */
.topics-main {
background: #f8f7f4;
padding-block: clamp(3rem, 7vw, 6rem);
}
[data-bs-theme="dark"] .topics-main {
background: #0d1a2a;
}
/* ── Card grid ──────────────────────────────────────────────────────────── */
.topics-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
/* ── Individual topic card ──────────────────────────────────────────────── */
.topic-card {
position: relative;
display: flex;
flex-direction: column;
border-radius: 14px;
background: linear-gradient(130deg, #0d1b2a 0%, #162843 55%, #1e3659 100%);
border: 1px solid rgba(192, 154, 82, 0.22);
box-shadow:
0 4px 24px rgba(13, 27, 42, 0.18),
inset 0 0 0 1px rgba(192, 154, 82, 0.08);
padding: 2rem;
overflow: hidden;
transition:
box-shadow 0.22s var(--tp-ease),
border-color 0.22s var(--tp-ease),
transform 0.22s var(--tp-ease);
margin-bottom: 40px;
}
/* Radial gold glow — top-right decorative blob */
.topic-card::before {
content: "";
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(192, 154, 82, 0.18) 0%,
transparent 70%
);
pointer-events: none;
opacity: 1;
}
.topic-card:hover {
box-shadow:
0 12px 48px rgba(13, 27, 42, 0.4),
inset 0 0 0 1px rgba(192, 154, 82, 0.18);
border-color: rgba(192, 154, 82, 0.5);
}
.topic-card:hover::before {
opacity: 1;
}
[data-bs-theme="dark"] .topic-card {
background: linear-gradient(130deg, #080f1a 0%, #0f1e35 55%, #162843 100%);
border-color: rgba(192, 154, 82, 0.25);
}
/* "Focus Area" eyebrow badge — top-right corner */
.topic-card__badge {
position: absolute;
top: 0;
right: 0;
padding: 4px 12px;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(192, 154, 82, 0.8);
background: rgba(192, 154, 82, 0.1);
border-radius: 0 14px 0 8px;
border-left: 1px solid rgba(192, 154, 82, 0.2);
border-bottom: 1px solid rgba(192, 154, 82, 0.2);
z-index: 1;
}
/* Full-card click target (invisible overlay) */
.topic-card__link {
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
}
.topic-card__icon-wrap {
width: 52px;
height: 52px;
border-radius: 14px;
background: rgba(192, 154, 82, 0.12);
border: 1px solid rgba(192, 154, 82, 0.28);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
flex-shrink: 0;
transition:
background 0.22s var(--tp-ease),
transform 0.22s var(--tp-ease);
}
.topic-card:hover .topic-card__icon-wrap {
background: rgba(192, 154, 82, 0.22);
transform: scale(1.06);
}
.topic-card__icon {
font-size: 26px;
color: #c09a52;
font-variation-settings:
"wght" 300,
"FILL" 0,
"GRAD" 0,
"opsz" 24;
transition: font-variation-settings 0.18s ease;
}
.topic-card:hover .topic-card__icon {
font-variation-settings:
"wght" 400,
"FILL" 1,
"GRAD" 0,
"opsz" 24;
}
.topic-card__body {
flex-grow: 1;
}
.topic-card__name {
font-size: clamp(1.1rem, 1.4vw + 0.2rem, 1.375rem);
font-weight: 700;
letter-spacing: -0.02em;
color: #ffffff;
margin-bottom: 0.625rem;
line-height: 1.25;
}
.topic-card__name a {
color: inherit;
text-decoration: none;
position: relative;
z-index: 1;
transition: color 0.18s ease;
}
.topic-card:hover .topic-card__name a {
color: #c09a52;
}
.topic-card__lead {
font-size: 0.9rem;
color: rgba(228, 234, 240, 0.65);
line-height: 1.65;
margin-bottom: 0;
}
/* Footer row */
.topic-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid rgba(192, 154, 82, 0.18);
}
[data-bs-theme="dark"] .topic-card__footer {
border-color: rgba(192, 154, 82, 0.12);
}
.topic-card__count {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.8125rem;
font-weight: 500;
color: rgba(228, 234, 240, 0.5);
}
.topic-card__count .material-symbols-sharp {
font-size: 16px;
font-variation-settings:
"wght" 300,
"FILL" 0,
"GRAD" 0,
"opsz" 24;
}
/* CTA — solid gold button matching sponsor-house__btn */
.topic-card__cta {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 6px 16px;
border-radius: 8px;
background: #c09a52;
color: #0d1b2a;
font-size: 0.8125rem;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
position: relative;
z-index: 1;
box-shadow: 0 2px 10px rgba(192, 154, 82, 0.3);
transition:
background 0.18s ease,
gap 0.18s var(--tp-ease),
box-shadow 0.18s ease,
transform 0.18s ease;
}
.topic-card__cta .material-symbols-sharp {
font-size: 16px;
}
.topic-card:hover .topic-card__cta {
gap: 0.5rem;
background: color-mix(in srgb, #c09a52 88%, #fff 12%);
box-shadow: 0 4px 16px rgba(192, 154, 82, 0.45);
}
/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
.topics-hero__grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.topics-hero__index {
/* show index below text on tablet/mobile */
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.5rem;
}
.topics-hero__word-1,
.topics-hero__word-2 {
font-size: clamp(1.25rem, 3vw, 2.25rem);
}
}
@media (max-width: 900px) {
.topics-grid {
grid-template-columns: 1fr 1fr;
}
.topics-stats__grid {
gap: 1.5rem 3rem;
}
}
@media (max-width: 600px) {
.topics-grid {
grid-template-columns: 1fr;
}
.topics-stats__grid {
gap: 1rem 2rem;
}
.topics-hero__index {
grid-template-columns: 1fr;
}
.topics-hero::after {
display: none;
} /* hide ghost "7" on very small screens */
}
/*=============================
Event — Paid ticket purchase section
===============================*/
/* Inline price display in the event info panel */
.event-ticket-price-display {
display: flex;
align-items: baseline;
gap: 0.375rem;
font-size: 1.25rem;
font-weight: 700;
color: var(--tg-heading-font-color, #0d1b2a);
margin-top: 0.25rem;
}
[data-bs-theme="dark"] .event-ticket-price-display {
color: #e4eaf0;
}
.event-ticket-vat {
font-size: 0.75rem;
font-weight: 400;
color: var(--tg-icon-color, #6b788a);
}
/* ── Ticket purchase card ─────────────────────────────────────────────── */
.event-ticket-section {
margin-block: 2.5rem;
border: 2px solid var(--tg-primary-color, #c09a52);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(192, 154, 82, 0.12);
}
.event-ticket-section__inner {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
}
/* Left: information */
.event-ticket-section__info {
padding: 2rem;
background: linear-gradient(
135deg,
var(--tg-secondary-color, #0d1b2a) 0%,
#162843 100%
);
}
.event-ticket-section__eyebrow {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--tg-primary-color, #c09a52);
margin-bottom: 0.875rem;
}
.event-ticket-section__eyebrow .material-symbols-sharp {
font-size: 16px;
}
.event-ticket-section__title {
font-size: 1.25rem;
font-weight: 700;
color: #fff;
margin-bottom: 0.875rem;
line-height: 1.25;
}
.event-ticket-section__price {
display: flex;
align-items: baseline;
gap: 0.375rem;
margin-bottom: 1.5rem;
}
.event-ticket-section__currency {
font-size: 0.9375rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
}
.event-ticket-section__amount {
font-size: 2.25rem;
font-weight: 800;
letter-spacing: -0.04em;
color: var(--tg-primary-color, #c09a52);
line-height: 1;
}
.event-ticket-section__vat {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.4);
}
/* Includes checklist */
.event-ticket-section__includes {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.event-ticket-section__includes li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.72);
line-height: 1.4;
}
.event-ticket-section__includes .material-symbols-sharp {
font-size: 16px;
flex-shrink: 0;
color: var(--tg-primary-color, #c09a52);
font-variation-settings: "FILL" 1;
}
.event-ticket-section__includes li:last-child .material-symbols-sharp {
color: rgba(255, 255, 255, 0.45);
}
/* Right: Commerce add-to-cart form */
.event-ticket-section__cart {
padding: 2rem;
background: var(--tg-white, #fff);
display: flex;
flex-direction: column;
justify-content: center;
}
[data-bs-theme="dark"] .event-ticket-section__cart {
background: rgba(255, 255, 255, 0.04);
}
/* Style the Commerce add-to-cart button */
.event-ticket-section__cart .btn-primary,
.event-ticket-section__cart input[type="submit"],
.event-ticket-section__cart button[type="submit"] {
background: var(--tg-primary-color, #c09a52) !important;
border-color: var(--tg-primary-color, #c09a52) !important;
font-size: 1rem !important;
font-weight: 700 !important;
padding: 0.875rem 1.75rem !important;
border-radius: 8px !important;
width: 100% !important;
transition:
background 0.2s ease,
box-shadow 0.2s ease !important;
}
.event-ticket-section__cart .btn-primary:hover,
.event-ticket-section__cart button[type="submit"]:hover {
background: color-mix(
in srgb,
var(--tg-primary-color, #c09a52) 80%,
#000 20%
) !important;
box-shadow: 0 4px 16px rgba(192, 154, 82, 0.35) !important;
}
/* Product title — hide (already in the event title) */
.event-ticket-section__cart .field--name-title {
display: none;
}
/* ── Responsive ── */
@media (max-width: 700px) {
.event-ticket-section__inner {
grid-template-columns: 1fr;
}
}
/*=============================
Product page — variation "Features" checklist
(brand-kit styled list of what's included in the selected package,
replacing the raw/unstyled field_features dump)
===============================*/
.product-features {
padding: 1rem 1.125rem;
background: rgba(13, 27, 42, 0.03);
border: 1px solid rgba(13, 27, 42, 0.08);
border-radius: 10px;
}
[data-bs-theme="dark"] .product-features {
background: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.08);
}
.product-features__heading {
margin: 0 0 0.625rem;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--tg-secondary-color, #0d1b2a);
}
[data-bs-theme="dark"] .product-features__heading {
color: #e4eaf0;
}
.product-features__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.product-features__list li {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--tg-secondary-color, #0d1b2a);
}
[data-bs-theme="dark"] .product-features__list li {
color: #cbd5e1;
}
.product-features__list li .material-symbols-sharp {
font-size: 1.15rem;
color: var(--tg-primary-color, #c09a52);
font-variation-settings: "FILL" 1;
flex-shrink: 0;
margin-top: 0.0625rem;
}
/*=============================
Add-to-cart — locked choice confirmation
(shown instead of the "Select Package" dropdown when the customer
arrived via a pricing-card link that already named the variation)
===============================*/
.zaira-locked-choice {
margin-bottom: 1rem;
padding: 0.875rem 1rem;
background: rgba(192, 154, 82, 0.08);
border: 1px solid rgba(192, 154, 82, 0.25);
border-radius: 8px;
}
.zaira-locked-choice__row {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 1rem;
font-weight: 700;
color: var(--tg-secondary-color, #0d1b2a);
}
.zaira-locked-choice__icon {
font-size: 18px;
color: var(--tg-primary-color, #c09a52);
font-variation-settings: "FILL" 1;
flex-shrink: 0;
}
.zaira-locked-choice__label {
font-weight: 500;
color: var(--tg-icon-color, #6b788a);
}
.zaira-locked-choice__value {
color: inherit;
}
[data-bs-theme="dark"] .zaira-locked-choice {
background: rgba(192, 154, 82, 0.1);
border-color: rgba(192, 154, 82, 0.3);
}
[data-bs-theme="dark"] .zaira-locked-choice__row {
color: #e4eaf0;
}
[data-bs-theme="dark"] .zaira-locked-choice__label {
color: #9aa7b5;
}
/*=============================
Publisher Marketplace — checkout completion CTA
===============================*/
.checkout-complete__contribute {
margin-top: 2rem;
border-top: 2px solid var(--tg-primary-color, #c09a52);
padding-top: 1.75rem;
}
.checkout-complete__contribute-inner {
display: flex;
gap: 1.25rem;
align-items: flex-start;
background: var(--tg-white, #fff);
border: 1px solid var(--tg-border-color, #e2ddd7);
border-radius: 10px;
padding: 1.75rem;
box-shadow: 0 2px 12px rgba(13, 27, 42, 0.06);
}
.checkout-complete__contribute-icon {
flex-shrink: 0;
width: 48px;
height: 48px;
background: var(--tg-primary-color, #c09a52);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.checkout-complete__contribute-icon .material-symbols-sharp {
font-size: 24px;
}
.checkout-complete__contribute-body h3 {
font-size: 1.1rem;
font-weight: 700;
color: var(--tg-heading-font-color, #0d1b2a);
margin-bottom: 0.5rem;
}
.checkout-complete__contribute-body p {
font-size: 0.9375rem;
color: var(--tg-body-font-color, #3d4a56);
line-height: 1.65;
margin-bottom: 1.25rem;
}
.checkout-complete__contribute-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--tg-primary-color, #c09a52);
color: #fff;
font-size: 0.9rem;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 6px;
text-decoration: none;
transition:
background 0.2s ease,
box-shadow 0.2s ease;
}
.checkout-complete__contribute-btn:hover {
background: color-mix(
in srgb,
var(--tg-primary-color, #c09a52) 82%,
#000 18%
);
box-shadow: 0 4px 14px rgba(192, 154, 82, 0.35);
color: #fff;
}
[data-bs-theme="dark"] .checkout-complete__contribute-inner {
background: var(--tg-secondary-color, #0d1b2a);
border-color: rgba(255, 255, 255, 0.1);
}
[data-bs-theme="dark"] .checkout-complete__contribute-body h3 {
color: #e4eaf0;
}
[data-bs-theme="dark"] .checkout-complete__contribute-body p {
color: rgba(255, 255, 255, 0.65);
}
/*=============================
58. Page loader
===============================*/
body.is-loading {
overflow: hidden;
}
#page-loader {
position: fixed;
inset: 0;
z-index: 998;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-color);
opacity: 1;
transition:
opacity 0.3s ease,
visibility 0s linear 0.3s;
}
[data-bs-theme="dark"] #page-loader {
background: var(--tg-black);
}
body:not(.is-loading) #page-loader {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.page-loader__ring {
position: relative;
width: clamp(120px, 28vw, 180px);
height: clamp(120px, 28vw, 180px);
display: flex;
align-items: center;
justify-content: center;
}
.page-loader__svg {
width: 100%;
height: 100%;
transform: rotate(-90deg);
filter: drop-shadow(0 0 12px color-mix(in srgb, var(--thin-progress-color, #C09A52) 45%, transparent));
}
.page-loader__track {
fill: none;
stroke: rgba(13, 27, 42, 0.08);
stroke-width: 6;
}
[data-bs-theme="dark"] .page-loader__track {
stroke: rgba(255, 255, 255, 0.08);
}
.page-loader__bar {
fill: none;
stroke: var(--thin-progress-color, #C09A52);
stroke-width: 6;
stroke-linecap: round;
stroke-dasharray: 339.292;
stroke-dashoffset: 339.292;
transition: stroke-dashoffset 0.2s ease;
}
.page-loader__percent {
position: absolute;
font-size: clamp(1.5rem, 5vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.02em;
color: var(--thin-progress-color, #C09A52);
}
@media (prefers-reduced-motion: reduce) {
.page-loader__svg {
filter: none;
}
.page-loader__bar {
transition: none;
}
}
/*=============================
59. Utility classes (margin, padding, color)
===============================*/
/*-- Margin Top --*/
.mt-5 { margin-top: 5px; }
.mt-10 { margin-top: 10px; }
.mt-15 { margin-top: 15px; }
.mt-20 { margin-top: 20px; }
.mt-25 { margin-top: 25px; }
.mt-30 { margin-top: 30px; }
.mt-35 { margin-top: 35px; }
.mt-40 { margin-top: 40px; }
.mt-45 { margin-top: 45px; }
.mt-50 { margin-top: 50px; }
.mt-55 { margin-top: 55px; }
.mt-60 { margin-top: 60px; }
.mt-65 { margin-top: 65px; }
.mt-70 { margin-top: 70px; }
.mt-75 { margin-top: 75px; }
.mt-80 { margin-top: 80px; }
.mt-85 { margin-top: 85px; }
.mt-90 { margin-top: 90px; }
.mt-95 { margin-top: 95px; }
.mt-100 { margin-top: 100px; }
.mt-105 { margin-top: 105px; }
.mt-110 { margin-top: 110px; }
.mt-115 { margin-top: 115px; }
.mt-120 { margin-top: 120px; }
.mt-125 { margin-top: 125px; }
.mt-130 { margin-top: 130px; }
.mt-135 { margin-top: 135px; }
.mt-140 { margin-top: 140px; }
.mt-145 { margin-top: 145px; }
.mt-150 { margin-top: 150px; }
.mt-155 { margin-top: 155px; }
.mt-160 { margin-top: 160px; }
.mt-165 { margin-top: 165px; }
.mt-170 { margin-top: 170px; }
.mt-175 { margin-top: 175px; }
.mt-180 { margin-top: 180px; }
.mt-185 { margin-top: 185px; }
.mt-190 { margin-top: 190px; }
.mt-195 { margin-top: 195px; }
.mt-200 { margin-top: 200px; }
/*-- Margin Bottom --*/
.mb-5 { margin-bottom: 5px; }
.mb-10 { margin-bottom: 10px; }
.mb-15 { margin-bottom: 15px; }
.mb-20 { margin-bottom: 20px; }
.mb-25 { margin-bottom: 25px; }
.mb-30 { margin-bottom: 30px; }
.mb-35 { margin-bottom: 35px; }
.mb-40 { margin-bottom: 40px; }
.mb-45 { margin-bottom: 45px; }
.mb-50 { margin-bottom: 50px; }
.mb-55 { margin-bottom: 55px; }
.mb-60 { margin-bottom: 60px; }
.mb-65 { margin-bottom: 65px; }
.mb-70 { margin-bottom: 70px; }
.mb-75 { margin-bottom: 75px; }
.mb-80 { margin-bottom: 80px; }
.mb-85 { margin-bottom: 85px; }
.mb-90 { margin-bottom: 90px; }
.mb-95 { margin-bottom: 95px; }
.mb-100 { margin-bottom: 100px; }
.mb-105 { margin-bottom: 105px; }
.mb-110 { margin-bottom: 110px; }
.mb-115 { margin-bottom: 115px; }
.mb-120 { margin-bottom: 120px; }
.mb-125 { margin-bottom: 125px; }
.mb-130 { margin-bottom: 130px; }
.mb-135 { margin-bottom: 135px; }
.mb-140 { margin-bottom: 140px; }
.mb-145 { margin-bottom: 145px; }
.mb-150 { margin-bottom: 150px; }
.mb-155 { margin-bottom: 155px; }
.mb-160 { margin-bottom: 160px; }
.mb-165 { margin-bottom: 165px; }
.mb-170 { margin-bottom: 170px; }
.mb-175 { margin-bottom: 175px; }
.mb-180 { margin-bottom: 180px; }
.mb-185 { margin-bottom: 185px; }
.mb-190 { margin-bottom: 190px; }
.mb-195 { margin-bottom: 195px; }
.mb-200 { margin-bottom: 200px; }
/*-- Padding Top --*/
.pt-5 { padding-top: 5px; }
.pt-10 { padding-top: 10px; }
.pt-15 { padding-top: 15px; }
.pt-20 { padding-top: 20px; }
.pt-25 { padding-top: 25px; }
.pt-30 { padding-top: 30px; }
.pt-35 { padding-top: 35px; }
.pt-40 { padding-top: 40px; }
.pt-45 { padding-top: 45px; }
.pt-50 { padding-top: 50px; }
.pt-55 { padding-top: 55px; }
.pt-60 { padding-top: 60px; }
.pt-65 { padding-top: 65px; }
.pt-70 { padding-top: 70px; }
.pt-75 { padding-top: 75px; }
.pt-80 { padding-top: 80px; }
.pt-85 { padding-top: 85px; }
.pt-90 { padding-top: 90px; }
.pt-95 { padding-top: 95px; }
.pt-100 { padding-top: 100px; }
.pt-105 { padding-top: 105px; }
.pt-110 { padding-top: 110px; }
.pt-115 { padding-top: 115px; }
.pt-120 { padding-top: 120px; }
.pt-125 { padding-top: 125px; }
.pt-130 { padding-top: 130px; }
.pt-135 { padding-top: 135px; }
.pt-140 { padding-top: 140px; }
.pt-145 { padding-top: 145px; }
.pt-150 { padding-top: 150px; }
.pt-155 { padding-top: 155px; }
.pt-160 { padding-top: 160px; }
.pt-165 { padding-top: 165px; }
.pt-170 { padding-top: 170px; }
.pt-175 { padding-top: 175px; }
.pt-180 { padding-top: 180px; }
.pt-185 { padding-top: 185px; }
.pt-190 { padding-top: 190px; }
.pt-195 { padding-top: 195px; }
.pt-200 { padding-top: 200px; }
/*-- Padding Bottom --*/
.pb-5 { padding-bottom: 5px; }
.pb-10 { padding-bottom: 10px; }
.pb-15 { padding-bottom: 15px; }
.pb-20 { padding-bottom: 20px; }
.pb-25 { padding-bottom: 25px; }
.pb-30 { padding-bottom: 30px; }
.pb-35 { padding-bottom: 35px; }
.pb-40 { padding-bottom: 40px; }
.pb-45 { padding-bottom: 45px; }
.pb-50 { padding-bottom: 50px; }
.pb-55 { padding-bottom: 55px; }
.pb-60 { padding-bottom: 60px; }
.pb-65 { padding-bottom: 65px; }
.pb-70 { padding-bottom: 70px; }
.pb-75 { padding-bottom: 75px; }
.pb-80 { padding-bottom: 80px; }
.pb-85 { padding-bottom: 85px; }
.pb-90 { padding-bottom: 90px; }
.pb-95 { padding-bottom: 95px; }
.pb-100 { padding-bottom: 100px; }
.pb-105 { padding-bottom: 105px; }
.pb-110 { padding-bottom: 110px; }
.pb-115 { padding-bottom: 115px; }
.pb-120 { padding-bottom: 120px; }
.pb-125 { padding-bottom: 125px; }
.pb-130 { padding-bottom: 130px; }
.pb-135 { padding-bottom: 135px; }
.pb-140 { padding-bottom: 140px; }
.pb-145 { padding-bottom: 145px; }
.pb-150 { padding-bottom: 150px; }
.pb-155 { padding-bottom: 155px; }
.pb-160 { padding-bottom: 160px; }
.pb-165 { padding-bottom: 165px; }
.pb-170 { padding-bottom: 170px; }
.pb-175 { padding-bottom: 175px; }
.pb-180 { padding-bottom: 180px; }
.pb-185 { padding-bottom: 185px; }
.pb-190 { padding-bottom: 190px; }
.pb-195 { padding-bottom: 195px; }
.pb-200 { padding-bottom: 200px; }
/*-- Padding Left --*/
.pl-0 { padding-left: 0px; }
.pl-5 { padding-left: 5px; }
.pl-10 { padding-left: 10px; }
.pl-15 { padding-left: 15px; }
.pl-20 { padding-left: 20px; }
.pl-25 { padding-left: 35px; }
.pl-30 { padding-left: 30px; }
.pl-35 { padding-left: 35px; }
.pl-40 { padding-left: 40px; }
.pl-45 { padding-left: 45px; }
.pl-50 { padding-left: 50px; }
.pl-55 { padding-left: 55px; }
.pl-60 { padding-left: 60px; }
.pl-65 { padding-left: 65px; }
.pl-70 { padding-left: 70px; }
.pl-75 { padding-left: 75px; }
.pl-80 { padding-left: 80px; }
.pl-85 { padding-left: 80px; }
.pl-90 { padding-left: 90px; }
.pl-95 { padding-left: 95px; }
.pl-100 { padding-left: 100px; }
/*-- Padding Right --*/
.pr-0 { padding-right: 0px; }
.pr-5 { padding-right: 5px; }
.pr-10 { padding-right: 10px; }
.pr-15 { padding-right: 15px; }
.pr-20 { padding-right: 20px; }
.pr-25 { padding-right: 35px; }
.pr-30 { padding-right: 30px; }
.pr-35 { padding-right: 35px; }
.pr-40 { padding-right: 40px; }
.pr-45 { padding-right: 45px; }
.pr-50 { padding-right: 50px; }
.pr-55 { padding-right: 55px; }
.pr-60 { padding-right: 60px; }
.pr-65 { padding-right: 65px; }
.pr-70 { padding-right: 70px; }
.pr-75 { padding-right: 75px; }
.pr-80 { padding-right: 80px; }
.pr-85 { padding-right: 80px; }
.pr-90 { padding-right: 90px; }
.pr-95 { padding-right: 95px; }
.pr-100 { padding-right: 100px; }
/* font weight */
.f-700 { font-weight: 700; }
.f-600 { font-weight: 600; }
.f-500 { font-weight: 500; }
.f-400 { font-weight: 400; }
.f-300 { font-weight: 300; }
/* Background Color */
.gray-bg { background: #f7f7fd; }
.white-bg { background: #fff; }
.black-bg { background: #222; }
.theme-bg { background: #222; }
.primary-bg { background: #222; }
/* Color */
.white-color { color: #fff; }
.black-color { color: #222; }
.theme-color { color: #222; }
.primary-color { color: #222; }
/* black overlay */
[data-overlay] { position: relative; }
[data-overlay]::before { background: #000 none repeat scroll 0 0; content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; }
[data-overlay="3"]::before { opacity: 0.3; }
[data-overlay="4"]::before { opacity: 0.4; }
[data-overlay="5"]::before { opacity: 0.5; }
[data-overlay="6"]::before { opacity: 0.6; }
[data-overlay="7"]::before { opacity: 0.7; }
[data-overlay="8"]::before { opacity: 0.8; }
[data-overlay="9"]::before { opacity: 0.9; }