/* DM Sans Regular Variable */
@font-face {
font-family: 'DMSans';
src: url('DMSans-VariableFont_opsz,wght.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
}
/* DM Sans Italic Variable */
@font-face {
font-family: 'DMSans';
src: url('DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype');
font-weight: 100 900;
font-style: italic;
}
@font-face {
font-family: 'CairoVariable';
src: url('Cairo-VariableFont_slnt,wght.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
}
/* Force font on everything in the header */
header, .Header, .header, [class*="header"] {
font-family: 'DM Sans', sans-serif !important;
}
/* Specifically target the text in case it's a link */
header a, .Header a, header h1, .Header h1 {
font-family: 'DM Sans', sans-serif !important;
}
/* General Styles */
body {
font-family: 'DM Sans', sans-serif;
margin: 0;
padding: 0;
line-height: 1.6;
background-color: #f4f4f9;
color: #333;
}
/* Header */
header {
background-color: #003366; /* Formal Navy Blue */
color: white;
padding: 2rem 1rem;
text-align: center;
border-bottom: 5px solid #d4af37; /* Gold accent */
}
/* 1. This "imports" the font without needing the tag */
/* 2. Target the main Header area */
.Header, header, #header {
font-family: 'DM Sans', sans-serif;
}
/* 3. Style the Title (Republic of Valudia) */
.Header h1, .header-title {
font-family: 'DM Sans', sans-serif;
font-weight: 700; /* Bold for the Republic name */
letter-spacing: -0.01em;
font-size: 2.5rem;
}
/* 4. Style the Motto (Vis Potentiae) */
.Header p, .header-motto {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
font-style: italic;
letter-spacing: 0.04em;
opacity: 0.9;
}
header h1 { margin: 0; font-size: 2.5rem; }
/* Navigation */
nav {
background: #ffffff;
border-bottom: 1px solid #ddd;
position: sticky;
top: 0;
}
nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
margin: 0;
}
nav li a {
display: block;
padding: 1rem 1.5rem;
text-decoration: none;
color: #003366;
font-weight: bold;
}
nav li a:hover { background: #003366; color: white; }
/* Layout */
main {
max-width: 1000px;
margin: 2rem auto;
padding: 0 1rem;
}
#hero {
background: white;
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
margin-bottom: 2rem;
text-align: center;
}
.content-grid {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 2rem;
}
/* Sidebar & News */
section, aside {
background: white;
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h3 { border-bottom: 2px solid #003366; padding-bottom: 0.5rem; }
/* Footer */
footer {
text-align: center;
padding: 2rem;
background: #222;
color: #ccc;
margin-top: 3rem;
}
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
padding: 20px 0;
}
.gov-card {
background: #ffffff;
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 25px;
text-align: center;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.gov-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
border-color: var(--valudia-green);
}
.card-icon {
font-size: 3rem;
margin-bottom: 15px;
}
.gov-card h3 {
color: var(--valudia-red);
margin: 10px 0;
}
.national-header {
display: flex; /* This puts items side-by-side */
align-items: center; /* This centers them vertically */
gap: 20px; /* This adds space between the CoA and text */
padding: 20px;
}
.coa {
height: 100px; /* Adjust size as needed */
width: auto;
}
.title-container h1 {
margin: 0; /* Removes extra space around title */
font-family: serif; /* Gives it that official government look */
}
.motto {
font-style: italic;
margin: 5px 0 0 0;
}
.news-ticker-bar {
display: flex;
align-items: center;
background-color: #b71c1c; /* Deep Red for the ticker bar */
height: 40px;
overflow: hidden;
border-bottom: 2px solid #D4AF37; /* Keeps your Valudian Gold accent */
}
.breaking-label {
background-color: #ffffff; /* White background for the label */
color: #b71c1c; /* Red text to contrast */
font-weight: bold;
padding: 0 15px;
height: 100%;
display: flex;
align-items: center;
font-family: sans-serif;
letter-spacing: 1px;
white-space: nowrap;
z-index: 2;
box-shadow: 5px 0 10px rgba(0,0,0,0.2); /* Adds depth like a real broadcast */
}
/* This makes the bar red and aligns the text */
.news-ticker-bar {
display: flex !important;
align-items: center;
background-color: #b71c1c;
height: 40px;
overflow: hidden;
width: 100%;
}
/* This makes the "BREAKING" box white */
.breaking-label {
background-color: white;
color: #b71c1c;
font-weight: bold;
padding: 0 20px;
height: 100%;
display: flex;
align-items: center;
white-space: nowrap;
}
/* This makes the scrolling text white */
.ticker-text {
color: white !important;
font-family: sans-serif;
flex-grow: 1;
}
.valudia-news, .valudia-news * {
font-family: 'CairoVariable', sans-serif !important;
}
/* Specifically setting the weights for Cairo */
.breaking-label {
font-weight: 700; /* Bold */
}
.ticker-text {
font-weight: 400; /* Normal */
}
body {
font-family: 'DMSans', sans-serif;
}
/* Ensure the titles and navigation use the new local font */
h1, h2, h3, nav a, .card h3 {
font-family: 'DMSans', sans-serif !important;
font-weight: 700; /* This makes headers bold using the variable file */
}
.valudia-news, .valudia-news * {
font-family: 'CairoVariable', sans-serif !important;
}
/* Specifically targeting the Republic title */
.title-container h1 {
font-family: 'DMSans', sans-serif !important;
font-weight: 700; /* Makes it bold */
letter-spacing: -0.02em; /* Makes it look a bit more modern/premium */
margin: 0;
}
/* Optional: Make the motto match too */
.motto {
font-family: 'DMSans', sans-serif !important;
font-weight: 400;
opacity: 0.8; /* Makes the motto slightly lighter than the main title */
}
nav ul li a {
font-family: 'DMSans', sans-serif !important;
font-weight: 500;
}
.valudia-footer {
background-color: #002244; /* Dark Navy to match your header */
color: white;
padding: 40px 20px 20px;
font-family: 'DMSans', sans-serif;
margin-top: 50px;
}
.footer-container {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
gap: 30px;
}
.footer-col {
flex: 1;
min-width: 250px;
}
.footer-coa {
height: 50px;
margin-bottom: 10px;
}
.footer-title {
color: #D4AF37; /* Valudian Gold */
border-left: 3px solid #D4AF37;
padding-left: 10px;
margin-bottom: 15px;
text-transform: uppercase;
font-size: 0.9rem;
}
.footer-bottom {
text-align: center;
border-top: 1px solid rgba(255,255,255,0.1);
margin-top: 30px;
padding-top: 20px;
font-size: 0.8rem;
opacity: 0.7;
}
.connect-section {
margin-top: 20px;
}
.connect-text {
font-size: 0.85rem;
font-weight: 700;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.social-links {
display: flex;
gap: 15px;
}
.social-icon img {
width: 24px;
height: 24px;
filter: brightness(0) invert(1); /* Makes icons white to match the footer */
opacity: 0.7;
transition: 0.3s ease;
}
.social-icon:hover img {
opacity: 1;
transform: translateY(-3px); /* Subtle "pop" effect */
}
.footer-label {
font-weight: bold;
font-family: 'DMSans', sans-serif;
color: white;
margin-bottom: 15px;
text-transform: uppercase;
font-size: 0.8rem;
letter-spacing: 1px;
}
.social-icons-container {
display: flex;
gap: 20px;
}
.social-link {
color: rgba(255, 255, 255, 0.7); /* Slightly transparent white */
font-size: 22px;
text-decoration: none;
transition: 0.3s ease;
}
.social-link:hover {
color: #ffffff; /* Pure white on hover */
transform: translateY(-3px); /* Subtle "pop" effect like professional sites */
}
.connect-section {
display: flex;
flex-direction: column;
align-items: center; /* This centers the content horizontally */
text-align: center;
}
.social-icons-container {
display: flex;
justify-content: center; /* This centers the icons themselves */
gap: 20px;
}
.social-link {
display: flex;
align-items: center;
justify-content: center;
width: 30px; /* Gives each icon a standard "hit box" for better alignment */
color: rgba(255, 255, 255, 0.7);
font-size: 24px;
text-decoration: none;
transition: 0.3s ease;
}
/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
/* 1. Header: Stack the CoA and Title */
.national-header {
flex-direction: column;
text-align: center;
gap: 10px;
}
/* 2. Navigation: Make links easier to tap */
nav ul {
flex-direction: column;
padding: 0;
}
nav ul li {
margin: 5px 0;
width: 100%;
text-align: center;
}
/* 3. Cards: Stack them in one column */
.card-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
}
.card {
width: 90% !important; /* Forces cards to take full width */
margin-bottom: 20px;
}
/* 4. Footer: Stack columns */
.footer-container {
flex-direction: column;
text-align: center;
align-items: center;
}
.footer-col {
width: 100%;
margin-bottom: 30px;
}
/* 5. Ticker: Slightly slower for easier reading on small screens */
marquee {
font-size: 0.9em;
}
}
.ticker-move {
display: inline-block;
color: #ffffff !important;
font-family: 'CairoVariable', sans-serif;
font-weight: 400;
font-size: 1.1em;
padding-left: 100%;
/* FORCE VERTICAL ALIGNMENT */
transform: translateZ(0) rotate(0deg) skewX(0deg);
-webkit-transform: translateZ(0) rotate(0.01deg); /* Force hardware redraw */
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
/* STABILIZE FONT RENDERING */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-style: normal !important;
animation: ticker-animation 30s linear infinite;
}
@keyframes ticker-animation {
0% { transform: translateX(0) rotate(0deg); }
100% { transform: translateX(-100%) rotate(0deg); }
}
.ticker-move {
/* ... your existing code ... */
font-family: 'CairoVariable', sans-serif !important;
font-variation-settings: "slnt" 0; /* Forces the slant axis to zero */
font-style: normal !important;
}
hr {
margin-top: 40px; /* Space above the line */
margin-bottom: 40px; /* Space below the line */
border: 0;
border-top: 1px solid #ddd; /* Makes the line subtle */
}
h3 {
margin-top: 20px; /* Extra space above the "Our Allies" text */
margin-bottom: 20px; /* Space before the list starts */
}
li {
margin-bottom: 10px; /* Adds space between each ally in the list */
}
/* This pushes the top text box up */
p {
margin-bottom: 50px;
}
/* This pushes the "Our Allies" title down from the line */
h3 {
margin-top: 30px;
padding-top: 10px;
}
/* This creates space around that horizontal line */
hr {
margin: 40px 0; /* 40px gap on top and bottom */
border: 0;
border-top: 1px solid #eee; /* Makes the line light and clean */
}
hr {
border: none; /* Removes the visible line */
height: 1px; /* Keeps the element's height */
background: transparent; /* Makes it invisible */
margin: 40px 0; /* This creates the actual "gap" you see */
}
hr {
border: none; /* Removes default browser lines */
outline: none; /* Removes focus outlines on some mobile browsers */
height: 2px; /* Sets the thickness of your visible line */
background-color: #002366; /* Match this to your specific blue */
margin: 20px 0; /* Keeps your spacing consistent */
}
/* If the "ghost" line is coming from a second
tag,
this will make sure it's completely hidden */
hr + hr {
display: none;
}
/* This ensures only the first line is visible if there are extras */
hr ~ hr {
display: none;
}
/* This styles the main line to be a solid blue */
hr {
border: none;
height: 2px;
background-color: #002366; /* Your dark blue color */
margin: 15px 0;
}
hr {
border: none !important; /* Kills the double/shaded look */
height: 2px !important; /* Sets the exact thickness */
background-color: #002366; /* Replace with your exact blue hex code */
margin: 20px 0; /* Keeps your spacing */
opacity: 1; /* Ensures it's solid */
}
hr {
border: none !important;
background: transparent !important;
margin-bottom: 40px; /* This keeps the gap without the line */
}
hr {
/* This removes the gray ghost line */
border: none !important;
/* This creates your actual blue line */
height: 2px;
background-color: #002366;
/* This keeps the spacing clean */
margin: 15px 0;
opacity: 1;
}
@font-face {
font-family: 'DM Sans';
/* Make sure the filename below exactly matches the file in your Neocities sidebar */
src: url('DMSans-VariableFont_opsz,wght.ttf') format('truetype-variations'),
url('DMSans-VariableFont_opsz,wght.ttf') format('truetype');
font-weight: 100 900;
font-style: normal;
}
@font-face {
font-family: 'DM Sans';
src: url('DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations'),
url('DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype');
font-weight: 100 900;
font-style: italic;
}
/* This forces the header to use the font and the link to be white */
.header-title-link {
font-family: 'DM Sans', sans-serif !important;
text-decoration: none !important;
color: #ffffff !important;
}
/* This makes sure the h1 inside the link doesn't override the font */
.header-title-link h1 {
font-family: inherit;
margin: 0;
}
@font-face {
font-family: 'DM Sans';
src: url('DMSans-VariableFont_opsz,wght.ttf') format('truetype');
font-weight: 100 900;
}
@font-face {
font-family: 'DM Sans';
src: url('DMSans-Italic-VariableFont_opsz,wght.ttf') format('truetype');
font-style: italic;
font-weight: 100 900;
}
.header-title-link {
text-decoration: none; /* Removes the underline */
color: white !important; /* Keeps text white */
font-family: 'DM Sans', sans-serif;
}
.header-title-link h1 {
font-family: 'DM Sans', sans-serif;
}
.content-container {
max-width: 900px; /* Adjust this to match the width of your header text area */
margin: 0 auto; /* Centers the container */
padding: 0 20px; /* Prevents text from touching the screen edges on mobile */
font-family: 'DM Sans', sans-serif; /* Keeps the font consistent */
}
.about-header {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 28px;
margin-top: 40px;
margin-bottom: 20px;
color: #333; /* Dark gray for the text below the header */
text-align: center; /* Aligns the text to the left side of the centered container */
}
.about-container {
max-width: 1000px; /* Adjust this number to align the 'A' with the 'R' in the title */
margin: 0 auto; /* This centers the whole section */
padding: 20px; /* Give it some breathing room */
text-align: center; /* Ensures the title stays on the left side of the container */
}
/* Optional: apply DM Sans to the h2 and text specifically */
.about-container h2 {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
margin-left: 0; /* Ensures it sits at the very edge of the container */
}
.about-container {
width: 100%; /* Spans the full width of the page */
text-align: center; /* Centers the title */
margin-top: 40px;
}
.about-container h2 {
font-family: 'DM Sans', sans-serif;
font-weight: 700;
font-size: 32px;
margin-bottom: 20px;
display: block;
}
.about-text {
/* This centers the white box itself */
display: flex;
justify-content: center;
}
.about-text div {
/* This controls the width of your white content box */
max-width: 900px;
text-align: left; /* Keeps the long paragraph text easy to read (left-aligned) */
}
/* Custom properties for easy color and branding adjustments */
:root {
--valudia-bg-main: #162436; /* Main dark blue background */
--valudia-bg-card: #1e3046; /* Lighter blue for contact cards/buttons */
--valudia-bg-input: #23374f; /* Input field background */
--valudia-accent: #3ba29d; /* Teal accent line and button (change to match your flag) */
--valudia-text-light: #ffffff; /* Primary text */
--valudia-text-muted: #a0aec0; /* Descriptions and secondary text */
--valudia-text-label: #718096; /* Form labels and small text */
--radius-standard: 6px; /* Rounded corners for boxes/buttons */
}
/* Base styling for the footer element */
.gov-footer {
background-color: var(--valudia-bg-main);
color: var(--valudia-text-light);
font-family: system-ui, -apple-system, sans-serif;
padding: 60px 40px 20px 40px;
}
/* Layout container for the columns */
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
gap: 40px;
justify-content: space-between;
}
/* Column sizing rules */
.footer-column {
flex: 1;
min-width: 220px;
}
/* Column width weighting for clean text balance */
.brand-column { flex: 1.2; }
.legal-column { flex: 1.5; }
.inquiries-column { flex: 1.3; }
.newsletter-column { flex: 1.3; }
/* Column title headers with the accent bar */
.column-title {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 20px;
padding-left: 12px;
border-left: 3px solid var(--valudia-accent);
}
/* Typography styles for paragraph text blocks */
.column-content p,
.column-intro {
color: var(--valudia-text-muted);
font-size: 0.9rem;
line-height: 1.6;
margin-bottom: 15px;
}
/* --- Brand Column Layout --- */
.footer-logo {
height: 60px;
width: auto;
margin-bottom: 15px;
}
.brand-title {
font-size: 1.4rem;
font-weight: 700;
margin-bottom: 8px;
line-height: 1.3;
}
.brand-subtitle {
color: var(--valudia-text-muted);
font-size: 0.9rem;
margin-bottom: 25px;
}
.social-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.social-label {
font-size: 0.85rem;
font-weight: 600;
}
.social-icons {
display: flex;
gap: 10px;
}
.icon-btn {
background-color: var(--valudia-bg-card);
color: var(--valudia-text-light);
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-standard);
text-decoration: none;
transition: background 0.2s ease;
}
.icon-btn:hover {
background-color: var(--valudia-bg-input);
}
/* --- Inquiry Card Components --- */
.contact-cards {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 15px;
}
.contact-card {
background-color: var(--valudia-bg-card);
border-radius: var(--radius-standard);
padding: 12px 16px;
display: flex;
align-items: center;
gap: 15px;
}
.card-icon {
color: var(--valudia-text-muted);
font-size: 1.2rem;
}
.card-text {
display: flex;
flex-direction: column;
}
.card-label {
font-size: 0.75rem;
color: var(--valudia-text-label);
}
.card-value {
font-size: 0.9rem;
color: var(--valudia-text-light);
text-decoration: none;
font-weight: 500;
}
/* --- Newsletter Form Elements --- */
.newsletter-form {
display: flex;
gap: 10px;
margin-top: 15px;
align-items: center;
}
.input-wrapper {
position: relative;
flex: 1;
display: flex;
align-items: center;
}
.newsletter-form input {
width: 100%;
background-color: var(--valudia-bg-input);
border: none;
border-radius: var(--radius-standard);
padding: 12px 40px 12px 14px;
color: var(--valudia-text-light);
font-size: 0.9rem;
}
.newsletter-form input::placeholder {
color: var(--valudia-text-label);
}
.input-indicator {
position: absolute;
right: 12px;
color: #ff6b6b; /* Orange/Red widget accent from original screenshot */
font-weight: bold;
}
.subscribe-btn {
background-color: var(--valudia-accent);
color: var(--valudia-text-light);
border: none;
border-radius: var(--radius-standard);
padding: 12px 18px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: opacity 0.2s ease;
white-space: nowrap;
}
.subscribe-btn:hover {
opacity: 0.9;
}
/* --- Bottom Copyright Footer Section --- */
.footer-bottom {
margin-top: 60px;
border-top: 1px solid #1f3147;
padding-top: 20px;
text-align: center;
}
.footer-bottom p {
color: var(--valudia-text-muted);
font-size: 0.85rem;
}
/* --- Mobile Responsiveness Breakpoint --- */
@media (max-width: 992px) {
.gov-footer {
padding: 40px 20px 20px 20px;
}
.footer-container {
flex-direction: column;
gap: 30px;
}
.footer-column {
width: 100%;
}
.newsletter-form {
flex-direction: column;
align-items: stretch;
}
.subscribe-btn {
justify-content: center;
}
}
/* Isolated Reset — prevents parent site styles from breaking the footer */
.gov-footer,
.gov-footer *,
.gov-footer *::before,
.gov-footer *::after {
box-sizing: border-box !important;
margin: 0;
padding: 0;
list-style: none !important;
text-decoration: none;
text-align: left;
}
/* Core Footer Container */
.gov-footer {
background-color: #142132;
color: #ffffff;
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
padding: 70px 40px 25px 40px;
width: 100%;
display: block;
}
/* Strict Desktop Column Grid Alignment */
.footer-container {
max-width: 1280px;
margin: 0 auto;
display: grid;
/* Exactly 4 columns with weighted proportions matching the image layout */
grid-template-columns: 1.2fr 1.5fr 1.3fr 1.4fr;
column-gap: 48px;
row-gap: 30px;
align-items: start;
}
/* Column General Header Title Styling */
.column-title {
color: #ffffff !important;
font-size: 1.15rem !important;
font-weight: 600 !important;
margin-bottom: 22px !important;
padding-left: 14px !important;
border-left: 3px solid #3ea39e !important;
line-height: 1.2 !important;
text-transform: none !important;
}
/* Paragraph and Descriptive Typography Layout */
.column-content p,
.column-intro {
color: #94a3b8 !important;
font-size: 0.92rem !important;
line-height: 1.6 !important;
margin-bottom: 16px !important;
}
/* --- Column 1: Identity & Socials --- */
.brand-column {
display: flex;
flex-direction: column;
}
.footer-logo {
height: 65px;
width: auto;
margin-bottom: 18px;
display: block;
}
.brand-title {
color: #ffffff !important;
font-size: 1.45rem !important;
font-weight: 700 !important;
margin-bottom: 8px !important;
line-height: 1.2 !important;
}
.brand-subtitle {
color: #94a3b8 !important;
font-size: 0.9rem !important;
margin-bottom: 30px !important;
}
.social-links {
display: flex;
flex-direction: column;
gap: 12px;
}
.social-label {
color: #ffffff !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
}
.social-icons {
display: flex;
gap: 12px;
}
.icon-btn {
background-color: #1c2e44;
color: #ffffff !important;
width: 38px;
height: 38px;
display: flex !important;
align-items: center;
justify-content: center;
border-radius: 6px;
font-size: 1.1rem;
transition: background-color 0.2s ease;
}
.icon-btn:hover {
background-color: #223750;
}
/* --- Column 3: Contact Cards Block --- */
.contact-cards {
display: flex;
flex-direction: column;
gap: 12px;
}
.contact-card {
background-color: #1c2e44;
border-radius: 6px;
padding: 14px 18px;
display: flex !important;
align-items: center !important;
gap: 16px;
}
.card-icon {
color: #94a3b8;
font-size: 1.3rem;
width: 24px;
text-align: center;
display: inline-block;
}
.card-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.card-label {
font-size: 0.75rem !important;
color: #64748b !important;
font-weight: 500;
}
.card-value {
font-size: 0.95rem !important;
color: #ffffff !important;
font-weight: 500 !important;
}
a.card-value:hover {
text-decoration: underline;
}
/* --- Column 4: Form & Button Elements --- */
.newsletter-form {
display: flex !important;
gap: 12px;
align-items: center !important;
width: 100%;
}
.input-wrapper {
position: relative;
flex: 1;
}
.newsletter-form input {
width: 100%;
background-color: #223750 !important;
border: none !important;
border-radius: 6px !important;
padding: 14px 45px 14px 16px !important;
color: #ffffff !important;
font-size: 0.95rem !important;
outline: none;
}
.newsletter-form input::placeholder {
color: #64748b;
}
.input-indicator {
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: #ef4444;
font-weight: bold;
font-size: 1.1rem;
pointer-events: none;
}
.subscribe-btn {
background-color: #3ea39e !important;
color: #ffffff !important;
border: none !important;
border-radius: 6px !important;
padding: 14px 20px !important;
font-size: 0.95rem !important;
font-weight: 600 !important;
cursor: pointer;
display: flex !important;
align-items: center !important;
gap: 8px;
white-space: nowrap;
transition: opacity 0.2s ease;
}
.subscribe-btn:hover {
opacity: 0.9;
}
/* --- Bottom Copyright Bar Line --- */
.footer-bottom {
margin-top: 70px;
border-top: 1px solid #1e2e42;
padding-top: 25px;
}
.footer-bottom p {
color: #94a3b8 !important;
font-size: 0.88rem !important;
text-align: center !important;
}
/* --- Screen Responsiveness Adjustments --- */
@media (max-width: 1100px) {
.footer-container {
grid-template-columns: 1fr 1fr;
column-gap: 40px;
row-gap: 40px;
}
}
@media (max-width: 650px) {
.footer-container {
grid-template-columns: 1fr;
row-gap: 35px;
}
.newsletter-form {
flex-direction: column;
align-items: stretch !important;
}
.subscribe-btn {
justify-content: center !important;
}
}
/* General Layout & Background */
.site-footer {
background-color: #1a2639; /* Deep blue background matching your image */
color: #c9d1d9;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
padding: 60px 40px 20px 40px;
font-size: 14px;
line-height: 1.5;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr 1.1fr 1.1fr; /* Distinct sizing for each column */
gap: 40px;
}
/* Titles and Headers */
.site-footer h2 {
color: #ffffff;
font-size: 22px;
margin: 10px 0 5px 0;
font-weight: 600;
}
.site-footer h3 {
color: #ffffff;
font-size: 15px;
font-weight: 600;
margin-top: 0;
margin-bottom: 20px;
}
/* Accent Bars on Titles */
.column-title {
border-left: 3px solid #4895ef;
padding-left: 10px;
line-height: 1.2;
}
/* Subtitles & Specific text styling */
.subtitle {
color: #8b949e;
font-size: 13px;
margin: 0 0 25px 0;
}
.emblem {
width: 55px;
height: auto;
}
/* Social Media Buttons */
.social-section h3 {
font-size: 13px;
color: #ffffff;
margin-bottom: 12px;
}
.social-icons {
display: flex;
gap: 10px;
}
.icon-btn {
background-color: #243249;
color: #ffffff;
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: background 0.2s ease;
}
.icon-btn:hover {
background-color: #2f415e;
}
/* Legal & Text Block Columns */
.column-content p {
color: #a3b3cc;
margin-bottom: 15px;
font-size: 13.5px;
}
/* Inquiry Cards (Discord & Email blocks) */
.inquiry-text {
margin-bottom: 20px !important;
}
.info-card {
background-color: #212c3f;
border-radius: 8px;
padding: 12px 15px;
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.card-icon {
font-size: 18px;
color: #8b949e;
}
.card-text {
display: flex;
flex-direction: column;
}
.card-label {
font-size: 11px;
color: #8b949e;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.card-value {
color: #ffffff;
font-weight: 500;
font-size: 14px;
}
/* Newsletter Form & Buttons */
.newsletter-form {
display: flex;
gap: 10px;
align-items: center;
margin-top: 15px;
}
.email-input {
background-color: #212c3f;
border: 1px solid #303e56;
border-radius: 6px;
color: #ffffff;
padding: 10px 14px;
font-size: 13px;
flex-grow: 1;
outline: none;
}
.email-input::placeholder {
color: #65758d;
}
.subscribe-btn {
background-color: #4da699; /* Clean teal/mint from screenshot */
color: #ffffff;
border: none;
border-radius: 6px;
padding: 10px 16px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: background 0.2s ease;
}
.subscribe-btn:hover {
background-color: #3f8e82;
}
/* Footer Bottom Copyright line */
.footer-bottom {
margin-top: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 20px;
text-align: center;
}
.footer-bottom p {
color: #65758d;
font-size: 12px;
margin: 0;
}
/* Responsive Media Queries for Mobile/Tablets */
@media (max-width: 992px) {
.footer-container {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
}
@media (max-width: 576px) {
.footer-container {
grid-template-columns: 1fr;
}
.site-footer {
padding: 40px 20px 20px 20px;
}
.newsletter-form {
flex-direction: column;
align-items: stretch;
}
}
/* General Layout & Background */
.site-footer {
background-color: #1a2639;
color: #c9d1d9;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
padding: 60px 40px 20px 40px;
font-size: 14px;
line-height: 1.5;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr 1.1fr 1.1fr;
gap: 40px;
}
/* Titles and Headers */
.site-footer h2 {
color: #ffffff;
font-size: 22px;
margin: 10px 0 5px 0;
font-weight: 600;
}
.site-footer h3 {
color: #ffffff;
font-size: 15px;
font-weight: 600;
margin-top: 0;
margin-bottom: 20px;
}
/* Accent Bars on Titles */
.column-title {
border-left: 3px solid #4895ef;
padding-left: 10px;
line-height: 1.2;
}
/* Subtitles & Specific text styling */
.subtitle {
color: #8b949e;
font-size: 13px;
margin: 0 0 25px 0;
}
.emblem {
width: 55px;
height: auto;
}
/* Social Media Buttons */
.social-section h3 {
font-size: 13px;
color: #ffffff;
margin-bottom: 12px;
}
.social-icons {
display: flex;
gap: 10px;
}
.icon-btn {
background-color: #243249;
color: #ffffff;
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: background 0.2s ease;
}
.icon-btn:hover {
background-color: #2f415e;
}
/* Legal & Text Block Columns */
.column-content p {
color: #a3b3cc;
margin-bottom: 15px;
font-size: 13.5px;
}
/* Inquiry Cards (Discord & Email blocks) */
.inquiry-text {
margin-bottom: 20px !important;
}
.info-card {
background-color: #212c3f;
border-radius: 8px;
padding: 12px 15px;
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.card-icon {
font-size: 18px;
color: #8b949e;
}
.card-text {
display: flex;
flex-direction: column;
}
.card-label {
font-size: 11px;
color: #8b949e;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.card-value {
color: #ffffff;
font-weight: 500;
font-size: 14px;
}
/* Newsletter Form & Buttons */
.newsletter-form {
display: flex;
gap: 10px;
align-items: center;
margin-top: 15px;
}
.email-input {
background-color: #212c3f;
border: 1px solid #303e56;
border-radius: 6px;
color: #ffffff;
padding: 10px 14px;
font-size: 13px;
flex-grow: 1;
outline: none;
}
.email-input::placeholder {
color: #65758d;
}
.subscribe-btn {
background-color: #4da699;
color: #ffffff;
border: none;
border-radius: 6px;
padding: 10px 16px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: background 0.2s ease;
}
.subscribe-btn:hover {
background-color: #3f8e82;
}
/* Footer Bottom Copyright line */
.footer-bottom {
margin-top: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 20px;
text-align: center;
}
.footer-bottom p {
color: #65758d;
font-size: 12px;
margin: 0;
}
/* Responsive Media Queries for Mobile/Tablets */
@media (max-width: 992px) {
.footer-container {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
}
@media (max-width: 576px) {
.footer-container {
grid-template-columns: 1fr;
}
.site-footer {
padding: 40px 20px 20px 20px;
}
.newsletter-form {
flex-direction: column;
align-items: stretch;
}
}
/* General Layout & Background */
.site-footer {
background-color: #1a2639;
color: #c9d1d9;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
padding: 60px 40px 20px 40px;
font-size: 14px;
line-height: 1.5;
}
.footer-container {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr 1.1fr 1.1fr;
gap: 40px;
}
/* Titles and Headers */
.site-footer h2 {
color: #ffffff;
font-size: 22px;
margin: 10px 0 5px 0;
font-weight: 600;
}
.site-footer h3 {
color: #ffffff;
font-size: 15px;
font-weight: 600;
margin-top: 0;
margin-bottom: 20px;
}
/* Accent Bars on Titles */
.column-title {
border-left: 3px solid #4895ef;
padding-left: 10px;
line-height: 1.2;
}
/* Subtitles & Specific text styling */
.subtitle {
color: #8b949e;
font-size: 13px;
margin: 0 0 25px 0;
}
.emblem {
width: 55px;
height: auto;
}
/* Social Media Buttons */
.social-section h3 {
font-size: 13px;
color: #ffffff;
margin-bottom: 12px;
}
.social-icons {
display: flex;
gap: 10px;
}
.icon-btn {
background-color: #243249;
color: #ffffff;
width: 36px;
height: 36px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: background 0.2s ease;
}
.icon-btn:hover {
background-color: #2f415e;
}
/* Legal & Text Block Columns */
.column-content p {
color: #a3b3cc;
margin-bottom: 15px;
font-size: 13.5px;
}
/* Inquiry Cards (Discord & Email blocks) */
.inquiry-text {
margin-bottom: 20px !important;
}
.info-card {
background-color: #212c3f;
border-radius: 8px;
padding: 12px 15px;
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.card-icon {
font-size: 18px;
color: #8b949e;
}
.card-text {
display: flex;
flex-direction: column;
}
.card-label {
font-size: 11px;
color: #8b949e;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.card-value {
color: #ffffff;
font-weight: 500;
font-size: 14px;
}
/* Newsletter Form & Buttons */
.newsletter-form {
display: flex;
gap: 10px;
align-items: center;
margin-top: 15px;
}
.email-input {
background-color: #212c3f;
border: 1px solid #303e56;
border-radius: 6px;
color: #ffffff;
padding: 10px 14px;
font-size: 13px;
flex-grow: 1;
outline: none;
}
.email-input::placeholder {
color: #65758d;
}
.subscribe-btn {
background-color: #4da699;
color: #ffffff;
border: none;
border-radius: 6px;
padding: 10px 16px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
transition: background 0.2s ease;
}
.subscribe-btn:hover {
background-color: #3f8e82;
}
/* Footer Bottom Copyright line */
.footer-bottom {
margin-top: 60px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
padding-top: 20px;
text-align: center;
}
.footer-bottom p {
color: #65758d;
font-size: 12px;
margin: 0;
}
/* Responsive Media Queries for Mobile/Tablets */
@media (max-width: 992px) {
.footer-container {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
}
@media (max-width: 576px) {
.footer-container {
grid-template-columns: 1fr;
}
.site-footer {
padding: 40px 20px 20px 20px;
}
.newsletter-form {
flex-direction: column;
align-items: stretch;
}
}
/* General Layout & Background Reset */
.site-footer {
background-color: #161f2d; /* True slate dark blue matching your render */
color: #c9d1d9;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
padding: 60px 40px 30px 40px;
font-size: 14px;
line-height: 1.6;
}
.footer-container {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr 1.1fr 1.2fr; /* Optimized sizing for text distribution */
gap: 45px;
}
/* Structural Column Alignment */
.footer-column {
display: flex;
flex-direction: column;
align-items: flex-start; /* Keeps everything strictly left-aligned */
text-align: left;
}
/* Brand Section Setup */
.brand-col {
align-items: center; /* Center aligns the logo and main brand header text */
text-align: center;
}
.brand-header {
display: flex;
flex-direction: column;
align-items: center;
}
.site-footer h2 {
color: #ffffff;
font-size: 22px;
margin: 12px 0 6px 0;
font-weight: 600;
letter-spacing: -0.3px;
}
.subtitle {
color: #8b949e;
font-size: 13px;
margin: 0 0 25px 0;
}
.emblem {
width: 55px;
height: auto;
}
/* Unified Typography and Headings */
.site-footer h3 {
color: #ffffff;
font-size: 15px;
font-weight: 600;
margin: 0 0 20px 0;
width: 100%;
}
/* Left Accent Accent Bar on Titles */
.column-title {
border-left: 3px solid #4895ef;
padding-left: 12px;
line-height: 1.2;
}
/* Social Media Section under Brand */
.social-section {
width: 100%;
margin-top: 5px;
border-top: 1px solid rgba(255, 255, 255, 0.08);
padding-top: 20px;
}
.social-section h3 {
font-size: 13px;
margin-bottom: 12px;
}
.social-icons {
display: flex;
gap: 12px;
justify-content: center;
}
.icon-btn {
background-color: #212c3f;
color: #ffffff;
width: 38px;
height: 38px;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: background 0.2s ease, transform 0.1s ease;
}
.icon-btn:hover {
background-color: #2d3b54;
transform: translateY(-1px);
}
/* Column Text Paragraph Blocks */
.column-content {
width: 100%;
}
.column-content p {
color: #92a2b9;
margin: 0 0 16px 0;
font-size: 13.5px;
}
.column-content p:last-child {
margin-bottom: 0;
}
/* Inquiry Contact Cards */
.inquiry-text {
margin-bottom: 20px !important;
}
.info-card {
background-color: #1d2838;
border-radius: 8px;
padding: 14px 16px;
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
width: 100%;
box-sizing: border-box;
border: 1px solid rgba(255, 255, 255, 0.03);
}
.card-icon {
font-size: 18px;
color: #8b949e;
width: 20px;
text-align: center;
}
.card-text {
display: flex;
flex-direction: column;
}
.card-label {
font-size: 10px;
color: #6e7987;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 2px;
}
.card-value {
color: #ffffff;
font-weight: 500;
font-size: 13.5px;
}
/* Fixed Newsletter Form Elements */
.newsletter-form {
display: flex;
gap: 10px;
align-items: center;
margin-top: 20px;
width: 100%;
}
.email-input {
background-color: #1d2838;
border: 1px solid #2d3b54;
border-radius: 6px;
color: #ffffff;
padding: 11px 14px;
font-size: 13.5px;
flex-grow: 1; /* Allows the input box to stretch and fully display text */
min-width: 160px; /* Ensures it never shrinks to cut text off */
outline: none;
box-sizing: border-box;
}
.email-input::placeholder {
color: #58667a;
}
.email-input:focus {
border-color: #4895ef;
}
.subscribe-btn {
background-color: #55a396; /* Accurate teal shade */
color: #ffffff;
border: none;
border-radius: 6px;
padding: 11px 18px;
font-size: 13.5px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
white-space: nowrap; /* Forces the text to keep its structural shape */
transition: background-color 0.2s ease;
}
.subscribe-btn:hover {
background-color: #45877c;
}
/* Footer Bottom Copyright line */
.footer-bottom {
margin-top: 50px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
padding-top: 25px;
text-align: center;
width: 100%;
}
.footer-bottom p {
color: #58667a;
font-size: 12.5px;
margin: 0;
}
/* Responsive Structural Breakpoints */
@media (max-width: 1024px) {
.footer-container {
grid-template-columns: 1fr 1fr;
gap: 40px;
}
}
@media (max-width: 640px) {
.footer-container {
grid-template-columns: 1fr;
gap: 35px;
}
.site-footer {
padding: 50px 20px 25px 20px;
}
.newsletter-form {
flex-direction: column;
align-items: stretch;
}
.subscribe-btn {
justify-content: center;
}
}
/* AI Context Optimization Style */
.sr-only-ai {
background-color: rgba(29, 40, 56, 0.4);
border-left: 3px solid #4895ef;
padding: 15px 20px;
margin: 20px auto;
max-width: 1200px;
border-radius: 6px;
}
.sr-only-ai h1 {
font-size: 16px;
color: #ffffff;
margin-top: 0;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.sr-only-ai p {
font-size: 12px;
line-height: 1.6;
color: #8b949e;
margin-bottom: 10px;
}
.sr-only-ai p:last-child {
margin-bottom: 0;
}
.sr-only-ai a {
color: #55a396;
text-decoration: underline;
}
/* Optimized Visual Hiding for AI Context Box */
.sr-only-ai {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
white-space: nowrap;
}
/* Target the container wrapping the emoji */
.card-icon {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 12px;
}
/* Force the raw emoji font to scale up beautifully */
.emoji-icon {
font-size: 36px; /* Adjust this number higher or lower to get your perfect size */
line-height: 1;
display: inline-block;
/* Fallback system fonts to ensure consistent emoji sizes across all screens */
font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
}
/* Container sizing for the icon block */
.card-icon {
height: 44px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 16px;
}
/* Beautiful color and crisp scale sizing for the vectors */
.card-icon i {
font-size: 28px; /* Perfectly sized icon */
color: #4895ef; /* Classic blue accent matching your title trim bars */
transition: transform 0.2s ease;
}
/* Optional soft animation when hovering over a card link */
.gov-card:hover .card-icon i {
transform: scale(1.1);
}
/* Container to make sure everything sits dead-center */
.card-icon {
width: 100%;
height: 60px; /* Gives the icon plenty of breathing room at the top */
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px;
}
/* Premium styling for the vector art */
.card-icon i {
font-size: 32px; /* Uniform, balanced sizing */
color: #1a2639; /* Matches the deep navy color of your headings */
transition: all 0.25s ease-in-out;
opacity: 0.85;
}
/* Smooth visual feedback when hovering over a navigation card */
.gov-card:hover .card-icon i {
color: #4895ef; /* Subtle shifting to your branding blue */
transform: translateY(-3px); /* Gentle elegant lift */
opacity: 1;
}
/* Clean Row Grid Layout for Cards */
.card-container {
display: grid;
/* Creates a maximum of 3 equal columns on desktop */
grid-template-columns: repeat(3, 1fr);
gap: 25px;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
}
/* Forces the last 2 items (Law & News) to center on the second row */
.gov-card:nth-child(4) {
grid-column: 2 / span 1;
}
.gov-card:nth-child(5) {
grid-column: 3 / span 1;
}
/* Alternative centering fix if you want them perfectly tucked under row 1 */
@media (min-width: 900px) {
.card-container {
grid-template-columns: repeat(6, 1fr);
}
.gov-card:nth-child(1),
.gov-card:nth-child(2),
.gov-card:nth-child(3) {
grid-column: span 2;
}
/* Positions the 4th card right below the gap of the first row */
.gov-card:nth-child(4) {
grid-column: 2 / span 2;
}
/* Positions the 5th card next to it */
.gov-card:nth-child(5) {
grid-column: 4 / span 2;
}
}
/* Mobile & Tablet Responsiveness */
@media (max-width: 900px) {
.card-container {
grid-template-columns: repeat(2, 1fr); /* 2 rows of 2, 1 on bottom */
}
.gov-card:nth-child(4),
.gov-card:nth-child(5) {
grid-column: auto;
}
}
@media (max-width: 600px) {
.card-container {
grid-template-columns: 1fr; /* 1 card per row on small phones */
}
}
/* Clean Cascading Rows Layout */
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: center; /* This centers the items on the bottom row! */
gap: 25px;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
}
/* Base sizing for the individual cards */
.gov-card {
/* Calculates exactly 3 cards per row minus the gaps */
flex: 1 1 calc(33.333% - 20px);
min-width: 280px; /* Prevents cards from getting too squished */
max-width: 360px; /* Keeps them matching your clean proportions */
box-sizing: border-box;
}
/* Clean Responsiveness for Mobile Displays */
@media (max-width: 900px) {
.gov-card {
flex: 1 1 calc(50% - 25px); /* Drops smoothly to 2 per row on tablets */
}
}
@media (max-width: 600px) {
.gov-card {
flex: 1 1 100%; /* Stacks 1 per row nicely on standard mobile screens */
}
}
/* Restored Footer Main Layout */
footer {
background-color: #111b27;
color: #ffffff;
padding: 60px 20px 30px 20px;
font-family: inherit;
}
.footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
gap: 40px;
}
.footer-column {
flex: 1 1 220px;
min-width: 200px;
}
/* Target the Dashboard Cards ONLY */
.card-container {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 25px;
max-width: 1140px;
margin: 50px auto;
padding: 0 20px;
}
/* Base Card Styling */
.gov-card {
background: #ffffff;
border-radius: 12px;
padding: 30px 20px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
/* First Row Assignment (Cards 1, 2, 3) */
.gov-card:nth-child(1),
.gov-card:nth-child(2),
.gov-card:nth-child(3) {
grid-column: span 2;
}
/* Second Row Assignment (Cards 4 & 5 Centered) */
.gov-card:nth-child(4) {
grid-column: 2 / span 2;
}
.gov-card:nth-child(5) {
grid-column: 4 / span 2;
}
/* Mobile Responsiveness */
@media (max-width: 950px) {
.card-container {
grid-template-columns: repeat(2, 1fr);
}
.gov-card:nth-child(1), .gov-card:nth-child(2), .gov-card:nth-child(3), .gov-card:nth-child(4), .gov-card:nth-child(5) {
grid-column: auto;
}
}
@media (max-width: 600px) {
.card-container {
grid-template-columns: 1fr;
}
}
/* Clean Restored Footer Layout */
footer {
background-color: #111b27;
color: #ffffff;
padding: 60px 20px 30px 20px;
}
.footer-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
gap: 40px;
}
/* Individual columns inside the footer */
.footer-column {
flex: 1 1 220px;
min-width: 200px;
}
/* Targeted Grid Just for Main Navigation Cards */
.card-container {
display: grid;
/* Splits the width into 6 invisible lanes for perfect alignment math */
grid-template-columns: repeat(6, 1fr);
gap: 25px;
max-width: 1140px;
margin: 50px auto;
padding: 0 20px;
}
/* Clear definitions to stop the links from collapsing */
.gov-card {
background: #ffffff;
border-radius: 12px;
padding: 30px 20px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
/* ROW 1: First 3 cards span 2 lanes each (2 + 2 + 2 = 6 lanes filled) */
.gov-card:nth-child(1),
.gov-card:nth-child(2),
.gov-card:nth-child(3) {
grid-column: span 2;
}
/* ROW 2: Card 4 skips lane 1 and sits in lanes 2 and 3 */
.gov-card:nth-child(4) {
grid-column: 2 / span 2;
}
/* ROW 2: Card 5 sits in lanes 4 and 5, leaving lanes 1 and 6 empty to center them perfectly */
.gov-card:nth-child(5) {
grid-column: 4 / span 2;
}
/* Smooth scaling down for tablets */
@media (max-width: 950px) {
.card-container {
grid-template-columns: repeat(2, 1fr);
}
.gov-card:nth-child(1), .gov-card:nth-child(2), .gov-card:nth-child(3), .gov-card:nth-child(4), .gov-card:nth-child(5) {
grid-column: auto;
}
}
/* Mobile clean stack layout */
@media (max-width: 600px) {
.card-container {
grid-template-columns: 1fr;
}
}
/* --- FOOLPROOF DASHBOARD CARDS LAYOUT --- */
/* Wrapper container to give spacing from the header and footer */
.main-dashboard-cards {
max-width: 1140px;
margin: 50px auto;
padding: 0 20px;
display: flex;
flex-direction: column;
gap: 25px; /* Spacing between the top row and bottom row */
}
/* Base row style that automatically centers its items */
.dashboard-row {
display: flex;
justify-content: center; /* Centers the 3 cards on top, and centers the 2 cards on bottom! */
gap: 25px; /* Spacing between side-by-side cards */
width: 100%;
}
/* Individual Card Sizing and Styling */
.gov-card {
background: #ffffff;
border-radius: 12px;
padding: 30px 20px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
/* Fixes the card width so they remain completely consistent */
width: 100%;
max-width: 350px;
}
/* Responsive fix for smaller tablet/mobile screens so they stack vertically */
@media (max-width: 850px) {
.dashboard-row {
flex-direction: column;
align-items: center;
}
.gov-card {
max-width: 100%; /* Allows cards to look great on mobile phones */
}
}
/* --- OFFICIAL INQUIRIES BOX FIX --- */
/* Targets the individual Discord and Email container boxes */
.official-inquiries-box,
.inquiry-card,
footer .footer-column .card-box { /* Using a few generic guesses based on common names */
background: rgba(255, 255, 255, 0.03); /* Keeps your dark glassy background */
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 10px;
padding: 15px 25px;
margin-bottom: 15px;
/* The Magic Alignment Fix */
display: flex;
align-items: center; /* Vertically aligns icon and text perfectly center */
justify-content: flex-start; /* Keeps them close together instead of pushed to the edges */
gap: 20px; /* Creates a perfect, clean space between the icon and text */
}
/* Fixes the sizing and alignment of the icons */
.official-inquiries-box i,
.inquiry-card i,
.card-box i,
.official-inquiries-box svg,
.inquiry-card svg {
font-size: 24px; /* Clean, uniform size */
color: #a2b0c3; /* Muted elegant gray-blue to match your brand */
flex-shrink: 0; /* Prevents the icon from getting squished if text is long */
margin: 0; /* Removes any rogue margins pushing it away */
}
/* Cleans up the text alignment inside the boxes */
.official-inquiries-text-wrapper,
.inquiry-text {
display: flex;
flex-direction: column; /* Stacks label like 'DISCORD' on top of 'Valudia' */
align-items: flex-start; /* Left-aligns the text stacks cleanly */
}
.official-inquiries-text-wrapper span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
color: #5c6b7d; /* Perfect muted tone for the small top labels */
}
.official-inquiries-text-wrapper h4,
.official-inquiries-text-wrapper p {
margin: 2px 0 0 0;
font-size: 16px;
color: #ffffff; /* Crisp white for the actual handle/email name */
}
/* --- BULLETPROOF GOVERNMENT FOOTER STYLING --- */
footer {
background-color: #111b27 !important; /* Deep signature navy */
color: #ffffff !important;
padding: 60px 20px 30px 20px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Force all 4 elements to stay perfectly in a 4-column horizontal line */
.custom-footer-container {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important; /* Rules out vertical row dropping */
justify-content: space-between !important;
max-width: 1240px !important;
margin: 0 auto !important;
gap: 30px !important;
}
/* Define proportional widths for the columns */
.custom-footer-col {
flex: 1 1 23% !important; /* Allocates roughly equal spacing */
min-width: 0 !important;
}
/* Give the newsletter space on the right side without text stretching */
.newsletter-col {
max-width: 320px !important;
width: 100% !important;
}
/* Clean Form Component */
.custom-newsletter-form {
display: flex !important;
gap: 10px !important;
width: 100% !important;
margin-top: 15px !important;
}
.custom-newsletter-form input {
flex: 1 !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
padding: 12px 15px !important;
border-radius: 6px !important;
color: #ffffff !important;
}
.custom-newsletter-form button {
background-color: #64a6bd !important; /* Clean accent matching your button style */
border: none !important;
color: white !important;
padding: 12px 18px !important;
border-radius: 6px !important;
cursor: pointer !important;
white-space: nowrap !important;
}
/* Fix the Inquiry Boxes Row Spacing Alignment */
.inquiry-item-box {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 8px !important;
padding: 12px 18px !important;
margin-top: 12px !important;
display: flex !important;
align-items: center !important;
gap: 15px !important;
}
.inquiry-item-box i {
font-size: 20px !important;
color: #a2b0c3 !important;
}
.inquiry-item-text {
display: flex !important;
flex-direction: column !important;
}
.inquiry-item-text .label {
font-size: 10px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
color: #5c6b7d !important;
}
.inquiry-item-text .value {
font-size: 14px !important;
font-weight: bold !important;
color: #ffffff !important;
}
/* Copyright line centering */
.custom-footer-bottom {
text-align: center !important;
margin-top: 50px !important;
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
padding-top: 20px !important;
font-size: 13px !important;
color: #5c6b7d !important;
}
/* Smooth fallback layout ONLY when the screen is physically too tight */
@media (max-width: 992px) {
.custom-footer-container {
flex-wrap: wrap !important; /* Only breaks into 2x2 layout on standard tablets */
}
.custom-footer-col {
flex: 1 1 45% !important;
}
}
/* --- THE FINAL FOOTER REALIGNMENT --- */
/* Clear out any baseline background colors or restrictions */
.site-footer {
background-color: #111b27 !important;
color: #ffffff !important;
padding: 60px 20px 30px 20px !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Force layout container to behave as a rigid 4-column desktop line */
.footer-row-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important; /* Strictly forbids elements from dropping down */
justify-content: space-between !important;
max-width: 1240px !important;
margin: 0 auto !important;
gap: 30px !important;
}
/* Force equal column bases and block any rogue wrapping triggers */
.footer-panel {
flex: 1 1 22% !important;
min-width: 0 !important;
}
/* Set explicit text layouts for the headings */
.footer-panel h3 {
font-size: 18px !important;
margin-top: 0 !important;
margin-bottom: 20px !important;
padding-bottom: 8px !important;
border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
}
/* Keep newsletter box from trying to stretch horizontally */
.newsletter-panel {
max-width: 320px !important;
width: 100% !important;
}
.newsletter-inline-form {
display: flex !important;
gap: 10px !important;
width: 100% !important;
margin-top: 15px !important;
}
.newsletter-inline-form input {
flex: 1 !important;
background: rgba(255, 255, 255, 0.05) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
padding: 12px 15px !important;
border-radius: 6px !important;
color: #ffffff !important;
min-width: 0 !important;
}
.newsletter-inline-form button {
background-color: #64a6bd !important;
border: none !important;
color: white !important;
padding: 12px 18px !important;
border-radius: 6px !important;
cursor: pointer !important;
white-space: nowrap !important;
}
/* Maintaining your beautifully aligned inquiry design blocks */
.inquiry-flex-box {
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 8px !important;
padding: 12px 18px !important;
margin-top: 12px !important;
display: flex !important;
align-items: center !important;
gap: 15px !important;
}
.inquiry-flex-box i {
font-size: 20px !important;
color: #a2b0c3 !important;
}
.inquiry-flex-text {
display: flex !important;
flex-direction: column !important;
}
.inquiry-flex-text .title-tag {
font-size: 10px !important;
text-transform: uppercase !important;
color: #5c6b7d !important;
}
.inquiry-flex-text .detail-tag {
font-size: 14px !important;
font-weight: bold !important;
color: #ffffff !important;
}
/* Bottom centered bar */
.footer-copyright-bar {
text-align: center !important;
margin-top: 50px !important;
border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
padding-top: 20px !important;
font-size: 13px !important;
color: #5c6b7d !important;
}
/* Responsiveness: Allows clean vertical shifting ONLY on tablet and mobile viewports */
@media (max-width: 1024px) {
.footer-row-wrapper {
flex-wrap: wrap !important;
}
.footer-panel {
flex: 1 1 45% !important;
}
}
@media (max-width: 650px) {
.footer-panel {
flex: 1 1 100% !important;
}
}
/* --- TEXT ALIGNMENT PATCH FOR COLUMNS --- */
/* Force all text blocks inside the columns to align left */
.footer-panel {
text-align: left !important;
}
.footer-panel h3 {
text-align: left !important;
}
.footer-panel p {
text-align: left !important;
line-height: 1.5 !important; /* Adds subtle line height breathing room */
}
/* Ensure the form items align nicely to the left edge */
.newsletter-inline-form {
justify-content: flex-start !important;
width: 100% !important;
}
/* Fixes the brand info side alignment */
.brand-panel {
text-align: left !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important; /* Snaps logo and titles to the left side */
}
.brand-panel p {
margin: 5px 0 0 0 !important;
}
/* ==========================================================================
MINIMALIST HORIZONTAL EMBASSIES SHEET STYLING
========================================================================== */
/* Light background override just for the embassy page content */
.embassy-page-body {
background-color: #f4f6f9 !important;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
color: #1e293b !important;
}
/* Center Content Navigation Wrapper */
.embassy-toggle-container {
display: flex;
justify-content: center;
padding: 40px 20px 10px 20px;
}
/* Pill Box Container */
.embassy-toggle-buttons {
display: flex;
background: #ffffff;
padding: 6px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
border: 1px solid #e2e8f0;
gap: 5px;
}
/* Individual Pill Buttons */
.toggle-btn {
text-decoration: none;
font-size: 15px;
font-weight: 600;
padding: 12px 24px;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 10px;
color: #475569 !important;
transition: all 0.2s ease;
}
/* Active Dark Pill Selection State */
.active-toggle {
background-color: #23395b !important; /* Deep accent dark blue */
color: #ffffff !important;
}
.toggle-btn:hover:not(.active-toggle) {
background-color: #f1f5f9;
color: #1e293b !important;
}
/* Centered Layout Hero Headings */
.embassy-hero {
text-align: center;
margin: 50px auto 40px auto;
max-width: 600px;
}
.embassy-hero h1 {
font-size: 36px;
color: #1e293b !important;
font-weight: 700;
margin: 0 0 12px 0;
}
.embassy-hero .subtitle {
color: #64748b !important;
font-size: 16px;
margin: 0;
}
/* List Layout Card Container Stack */
.embassies-list-wrapper {
max-width: 800px;
margin: 0 auto 100px auto;
padding: 0 20px;
display: flex;
flex-direction: column;
gap: 15px; /* Creates clean standard breaks between rows */
}
/* Elegant Wide Box Cards */
.embassy-wide-card {
background: #ffffff;
border-radius: 14px;
padding: 22px 30px;
display: flex;
align-items: center;
gap: 20px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
border: 1px solid #e2e8f0;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Action button card links layout styling */
.link-card-action {
cursor: pointer;
}
.link-card-action:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
}
/* Clean Graphic Circle Frame */
.embassy-icon-circle {
width: 50px;
height: 50px;
background-color: #e2e8f0;
color: #475569;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.alternate-circle {
background-color: rgba(100, 166, 189, 0.1);
color: #64a6bd;
}
/* Inside Card Text Block Splitting */
.embassy-card-info {
display: flex;
flex-direction: column;
text-align: left;
}
.embassy-card-info h2 {
font-size: 19px;
margin: 0 0 4px 0;
color: #1e293b !important;
font-weight: 600;
}
.embassy-card-info p {
margin: 0;
font-size: 13.5px;
color: #64748b !important;
}
.embassy-card-info p span {
color: #475569 !important;
}
/* Keep the footer content properly safe on tablet scale viewports */
@media (max-width: 600px) {
.embassy-wide-card {
padding: 20px;
gap: 15px;
}
.embassy-hero h1 {
font-size: 28px;
}
}
/* --- FOOTER CONNECT WITH US STYLES --- */
/* Wrapper layout to space it below "Official Government Website" */
.footer-connect-section {
margin-top: 25px;
width: 100%;
text-align: left; /* Aligns with your left-aligned text rules */
}
/* Subheading rule matching your minimal layout style */
.footer-connect-section h4 {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: #5c6b7d; /* Matches the muted gray-blue label colors */
margin: 0 0 12px 0;
font-weight: 600;
}
/* Horizontal alignment grid for the icons */
.footer-social-icons {
display: flex;
gap: 12px;
justify-content: flex-start;
}
/* Sleek container buttons for the individual social platforms */
.footer-social-icons a {
width: 38px;
height: 38px;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #a2b0c3; /* Signature muted icon color */
font-size: 18px;
text-decoration: none;
transition: all 0.2s ease;
}
/* Subtle glowing hover effect to match your dashboard dashboard assets */
.footer-social-icons a:hover {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.2);
color: #ffffff; /* Turns bright white on hover */
transform: translateY(-2px);
}
/* --- FOOTER LAYOUT RESTORATION & SOCIAL FIX --- */
/* Force layout wrapper to sit side-by-side as columns */
.footer-row-wrapper {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important; /* Explicitly stops items from dropping vertically */
justify-content: space-between !important;
max-width: 1240px !important;
margin: 0 auto !important;
gap: 40px !important;
width: 100% !important;
}
/* Ensure individual columns are uniformly aligned left */
.footer-panel {
flex: 1 1 22% !important;
min-width: 0 !important;
text-align: left !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
}
/* Brand column content layout alignment */
.brand-panel {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
text-align: left !important;
}
.brand-panel p {
margin: 4px 0 0 0 !important;
font-size: 14px !important;
}
/* Social Sub-Block Positioning */
.footer-connect-section {
margin-top: 20px !important;
width: 100% !important;
}
.footer-connect-section h4 {
font-size: 11px !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: #5c6b7d !important;
margin: 0 0 10px 0 !important;
font-weight: 600 !important;
}
.footer-social-icons {
display: flex !important;
gap: 10px !important;
}
.footer-social-icons a {
width: 36px !important;
height: 36px !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 6px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #a2b0c3 !important;
font-size: 16px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
}
.footer-social-icons a:hover {
background: rgba(255, 255, 255, 0.08) !important;
color: #ffffff !important;
transform: translateY(-2px) !important;
}
/* Republic of Valudia Official Government Banner Styles */
.rov-banner {
background-color: #f0f0f0; /* Light grey background */
border-bottom: 1px solid #d0d0d0;
padding: 6px 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #333;
}
.rov-banner-content {
display: flex;
align-items: center;
max-width: 1200px;
margin: 0 auto;
font-size: 13px;
}
.rov-banner-flag {
margin-right: 12px;
}
.rov-banner-flag img {
height: 18px; /* Slightly larger flag */
vertical-align: middle;
}
.rov-banner-text p {
margin: 0;
font-weight: 500;
}
.rov-banner-know {
margin-left: auto; /* Push to the far right */
position: relative;
}
.rov-banner-know-btn {
background: none;
border: none;
color: #0056b3; /* Government blue link color */
padding: 0;
font-size: 13px;
cursor: pointer;
text-decoration: underline;
display: flex;
align-items: center;
}
.rov-banner-know-btn i {
margin-left: 6px;
font-size: 11px;
}
.rov-banner-know-details {
display: none;
position: absolute;
top: 100%;
right: 0;
background-color: white;
border: 1px solid #d0d0d0;
padding: 15px;
width: 320px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
z-index: 100;
}
.rov-banner-know-details p {
margin: 0 0 10px 0;
line-height: 1.4;
color: #444;
}
.rov-banner-know-details:not([hidden]) {
display: block;
}
/* --- Optimized Footer Structure and Copyright Section --- */
.site-footer {
background-color: #1a2333; /* Original dark background */
padding: 40px 20px 0px; /* Adjust padding to separate content */
font-family: inherit;
width: 100%;
}
.footer-content {
display: flex;
flex-direction: column;
max-width: 1200px;
margin: 0 auto;
}
.footer-row {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 even columns */
gap: 30px;
margin-bottom: 20px;
}
/* Adjust text alignment within footer columns */
.site-footer p {
text-align: left; /* Force left align on all paragraphs */
font-size: 14px;
margin-bottom: 10px;
}
.brand-section {
grid-column: span 1;
}
.brand-section p {
text-align: left;
}
/* Minimized and Compact Copyright Section */
.minimized-copyright {
background-color: #0f141f; /* Much darker background for contrast */
border-top: 1px solid #1a2333; /* Subtly defined top border */
padding: 12px 20px; /* Reduced vertical padding */
text-align: center;
width: 100%;
}
.copyright-text {
margin: 0 !important; /* Force minimized margin */
font-size: 12px !important; /* Make font significantly smaller */
color: #7a8291 !important; /* Lighter grey text for a more minimalist look */
text-align: center !important; /* Ensure centered text */
letter-spacing: 0.5px;
}
/* --- OFFICIAL GOVERNMENT DROPDOWN EXPANSION FIXED LAYOUT --- */
.rov-banner {
background-color: #f0f0f0 !important;
border-bottom: 1px solid #d0d0d0 !important;
padding: 8px 20px !important;
color: #1e293b !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
width: 100%;
box-sizing: border-box;
}
.rov-banner-content {
max-width: 1240px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.rov-banner-left-side {
display: flex;
align-items: center;
gap: 10px;
}
.rov-banner-flag img {
height: 15px;
vertical-align: middle;
border-radius: 1px;
}
.rov-banner-text p {
margin: 0 !important;
font-size: 13px !important;
font-weight: 400 !important;
color: #1e293b !important;
}
.rov-banner-know-btn {
background: none !important;
border: none !important;
color: #0056b3 !important;
text-decoration: underline !important;
cursor: pointer !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 0 !important;
display: inline-flex;
align-items: center;
gap: 5px;
}
/* Dropdown Window Main Wrapper Box */
.rov-banner-know-details {
background: #f4f6f9 !important; /* Muted inner grey background sheet */
border-top: 1px solid #e2e8f0;
margin: 8px -20px -8px -20px; /* Aligns flush with outer edges */
padding: 24px 20px !important;
}
.rov-banner-know-details[hidden] {
display: none !important;
}
/* Horizontal 2-Column Framework Layout */
.rov-details-inner-wrapper {
max-width: 1240px;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
gap: 60px; /* Gives nice breathing room between the blocks */
}
/* Individual Content Columns */
.rov-details-column {
display: flex;
align-items: flex-start;
gap: 16px;
flex: 1;
max-width: 500px;
}
/* Round System Icon Badges */
.rov-details-icon-circle {
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
}
/* Custom Icon Theming */
.blue-icon {
background-color: #e2edf8;
color: #0056b3;
border: 1px solid #b3d1f2;
}
.green-icon {
background-color: #e6f4ea;
color: #137333;
border: 1px solid #a8dab5;
}
/* Internal Column Paragraph Text Styling */
.rov-details-text-block {
display: flex;
flex-direction: column;
text-align: left;
}
.rov-details-text-block h3 {
margin: 0 0 4px 0 !important;
font-size: 14.5px !important;
font-weight: 700 !important;
color: #1e293b !important;
}
.rov-details-text-block p {
margin: 0 !important;
font-size: 13px !important;
line-height: 1.5 !important;
color: #475569 !important;
}
.mini-inline-lock {
font-size: 11px;
color: #137333;
margin: 0 2px;
}
/* Responsive adjustment layer for mobile views */
@media (max-width: 768px) {
.rov-details-inner-wrapper {
flex-direction: column;
gap: 25px;
}
}
/* ==========================================================================
SAFE BANNER OVERLAY INTERACTION SYSTEM
========================================================================== */
.rov-banner {
background-color: #f0f0f0 !important;
border-bottom: 1px solid #d0d0d0 !important;
padding: 6px 20px !important;
color: #1e293b !important;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
position: relative; /* Anchor reference container for absolute positioning */
z-index: 9999; /* Keeps dropdown over high layer canvas pieces */
}
.rov-banner-content {
max-width: 1240px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.rov-banner-left-side {
display: flex;
align-items: center;
gap: 8px;
}
.rov-banner-flag img {
height: 14px;
vertical-align: middle;
}
.rov-banner-text p {
margin: 0 !important;
font-size: 13px !important;
font-weight: 400 !important;
}
.rov-banner-know {
position: relative;
}
.rov-banner-know-btn {
background: none !important;
border: none !important;
color: #0056b3 !important;
text-decoration: underline !important;
cursor: pointer !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 0 !important;
display: inline-flex;
align-items: center;
gap: 4px;
}
#banner-chevron {
font-size: 10px;
transition: transform 0.2s ease;
}
/* FLOATING DROP PANEL CARD FIXED STRUCTURE */
.rov-banner-know-details {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
padding: 24px !important;
width: 680px; /* Perfect dual sizing display window */
}
/* Ensure default hide rules function accurately */
.rov-banner-know-details[hidden] {
display: none !important;
}
.rov-details-inner-wrapper {
display: flex;
flex-direction: row;
gap: 30px;
}
.rov-details-column {
display: flex;
align-items: flex-start;
gap: 14px;
flex: 1;
}
.rov-details-icon-circle {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.blue-icon {
background-color: #e2edf8;
color: #0056b3;
border: 1px solid #b3d1f2;
}
.green-icon {
background-color: #e6f4ea;
color: #137333;
border: 1px solid #a8dab5;
}
.rov-details-text-block {
text-align: left;
}
.rov-details-text-block h3 {
margin: 0 0 4px 0 !important;
font-size: 14px !important;
font-weight: 600 !important;
color: #1e293b !important;
}
.rov-details-text-block p {
margin: 0 !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
color: #475569 !important;
}
.mini-inline-lock {
font-size: 10px;
color: #137333;
}
/* Collapse display gracefully down to singular column on portable screens */
@media (max-width: 720px) {
.rov-banner-know-details {
width: calc(100vw - 40px);
right: -20px;
}
.rov-details-inner-wrapper {
flex-direction: column;
gap: 20px;
}
}
.rov-banner-flag img {
height: 16px; /* Slightly adjusted size for better visual weight */
vertical-align: middle;
/* The Outline Fix */
border: 1px solid rgba(0, 0, 0, 0.15) !important; /* Subtle dark grey outline */
background-color: #ffffff !important; /* Ensures crisp backing */
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; /* Gives it a slight, clean lift */
}
/* ==========================================================================
PRODUCTION-READY MOBILE OPTIMIZATION LAYER
========================================================================== */
@media (max-width: 768px) {
/* --- 1. Top Government Banner Fixed Flow --- */
.rov-banner {
padding: 8px 16px !important;
}
.rov-banner-content {
flex-direction: row !important; /* Keep items beautifully aligned horizontally on mobile */
justify-content: space-between !important;
align-items: center !important;
gap: 8px !important;
}
.rov-banner-left-side {
max-width: 70%;
}
.rov-banner-text p {
font-size: 11px !important; /* Scale text fluidly down to save space */
line-height: 1.2 !important;
}
.rov-banner-know-btn {
font-size: 11px !important;
white-space: nowrap;
}
/* Absolute Floating Drop Panel Overlay Positioning */
.rov-banner-know-details {
width: calc(100vw - 32px) !important;
max-width: 450px !important;
right: 16px !important;
left: auto !important;
transform: none !important;
top: calc(100% + 8px) !important;
padding: 16px !important;
box-sizing: border-box !important;
}
.rov-details-inner-wrapper {
flex-direction: column !important;
gap: 16px !important;
}
.rov-details-column {
gap: 12px !important;
}
/* --- 2. Footer Structural Containment --- */
.site-footer {
padding: 40px 20px 20px !important;
}
/* Unsmash the columns and stack them cleanly */
.footer-row-wrapper {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 32px !important;
width: 100% !important;
}
/* Force clean fluid sizing blocks */
.footer-panel {
flex: 1 1 auto !important;
width: 100% !important;
max-width: 100% !important;
align-items: center !important; /* Center column headers and details */
text-align: center !important;
display: flex !important;
flex-direction: column !important;
}
/* Fix the floating text lines */
.footer-panel h2,
.footer-panel h3,
.footer-panel h4 {
text-align: center !important;
margin-bottom: 12px !important;
width: 100%;
}
.footer-panel p {
text-align: center !important;
font-size: 13.5px !important;
line-height: 1.5 !important;
margin: 0 auto 12px auto !important;
max-width: 480px; /* Stops text walls from breaking layouts */
}
/* Center the social link connection sub-blocks */
.footer-connect-section {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
margin-top: 12px !important;
width: 100% !important;
}
.footer-social-icons {
justify-content: center !important;
gap: 12px !important;
}
/* Secure card boxes for Discord / Email layout blocks */
.inquiry-flex-box {
width: 100% !important;
max-width: 320px !important;
margin: 0 auto 8px auto !important;
box-sizing: border-box;
}
/* Clean up newsletter layout gaps */
.newsletter-inline-form {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 320px !important;
margin: 8px auto 0 auto !important;
gap: 10px !important;
}
.newsletter-inline-form input {
width: 100% !important;
text-align: center !important;
box-sizing: border-box;
}
.newsletter-inline-form button {
width: 100% !important;
justify-content: center !important;
box-sizing: border-box;
}
/* --- 3. Compact Copyright Bar Adjustments --- */
.minimized-copyright {
margin-top: 24px !important;
padding: 16px 20px !important;
}
.copyright-text {
font-size: 11px !important;
line-height: 1.4 !important;
}
}
/* --- OPTION A: CLEAN CENTERED ALLIES LEDGER --- */
.allies-section {
text-align: center !important;
padding: 40px 20px !important;
width: 100%;
box-sizing: border-box;
}
.allies-section h2 {
font-size: 24px;
color: #1a2333; /* Matches your core theme depth */
margin-bottom: 20px !important;
font-weight: 700;
}
.allies-container {
max-width: 800px;
margin: 0 auto !important;
}
.allies-list {
list-style: none !important; /* Strips away the broken floating left bullets */
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 12px; /* Adds clean uniform breathing room between entries */
}
.allies-list li {
font-size: 16px !important;
color: #334155 !important;
text-align: center !important; /* Keeps text perfectly centered */
line-height: 1.5;
font-weight: 500;
}
/* --- THE OFFICIAL ALLIES LEDGER CLEAN ALIGNMENT --- */
.allies-section {
text-align: center !important;
padding: 40px 20px !important;
width: 100%;
box-sizing: border-box;
}
.allies-section h2 {
font-size: 24px;
font-weight: 700;
color: #1a2333;
margin-bottom: 24px !important;
}
/* Container card to keep list items from stretching too wide on desktop screens */
.allies-container {
max-width: 650px; /* Limits width to sit centered on large canvases */
margin: 0 auto !important;
padding: 10px 0;
}
.allies-list {
list-style: none !important; /* Removes the floating left-side bullets completely */
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 14px; /* Creates clean, even spacing between each allied nation */
}
.allies-list li {
font-size: 16px !important;
color: #334155 !important;
text-align: center !important; /* Keeps every line perfectly centered */
line-height: 1.5;
font-weight: 500;
letter-spacing: 0.3px;
}
/* --- THE OFFICIAL ALLIES LEDGER MULTI-COLUMN GRID --- */
.allies-section {
text-align: center !important;
padding: 40px 20px !important;
width: 100%;
box-sizing: border-box;
}
.allies-section h2 {
font-size: 24px;
font-weight: 700;
color: #1a2333;
margin-bottom: 28px !important;
}
/* Expands the container to perfectly match the width of your main 'About' card */
.allies-container {
max-width: 800px; /* Adjust this to match your exact top card width if needed */
margin: 0 auto !important;
padding: 10px 24px;
box-sizing: border-box;
}
/* Configures the list into a clean side-by-side grid */
.allies-list {
list-style: none !important; /* Fully ensures bullets stay gone */
padding: 0 !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* Two perfectly equal columns */
gap: 16px 40px; /* 16px vertical spacing, 40px gap between the two columns */
}
.allies-list li {
font-size: 15px !important;
color: #334155 !important;
text-align: left !important; /* Forces left alignment to create a clean visual edge */
line-height: 1.5;
font-weight: 500;
letter-spacing: 0.3px;
position: relative;
padding-left: 15px; /* Creates room for a clean custom bullet line */
}
/* Optional: Adds a subtle, sleek government-style left accent line next to each ally */
.allies-list li::before {
content: "";
position: absolute;
left: 0;
top: 6px;
width: 3px;
height: 11px;
background-color: #0056b3; /* Classy diplomatic blue accent */
border-radius: 2px;
}
@media (max-width: 768px) {
/* ... your existing mobile rules ... */
.allies-list {
grid-template-columns: 1fr !important; /* Drops to a single clean column on phones */
gap: 14px !important;
padding-left: 10px !important;
}
.allies-list li {
text-align: left !important; /* Keeps it left-aligned but neatly stacked */
}
}
/* --- THE OFFICIAL ALLIES UNIFIED CARD LAYOUT --- */
.allies-section {
text-align: center !important;
padding: 40px 20px !important;
width: 100%;
box-sizing: border-box;
background: transparent !important; /* Strips away the extra outer container background */
border: none !important; /* Strips away any extra outer border */
}
.allies-section h2 {
font-size: 24px;
font-weight: 700;
color: #1a2333;
margin-bottom: 28px !important;
}
/* --- THE OFFICIAL ALLIES UNIFIED CARD LAYOUT --- */
.allies-section {
text-align: center !important;
padding: 40px 32px !important; /* Pushes the grid inward comfortably from the outer card edges */
width: 100%;
box-sizing: border-box;
/* We let your platform's main outer white container do all the work here */
}
.allies-section h2 {
font-size: 24px;
font-weight: 700;
color: #1a2333;
margin-top: 0 !important;
margin-bottom: 32px !important;
}
/* STRIPS THE GHOST INNER CARD: Converts this block into a invisible structural layout wrapper */
.allies-container {
max-width: 850px;
margin: 0 auto !important;
background: transparent !important; /* Wipes out the duplicate inner white background color */
border: none !important; /* Wipes out the duplicate inner grey frame border lines */
box-shadow: none !important; /* Wipes out the duplicate inner shadow tracking */
padding: 0 !important; /* Hands layout spacing duties over to the grid layers */
box-sizing: border-box;
}
/* Side-by-side diplomatic grid arrangement */
.allies-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px 48px; /* Creates clean spacing lanes between text items */
}
.allies-list li {
font-size: 15px !important;
color: #334155 !important;
text-align: left !important;
line-height: 1.5;
font-weight: 500;
letter-spacing: 0.3px;
position: relative;
padding-left: 16px;
}
/* Diplomatic blue accent vertical badge indicators */
.allies-list li::before {
content: "";
position: absolute;
left: 0;
top: 4px;
width: 3px;
height: 13px;
background-color: #0056b3;
border-radius: 2px;
}
/* Mobile responsive collapsing layer */
@media (max-width: 768px) {
.allies-section {
padding: 30px 20px !important; /* Swaps to compact structural margins on mobile viewports */
}
.allies-list {
grid-template-columns: 1fr !important; /* Collapses grid elements into a singular fluid column */
gap: 16px !important;
}
}
/* --- WHITE CARD FORCE FIX FOR ALLIES SECTION --- */
.allies-section,
.allies-container,
[class*="allies"] {
background-color: #ffffff !important; /* Forces a solid white background color */
border: 1px solid #e2e8f0 !important; /* Clean, modern subtle grey outline border */
border-radius: 8px !important; /* Soft, professional rounded corners matching the top card */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; /* Soft premium card depth shadow */
}
/* Ensure the text header and items inside still look sharp against the new white card */
.allies-list li {
color: #334155 !important;
}
/* --- THE CRITICAL SINGULAR WHITE CARD FIX --- */
/* 1. Reset the outer section so it doesn't build a duplicate frame */
.allies-section {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 40px 0 !important;
text-align: center !important;
width: 100%;
}
.allies-section h2 {
font-size: 24px;
font-weight: 700;
color: #1a2333;
margin-bottom: 28px !important;
}
/* 2. Turn the inner container into the ONE AND ONLY white card */
.allies-container {
max-width: 800px; /* Perfectly matches the width of your top profile card */
margin: 0 auto !important;
background-color: #ffffff !important; /* Pure white background sheet */
border: 1px solid #e2e8f0 !important; /* Subtle grey card outline */
border-radius: 8px !important; /* Clean rounded card corners */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; /* Premium depth shadow */
padding: 32px !important; /* Comfortable breathing room inside the card */
box-sizing: border-box;
}
/* 3. Maintain your sharp, left-aligned diplomatic grid columns */
.allies-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 18px 40px;
}
.allies-list li {
font-size: 15px !important;
color: #334155 !important;
text-align: left !important;
line-height: 1.5;
font-weight: 500;
letter-spacing: 0.3px;
position: relative;
padding-left: 16px;
}
/* Blue vertical accent pin next to each allied state */
.allies-list li::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 3px;
height: 12px;
background-color: #0056b3;
border-radius: 2px;
}
/* Mobile viewport crunch safety engine */
@media (max-width: 768px) {
.allies-container {
padding: 24px 20px !important;
width: calc(100% - 32px) !important;
}
.allies-list {
grid-template-columns: 1fr !important; /* Collapse cleanly to a single vertical column */
gap: 14px !important;
}
}
/* --- THE OFFICIAL UNIFIED WHITE CARD STRUCTURE --- */
/* 1. Turn the absolute outer block wrapper into the main white container card */
.allies-section {
background-color: #ffffff !important; /* Forces the entire main box to pure white */
border: 1px solid #e2e8f0 !important; /* Crisp, professional light grey card outline */
border-radius: 8px !important; /* Smooth rounded card corners matching the profile block above */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; /* Premium subtle card depth shadow */
padding: 40px !important; /* Comfortable padding inside the card borders */
max-width: 800px !important; /* Sets exact width scale to match your top profile section */
margin: 40px auto !important; /* Centers the entire card nicely on the canvas */
box-sizing: border-box;
}
.allies-section h2 {
font-size: 24px;
font-weight: 700;
color: #1a2333;
margin-top: 0 !important;
margin-bottom: 32px !important;
text-align: center !important;
}
/* 2. Completely dissolve the inner wrapper box so it never clips or doubles up */
.allies-container {
background: transparent !important; /* Strips the nested white fill tint */
border: none !important; /* Wipes the duplicate interior card lines */
box-shadow: none !important; /* Removes duplicate drop shadows */
padding: 0 !important; /* Hands tracking space over to layout margins */
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* 3. Maintain your sharp side-by-side alliance columns */
.allies-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: 20px 48px;
}
.allies-list li {
font-size: 15px !important;
color: #334155 !important;
text-align: left !important;
line-height: 1.5;
font-weight: 500;
letter-spacing: 0.3px;
position: relative;
padding-left: 16px;
}
/* Diplomatic blue accent pins */
.allies-list li::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 3px;
height: 12px;
background-color: #0056b3;
border-radius: 2px;
}
/* Mobile fluid safety grid layer */
@media (max-width: 768px) {
.allies-section {
padding: 30px 20px !important;
margin: 24px 16px !important;
width: calc(100% - 32px) !important;
}
.allies-list {
grid-template-columns: 1fr !important; /* Folds smoothly into one column on phones */
gap: 16px !important;
}
}
/* ==========================================================================
THE OFFICIAL RESILIENT ALLIES CARD LEDGER (NO EXTRA BOXES LAYER)
========================================================================== */
/* This element forms the ONE AND ONLY white container card */
.allies-section {
background-color: #ffffff !important; /* Locks the main box container to pure white */
border: 1px solid #e2e8f0 !important; /* Subtle, modern light grey card outline */
border-radius: 8px !important; /* Clean rounded card corners matching your top card */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important; /* Premium card depth shadow shadow */
padding: 40px !important; /* Comfortable padding inside the card borders */
max-width: 800px !important; /* Sets exact width scale to match your profile section width */
margin: 40px auto !important; /* Center aligns the card beautifully on the canvas */
box-sizing: border-box !important;
}
.allies-section h2 {
font-size: 24px;
font-weight: 700;
color: #1a2333;
margin-top: 0 !important;
margin-bottom: 32px !important;
text-align: center !important;
}
/* Side-by-side diplomatic column arrangement grid rules */
.allies-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* Creates two perfectly even side-by-side columns */
gap: 20px 48px; /* Vertical and horizontal spacing lanes between text items */
width: 100% !important;
}
.allies-list li {
font-size: 15px !important;
color: #334155 !important;
text-align: left !important; /* Forces left alignment to build a straight edge layout */
line-height: 1.5;
font-weight: 500;
letter-spacing: 0.3px;
position: relative;
padding-left: 16px;
}
/* Diplomatic blue vertical accent flag pins */
.allies-list li::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 3px;
height: 12px;
background-color: #0056b3;
border-radius: 2px;
}
/* Mobile responsive fluid compression layout rules */
@media (max-width: 768px) {
.allies-section {
padding: 30px 20px !important;
margin: 24px 16px !important;
width: calc(100% - 32px) !important;
}
.allies-list {
grid-template-columns: 1fr !important; /* Smoothly drops to a single vertical stack on phones */
gap: 16px !important;
}
}
/* ==========================================================================
THE PLATFORM-COMPATIBLE ALLIES GRID LAYER
========================================================================== */
/* 1. Dissolve our code blocks to rely entirely on the platform's native box card */
.allies-section {
background: transparent !important; /* Strips any duplicate white fill layers */
border: none !important; /* Wipes out our extra frame outline lines */
box-shadow: none !important; /* Removes our duplicate depth drop shadows */
padding: 10px 0 !important; /* Reduces spacing so it nests beautifully inside the platform box */
margin: 0 auto !important;
width: 100% !important;
max-width: 100% !important;
text-align: center !important;
}
/* Ensure the heading title styles stay crisp inside the platform's box card */
.allies-section h2 {
font-size: 24px;
font-weight: 700;
color: #1a2333;
margin-top: 0 !important;
margin-bottom: 28px !important;
text-align: center !important;
}
/* 2. Direct alignment controls for your side-by-side alliance columns */
.allies-list {
list-style: none !important;
padding: 0 !important;
margin: 0 auto !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* Locks into two side-by-side lanes */
gap: 18px 40px; /* Clean tracking spacing lanes between text elements */
max-width: 100% !important;
}
.allies-list li {
font-size: 15px !important;
color: #334155 !important;
text-align: left !important; /* Builds straight left edges that line up beautifully */
line-height: 1.5;
font-weight: 500;
letter-spacing: 0.3px;
position: relative;
padding-left: 16px;
}
/* Clean, professional diplomatic blue accent bar pins */
.allies-list li::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 3px;
height: 12px;
background-color: #0056b3;
border-radius: 2px;
}
/* Mobile responsive fluid safety mechanics */
@media (max-width: 768px) {
.allies-section {
padding: 0 !important;
}
.allies-list {
grid-template-columns: 1fr !important; /* Converts side-by-side columns into a single row block on mobile profiles */
gap: 14px !important;
}
}
/* ==========================================================================
THE OFFICIAL ALLIES LAYOUT INNER SAFETY SPACING
========================================================================== */
/* 1. Reset the outer block structure */
.allies-section {
background: transparent !important;
border: none !important;
box-shadow: none !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 auto !important;
}
/* 2. Style the actual grid to have comfortable horizontal breathing room */
.allies-list {
list-style: none !important;
padding: 12px 32px 32px 32px !important; /* Generous 32px padding on left/right/bottom to cushion the text */
margin: 0 auto !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* Two clean side-by-side columns */
gap: 20px 48px; /* 20px space between rows, 48px channel between columns */
max-width: 100% !important;
box-sizing: border-box !important; /* Includes the padding in the total width calculations */
}
/* 3. Keep text content looking premium and readable */
.allies-list li {
font-size: 15px !important;
color: #334155 !important;
text-align: left !important;
line-height: 1.5;
font-weight: 500;
letter-spacing: 0.3px;
position: relative;
padding-left: 18px; /* Spacing between blue pin and country text */
}
/* Sharp, authoritative vertical blue pins */
.allies-list li::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 3px;
height: 12px;
background-color: #0056b3; /* Republic of Valudia brand blue */
border-radius: 2px;
}
/* 4. Mobile responsive layout shift engine */
@media (max-width: 768px) {
.allies-list {
grid-template-columns: 1fr !important; /* Collapse grid into one single vertical stack on mobile screens */
padding: 8px 16px 24px 16px !important; /* Slightly tighter padding for mobile phone viewports */
gap: 16px !important;
}
}
.allies-list li {
font-size: 15px !important;
color: #334155 !important;
text-align: left !important;
line-height: 1.5;
font-weight: 500;
letter-spacing: 0.3px;
/* NEW ALIGNMENT ENGINE: Keeps wrapped text perfectly aligned */
display: flex !important;
align-items: flex-start !important; /* Vertically aligns the pin with the first line of text */
gap: 12px !important; /* Creates an un-invadable gap between the pin and text */
position: relative;
padding-left: 0 !important; /* Resets old spacing method */
}
/* Updated blue accent pin to play nice with Flexbox layout */
.allies-list li::before {
content: "";
display: inline-block;
flex-shrink: 0; /* Stops the blue pin from getting squeezed on small screens */
width: 3px;
height: 12px;
background-color: #0056b3;
border-radius: 2px;
margin-top: 5px; /* Keeps the pin perfectly centered with the first line of text */
}
/* ==========================================================================
PRODUCTION-READY ALLIES LEDGER MULTI-COLUMN REFIX
========================================================================== */
/* The primary list wrapper grid rules */
.allies-list {
list-style: none !important;
padding: 12px 32px 32px 32px !important; /* Generous inside safety padding margins */
margin: 0 auto !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* Forces two perfectly even columns */
gap: 20px 48px; /* Vertical and horizontal gap channels between ledger entries */
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Individual nation text items formatting */
.allies-list li {
font-size: 15px !important;
color: #334155 !important;
text-align: left !important;
line-height: 1.5;
font-weight: 500;
letter-spacing: 0.3px;
/* CRITICAL ALIGNMENT MATRIX: Keeps text and pins perfectly separated */
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important; /* Keeps the pin lined up vertically with the first line of text */
gap: 14px !important; /* Physical gap spacer to completely stop overlapping text */
position: relative !important;
padding-left: 0 !important; /* Wipes out any old conflicting layout rules */
}
/* Explicit layout styling for the blue vertical accent pin indicator */
.allies-list li::before {
content: "" !important;
display: inline-block !important;
flex-shrink: 0 !important; /* Explicitly prevents the pin from squeezing or shrinking */
width: 3px !important;
height: 12px !important;
background-color: #0056b3 !important; /* Core branding diplomatic blue */
border-radius: 2px !important;
margin-top: 5px !important; /* Centers the pin perfectly with the first text sentence line */
}
/* Mobile responsive collapse protection mechanics */
@media (max-width: 768px) {
.allies-list {
grid-template-columns: 1fr !important; /* Folds nicely into a clean vertical list on phone screens */
padding: 8px 16px 24px 16px !important;
gap: 16px !important;
}
}
/* ==========================================================================
THE OFFICIAL ALLIES ALIGNMENT OVERRIDE
========================================================================== */
.allies-list li {
font-size: 15px !important;
color: #334155 !important;
text-align: left !important;
line-height: 1.5;
font-weight: 500;
letter-spacing: 0.3px;
/* POSITION MATRIX: Creates a fixed padding wall the text cannot cross */
position: relative !important;
padding-left: 20px !important; /* Forces a safe 20px buffer lane on the left */
display: block !important; /* Resets flexbox back to a stable block model */
margin-bottom: 0;
}
/* Explicit absolute anchoring for the blue vertical accent pin */
.allies-list li::before {
content: "" !important;
position: absolute !important;
left: 0 !important; /* Anchors the pin to the absolute left edge of the li */
top: 5px !important; /* Perfectly centers it vertically with the first text line */
width: 3px !important;
height: 12px !important;
background-color: #0056b3 !important; /* Republic of Valudia brand blue */
border-radius: 2px !important;
}
/* ==========================================================================
THE CLEAN RE-ALIGNMENT PRODUCTION GRID
========================================================================== */
/* Outer block framework settings */
.allies-section {
background: transparent !important;
border: none !important;
box-shadow: none !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 auto !important;
}
.allies-section h2 {
font-size: 24px;
font-weight: 700;
color: #1a2333;
margin-top: 0 !important;
margin-bottom: 32px !important;
text-align: center !important;
}
/* Master grid container with elegant inside margins */
.allies-list {
list-style: none !important;
padding: 16px 36px 36px 36px !important; /* Balanced breathing margins inside the card */
margin: 0 auto !important;
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important; /* Two beautifully balanced columns */
gap: 22px 48px; /* Clean tracking lanes between lines and columns */
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Master alignment for individual items */
.allies-list li {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important; /* Keeps blue pin centered with the very first text line */
padding: 0 !important;
margin: 0 !important;
}
/* The Diplomatic Blue Accent Bars */
.allies-list .ally-pin {
display: inline-block !important;
flex-shrink: 0 !important; /* Stops the blue line from compressing or squeezing */
width: 3px !important;
height: 12px !important;
background-color: #0056b3 !important; /* Valudia brand blue */
border-radius: 2px !important;
margin-top: 5px !important; /* Vertically aligns the indicator with line one */
margin-right: 12px !important; /* Creates an untouchable space buffer right next to the text */
}
/* The Allied Country Text Containers */
.allies-list .ally-name {
font-size: 15px !important;
color: #334155 !important;
text-align: left !important;
line-height: 1.4 !important;
font-weight: 500 !important;
letter-spacing: 0.2px !important;
display: block !important;
}
/* Mobile responsive collapsing system */
@media (max-width: 768px) {
.allies-list {
grid-template-columns: 1fr !important; /* Drops cleanly to one column on mobile layouts */
padding: 12px 20px 24px 20px !important;
gap: 16px !important;
}
}
/* ==========================================================================
VALUDIA PORTAL: DIPLOMATIC ALLIES CARD-STACK LAYOUT
========================================================================== */
/* 1. Base section layout tracking */
.allies-card-section {
max-width: 800px !important;
margin: 40px auto !important;
padding: 0 20px !important;
text-align: center !important;
}
.allies-card-section h2 {
font-size: 32px !important;
font-weight: 700 !important;
color: #1a2333 !important;
margin-bottom: 8px !important;
}
.allies-subtitle {
font-size: 16px !important;
color: #64748b !important;
margin-bottom: 32px !important;
}
/* 2. The structural card stack container */
.allies-cards-stack {
display: flex !important;
flex-direction: column !important;
gap: 16px !important; /* Perfect structural spacing between cards */
width: 100% !important;
}
/* 3. Individual card flex element framework */
.allies-cards-stack .ally-card {
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 20px 24px !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important; /* Locks icon and text alignment horizontally on the same center line */
gap: 18px !important; /* Untouchable horizontal gap space between circle and text */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02) !important;
text-align: left !important;
box-sizing: border-box !important;
}
/* 4. Icon circle element alignment */
.allies-cards-stack .ally-icon-circle {
width: 44px !important;
height: 44px !important;
background-color: #e2e8f0 !important; /* Smooth grey backing circle */
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
color: #475569 !important;
flex-shrink: 0 !important; /* Completely blocks the circle from distorting or shrinking */
}
/* 5. Precise text stack alignment engine */
.allies-cards-stack .ally-details {
display: flex !important;
flex-direction: column !important;
justify-content: center !important; /* Vertically balances title and subtitle lines */
align-items: flex-start !important; /* Hard-locks all text lines to a perfect left alignment line */
gap: 4px !important; /* Clean tracking space between header and description text */
width: 100% !important;
}
/* Bold nation name text rules */
.allies-cards-stack .ally-details h3 {
font-size: 18px !important;
font-weight: 700 !important;
color: #0f172a !important;
margin: 0 !important; /* Wipes out default browser header margins that break alignment */
padding: 0 !important;
line-height: 1.2 !important;
}
/* Subtitle diplomatic status text rules */
.allies-cards-stack .ally-details p {
font-size: 14px !important;
color: #64748b !important;
margin: 0 !important; /* Wipes out default paragraph margins */
padding: 0 !important;
line-height: 1.3 !important;
}
/* 6. Mobile fluid safety compression system */
@media (max-width: 768px) {
.allies-cards-stack .ally-card {
padding: 16px !important;
gap: 14px !important;
}
.allies-cards-stack .ally-details h3 {
font-size: 16px !important;
}
.allies-cards-stack .ally-details p {
font-size: 13px !important;
}
}
/* ==========================================================================
PORTAL COMPONENT: OFFICIAL EMBASSY LANDING SYSTEM
========================================================================== */
/* 1. Global Page Wrapper & Navigation */
.embassy-nav-container {
max-width: 1100px !important;
margin: 20px auto 12px auto !important;
padding: 0 24px !important;
box-sizing: border-box !important;
}
.embassy-back-link {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
color: #475569 !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: color 0.15s ease !important;
}
.embassy-back-link:hover {
color: #0056b3 !important; /* Valudia Brand Accent Blue */
}
/* 2. Panoramic Hero Banner Frame */
.embassy-hero-banner {
width: 100% !important;
height: 320px !important; /* Fixed wide panoramic aspect ratio */
background-size: cover !important;
background-position: center 35% !important;
display: flex !important;
align-items: flex-end !important; /* Locks textual elements securely to the baseline */
padding: 40px 48px !important;
box-sizing: border-box !important;
position: relative !important;
overflow: hidden !important;
}
.embassy-hero-content {
max-width: 1000px !important;
width: 100% !important;
margin: 0 auto !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
}
.embassy-title-row {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 18px !important;
}
/* Precise Flag Shadow Box Framing */
.embassy-flag-frame {
width: 52px !important;
height: 32px !important;
border-radius: 4px !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #2d3748 !important;
flex-shrink: 0 !important;
}
.embassy-flag-frame img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* Main Graphic Typography Overlays */
.embassy-hero-content h1 {
font-family: 'Georgia', serif !important; /* Traditional editorial text face matching inspiration */
font-size: 44px !important;
font-weight: 500 !important;
color: #ffffff !important;
margin: 0 !important;
padding: 0 !important;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
line-height: 1.1 !important;
}
.embassy-tier-label {
font-size: 11px !important;
font-weight: 700 !important;
color: #ffffff !important;
letter-spacing: 1.5px !important;
text-transform: uppercase !important;
opacity: 0.95 !important;
border-bottom: 2px solid #ffffff !important;
width: max-content !important;
padding-bottom: 4px !important;
margin-top: 6px !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}
/* 3. Main Document Body Formatting */
.embassy-body-container {
max-width: 1100px !important;
margin: 40px auto !important;
padding: 0 24px !important;
box-sizing: border-box !important;
}
.embassy-body-grid {
display: grid !important;
grid-template-columns: 1.6fr 1fr !important; /* Side-by-side asymmetric split lane */
gap: 48px !important;
align-items: flex-start !important;
}
/* Left Narrative Column */
.embassy-main-panel h2 {
font-family: 'Helvetica Neue', Arial, sans-serif !important;
font-size: 28px !important;
font-weight: 700 !important;
color: #0f172a !important;
margin: 0 0 20px 0 !important;
line-height: 1.2 !important;
}
.embassy-main-panel p {
font-size: 15px !important;
color: #334155 !important;
line-height: 1.65 !important;
margin-bottom: 18px !important;
}
.embassy-lead-text {
font-size: 16.5px !important;
color: #1e293b !important;
font-weight: 500 !important;
}
.embassy-icon-inline {
font-size: 17px !important;
vertical-align: middle !important;
margin: 0 2px !important;
}
/* Right Profile Detail Panel Card */
.embassy-side-card {
background-color: #f8fafc !important; /* Distinct light pastel background hue matching inspiration */
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
padding: 24px !important;
box-sizing: border-box !important;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01) !important;
}
.embassy-side-card h3 {
font-size: 16px !important;
font-weight: 700 !important;
color: #0f172a !important;
margin: 0 0 12px 0 !important;
text-transform: none !important;
letter-spacing: normal !important;
}
.embassy-side-card p {
font-size: 13.5px !important;
color: #475569 !important;
line-height: 1.55 !important;
margin: 0 0 16px 0 !important;
}
.card-divider {
border: none !important;
height: 1px !important;
background-color: #cbd5e1 !important;
margin: 16px 0 !important;
}
/* Fact Sheet Ledger Matrix */
.embassy-fact-sheet {
width: 100% !important;
border-collapse: collapse !important;
}
.embassy-fact-sheet td {
padding: 8px 0 !important;
font-size: 13px !important;
color: #1e293b !important;
border-bottom: 1px solid #f1f5f9 !important;
vertical-align: middle !important;
}
.embassy-fact-sheet tr:last-child td {
border-bottom: none !important;
}
.embassy-fact-sheet td:first-child {
color: #64748b !important;
font-weight: 500 !important;
width: 38% !important;
}
/* 4. Responsive Mobile Adaptation Engine */
@media (max-width: 860px) {
.embassy-hero-banner {
height: 250px !important;
padding: 24px !important;
}
.embassy-hero-content h1 {
font-size: 32px !important;
}
.embassy-body-grid {
grid-template-columns: 1fr !important; /* Drops the layout cleanly into a unified single vertical column track */
gap: 36px !important;
}
.embassy-main-panel h2 {
font-size: 24px !important;
}
}
.vld-verification-box {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 20px;
border-radius: 15px;
color: white;
font-family: 'Courier New', monospace;
max-width: 350px;
text-align: center;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}
.vld-verification-box input {
width: 90%;
padding: 10px;
margin: 5px 0;
background: rgba(0, 0, 0, 0.3);
border: 1px solid #00f2ff;
color: #00f2ff;
text-transform: uppercase;
}
.vld-verification-box button {
background: #00f2ff;
color: black;
border: none;
padding: 10px 20px;
cursor: pointer;
font-weight: bold;
margin-top: 10px;
transition: 0.3s;
}
.vld-verification-box button:hover {
background: white;
box-shadow: 0 0 15px #00f2ff;
}
.result {
margin-top: 15px;
font-weight: bold;
}
.valid { color: #00ff00; text-shadow: 0 0 5px #00ff00; }
.invalid { color: #ff0000; text-shadow: 0 0 5px #ff0000; }