/* ========================================== Variables ========================================== */ :root { --sidebar-width: 260px; --sidebar-bg: #17191f; --sidebar-text: #c4c6cc; --sidebar-muted: #8a8d9a; --sidebar-hover: #eeeef0; --sidebar-accent: #eeeef0; --body-bg: #f2f0eb; --body-text: #1a1a1a; --link-color: #2c3345; --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --font-heading: "Lora", Georgia, serif; --mobile-header-height: 56px; --transition: 0.25s ease; --card-pad-v: clamp(32px, 5vw, 72px); --card-pad-h: clamp(24px, 5vw, 64px); } /* ========================================== Reset / Base ========================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); background: var(--body-bg); color: var(--body-text); line-height: 1.7; display: flex; min-height: 100vh; } a { color: var(--link-color); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; display: block; } /* ========================================== Sidebar ========================================== */ .site-sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; padding: 40px 32px; overflow-y: auto; z-index: 100; transition: transform var(--transition); } .sidebar-avatar { width: 152px; height: 152px; border-radius: 50%; overflow: hidden; margin-bottom: 16px; background: #2a2d36; flex-shrink: 0; align-self: center; } .sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; } .sidebar-avatar-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 600; color: var(--sidebar-muted); letter-spacing: -1px; } .sidebar-title { display: block; font-family: var(--font-heading); font-size: 24px; font-weight: 700; color: var(--sidebar-accent); letter-spacing: 0.01em; line-height: 1.3; margin-bottom: 8px; text-decoration: none; text-align: center; } .sidebar-title:hover { text-decoration: none; opacity: 0.85; } .sidebar-tagline { font-size: 12px; color: var(--sidebar-muted); margin-bottom: 20px; line-height: 1.4; } .sidebar-divider { border: none; border-top: 1px solid #2e3140; margin: 16px 0 24px; } .sidebar-nav { flex: 1; } .sidebar-nav ul { list-style: none; } .sidebar-nav li { margin-bottom: 2px; } .sidebar-nav a { display: block; color: var(--sidebar-muted); font-size: 13px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; padding: 7px 0; transition: color var(--transition); text-decoration: none; } .sidebar-nav a:hover, .sidebar-nav .current-menu-item > a, .sidebar-nav .current_page_item > a { color: var(--sidebar-hover); } .sidebar-foredrag a { text-transform: none; letter-spacing: 0; } .sidebar-section-label { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #6e7080; margin-bottom: 6px; text-align: center; } .sidebar-footer { margin-top: auto; padding-top: 32px; font-size: 11px; color: #404350; } /* WP admin bar — desktop (32px fixed bar, WP adds margin-top:32px to ) */ .admin-bar .site-sidebar { top: 32px; height: calc(100vh - 32px); } /* ========================================== Mobile Header ========================================== */ .mobile-header { display: none; position: fixed; top: 0; left: 0; right: 0; height: var(--mobile-header-height); background: var(--sidebar-bg); color: var(--sidebar-text); align-items: center; justify-content: space-between; padding: 0 16px; z-index: 200; } .mobile-header-identity { display: flex; align-items: center; gap: 12px; min-width: 0; } .mobile-header .sidebar-avatar { width: 34px; height: 34px; flex-shrink: 0; margin-bottom: 0; } .mobile-header .sidebar-avatar-placeholder { font-size: 13px; } .mobile-header-title { font-size: 14px; font-weight: 600; color: var(--sidebar-accent); letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hamburger { background: none; border: none; cursor: pointer; padding: 8px; display: flex; flex-direction: column; gap: 5px; color: var(--sidebar-text); } .hamburger span { display: block; width: 22px; height: 2px; background: currentColor; transition: transform var(--transition), opacity var(--transition); transform-origin: center; } .hamburger.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.is-active span:nth-child(2) { opacity: 0; } .hamburger.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Overlay */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 99; opacity: 0; transition: opacity var(--transition); } .sidebar-overlay.is-visible { opacity: 1; } /* ========================================== Main Content ========================================== */ .site-main-wrap { margin-left: var(--sidebar-width); flex: 1; min-width: 0; background: var(--body-bg); min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: clamp(24px, 5vw, 80px) clamp(16px, 4vw, 64px); } .site-content { background: #fff; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.06); width: 100%; max-width: 720px; padding: var(--card-pad-v) var(--card-pad-h); overflow: hidden; } .entry-cover { margin: calc(-1 * var(--card-pad-v)) calc(-1 * var(--card-pad-h)) var(--card-pad-v); border-radius: 8px 8px 0 0; overflow: hidden; line-height: 0; } .entry-cover img { width: 100%; height: auto; display: block; border-radius: 0; } .entry-body { /* inherits padding from .site-content */ } /* ========================================== Entry ========================================== */ .entry-header { margin-bottom: 40px; } .entry-title { font-family: var(--font-heading); font-size: clamp(24px, 4vw, 36px); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--body-text); margin-bottom: 12px; } .entry-meta { font-size: 13px; color: #999; } .entry-meta--laengde { display: flex; align-items: center; gap: 6px; } .entry-header--foredrag { text-align: center; } .entry-header--foredrag .entry-meta--laengde { justify-content: center; } .foredrag-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #9a9aa4; margin-bottom: 12px; } .entry-content { font-size: 16px; line-height: 1.8; color: #222226; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 { font-family: var(--font-heading); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; margin: 2em 0 0.6em; color: var(--body-text); } .entry-content h2 { font-size: 22px; } .entry-content h3 { font-size: 18px; } .entry-content h4 { font-size: 16px; } .entry-content p { margin-bottom: 1.5em; } .entry-content ul, .entry-content ol { padding-left: 24px; margin-bottom: 1.5em; } .entry-content li { margin-bottom: 0.4em; } .entry-content blockquote { border-left: 3px solid #ddd; padding-left: 20px; margin: 2em 0; color: #6b6b74; font-style: italic; } .entry-content code { font-family: "SF Mono", Menlo, Monaco, Consolas, monospace; font-size: 0.85em; background: #f0f0f0; padding: 2px 6px; border-radius: 3px; } .entry-content pre { background: #f5f5f5; padding: 20px; border-radius: 6px; overflow-x: auto; margin-bottom: 1.5em; } .entry-content pre code { background: none; padding: 0; } .entry-content img { border-radius: 6px; margin: 1.5em 0; } .entry-content a { text-decoration: underline; text-underline-offset: 3px; } /* ========================================== Post List (Archive / Home) ========================================== */ .posts-list { list-style: none; } .post-item { padding: 32px 0; border-bottom: 1px solid #e8e5df; } .post-item:first-child { padding-top: 0; } .post-item-title { font-family: var(--font-heading); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; } .post-item-title a { color: var(--body-text); text-decoration: none; } .post-item-title a:hover { text-decoration: underline; text-underline-offset: 3px; } .post-item-meta { font-size: 12px; color: #aaa; margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.05em; } .post-item-excerpt { font-size: 15px; color: #4a4a52; line-height: 1.7; } /* ========================================== Pagination ========================================== */ .pagination { display: flex; gap: 8px; margin-top: 48px; font-size: 14px; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid #e0e0e0; border-radius: 4px; color: var(--body-text); text-decoration: none; transition: background var(--transition), border-color var(--transition); } .pagination a:hover { background: #f0f0f0; text-decoration: none; } .pagination .current { background: var(--body-text); color: #fff; border-color: var(--body-text); } /* ========================================== 404 / No Results ========================================== */ .not-found-title { font-size: 80px; font-weight: 800; color: #ebebeb; line-height: 1; margin-bottom: 16px; } /* ========================================== Responsive — Mobile ========================================== */ @media (max-width: 768px) { .mobile-header { display: flex; } .site-sidebar { transform: translateX(-100%); top: 0; z-index: 250; } .site-sidebar.is-open { transform: translateX(0); } .sidebar-overlay { display: block; } .site-main-wrap { margin-left: 0; padding: calc(var(--mobile-header-height) + 16px) 16px 16px; } :root { --card-pad-v: clamp(24px, 4vw, 40px); --card-pad-h: clamp(20px, 4vw, 32px); } /* WP admin bar offsets (logged-in users) — mobile admin bar is 46px */ .admin-bar .mobile-header { top: 46px; } .admin-bar .site-sidebar { top: 46px; height: calc(100vh - 46px); z-index: 250; } .admin-bar .site-main-wrap { padding-top: calc(var(--mobile-header-height) + 46px); } } .site-content { padding: 40px 24px; } } @media (max-width: 480px) { .site-content { padding: 32px 20px; } }