/* ===== THEME TOKENS ===== */ :root { --accent: #ff8a2a; --accent-600: #e67a1f; --accent-soft: #fff5ed; --paper: #fffdf9; --ink: #1e1717; --muted: #1f1919; --card: #ffffff; --line: #e9ecef; --ring: rgba(255,138,42,.22); --radius: 14px; --radius-lg: 18px; --shadow-1: 0 3px 10px rgba(0,0,0,.06); --shadow-2: 0 12px 28px rgba(0,0,0,.10); --shadow-3: 0 16px 50px rgba(0,0,0,.18); --speed: .28s; --surface-1: #fff; --surface-2: #faf7f2; --ff-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif; --ff-serif: 'Merriweather', serif; } /* Dark theme – works for either .dark or .theme-dark on */ .dark, .theme-dark { --paper: #121418; --ink: #e8ecf1; --muted: #a6aaac; --card: #171b20; --line: #262c32; --surface-1: #151a1e; --surface-2: #101418; --shadow-1: 0 3px 10px rgba(0,0,0,.45); --shadow-2: 0 12px 28px rgba(0,0,0,.55); --shadow-3: 0 16px 50px rgba(0,0,0,.65); --ring: rgba(255,138,42,.28); } /* ===== BASE ===== */ *{ box-sizing:border-box; } html, body{ background:var(--paper); color:var(--ink); font-family:var(--ff-sans); line-height:1.6; } img{ max-width:100%; height:auto; } .bg-shapes{ position:fixed; inset:0; pointer-events:none; z-index:-1; background: radial-gradient(90px 90px at 8% 12%, rgba(255,138,42,.15), transparent 60%), radial-gradient(120px 120px at 85% 15%, rgba(255,138,42,.12), transparent 60%), radial-gradient(120px 120px at 22% 70%, rgba(255,138,42,.10), transparent 60%), radial-gradient(80px 80px at 82% 78%, rgba(255,138,42,.12), transparent 60%); } .dark .bg-shapes, .theme-dark .bg-shapes{ background: radial-gradient(90px 90px at 8% 12%, rgba(255,138,42,.10), transparent 60%), radial-gradient(120px 120px at 85% 15%, rgba(255,138,42,.08), transparent 60%), radial-gradient(120px 120px at 22% 70%, rgba(255,138,42,.06), transparent 60%), radial-gradient(80px 80px at 82% 78%, rgba(255,138,42,.10), transparent 60%); } a { color: var(--accent) !important; text-decoration: none;} h1,h2,h3,h4,h5,h6{ font-family:var(--ff-serif); line-height:1.25; margin-bottom:1rem; color: var(--text) !important;} /* ===== NAV HELPERS (header.php uses them) ===== */ .nav-link{ color:var(--ink); font-weight:600; padding:.6rem 1rem!important; border-radius:12px; transition: color var(--speed), transform var(--speed), background var(--speed); } .nav-link:hover{ color:var(--accent-600); background:rgba(0,0,0,.03); transform:translateY(-1px); } .dark .nav-link:hover, .theme-dark .nav-link:hover{ background:rgba(255,255,255,.06); } .nav-link.active{ color:#fff; background:var(--accent); } /* ===== BUTTONS ===== */ .btn-accent{ --bs-btn-color:#fff; --bs-btn-border-color:var(--accent); color: #fff !important; --bs-btn-hover-bg:var(--accent-600); --bs-btn-hover-border-color:var(--accent-600); border-radius:999px; padding:.65rem 1.35rem; font-weight:700; letter-spacing:.3px; box-shadow:0 6px 18px rgba(255,138,42,.25); transition:transform .16s ease, box-shadow .16s ease, background .16s ease; } .btn-accent:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(255,138,42,.32); } .btn-outline-accent{ color:var(--accent); border:2px solid var(--accent); background:transparent; border-radius:999px; padding:.6rem 1.1rem; font-weight:700; transition:background .16s,color .16s,transform .16s; } .btn-outline-accent:hover{ border-color:var(--accent); color:#fff; transform:translateY(-1px); } /* Home buttons */ /* ===== BUTTONS ===== */ .btn-accent-readmore{ background-color: var(--accent); --bs-btn-color:#fff; --bs-btn-border-color:var(--accent); color: var(--accent) !important; --bs-btn-hover-bg:var(--accent-600); --bs-btn-hover-border-color:var(--accent-600); color: #fff !important; border-radius:999px; padding:.65rem 1.35rem; font-weight:700; letter-spacing:.3px; box-shadow:0 6px 18px rgba(255,138,42,.25); transition:transform .16s ease, box-shadow .16s ease, background .16s ease; } .btn-accent-readmore:hover{ transform:translateY(-2px); box-shadow:0 10px 28px rgba(255,138,42,.32); } .btn-outline-accent-readmore{ color:var(--accent); border:2px solid var(--accent); background:transparent; border-radius:999px; padding:.6rem 1.1rem; font-weight:700; transition:background .16s,color .16s,transform .16s; } .btn-outline-accent-readmore:hover{ background:var(--accent); color:#fff; transform:translateY(-1px); } /* End Button CSS */ /* ===== TITLES ===== */ .section-title{ position:relative; display:inline-block; font-weight:900; } .section-title::after{ content:''; position:absolute; left:0; bottom:-10px; width:52px; height:4px; background:var(--accent); border-radius:2px; } .text-center .section-title::after{ left:50%; transform:translateX(-50%); } /* ===== CARDS & POSTS ===== */ .card{ background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); transition:transform .18s, box-shadow .18s, border-color .18s; overflow:hidden; box-shadow:var(--shadow-1); } .card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-2); } .card-img-top{ width:100%; height:auto; max-height:260px; object-fit:cover; } .card-body{ padding:1.25rem 1.25rem 1rem; } .card-footer{ background:transparent; border-top:1px solid color-mix(in srgb, var(--line) 70%, transparent); } .post-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-1); transition:transform .18s, box-shadow .18s, border-color .18s; } .post-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-2); } .post-thumb{ width:100%; height:auto; max-height:300px; object-fit:cover; transition:transform .5s ease; } @media (min-width:768px){ .post-thumb{ width:340px; max-height:none; } } .post-card:hover .post-thumb{ transform:scale(1.03); } .post-body{ display:flex; flex-direction:column; gap:.75rem; padding:1.25rem; } .post-title{ font-size:clamp(1.35rem,1.1rem + .9vw,2rem); margin:0; } .post-excerpt{ color:var(--muted); margin:0 0 1rem; } .meta a{ color:var(--accent-600); font-weight:700; text-decoration:none; } .meta a:hover{ color:var(--accent); text-decoration:underline; } /* Sidebar + widgets (theme-aware) */ .sidebar{ position:sticky; top:2rem; } .side-card{ background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-1); overflow:hidden; } .latest-list .thumb-sm{ width:56px; height:56px; object-fit:cover; border-radius:10px; } /* List-group (Categories & Latest Posts) – force theme variables */ .list-group-item{ background:var(--card); color:var(--ink); border-color:var(--line); transition:background .15s, color .15s; } .list-group-item:hover{ background:rgba(0,0,0,.03); } .dark .list-group-item:hover, .theme-dark .list-group-item:hover{ background:rgba(255,255,255,.06); } /* Badges – unified */ .badge{ border-radius:999px; font-weight:700; } .badge.bg-accent{ background:var(--accent)!important; color:#fff; } /* Featured section surface (theme-aware) */ .section-surface{ background:var(--surface-1); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .dark .section-surface, .theme-dark .section-surface{ background:linear-gradient(180deg, var(--surface-1), var(--surface-1)); } /* ===== REVEAL ANIMATIONS ===== */ @media (prefers-reduced-motion:no-preference){ .reveal{ opacity:0; transform:translateY(14px); } .reveal.revealed{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; } .reveal-delay-1{ transition-delay:.06s; } .reveal-delay-2{ transition-delay:.12s; } .reveal-delay-3{ transition-delay:.18s; } } /* ===== LOAD MORE ===== */ .load-more-wrap{ display:flex; justify-content:center; margin-top:.5rem; } .btn-load-more{ border-radius:999px; padding:.7rem 1.4rem; font-weight:800; letter-spacing:.3px; } .skeleton{ position:relative; overflow:hidden; background:color-mix(in srgb, var(--card) 90%, #bbb 10%); min-height:140px; } .skeleton::after{ content:''; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); animation: shimmer 1.2s infinite; } @keyframes shimmer{ 100%{ transform:translateX(100%); } } /* Misc utilities */ .text-accent{ color:var(--accent-600)!important; } .xsmall{ font-size:.78rem; color:var(--muted)!important; } /* Footer */ footer{ background:#1a1d23; color:#cfcfcf; padding:3rem 0 2rem; } footer h3, footer h4{ color:#fff; margin-bottom:1rem; position:relative; padding-bottom:.6rem; } footer h3::after, footer h4::after{ content:''; position:absolute; left:0; bottom:0; width:50px; height:3px; background:var(--accent); } footer a{ color:inherit; text-decoration:none; transition: color var(--speed), transform var(--speed); } footer a:hover{ color:var(--accent); transform:translateY(-2px); } .footer-muted{ opacity:.8; } /* ======================= BLOG — TOC & SHARE FAB ======================= */ /* Readability tweaks */ .lh-tight{ line-height:1.1; } .prose{ font-size:1.075rem; line-height:1.8; letter-spacing:.1px; } .prose .lede{ font-size:clamp(1.05rem,.9rem + .6vw,1.25rem); color:var(--muted); margin-bottom:1.25rem; } .prose p{ margin:1rem 0; color:var(--ink); } .prose ul,.prose ol{ padding-left:1.2rem; } .edge-figure img{ border-radius:16px; box-shadow:var(--shadow-1); } /* TOC list visuals */ .toc-list{ list-style:none; padding:0; margin:0; } .toc-h2{ margin:.35rem 0; } .toc-h3{ margin:.2rem 0 .2rem 1rem; opacity:.95; } .toc a{ display:block; padding:.3rem 0; color:var(--muted); text-decoration:none; border-radius:8px; } .toc a:hover{ color:var(--accent-600); } .toc a.active{ color:var(--accent-600); font-weight:800; } /* ===== Progress bar / figures / callouts ===== */ .reading-progress{ position:fixed; left:0; top:0; height:4px; width:100%; background:linear-gradient(90deg,var(--accent), color-mix(in srgb, var(--accent) 60%, #fff 40%)); transform:scaleX(0); transform-origin:0 0; z-index:1200; /* above trays */ box-shadow:0 2px 6px rgba(0,0,0,.08); } .prose figure{ margin:1.4rem 0; } .prose figcaption{ color:var(--muted); font-size:.92rem; margin-top:.4rem; } .prose blockquote{ border-left:4px solid var(--accent); padding:.75rem 1rem; margin:1.4rem 0; background:color-mix(in srgb, var(--accent) 8%, var(--card) 92%); border-radius:10px; color:var(--muted); } .prose .callout{ border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:12px; padding:.85rem 1rem; background:color-mix(in srgb, var(--accent) 6%, var(--card) 94%); } /* Prev/Next cards */ .nav-article .card{ background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-1); } .nav-article .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-2); } /* Reveal */ @media (prefers-reduced-motion:no-preference){ .reveal{ opacity:0; transform:translateY(14px); } .reveal.revealed{ opacity:1; transform:none; transition:opacity .6s, transform .6s; margin-top:30px;} } /* Ensure site header & menus still on top */ .navbar, .dropdown-menu{ z-index:1300; } /* ——— GLOBAL TOKENS fallback (uses your vars if present) ——— */ :root{ --_card: var(--card, #fff); --_ink: var(--ink, #222); --_line: var(--line, #e9ecef); --_shadow2: 0 12px 28px rgba(0,0,0,.12); } /* FAB stack — always visible */ #fabStack, #fabStack.d-none, #fabStack[class^="d-"], #fabStack[class*=" d-"]{ display:flex !important; flex-direction:column; gap:12px; position:fixed; z-index:1400; /* below navbar, above content */ } /* MOBILE (default): bottom-right */ #fabStack{ right:22px; bottom:88px; } /* DESKTOP: left gutter of container */ @media (min-width:992px){ #fabStack{ top:110px; bottom:auto; right:auto; /* anchor to container-xl gutter (≈1140px wide) */ right: max(-15px, calc((100vw - 1140px)/2 + 8px)); } } /* FAB buttons */ #fabStack .fab-btn{ width:48px; height:48px; border-radius:50%; border:1px solid var(--_line); background:var(--_card); color:#1f1919; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 10px 24px rgba(0,0,0,.16); } /* SHARE TRAY — fixed, collapsible */ #shareTray{ position:fixed; z-index:1410; display:grid; grid-auto-flow:column; gap:8px; background:var(--_card); border:1px solid var(--_line); border-radius:999px; padding:6px; box-shadow:var(--_shadow2); transform:scale(.9); opacity:0; pointer-events:none; transition:transform .18s ease, opacity .18s ease; } #shareTray.open{ transform:none; opacity:1; pointer-events:auto; } /* MOBILE position: next to FABs */ #shareTray{ right:76px; bottom:92px; } /* DESKTOP position: beside left gutter stack */ @media (min-width:992px){ #shareTray{ left: calc( max(20px, (100vw - 1140px)/2 + 8px) + 56px ); /* stack left + 56px */ top:110px; right:auto; bottom:auto; } } #shareTray .share-chip{ width:36px; height:36px; border-radius:50%; border:1px solid var(--_line); background:var(--_card); color:var(--_ink); display:flex; align-items:center; justify-content:center; } /* TOC PANEL — no gap when closed */ #tocPanel, #tocPanel.d-none, #tocPanel[class^="d-"], #tocPanel[class*=" d-"]{ display:none !important; } #tocPanel.open{ display:block !important; } /* MOBILE TOC: bottom sheet */ #tocPanel{ position:fixed; left:12px; right:12px; bottom:12px; max-height:60vh; overflow:auto; background:var(--_card); border:1px solid var(--_line); border-radius:16px; box-shadow:var(--_shadow2); transform:translateY(12px); opacity:0; pointer-events:none; z-index:1410; transition:transform .18s ease, opacity .18s ease; } #tocPanel.open{ transform:none; opacity:1; pointer-events:auto; } /* DESKTOP TOC: floating near left gutter */ @media (min-width:992px){ #tocPanel{ left: max(20px, calc((100vw - 1140px)/2 + 8px)); right:auto; top:110px; bottom:auto; width: clamp(280px, 28vw, 420px); transform: scale(.98) translateY(6px); opacity:0; pointer-events:none; } #tocPanel.open{ transform:none; opacity:1; pointer-events:auto; } } /* make sure header stays above everything */ .navbar, .dropdown-menu{ z-index:1500 !important; } /* breadcrumbs custom */ .breadcrumb-item+.breadcrumb-item::before{ color: var(--ink) !important; } .breadcrumb-item.active{ color: var(--ink) !important;}