/* Load Google Fonts in the HTML (next step) */
:root{
--font-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
--font-heading: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
body { font-family: var(--font-body); }
h1, h2, h3, .project-name, .project-tagline { font-family: var(--font-heading); }
/* Optional: tighten headings a bit */
.project-name { letter-spacing: -0.02em; }
.project-tagline { font-weight: 500; }
/* Keep your back button tidy if you want */
.page-header .btn { border-radius: 6px; }
/* Home hero compact */
.home .page-header{
padding: 32px 16px; /* was much larger */
min-height: auto;
}
/* Tighten typography a bit */
.home .project-name{ margin: 6px 0 4px; font-size: 42px; }
.home .project-tagline{ margin: 0 0 8px; font-weight: 500; }
/* Optional: subtle background + fade */
.home .page-header{
background-image: linear-gradient(120deg, rgba(0,0,0,0.25), rgba(0,0,0,0.15)),
linear-gradient(120deg,#155799,#159957);
background-blend-mode: overlay, normal;
}
/* === Blog Page Styling === */
.blog-hero {
background: linear-gradient(135deg, #0366d6, #0fa678);
color: #fff;
text-align: center;
padding: 80px 20px 60px;
border-radius: 0 0 30px 30px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.blog-hero h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 10px;
}
.blog-hero p {
font-size: 1.1rem;
max-width: 700px;
margin: 0 auto;
}
.blog-list {
max-width: 800px;
margin: 40px auto;
padding: 0 20px;
}
.blog-link {
font-size: 1.3rem;
color: #0366d6;
text-decoration: none;
}
.blog-link:hover {
text-decoration: underline;
color: #024d9c;
}
/* === Blog Post Styling === */
.post-hero {
background: linear-gradient(135deg, #0366d6, #0fa678);
color: #fff;
text-align: center;
padding: 80px 20px 60px;
border-radius: 0 0 30px 30px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.post-hero h1 {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 8px;
}
.post-meta {
font-size: 1rem;
opacity: 0.9;
}
.post-body {
max-width: 800px;
margin: 40px auto;
padding: 0 20px;
font-size: 1.05rem;
line-height: 1.7;
}
.post-body img {
max-width: 100%;
border-radius: 8px;
margin: 20px 0;
}
.post-nav {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 800px;
margin: 40px auto;
padding: 0 20px;
font-size: 0.95rem;
}
.post-nav a {
color: #0366d6;
text-decoration: none;
}
/* === Author Box under posts === */
.author-box{
display:flex;
gap:16px;
align-items:center;
max-width:800px;
margin: 32px auto 0;
padding:16px 18px;
border:1px solid #e6e6e6;
border-radius:12px;
background:#fafafa;
}
.author-avatar{
width:72px; height:72px;
border-radius:50%;
object-fit:cover;
box-shadow:0 2px 6px rgba(0,0,0,0.08);
}
.author-meta{ line-height:1.45; }
.author-name{ margin:0; font-size:1.05rem; font-weight:700; }
.author-title{ margin:.15rem 0 .35rem; color:#555; font-size:.95rem; }
.author-links a{ color:#0366d6; text-decoration:none; }
.author-links a:hover{ text-decoration:underline; }
@media (max-width: 560px){
.author-box{ flex-direction:column; text-align:center; }
}
.post-nav a:hover {
text-decoration: underline;
color: #024d9c;
}
/* Ensure header is a positioning context */
.page-header { position: relative; }
/* Back button: always top-right in the hero */
.page-header .back-btn{
position: static !important;
top: 14px;
right: 14px;
margin: 0 !important;
transform: none !important;
z-index: 5;
background: rgba(0,0,0,.2);
color: #fff !important;
border: none;
border-radius: 10px;
padding: 10px 16px;
}
/* Tweak sizing on small screens */
@media (max-width: 480px){
.page-header .back-btn{
top: 10px;
right: 10px;
padding: 9px 14px;
font-size: 16px;
}
}
/* Container for both buttons */
.nav-buttons {
position: absolute;
top: 14px;
right: 14px;
display: flex;
gap: 10px;
z-index: 5;
}
/* Button styling */
.nav-buttons .btn {
background: rgba(0,0,0,0.25);
color: #fff !important;
border: none;
border-radius: 10px;
padding: 9px 14px;
font-size: 16px;
text-decoration: none;
transition: background 0.2s ease;
}
.nav-buttons .btn:hover {
background: rgba(255,255,255,0.25);
}
/* Mobile tweak */
@media (max-width: 480px) {
.nav-buttons {
top: 10px;
right: 10px;
gap: 8px;
}
.nav-buttons .btn {
font-size: 14px;
padding: 8px 12px;
}
}
/* Back + Home Buttons */
.nav-buttons {
position: fixed;
top: 15px;
right: 15px;
display: flex;
gap: 12px;
z-index: 9999;
}
.nav-buttons .btn {
background: #0066cc;
color: #fff !important;
text-decoration: none;
padding: 8px 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.nav-buttons .btn:hover {
background: #004c99;
}
/* Adjust for mobile */
@media (max-width: 768px) {
.nav-buttons {
top: 10px;
right: 10px;
gap: 8px;
}
.nav-buttons .btn {
font-size: 13px;
padding: 7px 12px;
}
}
/* Top-right Back + Home buttons (no overlap) */
.nav-buttons{
position: fixed; /* container is positioned */
top: 14px;
right: 14px;
display: flex;
gap: 10px; /* space between buttons */
flex-wrap: wrap; /* wrap on narrow screens */
z-index: 9999;
}
/* Make sure individual buttons are NOT absolutely positioned */
.nav-buttons .btn,
.nav-buttons .back-btn,
.nav-buttons .home-btn{
position: static !important; /* cancels earlier absolute rule */
margin: 0 !important; /* avoid Cayman’s centered margins */
transform: none !important;
box-shadow: 0 3px 8px rgba(0,0,0,.25);
background: #0a66cc;
color: #fff !important;
border: 0;
border-radius: 10px;
padding: 8px 14px;
font-size: 14px;
}
/* Hover + mobile tweaks */
.nav-buttons .btn:hover{ background:#094fa3; }
@media (max-width: 480px){
.nav-buttons{ top:10px; right:10px; gap:8px; }
.nav-buttons .btn{ font-size:13px; padding:7px 12px; }
}