:root {
--mauritius-red: #EA2839;
--mauritius-blue: #1A206D;
--mauritius-yellow: #FFD500;
--mauritius-green: #00A551;
}
html {
scroll-behavior: smooth;
}
body {
background-color: #f3f4f6;
background-image:
radial-gradient(at 0% 0%, rgba(234, 40, 57, 0.15) 0px, transparent 50%),
radial-gradient(at 100% 0%, rgba(26, 32, 109, 0.15) 0px, transparent 50%),
radial-gradient(at 100% 100%, rgba(0, 165, 81, 0.15) 0px, transparent 50%),
radial-gradient(at 0% 100%, rgba(255, 213, 0, 0.15) 0px, transparent 50%);
background-attachment: fixed;
min-height: 100vh;
font-family: 'Inter', sans-serif;
color: #1f2937;
overflow-x: hidden;
} @keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
} .container {
overflow: visible;
} .mauritius-gradient {
background: linear-gradient(to right,
var(--mauritius-red) 0%,
var(--mauritius-blue) 33%,
var(--mauritius-yellow) 66%,
var(--mauritius-green) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
} .glass-card {
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.8);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.05),
0 2px 4px -1px rgba(0, 0, 0, 0.03),
inset 0 0 20px rgba(255, 255, 255, 0.5);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.glass-card:hover {
background: rgba(255, 255, 255, 0.85);
transform: translateY(-5px) scale(1.01);
box-shadow:
0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04),
inset 0 0 20px rgba(255, 255, 255, 0.8);
border-color: rgba(255, 255, 255, 1);
}
.glass-button {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}
.glass-button:hover,
.glass-button:focus {
background: rgba(255, 255, 255, 0.9);
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
border-color: var(--mauritius-blue);
}
.btn-primary {
background: linear-gradient(135deg, var(--mauritius-blue) 0%, #2a3494 100%);
color: white;
border: none;
box-shadow: 0 4px 15px rgba(26, 32, 109, 0.3);
transition: all 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(26, 32, 109, 0.4);
filter: brightness(110%);
} body .wp-block-table,
body figure.wp-block-table {
margin: 2rem 0;
overflow: visible !important;
}
body .wp-block-table table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
border-radius: 1rem;
overflow: visible !important;
border: 1px solid rgba(255, 255, 255, 0.6);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
body .wp-block-table td,
body .wp-block-table th {
border: none !important;
}
body .wp-block-table th {
background: var(--mauritius-blue);
color: white;
font-weight: 700;
text-align: left;
padding: 1rem 1.5rem !important;
border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important;
}
body .wp-block-table td {
padding: 1rem 1.5rem !important;
border-bottom: 1px solid rgba(255, 255, 255, 0.4) !important;
color: #4b5563;
}
body .wp-block-table tbody tr:nth-child(even) td {
background: rgba(26, 32, 109, 0.04);
}
body .wp-block-table tbody tr:nth-child(odd) td {
background: rgba(255, 255, 255, 0.6);
}
body .wp-block-table tr:last-child td {
border-bottom: none !important;
}
body .wp-block-table tr:hover td {
background: rgba(26, 32, 109, 0.08);
} .creole-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 1.5rem 0;
border-radius: 0.75rem;
border: 1px solid rgba(26, 32, 109, 0.1);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
position: relative;
background: white;
max-width: 100%;
} .creole-table-wrap { scrollbar-width: none; }
.creole-table-wrap::-webkit-scrollbar { display: none; }
.creole-table-wrap > table,
.creole-table-wrap > .wp-block-table table,
.creole-table-wrap table {
width: auto !important;
min-width: 100%;
overflow: visible !important;
margin: 0 !important;
border-radius: 0 !important;
border: none !important;
box-shadow: none !important;
}
.creole-table-wrap th,
.creole-table-wrap td {
min-width: 110px;
white-space: normal;
word-break: break-word;
}
.creole-table-wrap th:first-child,
.creole-table-wrap td:first-child {
min-width: 90px;
} .creole-scroll-bar {
display: none;
align-items: center;
justify-content: center;
gap: 0.4rem;
background: var(--mauritius-blue);
color: rgba(255, 255, 255, 0.9);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 0.45rem 1rem;
margin-top: -1px;
border-radius: 0 0 0.75rem 0.75rem;
border: 1px solid rgba(26, 32, 109, 0.15);
border-top: none;
user-select: none;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.creole-scroll-bar svg {
width: 14px;
height: 14px;
flex-shrink: 0;
opacity: 0.85;
}
.creole-scroll-bar.is-visible {
display: flex;
}
.creole-scroll-bar.is-fading {
opacity: 0;
transform: translateY(4px);
pointer-events: none;
}
@media (max-width: 768px) {
.creole-table-wrap th,
.creole-table-wrap td,
body .wp-block-table th,
body .wp-block-table td {
padding: 0.6rem 0.75rem !important;
font-size: 0.82rem;
} .prose .wp-block-table,
.prose figure.wp-block-table {
max-width: 100%;
margin-left: 0;
margin-right: 0;
}
} .category-btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-btn.active {
background: linear-gradient(135deg, var(--mauritius-blue) 0%, #2a3494 100%);
box-shadow: 0 4px 12px rgba(26, 32, 109, 0.25);
} ::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
}
::-webkit-scrollbar-thumb {
background: rgba(26, 32, 109, 0.2);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(26, 32, 109, 0.4);
} .prose > * + * {
margin-top: 1.5em;
}
.prose h2 {
font-size: 1.5em;
font-weight: 700;
color: var(--mauritius-blue);
margin-top: 2em;
margin-bottom: 1em;
}
.prose h3 {
font-size: 1.25em;
font-weight: 600;
color: var(--mauritius-blue);
margin-top: 1.5em;
margin-bottom: 0.75em;
}
.prose h4 {
font-size: 1.1em;
font-weight: 700;
color: var(--mauritius-blue);
margin-top: 1.35em;
margin-bottom: 0.65em;
line-height: 1.35;
}
.prose h5,
.prose h6 {
font-size: 1em;
font-weight: 700;
color: #111827;
margin-top: 1.25em;
margin-bottom: 0.6em;
line-height: 1.35;
}
.prose p {
line-height: 1.75;
margin-bottom: 1.25em;
}
.prose ul {
list-style-type: disc;
padding-left: 1.625em;
margin-bottom: 1.25em;
}
.prose ol {
list-style-type: decimal;
padding-left: 1.625em;
margin-bottom: 1.25em;
}
.prose li {
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.prose blockquote {
font-weight: 500;
font-style: italic;
color: #111827;
border-left-width: 0.25rem;
border-left-color: var(--mauritius-yellow);
quotes: "\201C" "\201D" "\2018" "\2019";
margin-top: 1.6em;
margin-bottom: 1.6em;
padding-left: 1em;
}
.prose strong {
font-weight: 700 !important;
color: inherit !important;
transform: none !important;
box-shadow: none !important;
border: none !important;
} article.prose a,
.prose a {
color: var(--mauritius-red) !important;
text-decoration: underline !important;
font-weight: 600 !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
word-wrap: break-word !important;
transition: color 0.2s;
}
article.prose a:hover,
.prose a:hover {
color: var(--mauritius-blue) !important;
} .wp-block-group {
margin-bottom: 2rem;
} #rank-math-toc {
background: rgba(255, 255, 255, 0.65) !important;
backdrop-filter: blur(16px) !important;
-webkit-backdrop-filter: blur(16px) !important;
border: 1px solid rgba(255, 255, 255, 0.8) !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
border-radius: 1.5rem !important;
padding: 1.5rem !important;
margin-bottom: 2rem !important;
position: relative !important;
overflow: hidden !important;
}
#rank-math-toc::before {
content: '' !important;
position: absolute !important;
top: -50px !important;
right: -50px !important;
width: 150px !important;
height: 150px !important;
background: radial-gradient(circle, rgba(234, 40, 57, 0.1) 0%, transparent 70%) !important;
z-index: 0 !important;
pointer-events: none !important;
}
#rank-math-toc h2 {
font-size: 1.25rem !important;
color: var(--mauritius-blue) !important;
margin: 0 0 1rem 0 !important;
padding-bottom: 0.5rem;
border-bottom: 2px solid rgba(234, 40, 57, 0.1);
font-weight: 800 !important;
letter-spacing: -0.02em;
position: relative !important;
z-index: 1 !important;
}
#rank-math-toc nav {
position: relative !important;
z-index: 1 !important;
}
#rank-math-toc nav ul {
margin: 0 !important;
padding-left: 0 !important;
list-style: none !important;
}
#rank-math-toc nav ul li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
#rank-math-toc nav > ul > li {
margin-top: 10px !important;
margin-bottom: 2px !important;
}
#rank-math-toc nav > ul > li:first-child {
margin-top: 0 !important;
}
#rank-math-toc nav ul li a {
text-decoration: none !important;
color: #334155 !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
display: flex;
align-items: center;
gap: 10px;
transition: background-color 0.2s ease, color 0.2s ease;
padding: 6px 8px !important;
border-radius: 6px;
line-height: 1.4;
background: transparent !important;
}
#rank-math-toc nav > ul > li > a::before {
content: '\25C8' !important;
color: var(--mauritius-red) !important;
font-size: 14px !important;
font-weight: bold !important;
font-family: Arial, sans-serif !important;
display: inline-block !important;
min-width: 14px;
opacity: 1 !important;
transform: none !important;
}
#rank-math-toc nav ul ul {
margin: 4px 0 8px 10px !important;
padding-left: 12px !important;
border-left: 2px solid rgba(26, 32, 109, 0.1) !important;
}
#rank-math-toc nav ul ul li a {
font-size: 0.85rem !important;
font-weight: 500 !important;
color: #64748b !important;
padding: 2px 8px !important;
line-height: 1.3 !important;
}
#rank-math-toc nav ul ul li a::before {
content: '\21AA' !important;
color: #94a3b8 !important;
font-size: 14px !important;
font-family: Arial, sans-serif !important;
font-weight: normal !important;
margin-top: 2px;
}
#rank-math-toc nav ul li a:hover {
background: rgba(26, 32, 109, 0.05) !important;
color: var(--mauritius-blue) !important;
transform: none !important;
box-shadow: none !important;
border: none !important;
}
#rank-math-toc nav ul ul li a:hover::before {
color: var(--mauritius-blue) !important;
} .sticky {
z-index: 40;
} .prose img {
border-radius: 1rem;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
border: 4px solid rgba(255, 255, 255, 0.8);
margin-top: 1em;
margin-bottom: 1em;
width: 100%;
height: auto;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
display: block;
}
.prose img:hover {
transform: scale(1.02);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.prose img.emoji,
.prose img.icon {
border: none;
box-shadow: none;
border-radius: 0;
display: inline-block;
width: auto;
margin: 0;
} ul.page-numbers {
display: flex;
justify-content: center;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
align-items: center;
}
.page-numbers {
display: flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
height: 2.5rem;
padding: 0 0.75rem;
border-radius: 9999px;
background: white;
border: 1px solid #e2e8f0;
color: #475569;
font-weight: 700;
font-size: 0.875rem;
text-decoration: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.page-numbers:hover,
.page-numbers:focus {
border-color: var(--mauritius-blue);
color: var(--mauritius-blue);
transform: translateY(-2px);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.page-numbers.current {
background: var(--mauritius-blue);
border-color: var(--mauritius-blue);
color: white;
box-shadow: 0 4px 6px -1px rgba(26, 32, 109, 0.3);
}
.page-numbers.prev,
.page-numbers.next {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
height: auto;
min-width: 0;
}
.page-numbers.prev:hover,
.page-numbers.next:hover {
transform: none;
background: transparent;
color: inherit;
} .no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none;
scrollbar-width: none;
} body.single-creole_blog article.prose a,
body.single-creole_blog .prose a {
color: #EA2839 !important;
text-decoration: underline !important;
font-weight: 600 !important;
overflow-wrap: break-word !important;
word-break: break-word !important;
word-wrap: break-word !important;
}
body.single-creole_blog article.prose a:hover,
body.single-creole_blog .prose a:hover {
color: #1A206D !important;
}
body.single-creole_blog article.prose strong,
body.single-creole_blog .prose strong {
transform: none !important;
box-shadow: none !important;
border: none !important;
font-weight: 700 !important;
color: inherit !important;
} body.single-creole_blog .prose .wp-block-image,
body.single-creole_blog .prose figure {
margin-top: 0.75rem !important;
margin-bottom: 0.5rem !important;
}
body.single-creole_blog .prose figure figcaption,
body.single-creole_blog .prose figcaption.wp-element-caption,
body.single-creole_blog .prose .wp-caption .wp-caption-text {
margin-top: 0.08rem !important;
margin-bottom: 0 !important;
line-height: 1.3;
}
body.single-creole_blog .comment-form input[type="text"],
body.single-creole_blog .comment-form input[type="email"],
body.single-creole_blog .comment-form input[type="url"],
body.single-creole_blog .comment-form textarea {
width: 100%;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
border: 1px solid rgba(26, 32, 109, 0.2);
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(4px);
margin-bottom: 1rem;
transition: all 0.3s ease;
outline: none;
}
body.single-creole_blog .comment-form input:focus,
body.single-creole_blog .comment-form textarea:focus {
border-color: #1A206D;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 0 0 3px rgba(26, 32, 109, 0.1);
}
body.single-creole_blog .comment-form .submit {
background: linear-gradient(135deg, #1A206D 0%, #2a3494 100%);
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 9999px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(26, 32, 109, 0.3);
}
body.single-creole_blog .comment-form .submit:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(26, 32, 109, 0.4);
filter: brightness(110%);
}
body.single-creole_blog .comment-notes,
body.single-creole_blog .logged-in-as {
color: #6b7280;
font-size: 0.875rem;
margin-bottom: 1rem;
}
body.single-creole_blog #comments {
margin-bottom: 2rem;
}
body.single-creole_blog .comments-title,
body.single-creole_blog .comment-reply-title {
font-size: 1.5rem !important;
font-weight: 800 !important;
color: #1A206D !important;
margin-bottom: 1.5rem !important;
display: flex;
align-items: center;
gap: 0.5rem;
border-bottom: 2px solid rgba(26, 32, 109, 0.1);
padding-bottom: 0.5rem;
}
body.single-creole_blog .comment-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
body.single-creole_blog .comment-list .comment {
margin-bottom: 1.5rem;
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(255, 255, 255, 0.6);
padding: 1.5rem;
border-radius: 1.5rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
body.single-creole_blog .comment-list .children {
list-style: none !important;
padding-left: 2rem !important;
margin-top: 1.5rem !important;
border-left: 2px dashed rgba(26, 32, 109, 0.15);
}
body.single-creole_blog .comment-author img {
border-radius: 50% !important;
margin-right: 1rem;
float: left;
border: 2px solid white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
body.single-creole_blog .comment-author .fn {
font-weight: 800;
color: #1A206D;
font-size: 1.1rem;
font-style: normal;
}
body.single-creole_blog .comment-author .fn a {
color: #1A206D !important;
text-decoration: none !important;
}
body.single-creole_blog .comment-metadata {
font-size: 0.75rem;
margin-bottom: 1rem;
margin-left: 4.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 700;
}
body.single-creole_blog .comment-metadata a {
color: #94a3b8 !important;
text-decoration: none !important;
transition: color 0.3s ease;
}
body.single-creole_blog .comment-metadata a:hover {
color: #1A206D !important;
}
body.single-creole_blog .comment-content {
clear: both;
color: #475569;
line-height: 1.6;
margin-top: 1rem;
font-size: 0.95rem;
font-weight: 500;
}
body.single-creole_blog .comment-content p {
margin-bottom: 0.5rem;
}
body.single-creole_blog .reply {
margin-top: 1rem;
}
body.single-creole_blog .reply a {
display: inline-flex !important;
align-items: center;
gap: 0.25rem;
background: rgba(26, 32, 109, 0.05) !important;
color: #1A206D !important;
padding: 0.35rem 1rem !important;
border-radius: 9999px !important;
font-weight: 700 !important;
font-size: 0.75rem !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
}
body.single-creole_blog .reply a:hover {
background: #1A206D !important;
color: #ffffff !important;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(26, 32, 109, 0.2) !important;
}
body.single-creole_blog #cancel-comment-reply-link {
color: #EA2839 !important;
font-size: 0.75rem !important;
font-weight: 700 !important;
margin-left: 1rem !important;
text-decoration: none !important;
text-transform: uppercase;
letter-spacing: 0.05em;
background: rgba(234, 40, 57, 0.1);
padding: 0.25rem 0.75rem;
border-radius: 9999px;
transition: all 0.3s ease;
}
body.single-creole_blog #cancel-comment-reply-link:hover {
background: #EA2839 !important;
color: white !important;
} .creole-article-reactions {
margin-top: 3rem;
padding: 1.25rem;
border: 1px solid rgba(255, 255, 255, 0.85);
border-radius: 1.5rem;
background:
linear-gradient(135deg, rgba(26, 32, 109, 0.06), rgba(234, 40, 57, 0.05)),
rgba(255, 255, 255, 0.76);
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
}
.creole-reactions-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1rem;
}
.creole-reactions-eyebrow {
display: inline-flex;
margin-bottom: 0.35rem;
color: #EA2839;
font-size: 0.68rem;
font-weight: 900;
letter-spacing: 0.16em;
line-height: 1;
text-transform: uppercase;
}
.creole-reactions-header h2 {
margin: 0 !important;
color: #1A206D !important;
font-size: clamp(1.25rem, 2.2vw, 1.75rem) !important;
font-weight: 900 !important;
letter-spacing: 0 !important;
line-height: 1.1 !important;
}
.creole-reactions-total {
display: inline-flex;
flex-shrink: 0;
align-items: center;
justify-content: center;
min-height: 2rem;
padding: 0.4rem 0.8rem;
border: 1px solid rgba(26, 32, 109, 0.12);
border-radius: 9999px;
background: rgba(255, 255, 255, 0.78);
color: #475569;
font-size: 0.78rem;
font-weight: 800;
}
.creole-reactions-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.7rem;
}
.creole-reaction-button {
appearance: none;
display: flex;
min-width: 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.35rem;
min-height: 6rem;
padding: 0.85rem 0.55rem;
border: 1px solid rgba(148, 163, 184, 0.28);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.78);
color: #1e293b;
cursor: pointer;
font: inherit;
text-align: center;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.creole-reaction-button:hover,
.creole-reaction-button:focus-visible {
transform: translateY(-2px);
border-color: var(--reaction-color);
background: #ffffff;
box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
outline: none;
}
.creole-reaction-button.is-selected {
border-color: var(--reaction-color);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.78));
box-shadow: 0 0 0 3px rgba(26, 32, 109, 0.12), 0 16px 30px rgba(15, 23, 42, 0.1);
}
.creole-reaction-button.is-loading {
opacity: 0.7;
cursor: wait;
}
.creole-reaction-emoji {
display: block;
font-size: 1.65rem;
line-height: 1;
}
.creole-reaction-label {
display: block;
max-width: 100%;
color: #0f172a;
font-size: 0.78rem;
font-weight: 900;
line-height: 1.1;
}
.creole-reaction-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.6rem;
min-height: 1.35rem;
padding: 0.18rem 0.45rem;
border-radius: 9999px;
background: rgba(15, 23, 42, 0.06);
color: #64748b;
font-size: 0.72rem;
font-weight: 900;
line-height: 1;
}
.creole-reaction-button.is-selected .creole-reaction-count {
background: var(--reaction-color);
color: #ffffff;
}
.creole-reactions-message {
min-height: 1.25rem;
margin: 0.85rem 0 0 !important;
color: #64748b;
font-size: 0.82rem;
font-weight: 700;
line-height: 1.4;
}
@media (max-width: 768px) {
.creole-article-reactions {
margin-top: 2rem;
padding: 0.85rem;
border-radius: 1.25rem;
}
.creole-reactions-header {
flex-direction: column;
gap: 0.75rem;
}
.creole-reactions-grid {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.4rem;
}
.creole-reaction-button {
gap: 0.2rem;
min-height: 4.25rem;
padding: 0.55rem 0.25rem;
border-radius: 0.8rem;
}
.creole-reaction-emoji {
font-size: 1.25rem;
}
.creole-reaction-label {
font-size: 0.62rem;
}
.creole-reaction-count {
min-width: 1.25rem;
min-height: 1.05rem;
padding: 0.12rem 0.28rem;
font-size: 0.62rem;
}
} body.page-template-page-home > main:nth-of-type(1),
body.page-template-page-home-php > main:nth-of-type(1),
body.home > main:nth-of-type(1) {
display: none !important;
}
body.page-template-page-home nav,
body.page-template-page-home-php nav,
body.home nav {
z-index: 50 !important;
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes home-bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
}
.animate-fade-in-up {
animation: fade-in-up 0.8s ease-out;
}
.animate-on-scroll {
opacity: 0;
transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: opacity, transform;
}
.animate-fade-up {
transform: translateY(40px);
}
.animate-slide-left {
transform: translateX(-50px);
}
.animate-slide-right {
transform: translateX(50px);
}
.animate-scale-up {
transform: scale(0.95);
}
.animate-on-scroll.is-visible {
opacity: 1;
transform: translate(0, 0) scale(1);
}
.animate-stagger > * {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
will-change: opacity, transform;
}
.animate-stagger.is-visible > * {
opacity: 1;
transform: translateY(0);
}
.animate-stagger.is-visible > *:nth-child(1) { transition-delay: 100ms; }
.animate-stagger.is-visible > *:nth-child(2) { transition-delay: 200ms; }
.animate-stagger.is-visible > *:nth-child(3) { transition-delay: 300ms; }
.animate-stagger.is-visible > *:nth-child(4) { transition-delay: 400ms; }
.animate-stagger.is-visible > *:nth-child(5) { transition-delay: 500ms; }
.animate-stagger.is-visible > *:nth-child(6) { transition-delay: 600ms; }
.home-latest-grid.animate-fade-up {
transform: none;
}
.home-fill-image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.home-zoom-image {
transition: transform 0.7s ease;
}
a:hover .home-zoom-image {
transform: scale(1.1);
}
.home-gradient-text {
background: linear-gradient(to right, #EA2839 0%, #1A206D 33%, #FFD500 66%, #00A551 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.home-hero {
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100vh;
overflow: hidden;
background: #0f172a;
-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}
.home-hero-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.9;
}
.home-hero-side-gradient {
position: absolute;
inset: 0;
z-index: 10;
background: linear-gradient(to right, #ffffff 0%, rgba(255, 255, 255, 0.9) 48%, rgba(255, 255, 255, 0) 100%);
}
.home-hero-bottom-gradient {
position: absolute;
right: 0;
bottom: 0;
left: 0;
z-index: 20;
height: 3rem;
background: linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.4) 45%, rgba(255, 255, 255, 0) 100%);
}
.home-hero-inner {
position: relative;
z-index: 30;
display: flex;
align-items: center;
width: 100%;
max-width: 80rem;
height: 100%;
margin: 0 auto;
padding: 0 1rem;
}
.home-hero-copy {
max-width: 42rem;
text-align: left;
}
.home-hero-title {
position: relative;
margin: 0 0 1.5rem;
font-size: clamp(3.5rem, 8vw, 6rem);
font-weight: 900;
letter-spacing: 0;
line-height: 1.05;
}
.home-hero-subtitle {
max-width: 40rem;
margin: 0 0 2.5rem;
color: #334155;
font-size: clamp(1.125rem, 2vw, 1.5rem);
font-weight: 500;
line-height: 1.65;
filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5));
}
.home-hero-actions {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem;
}
.home-hero-button {
display: flex;
flex: 1 1 0;
align-items: center;
justify-content: center;
gap: 0.375rem;
min-height: 3rem;
padding: 0.875rem 0.5rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 800;
line-height: 1.1;
text-align: center;
text-decoration: none;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.home-hero-button:hover {
transform: translateY(-0.25rem);
}
.home-hero-button-primary {
background: #1A206D;
color: #ffffff;
box-shadow: 0 10px 20px -10px rgba(26, 32, 109, 0.5);
}
.home-hero-button-primary:hover {
background: #EA2839;
}
.home-hero-button-secondary {
border: 1px solid #cbd5e1;
background: #ffffff;
color: #1A206D;
}
.home-hero-button-secondary:hover {
border-color: #1A206D;
background: #f8fafc;
}
.home-hero-button-icon {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
transition: transform 0.2s ease;
}
.home-hero-button:hover .home-hero-button-icon {
transform: scale(1.1);
}
.home-scroll-button {
position: absolute;
right: 0;
bottom: 3rem;
left: 0;
z-index: 30;
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin: 0 auto;
padding: 0;
border: 0;
background: transparent;
color: #EA2839;
cursor: pointer;
filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.5));
animation: home-bounce 1s infinite;
transition: color 0.2s ease;
}
.home-scroll-button:hover {
color: #ffffff;
}
.home-icon-large {
width: 3rem;
height: 3rem;
}
.home-main {
position: relative;
z-index: 10;
margin-top: 100vh;
}
.home-container {
width: 100%;
max-width: 80rem;
margin: 0 auto;
padding: 3rem 1rem;
}
.home-section {
margin-bottom: 4rem;
}
.home-section-heading {
display: flex;
flex-direction: column;
margin-bottom: 3rem;
}
.home-section-eyebrow-wrap {
margin-bottom: 1rem;
}
.home-section-eyebrow {
color: #64748b;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.2em;
line-height: 1.2;
text-transform: uppercase;
}
.home-section-title {
margin: 0;
color: #0f172a;
font-size: clamp(2.25rem, 5vw, 3.75rem);
font-weight: 900;
letter-spacing: 0;
line-height: 1.1;
}
.home-path-grid {
display: flex;
gap: 1rem;
padding-bottom: 1.5rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.home-path-grid::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.home-path-card {
position: relative;
display: flex;
flex: 0 0 75vw;
flex-direction: column;
overflow: hidden;
scroll-snap-align: start;
scroll-snap-stop: always;
border: 1px solid #f1f5f9;
border-radius: 2rem;
background: #ffffff;
box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
color: inherit;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home-path-card:hover {
transform: translateY(-0.5rem);
box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.15);
}
.home-path-card-media {
position: relative;
height: 9rem;
overflow: hidden;
}
.home-path-card-media-fade {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
}
.home-path-card-body {
position: relative;
z-index: 10;
display: flex;
flex: 1 1 auto;
flex-direction: column;
margin-top: -2.5rem;
padding: 0 1.5rem 1.5rem;
}
.home-path-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-bottom: 1rem;
border-radius: 0.75rem;
background: #ffffff;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}
.home-path-card-icon img,
.home-path-card-icon svg {
width: 1.5rem;
height: 1.5rem;
object-fit: contain;
}
.home-path-card-label {
margin-bottom: 0.5rem;
color: #94a3b8;
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.home-path-card-title {
margin: 0 0 0.75rem;
color: #0f172a;
font-size: 1.25rem;
font-weight: 900;
letter-spacing: 0;
line-height: 1.15;
transition: color 0.2s ease;
}
.home-path-card-desc {
margin: 0 0 1.5rem;
color: #475569;
font-size: 0.8125rem;
line-height: 1.65;
}
.home-path-card-footer {
margin-top: auto;
}
.home-path-card-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
font-weight: 800;
transition: gap 0.2s ease;
}
.home-path-card-link svg {
width: 1rem;
height: 1rem;
}
.home-path-card-link:hover {
gap: 0.75rem;
}
.home-path-card--mauritius-red .home-path-card-icon,
.home-path-card--mauritius-red .home-path-card-link,
.home-path-card--mauritius-red:hover .home-path-card-title {
color: #EA2839;
}
.home-path-card--mauritius-yellow .home-path-card-icon,
.home-path-card--mauritius-yellow .home-path-card-link,
.home-path-card--mauritius-yellow:hover .home-path-card-title {
color: #b88a00;
}
.home-path-card--mauritius-green .home-path-card-icon,
.home-path-card--mauritius-green .home-path-card-link,
.home-path-card--mauritius-green:hover .home-path-card-title {
color: #00A551;
}
.home-explore-grid {
display: grid;
grid-template-columns: 1fr;
gap: 0.75rem;
margin-bottom: 4rem;
padding: 0 0.5rem;
}
.home-explore-card {
position: relative;
display: flex;
align-items: center;
height: 6.75rem;
min-height: 6.75rem;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.7);
border-radius: 1.25rem;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
color: #ffffff;
text-decoration: none;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home-explore-card:hover {
transform: translateY(-0.25rem);
box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
}
.home-explore-card-scrim,
.home-explore-card-gradient {
position: absolute;
inset: 0;
}
.home-explore-card-scrim {
background: rgba(2, 6, 23, 0.36);
backdrop-filter: none;
}
.home-explore-card-gradient {
background: linear-gradient(to right, rgba(2, 6, 23, 0.42), rgba(15, 23, 42, 0.24), rgba(2, 6, 23, 0.1));
}
.home-explore-card-content {
position: relative;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
width: 100%;
height: 100%;
padding: 1rem;
}
.home-explore-card-thumb {
position: relative;
flex: 0 0 auto;
width: 4rem;
height: 4rem;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 9999px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
}
.home-explore-card-text {
flex: 0 1 auto;
min-width: 0;
}
.home-explore-accent {
width: 2.25rem;
height: 0.375rem;
margin-bottom: 0.5rem;
border-radius: 9999px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}
.home-explore-accent--red { background: #EA2839; }
.home-explore-accent--blue { background: #1A206D; }
.home-explore-accent--yellow { background: #FFD500; }
.home-explore-accent--green { background: #00A551; }
.home-explore-card h3 {
overflow: hidden;
margin: 0;
color: #ffffff;
font-size: 1.25rem;
font-weight: 900;
letter-spacing: 0;
line-height: 1.1;
text-overflow: ellipsis;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
white-space: nowrap;
}
.home-explore-card p {
margin: 0.25rem 0 0;
color: rgba(255, 255, 255, 0.8);
font-size: 0.875rem;
font-weight: 800;
line-height: 1.1;
}
.home-explore-card-arrow {
flex: 0 0 auto;
width: 1.25rem;
height: 1.25rem;
color: rgba(255, 255, 255, 0.7);
transition: transform 0.2s ease;
}
.home-explore-card:hover .home-explore-card-arrow {
transform: translateX(0.25rem);
}
.home-empty-state {
grid-column: 1 / -1;
padding: 3rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.5);
color: #64748b;
text-align: center;
}
.hidden {
display: none !important;
}
.creole-no-x {
overflow-x: hidden;
}
.site-gradient-text {
background: linear-gradient(to right, #EA2839, #1A206D, #ca8a04);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.site-header-nav {
position: fixed;
top: 0;
left: 0;
z-index: 50;
box-sizing: border-box;
width: 100%;
padding: 1rem;
}
.site-header-shell {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 80rem;
margin: 0 auto;
padding: 0.75rem 1.5rem;
border-radius: 1rem;
}
.site-header-gradient-line {
position: absolute;
right: 0.5rem;
bottom: 0;
left: 0.5rem;
height: 3px;
border-radius: 9999px;
background: linear-gradient(to right, transparent, #EA2839, #1A206D, #FFD500, #00A551, transparent);
opacity: 0.9;
}
.site-brand {
display: flex;
align-items: center;
gap: 0.75rem;
padding-left: 0.5rem;
color: inherit;
text-decoration: none;
}
.site-brand-logo {
position: relative;
flex: 0 0 auto;
width: 3rem;
height: 3rem;
transition: transform 0.3s ease;
}
.site-brand:hover .site-brand-logo {
transform: scale(1.1);
}
.site-brand-logo-img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.12));
}
.site-brand-text {
color: #1A206D;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: 0;
line-height: 1;
transition: opacity 0.2s ease;
}
.site-brand:hover .site-brand-text {
opacity: 0.8;
}
.site-desktop-nav {
display: none;
}
.site-desktop-menu {
display: flex;
align-items: center;
gap: 2rem;
}
.site-nav-link {
position: relative;
display: flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem;
font-size: 0.875rem;
font-weight: 800;
letter-spacing: 0.04em;
line-height: 1.2;
text-decoration: none;
text-transform: uppercase;
transition: color 0.3s ease;
}
.site-nav-link.is-active {
color: #1A206D;
}
.site-nav-link.is-inactive {
color: #4b5563;
}
.site-nav-link.is-inactive:hover {
color: #EA2839;
}
.site-nav-link-label,
.site-nav-chevron {
position: relative;
z-index: 10;
}
.site-nav-chevron {
width: 1rem;
height: 1rem;
transition: transform 0.2s ease;
}
.site-nav-dropdown:hover .site-nav-chevron {
transform: rotate(180deg);
}
.site-nav-underline {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 3px;
border-radius: 9999px;
background: linear-gradient(to right, #EA2839, #1A206D, #FFD500, #00A551);
opacity: 0;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.1);
transition: opacity 0.3s ease;
}
.site-nav-link:hover .site-nav-underline,
.site-nav-underline.is-visible {
opacity: 1;
}
.site-nav-dropdown {
position: relative;
}
.site-dropdown-panel {
position: absolute;
top: 100%;
left: 50%;
z-index: 50;
display: none;
width: 15rem;
padding-top: 1rem;
transform: translateX(-50%);
}
.site-nav-dropdown:hover .site-dropdown-panel {
display: block;
}
.site-dropdown-menu {
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 20px 32px rgba(15, 23, 42, 0.15);
backdrop-filter: blur(24px);
}
.site-dropdown-link {
display: block;
padding: 0.75rem 1.25rem;
color: #475569;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.04em;
text-decoration: none;
text-transform: uppercase;
transition: background 0.2s ease, color 0.2s ease;
}
.site-dropdown-link.has-border {
border-bottom: 1px solid #cbd5e1;
}
.site-dropdown-link:hover {
background: #1A206D;
color: #ffffff;
}
.site-dropdown-link-red:hover {
background: #EA2839;
}
.site-nav-divider {
width: 1px;
height: 1.5rem;
margin: 0 0.5rem;
background: #cbd5e1;
}
.site-nav-divider-compact {
flex: 0 0 auto;
margin-right: 0.25rem;
margin-left: 0.25rem;
}
.site-search-form {
position: relative;
}
.site-search-wrap {
position: relative;
width: 10rem;
transition: width 0.3s ease;
}
.site-search-wrap:focus-within {
width: 16rem;
}
.site-search-input {
width: 100%;
padding: 0.5rem 1rem 0.5rem 2.25rem;
border: 0;
background: transparent;
color: #334155;
font-size: 0.875rem;
font-weight: 500;
outline: none;
transition: color 0.2s ease;
}
.site-search-input::placeholder {
color: #94a3b8;
}
.site-search-bg {
position: absolute;
inset: 0;
z-index: -10;
border-radius: 9999px;
background: #f1f5f9;
opacity: 0;
transition: opacity 0.3s ease;
}
.site-search-wrap:focus-within .site-search-bg {
opacity: 1;
}
.site-search-icon {
position: absolute;
top: 50%;
left: 0.75rem;
width: 1rem;
height: 1rem;
color: #94a3b8;
transform: translateY(-50%);
transition: color 0.2s ease;
}
.site-search-wrap:focus-within .site-search-icon {
color: #1A206D;
}
.site-user-menu {
position: relative;
display: none;
flex: 0 0 auto;
}
.site-user-button {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: 1px solid rgba(226, 232, 240, 0.8);
border-radius: 9999px;
background: rgba(255, 255, 255, 0.6);
color: #475569;
transition: border-color 0.2s ease, color 0.2s ease;
}
.site-user-button:hover {
border-color: rgba(26, 32, 109, 0.35);
color: #1A206D;
}
.site-user-icon {
width: 1.25rem;
height: 1.25rem;
}
.site-user-panel {
position: absolute;
top: 100%;
right: 0;
z-index: 60;
display: none;
width: 14rem;
padding-top: 1rem;
pointer-events: none;
}
.site-user-menu:hover .site-user-panel {
display: block;
pointer-events: auto;
}
.site-mobile-actions {
display: flex;
align-items: center;
gap: 0.125rem;
}
.site-mobile-icon-button {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
padding: 0;
border: 0;
border-radius: 0.5rem;
background: transparent;
color: #1A206D;
transition: background 0.2s ease;
}
.site-mobile-icon-button:hover {
background: rgba(255, 255, 255, 0.25);
}
.site-mobile-icon {
width: 1.5rem;
height: 1.5rem;
}
.site-mobile-panel {
position: absolute;
top: 100%;
left: 0;
width: 100%;
padding: 0.5rem 1rem 0;
}
.site-mobile-panel-inner {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 20px 32px rgba(15, 23, 42, 0.15);
backdrop-filter: blur(24px);
}
.site-mobile-user-inner {
gap: 0.25rem;
}
.site-mobile-link,
.site-mobile-parent-link,
.site-mobile-submenu-link {
display: block;
padding: 0.5rem;
border-radius: 0.5rem;
color: #1A206D;
font-weight: 500;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.site-mobile-parent-link {
flex-grow: 1;
font-weight: 800;
}
.site-mobile-link:hover,
.site-mobile-parent-link:hover {
background: rgba(26, 32, 109, 0.05);
color: #EA2839;
}
.site-mobile-menu-item {
display: flex;
flex-direction: column;
}
.site-mobile-parent-row {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 0.5rem;
border-radius: 0.5rem;
transition: background 0.2s ease;
}
.site-mobile-parent-row:hover {
background: rgba(26, 32, 109, 0.05);
}
.site-mobile-submenu-toggle {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0.5rem;
border: 0;
background: transparent;
color: #1A206D;
outline: none;
transition: color 0.2s ease;
}
.site-mobile-submenu-toggle:hover {
color: #EA2839;
}
.site-mobile-submenu-icon {
width: 1rem;
height: 1rem;
transition: transform 0.3s ease;
}
.rotate-180 {
transform: rotate(180deg);
}
.site-mobile-submenu {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin-top: 0.25rem;
margin-left: 0.5rem;
padding-left: 1rem;
border-left: 2px solid rgba(26, 32, 109, 0.1);
}
.site-mobile-submenu.hidden {
display: none !important;
}
.site-mobile-submenu-link {
color: #4b5563;
font-size: 0.875rem;
}
.site-mobile-submenu-link:hover {
background: rgba(26, 32, 109, 0.05);
color: #1A206D;
}
.site-mobile-search {
position: relative;
margin-top: 0.5rem;
}
.site-mobile-search-input {
width: 100%;
padding: 0.5rem 1rem 0.5rem 2.5rem;
border: 1px solid #111827;
border-radius: 0.5rem;
background: rgba(255, 255, 255, 0.8);
color: #1e293b;
font-size: 0.875rem;
outline: none;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
backdrop-filter: blur(12px);
transition: background 0.2s ease;
}
.site-mobile-search-input:focus {
background: #ffffff;
}
.site-mobile-search-input::placeholder {
color: #64748b;
}
.site-mobile-search-icon {
position: absolute;
top: 50%;
left: 0.75rem;
width: 1rem;
height: 1rem;
color: #1e293b;
transform: translateY(-50%);
}
.site-main {
min-height: 100vh;
padding-right: 1rem;
padding-bottom: 2rem;
padding-left: 1rem;
}
.site-main--offset {
padding-top: 6rem;
}
.site-footer {
position: relative;
margin-top: auto;
overflow: hidden;
padding: 5rem 0 2.5rem;
background: #050a14;
color: #cbd5e1;
font-family: Inter, system-ui, sans-serif;
}
.site-footer-bg,
.site-footer-curves,
.site-footer-flag-line {
position: absolute;
z-index: 0;
}
.site-footer-bg {
inset: 0;
background: linear-gradient(135deg, #020617, #050a14, #000000);
}
.site-footer-glow {
position: absolute;
z-index: 0;
border-radius: 9999px;
pointer-events: none;
mix-blend-mode: screen;
}
.site-footer-glow-blue {
top: 0;
right: 0;
width: 50rem;
height: 50rem;
background: rgba(30, 58, 138, 0.2);
filter: blur(120px);
opacity: 0.6;
transform: translate(50%, -50%);
}
.site-footer-glow-red {
bottom: 0;
left: 0;
width: 37.5rem;
height: 37.5rem;
background: rgba(127, 29, 29, 0.1);
filter: blur(100px);
opacity: 0.5;
transform: translate(-33%, 50%);
}
.site-footer-curves {
inset: 0;
width: 100%;
height: 100%;
opacity: 0.3;
pointer-events: none;
}
.site-footer-flag-line {
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 0.25rem;
background: linear-gradient(to right, #EA2839, #1A206D, #FFD500, #00A551);
box-shadow: 0 0 25px rgba(234, 40, 57, 0.5);
}
.site-footer-inner {
position: relative;
z-index: 10;
max-width: 80rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.site-footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
margin-bottom: 3rem;
padding: 0 1rem;
}
.site-footer-brand-col,
.site-footer-menu-col {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.site-footer-brand {
display: flex;
align-items: center;
gap: 0.75rem;
width: fit-content;
padding: 0.5rem 1rem;
border-radius: 9999px;
background: #ffffff;
color: inherit;
text-decoration: none;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease;
}
.site-footer-brand:hover {
transform: scale(1.05);
}
.site-footer-brand-logo {
position: relative;
flex: 0 0 auto;
width: 2.5rem;
height: 2.5rem;
}
.site-footer-brand-logo-img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.12));
}
.site-footer-brand-text {
color: #1A206D;
font-size: 1.25rem;
font-weight: 800;
letter-spacing: 0;
line-height: 1;
white-space: nowrap;
transition: opacity 0.2s ease;
}
.site-footer-brand:hover .site-footer-brand-text {
opacity: 0.9;
}
.site-footer-desc {
margin: 0;
color: #94a3b8;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.65;
}
.site-footer-menu-col h4 {
display: flex;
align-items: center;
gap: 0.75rem;
margin: 0;
color: #ffffff;
font-size: 1.125rem;
font-weight: 900;
letter-spacing: 0.025em;
line-height: 1.2;
text-transform: uppercase;
}
.site-footer-menu-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 9999px;
box-shadow: 0 0 10px currentColor;
}
.site-footer-menu-dot.theme-mauritius-red {
background: #EA2839;
color: #EA2839;
}
.site-footer-menu-dot.theme-mauritius-blue {
background: #1A206D;
color: #1A206D;
}
.site-footer-menu-dot.theme-mauritius-yellow {
background: #FFD500;
color: #FFD500;
}
.site-footer-menu-list {
display: flex;
flex-direction: column;
gap: 0.875rem;
margin: 0;
padding: 0;
list-style: none;
}
.footer-menu-container ul li a {
position: relative;
display: inline-flex;
align-items: center;
padding-left: 0;
color: #94a3b8;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1), padding-left 0.3s cubic-bezier(0.4, 0, 0.2, 1), text-shadow 0.3s ease;
}
.footer-menu-container ul li a:hover {
padding-left: 12px;
color: #ffffff;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}
.footer-menu-container ul li a::before {
content: "";
position: absolute;
top: 50%;
left: 0;
width: 6px;
height: 2px;
border-radius: 2px;
transform: translateY(-50%) scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.footer-menu-container ul li a:hover::before {
transform: translateY(-50%) scaleX(1);
}
.theme-mauritius-red ul li a:hover { color: #fca5a5; }
.theme-mauritius-red ul li a::before { background-color: #EA2839; }
.theme-mauritius-blue ul li a:hover { color: #93c5fd; }
.theme-mauritius-blue ul li a::before { background-color: #1A206D; }
.theme-mauritius-yellow ul li a:hover { color: #fde047; }
.theme-mauritius-yellow ul li a::before { background-color: #FFD500; }
.site-footer-bottom {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
padding-top: 2rem;
border-top: 2px solid #334155;
font-size: 0.875rem;
}
.site-footer-credit {
order: 2;
display: flex;
flex-direction: column;
gap: 0.25rem;
text-align: center;
}
.site-footer-copy {
color: #e2e8f0;
font-weight: 500;
}
.site-footer-copy span {
color: #ffffff;
font-weight: 800;
}
.site-footer-made {
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
color: #cbd5e1;
font-size: 0.75rem;
}
.site-footer-made svg {
width: 0.75rem;
height: 0.75rem;
color: #EA2839;
fill: currentColor;
}
.site-footer-actions {
order: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.5rem;
width: 100%;
}
.site-footer-legal {
display: flex;
gap: 1.5rem;
color: #e2e8f0;
font-weight: 500;
}
.site-footer-legal a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.site-footer-legal a:hover {
color: #ffffff;
}
.site-footer-action-divider {
display: none;
width: 1px;
height: 1rem;
background: #334155;
}
.site-footer-socials {
display: flex;
align-items: center;
gap: 0.75rem;
}
.site-footer-social {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
border-radius: 0.5rem;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.site-footer-social svg {
width: 1rem;
height: 1rem;
}
.site-footer-social:hover {
transform: scale(1.05);
background: #ffffff;
}
.site-footer-social-facebook:hover {
color: #1877F2;
}
.site-footer-social-instagram:hover {
color: #db2777;
}
.mauritius-widget {
position: fixed;
bottom: 1.5rem;
left: 1.5rem;
z-index: 50;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.mauritius-info-bar {
transform: scale(0.9);
transform-origin: bottom left;
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.mauritius-info-bar.is-visible {
transform: scale(1);
opacity: 1;
}
.mauritius-info-card {
width: calc(100vw - 3rem);
max-width: 64rem;
padding: 0.75rem;
border-color: rgba(26, 32, 109, 0.2);
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 25px 50px rgba(15, 23, 42, 0.2);
backdrop-filter: blur(24px);
}
.mauritius-info-mobile-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.mauritius-info-mobile-head h3 {
margin: 0;
color: #1A206D;
font-size: 0.875rem;
font-weight: 800;
}
.mauritius-info-close {
display: flex;
align-items: center;
justify-content: center;
padding: 0.25rem;
border: 0;
border-radius: 9999px;
background: transparent;
color: #6b7280;
transition: background 0.2s ease, color 0.2s ease;
}
.mauritius-info-close:hover {
background: #f3f4f6;
color: #EA2839;
}
.mauritius-info-close svg {
width: 1rem;
height: 1rem;
}
.mauritius-info-close-desktop,
.mauritius-info-title {
display: none;
}
.mauritius-info-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
}
.mauritius-info-item {
display: flex;
flex: 1 1 0;
align-items: center;
gap: 0.5rem;
min-width: 6.25rem;
padding: 0.5rem;
border-radius: 0.5rem;
}
.mauritius-info-item-red { background: rgba(254, 242, 242, 0.5); }
.mauritius-info-item-yellow { min-width: 7.5rem; background: rgba(254, 252, 232, 0.5); }
.mauritius-info-item-orange { background: rgba(255, 247, 237, 0.5); }
.mauritius-info-item-green { min-width: 8.125rem; background: rgba(240, 253, 244, 0.5); }
.mauritius-info-icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0.375rem;
border-radius: 9999px;
background: #ffffff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.mauritius-info-icon svg {
width: 0.875rem;
height: 0.875rem;
}
.mauritius-info-item-red .mauritius-info-icon { color: #EA2839; }
.mauritius-info-item-yellow .mauritius-info-icon { color: #FFD500; }
.mauritius-info-item-orange .mauritius-info-icon { color: #f97316; }
.mauritius-info-item-green .mauritius-info-icon { color: #00A551; }
.mauritius-info-item p,
.mauritius-info-title p {
margin: 0 0 0.125rem;
color: #6b7280;
font-size: 0.5625rem;
font-weight: 800;
letter-spacing: 0.05em;
line-height: 1;
text-transform: uppercase;
}
.mauritius-info-item strong,
.mauritius-info-title strong {
display: block;
color: #1f2937;
font-size: 0.75rem;
font-weight: 800;
line-height: 1;
}
.mauritius-info-title strong {
color: #1A206D;
}
.mauritius-info-inline {
display: flex;
align-items: center;
gap: 0.375rem;
}
.mauritius-uv {
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
background: #ffffff;
color: #4b5563;
font-size: 0.5625rem;
font-weight: 500;
line-height: 1;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.mauritius-uv.is-low { color: #15803d; }
.mauritius-uv.is-medium { color: #c2410c; }
.mauritius-uv.is-high { color: #b91c1c; }
.mauritius-widget-toggle {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
border: 0;
border-radius: 9999px;
background: linear-gradient(135deg, #1A206D, #1e40af);
color: #ffffff;
box-shadow: 0 10px 18px rgba(15, 23, 42, 0.18);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mauritius-widget-toggle:hover {
transform: scale(1.1);
box-shadow: 0 25px 50px rgba(15, 23, 42, 0.25);
}
.mauritius-widget-toggle svg {
width: 1.5rem;
height: 1.5rem;
transition: transform 0.2s ease;
}
.mauritius-widget-toggle:hover svg {
transform: rotate(12deg);
}
@media (min-width: 768px) {
.site-brand-logo {
width: 3.5rem;
height: 3.5rem;
}
.site-brand-text {
font-size: 1.5rem;
}
.site-desktop-nav {
display: flex;
align-items: center;
gap: 2rem;
margin-top: 0.25rem;
padding: 0.375rem 0.25rem 0.375rem 2rem;
border: 1px solid rgba(226, 232, 240, 0.6);
border-radius: 9999px;
background: rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
backdrop-filter: blur(12px);
}
.site-user-menu {
display: block;
}
.site-mobile-actions {
display: none;
}
.site-mobile-panel {
display: none !important;
}
.site-main--offset {
padding-top: 7rem;
}
.site-footer-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding-right: 0;
padding-left: 0;
}
.site-footer-bottom {
flex-direction: row;
}
.site-footer-credit {
order: 1;
text-align: left;
}
.site-footer-made {
justify-content: flex-start;
}
.site-footer-actions {
order: 2;
flex-direction: row;
justify-content: flex-end;
width: auto;
}
.site-footer-action-divider {
display: block;
}
.mauritius-info-card {
width: auto;
min-width: 37.5rem;
}
.mauritius-info-mobile-head {
display: none;
}
.mauritius-info-title {
display: flex;
align-items: center;
gap: 0.5rem;
padding-right: 1rem;
border-right: 1px solid rgba(26, 32, 109, 0.1);
}
.mauritius-info-title-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 9999px;
background: rgba(26, 32, 109, 0.1);
color: #1A206D;
}
.mauritius-info-title-icon svg {
width: 1rem;
height: 1rem;
}
.mauritius-info-grid {
flex-wrap: nowrap;
gap: 1rem;
}
.mauritius-info-item {
flex: 0 0 auto;
background: transparent;
}
.mauritius-info-icon {
box-shadow: none;
}
.mauritius-info-item-red .mauritius-info-icon { background: #fef2f2; }
.mauritius-info-item-yellow .mauritius-info-icon { background: #fefce8; }
.mauritius-info-item-orange .mauritius-info-icon { background: #fff7ed; }
.mauritius-info-item-green .mauritius-info-icon { background: #f0fdf4; }
.mauritius-uv {
background: #f3f4f6;
box-shadow: none;
}
.mauritius-info-close-desktop {
display: flex;
margin-left: auto;
}
}
@media (min-width: 1024px) {
.site-footer-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.site-footer-brand-col {
padding-right: 2rem;
}
}
.home-ad-wrap {
width: 100%;
max-width: 80rem;
margin: 0 auto 3rem;
}
.home-ad-wrap-middle {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
}
.home-ad-box {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
padding: 1rem 0.25rem;
border-top: 1px solid rgba(255, 255, 255, 0.6);
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.4);
text-align: center;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
transition: border-color 0.2s ease;
backdrop-filter: blur(12px);
}
.home-ad-box:hover {
border-color: rgba(26, 32, 109, 0.2);
}
.home-ad-glow {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 9999px;
background: linear-gradient(to right, rgba(26, 32, 109, 0.05), rgba(234, 40, 57, 0.05));
opacity: 0.5;
filter: blur(48px);
transform: translate(-50%, -50%);
}
.home-ad-label {
display: block;
margin-bottom: 0.5rem;
color: #94a3b8;
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.home-guides-section {
position: relative;
}
.home-guides-heading {
margin-bottom: 5rem;
}
.home-guides-list {
position: relative;
max-width: 72rem;
margin: 0 auto;
padding: 0 1rem;
overflow: hidden;
}
.home-guides-path {
position: absolute;
inset: 0;
z-index: -10;
display: none;
width: 100%;
height: 100%;
pointer-events: none;
}
.home-guide-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
margin-bottom: 3rem;
}
.home-guide-item:last-child {
margin-bottom: 0;
}
.home-guide-media-col,
.home-guide-content {
width: 100%;
}
.home-guide-media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 3;
border: 4px solid #ffffff;
border-radius: 2.5rem;
box-shadow: 0 25px 50px rgba(15, 23, 42, 0.24);
transition: transform 0.5s ease;
}
.home-guide-media:hover {
transform: scale(1.05) rotate(1deg);
}
.home-guide-overlay {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
height: 33.333%;
padding: 1.5rem;
color: #ffffff;
backdrop-filter: blur(4px);
transform: translateY(100%);
transition: transform 0.3s ease;
}
.home-guide-media:hover .home-guide-overlay {
transform: translateY(0);
}
.home-guide-overlay span {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.125rem;
font-weight: 800;
}
.home-guide-overlay svg {
width: 1.25rem;
height: 1.25rem;
}
.home-guide-item--red .home-guide-overlay,
.home-guide-item--red .home-guide-icon {
background: rgba(234, 40, 57, 0.95);
color: #ffffff;
}
.home-guide-item--yellow .home-guide-overlay,
.home-guide-item--yellow .home-guide-icon {
background: rgba(255, 213, 0, 0.95);
color: #1A206D;
}
.home-guide-item--green .home-guide-overlay,
.home-guide-item--green .home-guide-icon {
background: rgba(0, 165, 81, 0.95);
color: #ffffff;
}
.home-guide-heading-row {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.home-guide-icon {
display: inline-block;
flex: 0 0 auto;
padding: 0.75rem;
border-radius: 1rem;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
transform: rotate(-2deg);
transition: transform 0.3s ease;
}
.home-guide-item:hover .home-guide-icon {
transform: rotate(0);
}
.home-guide-icon img {
width: 1.5rem;
height: 1.5rem;
object-fit: contain;
}
.home-guide-content h3 {
margin: 0;
color: #1A206D;
font-size: 1.5rem;
font-weight: 900;
letter-spacing: 0;
line-height: 1.1;
}
.home-guide-content p {
margin: 0 0 2rem;
color: #475569;
font-size: 1.125rem;
font-weight: 500;
line-height: 1.65;
}
.home-guide-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 1.125rem;
font-weight: 800;
text-decoration: none;
transition: opacity 0.2s ease;
}
.home-guide-link:hover {
opacity: 0.8;
}
.home-guide-link svg {
width: 1.25rem;
height: 1.25rem;
}
.home-guide-item--red .home-guide-link {
color: #EA2839;
}
.home-guide-item--yellow .home-guide-link {
color: #1A206D;
}
.home-guide-item--green .home-guide-link {
color: #00A551;
}
.home-learn-section {
margin-bottom: 3rem;
}
.home-phrase-wrap {
position: relative;
display: none;
width: 100%;
max-width: 36rem;
margin: 0 auto 2.5rem;
}
.home-phrase-card {
position: relative;
overflow: hidden;
padding: 1.25rem;
border: 1px solid #f1f5f9;
border-radius: 1.75rem;
background: #ffffff;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
transition: box-shadow 0.2s ease;
}
.home-phrase-card:hover {
box-shadow: 0 20px 32px rgba(15, 23, 42, 0.12);
}
.home-phrase-bg {
position: absolute;
top: -6rem;
right: -6rem;
width: 20rem;
height: 20rem;
border-radius: 9999px;
background: #FFF5F1;
pointer-events: none;
}
.home-phrase-content {
position: relative;
z-index: 10;
}
.home-phrase-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.home-phrase-header > span {
padding-top: 0.5rem;
color: #94a3b8;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.home-phrase-refresh {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
border: 0;
border-radius: 9999px;
background: transparent;
color: #0d9488;
font-weight: 800;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease;
}
.home-phrase-refresh:hover {
background: #f0fdfa;
color: #0f766e;
}
.home-phrase-refresh svg {
width: 0.875rem;
height: 0.875rem;
transition: transform 0.7s ease;
}
.home-phrase-refresh-label {
font-size: 0.75rem;
}
.home-phrase-refresh:hover svg {
transform: rotate(180deg);
}
.home-phrase-main {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.home-phrase-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
}
.home-phrase-line h3 {
margin: 0;
color: #1e293b;
font-size: 1.5rem;
font-weight: 900;
letter-spacing: 0;
line-height: 1.35;
}
.home-phrase-audio {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border: 0;
border-radius: 9999px;
background: #E0F2F1;
color: #0f766e;
cursor: pointer;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.home-phrase-audio:hover {
transform: scale(1.1);
background: #ccfbf1;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
}
.home-phrase-audio.is-playing {
transform: scale(0.9);
background: #99f6e4;
}
.home-phrase-audio svg {
width: 1.25rem;
height: 1.25rem;
}
.home-phrase-translation {
margin: 0 0 0.75rem;
color: #64748b;
font-family: Georgia, serif;
font-size: 1rem;
font-style: italic;
font-weight: 500;
}
.home-phrase-pronunciation {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 9999px;
background: #F5F5F4;
color: #64748b;
font-size: 0.875rem;
font-weight: 500;
}
.home-phrase-pronunciation svg {
width: 0.875rem;
height: 0.875rem;
color: #94a3b8;
}
.home-learn-card-grid {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.home-learn-card {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
overflow: hidden;
padding: 1.25rem;
border: 1px solid #f1f5f9;
border-radius: 1rem;
background: #ffffff;
color: inherit;
text-decoration: none;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.home-learn-card:hover {
box-shadow: 0 25px 50px rgba(15, 23, 42, 0.16);
}
.home-learn-card-bg {
position: absolute;
top: -2rem;
right: -2rem;
display: none;
width: 8rem;
height: 8rem;
border-bottom-left-radius: 100px;
transition: transform 0.5s ease, background 0.5s ease;
}
.home-learn-card:hover .home-learn-card-bg {
transform: scale(1.5);
}
.home-learn-card--red .home-learn-card-bg,
.home-learn-card--red .home-learn-card-icon,
.home-learn-card--red .home-learn-card-link {
background: rgba(234, 40, 57, 0.1);
color: #EA2839;
}
.home-learn-card--red:hover .home-learn-card-bg,
.home-learn-card--red:hover .home-learn-card-icon {
background: #EA2839;
color: #ffffff;
}
.home-learn-card--yellow .home-learn-card-bg,
.home-learn-card--yellow .home-learn-card-icon,
.home-learn-card--yellow .home-learn-card-link {
background: rgba(255, 213, 0, 0.2);
color: #1A206D;
}
.home-learn-card--yellow:hover .home-learn-card-bg,
.home-learn-card--yellow:hover .home-learn-card-icon {
background: #FFD500;
color: #1A206D;
}
.home-learn-card--green .home-learn-card-bg,
.home-learn-card--green .home-learn-card-icon,
.home-learn-card--green .home-learn-card-link {
background: rgba(0, 165, 81, 0.1);
color: #00A551;
}
.home-learn-card--green:hover .home-learn-card-bg,
.home-learn-card--green:hover .home-learn-card-icon {
background: #00A551;
color: #ffffff;
}
.home-learn-card-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
gap: 1rem;
}
.home-learn-card-icon {
display: none;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin-bottom: 1.5rem;
border-radius: 1rem;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
transition: background 0.3s ease, color 0.3s ease;
}
.home-learn-card-icon svg {
width: 2rem;
height: 2rem;
}
.home-learn-card-text {
flex: 1 1 auto;
}
.home-learn-card-text h3 {
margin: 0;
color: #1A206D;
font-size: 0.9375rem;
font-weight: 800;
line-height: 1.15;
}
.home-learn-card-text p {
margin: 0.125rem 0 0;
padding-right: 0.5rem;
color: #6b7280;
font-size: 0.6875rem;
font-weight: 500;
line-height: 1.2;
}
.home-learn-card-link {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 9999px;
font-weight: 800;
transition: gap 0.2s ease;
}
.home-learn-card-link span {
display: none;
}
.home-learn-card-link svg {
width: 1rem;
height: 1rem;
transition: transform 0.2s ease;
}
.home-learn-card:hover .home-learn-card-link svg {
transform: translateX(0.25rem);
}
.home-mission {
position: relative;
overflow: hidden;
margin-bottom: 4rem;
border-radius: 3rem;
background: #0f172a;
color: #ffffff;
box-shadow: 0 25px 50px rgba(15, 23, 42, 0.25);
}
.home-mission-bg,
.home-mission-overlay {
position: absolute;
inset: 0;
}
.home-mission-bg {
background: #1f2937;
}
.home-mission-image {
width: 100%;
height: 100%;
background-image: url(https://creolemauritius.com/wp-content/uploads/2025/11/mauritiusbeach.webp);
background-position: center;
background-size: cover;
opacity: 0.6;
}
.home-mission-overlay {
background: linear-gradient(to right, rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0));
}
.home-mission-content {
position: relative;
z-index: 10;
max-width: 48rem;
padding: 2rem;
}
.home-mission h2 {
margin: 0 0 1.5rem;
font-size: clamp(2.25rem, 5vw, 3.75rem);
font-weight: 900;
letter-spacing: 0;
line-height: 1.1;
}
.home-mission p {
margin: 0 0 1.75rem;
color: #cbd5e1;
font-size: 1rem;
line-height: 1.65;
}
.home-mission-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
border-radius: 9999px;
background: #ffffff;
color: #0f172a;
font-size: 0.875rem;
font-weight: 800;
text-decoration: none;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.home-mission-link:hover {
transform: translateY(-0.25rem);
background: #1A206D;
color: #ffffff;
box-shadow: 0 0 20px rgba(26, 32, 109, 0.5);
}
.home-mission-link svg {
width: 1rem;
height: 1rem;
}
.home-newsletter {
position: relative;
overflow: hidden;
margin-bottom: 3rem;
border: 1px solid #e2e8f0;
border-radius: 2.5rem;
background: #f8fafc;
box-shadow: 0 25px 50px rgba(15, 23, 42, 0.18);
}
.home-newsletter-shape {
position: absolute;
border-radius: 9999px;
filter: blur(48px);
}
.home-newsletter-shape-red {
top: 0;
right: 0;
width: 24rem;
height: 24rem;
background: rgba(234, 40, 57, 0.05);
transform: translate(33%, -33%);
}
.home-newsletter-shape-yellow {
bottom: 0;
left: 0;
width: 20rem;
height: 20rem;
background: rgba(255, 213, 0, 0.1);
transform: translate(-33%, 33%);
}
.home-newsletter-shape-green {
top: 50%;
left: 50%;
width: 16rem;
height: 16rem;
background: rgba(0, 165, 81, 0.05);
transform: translate(-50%, -50%);
}
.home-newsletter-grid {
position: relative;
z-index: 10;
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
align-items: center;
padding: 2rem;
}
.home-newsletter-copy {
text-align: left;
}
.home-newsletter-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
padding: 0.25rem 0.75rem;
border: 1px solid rgba(234, 40, 57, 0.2);
border-radius: 9999px;
background: #ffffff;
color: #EA2839;
font-size: 0.75rem;
font-weight: 800;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.home-newsletter-badge svg {
width: 0.75rem;
height: 0.75rem;
color: #FFD500;
}
.home-newsletter h2 {
margin: 0 0 1rem;
color: #1A206D;
font-size: clamp(1.875rem, 4vw, 2.25rem);
font-weight: 800;
letter-spacing: 0;
line-height: 1.15;
}
.home-newsletter p {
max-width: 28rem;
margin: 0;
color: #475569;
font-size: 1.125rem;
font-weight: 500;
line-height: 1.55;
}
.home-newsletter-form-side {
width: 100%;
}
.home-newsletter-form-frame {
padding: 3px;
border-radius: 20px;
background: linear-gradient(to right, #EA2839, #1A206D, #FFD500, #00A551);
box-shadow: 0 20px 32px rgba(15, 23, 42, 0.16);
}
.home-newsletter-form {
width: 100%;
height: 100%;
padding: 1.5rem;
border-radius: 17px;
background: #ffffff;
}
.home-gallery {
width: 100%;
}
.home-gallery-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
height: 16rem;
}
.home-gallery-item {
position: relative;
height: 100%;
overflow: hidden;
}
.home-gallery-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.home-gallery-item:hover .home-gallery-image {
transform: scale(1.1);
}
.home-gallery-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.2);
transition: background 0.3s ease;
}
.home-gallery-item:hover .home-gallery-overlay {
background: rgba(0, 0, 0, 0);
}
@media (min-width: 640px) {
.home-hero-actions {
gap: 1rem;
}
.home-hero-button {
flex: 0 0 auto;
gap: 0.5rem;
padding-right: 2rem;
padding-left: 2rem;
font-size: 0.875rem;
}
.home-hero-button-icon {
width: 1.25rem;
height: 1.25rem;
}
.home-path-card {
flex-basis: 60vw;
}
.home-explore-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 768px) {
.home-hero-inner {
padding-top: 5rem;
}
.home-hero-copy {
padding-left: 3rem;
}
.home-section {
margin-bottom: 8rem;
}
.home-section-eyebrow {
font-size: 0.875rem;
}
.home-path-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
overflow: visible;
}
.home-path-card {
flex: initial;
border-radius: 2.5rem;
}
.home-path-card-media {
height: 12rem;
}
.home-path-card-body {
margin-top: -3rem;
padding: 0 2rem 2rem;
}
.home-path-card-icon {
width: 4rem;
height: 4rem;
margin-bottom: 1.5rem;
border-radius: 1rem;
}
.home-path-card-icon img,
.home-path-card-icon svg {
width: 2rem;
height: 2rem;
}
.home-path-card-label {
margin-bottom: 0.75rem;
}
.home-path-card-title {
margin-bottom: 1rem;
font-size: 1.5rem;
}
.home-path-card-desc {
margin-bottom: 2rem;
font-size: 0.875rem;
}
.home-explore-grid {
gap: 1rem;
margin-bottom: 6rem;
}
.home-explore-card {
height: 7.375rem;
min-height: 7.375rem;
}
.home-explore-card-content {
padding: 1.25rem;
}
.home-explore-card-thumb {
width: 4.5rem;
height: 4.5rem;
}
.home-explore-card h3 {
font-size: 1.5rem;
}
.home-explore-card p {
font-size: 1rem;
}
.home-ad-wrap-middle {
margin-top: 5rem;
margin-bottom: 5rem;
padding-right: 1.5rem;
padding-left: 1.5rem;
}
.home-ad-box {
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 2rem;
}
.home-guides-path {
display: block;
}
.home-guide-item {
flex-direction: row;
gap: 4rem;
margin-bottom: 6rem;
}
.home-guide-item--reverse {
flex-direction: row-reverse;
}
.home-guide-media-col,
.home-guide-content {
width: 50%;
}
.home-guide-content {
text-align: right;
}
.home-guide-item--reverse .home-guide-content {
text-align: left;
}
.home-guide-heading-row {
display: block;
margin-bottom: 0;
}
.home-guide-icon {
margin-bottom: 1.5rem;
padding: 1rem;
}
.home-guide-icon img {
width: 2rem;
height: 2rem;
}
.home-guide-content h3 {
margin-bottom: 1.5rem;
font-size: clamp(2.75rem, 4vw, 3rem);
}
.home-learn-section {
margin-bottom: 6rem;
}
.home-phrase-wrap {
display: block;
margin-bottom: 3.5rem;
}
.home-phrase-card {
padding: 1.75rem;
}
.home-phrase-header {
margin-bottom: 1.75rem;
}
.home-phrase-header > span {
font-size: 0.875rem;
}
.home-phrase-line {
gap: 1.25rem;
}
.home-phrase-line h3 {
font-size: 2.25rem;
}
.home-phrase-translation {
margin-bottom: 1rem;
font-size: 1.125rem;
}
.home-learn-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
.home-learn-card {
display: block;
padding: 2rem;
border-radius: 2.5rem;
}
.home-learn-card:hover {
transform: translateY(-0.5rem);
}
.home-learn-card-bg {
display: block;
}
.home-learn-card-content {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 0;
}
.home-learn-card-icon {
display: flex;
}
.home-learn-card-text h3 {
margin-bottom: 0.5rem;
font-size: 1.5rem;
}
.home-learn-card-text p {
margin-bottom: 2rem;
padding-right: 0;
font-size: 1rem;
line-height: 1.35;
}
.home-learn-card-link {
width: auto;
height: auto;
background: transparent !important;
border-radius: 0;
}
.home-learn-card-link span {
display: inline;
margin-right: 0.5rem;
}
.home-mission {
margin-bottom: 6rem;
}
.home-mission-content {
padding: 3rem;
}
.home-mission p {
font-size: 1.125rem;
}
.home-mission-link {
font-size: 1rem;
}
.home-newsletter-grid {
padding: 3rem;
}
.home-newsletter-form {
padding: 2rem;
}
.home-gallery-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
height: 20rem;
}
}
@media (min-width: 1024px) {
.home-hero-copy {
padding-left: 5rem;
}
.home-explore-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
padding-right: 0;
padding-left: 0;
}
.home-newsletter-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.home-gallery-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.home-hero-title {
font-size: clamp(2.85rem, 15vw, 4rem);
}
} .home-latest-section {
position: relative;
max-width: 100%;
margin-bottom: 1.5rem;
overflow-x: hidden;
}
.home-latest-actions {
position: absolute;
top: 4.25rem;
right: 0;
z-index: 3;
display: flex;
justify-content: flex-end;
margin: 0;
pointer-events: none;
}
.home-latest-view-all {
box-sizing: border-box;
display: inline-flex;
align-items: center;
gap: 1rem;
min-height: 3.25rem;
padding: 0.75rem 1.25rem 0.75rem 1.5rem;
border: 1px solid rgba(148, 163, 184, 0.45);
border-radius: 9999px;
background: rgba(255, 255, 255, 0.82);
color: #0f172a;
font-size: 0.95rem;
font-weight: 800;
line-height: 1;
max-width: 100%;
text-decoration: none;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
pointer-events: auto;
}
.home-latest-view-all:hover {
transform: translateY(-2px);
border-color: rgba(26, 32, 109, 0.35);
background: #ffffff;
box-shadow: 0 16px 35px rgba(15, 23, 42, 0.1);
}
.home-latest-view-all svg {
transition: transform 0.2s ease;
}
.home-view-all-icon {
width: 1.25rem;
height: 1.25rem;
}
.home-latest-view-all:hover svg {
transform: translateX(3px);
}
.home-latest-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(25rem, 1fr);
gap: 2rem;
align-items: stretch;
overflow: visible;
}
.home-latest-wrap {
margin-bottom: 0 !important;
}
.home-latest-featured {
position: relative;
display: block;
min-height: 30rem;
height: 100%;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.72);
border-radius: 1.5rem;
background: #0f172a;
color: #ffffff;
box-shadow: 0 18px 45px rgba(15, 23, 42, 0.12), 0 0 0 6px rgba(255, 255, 255, 0.68);
text-decoration: none;
}
.home-latest-featured::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(15, 23, 42, 0.04) 0%, rgba(15, 23, 42, 0.2) 36%, rgba(15, 23, 42, 0.88) 100%);
z-index: 1;
}
.home-latest-featured-img,
.home-latest-list-img,
.home-latest-list-image img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
clip-path: inset(0 round 0.9rem);
z-index: 0;
transition: transform 0.45s ease;
}
.home-latest-featured-img {
clip-path: inset(0 round 1.5rem);
}
.home-latest-list-img,
.home-latest-list-image img {
border-radius: 0.9rem;
clip-path: inset(0 round 0.9rem);
}
.home-latest-featured:hover .home-latest-featured-img,
.home-latest-list-item:hover .home-latest-list-image img {
transform: scale(1.04);
}
.home-latest-featured-badge {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 2;
display: inline-flex;
align-items: center;
min-height: 2rem;
padding: 0.45rem 0.85rem;
border-radius: 0.7rem;
background: #4c9a2a;
color: #ffffff;
font-size: 0.7rem;
font-weight: 900;
letter-spacing: 0.04em;
line-height: 1;
text-transform: uppercase;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22);
}
.home-latest-featured-content {
position: absolute;
right: 1.5rem;
bottom: 1.5rem;
left: 1.5rem;
z-index: 2;
}
.home-latest-featured-content h3 {
max-width: 38rem;
margin: 0 0 0.85rem;
color: #ffffff;
font-size: clamp(1.65rem, 2.35vw, 2.45rem);
font-weight: 900;
letter-spacing: 0;
line-height: 1.08;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.home-latest-featured-content p {
max-width: 35rem;
margin: 0 0 2rem;
color: rgba(255, 255, 255, 0.92);
font-size: 1rem;
font-weight: 700;
line-height: 1.45;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.home-latest-featured-meta,
.home-latest-list-meta {
display: flex;
align-items: center;
gap: 0.65rem;
color: inherit;
font-size: 0.92rem;
font-weight: 800;
line-height: 1.2;
}
.home-latest-featured-meta {
color: #ffffff;
}
.home-latest-read-time {
margin-left: auto;
white-space: nowrap;
}
.home-latest-list {
display: grid;
grid-template-rows: repeat(3, auto);
gap: 1rem;
height: auto;
max-height: none;
overflow: visible !important;
overflow-y: visible !important;
scrollbar-width: none;
}
.home-latest-list::-webkit-scrollbar {
display: none;
}
.home-latest-list-item {
position: relative;
display: grid;
grid-template-columns: minmax(11rem, 0.95fr) minmax(0, 1.8fr);
gap: 1.25rem;
align-items: stretch;
min-height: 9.6rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(148, 163, 184, 0.28);
}
.home-latest-list-item:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.home-latest-list-image {
position: relative;
display: block;
min-height: 9rem;
overflow: hidden;
isolation: isolate;
border: 1px solid rgba(15, 23, 42, 0.08);
border-radius: 0.9rem;
background: #e2e8f0;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.07);
transform: translateZ(0);
}
.home-latest-list-image::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.08);
pointer-events: none;
}
.home-latest-list-content {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.home-latest-list-content h4 {
margin: 0 0 1.2rem;
color: #0f172a;
font-size: clamp(1.3rem, 1.6vw, 1.7rem);
font-weight: 900;
letter-spacing: 0;
line-height: 1.08;
}
.home-latest-list-content h4 a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.home-latest-list-item:hover .home-latest-list-content h4 a {
color: #1A206D;
}
.home-latest-list-meta {
color: #94a3b8;
flex-wrap: wrap;
}
.home-latest-category {
font-weight: 900;
}
.home-latest-category.is-travel {
color: #6157b8;
}
.home-latest-category.is-food {
color: #64748b;
}
.home-latest-category.is-culture {
color: #00A551;
}
.home-latest-category.is-lifestyle {
color: #EA2839;
}
.home-latest-category.is-default {
color: #1A206D;
}
.home-latest-featured-meta .home-latest-category {
color: #ffffff;
}
.home-latest-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
min-height: inherit;
color: #94a3b8;
background: #e2e8f0;
}
.home-latest-placeholder-icon {
width: 2rem;
height: 2rem;
}
.home-latest-placeholder-icon-large {
width: 3.5rem;
height: 3.5rem;
}
@media (max-width: 1023px) {
.home-latest-actions {
position: static;
justify-content: center;
margin-top: 1.75rem;
margin-bottom: 0;
pointer-events: auto;
}
.home-latest-grid {
grid-template-columns: 1fr;
}
.home-latest-featured {
min-height: 26rem;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.12), 0 0 0 4px rgba(255, 255, 255, 0.68);
}
.home-latest-list {
gap: 1.25rem;
}
.home-latest-list-item {
grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
min-height: 8rem;
}
.home-latest-list-image {
min-height: 8rem;
}
}
@media (max-width: 640px) {
.home-latest-actions {
margin-top: 1.5rem;
}
.home-latest-view-all {
width: 100%;
justify-content: center;
}
.home-latest-featured {
min-height: 27rem;
border-radius: 1.15rem;
}
.home-latest-featured-img {
clip-path: inset(0 round 1.15rem);
}
.home-latest-featured-content {
right: 1rem;
bottom: 1rem;
left: 1rem;
}
.home-latest-featured-content h3 {
font-size: 1.65rem;
}
.home-latest-featured-content p {
display: none;
}
.home-latest-featured-meta,
.home-latest-list-meta {
font-size: 0.82rem;
}
.home-latest-featured-meta {
flex-wrap: wrap;
}
.home-latest-featured-meta .home-latest-read-time,
.home-latest-list-meta .home-latest-read-time {
margin-left: 0;
}
.home-latest-list-item {
grid-template-columns: 1fr;
gap: 0.85rem;
min-height: 0;
padding-bottom: 1.25rem;
border-bottom: 0;
}
.home-latest-list-item::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 1px;
background: rgba(148, 163, 184, 0.28);
}
.home-latest-list-item:last-child {
padding-bottom: 0;
}
.home-latest-list-item:last-child::after {
display: none;
}
.home-latest-list-image {
aspect-ratio: 16 / 9;
min-height: 0;
overflow: hidden !important;
border-radius: 1rem !important;
clip-path: inset(0 round 1rem) !important;
contain: paint;
}
.home-latest-list-img,
.home-latest-list-image > img {
border-radius: 1rem !important;
clip-path: inset(0 round 1rem) !important;
transform: none !important;
transition: none !important;
}
.home-latest-list-content h4 {
margin-bottom: 0.85rem;
font-size: 1.3rem;
}
} .blog-page-shell {
max-width: 80rem;
margin: 0 auto;
padding: 0.25rem 1rem 3rem;
}
.blog-page-header {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 1.5rem;
padding: 1rem 0;
}
.blog-page-heading {
flex: 0 0 auto;
max-width: 42rem;
}
.blog-page-heading h1 {
margin: 0 0 0.5rem;
color: #1A206D;
font-size: clamp(2.25rem, 5vw, 3rem);
font-weight: 900;
letter-spacing: 0;
line-height: 1.1;
}
.blog-page-heading p,
.blog-page-heading .term-description {
margin: 0;
color: #475569;
font-size: 1.125rem;
font-weight: 500;
line-height: 1.65;
}
.blog-mobile-filter {
width: 100%;
margin-bottom: 1.5rem;
}
.blog-mobile-filter > span {
display: block;
margin-bottom: 0.75rem;
padding-left: 0.25rem;
color: #94a3b8;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.blog-mobile-filter-list {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
.blog-mobile-filter-link {
flex-grow: 1;
padding: 0.625rem 1.25rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
background: #f1f5f9;
color: #334155;
font-size: 0.875rem;
font-weight: 800;
text-align: center;
text-decoration: none;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.blog-mobile-filter-link:active {
transform: scale(0.95);
}
.blog-mobile-filter-link:hover {
border-color: #1A206D;
background: #ffffff;
color: #1A206D;
}
.blog-mobile-filter-link.is-active {
border-color: #1A206D;
background: #1A206D;
color: #ffffff;
box-shadow: 0 6px 14px rgba(26, 32, 109, 0.18);
}
.blog-desktop-filter {
position: relative;
display: none;
width: auto;
padding: 0.375rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 9999px;
background: rgba(26, 32, 109, 0.9);
box-shadow: 0 20px 32px rgba(15, 23, 42, 0.16);
backdrop-filter: blur(12px);
}
.blog-filter-scroll {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 0.5rem;
overflow-x: auto;
padding: 0.25rem 0.5rem;
scroll-behavior: smooth;
scrollbar-width: none;
-webkit-mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, black 1rem, black calc(100% - 1rem), transparent 100%);
}
.blog-filter-scroll::-webkit-scrollbar {
display: none;
}
.blog-filter-pill {
flex: 0 0 auto;
padding: 0.5rem 1.25rem;
border-radius: 9999px;
color: rgba(255, 255, 255, 0.9);
font-size: 0.875rem;
font-weight: 500;
white-space: nowrap;
text-decoration: none;
transition: background 0.2s ease, color 0.2s ease;
}
.blog-filter-pill:hover {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.blog-filter-pill.is-active {
background: #ffffff;
color: #1A206D;
font-weight: 800;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.blog-filter-scroll-btn {
position: absolute;
top: 50%;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid #f1f5f9;
border-radius: 9999px;
background: #ffffff;
color: #1A206D;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
opacity: 0;
transform: translateY(-50%);
transition: opacity 0.3s ease, background 0.2s ease, color 0.2s ease;
}
.blog-filter-scroll-btn:hover {
background: #FFD500;
color: #1A206D;
}
.blog-filter-scroll-btn svg {
width: 1rem;
height: 1rem;
}
.blog-filter-scroll-left {
left: 0;
}
.blog-filter-scroll-right {
right: 0;
}
.blog-desktop-filter:hover .blog-filter-scroll-btn {
opacity: 1;
}
.blog-posts-stack {
display: flex;
flex-direction: column;
gap: 3rem;
}
.blog-featured-card {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
margin-bottom: 3rem;
border-radius: 2rem;
background: #1A206D;
box-shadow: 0 20px 32px rgba(15, 23, 42, 0.16);
}
.blog-featured-media {
position: relative;
order: -1;
z-index: 0;
height: 12rem;
overflow: hidden;
}
.blog-featured-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.blog-featured-img:hover {
transform: scale(1.05);
}
.blog-featured-placeholder,
.blog-card-placeholder {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.blog-featured-placeholder {
background: #1e293b;
color: rgba(255, 255, 255, 0.2);
}
.blog-featured-placeholder svg {
width: 4rem;
height: 4rem;
}
.blog-featured-category {
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.05em;
line-height: 1;
text-transform: uppercase;
}
.blog-featured-category-mobile {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 10;
padding: 0.375rem 1rem;
background: rgba(255, 255, 255, 0.9);
color: #1A206D;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(4px);
}
.blog-featured-category-desktop {
position: relative;
z-index: 10;
display: none;
width: fit-content;
margin-bottom: 1.5rem;
padding: 0.375rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
backdrop-filter: blur(12px);
}
.blog-featured-mobile-overlay,
.blog-featured-desktop-overlay,
.blog-featured-decor {
position: absolute;
}
.blog-featured-mobile-overlay {
inset: 0;
background: linear-gradient(to top, #1A206D, rgba(26, 32, 109, 0));
opacity: 0.8;
}
.blog-featured-desktop-overlay {
display: none;
}
.blog-featured-content {
position: relative;
z-index: 10;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
padding: 1.25rem;
}
.blog-featured-decor {
top: 0;
right: 0;
width: 16rem;
height: 16rem;
border-radius: 9999px;
background: rgba(255, 255, 255, 0.05);
filter: blur(48px);
transform: translate(50%, -50%);
}
.blog-featured-content h2 {
position: relative;
z-index: 10;
margin: 0 0 1rem;
color: #ffffff;
font-size: clamp(1.5rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: 0;
line-height: 1.1;
}
.blog-featured-content h2 a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.blog-featured-content h2 a:hover {
color: #FFD500;
}
.blog-featured-excerpt {
position: relative;
z-index: 10;
display: none;
margin-bottom: 2rem;
color: rgba(255, 255, 255, 0.9);
font-size: 1.125rem;
font-weight: 500;
line-height: 1.65;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.blog-featured-link {
position: relative;
z-index: 10;
display: inline-flex;
align-items: center;
gap: 0.375rem;
width: fit-content;
color: #ffffff;
font-size: 0.875rem;
font-weight: 800;
text-decoration: none;
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.blog-featured-link svg {
width: 1rem;
height: 1rem;
}
.blog-grid {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.blog-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 2rem;
transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.blog-card:hover {
transform: translateY(-0.25rem);
border-color: rgba(26, 32, 109, 0.2);
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 20px 32px rgba(15, 23, 42, 0.14);
}
.blog-card-media {
position: relative;
height: 10rem;
overflow: hidden;
}
.blog-card-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.blog-card:hover .blog-card-img {
transform: scale(1.1);
}
.blog-card-placeholder {
background: rgba(26, 32, 109, 0.05);
color: rgba(26, 32, 109, 0.2);
}
.blog-card-placeholder svg {
width: 3rem;
height: 3rem;
}
.blog-card-category {
position: absolute;
top: 1rem;
left: 1rem;
padding: 0.25rem 0.75rem;
border-radius: 0.5rem;
background: rgba(255, 255, 255, 0.9);
color: #1A206D;
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(4px);
}
.blog-card-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 1.25rem;
}
.blog-card-date {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
color: #9ca3af;
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.blog-card-date svg {
width: 0.75rem;
height: 0.75rem;
}
.blog-card h3 {
margin: 0 0 0.75rem;
color: #1A206D;
font-size: 1.25rem;
font-weight: 800;
line-height: 1.2;
transition: color 0.2s ease;
}
.blog-card h2 {
margin: 0 0 0.75rem;
color: #1A206D;
font-size: 1.25rem;
font-weight: 800;
line-height: 1.2;
transition: color 0.2s ease;
}
.blog-card:hover h2 {
color: #EA2839;
}
.blog-card h2 a {
color: inherit;
text-decoration: none;
}
.blog-card:hover h3 {
color: #EA2839;
}
.blog-card h3 a {
color: inherit;
text-decoration: none;
}
.blog-card-excerpt {
flex-grow: 1;
margin: 0 0 0.75rem;
color: #4b5563;
font-size: 0.875rem;
line-height: 1.65;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.blog-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
padding-top: 0.75rem;
border-top: 1px solid #f3f4f6;
}
.blog-card-link {
position: relative;
z-index: 10;
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: #1A206D;
font-size: 0.875rem;
font-weight: 800;
text-decoration: none;
transition: transform 0.2s ease;
}
.blog-card:hover .blog-card-link {
transform: translateX(0.25rem);
}
.blog-card-link svg {
width: 1rem;
height: 1rem;
}
.blog-card-link-red {
color: #EA2839;
font-weight: 700;
}
.blog-card-link-red svg {
margin-left: 0.25rem;
}
.blog-card-scale:hover {
transform: scale(1.02);
}
.blog-card-media-compact {
height: 9rem;
}
.blog-card-body-compact {
padding: 1.25rem;
}
.blog-card-category-pill {
border-radius: 9999px;
font-size: 0.75rem;
letter-spacing: 0;
}
.blog-card-placeholder-gradient {
background: linear-gradient(135deg, rgba(26, 32, 109, 0.1), rgba(234, 40, 57, 0.1));
}
.blog-archive-header {
max-width: 42rem;
margin: 0 auto 4rem;
text-align: center;
}
.blog-archive-header h1 {
margin: 0 0 1rem;
font-size: clamp(2.25rem, 5vw, 3rem);
font-weight: 800;
letter-spacing: 0;
line-height: 1.1;
}
.blog-archive-header p {
margin: 0 auto;
max-width: 42rem;
color: #4b5563;
font-size: 1.125rem;
line-height: 1.6;
}
.blog-pagination {
display: flex;
justify-content: center;
margin-top: 3rem;
}
.blog-pagination ul,
.blog-pagination-list {
display: flex;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.blog-pagination a,
.blog-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.5rem;
min-height: 2.5rem;
padding: 0.5rem 0.875rem;
border: 1px solid #e5e7eb;
border-radius: 9999px;
background: #ffffff;
color: #334155;
font-size: 0.875rem;
font-weight: 800;
text-decoration: none;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.blog-pagination a:hover,
.blog-pagination .current {
border-color: #1A206D;
color: #1A206D;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.1);
}
.blog-pagination svg {
width: 1.25rem;
height: 1.25rem;
}
.blog-empty {
grid-column: 1 / -1;
padding: 3rem 1rem;
color: #6b7280;
text-align: center;
}
.blog-empty-card {
grid-column: 1 / -1;
padding: 5rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 1.5rem;
background: rgba(255, 255, 255, 0.5);
text-align: center;
}
.blog-empty-card h2 {
margin: 0 0 0.5rem;
color: #1f2937;
font-size: 1.5rem;
font-weight: 800;
}
.blog-empty-card p {
margin: 0;
color: #6b7280;
}
.blog-empty-icon {
display: flex;
align-items: center;
justify-content: center;
width: 5rem;
height: 5rem;
margin: 0 auto 1.5rem;
border-radius: 9999px;
background: #f3f4f6;
color: #9ca3af;
}
.blog-empty-icon svg {
width: 2.5rem;
height: 2.5rem;
}
.blog-load-more-wrap {
display: flex;
justify-content: center;
margin-top: 4rem;
}
.blog-load-more {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border: 2px solid #1A206D;
border-radius: 9999px;
background: #ffffff;
color: #1A206D;
font-weight: 800;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.blog-load-more:hover {
transform: translateY(-0.25rem);
background: #1A206D;
color: #ffffff;
box-shadow: 0 16px 30px rgba(26, 32, 109, 0.3);
}
.blog-load-more-icon {
width: 1.25rem;
height: 1.25rem;
}
.blog-load-more:hover .arrow-icon {
transform: translateY(0.25rem);
}
.animate-spin {
animation: spin 1s linear infinite;
}
@media (min-width: 768px) {
.blog-page-shell {
padding-top: 0.5rem;
}
.blog-page-header {
flex-direction: row;
align-items: center;
margin-bottom: 2rem;
padding-top: 2.5rem;
padding-bottom: 2.5rem;
}
.blog-mobile-filter {
display: none;
}
.blog-desktop-filter {
display: block;
}
.blog-featured-card {
display: block;
min-height: 31.25rem;
border-radius: 2.5rem;
}
.blog-featured-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.blog-featured-category-mobile,
.blog-featured-mobile-overlay {
display: none;
}
.blog-featured-category-desktop {
display: inline-block;
}
.blog-featured-desktop-overlay {
display: block;
inset: 0;
background: linear-gradient(to right, #1A206D 0%, rgba(26, 32, 109, 0.7) 55%, rgba(26, 32, 109, 0) 100%);
}
.blog-featured-content {
width: 66.666%;
padding: 3rem;
}
.blog-featured-excerpt {
display: -webkit-box;
}
.blog-featured-link {
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 9999px;
background: #EA2839;
box-shadow: 0 12px 24px rgba(234, 40, 57, 0.2);
}
.blog-featured-link:hover {
transform: translateY(-0.125rem);
background: #ffffff;
color: #EA2839;
}
.blog-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-card-media {
height: 16rem;
}
.blog-card-media-compact {
height: 12rem;
}
.blog-card-body {
padding: 2rem;
}
.blog-card-body-compact {
padding: 1.5rem;
}
.blog-card-excerpt {
margin-bottom: 1.5rem;
}
.blog-card-footer {
padding-top: 1.5rem;
}
}
@media (min-width: 1024px) {
.blog-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.blog-featured-content {
width: 50%;
padding: 4rem;
}
} .single-blog-hero {
position: relative;
z-index: 20;
width: 100vw;
margin-left: calc(50% - 50vw);
}
.single-blog-hero-media {
position: relative;
width: 100%;
height: 440px;
overflow: hidden;
background: #f1f5f9;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.single-blog-hero-img,
.single-blog-hero-placeholder,
.single-related-media img,
.single-related-placeholder,
.single-sidebar-related-img,
.single-sidebar-related-placeholder {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.single-blog-hero-placeholder,
.single-related-placeholder,
.single-sidebar-related-placeholder {
display: flex;
align-items: center;
justify-content: center;
}
.single-blog-hero-placeholder {
background: #e2e8f0;
color: #94a3b8;
}
.single-blog-hero-placeholder svg {
width: 4rem;
height: 4rem;
}
.single-blog-hero-inner,
.single-blog-shell {
max-width: 80rem;
margin: 0 auto;
}
.single-blog-hero-inner {
padding: 0 1rem;
}
.single-blog-title-card {
position: relative;
z-index: 20;
width: 95%;
max-width: 64rem;
margin: -4rem auto 1rem;
padding: 1rem;
border: 1px solid #f1f5f9;
border-radius: 1rem;
background: #ffffff;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.single-blog-title-card h1 {
margin: 0;
color: #0f172a;
font-size: clamp(1.5rem, 4vw, 3rem);
font-weight: 800;
letter-spacing: 0;
line-height: 1.15;
text-align: center;
}
.single-blog-date {
display: flex;
align-items: center;
justify-content: center;
gap: 0.375rem;
color: #334155;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.single-blog-date svg {
width: 1rem;
height: 1rem;
}
.single-blog-date-desktop {
display: none;
}
.single-blog-date-mobile {
margin-top: 0.75rem;
}
.single-blog-share {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.single-blog-share-desktop {
display: none;
margin-top: 1.5rem;
}
.single-share-button {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border: 1px solid #cbd5e1;
border-radius: 9999px;
background: #f1f5f9;
color: #475569;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.single-share-button svg {
width: 1rem;
height: 1rem;
}
.single-share-button:hover {
color: #ffffff;
}
.single-share-button-large {
width: 2.5rem;
height: 2.5rem;
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.single-share-button-large svg {
width: 1.25rem;
height: 1.25rem;
}
.single-share-button-large:hover {
transform: scale(1.1);
}
.share-twitter:hover { border-color: #1DA1F2; background: #1DA1F2; }
.share-facebook:hover { border-color: #1877F2; background: #1877F2; }
.share-whatsapp:hover { border-color: #25D366; background: #25D366; }
.share-copy:hover { border-color: #94a3b8; background: #cbd5e1; color: #334155; }
.share-copy-dark:hover { border-color: #1f2937; background: #1f2937; color: #ffffff; }
.single-blog-mobile-share-wrap {
width: 95%;
max-width: 64rem;
margin: 0.5rem auto 1rem;
}
.single-blog-mobile-share-card {
padding: 0.375rem 0.75rem;
border: 1px solid #cbd5e1;
border-radius: 1rem;
background: #ffffff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.single-blog-shell {
padding: 0 0 3rem;
}
.single-blog-layout {
display: grid;
grid-template-columns: 1fr;
gap: 3rem;
}
.single-blog-main {
min-width: 0;
}
.single-blog-content {
max-width: none;
margin-bottom: 3rem;
padding: 1.25rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 1.5rem;
background: rgba(255, 255, 255, 0.4);
box-shadow: 0 20px 32px rgba(15, 23, 42, 0.14);
overflow-wrap: break-word;
backdrop-filter: blur(12px);
}
.single-blog-ad {
width: 100%;
max-width: 100%;
margin: 0 auto 3rem;
overflow: hidden;
text-align: center;
}
.single-blog-ad > span,
.single-sidebar-ad span {
display: block;
margin-bottom: 0.5rem;
color: #cbd5e1;
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.single-blog-share-bar {
display: none;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 3rem;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 9999px;
background: rgba(255, 255, 255, 0.4);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
backdrop-filter: blur(12px);
}
.single-blog-share-label {
padding-left: 1rem;
color: #1A206D;
font-weight: 800;
}
.single-comments-card {
margin-bottom: 3rem;
padding: 1.25rem;
border-radius: 1.5rem;
}
.single-related-section {
margin-bottom: 3rem;
}
.single-section-title {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 1.5rem;
color: #1A206D;
font-size: 1.5rem;
font-weight: 800;
}
.single-section-title span {
display: block;
width: 0.375rem;
height: 2rem;
border-radius: 9999px;
background: #EA2839;
}
.single-related-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.single-related-card {
display: flex;
flex-direction: row;
align-items: stretch;
height: 100%;
overflow: hidden;
border: 1px solid #f1f5f9;
border-radius: 1.25rem;
background: #ffffff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
transition: box-shadow 0.3s ease;
}
.single-related-card:hover {
box-shadow: 0 25px 50px rgba(15, 23, 42, 0.16);
}
.single-related-media {
position: relative;
flex: 0 0 7rem;
align-self: stretch;
overflow: hidden;
}
.single-related-media img {
transition: transform 0.7s ease;
}
.single-related-card:hover .single-related-media img {
transform: scale(1.05);
}
.single-related-placeholder {
background: #f1f5f9;
color: #cbd5e1;
}
.single-related-placeholder svg {
width: 2.5rem;
height: 2.5rem;
}
.single-related-category {
display: none;
}
.single-related-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 1rem;
}
.single-related-date {
display: none;
}
.single-related-body h3 {
margin: 0 0 0.5rem;
color: #1e293b;
font-size: 1rem;
font-weight: 900;
letter-spacing: 0;
line-height: 1.15;
transition: color 0.2s ease;
}
.single-related-card:hover h3 {
color: #1A206D;
}
.single-related-body h3 a {
color: inherit;
text-decoration: none;
}
.single-related-body p {
display: none;
margin: 0 0 1rem;
color: #64748b;
font-size: 0.875rem;
font-weight: 500;
line-height: 1.6;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.single-related-footer {
margin-top: auto;
padding-top: 0.25rem;
}
.single-related-footer a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #1A206D;
font-size: 0.875rem;
font-weight: 800;
text-decoration: none;
transition: gap 0.2s ease;
}
.single-related-footer a:hover {
gap: 0.75rem;
}
.single-related-footer svg {
width: 1rem;
height: 1rem;
}
.single-empty-state {
grid-column: 1 / -1;
padding: 2rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.5);
color: #6b7280;
text-align: center;
}
.single-subscribe {
position: relative;
overflow: hidden;
margin-bottom: 3rem;
padding: 2rem;
border-radius: 2.5rem;
text-align: center;
}
.single-subscribe-bg {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 213, 0, 0.1), transparent, rgba(234, 40, 57, 0.05));
}
.single-subscribe-float {
position: absolute;
z-index: 10;
display: none;
width: 4rem;
height: 4rem;
padding: 0.375rem;
border-radius: 1rem;
background: #ffffff;
box-shadow: 0 20px 32px rgba(15, 23, 42, 0.16);
transition: transform 0.3s ease;
}
.single-subscribe-float img {
width: 100%;
height: 100%;
border-radius: 0.75rem;
object-fit: cover;
}
.single-subscribe-float-left {
top: 2rem;
left: 1rem;
transform: rotate(-12deg);
}
.single-subscribe-float-right {
right: 1rem;
bottom: 2rem;
transform: rotate(6deg);
}
.single-subscribe-float:hover {
transform: rotate(0);
}
.single-subscribe-inner {
position: relative;
z-index: 20;
max-width: 36rem;
margin: 0 auto;
}
.single-subscribe-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin-bottom: 1.5rem;
border-radius: 9999px;
background: #ffffff;
color: #EA2839;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12);
animation: home-bounce 1s infinite;
}
.single-subscribe-icon svg {
width: 2rem;
height: 2rem;
}
.single-subscribe h2 {
margin: 0 0 1rem;
color: #1A206D;
font-size: clamp(1.875rem, 4vw, 2.25rem);
font-weight: 900;
letter-spacing: 0;
line-height: 1.15;
}
.single-subscribe h2 span {
color: #EA2839;
}
.single-subscribe p {
margin: 0 0 2rem;
color: #4b5563;
font-size: 1.125rem;
line-height: 1.65;
}
.single-subscribe-form {
padding: 1rem;
border: 1px solid #ffffff;
border-radius: 1.5rem;
background: rgba(255, 255, 255, 0.6);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
backdrop-filter: blur(4px);
}
.single-blog-sidebar {
display: none;
}
.single-sidebar-sticky {
position: sticky;
top: 8rem;
height: fit-content;
}
.single-sidebar-sticky > * + * {
margin-top: 2rem;
}
.single-sidebar-card {
padding: 1.5rem;
border-radius: 1rem;
}
.single-sidebar-card h3 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 1.5rem;
color: #1A206D;
font-size: 1.25rem;
font-weight: 800;
}
.single-sidebar-card h3 svg {
width: 1.25rem;
height: 1.25rem;
color: #EA2839;
}
.single-sidebar-related-list > * + * {
margin-top: 1.5rem;
}
.single-sidebar-related {
display: block;
color: inherit;
text-decoration: none;
}
.single-sidebar-related-row {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.single-sidebar-related-media {
position: relative;
flex: 0 0 auto;
width: 5rem;
height: 5rem;
overflow: hidden;
border-radius: 0.75rem;
}
.single-sidebar-related-img {
transition: transform 0.3s ease;
}
.single-sidebar-related:hover .single-sidebar-related-img {
transform: scale(1.1);
}
.single-sidebar-related-placeholder {
background: #f3f4f6;
color: #d1d5db;
}
.single-sidebar-related-placeholder svg {
width: 2rem;
height: 2rem;
}
.single-sidebar-related h4 {
margin: 0 0 0.25rem;
color: #1f2937;
font-weight: 800;
line-height: 1.25;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
transition: color 0.2s ease;
}
.single-sidebar-related:hover h4 {
color: #1A206D;
}
.single-sidebar-related span,
.single-sidebar-empty {
color: #6b7280;
font-size: 0.75rem;
}
.single-sidebar-ad {
display: flex;
align-items: center;
justify-content: center;
min-height: 250px;
margin-top: 2rem;
padding: 1rem;
border-radius: 1rem;
overflow: hidden;
}
.single-sidebar-ad > div {
width: 100%;
text-align: center;
}
@media (min-width: 640px) {
.single-subscribe-float {
display: block;
}
}
@media (min-width: 768px) {
.single-blog-hero-media {
height: 560px;
}
.single-blog-hero-inner {
padding-right: 1.5rem;
padding-left: 1.5rem;
}
.single-blog-title-card {
width: 95%;
margin-top: -6rem;
margin-bottom: 2rem;
padding: 3rem 1.5rem 1.5rem;
border-radius: 1.5rem;
}
.single-blog-date-desktop {
position: absolute;
top: 0;
right: 0;
z-index: 30;
display: flex;
padding: 0.375rem 0.75rem;
border-bottom: 1px solid #e2e8f0;
border-left: 1px solid #e2e8f0;
border-bottom-left-radius: 0.75rem;
border-top-right-radius: 1.5rem;
background: #ffffff;
color: #475569;
font-size: 0.6875rem;
}
.single-blog-date-mobile {
display: none;
}
.single-blog-share-desktop {
display: flex;
}
.single-blog-mobile-share-wrap {
display: none;
}
.single-blog-shell {
padding-right: 1rem;
padding-left: 1rem;
}
.single-blog-content {
padding: 3rem;
border-radius: 1.5rem;
}
.single-blog-share-bar {
display: flex;
}
.single-comments-card {
padding: 2rem;
}
.single-related-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.single-related-card {
flex-direction: column;
border-radius: 1.5rem;
}
.single-related-media {
width: 100%;
height: 12rem;
flex-basis: auto;
}
.single-related-category {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 10;
display: inline-block;
padding: 0.25rem 0.625rem;
border-radius: 0.375rem;
background: rgba(255, 255, 255, 0.95);
color: #1e293b;
font-size: 0.5625rem;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(12px);
}
.single-related-body {
padding: 1.5rem;
}
.single-related-date {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
color: #94a3b8;
font-size: 0.625rem;
font-weight: 800;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.single-related-date svg {
width: 0.75rem;
height: 0.75rem;
}
.single-related-body h3 {
margin-bottom: 0.75rem;
font-size: 1.25rem;
}
.single-related-body p {
display: -webkit-box;
}
.single-subscribe {
padding: 3rem;
}
.single-subscribe-float {
width: 6rem;
height: 6rem;
}
.single-subscribe-float-left {
left: 2.5rem;
}
.single-subscribe-float-right {
right: 2.5rem;
}
}
@media (min-width: 1024px) {
.single-blog-hero-media {
height: 700px;
}
.single-blog-title-card {
width: 85%;
margin-top: -8rem;
padding: 3rem 2rem 2rem;
}
.single-blog-layout {
grid-template-columns: repeat(12, minmax(0, 1fr));
}
.single-blog-main {
grid-column: span 8 / span 8;
}
.single-blog-sidebar {
display: block;
grid-column: span 4 / span 4;
}
} .error-page,
.index-page {
max-width: 64rem;
margin: 0 auto;
padding: 0.25rem 1rem 3rem;
}
.error-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
}
.error-page-header {
position: relative;
margin-bottom: 3rem;
text-align: center;
}
.error-page-glow {
position: absolute;
top: 50%;
left: 50%;
z-index: -10;
width: min(31.25rem, 90vw);
height: min(31.25rem, 90vw);
border-radius: 9999px;
background: rgba(234, 40, 57, 0.1);
filter: blur(48px);
transform: translate(-50%, -50%);
}
.error-page h1 {
margin: 0 0 1rem;
font-size: clamp(6rem, 16vw, 8rem);
font-weight: 900;
letter-spacing: 0;
line-height: 0.95;
}
.error-page h2 {
margin: 0 0 1.5rem;
color: #1A206D;
font-size: clamp(1.875rem, 5vw, 2.25rem);
font-weight: 800;
letter-spacing: 0;
line-height: 1.15;
}
.error-page-header p {
max-width: 42rem;
margin: 0 auto;
color: #4b5563;
font-size: 1.25rem;
line-height: 1.65;
}
.error-links-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
width: 100%;
max-width: 48rem;
}
.error-link-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5rem;
border-radius: 1rem;
text-align: center;
text-decoration: none;
transition: transform 0.2s ease;
}
.error-link-card:hover {
transform: scale(1.05);
}
.error-link-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-bottom: 1rem;
border-radius: 9999px;
transition: background 0.2s ease, color 0.2s ease;
}
.error-link-icon svg {
width: 1.5rem;
height: 1.5rem;
}
.error-link-card h3 {
margin: 0 0 0.25rem;
color: #1A206D;
font-weight: 800;
}
.error-link-card p {
margin: 0;
color: #6b7280;
font-size: 0.875rem;
}
.error-link-card-blue .error-link-icon { background: rgba(26, 32, 109, 0.1); color: #1A206D; }
.error-link-card-blue:hover .error-link-icon { background: #1A206D; color: #ffffff; }
.error-link-card-red .error-link-icon { background: rgba(234, 40, 57, 0.1); color: #EA2839; }
.error-link-card-red:hover .error-link-icon { background: #EA2839; color: #ffffff; }
.error-link-card-yellow .error-link-icon { background: rgba(255, 213, 0, 0.18); color: #ca8a04; }
.error-link-card-yellow:hover .error-link-icon { background: #FFD500; color: #ffffff; }
.error-link-card-green .error-link-icon { background: rgba(0, 165, 81, 0.1); color: #00A551; }
.error-link-card-green:hover .error-link-icon { background: #00A551; color: #ffffff; }
.error-link-card-sky .error-link-icon { background: rgba(56, 189, 248, 0.1); color: #38bdf8; }
.error-link-card-sky:hover .error-link-icon { background: #38bdf8; color: #ffffff; }
.error-link-card-purple .error-link-icon { background: rgba(192, 132, 252, 0.1); color: #c084fc; }
.error-link-card-purple:hover .error-link-icon { background: #c084fc; color: #ffffff; }
.index-page {
padding-top: 3rem;
}
.index-posts {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
}
.index-post-card {
padding: 2rem;
border-radius: 1rem;
}
.index-post-card h2 {
margin: 0 0 1rem;
color: #1A206D;
font-size: 1.875rem;
font-weight: 800;
letter-spacing: 0;
}
.index-post-card h2 a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease;
}
.index-post-card h2 a:hover {
color: #EA2839;
}
.index-post-content {
max-width: none;
color: #374151;
}
.index-pagination {
margin-top: 2rem;
}
.comments-title-icon {
display: inline-block;
width: 1.5rem;
height: 1.5rem;
margin-right: 0.5rem;
color: #EA2839;
vertical-align: middle;
}
.comments-closed {
margin-top: 1rem;
color: #64748b;
font-weight: 800;
}
.comment-form-cookies-consent {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1rem;
}
.comment-form-cookies-consent label {
margin: 0;
color: #475569;
font-size: 0.875rem;
}
.blog-search {
position: relative;
z-index: 30;
width: 100%;
max-width: 42rem;
margin: -1rem auto 2rem;
}
.blog-search-inner {
position: relative;
}
.blog-search-glow {
position: absolute;
inset: 0;
border-radius: 9999px;
background: linear-gradient(to right, #EA2839, #FFD500, #00A551);
opacity: 0.2;
filter: blur(12px);
transition: opacity 0.5s ease;
}
.blog-search-inner:hover .blog-search-glow {
opacity: 0.4;
}
.blog-search-box {
position: relative;
display: flex;
align-items: center;
padding: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 9999px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(24px);
transition: box-shadow 0.2s ease;
}
.blog-search-box:focus-within {
box-shadow: 0 0 0 2px rgba(26, 32, 109, 0.5), 0 12px 24px rgba(15, 23, 42, 0.12);
}
.blog-search-icon {
width: 1.25rem;
height: 1.25rem;
margin-left: 1rem;
color: rgba(26, 32, 109, 0.6);
}
.blog-search-input {
width: 100%;
padding: 0.5rem 1rem;
border: 0;
background: transparent;
color: #334155;
font-weight: 500;
outline: none;
}
.blog-search-input::placeholder {
color: #94a3b8;
}
@media (min-width: 768px) {
.error-page,
.index-page {
padding-top: 0.5rem;
}
.error-links-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.blog-search {
margin-top: -1.5rem;
}
}
@media (min-width: 1024px) {
.error-links-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
} .content-hero {
position: relative;
width: 100vw;
margin-left: calc(50% - 50vw);
min-height: 500px;
height: 65vh;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 3rem;
z-index: 20;
}
.content-hero-media,
.content-hero-overlay {
position: absolute;
inset: 0;
}
.content-hero-media {
z-index: 0;
overflow: hidden;
}
.content-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.content-hero-overlay {
background: linear-gradient(to bottom, rgba(15, 23, 42, 0.6), rgba(26, 32, 109, 0.4));
}
.content-hero-inner {
position: relative;
z-index: 10;
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.content-hero-copy {
max-width: 42rem;
text-align: left;
}
.content-hero-title {
margin: 0 0 1rem;
color: #fff;
font-size: clamp(2.4rem, 5vw, 4rem);
line-height: 1.02;
font-weight: 900;
letter-spacing: 0;
text-shadow: 0 8px 22px rgba(15, 23, 42, 0.3);
}
.content-hero-title span {
color: var(--mauritius-yellow);
}
.content-hero-subtitle {
max-width: 42rem;
margin: 0 0 2rem;
color: rgba(255, 255, 255, 0.9);
font-size: clamp(1.125rem, 2vw, 1.5rem);
line-height: 1.55;
font-weight: 500;
text-shadow: 0 6px 18px rgba(15, 23, 42, 0.24);
}
.content-hero-share {
display: flex;
align-items: center;
gap: 0.75rem;
}
.share-icon-row,
.contact-social-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.share-icon-btn,
.contact-social-btn {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.share-icon-btn {
width: 2.5rem;
height: 2.5rem;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(8px);
}
.share-icon-btn svg {
width: 1.25rem;
height: 1.25rem;
}
.share-icon-btn:hover {
transform: scale(1.1);
}
.share-icon-facebook:hover {
background: #1877f2;
border-color: #1877f2;
}
.share-icon-twitter:hover {
background: #1da1f2;
border-color: #1da1f2;
}
.share-icon-whatsapp:hover {
background: #25d366;
border-color: #25d366;
}
.share-icon-copy:hover {
color: #0f172a;
background: #fff;
}
.content-page-shell {
width: min(100% - 2rem, 80rem);
margin: 0 auto;
padding-bottom: 3rem;
}
.section-heading-stack {
display: flex;
flex-direction: column;
margin-bottom: 2.5rem;
}
.section-eyebrow-wrap {
margin-bottom: 1rem;
}
.section-eyebrow {
color: #64748b;
font-size: 0.875rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.2em;
}
.section-display-title {
margin: 0;
color: #0f172a;
font-size: clamp(2.35rem, 4.6vw, 4rem);
line-height: 1.05;
font-weight: 900;
letter-spacing: 0;
}
.about-story-card {
position: relative;
overflow: hidden;
margin-bottom: 5rem;
padding: clamp(1.5rem, 4vw, 3rem);
border-radius: 3rem;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}
.about-story-shine {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 45%);
pointer-events: none;
}
.about-story-content {
position: relative;
z-index: 1;
}
.about-story-layout {
display: flex;
align-items: flex-start;
gap: 2rem;
}
.about-story-main {
flex: 1 1 auto;
}
.about-story-text {
max-width: 72rem;
color: #475569;
font-size: 1.125rem;
line-height: 1.72;
font-weight: 500;
}
.about-story-text > * + * {
margin-top: 1.5rem;
}
.about-story-text h3 {
margin-top: 1.5rem;
color: var(--mauritius-blue);
font-size: 1.5rem;
line-height: 1.25;
font-weight: 800;
}
.about-explore-section {
margin-bottom: clamp(4rem, 8vw, 6rem);
}
.about-category-grid,
.contact-card-grid,
.search-card-grid {
display: grid;
gap: 1.5rem;
}
.about-category-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.about-category-card {
position: relative;
display: block;
height: 24rem;
overflow: hidden;
border-radius: 2rem;
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16);
transition: transform 0.25s ease;
}
.about-category-card:hover {
transform: scale(1.02);
}
.about-category-img,
.about-category-overlay {
position: absolute;
inset: 0;
}
.about-category-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.about-category-card:hover .about-category-img {
transform: scale(1.1);
}
.about-category-overlay {
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.4), transparent);
}
.about-category-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
height: 100%;
flex-direction: column;
justify-content: flex-end;
padding: 2rem;
}
.category-accent {
width: 2rem;
height: 0.375rem;
margin-bottom: 0.75rem;
border-radius: 999px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.category-accent-red { background: var(--mauritius-red); }
.category-accent-blue { background: var(--mauritius-blue); }
.category-accent-yellow { background: var(--mauritius-yellow); }
.category-accent-green { background: var(--mauritius-green); }
.about-category-content h3 {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 0.5rem;
color: #fff;
font-size: clamp(1.35rem, 2vw, 1.875rem);
line-height: 1.15;
font-weight: 900;
letter-spacing: 0;
text-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
.about-category-content h3 svg {
display: none;
width: 1.25rem;
height: 1.25rem;
color: rgba(255, 255, 255, 0.7);
}
.about-category-content p {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: #e2e8f0;
font-size: 0.875rem;
line-height: 1.55;
font-weight: 500;
opacity: 0.9;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.about-category-card:hover .about-category-content p {
opacity: 1;
}
.newsletter-panel {
position: relative;
overflow: hidden;
margin-bottom: 3rem;
border: 1px solid #e2e8f0;
border-radius: 2.5rem;
background: #f8fafc;
box-shadow: 0 24px 65px rgba(15, 23, 42, 0.15);
}
.newsletter-glow {
position: absolute;
width: 22rem;
height: 22rem;
border-radius: 999px;
filter: blur(48px);
}
.newsletter-glow-red {
top: 0;
right: 0;
transform: translate(33%, -33%);
background: rgba(234, 40, 57, 0.05);
}
.newsletter-glow-yellow {
bottom: 0;
left: 0;
transform: translate(-33%, 33%);
background: rgba(255, 205, 0, 0.1);
}
.newsletter-inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: 3rem;
padding: clamp(2rem, 4vw, 3rem);
}
.newsletter-copy {
text-align: left;
}
.newsletter-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
padding: 0.25rem 0.75rem;
border: 1px solid rgba(234, 40, 57, 0.2);
border-radius: 999px;
background: #fff;
color: var(--mauritius-red);
font-size: 0.75rem;
font-weight: 800;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
}
.newsletter-badge svg {
width: 0.75rem;
height: 0.75rem;
}
.newsletter-copy h2 {
margin: 0 0 1rem;
color: var(--mauritius-blue);
font-size: clamp(1.875rem, 3vw, 2.25rem);
line-height: 1.15;
font-weight: 800;
}
.newsletter-copy h2 span {
background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-yellow), var(--mauritius-green));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.newsletter-copy p {
max-width: 28rem;
margin: 0;
color: #475569;
font-size: 1.125rem;
line-height: 1.6;
font-weight: 500;
}
.newsletter-form-side {
width: 100%;
}
.newsletter-form-frame {
padding: 3px;
border-radius: 20px;
background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-blue), var(--mauritius-yellow), var(--mauritius-green));
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.16);
}
.newsletter-form-container {
width: 100%;
height: 100%;
padding: clamp(1.5rem, 3vw, 2rem);
border-radius: 17px;
background: #fff;
}
.contact-page-inner {
width: 100%;
}
.contact-form-section,
.contact-connect-section {
margin-bottom: 6rem;
}
.contact-form-card {
position: relative;
padding: clamp(1.5rem, 3vw, 2.5rem);
border-radius: 2.5rem;
}
.contact-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 2rem;
}
.contact-info-card {
padding: 2rem;
border: 1px solid #f1f5f9;
border-radius: 2rem;
background: #fff;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.contact-info-card:hover {
transform: translateY(-0.25rem);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}
.contact-info-icon {
display: flex;
align-items: center;
justify-content: center;
width: 3.5rem;
height: 3.5rem;
margin-bottom: 1.5rem;
border-radius: 1rem;
transition: transform 0.25s ease;
}
.contact-info-card:hover .contact-info-icon {
transform: scale(1.1);
}
.contact-info-icon svg {
width: 1.75rem;
height: 1.75rem;
}
.contact-info-icon-red {
color: var(--mauritius-red);
background: rgba(234, 40, 57, 0.1);
}
.contact-info-icon-blue {
color: var(--mauritius-blue);
background: rgba(26, 32, 109, 0.1);
}
.contact-info-card h3 {
margin: 0 0 0.5rem;
color: #0f172a;
font-size: 1.25rem;
font-weight: 800;
}
.contact-info-card p {
margin: 0 0 1.5rem;
color: #64748b;
}
.contact-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--mauritius-blue);
font-size: 1.125rem;
font-weight: 800;
}
.contact-link:hover {
color: var(--mauritius-red);
}
.contact-link svg {
width: 1rem;
height: 1rem;
}
.contact-social-row {
gap: 1rem;
}
.contact-social-btn {
width: 3rem;
height: 3rem;
color: var(--mauritius-blue);
border: 1px solid #f1f5f9;
background: #f8fafc;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}
.contact-social-btn svg {
width: 1.5rem;
height: 1.5rem;
}
.contact-social-btn:hover {
color: #fff;
transform: scale(1.1);
}
.contact-social-facebook:hover {
background: #1877f2;
border-color: #1877f2;
}
.contact-social-instagram:hover {
background: #e1306c;
border-color: #e1306c;
}
.contact-faq-section {
margin-bottom: 3rem;
}
.contact-faq-list {
display: grid;
gap: 1rem;
}
.contact-faq-item {
padding: clamp(1.25rem, 2vw, 1.5rem);
border: 1px solid #e2e8f0;
border-radius: 1rem;
background: #fff;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.contact-faq-item summary {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
list-style: none;
cursor: pointer;
}
.contact-faq-item summary::-webkit-details-marker {
display: none;
}
.contact-faq-item h4 {
margin: 0;
color: var(--mauritius-blue);
font-size: 1.125rem;
line-height: 1.35;
font-weight: 800;
text-align: left;
}
.contact-faq-item h4 span {
color: var(--mauritius-red);
}
.contact-faq-item .faq-arrow {
width: 1.25rem;
height: 1.25rem;
flex: 0 0 auto;
margin-top: 0.25rem;
color: #64748b;
transition: transform 0.2s ease;
}
.contact-faq-item p {
margin: 1rem 0 0;
padding-left: 1.5rem;
border-left: 2px solid #e2e8f0;
color: #475569;
text-align: left;
}
.contact-faq-item p span {
color: var(--mauritius-green);
font-weight: 800;
}
.account-page {
width: min(100% - 2rem, 28rem);
margin: 0 auto;
padding: 8rem 0 6rem;
}
.account-page h1 {
margin: 0 0 0.25rem;
color: #0f172a;
font-size: 1.875rem;
line-height: 1.2;
font-weight: 900;
letter-spacing: 0;
}
.account-email {
margin: 0 0 2.5rem;
color: #64748b;
font-size: 0.875rem;
}
.account-alert {
margin-bottom: 1.5rem;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
font-size: 0.875rem;
}
.account-alert-success {
color: #166534;
border: 1px solid #bbf7d0;
background: #f0fdf4;
}
.account-alert-error {
color: #991b1b;
border: 1px solid #fecaca;
background: #fef2f2;
}
.account-alert p {
margin: 0;
}
.account-alert p + p {
margin-top: 0.4rem;
}
.account-form {
display: grid;
gap: 1.25rem;
}
.account-field-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.account-form label {
display: block;
margin-bottom: 0.375rem;
color: #334155;
font-size: 0.875rem;
font-weight: 700;
}
.account-form input {
width: 100%;
padding: 0.75rem 1rem;
color: #1e293b;
font-size: 0.875rem;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
background: #fff;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.account-form input::placeholder {
color: #94a3b8;
}
.account-form input:focus {
border-color: var(--mauritius-blue);
box-shadow: 0 0 0 4px rgba(26, 32, 109, 0.08);
}
.account-submit {
width: 100%;
padding: 0.75rem 1.5rem;
color: #fff;
font-size: 0.875rem;
font-weight: 800;
border: 0;
border-radius: 0.75rem;
background: var(--mauritius-blue);
cursor: pointer;
transition: transform 0.2s ease, opacity 0.2s ease;
}
.account-submit:hover {
opacity: 0.9;
}
.account-submit:active {
transform: scale(0.98);
}
.account-actions {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 2.5rem;
padding-top: 1.5rem;
border-top: 1px solid #f1f5f9;
font-size: 0.875rem;
}
.account-actions a {
color: #64748b;
font-weight: 600;
}
.account-actions a:hover {
color: var(--mauritius-blue);
}
.account-actions .account-logout:hover {
color: var(--mauritius-red);
}
.search-page {
width: min(100% - 2rem, 80rem);
min-height: 60vh;
margin: 0 auto;
padding: 0.5rem 0 3rem;
}
.search-page-header {
margin-bottom: 3rem;
text-align: center;
}
.search-page-header h1 {
margin: 0 0 1rem;
color: var(--mauritius-blue);
font-size: clamp(1.875rem, 4vw, 3rem);
line-height: 1.15;
font-weight: 800;
}
.search-page-header p {
margin: 0;
color: #4b5563;
font-size: 1.25rem;
}
.search-page-header p span {
color: var(--mauritius-red);
font-weight: 800;
}
.search-results-container {
display: grid;
gap: 3rem;
}
.search-loading {
display: flex;
min-height: 14rem;
flex-direction: column;
align-items: center;
justify-content: center;
color: #64748b;
font-weight: 600;
opacity: 0.55;
}
.search-loading svg {
width: 3rem;
height: 3rem;
margin-bottom: 1rem;
color: var(--mauritius-blue);
animation: spin 1s linear infinite;
}
.search-empty {
padding: 5rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 1.5rem;
background: rgba(255, 255, 255, 0.5);
text-align: center;
}
.search-empty-icon {
display: flex;
width: 5rem;
height: 5rem;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
border-radius: 999px;
background: #f3f4f6;
color: #9ca3af;
}
.search-empty-icon svg {
width: 2.5rem;
height: 2.5rem;
}
.search-empty h2 {
margin: 0 0 0.5rem;
color: #1f2937;
font-size: 1.5rem;
font-weight: 800;
}
.search-empty p {
margin: 0 0 2rem;
color: #6b7280;
}
.search-home-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
color: #fff;
border-radius: 0.75rem;
background: var(--mauritius-blue);
font-weight: 800;
}
.search-home-link:hover {
background: var(--mauritius-red);
}
.search-panel-empty {
padding: 3rem 1rem;
color: #64748b;
text-align: center;
}
.search-card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.search-result-card {
display: flex;
height: 100%;
flex-direction: column;
overflow: hidden;
border-radius: 1rem;
transition: box-shadow 0.25s ease;
}
.search-result-card:hover {
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}
.search-result-media {
position: relative;
height: 11rem;
overflow: hidden;
background: #f1f5f9;
}
.search-result-media img,
.search-result-placeholder {
width: 100%;
height: 100%;
}
.search-result-media img {
object-fit: cover;
transition: transform 0.5s ease;
}
.search-result-card:hover .search-result-media img {
transform: scale(1.1);
}
.search-result-placeholder {
display: flex;
align-items: center;
justify-content: center;
color: rgba(26, 32, 109, 0.2);
background: rgba(26, 32, 109, 0.05);
}
.search-result-placeholder svg {
width: 2rem;
height: 2rem;
}
.search-result-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 1.25rem;
}
.search-result-date {
margin-bottom: 0.5rem;
color: #6b7280;
font-size: 0.75rem;
}
.search-result-body h3,
.search-vocab-card h3,
.search-lesson-card h3 {
margin: 0;
color: var(--mauritius-blue);
font-weight: 800;
transition: color 0.2s ease;
}
.search-result-body h3 {
display: -webkit-box;
margin-bottom: 0.75rem;
overflow: hidden;
font-size: 1.125rem;
line-height: 1.35;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.search-result-card:hover h3,
.search-vocab-card:hover h3,
.search-lesson-card:hover h3 {
color: var(--mauritius-red);
}
.search-result-cta,
.search-lesson-cta {
display: inline-flex;
align-items: center;
margin-top: auto;
color: var(--mauritius-red);
font-size: 0.875rem;
font-weight: 800;
}
.search-result-cta svg,
.search-lesson-cta svg {
width: 1rem;
height: 1rem;
margin-left: 0.25rem;
transition: transform 0.2s ease;
}
.search-result-card:hover .search-result-cta svg,
.search-lesson-card:hover .search-lesson-cta svg {
transform: translateX(0.25rem);
}
.search-vocab-card {
display: block;
padding: 1.25rem;
border-radius: 1rem;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.search-vocab-card:hover {
transform: translateY(-0.25rem);
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}
.search-vocab-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.5rem;
}
.search-vocab-card h3 {
font-size: 1.25rem;
}
.search-vocab-head span {
display: flex;
align-items: center;
justify-content: center;
padding: 0.5rem;
color: var(--mauritius-blue);
border-radius: 999px;
background: rgba(26, 32, 109, 0.05);
}
.search-vocab-head svg {
width: 1rem;
height: 1rem;
}
.search-vocab-card p,
.search-lesson-excerpt {
display: -webkit-box;
overflow: hidden;
color: #4b5563;
font-size: 0.875rem;
line-height: 1.5;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.search-vocab-card p {
margin: 0;
font-style: italic;
}
.search-lesson-card {
display: block;
height: 100%;
}
.search-lesson-inner {
display: flex;
height: 100%;
flex-direction: column;
overflow: hidden;
padding: 1.25rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
backdrop-filter: blur(14px);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.search-lesson-card:hover .search-lesson-inner {
transform: translateY(-0.25rem);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}
.search-lesson-card h3 {
display: -webkit-box;
margin-bottom: 0.5rem;
overflow: hidden;
font-size: 1.125rem;
line-height: 1.35;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.search-lesson-excerpt {
margin-bottom: 1rem;
}
.search-lesson-cta {
padding-top: 0.75rem;
border-top: 1px solid #f3f4f6;
color: var(--mauritius-blue);
}
.search-tabs-wrap {
padding: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 1.5rem;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
backdrop-filter: blur(14px);
}
.search-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.search-tab-btn {
padding: 0.65rem 1.25rem;
color: #475569;
border: 0;
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.7);
font-size: 0.875rem;
font-weight: 800;
cursor: pointer;
transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.search-tab-btn:hover {
color: var(--mauritius-blue);
background: #fff;
}
.search-tab-btn.is-active {
color: #fff;
background: var(--mauritius-blue);
box-shadow: 0 8px 20px rgba(26, 32, 109, 0.18);
}
.search-tab-btn span {
margin-left: 0.25rem;
opacity: 0.8;
}
.search-tab-panels {
margin-top: 2rem;
}
.is-hidden {
display: none !important;
} .legal-page {
width: min(100% - 2rem, 64rem);
margin: 0 auto;
padding: 3rem 0;
}
.legal-header {
position: relative;
margin-bottom: 4rem;
text-align: center;
}
.legal-header-glow {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: clamp(18rem, 42vw, 31rem);
height: clamp(18rem, 42vw, 31rem);
border-radius: 999px;
filter: blur(48px);
transform: translate(-50%, -50%);
}
.legal-header-glow-blue {
background: rgba(26, 32, 109, 0.1);
}
.legal-header-glow-red {
background: rgba(234, 40, 57, 0.1);
}
.legal-header h1 {
margin: 0 0 1rem;
font-size: clamp(2.25rem, 5vw, 4rem);
line-height: 1.1;
font-weight: 800;
}
.legal-header p {
margin: 0;
color: #6b7280;
font-weight: 600;
}
.legal-card {
position: relative;
overflow: hidden;
padding: clamp(2rem, 4vw, 3rem);
border-radius: 1.5rem;
}
.legal-stripe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.25rem;
}
.legal-stripe-privacy {
background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-blue), var(--mauritius-yellow));
}
.legal-stripe-terms {
background: linear-gradient(90deg, var(--mauritius-blue), var(--mauritius-red), var(--mauritius-yellow));
}
.legal-content {
max-width: none;
color: #4b5563;
font-size: 1.05rem;
line-height: 1.72;
}
.legal-lead {
margin: 0 0 2rem;
color: var(--mauritius-blue);
font-size: 1.25rem;
line-height: 1.6;
font-weight: 600;
}
.legal-section {
margin-bottom: 3rem;
}
.legal-section-last {
margin-bottom: 2rem;
}
.legal-section-title {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.legal-section-title h2 {
margin: 0;
color: var(--mauritius-blue);
font-size: 1.5rem;
line-height: 1.25;
font-weight: 800;
}
.legal-section-icon {
display: flex;
width: 2.5rem;
height: 2.5rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border-radius: 0.75rem;
}
.legal-section-icon svg {
width: 1.25rem;
height: 1.25rem;
}
.legal-icon-blue {
color: var(--mauritius-blue);
background: rgba(26, 32, 109, 0.1);
}
.legal-icon-red {
color: var(--mauritius-red);
background: rgba(234, 40, 57, 0.1);
}
.legal-icon-yellow {
color: #ca8a04;
background: rgba(255, 205, 0, 0.14);
}
.legal-icon-green {
color: var(--mauritius-green);
background: rgba(0, 165, 81, 0.1);
}
.legal-icon-gray {
color: #4b5563;
background: #f3f4f6;
}
.legal-section-body {
padding-left: 3.5rem;
}
.legal-section-body p {
margin: 0 0 1rem;
}
.legal-section-body p:last-child {
margin-bottom: 0;
}
.legal-stack,
.legal-stack-lg {
display: grid;
}
.legal-stack {
gap: 1rem;
}
.legal-stack-lg {
gap: 2rem;
}
.legal-info-card {
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.4);
}
.legal-info-card h3,
.legal-info-card h4 {
color: var(--mauritius-blue);
font-weight: 800;
}
.legal-info-card h3 {
margin: 0 0 0.75rem;
font-size: 1.05rem;
}
.legal-info-card h4 {
margin: 0 0 0.5rem;
color: #1f2937;
}
.legal-subtitle {
display: flex;
align-items: center;
gap: 0.5rem;
}
.legal-inline-icon {
width: 1rem;
height: 1rem;
}
.legal-inline-red {
color: var(--mauritius-red);
}
.legal-inline-yellow {
color: var(--mauritius-yellow);
}
.legal-two-grid,
.legal-check-grid,
.legal-chip-grid {
display: grid;
gap: 1rem;
}
.legal-two-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.legal-check-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.5rem;
margin: 1rem 0;
padding: 0;
list-style: none;
}
.legal-check-grid li,
.legal-check-chips li {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
}
.legal-check-grid svg,
.legal-check-chips svg {
width: 0.875rem;
height: 0.875rem;
flex: 0 0 auto;
color: #22c55e;
}
.legal-chip-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
margin: 1rem 0;
padding: 0;
list-style: none;
}
.legal-chip-grid li {
padding: 0.75rem;
color: #374151;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.5);
font-size: 0.875rem;
font-weight: 600;
}
.legal-check-chips li {
font-weight: 500;
}
.legal-disc-list {
margin: 0.5rem 0 0;
padding-left: 1.25rem;
list-style: disc;
}
.legal-disc-list li + li {
margin-top: 0.25rem;
}
.legal-dot-list,
.legal-cross-list {
display: grid;
gap: 0.5rem;
margin: 0;
padding: 0;
list-style: none;
font-size: 0.875rem;
}
.legal-dot-list li,
.legal-cross-list li {
position: relative;
padding-left: 1.25rem;
}
.legal-dot-list li::before {
content: "";
position: absolute;
top: 0.65em;
left: 0;
width: 0.375rem;
height: 0.375rem;
border-radius: 999px;
background: var(--mauritius-blue);
}
.legal-cross-list {
margin-top: 1rem;
}
.legal-cross-list li::before {
content: "x";
position: absolute;
left: 0;
color: var(--mauritius-red);
font-weight: 900;
}
.legal-small {
font-size: 0.875rem;
line-height: 1.6;
}
.legal-note {
margin-top: 0.5rem;
color: #6b7280;
font-size: 0.75rem;
font-style: italic;
}
.legal-strong {
color: #1f2937;
font-weight: 800;
}
.legal-callout-blue {
margin-top: 1rem;
padding: 0.75rem;
color: var(--mauritius-blue);
border-radius: 0.5rem;
background: rgba(26, 32, 109, 0.05);
font-size: 0.875rem;
font-weight: 600;
text-align: center;
}
.legal-muted-box {
padding: 1rem;
color: #4b5563;
border-radius: 0.75rem;
background: #f9fafb;
font-size: 0.875rem;
}
.legal-full {
grid-column: 1 / -1;
}
.legal-top-gap {
margin-top: 1rem !important;
}
.legal-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.5rem;
padding: 0.75rem 1.5rem;
color: #fff;
border-radius: 0.75rem;
background: var(--mauritius-blue);
font-weight: 800;
box-shadow: 0 12px 24px rgba(26, 32, 109, 0.2);
}
.legal-button:hover {
color: #fff;
background: var(--mauritius-red);
}
.legal-button svg {
width: 1rem;
height: 1rem;
}
.creole-inline-ad {
clear: both;
width: 100%;
max-width: 100%;
margin: 2.5rem auto;
overflow: hidden;
text-align: center;
}
.creole-ad-label {
display: block;
margin-bottom: 0.5rem;
color: #cbd5e1;
font-size: 0.625rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.18em;
}
.blog-search-loading {
display: none;
padding-right: 1rem;
}
.blog-search-loading svg {
width: 1.25rem;
height: 1.25rem;
color: var(--mauritius-blue);
animation: spin 1s linear infinite;
}
.imported-lesson-aims,
.imported-grammar-card {
margin-bottom: 2rem;
padding: 1.5rem;
border-radius: 1rem;
}
.imported-lesson-aims {
background: rgba(26, 32, 109, 0.05);
}
.imported-lesson-aims h3,
.imported-grammar-card h3,
.imported-cultural-tip h2 {
margin: 0 0 1rem;
color: var(--mauritius-blue);
font-weight: 800;
}
.imported-lesson-aims h3 {
margin-bottom: 0.5rem;
}
.imported-lesson-list {
margin: 0;
padding-left: 1.25rem;
color: #374151;
list-style: disc;
}
.imported-lesson-list li + li {
margin-top: 0.25rem;
}
.imported-dialogue-list {
display: grid;
gap: 1rem;
margin-bottom: 3rem;
}
.imported-dialogue-card {
padding: 1rem;
border-radius: 0.75rem;
transition: background 0.2s ease;
}
.imported-dialogue-card:hover {
background: rgba(255, 255, 255, 0.5);
}
.imported-dialogue-row {
display: flex;
align-items: baseline;
gap: 0.5rem;
}
.imported-dialogue-speaker {
min-width: 6.25rem;
color: var(--mauritius-red);
font-weight: 800;
}
.imported-dialogue-copy {
flex: 1 1 auto;
}
.imported-dialogue-creole {
margin: 0 0 0.25rem;
color: #111827;
font-size: 1.125rem;
font-weight: 600;
}
.imported-dialogue-english {
margin: 0;
color: #6b7280;
font-size: 0.875rem;
font-style: italic;
}
.imported-prose {
max-width: none;
color: #374151;
}
.imported-example-box {
margin-top: 1rem;
padding: 1rem;
border-radius: 0.75rem;
background: #f9fafb;
}
.imported-example-box h4 {
margin: 0 0 0.75rem;
color: #6b7280;
font-size: 0.875rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.imported-example-list {
display: grid;
gap: 0.75rem;
}
.imported-example-row {
display: flex;
align-items: center;
gap: 1rem;
}
.imported-example-creole {
color: var(--mauritius-blue);
font-weight: 600;
}
.imported-example-arrow {
color: #d1d5db;
}
.imported-example-english {
color: #4b5563;
font-style: italic;
}
.imported-cultural-tip {
margin-bottom: 3rem;
padding: 1.5rem;
border-left: 4px solid var(--mauritius-yellow);
border-radius: 1rem;
background: rgba(255, 205, 0, 0.05);
} .learning-hero {
position: relative;
width: 100vw;
min-height: 500px;
height: 65vh;
margin-left: calc(50% - 50vw);
margin-bottom: 4rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
}
.learning-hero-media,
.learning-hero-overlay {
position: absolute;
inset: 0;
}
.learning-hero-media {
z-index: 0;
overflow: hidden;
}
.learning-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.learning-hero-overlay {
background: linear-gradient(90deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.4), transparent);
}
.learning-hero-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 0 1.5rem;
}
.learning-hero-copy {
max-width: 42rem;
text-align: left;
}
.learning-hero-copy h1 {
margin: 0 0 2rem;
color: #fff;
font-size: clamp(3rem, 6vw, 4.5rem);
line-height: 1.18;
font-weight: 900;
text-shadow: 0 8px 22px rgba(15, 23, 42, 0.3);
}
.learning-hero-cta {
display: inline-block;
padding: 1rem 2rem;
color: #0f172a;
border-radius: 999px;
background: #ffd500;
font-size: 1.125rem;
font-weight: 800;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
transition: transform 0.2s ease, background 0.2s ease;
}
.learning-hero-cta:hover {
color: #0f172a;
background: #ffc000;
transform: scale(1.05);
}
.learning-shell {
width: min(100% - 2rem, 72rem);
margin: 0 auto;
padding-bottom: 5rem;
}
.learning-intro-card {
position: relative;
z-index: 30;
width: 100%;
margin-bottom: 2rem;
padding: clamp(1.5rem, 3vw, 2.5rem);
color: #334155;
border: 1px solid #f1f5f9;
border-radius: 2rem;
background: #fff;
box-shadow: 0 18px 40px rgba(148, 163, 184, 0.18);
text-align: center;
}
.learning-intro-card p {
margin: 0;
font-size: clamp(1.125rem, 2vw, 1.25rem);
line-height: 1.65;
font-weight: 600;
}
.learning-nav-grid,
.learning-benefit-grid,
.learning-faq-grid,
.learning-explore-grid {
display: grid;
gap: 1.5rem;
}
.learning-nav-grid {
position: relative;
z-index: 30;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-bottom: 6rem;
}
.learning-nav-card {
display: flex;
min-height: 100%;
flex-direction: column;
align-items: center;
gap: 0;
padding: 2rem;
color: inherit;
border: 1px solid #f1f5f9;
border-radius: 2rem;
background: #fff;
box-shadow: 0 18px 40px rgba(148, 163, 184, 0.18);
text-align: center;
transition: transform 0.25s ease;
}
.learning-nav-card:hover {
transform: translateY(-0.5rem);
}
.learning-card-icon,
.learning-benefit-icon {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border: 1px solid #bbf7d0;
border-radius: 999px;
background: #dcfce7;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.learning-card-icon {
width: 5rem;
height: 5rem;
margin-bottom: 1.5rem;
padding: 1rem;
}
.learning-card-icon img,
.learning-benefit-icon img {
width: 100%;
height: 100%;
object-fit: contain;
filter: drop-shadow(0 2px 3px rgba(15, 23, 42, 0.1));
transition: transform 0.25s ease;
}
.learning-nav-card:hover .learning-card-icon,
.learning-benefit-card:hover .learning-benefit-icon {
border-color: #86efac;
background: #bbf7d0;
box-shadow: 0 10px 20px rgba(15, 23, 42, 0.1);
}
.learning-nav-card:hover img,
.learning-benefit-card:hover img {
transform: scale(1.1);
}
.learning-card-copy {
display: flex;
width: 100%;
flex: 1 1 auto;
flex-direction: column;
align-items: center;
}
.learning-card-copy h3,
.learning-benefit-card h3 {
margin: 0 0 0.5rem;
color: #1e293b;
font-size: 1.25rem;
line-height: 1.3;
font-weight: 800;
}
.learning-nav-card:hover h3 {
color: var(--mauritius-blue);
}
.learning-card-copy p,
.learning-benefit-card p {
margin: 0;
color: #475569;
font-size: 0.875rem;
line-height: 1.55;
}
.learning-card-copy p {
margin-bottom: 1.5rem;
}
.learning-card-copy span {
display: inline-flex;
align-items: center;
margin-top: auto;
color: var(--mauritius-blue);
font-size: 0.875rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.learning-card-copy span svg {
width: 1rem;
height: 1rem;
margin-left: 0.25rem;
transition: transform 0.2s ease;
}
.learning-nav-card:hover .learning-card-copy span svg {
transform: translateX(0.25rem);
}
.learning-card-mobile-arrow {
display: none;
}
.learning-section {
margin-bottom: 6rem;
}
.learning-section-last {
margin-bottom: 5rem;
}
.learning-section h2 {
margin: 0 0 2.5rem;
color: #1e293b;
font-size: 1.875rem;
line-height: 1.25;
font-weight: 800;
text-align: center;
}
.learning-benefit-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.5rem;
}
.learning-benefit-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.learning-benefit-icon {
width: 6rem;
height: 6rem;
margin-bottom: 1.5rem;
padding: 1.25rem;
}
.learning-faq-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.learning-faq-item {
border: 1px solid #f1f5f9;
border-radius: 0.75rem;
background: #fff;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}
.learning-faq-item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem;
color: #1e293b;
font-weight: 800;
cursor: pointer;
list-style: none;
transition: color 0.2s ease;
}
.learning-faq-item summary::-webkit-details-marker {
display: none;
}
.learning-faq-item summary:hover,
.learning-faq-item[open] summary {
color: var(--mauritius-blue);
}
.learning-faq-item summary span {
color: #94a3b8;
transition: transform 0.25s ease, color 0.25s ease;
}
.learning-faq-item summary svg {
width: 1.25rem;
height: 1.25rem;
}
.learning-faq-item[open] summary span {
color: var(--mauritius-blue);
transform: rotate(180deg);
}
.learning-faq-item > div {
padding: 0 1.25rem 1.25rem;
color: #475569;
font-size: 0.875rem;
line-height: 1.65;
}
.learning-explore-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.learning-explore-card {
position: relative;
display: block;
width: 100%;
aspect-ratio: 3 / 4;
overflow: hidden;
border-radius: 2rem;
box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.learning-explore-card:hover {
transform: translateY(-0.25rem);
box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
}
.learning-explore-img,
.learning-explore-overlay {
position: absolute;
inset: 0;
}
.learning-explore-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.7s ease;
}
.learning-explore-card:hover .learning-explore-img {
transform: scale(1.1);
}
.learning-explore-overlay {
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2), transparent);
opacity: 0.8;
transition: opacity 0.25s ease;
}
.learning-explore-card:hover .learning-explore-overlay {
opacity: 1;
}
.learning-explore-content {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding: 1.5rem;
}
.learning-explore-content h3 {
margin: 0;
color: #fff;
font-size: 1.5rem;
font-weight: 800;
letter-spacing: 0;
}
.learning-explore-content div {
display: flex;
width: 2rem;
height: 2rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
color: #0f172a;
border-radius: 999px;
background: #ffd500;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}
.learning-explore-content svg {
width: 1rem;
height: 1rem;
}
.lessons-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(15, 23, 42, 0.5), rgba(15, 23, 42, 0.2), transparent);
}
.lessons-share-row {
gap: 0.75rem;
}
.lessons-share-row .share-icon-btn {
width: 3rem;
height: 3rem;
}
.lessons-intro-card {
margin-bottom: 3rem;
}
.lessons-intro-card p + p {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #f1f5f9;
color: #475569;
font-size: 1rem;
}
.lessons-list-section {
position: relative;
z-index: 30;
margin-bottom: 6rem;
}
.lessons-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.lesson-card {
display: flex;
min-height: 100%;
flex-direction: column;
overflow: hidden;
color: inherit;
border: 1px solid #e2e8f0;
border-radius: 2rem;
background: #fff;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.lesson-card:hover {
transform: translateY(-0.25rem);
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
}
.lesson-card-locked {
border-style: dashed;
background: rgba(248, 250, 252, 0.9);
}
.lesson-card-header {
position: relative;
display: flex;
min-height: 7rem;
align-items: flex-start;
justify-content: space-between;
overflow: hidden;
padding: 1.25rem;
border-bottom: 1px solid #f8fafc;
}
.lesson-card-header span {
position: relative;
z-index: 1;
padding: 0.4rem 0.75rem;
border: 1px solid #fff;
border-radius: 999px;
background: rgba(255, 255, 255, 0.9);
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.12em;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}
.lesson-card-header > svg {
position: absolute;
top: -1rem;
right: -1rem;
width: 8rem;
height: 8rem;
opacity: 0.12;
transform: rotate(12deg);
transition: transform 0.6s ease;
}
.lesson-card:hover .lesson-card-header > svg {
transform: rotate(0deg) scale(1.08);
}
.lesson-card-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 1.5rem;
}
.lesson-duration {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 0.375rem;
margin-bottom: 1rem;
padding: 0.25rem 0.625rem;
color: #64748b;
border: 1px solid #e2e8f0;
border-radius: 999px;
background: #f8fafc;
font-size: 0.625rem;
font-weight: 800;
}
.lesson-duration svg {
width: 0.75rem;
height: 0.75rem;
}
.lesson-card h3 {
margin: 0 0 1.5rem;
color: #1e293b;
font-size: 1.25rem;
line-height: 1.25;
font-weight: 900;
transition: color 0.2s ease;
}
.lesson-card-action,
.lesson-lock-note {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: auto;
padding-top: 1.25rem;
border-top: 1px solid #f1f5f9;
}
.lesson-card-action span {
color: #94a3b8;
font-size: 0.6875rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.lesson-card:hover .lesson-card-action span {
color: #475569;
}
.lesson-card-action div,
.lesson-lock-note div {
display: flex;
width: 2.5rem;
height: 2.5rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 999px;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
transition: transform 0.25s ease;
}
.lesson-card:hover .lesson-card-action div {
transform: scale(1.1) rotate(6deg);
}
.lesson-card-action svg,
.lesson-lock-note svg {
width: 1rem;
height: 1rem;
}
.lesson-card-action svg {
margin-left: 0.1rem;
fill: currentColor;
}
.lesson-lock-note p {
margin: 0;
color: #64748b;
font-size: 0.75rem;
line-height: 1.45;
}
.lesson-lock-note a {
color: var(--mauritius-blue);
font-weight: 700;
}
.lesson-lock-note a:hover {
color: var(--mauritius-red);
}
.lesson-card-locked .lesson-card-header {
background: linear-gradient(135deg, rgba(226, 232, 240, 0.5), transparent);
}
.lesson-card-locked .lesson-card-header span {
color: #64748b;
}
.lesson-card-locked .lesson-card-header > svg {
color: #94a3b8;
}
.lesson-card-locked .lesson-lock-note div {
color: #94a3b8;
background: rgba(226, 232, 240, 0.8);
box-shadow: none;
}
.lesson-theme-red .lesson-card-header { background: linear-gradient(135deg, rgba(234, 40, 57, 0.1), transparent); }
.lesson-theme-blue .lesson-card-header { background: linear-gradient(135deg, rgba(26, 32, 109, 0.1), transparent); }
.lesson-theme-yellow .lesson-card-header { background: linear-gradient(135deg, rgba(255, 205, 0, 0.14), transparent); }
.lesson-theme-green .lesson-card-header { background: linear-gradient(135deg, rgba(0, 165, 81, 0.1), transparent); }
.lesson-theme-red .lesson-card-header span,
.lesson-theme-red:hover h3,
.lesson-theme-red .lesson-card-header > svg { color: var(--mauritius-red); }
.lesson-theme-blue .lesson-card-header span,
.lesson-theme-blue:hover h3,
.lesson-theme-blue .lesson-card-header > svg { color: var(--mauritius-blue); }
.lesson-theme-yellow .lesson-card-header span,
.lesson-theme-yellow:hover h3,
.lesson-theme-yellow .lesson-card-header > svg { color: #ca8a04; }
.lesson-theme-green .lesson-card-header span,
.lesson-theme-green:hover h3,
.lesson-theme-green .lesson-card-header > svg { color: var(--mauritius-green); }
.lesson-theme-red .lesson-card-action div { background: var(--mauritius-red); }
.lesson-theme-blue .lesson-card-action div { background: var(--mauritius-blue); }
.lesson-theme-yellow .lesson-card-action div { background: #ca8a04; }
.lesson-theme-green .lesson-card-action div { background: var(--mauritius-green); }
.lessons-empty {
grid-column: 1 / -1;
color: #64748b;
text-align: center;
}
.lesson-timeline-section {
margin-bottom: 8rem;
}
.lesson-timeline {
position: relative;
display: grid;
max-width: 64rem;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 1rem;
margin: 0 auto;
}
.lesson-timeline::before {
content: "";
position: absolute;
top: 1.45rem;
left: 8%;
right: 2%;
height: 2px;
background: linear-gradient(90deg, #fecaca, #bbf7d0, #c7d2fe);
}
.lesson-timeline-item {
position: relative;
z-index: 1;
min-width: 0;
text-align: center;
}
.lesson-timeline-item > div {
display: flex;
width: 3rem;
height: 3rem;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
border: 4px solid #fff;
border-radius: 999px;
font-size: 1.125rem;
font-weight: 800;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.lesson-timeline-item h4 {
margin: 0 0 0.5rem;
color: #1e293b;
font-size: 0.875rem;
line-height: 1.35;
font-weight: 800;
}
.lesson-timeline-item p {
max-width: 8rem;
margin: 0 auto;
color: #64748b;
font-size: 0.75rem;
line-height: 1.55;
}
.timeline-red > div { color: #ef4444; background: #fef2f2; }
.timeline-orange > div { color: #fb923c; background: #fff7ed; }
.timeline-yellow > div { color: #eab308; background: #fefce8; }
.timeline-green > div { color: #22c55e; background: #f0fdf4; }
.timeline-purple > div { color: #a855f7; background: #faf5ff; }
.timeline-indigo > div { color: #818cf8; background: #eef2ff; }
.single-lesson-hero {
position: relative;
width: 100vw;
min-height: 360px;
margin-left: calc(50% - 50vw);
margin-bottom: 3rem;
display: flex;
align-items: center;
overflow: hidden;
background: #fff;
z-index: 20;
}
.single-lesson-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(135deg, rgba(26, 32, 109, 0.1), transparent);
}
.single-lesson-hero.lesson-theme-red .single-lesson-hero-bg { background: linear-gradient(135deg, rgba(234, 40, 57, 0.1), transparent); }
.single-lesson-hero.lesson-theme-yellow .single-lesson-hero-bg { background: linear-gradient(135deg, rgba(255, 205, 0, 0.14), transparent); }
.single-lesson-hero.lesson-theme-green .single-lesson-hero-bg { background: linear-gradient(135deg, rgba(0, 165, 81, 0.1), transparent); }
.single-lesson-hero-icon {
position: absolute;
top: 50%;
right: -6rem;
z-index: 0;
color: rgba(26, 32, 109, 0.1);
opacity: 0.6;
pointer-events: none;
transform: translateY(-50%) rotate(-12deg);
}
.single-lesson-hero-icon svg {
width: clamp(18rem, 36vw, 31rem);
height: clamp(18rem, 36vw, 31rem);
}
.single-lesson-hero.lesson-theme-red .single-lesson-hero-icon { color: rgba(234, 40, 57, 0.1); }
.single-lesson-hero.lesson-theme-yellow .single-lesson-hero-icon { color: rgba(202, 138, 4, 0.12); }
.single-lesson-hero.lesson-theme-green .single-lesson-hero-icon { color: rgba(0, 165, 81, 0.1); }
.single-lesson-hero-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: 72rem;
margin: 0 auto;
padding: 3rem 1.5rem 4rem;
}
.single-lesson-hero-copy {
max-width: 48rem;
text-align: left;
}
.single-lesson-hero-copy h1 {
margin: 0 0 1.5rem;
color: #1e293b;
font-size: clamp(2.4rem, 5vw, 4rem);
line-height: 1.08;
font-weight: 900;
}
.single-lesson-hero-copy p {
max-width: 42rem;
margin: 0 0 2rem;
color: #475569;
font-size: clamp(1.125rem, 2vw, 1.25rem);
line-height: 1.6;
font-weight: 600;
}
.single-lesson-share {
display: flex;
align-items: center;
gap: 0.75rem;
}
.single-lesson-share-btn {
display: flex;
width: 3rem;
height: 3rem;
align-items: center;
justify-content: center;
color: #94a3b8;
border: 1px solid #e2e8f0;
border-radius: 999px;
background: #fff;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.single-lesson-share-btn svg {
width: 1.25rem;
height: 1.25rem;
}
.single-lesson-share-btn:hover {
color: #fff;
transform: translateY(-0.25rem) scale(1.08);
}
.single-lesson-share-btn.share-icon-copy:hover {
background: #1e293b;
border-color: #1e293b;
}
.single-lesson-shell {
width: min(100% - 0.5rem, 72rem);
margin: 0 auto;
padding-bottom: 5rem;
}
.single-lesson-main {
width: 100%;
}
.single-lesson-gate,
.single-lesson-content {
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 1.5rem;
background: rgba(255, 255, 255, 0.65);
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(12px);
}
.single-lesson-gate {
padding: clamp(2rem, 6vw, 4rem);
text-align: center;
}
.single-lesson-gate-icon {
display: flex;
width: 3.5rem;
height: 3.5rem;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: var(--mauritius-blue);
border-radius: 1rem;
background: rgba(26, 32, 109, 0.1);
}
.single-lesson-gate-icon svg {
width: 1.75rem;
height: 1.75rem;
}
.single-lesson-gate h2 {
margin: 0 0 0.75rem;
color: #1e293b;
font-size: 1.5rem;
font-weight: 900;
}
.single-lesson-gate p {
max-width: 24rem;
margin: 0 auto 2rem;
color: #64748b;
font-size: 0.875rem;
line-height: 1.65;
}
.single-lesson-gate-actions {
display: flex;
justify-content: center;
gap: 0.75rem;
}
.single-lesson-primary-btn,
.single-lesson-secondary-btn {
display: inline-block;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
font-size: 0.875rem;
font-weight: 800;
}
.single-lesson-primary-btn {
color: #fff;
background: var(--mauritius-blue);
}
.single-lesson-primary-btn:hover {
color: #fff;
opacity: 0.9;
}
.single-lesson-secondary-btn {
color: #334155;
border: 1px solid #e2e8f0;
background: #fff;
}
.single-lesson-secondary-btn:hover {
color: var(--mauritius-blue);
border-color: rgba(26, 32, 109, 0.4);
}
.single-lesson-content {
padding: clamp(1.25rem, 4vw, 3rem);
}
.single-lesson-content,
.single-lesson-content .imported-prose {
color: #334155;
font-size: 1.05rem;
line-height: 1.75;
}
.single-lesson-content h2,
.single-lesson-content h3,
.single-lesson-content h4 {
color: var(--mauritius-blue);
font-weight: 900;
}
.single-lesson-content a {
color: var(--mauritius-red);
font-weight: 700;
}
.single-lesson-content a:hover {
color: var(--mauritius-blue);
}
.single-lesson-content blockquote {
margin: 1.5rem 0;
padding: 0.75rem 1rem;
border-left: 4px solid rgba(26, 32, 109, 0.3);
border-radius: 0 0.5rem 0.5rem 0;
background: rgba(26, 32, 109, 0.05);
}
.single-lesson-ad {
position: relative;
width: 100%;
margin: 2rem auto 0;
overflow: hidden;
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 2rem;
background: rgba(255, 255, 255, 0.4);
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
text-align: center;
}
.single-lesson-ad-glow {
position: absolute;
top: 50%;
left: 50%;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, rgba(26, 32, 109, 0.05), rgba(234, 40, 57, 0.05));
filter: blur(48px);
opacity: 0.5;
transform: translate(-50%, -50%);
}
.single-lesson-nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.5rem;
margin-top: 3rem;
}
.single-lesson-nav-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 1rem;
transition: background 0.25s ease, border-color 0.25s ease;
}
.single-lesson-nav-card:hover {
background: rgba(255, 255, 255, 0.8);
border-color: rgba(26, 32, 109, 0.2);
}
.single-lesson-nav-card > div {
display: flex;
width: 3rem;
height: 3rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
color: var(--mauritius-blue);
border-radius: 999px;
background: rgba(255, 255, 255, 0.5);
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
transition: background 0.25s ease, color 0.25s ease;
}
.single-lesson-nav-card:hover > div {
color: #fff;
background: var(--mauritius-blue);
}
.single-lesson-nav-card svg {
width: 1.25rem;
height: 1.25rem;
}
.single-lesson-nav-card span {
min-width: 0;
}
.single-lesson-nav-card small {
display: block;
color: #9ca3af;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.single-lesson-nav-card strong {
display: -webkit-box;
overflow: hidden;
color: var(--mauritius-blue);
font-weight: 800;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
}
.single-lesson-nav-card:hover strong {
color: var(--mauritius-red);
}
.single-lesson-nav-next {
justify-content: flex-end;
text-align: right;
}
.single-lesson-bottom {
padding-bottom: 0;
}
.practice-page {
padding-bottom: 3rem;
}
.practice-panel {
position: relative;
overflow: hidden;
margin-bottom: 4rem;
padding: clamp(1.5rem, 4vw, 3rem);
border-radius: 3rem;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}
.practice-panel-shine {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 45%);
pointer-events: none;
}
.practice-intro,
.practice-quiz {
position: relative;
z-index: 1;
}
.practice-intro {
max-width: 64rem;
margin-bottom: 2rem;
color: #475569;
font-size: clamp(1rem, 2vw, 1.125rem);
line-height: 1.7;
font-weight: 500;
}
.practice-intro p {
margin: 0;
}
.practice-divider {
position: relative;
z-index: 1;
width: 100%;
height: 1px;
margin-bottom: 3rem;
background: rgba(226, 232, 240, 0.5);
}
.quiz-loading,
.quiz-results,
.quiz-load-error {
text-align: center;
}
.quiz-loading {
padding: 3rem 0;
}
.quiz-loading div {
width: 2.5rem;
height: 2.5rem;
margin: 0 auto 1rem;
border: 4px solid var(--mauritius-blue);
border-top-color: transparent;
border-radius: 999px;
animation: spin 1s linear infinite;
}
.quiz-loading p,
.quiz-load-error {
color: #64748b;
font-weight: 600;
}
.quiz-question {
width: 100%;
animation: fadeIn 0.25s ease;
}
.quiz-progress {
position: relative;
width: 100%;
height: 0.5rem;
margin-bottom: 2rem;
overflow: hidden;
border-radius: 999px;
background: rgba(226, 232, 240, 0.7);
}
.quiz-progress div {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-blue), var(--mauritius-yellow), var(--mauritius-green));
transition: width 0.7s ease;
}
.quiz-topline {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.quiz-topline span {
display: flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
color: #fff;
border-radius: 999px;
background: var(--mauritius-blue);
font-size: 0.75rem;
font-weight: 800;
box-shadow: 0 8px 18px rgba(26, 32, 109, 0.18);
}
.quiz-topline strong {
color: #94a3b8;
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.quiz-question h2 {
margin: 0 0 2.5rem;
color: #0f172a;
font-size: clamp(1.5rem, 3vw, 2.5rem);
line-height: 1.2;
font-weight: 900;
}
.quiz-options {
display: grid;
gap: 1rem;
}
.option-btn {
position: relative;
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: clamp(1rem, 2vw, 1.25rem);
color: #334155;
border: 2px solid #e2e8f0;
border-radius: 0.75rem;
background: #fff;
text-align: left;
cursor: pointer;
transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, opacity 0.25s ease;
}
.option-btn:hover {
border-color: rgba(26, 32, 109, 0.3);
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08);
}
.option-btn span {
font-size: clamp(1rem, 2vw, 1.125rem);
font-weight: 800;
}
.option-btn > div {
width: 1.25rem;
height: 1.25rem;
flex: 0 0 auto;
border: 2px solid #cbd5e1;
border-radius: 999px;
}
.option-btn.is-muted {
opacity: 0.7;
}
.option-btn.is-correct {
color: #166534;
border-color: #22c55e;
background: #f0fdf4;
opacity: 1;
}
.option-btn.is-wrong {
color: #991b1b;
border-color: #ef4444;
background: #fef2f2;
opacity: 1;
}
.option-btn.is-correct > div,
.option-btn.is-wrong > div {
display: flex;
width: 1.75rem;
height: 1.75rem;
align-items: center;
justify-content: center;
color: #fff;
border: 0;
}
.option-btn.is-correct > div {
background: #16a34a;
}
.option-btn.is-wrong > div {
background: #dc2626;
}
.option-btn svg {
width: 1rem;
height: 1rem;
}
.quiz-explanation,
.quiz-next-wrap {
margin-top: 2rem;
}
.quiz-feedback {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1.25rem;
border-radius: 0.75rem;
}
.quiz-feedback > div {
display: flex;
width: 2.5rem;
height: 2.5rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
border-radius: 999px;
}
.quiz-feedback svg {
width: 1.25rem;
height: 1.25rem;
}
.quiz-feedback h4 {
margin: 0 0 0.25rem;
font-weight: 800;
}
.quiz-feedback p {
margin: 0;
font-size: 0.875rem;
line-height: 1.6;
}
.quiz-feedback-correct {
color: #166534;
border: 1px solid #bbf7d0;
background: #f0fdf4;
}
.quiz-feedback-correct > div {
background: #dcfce7;
}
.quiz-feedback-wrong {
color: #991b1b;
border: 1px solid #fecaca;
background: #fef2f2;
}
.quiz-feedback-wrong > div {
background: #fee2e2;
}
.quiz-next-wrap {
display: flex;
justify-content: flex-end;
}
.quiz-next-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.75rem;
color: #fff;
border: 0;
border-radius: 0.75rem;
background: var(--mauritius-blue);
font-weight: 800;
cursor: pointer;
transition: background 0.2s ease;
}
.quiz-next-btn:hover {
background: var(--mauritius-red);
}
.quiz-next-btn svg {
width: 1.25rem;
height: 1.25rem;
}
.quiz-results {
padding: clamp(1.5rem, 4vw, 2.5rem) 0;
animation: fadeIn 0.25s ease;
}
.quiz-result-icon {
display: flex;
width: 6rem;
height: 6rem;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
border: 1px solid #f1f5f9;
border-radius: 999px;
background: #fff;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
}
.quiz-result-icon svg {
width: 3rem;
height: 3rem;
}
.quiz-result-blue {
color: var(--mauritius-blue);
}
.quiz-result-yellow {
color: var(--mauritius-yellow);
}
.quiz-result-muted {
color: #64748b;
}
.quiz-results h2 {
margin: 0 0 0.75rem;
color: #0f172a;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1.1;
font-weight: 900;
}
.quiz-results > p {
margin: 0 0 2rem;
color: #475569;
font-size: 1.125rem;
font-weight: 600;
}
.quiz-score-card {
max-width: 24rem;
margin: 0 auto 2rem;
padding: 1.5rem;
border: 1px solid #f1f5f9;
border-radius: 1rem;
background: #fff;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}
.quiz-score-card div {
margin-bottom: 0.5rem;
color: #94a3b8;
font-size: 0.875rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.quiz-score-card strong {
display: block;
color: var(--mauritius-blue);
font-size: 4rem;
line-height: 1;
font-weight: 900;
}
.quiz-score-card span {
display: block;
margin-top: 0.5rem;
color: #64748b;
font-weight: 600;
} .vocab-page {
padding-bottom: 3rem;
}
.vocab-tools-panel {
position: relative;
overflow: hidden;
margin-bottom: 4rem;
padding: clamp(1.5rem, 4vw, 3rem);
border-radius: 3rem;
box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16);
}
.vocab-tools-shine {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 45%);
pointer-events: none;
}
.vocab-tools-inner {
position: relative;
z-index: 1;
}
.vocab-category-wrap {
margin-bottom: 2rem;
text-align: center;
}
.vocab-category-wrap h3 {
margin: 0 0 1rem;
color: #64748b;
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.vocab-mobile-select {
display: none;
width: 100%;
padding: 0.75rem 1rem;
color: #334155;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.8);
font-size: 0.875rem;
font-weight: 700;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
outline: none;
}
.vocab-mobile-select:focus {
border-color: rgba(26, 32, 109, 0.3);
box-shadow: 0 0 0 4px rgba(26, 32, 109, 0.1);
}
.vocab-category-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.625rem;
}
.category-btn {
position: relative;
padding: 0.5rem 1rem;
color: #475569;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.6);
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.category-btn:hover {
color: var(--mauritius-blue);
background: #fff;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
transform: scale(1.05);
}
.category-btn.is-active {
color: #fff;
background: var(--mauritius-blue);
box-shadow: 0 10px 22px rgba(26, 32, 109, 0.18);
}
.vocab-search {
max-width: 42rem;
margin: 0 auto;
}
.vocab-search,
.vocab-search-box {
position: relative;
}
.vocab-search-glow {
position: absolute;
inset: 0;
border-radius: 999px;
background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-yellow), var(--mauritius-green));
opacity: 0.2;
filter: blur(12px);
transition: opacity 0.35s ease;
}
.vocab-search:hover .vocab-search-glow {
opacity: 0.4;
}
.vocab-search-box {
display: flex;
align-items: center;
padding: 0.5rem;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 999px;
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(14px);
}
.vocab-search-box:focus-within {
box-shadow: 0 0 0 3px rgba(26, 32, 109, 0.16), 0 12px 28px rgba(15, 23, 42, 0.12);
}
.vocab-search-box > svg {
width: 1.25rem;
height: 1.25rem;
margin-left: 1rem;
color: rgba(26, 32, 109, 0.6);
}
.vocab-search-box input {
width: 100%;
padding: 0.5rem 1rem;
color: #334155;
border: 0;
background: transparent;
font-weight: 600;
outline: none;
}
.vocab-search-box input::placeholder {
color: #94a3b8;
}
.vocab-search-loader {
padding-right: 1rem;
}
.vocab-search-loader svg {
width: 1.25rem;
height: 1.25rem;
color: var(--mauritius-blue);
animation: spin 1s linear infinite;
}
.vocab-results-grid {
display: grid;
max-width: 72rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
align-items: start;
margin: 0 auto;
}
.vocab-loading,
.vocab-empty {
grid-column: 1 / -1;
padding: 3rem 1rem;
color: #6b7280;
text-align: center;
}
.vocab-loading div {
width: 2rem;
height: 2rem;
margin: 0 auto 1rem;
border: 4px solid var(--mauritius-blue);
border-top-color: transparent;
border-radius: 999px;
animation: spin 1s linear infinite;
}
.vocab-card {
position: relative;
display: block;
min-height: 0;
height: auto;
overflow: hidden;
padding: clamp(1rem, 2vw, 1.5rem);
color: inherit;
border: 1px solid #e2e8f0;
border-radius: 1rem;
background: linear-gradient(135deg, #fff, rgba(248, 250, 252, 0.5));
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
text-align: left;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.vocab-card:hover {
transform: scale(1.02);
box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
}
.vocab-card-glow {
position: absolute;
top: -3rem;
right: -3rem;
width: 6rem;
height: 6rem;
border-radius: 999px;
background: rgba(26, 32, 109, 0.05);
filter: blur(24px);
pointer-events: none;
transition: background 0.25s ease;
}
.vocab-card:hover .vocab-card-glow {
background: rgba(26, 32, 109, 0.1);
}
.vocab-card-inner {
position: relative;
z-index: 1;
display: flex;
min-height: 0;
height: auto;
flex-direction: column;
}
.vocab-card-section {
margin-bottom: 1.25rem;
}
.vocab-card-label {
display: flex;
align-items: center;
gap: 0.375rem;
margin-bottom: 0.375rem;
color: #94a3b8;
font-size: 0.625rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.14em;
}
.vocab-card-label i {
width: 0.375rem;
height: 0.375rem;
border-radius: 999px;
background: #cbd5e1;
}
.vocab-card:hover .vocab-card-label i {
background: var(--mauritius-red);
}
.vocab-card-label-blue {
color: rgba(26, 32, 109, 0.6);
}
.vocab-card-label-blue i {
background: rgba(26, 32, 109, 0.4);
}
.vocab-card:hover .vocab-card-label-blue i {
background: var(--mauritius-blue);
}
.vocab-card h3 {
margin: 0;
color: #1e293b;
font-size: clamp(1.25rem, 2vw, 1.5rem);
line-height: 1.15;
font-weight: 900;
letter-spacing: 0;
}
.vocab-card:hover h3 {
color: var(--mauritius-blue);
}
.vocab-card-creole {
position: relative;
}
.vocab-card-translation {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-left: -0.5rem;
padding: 0.5rem;
border: 1px solid transparent;
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.6);
transition: background 0.25s ease, border-color 0.25s ease;
}
.vocab-card:hover .vocab-card-translation {
border-color: rgba(26, 32, 109, 0.1);
background: rgba(255, 255, 255, 0.85);
}
.vocab-card-translation p {
margin: 0;
color: var(--mauritius-blue);
font-size: clamp(1.125rem, 2vw, 1.25rem);
font-style: italic;
font-weight: 800;
}
.vocab-card-translation button {
display: flex;
width: 2.25rem;
height: 2.25rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
color: #64748b;
border: 0;
border-radius: 999px;
background: #f1f5f9;
cursor: pointer;
transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.vocab-card-translation button:hover {
color: #fff;
background: var(--mauritius-blue);
box-shadow: 0 8px 18px rgba(26, 32, 109, 0.18);
}
.vocab-card-translation svg {
width: 1rem;
height: 1rem;
}
.vocab-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid #e2e8f0;
}
.vocab-card-category {
display: inline-block;
padding: 0.25rem 0.75rem;
color: #64748b;
border: 1px solid #e2e8f0;
border-radius: 999px;
background: #fff;
font-size: 0.625rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.vocab-card:hover .vocab-card-category {
color: var(--mauritius-blue);
border-color: rgba(26, 32, 109, 0.3);
}
.vocab-card-link {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: #94a3b8;
font-size: 0.6875rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.vocab-card-link svg {
width: 0.875rem;
height: 0.875rem;
transition: transform 0.2s ease;
}
.vocab-card:hover .vocab-card-link {
color: var(--mauritius-red);
}
.vocab-card:hover .vocab-card-link svg {
transform: translateX(0.25rem);
}
.vocab-highlight {
padding: 0 0.125rem;
color: var(--mauritius-blue);
border-radius: 0.125rem;
background: #fef08a;
}
.vocab-load-more {
margin-top: 3rem;
text-align: center;
}
.vocab-load-more button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 2rem;
color: #475569;
border: 1px solid #e2e8f0;
border-radius: 0.75rem;
background: #fff;
font-weight: 800;
box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06);
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.vocab-load-more button:hover {
color: var(--mauritius-blue);
border-color: var(--mauritius-blue);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.1);
}
.vocab-load-more svg {
width: 1rem;
height: 1rem;
}
.vocab-explore {
margin-top: clamp(5rem, 8vw, 7rem);
}
.vocab-faq-section {
margin-top: 6rem;
}
.single-vocab-page {
padding-bottom: 3rem;
}
.single-vocab-main {
max-width: 72rem;
margin: 0 auto 3rem;
}
.single-vocab-card {
position: relative;
overflow: hidden;
padding: clamp(1.5rem, 3vw, 2rem);
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 2.5rem;
box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
text-align: center;
}
.single-vocab-stripe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0.5rem;
background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-blue), var(--mauritius-yellow));
}
.single-vocab-glow {
position: absolute;
top: 0;
left: 0;
width: 16rem;
height: 16rem;
border-radius: 999px;
background: rgba(26, 32, 109, 0.05);
filter: blur(48px);
transform: translate(-50%, -50%);
}
.single-vocab-card-inner {
position: relative;
z-index: 1;
}
.single-vocab-label {
display: inline-block;
margin-bottom: 1rem;
padding: 0.25rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.single-vocab-label-blue {
color: var(--mauritius-blue);
background: rgba(26, 32, 109, 0.05);
}
.single-vocab-label-red {
color: var(--mauritius-red);
background: rgba(234, 40, 57, 0.05);
}
.single-vocab-card h2 {
margin: 0 0 1.5rem;
color: #0f172a;
font-size: clamp(1.875rem, 4vw, 2.5rem);
line-height: 1.15;
font-weight: 800;
}
.single-vocab-card h1 {
margin: 0 0 1rem;
color: var(--mauritius-red);
font-size: clamp(2.5rem, 5vw, 4rem);
line-height: 1.05;
font-weight: 900;
}
.single-vocab-divider {
width: 100%;
height: 1px;
margin: 0 0 1.5rem;
background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}
.single-vocab-pronounce {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
padding: 0.5rem 1.5rem;
color: #fff;
border: 0;
border-radius: 999px;
background: var(--mauritius-blue);
font-weight: 800;
cursor: pointer;
transition: filter 0.2s ease;
}
.single-vocab-pronounce:hover {
filter: brightness(1.1);
}
.single-vocab-pronounce svg {
width: 1.25rem;
height: 1.25rem;
}
.single-vocab-explain {
max-width: 34rem;
margin: 0 auto 1rem;
padding: 1rem;
color: #64748b;
border: 1px solid #f1f5f9;
border-radius: 0.75rem;
background: rgba(248, 250, 252, 0.5);
font-size: 0.875rem;
line-height: 1.65;
}
.single-vocab-explain p {
margin: 0;
}
.single-vocab-explain strong {
color: #1e293b;
}
.single-vocab-explain strong:last-child {
color: var(--mauritius-red);
}
.single-vocab-example {
margin-top: 1rem;
padding: clamp(1rem, 2vw, 1.5rem);
color: #64748b;
border: 1px solid #f1f5f9;
border-radius: 1rem;
background: rgba(248, 250, 252, 0.8);
text-align: left;
}
.single-vocab-example h3 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 1rem;
color: #0f172a;
font-size: 0.875rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.single-vocab-example h3 svg {
width: 1rem;
height: 1rem;
color: var(--mauritius-yellow);
}
.single-vocab-example p {
margin: 0;
}
.single-vocab-example-creole {
margin-bottom: 0.5rem !important;
color: var(--mauritius-blue);
font-size: 1.125rem;
font-style: italic;
font-weight: 700;
}
.single-vocab-practice {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid rgba(226, 232, 240, 0.7);
font-size: 0.875rem;
}
.single-vocab-practice span {
color: #64748b;
font-weight: 700;
}
.single-vocab-practice a {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--mauritius-blue);
font-weight: 800;
}
.single-vocab-practice a:hover {
color: var(--mauritius-red);
}
.single-vocab-practice svg {
width: 1rem;
height: 1rem;
}
.single-vocab-section {
margin-bottom: 4rem;
}
.single-vocab-section-title {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 2rem;
color: #0f172a;
font-size: 1.25rem;
font-weight: 800;
}
.single-vocab-section-title span {
width: 0.375rem;
height: 1.5rem;
border-radius: 999px;
}
.single-vocab-title-green span {
background: var(--mauritius-green);
}
.single-vocab-title-red span {
background: var(--mauritius-red);
}
.single-vocab-related-grid,
.single-vocab-blog-grid {
display: grid;
gap: 1.5rem;
}
.single-vocab-related-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.single-vocab-related-card {
display: flex;
min-height: 100%;
flex-direction: column;
justify-content: center;
padding: 1.5rem;
color: inherit;
border: 1px solid #f1f5f9;
border-radius: 1rem;
background: #fff;
text-align: center;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.single-vocab-related-card:hover {
border-color: rgba(26, 32, 109, 0.3);
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}
.single-vocab-related-card span {
display: block;
margin-bottom: 0.5rem;
color: #94a3b8;
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.single-vocab-related-card h4 {
margin: 0 0 1rem;
color: #0f172a;
font-size: 1.25rem;
font-weight: 800;
}
.single-vocab-related-card:hover h4 {
color: var(--mauritius-blue);
}
.single-vocab-related-card div {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: auto;
padding: 0.5rem 1rem;
color: var(--mauritius-blue);
border-radius: 0.5rem;
background: rgba(26, 32, 109, 0.05);
font-size: 0.875rem;
font-weight: 800;
}
.single-vocab-related-card div svg {
width: 1rem;
height: 1rem;
}
.single-vocab-blog-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.single-vocab-blog-card {
display: flex;
overflow: hidden;
color: inherit;
border: 1px solid #f1f5f9;
border-radius: 1rem;
background: #fff;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.single-vocab-blog-card:hover {
border-color: rgba(234, 40, 57, 0.3);
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.1);
}
.single-vocab-blog-media {
position: relative;
width: 100%;
height: 12rem;
overflow: hidden;
background: rgba(234, 40, 57, 0.05);
}
.single-vocab-blog-card {
flex-direction: column;
}
.single-vocab-blog-media img,
.single-vocab-blog-media > div {
width: 100%;
height: 100%;
}
.single-vocab-blog-media img {
object-fit: cover;
transition: transform 0.7s ease;
}
.single-vocab-blog-card:hover img {
transform: scale(1.1);
}
.single-vocab-blog-media > div {
display: flex;
align-items: center;
justify-content: center;
color: rgba(234, 40, 57, 0.2);
}
.single-vocab-blog-media svg {
width: 2rem;
height: 2rem;
}
.single-vocab-blog-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
padding: 1.5rem;
}
.single-vocab-blog-body h4 {
margin: 0 0 0.5rem;
color: var(--mauritius-blue);
font-size: 1.25rem;
line-height: 1.3;
font-weight: 800;
}
.single-vocab-blog-card:hover h4 {
color: var(--mauritius-red);
}
.single-vocab-blog-body p {
display: -webkit-box;
margin: 0 0 1rem;
overflow: hidden;
color: #64748b;
font-size: 0.875rem;
line-height: 1.55;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.single-vocab-blog-body span {
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-top: auto;
color: var(--mauritius-red);
font-size: 0.875rem;
font-weight: 800;
}
.single-vocab-blog-body svg {
width: 1rem;
height: 1rem;
}
.vocab-tax-page {
width: min(100% - 2rem, 80rem);
margin: 0 auto;
padding: 0.5rem 0 3rem;
}
.vocab-tax-hero {
position: relative;
width: 100%;
height: clamp(22rem, 42vw, 28rem);
margin-bottom: 3rem;
overflow: hidden;
border-radius: 2.5rem;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}
.vocab-tax-hero img,
.vocab-tax-hero-overlay,
.vocab-tax-bottom-fade {
position: absolute;
inset: 0;
}
.vocab-tax-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.vocab-tax-hero-overlay {
background: linear-gradient(to bottom, rgba(15, 23, 42, 0.6), rgba(26, 32, 109, 0.4));
}
.vocab-tax-hero-content {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: clamp(2rem, 5vw, 4rem);
}
.vocab-tax-hero-content > span {
display: inline-block;
margin-bottom: 1rem;
padding: 0.25rem 0.75rem;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.2);
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
backdrop-filter: blur(10px);
}
.vocab-tax-hero h1 {
margin: 0 0 1rem;
color: #fff;
font-size: clamp(2.25rem, 5vw, 4rem);
line-height: 1.05;
font-weight: 900;
text-shadow: 0 8px 22px rgba(15, 23, 42, 0.3);
}
.vocab-tax-hero h1 em {
color: var(--mauritius-yellow);
font-style: normal;
}
.vocab-tax-hero p {
max-width: 42rem;
margin: 0 0 2rem;
color: rgba(255, 255, 255, 0.9);
font-size: clamp(1.125rem, 2vw, 1.5rem);
line-height: 1.55;
font-weight: 500;
}
.vocab-tax-bottom-fade {
top: auto;
height: 6rem;
background: linear-gradient(to top, rgba(255, 255, 255, 0.1), transparent);
}
.vocab-tax-grid {
max-width: none;
}
.vocab-tax-spinner {
margin-top: 1rem;
}
.vocab-tax-spinner svg {
width: 2rem;
height: 2rem;
color: var(--mauritius-blue);
animation: spin 1s linear infinite;
}
.vocab-load-more button.is-loading {
opacity: 0.55;
cursor: not-allowed;
}
.vocab-tax-explore {
margin-top: 8rem;
} .hub-hero {
position: relative;
width: calc(100% + 2rem);
min-height: 620px;
height: 85vh;
margin-right: -1rem;
margin-left: -1rem;
margin-bottom: 3rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 40;
}
.hub-hero-glow {
position: absolute;
right: 0;
bottom: -0.75rem;
left: 0;
z-index: -1;
height: 8rem;
border-radius: 0 0 3.5rem 3.5rem;
background: linear-gradient(90deg, var(--mauritius-red), var(--mauritius-blue), var(--mauritius-yellow), var(--mauritius-green));
filter: blur(24px);
opacity: 0.7;
}
.hub-hero-media {
position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
border-radius: 0 0 3rem 3rem;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
}
.hub-hero-media img,
.hub-hero-media div {
position: absolute;
inset: 0;
}
.hub-hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hub-hero-media div {
background: linear-gradient(to bottom, rgba(15, 23, 42, 0.6), rgba(15, 23, 42, 0.4), rgba(15, 23, 42, 0.8));
}
.hub-hero-content {
position: relative;
z-index: 1;
width: min(100% - 2rem, 64rem);
margin: 0 auto;
padding-top: 5rem;
color: #fff;
text-align: center;
}
.hub-hero-content > span {
display: inline-block;
margin-bottom: 1.5rem;
padding: 0.25rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 999px;
background: rgba(255, 255, 255, 0.2);
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.14em;
backdrop-filter: blur(10px);
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
}
.hub-hero-content h1 {
margin: 0 0 1.5rem;
color: #fff;
font-size: clamp(3rem, 7vw, 4.5rem);
line-height: 1.05;
font-weight: 900;
letter-spacing: 0;
text-shadow: 0 8px 22px rgba(15, 23, 42, 0.36);
}
.hub-hero-content p {
max-width: 48rem;
margin: 0 auto;
color: #f1f5f9;
font-size: clamp(1.125rem, 2.2vw, 1.5rem);
line-height: 1.6;
font-weight: 600;
text-shadow: 0 6px 18px rgba(15, 23, 42, 0.24);
}
.hub-hero-search {
position: relative;
z-index: 2;
display: flex;
width: min(100%, 42rem);
align-items: center;
gap: 1rem;
margin: 2.5rem auto 0;
padding: 0.5rem 0.5rem 0.5rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 24px 50px rgba(15, 23, 42, 0.2);
backdrop-filter: blur(14px);
transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.hub-hero-search:focus-within,
.hub-hero-search:hover {
border-color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.18);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.1), 0 24px 50px rgba(15, 23, 42, 0.2);
}
.hub-hero-search > svg {
width: 1.5rem;
height: 1.5rem;
flex: 0 0 auto;
color: rgba(255, 255, 255, 0.82);
}
.hub-hero-search input {
width: 100%;
height: 3rem;
color: #fff;
border: 0;
background: transparent;
font-size: clamp(1rem, 2vw, 1.25rem);
font-weight: 600;
outline: none;
}
.hub-hero-search input::placeholder {
color: rgba(255, 255, 255, 0.65);
}
.hub-hero-search button {
display: flex;
width: 3.25rem;
height: 3.25rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
color: #fff;
border: 0;
border-radius: 999px;
background: var(--mauritius-red);
box-shadow: 0 12px 24px rgba(234, 40, 57, 0.24);
cursor: pointer;
transition: transform 0.2s ease, background 0.2s ease;
}
.hub-hero-search button:hover {
background: #dc2626;
}
.hub-hero-search button:active {
transform: scale(0.95);
}
.hub-hero-search button svg {
width: 1.35rem;
height: 1.35rem;
}
.hub-page {
width: min(100% - 2rem, 80rem);
margin: 0 auto;
}
.hub-section,
.hub-slider-section,
.hub-essentials,
.hub-language-card {
margin-bottom: 6rem;
}
.hub-section-head {
margin-bottom: 2.5rem;
}
.hub-section-head-center {
max-width: 48rem;
margin-right: auto;
margin-left: auto;
text-align: center;
}
.hub-section-head h2,
.hub-slider-head h2 {
margin: 0 0 1rem;
color: #1e293b;
font-size: clamp(2rem, 4.5vw, 3rem);
line-height: 1.1;
font-weight: 900;
letter-spacing: 0;
}
.hub-section-head h2 span,
.hub-slider-head h2 span {
background: linear-gradient(90deg, var(--mauritius-blue), var(--mauritius-red));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.hub-section-head p,
.hub-slider-head p {
margin: 0;
color: #64748b;
font-size: 1.125rem;
line-height: 1.65;
font-weight: 600;
}
.hub-map-panel {
position: relative;
min-height: 600px;
overflow: hidden;
padding: 0.5rem;
border: 4px solid #f8fafc;
border-radius: 2.5rem;
background: #fff;
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}
.hub-map {
width: 100%;
min-height: 600px;
height: 100%;
overflow: hidden;
border-radius: 2rem;
}
.hub-map-legend {
position: absolute;
top: 1.5rem;
left: 1.5rem;
z-index: 10;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
border: 1px solid #f1f5f9;
border-radius: 1rem;
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
backdrop-filter: blur(12px);
}
.hub-map-legend > span {
display: flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
margin-right: -1rem;
color: #fff;
border: 2px solid #fff;
border-radius: 999px;
font-size: 0.625rem;
font-weight: 900;
}
.hub-map-legend > span:first-child {
background: var(--mauritius-red);
}
.hub-map-legend > span:nth-child(2) {
background: var(--mauritius-blue);
}
.hub-map-legend svg {
width: 1rem;
height: 1rem;
}
.hub-map-legend strong,
.hub-map-legend small {
display: block;
}
.hub-map-legend strong {
color: #1e293b;
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.hub-map-legend small {
color: #64748b;
font-size: 0.625rem;
font-weight: 600;
}
.hub-map-marker {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.25s ease;
}
.hub-map-marker:hover {
transform: scale(1.2);
}
.hub-map-marker span {
display: flex;
width: 2.25rem;
height: 2.25rem;
align-items: center;
justify-content: center;
color: #fff;
border: 4px solid #fff;
border-radius: 999px;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.2);
}
.hub-map-marker span svg {
width: 1rem;
height: 1rem;
}
.hub-map-marker small {
width: 1rem;
height: 0.25rem;
margin-top: 0.25rem;
border-radius: 999px;
background: rgba(0, 0, 0, 0.3);
filter: blur(2px);
}
.hub-map-popup {
min-width: 220px;
padding: 1rem;
font-family: inherit;
}
.hub-map-popup h3 {
margin: 0 0 0.5rem;
color: #1e293b;
font-size: 1.125rem;
line-height: 1.15;
font-weight: 900;
}
.hub-map-popup p {
margin: 0 0 0.75rem;
padding-bottom: 0.75rem;
color: #475569;
border-bottom: 1px solid #f1f5f9;
font-size: 0.75rem;
line-height: 1.55;
font-weight: 600;
}
.hub-map-popup a {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 1rem;
color: #fff;
border-radius: 0.5rem;
background: var(--mauritius-blue);
font-size: 0.75rem;
font-weight: 800;
}
.hub-map-popup a:hover {
color: #fff;
background: var(--mauritius-red);
}
.hub-map-popup svg {
width: 0.875rem;
height: 0.875rem;
}
.hub-essentials {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem;
}
.hub-essential-card {
position: relative;
min-height: 11rem;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem;
color: #1e293b;
border: 1px solid rgba(255, 255, 255, 0.6);
border-radius: 2rem;
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
text-align: center;
backdrop-filter: blur(14px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hub-essential-card:hover {
transform: translateY(-0.5rem) scale(1.02);
box-shadow: 0 22px 44px rgba(15, 23, 42, 0.14);
}
.hub-essential-card div {
display: flex;
width: 4rem;
height: 4rem;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
border-radius: 1rem;
background: #fff;
box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}
.hub-essential-card div svg {
width: 2rem;
height: 2rem;
}
.hub-essential-card h3 {
margin: 0;
font-size: 1.125rem;
font-weight: 900;
}
.hub-essential-card > svg {
width: 1.25rem;
height: 1.25rem;
margin-top: 1rem;
opacity: 0;
transform: translateY(0.5rem);
transition: opacity 0.25s ease, transform 0.25s ease;
}
.hub-essential-card:hover > svg {
opacity: 1;
transform: translateY(0);
}
.hub-theme-red { --hub-accent: var(--mauritius-red); }
.hub-theme-blue { --hub-accent: var(--mauritius-blue); }
.hub-theme-green { --hub-accent: var(--mauritius-green); }
.hub-theme-yellow { --hub-accent: #ca8a04; }
.hub-theme-red div,
.hub-theme-red h3,
.hub-theme-red > svg,
.hub-theme-red .hub-slider-head > span,
.hub-theme-red .hub-slider-card-copy span { color: var(--mauritius-red); }
.hub-theme-blue div,
.hub-theme-blue h3,
.hub-theme-blue > svg,
.hub-theme-blue .hub-slider-head > span,
.hub-theme-blue .hub-slider-card-copy span { color: var(--mauritius-blue); }
.hub-theme-green div,
.hub-theme-green h3,
.hub-theme-green > svg,
.hub-theme-green .hub-slider-head > span,
.hub-theme-green .hub-slider-card-copy span { color: var(--mauritius-green); }
.hub-theme-yellow div,
.hub-theme-yellow h3,
.hub-theme-yellow > svg,
.hub-theme-yellow .hub-slider-head > span,
.hub-theme-yellow .hub-slider-card-copy span { color: #ca8a04; }
.hub-slider-section {
--hub-accent: var(--mauritius-blue);
}
.hub-slider-head {
margin-bottom: 2rem;
}
.hub-slider-head > span {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
padding: 0.375rem 1rem;
border: 1px solid color-mix(in srgb, var(--hub-accent) 20%, transparent);
border-radius: 999px;
background: color-mix(in srgb, var(--hub-accent) 10%, transparent);
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.hub-slider-head > span svg {
width: 1rem;
height: 1rem;
}
.hub-slider-wrap {
position: relative;
}
.hub-slider-track {
display: flex;
gap: 1.5rem;
overflow-x: auto;
margin: 0 -1rem;
padding: 0 1rem 2rem;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.hub-slider-track::-webkit-scrollbar {
display: none;
}
.hub-slider-card {
position: relative;
width: min(80vw, 20rem);
height: 23.75rem;
flex: 0 0 auto;
overflow: hidden;
color: #fff;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 2rem;
box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
scroll-snap-align: center;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hub-slider-card:hover {
transform: translateY(-0.5rem);
box-shadow: 0 24px 54px rgba(15, 23, 42, 0.24);
}
.hub-slider-card img,
.hub-slider-overlay,
.hub-slider-empty {
position: absolute;
inset: 0;
}
.hub-slider-card img {
width: 120%;
max-width: none;
height: 100%;
left: -10%;
object-fit: cover;
transition: transform 0.7s ease;
}
.hub-slider-card:hover img {
transform: scale(1.08);
}
.hub-slider-overlay {
background: linear-gradient(to top, rgba(15, 23, 42, 0.95), rgba(15, 23, 42, 0.2), transparent);
}
.hub-slider-card-copy {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
padding: 1.5rem;
}
.hub-slider-card-copy span {
display: block;
width: 2.5rem;
height: 0.25rem;
margin-bottom: 1rem;
border-radius: 999px;
background: var(--hub-accent);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
transition: width 0.3s ease;
}
.hub-slider-card:hover .hub-slider-card-copy span {
width: 5rem;
}
.hub-slider-card-copy h3 {
margin: 0;
color: #fff;
font-size: 1.5rem;
line-height: 1.15;
font-weight: 900;
text-shadow: 0 8px 20px rgba(15, 23, 42, 0.35);
}
.hub-slider-empty,
.hub-slider-empty-card {
display: flex;
align-items: center;
justify-content: center;
color: #94a3b8;
background: #1e293b;
font-weight: 800;
}
.hub-slider-empty-card {
width: min(100%, 24rem);
min-height: 14rem;
padding: 2rem;
border: 2px dashed #cbd5e1;
border-radius: 2rem;
background: #f1f5f9;
text-align: center;
}
.hub-slider-btn {
position: absolute;
top: 50%;
z-index: 5;
display: flex;
width: 3rem;
height: 3rem;
align-items: center;
justify-content: center;
color: #1e293b;
border: 1px solid #f1f5f9;
border-radius: 999px;
background: #fff;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.16);
cursor: pointer;
transform: translateY(-50%);
transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.hub-slider-btn:hover {
color: #fff;
background: var(--hub-accent);
transform: translateY(-50%) scale(1.08);
}
.hub-slider-btn svg {
width: 1.5rem;
height: 1.5rem;
}
.hub-slider-prev {
left: -0.75rem;
}
.hub-slider-next {
right: -0.75rem;
}
.hub-language-card {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
gap: 3rem;
padding: clamp(2rem, 4vw, 3rem);
color: #fff;
border-radius: 2.5rem;
background: var(--mauritius-blue);
box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}
.hub-language-card::before,
.hub-language-card::after {
content: "";
position: absolute;
width: 24rem;
height: 24rem;
border-radius: 999px;
filter: blur(90px);
pointer-events: none;
}
.hub-language-card::before {
top: 0;
right: 0;
background: rgba(234, 40, 57, 0.2);
transform: translate(35%, -35%);
}
.hub-language-card::after {
bottom: 0;
left: 0;
background: rgba(255, 205, 0, 0.1);
transform: translate(-35%, 35%);
}
.hub-language-copy,
.hub-phrase-list {
position: relative;
z-index: 1;
}
.hub-language-copy {
flex: 1 1 0;
}
.hub-language-copy > div {
display: flex;
width: 4rem;
height: 4rem;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 1rem;
background: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 2px 8px rgba(255, 255, 255, 0.08);
}
.hub-language-copy svg {
width: 2rem;
height: 2rem;
color: var(--mauritius-yellow);
}
.hub-language-copy h3 {
margin: 0 0 1rem;
color: #fff;
font-size: clamp(2rem, 4vw, 2.5rem);
line-height: 1.1;
font-weight: 900;
}
.hub-language-copy p {
max-width: 34rem;
margin: 0;
color: #cbd5e1;
font-size: 1.125rem;
line-height: 1.65;
font-weight: 600;
}
.hub-language-copy a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 2rem;
padding: 1rem 2rem;
color: var(--mauritius-blue);
border-radius: 999px;
background: #fff;
font-weight: 800;
box-shadow: 0 12px 24px rgba(15, 23, 42, 0.14);
transition: transform 0.2s ease, background 0.2s ease;
}
.hub-language-copy a:hover {
color: var(--mauritius-blue);
background: var(--mauritius-yellow);
transform: translateY(-0.25rem);
}
.hub-language-copy a svg {
width: 1.25rem;
height: 1.25rem;
color: currentColor;
}
.hub-phrase-list {
display: grid;
width: min(100%, 28rem);
gap: 0.75rem;
padding: 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 1.5rem;
background: rgba(255, 255, 255, 0.1);
box-shadow: inset 0 2px 12px rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
}
.hub-phrase-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem;
color: #fff;
border: 1px solid transparent;
border-radius: 0.75rem;
background: transparent;
cursor: pointer;
text-align: left;
transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.hub-phrase-item:hover {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.2);
}
.hub-phrase-item:active {
transform: scale(0.97);
}
.hub-phrase-item strong,
.hub-phrase-item small {
display: block;
}
.hub-phrase-item strong {
color: var(--mauritius-yellow);
font-size: 1.25rem;
font-weight: 800;
}
.hub-phrase-item small {
color: #cbd5e1;
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.hub-phrase-item > svg {
width: 2.5rem;
height: 2.5rem;
flex: 0 0 auto;
padding: 0.625rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
transition: color 0.2s ease, background 0.2s ease;
}
.hub-phrase-item:hover > svg {
color: var(--mauritius-blue);
background: #fff;
}
.fade-up {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-up.visible {
opacity: 1;
transform: translateY(0);
}
.expat-calculator {
position: relative;
overflow: hidden;
padding: clamp(1rem, 3vw, 2rem);
border: 1px solid #f1f5f9;
border-radius: 2rem;
background: #fff;
box-shadow: 0 20px 46px rgba(15, 23, 42, 0.12);
}
.expat-calc-form {
display: grid;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.expat-calc-group h4 {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.75rem;
color: #94a3b8;
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.expat-calc-group h4 svg,
.expat-option-grid label svg {
width: 0.875rem;
height: 0.875rem;
}
.expat-counter-grid,
.expat-option-grid {
display: grid;
gap: 1rem;
}
.expat-counter-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.expat-option-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.expat-counter {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.875rem;
border: 1px solid #e2e8f0;
border-radius: 0.875rem;
background: #f8fafc;
text-align: center;
}
.expat-counter label,
.expat-option-grid label {
display: flex;
align-items: center;
gap: 0.375rem;
margin-bottom: 0.5rem;
color: #334155;
font-size: 0.75rem;
font-weight: 800;
}
.expat-counter > div {
display: flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
.expat-counter button {
display: flex;
width: 2rem;
height: 2rem;
align-items: center;
justify-content: center;
color: #475569;
border: 1px solid #cbd5e1;
border-radius: 999px;
background: #fff;
cursor: pointer;
}
.expat-counter button:last-child {
color: #fff;
border-color: var(--mauritius-blue);
background: var(--mauritius-blue);
}
.expat-counter button svg {
width: 0.875rem;
height: 0.875rem;
}
.expat-counter span {
min-width: 1.5rem;
color: #1e293b;
font-size: 1.125rem;
font-weight: 900;
}
.expat-segmented {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
padding: 0.25rem;
border-radius: 0.625rem;
background: #f1f5f9;
}
.expat-segmented button {
padding: 0.625rem 0.5rem;
color: #475569;
border: 0;
border-radius: 0.5rem;
background: transparent;
font-size: 0.75rem;
font-weight: 800;
cursor: pointer;
}
.expat-segmented button.is-active {
color: var(--mauritius-blue);
background: #fff;
box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}
.expat-option-grid select {
width: 100%;
padding: 0.75rem 1rem;
color: #334155;
border: 2px solid #f1f5f9;
border-radius: 0.625rem;
background: #f8fafc;
font-size: 0.75rem;
font-weight: 800;
outline: none;
}
.expat-option-grid select:focus {
border-color: var(--mauritius-blue);
}
.expat-calc-result {
position: relative;
overflow: hidden;
border-radius: 1.5rem;
background: #0a192f;
color: #fff;
box-shadow: 0 24px 50px rgba(15, 23, 42, 0.2);
}
.expat-result-bg {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 85% 0%, rgba(234, 40, 57, 0.24), transparent 28%),
radial-gradient(circle at 0% 100%, rgba(26, 32, 109, 0.24), transparent 30%),
linear-gradient(135deg, #0a192f, #112240, #1a365d);
}
.expat-result-content {
position: relative;
z-index: 1;
padding: clamp(1.25rem, 3vw, 1.75rem);
}
.expat-result-top {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.expat-result-top h3 {
margin: 0 0 0.25rem;
color: #94a3b8;
font-size: 0.75rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.12em;
}
.expat-result-top p {
margin: 0;
color: #64748b;
font-size: 0.75rem;
}
.expat-total span {
display: block;
color: #fff;
font-size: clamp(2rem, 4vw, 2.75rem);
line-height: 1;
font-weight: 900;
}
.expat-total small,
.expat-total-eur small {
display: block;
color: #64748b;
font-size: 0.625rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.expat-total-eur {
padding: 0.25rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 999px;
background: rgba(255, 255, 255, 0.05);
}
.expat-total-eur strong {
color: #34d399;
font-family: monospace;
}
.expat-breakdown {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.5rem;
}
.expat-breakdown-item {
min-height: 5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 0.35rem;
padding: 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 0.75rem;
background: rgba(255, 255, 255, 0.05);
}
.expat-breakdown-item svg {
width: 1rem;
height: 1rem;
color: #93c5fd;
}
.expat-breakdown-item span {
color: #cbd5e1;
font-size: 0.625rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.expat-breakdown-item strong {
color: #fff;
font-size: 0.875rem;
font-weight: 900;
}
@media (max-width: 1023px) {
.about-category-grid,
.contact-card-grid,
.search-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.newsletter-inner {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.content-hero {
min-height: 460px;
height: 58vh;
}
.content-hero-share {
display: none;
}
.content-page-shell,
.search-page {
width: min(100% - 1.5rem, 80rem);
}
.section-eyebrow {
font-size: 0.75rem;
}
.about-story-card {
border-radius: 1.75rem;
}
.about-category-grid,
.contact-card-grid,
.search-card-grid,
.account-field-grid {
grid-template-columns: 1fr;
}
.about-category-card {
height: 8rem;
border-radius: 1.5rem;
}
.about-category-content {
padding: 1.25rem;
}
.about-category-content h3 {
margin-bottom: 0;
font-size: 1.25rem;
}
.about-category-content h3 svg {
display: block;
}
.about-category-content p {
display: none;
}
.newsletter-panel,
.contact-form-card {
border-radius: 1.5rem;
}
.contact-form-section,
.contact-connect-section {
margin-bottom: 4rem;
}
.contact-info-card {
padding: 1.5rem;
border-radius: 1.5rem;
}
.contact-link {
font-size: 1rem;
word-break: break-word;
}
.account-page {
padding-top: 7rem;
}
.account-actions {
align-items: flex-start;
flex-direction: column;
gap: 1rem;
}
.search-page-header p {
font-size: 1rem;
}
.legal-page {
width: min(100% - 1.5rem, 64rem);
padding: 2rem 0;
}
.legal-header {
margin-bottom: 3rem;
}
.legal-card {
padding: 1.5rem;
}
.legal-section-title {
align-items: flex-start;
}
.legal-section-body {
padding-left: 0;
}
.legal-two-grid,
.legal-check-grid,
.legal-chip-grid {
grid-template-columns: 1fr;
}
.learning-hero {
min-height: 460px;
height: 58vh;
margin-bottom: 3rem;
}
.learning-shell {
width: min(100% - 1.5rem, 72rem);
}
.learning-nav-grid,
.learning-benefit-grid,
.learning-faq-grid {
grid-template-columns: 1fr;
}
.learning-nav-card {
flex-direction: row;
justify-content: space-between;
gap: 1rem;
padding: 1rem;
border-radius: 1rem;
text-align: left;
}
.learning-card-icon {
width: 3.5rem;
height: 3.5rem;
margin: 0;
padding: 0.75rem;
}
.learning-card-copy {
align-items: flex-start;
}
.learning-card-copy h3 {
margin-bottom: 0;
font-size: 1.05rem;
}
.learning-card-copy p,
.learning-card-copy span {
display: none;
}
.learning-card-mobile-arrow {
display: flex;
width: 2rem;
height: 2rem;
flex: 0 0 auto;
align-items: center;
justify-content: center;
color: var(--mauritius-blue);
border-radius: 999px;
background: #f8fafc;
}
.learning-card-mobile-arrow svg {
width: 1.25rem;
height: 1.25rem;
}
.learning-benefit-card {
flex-direction: row;
gap: 1.25rem;
padding: 1.25rem;
border: 1px solid #f1f5f9;
border-radius: 1rem;
background: #fff;
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
text-align: left;
}
.learning-benefit-icon {
width: 4rem;
height: 4rem;
margin: 0;
padding: 0.75rem;
}
.learning-section {
margin-bottom: 4rem;
}
.learning-explore-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.learning-explore-content {
padding: 1.25rem;
}
.learning-explore-content h3 {
font-size: 1.25rem;
}
.lessons-share-row {
display: none;
}
.lessons-grid {
grid-template-columns: 1fr;
}
.lesson-card {
border-radius: 1rem;
}
.lesson-card-header {
display: none;
}
.lesson-card-body {
padding: 1rem;
}
.lesson-card h3 {
margin-bottom: 0.75rem;
font-size: 1rem;
}
.lesson-card-action,
.lesson-lock-note {
padding-top: 0.75rem;
}
.lesson-timeline {
display: flex;
gap: 1rem;
max-width: 100%;
overflow-x: auto;
padding-bottom: 1rem;
scroll-snap-type: x mandatory;
}
.lesson-timeline::before {
display: none;
}
.lesson-timeline-item {
min-width: 8.75rem;
scroll-snap-align: center;
}
.single-lesson-hero {
min-height: 320px;
}
.single-lesson-hero-inner {
padding: 2rem 1.25rem 3rem;
}
.single-lesson-hero-icon {
right: -10rem;
}
.single-lesson-share {
display: none;
}
.single-lesson-shell {
width: min(100% - 0.5rem, 72rem);
}
.single-lesson-content,
.single-lesson-gate {
border-radius: 1.25rem;
}
.single-lesson-ad {
margin-left: -1.25rem;
margin-right: -1.25rem;
width: auto;
border-right: 0;
border-left: 0;
border-radius: 0;
}
.single-lesson-gate-actions,
.single-lesson-nav {
grid-template-columns: 1fr;
}
.single-lesson-gate-actions {
display: grid;
}
.single-lesson-nav {
gap: 1rem;
}
.single-lesson-nav-card,
.single-lesson-nav-next {
justify-content: flex-start;
text-align: left;
}
.single-lesson-nav-next span {
order: 2;
}
.vocab-tools-panel {
border-radius: 1.75rem;
}
.vocab-mobile-select {
display: block;
}
.vocab-category-buttons {
display: none;
}
.vocab-results-grid {
grid-template-columns: 1fr;
}
.vocab-card {
border-radius: 0.875rem;
}
.single-vocab-card {
border-radius: 1.5rem;
}
.single-vocab-practice {
align-items: center;
flex-direction: column;
}
.single-vocab-related-grid,
.single-vocab-blog-grid {
grid-template-columns: 1fr;
}
.single-vocab-blog-card {
flex-direction: row;
}
.single-vocab-blog-media {
width: 7rem;
height: auto;
flex: 0 0 auto;
}
.single-vocab-blog-body p {
display: none;
}
.vocab-tax-page {
width: min(100% - 1.5rem, 80rem);
}
.vocab-tax-hero {
border-radius: 1.5rem;
}
.vocab-tax-share {
display: none;
}
} html,
body {
max-width: 100%;
overflow-x: clip;
}
.site-header a,
.main-navigation a,
.mobile-menu a,
.footer a,
.home-latest a,
.home-paths a,
.pick-path a,
.vocab-page a,
.vocabulary-page a,
.vocab-card,
.vocab-card a,
.vocabulary-card a,
.word-card a,
.lesson-card a,
.blog-card a,
.hub-slider-card,
.hub-essential-card {
text-decoration: none;
}
.home-hero-button {
min-height: 1.75rem;
padding-top: 0.4rem;
padding-bottom: 0.4rem;
}
.home-path-card,
.home-explore-card {
align-items: center;
justify-content: center;
}
.home-path-card-body {
justify-content: center;
}
.home-path-card-body > *,
.home-explore-card-content > * {
margin-top: auto;
margin-bottom: auto;
}
.home-explore-card-content {
align-items: center;
justify-content: center;
min-height: 6.75rem;
}
.home-explore-card-text {
flex: 0 1 auto;
}
.home-explore-card-scrim {
background: rgba(2, 6, 23, 0.34);
backdrop-filter: none;
}
.home-explore-card-gradient {
background: linear-gradient(to right, rgba(2, 6, 23, 0.4), rgba(15, 23, 42, 0.22), rgba(2, 6, 23, 0.08));
}
.home-latest,
.home-latest-grid,
.home-latest-list,
.home-latest-secondary,
.home-latest-sidebar,
.home-latest-posts,
.home-latest-side,
.latest-articles-list,
.latest-articles-side,
.latest-posts-list,
.latest-posts-side {
max-height: none;
overflow: visible;
scrollbar-width: none;
-ms-overflow-style: none;
}
.home-latest-list::-webkit-scrollbar,
.home-latest-secondary::-webkit-scrollbar,
.home-latest-sidebar::-webkit-scrollbar,
.home-latest-posts::-webkit-scrollbar,
.home-latest-side::-webkit-scrollbar,
.latest-articles-list::-webkit-scrollbar,
.latest-articles-side::-webkit-scrollbar,
.latest-posts-list::-webkit-scrollbar,
.latest-posts-side::-webkit-scrollbar {
display: none;
}
.home-latest-list {
height: auto !important;
max-height: none !important;
overflow: hidden !important;
overflow-y: hidden !important;
}
.home-gradient-text,
.learn-explore-connect .gradient-text,
.learn-connect .gradient-text,
.home-connect .gradient-text,
.connect-heading .gradient-text,
.home-section-title .gradient-text,
.connect-title-gradient,
.learn-connect-gradient {
background: linear-gradient(90deg, #ea2839 0%, #5d68d8 34%, #d39b00 66%, #009b63 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.home-newsletter-form-side {
min-width: 0;
}
.home-newsletter-form-frame,
.home-newsletter-form {
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
.newsletter form,
.newsletter-form,
.home-newsletter form,
.home-newsletter .wpcf7,
.newsletter-section form,
.newsletter-section .wpcf7,
.newsletter-card form,
.newsletter-card .wpcf7 {
box-sizing: border-box;
width: 100%;
max-width: min(100%, 36rem);
margin-left: auto;
margin-right: auto;
}
.newsletter input,
.newsletter textarea,
.newsletter select,
.home-newsletter input,
.home-newsletter textarea,
.home-newsletter select {
max-width: 100%;
}
.single-blog-hero-inner,
.single-blog-shell {
max-width: min(100% - 2rem, 92rem);
}
.single-blog-hero-media {
height: min(42vw, 430px);
min-height: 280px;
}
.single-blog-hero-img,
.single-blog-hero-placeholder,
.single-post-hero img,
.single-post-featured-image {
width: 100%;
object-fit: cover;
}
.vocab-card {
margin-bottom: 1.25rem;
text-decoration: none;
}
.vocab-card-link,
.vocab-card h3,
.single-vocab-related-card,
.single-vocab-related-card h4,
.single-vocab-blog-card,
.single-vocab-blog-card h4,
.vocab-tax-card,
.vocab-tax-card h3 {
text-decoration: none;
}
@media (max-width: 767px) {
body {
position: relative;
width: 100%;
}
.site-header-nav {
left: 0;
right: auto;
box-sizing: border-box;
width: 100%;
max-width: 100vw;
padding-right: 0.75rem;
padding-left: 0.75rem;
overflow: visible;
transform: none;
}
.site-header-shell,
.site-header,
.header-inner,
.mobile-header,
.main-header {
left: auto;
right: auto;
box-sizing: border-box;
width: 100%;
max-width: 100%;
margin-left: auto;
margin-right: auto;
transform: none;
}
.site-header-shell {
padding-right: 0.85rem;
padding-left: 0.85rem;
}
.site-header > *,
.site-header-shell > *,
.header-inner > *,
.mobile-header > *,
.main-header > * {
max-width: 100%;
}
.home-hero-button {
padding-top: 0.35rem;
padding-bottom: 0.35rem;
}
.single-blog-hero-inner,
.single-blog-shell {
max-width: min(100% - 1.25rem, 100%);
}
.single-blog-hero-media {
height: 340px;
min-height: 280px;
}
}