/* Theme Name: Sugmag Nyheter Theme URI: https://www.sugmag.se/ Author: Sugmag Author URI: https://www.sugmag.se/ Description: Nyhetstema för Sugmag. Boxad layout, blå navigationslist, kondenserade rubriker och en innehållsspalt bredvid en smal sidopanel — byggt från grunden, inget överordnat tema krävs. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.4 Requires PHP: 7.4 License: GNU General Public License v3 or later License URI: http://www.gnu.org/licenses/gpl-3.0.html Text Domain: sugmag-nyheter Tags: news, blog, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready */ /* ========================================================================== 1. Tokens ========================================================================== */ :root { --c-primary: #005f8e; --c-primary-dark: #00476b; --c-primary-deep: #003049; --c-accent: #cc0000; --c-accent-dark: #a30000; --c-ink: #14181c; --c-body: #2b333b; --c-muted: #5a6672; --c-line: #dfe4e8; --c-line-2: #eef1f4; --c-bg: #ffffff; --c-surface: #f5f7f9; --c-quote: #eaeaea; --font-head: "Roboto Condensed", "Arial Narrow", Arial, sans-serif; --font-body: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --container: 1296px; --gap: 32px; --radius: 3px; --shadow-1: 0 1px 2px rgba(20, 24, 28, .06), 0 2px 8px rgba(20, 24, 28, .05); --shadow-2: 0 4px 12px rgba(20, 24, 28, .10), 0 12px 28px rgba(20, 24, 28, .08); } /* ========================================================================== 1b. Fix: overlays that use position:fixed ========================================================================== wp-dark-mode sets `filter: grayscale(var(--wpdm-grayscale, 0))` on . With --wpdm-grayscale at 0% that is a visual no-op, but ANY filter value makes the element a containing block for position:fixed descendants. That breaks third-party overlays that centre themselves on the viewport — the hCaptcha challenge popup ends up positioned against the whole document, so its top (with the instructions) is pushed out of reach. Removing a no-op filter changes nothing visually and restores correct fixed positioning. NOTE: if a grayscale value is ever set in the wp-dark-mode settings, drop this rule or that setting will not apply. */ html[data-wp-dark-mode-preset="0"] { filter: none; } /* ========================================================================== 2. Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--c-surface); color: var(--c-body); font-family: var(--font-body); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video { max-width: 100%; height: auto; } img { display: block; } a { color: var(--c-primary); text-decoration: none; } a:hover, a:focus { color: var(--c-accent); text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-head); color: var(--c-ink); font-weight: 700; line-height: 1.15; letter-spacing: -.005em; margin: 0 0 .5em; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } :focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; overflow: hidden; position: absolute !important; white-space: nowrap; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; } .skip-link:focus { left: 8px; top: 8px; clip: auto; clip-path: none; width: auto; height: auto; background: var(--c-bg); color: var(--c-ink); padding: 12px 20px; box-shadow: var(--shadow-2); } /* Boxed page, as on the reference site. */ #page { max-width: var(--container); margin: 0 auto; background: var(--c-bg); box-shadow: 0 0 0 1px var(--c-line-2); } .container { width: 100%; max-width: calc(var(--container) - 48px); margin: 0 auto; padding: 0 24px; } /* ========================================================================== 3. Header ========================================================================== */ .topbar { background: var(--c-primary-deep); color: rgba(255, 255, 255, .82); font-size: 14px; } .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; } .topbar-date { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .09em; font-size: 13px; } .topbar .search-form { display: flex; } .topbar .search-field { background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .18); color: #fff; font: inherit; padding: 5px 12px; border-radius: var(--radius) 0 0 var(--radius); width: 190px; transition: width .2s ease, background .2s ease; } .topbar .search-field::placeholder { color: rgba(255, 255, 255, .55); } .topbar .search-field:focus { width: 250px; background: rgba(255, 255, 255, .16); outline: none; } .topbar .search-submit { background: var(--c-accent); color: #fff; border: 0; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .06em; font-size: 13px; padding: 6px 14px; border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; } .topbar .search-submit:hover { background: var(--c-accent-dark); } /* ---- Social buttons ------------------------------------------------------ The icon row the old theme kept at the right edge of the top bar, next to the search field. Inline SVG inherits currentColor, so the hover state is one colour change and each network keeps its own brand tint on hover. */ .topbar-right { display: flex; align-items: center; gap: 14px; } .social-nav { display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; } /* The widget/list rules elsewhere in the sheet turn

into list items with their own margins, which stacked the icons vertically. Reset them here. */ .social-nav li, .social-nav .social-nav-item { display: block; list-style: none; margin: 0; padding: 0; border: 0; } .social-nav li::before, .social-nav li::marker { content: none; } .social-nav-link { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .10); transition: background .18s ease, color .18s ease, transform .18s ease; } .social-nav-link:hover, .social-nav-link:focus { color: #fff; text-decoration: none; transform: translateY(-1px); } .social-nav-item--facebook .social-nav-link:hover, .social-nav-item--facebook .social-nav-link:focus { background: #1877f2; } .social-nav-item--twitter .social-nav-link:hover, .social-nav-item--twitter .social-nav-link:focus { background: #000000; } .social-nav-item--instagram .social-nav-link:hover, .social-nav-item--instagram .social-nav-link:focus { background: #d62976; } .social-nav-item--youtube .social-nav-link:hover, .social-nav-item--youtube .social-nav-link:focus { background: #ff0000; } .social-nav-item--linkedin .social-nav-link:hover, .social-nav-item--linkedin .social-nav-link:focus { background: #0a66c2; } .social-nav-item--pinterest .social-nav-link:hover, .social-nav-item--pinterest .social-nav-link:focus { background: #e60023; } .social-nav-item--telegram .social-nav-link:hover, .social-nav-item--telegram .social-nav-link:focus { background: #229ed9; } .social-icon { display: block; width: 17px; height: 17px; } .branding-bar { background: var(--c-bg); } .branding-inner { display: flex; justify-content: center; text-align: center; padding: 28px 24px 24px; } .site-branding { display: flex; flex-direction: column; align-items: center; gap: 10px; } .custom-logo-link img { max-height: 92px; width: auto; } .brand-mark img { width: 300px; max-width: 72vw; height: auto; } .site-title { font-family: var(--font-head); font-size: 52px; line-height: 1; margin: 0; text-transform: uppercase; letter-spacing: -.01em; } .site-title a { color: var(--c-ink); text-decoration: none; } .site-title a:hover { color: var(--c-primary); } .site-description { margin: 0; color: var(--c-muted); font-size: 16px; font-style: italic; } /* When a custom logo is set the logo already carries the identity, so the text wordmark is hidden visually but kept for screen readers and SEO. WordPress puts `wp-custom-logo` on for this case. */ .wp-custom-logo .site-title, .site-branding.has-brand-mark .site-title { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .wp-custom-logo .site-description { margin-top: 4px; } /* ---- Navigation ---------------------------------------------------------- */ .main-navigation { background: var(--c-primary); position: sticky; top: 0; z-index: 50; box-shadow: var(--shadow-1); } .nav-inner { display: flex; align-items: center; } .main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; } .main-navigation li { position: relative; } .main-navigation a { display: block; color: #fff; font-family: var(--font-head); font-size: 15px; text-transform: uppercase; letter-spacing: .07em; line-height: 50px; padding: 0 16px; border-right: 1px solid rgba(0, 0, 0, .16); text-decoration: none; transition: background .15s ease; } .main-navigation > .container > ul > li:first-child > a { border-left: 1px solid rgba(0, 0, 0, .16); } .main-navigation a:hover, .main-navigation a:focus { background: var(--c-primary-dark); color: #fff; text-decoration: none; } .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a { background: var(--c-primary-dark); box-shadow: inset 0 -4px 0 var(--c-accent); } /* Dropdowns */ .main-navigation ul ul { display: block; position: absolute; top: 100%; left: 0; min-width: 240px; background: var(--c-primary-dark); box-shadow: var(--shadow-2); flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 60; } .main-navigation li:hover > ul, .main-navigation li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); } .main-navigation ul ul a { line-height: 1.4; padding: 11px 16px; border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, .14); text-transform: none; letter-spacing: .01em; font-size: 15px; color: #eef3f7; } .main-navigation ul ul ul { top: 0; left: 100%; } .menu-toggle { display: none; } /* ========================================================================== 4. Layout ========================================================================== */ .site-content { padding: 32px 0 48px; } .site-main-wrap { display: grid; grid-template-columns: minmax(0, 78%) minmax(0, 22%); gap: var(--gap); align-items: start; } .no-sidebar .site-main-wrap { grid-template-columns: minmax(0, 1fr); } /* ========================================================================== 5. Section headings ========================================================================== */ .section-heading { font-size: 15px; text-transform: uppercase; letter-spacing: .12em; color: var(--c-ink); margin: 36px 0 20px; padding-bottom: 10px; border-bottom: 2px solid var(--c-line); position: relative; } .section-heading span { position: relative; } .section-heading::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 68px; height: 2px; background: var(--c-accent); } .page-header { margin-bottom: 28px; padding-bottom: 16px; border-bottom: 2px solid var(--c-line); } .page-title { font-size: 36px; margin: 0; } .page-title span { color: var(--c-primary); } .archive-description { color: var(--c-muted); margin-top: 8px; } /* ========================================================================== 6. Entries ========================================================================== */ .entry-cats { margin-bottom: 10px; } .cat-chip { display: inline-block; background: var(--c-primary); color: #fff; font-family: var(--font-head); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; padding: 4px 10px; border-radius: var(--radius); text-decoration: none; } .cat-chip:hover { color: #fff; text-decoration: none; filter: brightness(1.15); } .entry-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--c-muted); font-size: 14px; margin-bottom: 12px; } .entry-meta a { color: var(--c-muted); } .entry-meta a:hover { color: var(--c-accent); } .entry-meta .reading-time::before, .entry-meta .byline::before { content: "·"; margin-right: 14px; color: var(--c-line); } .entry-title a { color: var(--c-ink); text-decoration: none; } .entry-title a:hover { color: var(--c-primary); text-decoration: none; } .entry-excerpt { color: var(--c-body); } .entry-excerpt p { margin-bottom: 0; } .readmore { display: inline-block; margin-top: 16px; background: var(--c-primary); color: #fff; font-family: var(--font-head); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: 10px 22px; border-radius: var(--radius); text-decoration: none; transition: background .15s ease, transform .15s ease; } .readmore:hover { background: var(--c-accent); color: #fff; text-decoration: none; transform: translateY(-1px); } /* ---- Lead ---------------------------------------------------------------- */ .entry-lead { border-bottom: 2px solid var(--c-line); padding-bottom: 32px; margin-bottom: 8px; } .entry-lead .entry-media { display: block; overflow: hidden; border-radius: var(--radius); } .entry-lead .entry-media img { width: 100%; } .entry-lead .entry-body { padding-top: 20px; } .entry-lead .entry-title { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 12px; } .entry-lead .entry-excerpt { font-size: 19px; } /* ---- Card grid ----------------------------------------------------------- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px; } .entry-card { background: var(--c-bg); border: 1px solid var(--c-line-2); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, border-color .2s ease; } /* Hover changes the shadow and border only — the image itself never moves. */ .entry-card:hover { box-shadow: var(--shadow-2); border-color: var(--c-line); } .entry-card .entry-media { display: block; aspect-ratio: 16 / 10; background: var(--c-surface); overflow: hidden; } .entry-card .entry-media img { width: 100%; height: 100%; object-fit: cover; } .entry-media-fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--font-head); font-size: 56px; color: #fff; background: linear-gradient(135deg, var(--c-primary), var(--c-primary-deep)); } .entry-card .entry-body { padding: 18px; display: flex; flex-direction: column; flex: 1; } .entry-card .entry-title { font-size: 21px; margin-bottom: 8px; } .entry-card .entry-excerpt { font-size: 16px; color: var(--c-muted); } /* ---- Compact rows -------------------------------------------------------- */ .post-list { display: flex; flex-direction: column; } .entry-row { display: flex; gap: 18px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--c-line-2); } .entry-row:last-child { border-bottom: 0; } .entry-row .entry-media { flex: 0 0 130px; border-radius: var(--radius); overflow: hidden; } .entry-row .entry-media img { width: 130px; height: 92px; object-fit: cover; } .entry-row .entry-title { font-size: 20px; margin-bottom: 6px; } .entry-row .entry-meta { margin-bottom: 0; } /* ========================================================================== 7. Single ========================================================================== */ .entry-single .entry-header { margin-bottom: 20px; } .entry-single .entry-title { font-size: clamp(30px, 3.6vw, 48px); margin-bottom: 12px; } .entry-media--single { margin: 0 0 28px; } .entry-media--single img { width: 100%; border-radius: var(--radius); } .entry-media--single figcaption { font-size: 14px; color: var(--c-muted); padding-top: 8px; border-bottom: 1px solid var(--c-line-2); padding-bottom: 10px; } .entry-content { font-size: 19px; } .entry-content > * { max-width: 46em; } .entry-content > .alignwide, .entry-content > .alignfull, .entry-content > figure, .entry-content > .wp-block-image, .entry-content > .wp-block-gallery, .entry-content > .wp-block-embed { max-width: 100%; } .entry-content h2 { font-size: 32px; margin-top: 1.5em; } .entry-content h3 { font-size: 25px; margin-top: 1.4em; } .entry-content h4 { font-size: 21px; margin-top: 1.3em; } .entry-content a { text-decoration: underline; text-underline-offset: 2px; } .entry-content a:hover { color: var(--c-accent); } .entry-content ul, .entry-content ol { padding-left: 1.4em; margin-bottom: 1.2em; } .entry-content li { margin-bottom: .4em; } .entry-content img, .entry-content figure img { border-radius: var(--radius); } .entry-content figure { margin: 1.8em 0; } .entry-content figcaption { font-size: 14px; color: var(--c-muted); padding-top: 8px; } blockquote { background: var(--c-quote); border-left: 5px solid var(--c-primary); margin: 1.8em 0; padding: 18px 22px; border-radius: 0 var(--radius) var(--radius) 0; font-size: 19px; } blockquote cite { display: block; margin-top: 10px; font-size: 15px; color: var(--c-muted); font-style: normal; } .entry-content pre { background: var(--c-primary-deep); color: #e8eef3; padding: 18px; border-radius: var(--radius); overflow-x: auto; font-size: 15px; line-height: 1.55; } .entry-content code { background: var(--c-surface); border: 1px solid var(--c-line-2); border-radius: 2px; padding: 1px 5px; font-size: .9em; } .entry-content pre code { background: none; border: 0; padding: 0; color: inherit; } .entry-content table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 16px; } .entry-content th, .entry-content td { border: 1px solid var(--c-line); padding: 9px 12px; text-align: left; } .entry-content th { background: var(--c-surface); font-family: var(--font-head); text-transform: uppercase; letter-spacing: .05em; font-size: 14px; } .entry-footer { margin-top: 28px; } .entry-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 16px; border-top: 1px solid var(--c-line-2); font-size: 14px; } .entry-tags span { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .09em; color: var(--c-muted); margin-right: 4px; } .entry-tags a { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 999px; padding: 3px 12px; color: var(--c-body); text-decoration: none; } .entry-tags a:hover { background: var(--c-primary); border-color: var(--c-primary); color: #fff; } /* Post navigation */ .post-navigation { margin: 36px 0 0; } .post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .post-navigation .nav-links > div { background: var(--c-surface); border: 1px solid var(--c-line-2); border-radius: var(--radius); padding: 14px 18px; } .post-navigation .nav-next { text-align: right; } .post-navigation .nav-label { display: block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; color: var(--c-muted); margin-bottom: 4px; } .post-navigation .nav-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; } .post-navigation a { text-decoration: none; } /* ========================================================================== 8. Comments ========================================================================== */ .comments-area { margin-top: 44px; padding-top: 28px; border-top: 2px solid var(--c-line); } .comments-title { font-size: 24px; } .comment-list { list-style: none; margin: 0 0 32px; padding: 0; } .comment-list ol.children { list-style: none; padding-left: 28px; } .comment-body { padding: 18px 0; border-bottom: 1px solid var(--c-line-2); } .comment-author { display: flex; align-items: center; gap: 10px; font-family: var(--font-head); font-size: 17px; } .comment-author img { border-radius: 50%; } .comment-metadata { font-size: 13px; color: var(--c-muted); margin: 4px 0 10px; } .comment-reply-link { font-family: var(--font-head); text-transform: uppercase; font-size: 13px; letter-spacing: .07em; } .comment-form label { display: block; font-family: var(--font-head); text-transform: uppercase; letter-spacing: .07em; font-size: 13px; color: var(--c-muted); margin-bottom: 5px; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--c-line); border-radius: var(--radius); background: var(--c-bg); } .comment-form input:focus, .comment-form textarea:focus { border-color: var(--c-primary); outline: none; box-shadow: 0 0 0 3px rgba(0, 95, 142, .15); } /* The name field is a short value; letting it run the full width of the form makes it read as broken next to the comment box. Cap it, and keep the comment box full width. */ .comment-form-author input, .comment-form-email input, .comment-form-url input { max-width: 380px; } .comment-form-comment textarea { min-height: 150px; resize: vertical; } .comment-form p { margin-bottom: 1.1em; } .comment-form .form-submit { margin-bottom: 0; } /* ========================================================================== 9. Buttons & forms ========================================================================== */ button, input[type="button"], input[type="reset"], input[type="submit"], .wp-block-search .wp-block-search__button { background: var(--c-primary); color: #fff; border: 0; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: 15px; padding: 11px 22px; border-radius: var(--radius); cursor: pointer; transition: background .15s ease; } button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, .wp-block-search .wp-block-search__button:hover { background: var(--c-accent); } /* ========================================================================== 10. Sidebar & widgets ========================================================================== */ /* Static on purpose: the column stays put rather than following the scroll. */ .widget-area { position: static; } .widget { background: var(--c-bg); border: 1px solid var(--c-line-2); border-radius: var(--radius); padding: 18px; margin-bottom: 24px; font-size: 16px; } .widget:last-child { margin-bottom: 0; } .widget-title { font-size: 14px; text-transform: uppercase; letter-spacing: .11em; margin: 0 0 14px; padding-bottom: 9px; border-bottom: 2px solid var(--c-line); position: relative; } .widget-title::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 44px; height: 2px; background: var(--c-accent); } .widget ul { list-style: none; margin: 0; padding: 0; } .widget li { padding: 8px 0; border-bottom: 1px solid var(--c-line-2); line-height: 1.4; } .widget li:last-child { border-bottom: 0; padding-bottom: 0; } .widget li a { color: var(--c-body); } .widget li a:hover { color: var(--c-accent); } .widget .search-form { display: flex; } .widget .search-field { flex: 1; min-width: 0; font: inherit; padding: 9px 12px; border: 1px solid var(--c-line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); } .widget .search-submit { border-radius: 0 var(--radius) var(--radius) 0; padding: 9px 16px; font-size: 14px; } /* ---- Live feed panels ---------------------------------------------------- The recent-forum-posts and recent-comments widgets are the live, fast-moving modules in the column, so they are deliberately NOT styled like the white informational cards further down: dark ground, avatars, clamped excerpts, a live dot. Two class names carry the same design: `asgarosforumrecentposts_widget` comes from the forum plugin and cannot be renamed, `sugmag-feed-widget` is the theme's own recent-comments widget. They are paired with :is() rather than duplicated so the panel only ever has one definition. */ .widget:is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) { /* Saturated brand blue, not a dark neutral. The other widgets are light cards; a dark-mode plugin darkens those to near-black, which would make a merely-dark panel look identical. A saturated blue block with a red top edge stays distinct whether or not the page is being darkened. */ background: var(--c-primary); border: 0; border-top: 4px solid var(--c-accent); border-radius: 0; padding: 0; overflow: hidden; box-shadow: var(--shadow-2); } :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .widget-title { display: flex; align-items: center; gap: 9px; margin: 0; padding: 13px 16px; color: #fff; background: var(--c-primary-deep); border-bottom: 0; } /* Drop the red underline rule the other widget titles use. */ :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .widget-title::after { content: none; } /* Live dot instead. */ :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .widget-title::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 3px rgba(204, 0, 0, .22); } :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) :is(.asgarosforum-widget, .sugmag-feed) { padding: 2px 0 4px; } :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .widget-element { display: flex; gap: 11px; padding: 12px 16px; border-bottom: 1px solid rgba(255, 255, 255, .16); transition: background .15s ease; } :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .widget-element:last-child { border-bottom: 0; } :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .widget-element:hover { background: rgba(255, 255, 255, .09); } /* The plugin reuses post images as avatars, so they arrive at odd aspect ratios (30x17, 19x30). Force a square crop. */ :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .widget-avatar { flex: none; } :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .widget-avatar img { width: 38px !important; height: 38px !important; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .30); margin: 0; } :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .widget-content { min-width: 0; display: flex; flex-direction: column; gap: 3px; } :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .post-link a { font-family: var(--font-head); font-size: 16px; font-weight: 700; line-height: 1.25; color: #fff; text-decoration: none; } :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .post-link a:hover { color: #7fd0f5; text-decoration: none; } /* Article titles run much longer than forum thread titles; clamp them so a comment row stays the same height as a forum row. */ .sugmag-feed-widget .post-link a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .widget:is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) :is(.asgarosforum-widget, .sugmag-feed) .post-author { display: block; font-size: 13px; color: rgba(255, 255, 255, .68); } /* The plugin ships its own role colours (red admin, green moderator) and marks them `!important`, so specificity alone cannot displace them — red admin names clashed with the panel's accent dot. Match the flag and keep the role distinction in tones that read on navy. */ .widget:is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) :is(.asgarosforum-widget, .sugmag-feed) .post-author a, .widget:is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) :is(.asgarosforum-widget, .sugmag-feed) .profile-link { color: #6fc3ec; font-weight: 600; text-decoration: none; } .widget:is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) :is(.asgarosforum-widget, .sugmag-feed) .highlight-admin, .widget:is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) :is(.asgarosforum-widget, .sugmag-feed) .highlight-admin a { color: #ffc046 !important; } .widget:is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) :is(.asgarosforum-widget, .sugmag-feed) .highlight-moderator, .widget:is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) :is(.asgarosforum-widget, .sugmag-feed) .highlight-moderator a { color: #6fe0a0 !important; } .widget:is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) :is(.asgarosforum-widget, .sugmag-feed) .post-author a:hover, .widget:is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) :is(.asgarosforum-widget, .sugmag-feed) .profile-link:hover { color: #fff; } /* Clamp to two lines so every row keeps the same rhythm. */ :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .post-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, .78); } :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .post-read-more { color: #6fc3ec; text-decoration: none; } :is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) .post-read-more:hover { color: #fff; } .widget:is(.asgarosforumrecentposts_widget, .sugmag-feed-widget) :is(.asgarosforum-widget, .sugmag-feed) .post-date { display: block; margin-top: 2px; font-family: var(--font-head); font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: rgba(255, 255, 255, .58); } /* ========================================================================== 11. Pagination ========================================================================== */ .pagination { margin-top: 36px; } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; } .pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 12px; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius); font-family: var(--font-head); font-weight: 700; color: var(--c-body); text-decoration: none; } .pagination .page-numbers:hover { background: var(--c-surface); color: var(--c-primary); text-decoration: none; } .pagination .page-numbers.current { background: var(--c-primary); border-color: var(--c-primary); color: #fff; } /* ========================================================================== 12. Notice cards (404 / no results) ========================================================================== */ .notice-card { background: var(--c-bg); border: 1px solid var(--c-line-2); border-radius: var(--radius); padding: 44px 32px; text-align: center; } .notice-card .search-form { justify-content: center; display: flex; margin-top: 20px; } .notice-card .search-field { font: inherit; padding: 11px 14px; border: 1px solid var(--c-line); border-right: 0; border-radius: var(--radius) 0 0 var(--radius); min-width: 240px; } .notice-card .search-submit { border-radius: 0 var(--radius) var(--radius) 0; } .error-code { font-family: var(--font-head); font-size: 96px; line-height: 1; font-weight: 700; color: var(--c-line); margin: 0 0 6px; } /* ========================================================================== 13. Footer ========================================================================== */ .site-footer { background: var(--c-primary-deep); color: rgba(255, 255, 255, .78); margin-top: 8px; } .footer-widgets { padding: 40px 0 28px; border-bottom: 1px solid rgba(255, 255, 255, .10); } .footer-widgets-inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; } .footer-widgets .widget { background: none; border: 0; padding: 0; margin: 0; color: inherit; } .footer-widgets .widget-title { color: #fff; border-bottom-color: rgba(255, 255, 255, .18); } .footer-widgets .widget li { border-bottom-color: rgba(255, 255, 255, .10); } .footer-widgets .widget a, .footer-widgets .widget li a { color: rgba(255, 255, 255, .8); } .footer-widgets .widget a:hover { color: #fff; } .footer-bottom { padding: 18px 0; } .footer-bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; } .site-info { margin: 0; } .footer-menu { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; margin: 0; padding: 0; } .footer-menu a { color: rgba(255, 255, 255, .8); } .footer-menu a:hover { color: #fff; } /* ========================================================================== 14. Responsive ========================================================================== */ @media (max-width: 1100px) { .site-main-wrap { grid-template-columns: minmax(0, 72%) minmax(0, 28%); } } @media (max-width: 900px) { body { font-size: 17px; } .site-main-wrap { grid-template-columns: minmax(0, 1fr); } .widget-area { margin-top: 40px; } .site-title { font-size: 38px; } .nav-inner { display: block; } .menu-toggle { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; padding: 14px 0; color: #fff; font-size: 15px; letter-spacing: .09em; } .menu-toggle:hover { background: none; } .menu-toggle-bars { width: 20px; height: 2px; background: #fff; box-shadow: 0 6px 0 #fff, 0 -6px 0 #fff; } .main-navigation ul { display: none; flex-direction: column; padding-bottom: 10px; } .main-navigation.toggled > .container > ul { display: flex; } .main-navigation a { line-height: 1.4; padding: 12px 0; border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, .16); } .main-navigation > .container > ul > li:first-child > a { border-left: 0; } .main-navigation ul ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; display: none; min-width: 0; background: rgba(0, 0, 0, .14); } .main-navigation li.submenu-open > ul { display: block; } .main-navigation ul ul a { padding-left: 18px; } .topbar-inner { flex-direction: column; align-items: stretch; padding-top: 10px; padding-bottom: 10px; gap: 10px; } .topbar-right { flex-direction: column; align-items: stretch; gap: 10px; } .social-nav { justify-content: center; } .topbar .search-form { width: 100%; } .topbar .search-field { width: 100%; } .topbar .search-field:focus { width: 100%; } .post-navigation .nav-links { grid-template-columns: 1fr; } .post-navigation .nav-next { text-align: left; } .entry-content > * { max-width: 100%; } } @media (max-width: 560px) { .container { padding: 0 16px; } .card-grid { grid-template-columns: 1fr; gap: 20px; } .entry-row { flex-direction: column; gap: 12px; } .entry-row .entry-media, .entry-row .entry-media img { width: 100%; flex: none; height: auto; } .site-title { font-size: 30px; } .error-code { font-size: 68px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .readmore:hover { transform: none; } } /* ========================================================================== 15. Print ========================================================================== */ @media print { .topbar, .main-navigation, .widget-area, .site-footer, .post-navigation, .comments-area, .readmore { display: none !important; } #page { box-shadow: none; max-width: none; } body { font-size: 12pt; background: #fff; } .entry-content a::after { content: " (" attr(href) ")"; font-size: 10pt; color: #555; } } /* ========================================================================== 13. Forum (Asgaros) -------------------------------------------------------------------------- The forum plugin ships its own skin: rounded grey panels, Verdana, pill navigation. Its palette and body font come from the plugin's own Appearance settings, which are now set to this theme's tokens, so those are NOT repeated here — this section only fixes what the plugin cannot express: shape, headline face, uppercase bars and the button/search styling used everywhere else on the site. Rules that fight the plugin's generated custom.css (which loads after the theme and marks its colours !important) are prefixed with `body` so they win on specificity rather than on load order. ========================================================================== */ #af-wrapper { --forum-bar: var(--c-primary); } /* Square off every panel to the site's 3px radius. */ #af-wrapper .title-element, #af-wrapper .content-container, #af-wrapper .content-element, #af-wrapper .post-element, #af-wrapper #forum-header, #af-wrapper #statistics, #af-wrapper #read-unread, #af-wrapper .button, #af-wrapper input[type="text"], #af-wrapper input[type="search"], #af-wrapper textarea { border-radius: var(--radius); } /* Page title: same rule-and-red-tick heading as "SENASTE" on the front page. */ #af-wrapper .main-title { font-family: var(--font-head); font-size: 20px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 30px 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--c-line); position: relative; } #af-wrapper .main-title::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 68px; height: 2px; background: var(--c-accent); } /* Navigation bar: the blue comes from the plugin's settings; give it the condensed uppercase links and red active edge of the main site nav. */ body #af-wrapper #forum-header { border: 0 !important; border-bottom: 3px solid var(--c-accent) !important; } #af-wrapper #forum-navigation a, #af-wrapper #forum-navigation-mobile a { font-family: var(--font-head); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; border: 0 !important; transition: background .15s ease; } #af-wrapper #forum-navigation a:hover, #af-wrapper #forum-navigation a.current { background: rgba(255, 255, 255, .14); text-decoration: none; } /* Search field, matching the top bar's. */ #af-wrapper #forum-search input { font-family: var(--font-body); border: 1px solid var(--c-line); padding: 7px 12px; } #af-wrapper #forum-search input:focus { outline: none; border-color: var(--c-primary); } /* Section bars ("Forum / Sista inlägget", "Statistik"). */ body #af-wrapper .title-element { font-family: var(--font-head); font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; border: 0 !important; border-bottom: 3px solid var(--c-accent) !important; } body #af-wrapper .title-element-dark { background-color: var(--c-primary-deep) !important; } #af-wrapper .last-post-headline { font-family: var(--font-head); font-style: normal; text-transform: uppercase; letter-spacing: .07em; font-size: 13px; } /* Rows. */ #af-wrapper .content-element { transition: background .15s ease; } #af-wrapper .content-element:hover { background: var(--c-surface); } #af-wrapper .forum-title, #af-wrapper .topic-title { font-family: var(--font-head); font-size: 18px; font-weight: 700; color: var(--c-ink); } #af-wrapper .forum-title:hover, #af-wrapper .topic-title:hover { color: var(--c-primary); text-decoration: none; } /* Breadcrumbs read as a kicker, like the category chips. */ #af-wrapper #forum-breadcrumbs { font-family: var(--font-head); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; } /* Buttons: blue with a red hover, exactly like the theme's "Läs mer". */ body #af-wrapper .button { font-family: var(--font-head); font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border: 0 !important; transition: background .15s ease, transform .15s ease; } body #af-wrapper .button-normal:hover, body #af-wrapper .button-neutral:hover { background-color: var(--c-accent) !important; transform: translateY(-1px); } /* Posts. */ #af-wrapper .post-element { box-shadow: var(--shadow-1); } #af-wrapper .post-author-block-name { font-family: var(--font-head); font-size: 16px; font-weight: 700; } #af-wrapper .forum-post-date, #af-wrapper .forum-post-date a, #af-wrapper .post-footer { font-family: var(--font-head); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; } #af-wrapper .post-message blockquote { border-left: 3px solid var(--c-primary); background: var(--c-surface); padding: 12px 16px; margin: 0 0 14px; } #af-wrapper .quotetitle { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .07em; font-size: 12px; color: var(--c-muted); } /* Statistics panel. */ #af-wrapper .element-number { font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--c-ink); } #af-wrapper .element-name { font-family: var(--font-head); text-transform: uppercase; letter-spacing: .08em; font-size: 12px; } /* Role colours. The plugin's own red admin name reads as an error next to the theme's red accent, so admins get the same gold the sidebar forum panel uses and moderators the matching green. The plugin marks these !important on `a.highlight-*`, hence the `body` prefix. */ body #af-wrapper a.highlight-admin { color: #b8860b !important; } body #af-wrapper a.highlight-admin:hover { color: #8f6708 !important; } body #af-wrapper a.highlight-moderator { color: #1f8a52 !important; } body #af-wrapper a.highlight-moderator:hover { color: #16653c !important; } /* ---- Captcha fallback text ---------------------------------------------- hCaptcha paints its own failure notices through CSS `content`, in English, and they show to visitors whenever the widget cannot load. Its stylesheet is printed inline after this one, so these need the extra specificity and the !important to land. */ body .h-captcha::after { content: "Captchan kunde inte laddas. Det är ett fel på sajten, inte hos dig." !important; } body .h-captcha.hcaptcha-api-delayed::after { content: "Captchan laddas när du börjar fylla i formuläret." !important; }