/*
Theme Name: Navy HTML Style
Theme URI: https://example.com/
Author: Daniel Madison
Description: WordPress conversion of the original Navy HTML Style theme.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: navy-html-style
*/
/* ===============================
Modern Blog Theme
=============================== */
:root{
--primary:#0b3d2e; /* Deep Green */
--primary-dark:#06281e; /* Very Dark Green */
--accent:#1f8f5f; /* Vibrant Green */
--bg:#eef5f1; /* Soft Green Tint */
--card:#ffffff;
--text:#222;
--muted:#666;
--border:#d7e3dc;
--radius:12px;
--shadow:0 10px 30px rgba(0,0,0,.08);
--font-heading:Verdana,Geneva,sans-serif;
--font-body:Verdana,Geneva,sans-serif;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
background:var(--bg);
color:var(--text);
font-family:var(--font-body);
font-size:18px;
line-height:1.8;
}
/* Layout */
.container{
max-width:920px;
margin:40px auto;
background:#fff;
border-radius:16px;
box-shadow:var(--shadow);
padding:50px;
}
/* Typography */
h1{
font-family:var(--font-heading);
font-size:2.5rem;
color:var(--primary);
line-height:1.25;
margin-bottom:10px;
padding-bottom:15px;
}
h2{
font-family:var(--font-heading);
margin-top:55px;
margin-bottom:18px;
font-size:1.8rem;
color:var(--primary);
position:relative;
padding-left:18px;
}
h2::before{
content:"";
width:6px;
border-radius:10px;
background:var(--accent);
position:absolute;
top:0;
bottom:0;
left:0;
}
h3{
font-family:var(--font-heading);
margin:30px 0 15px;
color:var(--primary-dark);
font-size:1.3rem;
}
p{
margin:18px 0;
}
a{
color:var(--accent);
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
/* Images */
img{
display:block;
width:100%;
height:auto;
border-radius:10px;
margin:35px auto;
}
/* Lists */
ul,
ol{
margin:25px 0 25px 30px;
}
li{
margin-bottom:12px;
}
/* Tables */
table{
width:100%;
border-collapse:collapse;
margin:35px 0;
overflow:hidden;
border-radius:10px;
box-shadow:0 3px 12px rgba(0,0,0,.05);
}
th{
background:var(--primary);
color:#fff;
padding:16px;
text-align:left;
}
td{
padding:16px;
border-bottom:1px solid var(--border);
}
tr:nth-child(even){
background:#f9fbfd;
}
/* Boxes */
.notice{
background:#edf6ff;
border-left:5px solid var(--accent);
border-radius:8px;
padding:22px;
margin:35px 0;
}
.warning{
background:#fff3f3;
border-left:5px solid #d63031;
border-radius:8px;
padding:22px;
margin:35px 0;
}
.steps{
background:#f7fafc;
border:1px solid var(--border);
border-radius:10px;
padding:25px;
margin:35px 0;
}
.faq{
background:#fff;
border:1px solid var(--border);
border-radius:10px;
padding:25px;
margin:20px 0;
transition:.25s;
}
.faq:hover{
box-shadow:0 6px 18px rgba(0,0,0,.06);
}
/* Blockquote */
blockquote{
background:#f6f9fc;
border-left:5px solid var(--accent);
padding:25px;
margin:35px 0;
font-style:italic;
}
/* Code */
pre{
background:#1e293b;
color:#fff;
overflow:auto;
padding:20px;
border-radius:8px;
}
code{
font-family:Consolas,monospace;
}
/* Buttons */
button,
.btn{
display:inline-block;
background:var(--primary);
color:#fff;
padding:14px 26px;
border-radius:8px;
border:none;
cursor:pointer;
transition:.25s;
}
button:hover,
.btn:hover{
background:var(--primary-dark);
}
/* Footer */
.footer{
margin-top:60px;
border-top:1px solid var(--border);
padding-top:25px;
text-align:center;
color:#666;
font-size:.95rem;
}
/* Mobile */
@media(max-width:900px){
.container{
margin:20px;
padding:30px;
}
h1{
font-size:2rem;
}
h2{
font-size:1.45rem;
}
body{
font-size:17px;
}
}
@media(max-width:600px){
.container{
margin:15px;
padding:22px;
border-radius:12px;
box-shadow:var(--shadow);
}
}
body{
font-size:16px;
}
h1{
font-size:1.7rem;
}
h2{
font-size:1.35rem;
}
table{
display:block;
overflow-x:auto;
white-space:nowrap;
}
img{
border-radius:6px;
}
.footer{
margin-top:60px;
background:#013220;
color:#fff;
text-align:center;
padding:25px;
border-radius:8px;
}
/* More Articles */
.more-articles-box{
margin:50px 0;
padding:25px;
background:#fff;
border:1px solid #e5e5e5;
border-radius:12px;
}
.more-articles-box h2{
margin:0 0 20px;
font-size:26px;
}
.more-articles-list{
display:flex;
flex-direction:column;
}
.related-item{
display:flex;
align-items:center;
gap:15px;
padding:15px 0;
border-bottom:1px solid #eee;
text-decoration:none;
color:inherit;
transition:.2s;
}
.related-item:last-child{
border-bottom:0;
}
.related-item:hover{
opacity:.8;
}
.related-thumb{
width:70px;
height:70px;
flex-shrink:0;
overflow:hidden;
border-radius:8px;
background:#f3f3f3;
}
.related-thumb img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
margin:0;
padding:0;
}
.no-thumb{
width:100%;
height:100%;
background:#ddd;
}
.related-title{
font-size:16px;
font-weight:600;
line-height:1.5;
}
@media (max-width:768px){
.more-articles-box{
padding:18px;
}
.related-thumb{
width:60px;
height:60px;
}
.related-title{
font-size:16px;
}
}
.footer{
margin-top:60px;
background:#013220;
color:#fff;
text-align:center;
padding:25px;
border-radius:8px;
}/* ==========================
Footer
========================== */
.footer{
margin-top:50px;
background:#013220;
color:#fff;
border-radius:14px;
padding:35px 40px;
font-size:14px;
line-height:1.7;
}
.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:40px;
}
.footer h3{
margin:0 0 14px;
color:#fff;
font-size:17px;
font-weight:600;
}
.footer p{
margin:0 0 12px;
color:rgba(255,255,255,.82);
font-size:14px;
line-height:1.7;
}
.footer ul{
list-style:none;
margin:0;
padding:0;
}
.footer li{
margin-bottom:8px;
}
.footer a{
color:#d9f7e6;
text-decoration:none;
font-size:14px;
}
.footer a:hover{
text-decoration:underline;
}
.footer-bottom{
margin-top:28px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.12);
text-align:center;
font-size:13px;
color:rgba(255,255,255,.65);
}
/* Mobile */
@media (max-width:768px){
.footer{
padding:25px 20px;
font-size:13px;
}
.footer-grid{
grid-template-columns:1fr;
gap:25px;
}
.footer h3{
font-size:16px;
}
.footer p,
.footer a{
font-size:13px;
}
.footer-bottom{
font-size:12px;
}
}
.footer{
margin-top:50px;
background:#013220;
color:#dfeee7;
border-radius:16px;
padding:40px;
}
.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:50px;
}
.footer h4{
margin:0 0 15px;
font-size:15px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:#ffffff;
}
.footer p{
font-size:14px;
line-height:1.8;
color:rgba(255,255,255,.75);
}
.footer ul{
list-style:none;
margin:0;
padding:0;
}
.footer li{
margin-bottom:10px;
}
.footer a{
color:#b8dcc8;
font-size:14px;
text-decoration:none;
transition:.2s;
}
.footer a:hover{
color:#ffffff;
padding-left:5px;
}
.footer-bottom{
margin-top:35px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.12);
text-align:center;
}
.footer-bottom p{
margin:0;
font-size:13px;
color:rgba(255,255,255,.6);
}
@media(max-width:768px){
.footer{
padding:28px 22px;
}
.footer-grid{
grid-template-columns:1fr;
gap:30px;
}
}.footer{
margin-top:50px;
background:#013220;
color:#dfeee7;
border-radius:16px;
padding:40px;
text-align:left;
}
.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:50px;
align-items:start;
}
.footer h4{
margin:0 0 15px;
font-size:15px;
font-weight:700;
text-transform:uppercase;
letter-spacing:1px;
color:#fff;
text-align:left;
}
.footer p{
margin:0 0 15px;
font-size:14px;
line-height:1.8;
color:rgba(255,255,255,.75);
text-align:left;
}
.footer ul{
list-style:none;
margin:0;
padding:0;
text-align:left;
}
.footer li{
margin-bottom:10px;
}
.footer a{
color:#b8dcc8;
font-size:14px;
text-decoration:none;
}
.footer-bottom{
margin-top:35px;
padding-top:20px;
border-top:1px solid rgba(255,255,255,.12);
text-align:left;
}
.footer-bottom p{
margin:0;
font-size:13px;
color:rgba(255,255,255,.6);
}
/* Mobile Footer */
@media (max-width:768px){
.footer{
padding:25px 20px;
}
.footer-grid{
display:flex;
flex-direction:column;
gap:30px;
}
.footer-about,
.footer-links{
width:100%;
}
.footer h4{
font-size:16px;
margin-bottom:10px;
}
.footer p{
font-size:14px;
}
.footer ul{
margin:0;
padding:0;
}
.footer li{
margin-bottom:8px;
}
.footer-bottom{
margin-top:25px;
padding-top:18px;
text-align:left;
}
}
.post-meta{
display:flex;
gap:25px;
align-items:center;
margin-top:-15px;
margin-bottom:30px;
color:#888;
font-size:13px;
}
.post-meta span:first-child{
color:var(--primary);
font-weight:600;
}
.post-meta span:last-child{
color:#777;
}
@media(max-width:600px){
.post-meta{
flex-direction:column;
align-items:flex-start;
gap:4px;
}
}
.author-box{
display:flex;
box-sizing:border-box;
align-items:flex-start;
gap:16px;
padding:18px;
margin:35px auto;
border:1px solid #e5e7eb;
border-radius:12px;
background:#f8fafc;
box-shadow:var(--shadow);
max-width:920px;
margin:40px auto;
background:#fff;
border-radius:16px;
padding:18px;
}
.author-avatar{
flex:0 0 80px;
}
.author-avatar img{
width:80px;
height:80px;
border-radius:50%;
object-fit:cover;
display:block;
}
.author-details{
flex:1;
align-self:center;
}
.author-details h3{
margin:0 0 8px;
font-size:22px;
color:#013220;
line-height:1.2;
}
.author-details strong{
display:block;
margin:0 0 10px;
font-size:17px;
}
.author-details p{
margin:0;
font-size:16px;
line-height:1.7;
color:#555;
}
@media(max-width:900px){
.author-box{
margin:20px;
padding:30px;
}
@media (max-width:700px){
.author-box{
flex-direction:column;
align-items:center;
text-align:center;
padding:0 25px 25px;
gap:0px;
}
.author-avatar{
flex:0 0 auto;
}
.author-avatar img{
width:70px;
height:70px;
}
.author-details{
width:100%;
text-align:center;
}
.author-details h3{
margin:0 0 6px;
font-size:20px;
}
.author-details p{
font-size:15px;
line-height:1.7;
}
}
}
.setting-control input[type="text"],
.setting-control textarea{
width:320px;
padding:10px 12px;
border:1px solid #ccc;
border-radius:8px;
font:inherit;
}
.setting-control textarea{
resize:vertical;
min-height:100px;
}
.post-meta{display:flex;gap:20px;color:#666;font-size:14px;margin-bottom:20px}.author-box{display:flex;gap:25px;align-items:center;background:#f7fafc;border:1px solid var(--border);padding:25px;border-radius:12px;margin:45px 0}.author-avatar img{width:90px;height:90px;border-radius:50%;object-fit:cover;margin:0}.author-details h3{margin:0 0 10px}.author-details p{margin:0}.more-articles-box{margin:50px 0;padding:25px;background:#fff;border:1px solid #e5e5e5;border-radius:12px}.more-articles-box h2{margin:0 0 20px}.more-articles-list{display:flex;flex-direction:column}.related-item{display:flex;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid #eee;text-decoration:none;color:inherit}.related-item:last-child{border-bottom:0}.related-thumb{width:70px;height:70px;flex-shrink:0;overflow:hidden;border-radius:8px;background:#f3f3f3}.related-thumb img{width:100%;height:100%;object-fit:cover;display:block;margin:0}.related-title{font-size:16px;font-weight:600;line-height:1.5}.no-thumb{width:100%;height:100%;background:#ddd}
/* ===============================
Homepage + Navigation Fix
=============================== */
.site-menu{
width:100%;
background:#013220;
box-shadow:0 5px 20px rgba(0,0,0,.12);
position:relative;
z-index:9999;
}
.site-menu .menu-container{
width:100%;
max-width:1200px;
height:75px;
margin:0 auto;
padding:0 25px;
display:flex;
align-items:center;
justify-content:space-between;
gap:30px;
}
.site-logo{
flex:0 0 auto;
color:#fff;
font-size:26px;
line-height:1;
font-weight:700;
text-decoration:none;
white-space:nowrap;
}
.site-logo:hover{color:#fff;text-decoration:none;}
.site-logo img{display:block;max-height:50px;width:auto;margin:0;border-radius:0;}
.site-logo a{display:block;}
.breadcrumbs{
margin:0 0 20px;
font-size:14px;
color:var(--muted);
}
.breadcrumbs a{color:var(--muted);text-decoration:underline;}
.breadcrumbs a:hover{color:var(--accent);}
.breadcrumbs .breadcrumb-sep{margin:0 8px;color:var(--border);}
.breadcrumbs [aria-current="page"]{color:var(--text);}
.primary-menu-wrap{margin-left:auto;}
.main-menu{
display:flex;
align-items:center;
gap:10px;
list-style:none;
margin:0;
padding:0;
}
.main-menu li{position:relative;margin:0;padding:0;list-style:none;}
.main-menu a{
display:block;
color:#fff;
text-decoration:none;
padding:12px 18px;
border-radius:8px;
font-size:16px;
line-height:1.3;
transition:background .2s ease,color .2s ease;
}
.main-menu > li > a:hover,
.main-menu > li.current-menu-item > a,
.main-menu > li.current_page_item > a{background:#0b4d36;color:#fff;text-decoration:none;}
.main-menu .sub-menu{
position:absolute;
top:100%;
left:0;
width:220px;
min-width:220px;
margin:0;
padding:10px;
background:#fff;
border-radius:10px;
box-shadow:0 10px 30px rgba(0,0,0,.15);
list-style:none;
opacity:0;
visibility:hidden;
transform:translateY(10px);
transition:opacity .2s ease,visibility .2s ease,transform .2s ease;
}
.main-menu li:hover > .sub-menu,
.main-menu li:focus-within > .sub-menu{
opacity:1;
visibility:visible;
transform:translateY(0);
}
.main-menu .sub-menu li{width:100%;}
.main-menu .sub-menu a{color:#222;padding:12px 15px;white-space:nowrap;}
.main-menu .sub-menu a:hover{background:#eef7f2;color:#013220;}
.menu-toggle{
display:none;
flex:0 0 auto;
width:44px;
height:44px;
padding:0;
border:0;
border-radius:8px;
background:transparent;
color:#fff;
font-size:30px;
line-height:1;
cursor:pointer;
}
.menu-toggle:hover{background:#0b4d36;}
.footer{
width:100%;
max-width:1200px;
margin:50px auto 0;
background:#013220;
color:#dfeee7;
border-radius:16px 16px 0 0;
padding:40px;
}
.footer-inner{width:100%;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:50px;align-items:start;}
.footer h3{margin:0 0 15px;color:#fff;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:1px;}
.footer p{margin:0 0 15px;color:rgba(255,255,255,.75);font-size:14px;line-height:1.8;}
.footer-menu{list-style:none;margin:0;padding:0;}
.footer-menu li{margin:0 0 10px;padding:0;list-style:none;}
.footer a{color:#b8dcc8;font-size:14px;text-decoration:none;}
.footer a:hover{color:#fff;text-decoration:none;}
.footer-bottom{margin-top:35px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);text-align:left;}
.footer-bottom p{margin:0;font-size:13px;color:rgba(255,255,255,.6);}
@media(max-width:768px){
.site-menu .menu-container{height:65px;padding:0 20px;}
.site-logo{font-size:22px;max-width:calc(100% - 60px);overflow:hidden;text-overflow:ellipsis;}
.menu-toggle{display:flex;align-items:center;justify-content:center;}
.primary-menu-wrap{
display:none;
position:absolute;
top:65px;
left:0;
right:0;
width:100%;
background:#013220;
padding:10px 20px 20px;
box-shadow:0 10px 20px rgba(0,0,0,.15);
}
.primary-menu-wrap.is-open{display:block;}
.main-menu{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%;}
.main-menu li{width:100%;}
.main-menu a{padding:14px 8px;border-bottom:1px solid rgba(255,255,255,.12);border-radius:0;}
.main-menu .sub-menu{
position:static;
width:100%;
min-width:0;
padding:0 0 0 15px;
background:transparent;
box-shadow:none;
opacity:1;
visibility:visible;
transform:none;
display:block;
}
.main-menu .sub-menu a{color:#fff;padding:12px 8px;}
.main-menu .sub-menu a:hover{background:#0b4d36;color:#fff;}
.footer{border-radius:14px;margin:40px 15px 0;width:calc(100% - 30px);padding:28px 22px;}
.footer-grid{grid-template-columns:1fr;gap:30px;}
}