/* ============================================================ Theme Definitions Switch themes by setting data-theme="" on . Default (no attribute or "deep-ocean") = Theme B. Available themes: deep-ocean (B) — default, premium & elegant midnight-slate (A) — clean, professional purple-royalty (C) — creative, bold nordic-forest (D) — calm, nature-inspired cyberpunk (E) — high-energy, tech-forward ============================================================ */ /* ------------------------------------------------------------------ B — Deep Ocean (default) ------------------------------------------------------------------ */ :root, [data-theme="deep-ocean"] { --bg-primary: #0f1419; --bg-secondary: #1a2332; --bg-card: #1e2d3d; --text-primary: #f8fafc; --text-secondary: #cbd5e1; --text-muted: #64748b; --accent-primary: #7dd4e8; /* pastel cyan */ --accent-secondary: #b8a4f8; /* pastel purple */ --accent-highlight: #f9b97a; /* pastel orange */ --border-color: #2d3f55; --navbar-bg: rgba(15, 20, 25, 0.93); } /* ------------------------------------------------------------------ A — Midnight Slate ------------------------------------------------------------------ */ [data-theme="midnight-slate"] { --bg-primary: #1a1a1a; --bg-secondary: #222222; --bg-card: #2a2a2a; --text-primary: #f5f5f5; --text-secondary: #cccccc; --text-muted: #888888; --accent-primary: #4f9cf9; /* blue */ --accent-secondary: #8b5cf6; /* purple */ --accent-highlight: #ec4899; /* rose */ --border-color: #333333; --navbar-bg: rgba(26, 26, 26, 0.93); } /* ------------------------------------------------------------------ C — Purple Royalty ------------------------------------------------------------------ */ [data-theme="purple-royalty"] { --bg-primary: #301e4e; --bg-secondary: #3d2660; --bg-card: #432a6e; --text-primary: #f4f0fc; --text-secondary: #d8cff5; --text-muted: #9e8cc5; --accent-primary: #ff6e6c; /* coral */ --accent-secondary: #67568c; /* muted purple */ --accent-highlight: #fbdd74; /* gold */ --border-color: #5a3d8a; --navbar-bg: rgba(48, 30, 78, 0.93); } /* ------------------------------------------------------------------ D — Nordic Forest ------------------------------------------------------------------ */ [data-theme="nordic-forest"] { --bg-primary: #1b2d2d; --bg-secondary: #223838; --bg-card: #2a4242; --text-primary: #f0f4f4; --text-secondary: #d0d8d8; --text-muted: #7a9a9a; --accent-primary: #2ba84a; /* green */ --accent-secondary: #0ea5e9; /* sky blue */ --accent-highlight: #f59e0b; /* amber */ --border-color: #2d4a4a; --navbar-bg: rgba(27, 45, 45, 0.93); } /* ------------------------------------------------------------------ E — Cyberpunk ------------------------------------------------------------------ */ [data-theme="cyberpunk"] { --bg-primary: #0a0e27; --bg-secondary: #0d1230; --bg-card: #111638; --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-muted: #666688; --accent-primary: #00d4ff; /* cyan */ --accent-secondary: #ff006e; /* magenta */ --accent-highlight: #39ff14; /* neon green */ --border-color: #1a2050; --navbar-bg: rgba(10, 14, 39, 0.93); } /* ============================================================ Global base styles — all driven by variables ============================================================ */ html, body { background-color: var(--bg-primary); color: var(--text-primary); transition: background-color 0.3s ease, color 0.3s ease; /* Offset for the fixed-top navbar (~56px Bootstrap default + a touch of breathing room) */ padding-top: 72px; } /* --- Navbar -------------------------------------------------- */ .navbar { background-color: var(--navbar-bg) !important; border-bottom: 1px solid var(--border-color); transition: background-color 0.3s ease; } .navbar-brand { font-weight: 700; letter-spacing: 1px; color: var(--text-primary) !important; } .navbar-dark .navbar-nav .nav-link { color: var(--text-secondary) !important; transition: color 0.2s; } .navbar-dark .navbar-nav .nav-link:hover { color: var(--accent-primary) !important; } /* Flex spacer: pushes items after it to the right on desktop */ .nav-spacer { flex: 1 1 auto; } /* Vertically center icon items (theme dots, GitHub) on desktop */ .nav-item-icon { display: flex; align-items: center; } /* Mobile: left-align everything uniformly when navbar is collapsed */ @media (max-width: 767px) { .nav-spacer { display: none; } .nav-item-icon { padding: 0.25rem 0; } .theme-switcher { padding-left: 0.5rem; } } /* --- Cards --------------------------------------------------- */ .card { background-color: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); } .card-title { color: var(--text-primary); } .card-text { color: var(--text-secondary); } /* --- Typography --------------------------------------------- */ .text-muted { color: var(--text-muted) !important; } a { color: var(--accent-primary); } a:hover { color: var(--accent-secondary); } /* --- Buttons ------------------------------------------------- */ .btn-primary { background-color: var(--accent-primary); border-color: var(--accent-primary); color: var(--bg-primary); } .btn-primary:hover { background-color: var(--accent-secondary); border-color: var(--accent-secondary); color: var(--text-primary); } .btn-outline-primary { color: var(--accent-primary); border-color: var(--accent-primary); } .btn-outline-primary:hover { background-color: var(--accent-primary); color: var(--bg-primary); } /* --- Sections ----------------------------------------------- */ .bg-secondary-section { background-color: var(--bg-secondary); } /* ============================================================ Page components — use variables so all themes work automatically ============================================================ */ /* Shared heading style used across pages */ .section-title { font-size: 2rem; font-weight: 300; letter-spacing: 3px; text-transform: uppercase; color: var(--text-primary); } /* --- Blog: home grid cards ---------------------------------- */ .blog-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; /* keeps image corners clipped */ transition: border-color 0.2s; } .blog-card:hover { border-color: var(--accent-primary); } /* Card cover image */ .blog-card-img { display: block; width: 100%; height: 180px; object-fit: cover; transition: opacity 0.2s; } .blog-card:hover .blog-card-img { opacity: 0.85; } /* Card body below image (or the whole card when no image) */ .blog-card-body { padding: 1.25rem; } .blog-card .category-badge { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; background-color: var(--accent-secondary) !important; } .blog-card .post-title { font-size: 1.1rem; font-weight: 700; } .blog-card .post-title a { color: var(--text-primary); text-decoration: none; } .blog-card .post-title a:hover { color: var(--accent-primary); } .blog-card .post-date { color: var(--text-muted); font-size: 0.85rem; } /* --- Blog: category list thumbnails ------------------------- */ .blog-list-thumb { width: 110px; height: 80px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } /* --- Blog: category nav ------------------------------------ */ .category-nav a { color: var(--text-muted); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; text-decoration: none; transition: color 0.2s; } .category-nav a:hover { color: var(--accent-primary); } /* --- Blog: category list (index) --------------------------- */ .blog-post-item { border-bottom: 1px solid var(--border-color); padding: 1.5rem 0; } .blog-post-item:last-child { border-bottom: none; } .blog-post-item h3 a { color: var(--text-primary); text-decoration: none; } .blog-post-item h3 a:hover { color: var(--accent-primary); } /* --- Blog: single post ------------------------------------- */ .post-title { font-size: 2.2rem; font-weight: 700; color: var(--text-primary); } .post-meta { color: var(--text-muted); font-size: 0.9rem; } .post-meta a { color: var(--text-muted); } .post-meta a:hover { color: var(--accent-primary); } .post-content { font-size: 1.05rem; line-height: 1.8; color: var(--text-secondary); } .post-content img { max-width: 100%; height: auto; } /* Breadcrumbs */ .breadcrumb { background: transparent; padding: 0; } .breadcrumb-item a { color: var(--text-muted); } .breadcrumb-item a:hover { color: var(--accent-primary); } .breadcrumb-item.active { color: var(--text-primary); } .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } /* --- Contact form ------------------------------------------ */ .contact-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 4px; } .contact-card label { color: var(--text-secondary); } .contact-card .form-control { background: var(--bg-secondary); border-color: var(--border-color); color: var(--text-primary); } .contact-card .form-control:focus { background: var(--bg-card); color: var(--text-primary); border-color: var(--accent-primary); box-shadow: 0 0 0 0.2rem rgba(6, 182, 212, 0.15); }