/* ========================================================================== Imports & Custom Fonts ========================================================================== */ @import url('reset.css'); @import url('font-awesome.min.css'); @font-face { font-family: 'Trajan Pro'; src: url('../fonts/TrajanPro-Regular.eot'); /* IE9 Compat Modes */ src: url('../fonts/TrajanPro-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/TrajanPro-Regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/TrajanPro-Regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/TrajanPro-Regular.svg#TrajanProRegular') format('svg'); /* Legacy iOS */ font-style: normal; font-weight: 400; } @font-face { font-family: 'Trajan Pro'; src: url('../fonts/TrajanPro-Bold.eot'); /* IE9 Compat Modes */ src: url('../fonts/TrajanPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/TrajanPro-Bold.woff') format('woff'), /* Modern Browsers */ url('../fonts/TrajanPro-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/TrajanPro-Bold.svg#TrajanProBold') format('svg'); /* Legacy iOS */ font-style: normal; font-weight: 700; } /* ========================================================================== Reset & Base Styles ========================================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Trajan Pro', 'Cinzel', serif; background-color: #000; color: #f0ece2; line-height: 1.5; } /* ========================================================================== Header & Viewport Reminder ========================================================================== */ /* 👉 Make sure your (header.php) includes: */ .site-header { background: url('../images/background_1.png') center top no-repeat; background-size: 100% auto; padding-top: 60px; padding-bottom: 250px; /* 👈 increase this until the full image is visible */ position: relative; } /* 80% width container, centered */ .site-header .container { width: 80vw; max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; text-align: center; } /* ========================================================================== Logo (with background image) ========================================================================== */ .site-header .logo { width: 80vw; max-width: 600px; margin: 0 auto; position: relative; /* Add your logo-background image here */ background: url('../images/logo-bg.png') center center no-repeat; background-size: contain; padding: 20px 0; } .site-header .logo img { width: 75%; height: auto; display: block; position: relative; z-index: 2; margin: 0 auto; } /* ========================================================================== Navigation Bar (fills 80% container) ========================================================================== */ .main-nav { width: 80vw; max-width: 1000px; margin: 30px auto 0; background: rgba(30, 20, 10, 0.8); border-radius: 6px; padding: 20px 0; } .main-nav ul { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; } .main-nav ul li { position: relative; margin: 0 30px; font-size: 24px; } .main-nav ul li + li::before { /* separator dot */ content: '·'; position: absolute; left: -20px; top: 50%; transform: translateY(-50%); color: #d79b4b; font-size: 28px; line-height: 1; } .main-nav ul li a { color: #d8ae5c; text-decoration: none; padding: 8px 12px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); border-radius: 4px; transition: color 0.3s ease, background 0.3s ease; } .main-nav ul li a:hover, .main-nav ul li.active a { color: #fff; background: rgba(255, 200, 50, 0.2); } /* ========================================================================== Content Wrapper (80% width) ========================================================================== */ #content-wrapper { width: 80vw; max-width: 1200px; margin: 40px auto; background: rgba(0, 0, 0, 0.5); padding: 30px; border-radius: 6px; color: #f0ece2; } /* ========================================================================== Responsive: Mobile (<768px) ========================================================================== */ @media (max-width: 767px) { .site-header .container, .main-nav, #content-wrapper { width: 95vw; margin: 0 auto; } /* Logo smaller on mobile */ .site-header .logo { max-width: 300px; } /* Stack nav vertically */ .main-nav ul { flex-direction: column; align-items: center; } .main-nav ul li { margin: 10px 0; font-size: 20px; } .main-nav ul li + li::before { display: none; } /* Search form adjusts */ .search-form { position: static; margin-top: 15px; text-align: center; } .search-form input[type="search"] { width: 70%; margin-right: 5px; } } /* ========================================================================== Utility ========================================================================== */ img { max-width: 100%; height: auto; } /* ========================================================================== Footer ========================================================================== */ .site-footer { position: relative; background: url('../images/dark-cracked-embers-bg.jpg') center center / cover no-repeat fixed; padding: 20px 0; margin-top: 40px; border-top: 1px solid #d79b4b; } .site-footer .container { width: 80vw; max-width: 1200px; margin: 0 auto; text-align: center; } .site-footer p { font-family: 'Trajan Pro', serif; color: #d8ae5c; font-size: 0.9em; letter-spacing: 1px; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); margin: 0; padding: 0 10px; border: 1px solid rgba(216, 174, 92, 0.5); display: inline-block; line-height: 1.5; border-radius: 4px; } /* Mobile tweak */ @media (max-width: 767px) { .site-footer .container { width: 95vw; } .site-footer p { font-size: 0.8em; padding: 6px 8px; } }