/* 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 (Freed Socialist Republic of Hareod) */ .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) */ } }