/* Theme Name: Oxarna Modern Child Theme URI: https://www.oxarna.se/ Description: Modernt child theme för Oxarna.se. Behåller WordPress, inlägg/nyheter och Gwolle Guestbook men ger ny supporterlayout. Author: Oxarna Template: onecom-express Version: 1.0.14 Text Domain: oxarna-modern-child */ /* ========================================================= 01. DESIGN TOKENS Färger, skuggor, radier och maxbredd. ========================================================= */ :root { --ox-bg: #07080c; --ox-bg-2: #11131a; --ox-red: #c8102e; --ox-red-2: #ff244b; --ox-gold: #f2c75c; --ox-text: #f7f7fb; --ox-muted: #b7bdc9; --ox-line: rgba(255,255,255,.15); --ox-panel: rgba(255,255,255,.075); --ox-panel-2: rgba(255,255,255,.12); --ox-shadow: 0 24px 90px rgba(0,0,0,.50); --ox-radius: 24px; --ox-max: 1180px; } /* ========================================================= 02. BASE / GLOBALT Grundutseende, bakgrund, text, länkar och fokus. ========================================================= */ html { scroll-behavior: smooth; } html, body { overflow-x: hidden !important; } body { background: radial-gradient(circle at 10% 0%, rgba(200,16,46,.34), transparent 34rem), radial-gradient(circle at 90% 4%, rgba(242,199,92,.16), transparent 28rem), linear-gradient(135deg, #05060a 0%, #11131a 52%, #07080c 100%) !important; color: var(--ox-text) !important; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; mask-image: linear-gradient(to bottom, black, transparent 78%); pointer-events: none; } body, #page, .site, .site-content, .content-area, #content, main { color: var(--ox-text) !important; } a { color: inherit; } p { color: var(--ox-muted); line-height: 1.7; } .entry-title, .page-title, h1, h2, h3, h4, h5, h6 { color: var(--ox-text); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--ox-red-2) !important; outline-offset: 3px !important; } /* ========================================================= 03. WORDPRESS LAYOUT / SIDYTOR Transparent huvudlayout och mörka containers. ========================================================= */ .site-content, .content-area, #content, main { background: transparent !important; border-top: 1px solid rgba(255,255,255,.05); } .site-main, .content-area, #primary, #main, .page .entry-content, .single .entry-content { color: var(--ox-text) !important; } .ox-wrap { width: min(var(--ox-max), calc(100% - 2rem)); margin-inline: auto; } .page article, .page .post, .page .hentry, #content article, #primary article, .post, .page { background: linear-gradient(145deg, rgba(12,13,18,.84), rgba(9,10,14,.72)) !important; color: var(--ox-text) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: var(--ox-radius) !important; box-shadow: 0 28px 90px rgba(0,0,0,.62) !important; } .post, .page, article { padding: 1.2rem; margin-bottom: 1rem; } .entry-content a { color: var(--ox-gold); font-weight: 850; } /* ========================================================= 04. HEADER / LOGGA Ny mörk topp, större headerbild och renare toppyta. ========================================================= */ .site-header, header, #masthead { position: relative !important; z-index: 9999 !important; overflow: visible !important; background: rgba(5, 6, 10, .88) !important; border-bottom: 1px solid rgba(255,255,255,.14) !important; box-shadow: 0 12px 40px rgba(0,0,0,.45); backdrop-filter: blur(18px); } .oct-head-bar { background-image: none !important; background: linear-gradient(180deg, #030407 0%, #090b10 55%, #030407 100%) !important; min-height: 230px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; border-bottom: 1px solid rgba(255,255,255,.14); box-shadow: 0 16px 45px rgba(0,0,0,.55); } .oct-head-bar .container, .oct-head-bar .row, .oct-head-bar .col-12, .oct-site-logo, .oct-site-logo .site-title { margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; } .oct-site-logo { text-align: center; } .oct-site-logo img { display: block !important; width: 100% !important; max-width: 1500px !important; height: auto !important; max-height: none !important; margin: 0 auto !important; object-fit: contain !important; } .site-branding, .custom-header, .header-image, .wp-custom-header { position: relative; overflow: hidden; background-color: #05060a !important; } .site-branding::after, .custom-header::after, .header-image::after, .wp-custom-header::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at center, rgba(255,255,255,.08), transparent 22rem), linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.28)); } .custom-header img, .header-image img, .wp-custom-header img, .site-header img { max-width: 100%; } /* ========================================================= 05. NAVIGATION / DROPDOWNS Huvudmeny, länkstatus, hover, aktiv sida och undermenyer. ========================================================= */ /* Huvudcontainer för menyn */ .main-navigation, .site-navigation, .menu-primary-container, #sticky_menu { position: relative !important; z-index: 9999 !important; overflow: visible !important; background: linear-gradient(180deg, rgba(8,9,14,.96), rgba(4,5,8,.96)) !important; border-top: 1px solid rgba(255,255,255,.10); border-bottom: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); } /* Menylista */ .main-navigation ul, .site-navigation ul, .menu, #sticky_menu ul { display: flex; justify-content: center; align-items: center; gap: .45rem; padding: .65rem 1rem !important; margin: 0 !important; list-style: none; flex-wrap: wrap; overflow: visible !important; } /* Menyobjekt */ .main-navigation li, .site-navigation li, .menu li, #sticky_menu li { position: relative !important; overflow: visible !important; } /* --------------------------------------------------------- Länkar – grundutseende --------------------------------------------------------- */ .main-navigation a, .site-navigation a, .menu a, #sticky_menu a { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: .65rem 1rem !important; border-radius: 999px !important; background: rgba(255,255,255,.075) !important; border: 1px solid rgba(255,255,255,.10); color: #d9deea !important; font-size: .82rem; font-weight: 900; line-height: 1; text-decoration: none !important; letter-spacing: .01em; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.22); transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease; } /* Normal länk */ .main-navigation a:link, .site-navigation a:link, .menu a:link, #sticky_menu a:link { color: #d9deea !important; } /* Besökt länk – viktigt så länkar inte blir blå/lila/mörka */ .main-navigation a:visited, .site-navigation a:visited, .menu a:visited, #sticky_menu a:visited { color: #d9deea !important; } /* Hover + tangentbordsfokus */ .main-navigation a:hover, .main-navigation a:focus-visible, .site-navigation a:hover, .site-navigation a:focus-visible, .menu a:hover, .menu a:focus-visible, #sticky_menu a:hover, #sticky_menu a:focus-visible { color: #ffffff !important; background: linear-gradient(135deg, rgba(255,36,75,.85), rgba(200,16,46,.85)) !important; border-color: rgba(255,255,255,.20) !important; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(200,16,46,.30), inset 0 1px 0 rgba(255,255,255,.20); } /* Klick/active */ .main-navigation a:active, .site-navigation a:active, .menu a:active, #sticky_menu a:active { color: #ffffff !important; background: linear-gradient(135deg, #c8102e, #8f0b21) !important; transform: translateY(0); } /* Tydlig fokusmarkering för tillgänglighet */ .main-navigation a:focus-visible, .site-navigation a:focus-visible, .menu a:focus-visible, #sticky_menu a:focus-visible { outline: 2px solid var(--ox-gold) !important; outline-offset: 4px !important; } /* Aktiv/current sida */ .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a, .main-navigation a[aria-current="page"], .site-navigation .current-menu-item > a, .site-navigation .current_page_item > a, .site-navigation a[aria-current="page"], .menu .current-menu-item > a, .menu .current_page_item > a, .menu a[aria-current="page"], #sticky_menu .current-menu-item > a, #sticky_menu .current_page_item > a, #sticky_menu a[aria-current="page"] { color: #ffffff !important; background: linear-gradient(135deg, #ff244b, #c8102e) !important; border-color: rgba(255,255,255,.22) !important; box-shadow: 0 14px 34px rgba(200,16,46,.36), inset 0 1px 0 rgba(255,255,255,.22); } /* Aktiv sida vid hover/focus – behåll stark röd stil */ .main-navigation .current-menu-item > a:hover, .main-navigation .current_page_item > a:hover, .main-navigation a[aria-current="page"]:hover, .site-navigation .current-menu-item > a:hover, .site-navigation .current_page_item > a:hover, .site-navigation a[aria-current="page"]:hover, .menu .current-menu-item > a:hover, .menu .current_page_item > a:hover, .menu a[aria-current="page"]:hover, #sticky_menu .current-menu-item > a:hover, #sticky_menu .current_page_item > a:hover, #sticky_menu a[aria-current="page"]:hover { color: #ffffff !important; background: linear-gradient(135deg, #ff3b5f, #d91132) !important; } /* --------------------------------------------------------- Dropdown-rutor Dolda direkt vid sidladdning, men stängs med fördröjning. --------------------------------------------------------- */ .main-navigation ul ul, .site-navigation ul ul, .menu ul, #sticky_menu ul ul, .sub-menu, .children { position: absolute !important; top: calc(100% + 8px) !important; left: 0 !important; z-index: 10000 !important; display: block !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; min-width: 220px; padding: .55rem !important; margin: 0 !important; background: rgba(6, 7, 11, .98) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 18px !important; box-shadow: 0 22px 55px rgba(0,0,0,.65); backdrop-filter: blur(18px); transform: translateY(8px); /* Viktigt: ingen fördröjning i grundläget */ transition: opacity .16s ease, transform .16s ease, visibility 0s linear; } /* Osynlig brygga mellan huvudknapp och dropdown */ .main-navigation li.menu-item-has-children::after, .site-navigation li.menu-item-has-children::after, .menu li.menu-item-has-children::after, #sticky_menu li.menu-item-has-children::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; z-index: 9999; background: transparent; } /* Visa dropdown direkt vid hover/fokus */ .main-navigation li:hover > ul, .main-navigation li:focus-within > ul, .site-navigation li:hover > ul, .site-navigation li:focus-within > ul, .menu li:hover > ul, .menu li:focus-within > ul, #sticky_menu li:hover > ul, #sticky_menu li:focus-within > ul { visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; transform: translateY(0); transition: opacity .16s ease 0s, transform .16s ease 0s, visibility 0s linear 0s; } /* Stäng dropdown med fördröjning EFTER att hover/fokus lämnas */ .main-navigation li.menu-item-has-children:not(:hover):not(:focus-within) > ul, .site-navigation li.menu-item-has-children:not(:hover):not(:focus-within) > ul, .menu li.menu-item-has-children:not(:hover):not(:focus-within) > ul, #sticky_menu li.menu-item-has-children:not(:hover):not(:focus-within) > ul { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; transform: translateY(8px); transition: opacity .16s ease .85s, transform .16s ease .85s, visibility 0s linear 1s; } /* ========================================================= 06. STARTSIDA / HERO Hero, läsbarhetslager och CTA-knappar. ========================================================= */ .ox-modern-front { position: relative; overflow: hidden; } .ox-modern-front::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,.82) 38%, rgba(0,0,0,.62) 68%, rgba(0,0,0,.72) 100% ), radial-gradient(circle at 20% 30%, rgba(200,16,46,.22), transparent 34rem); } .ox-modern-front > * { position: relative; z-index: 1; } .ox-hero { position: relative; min-height: 78vh; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 2rem; align-items: center; padding: 5.5rem 0 4rem; } /* ========================================================= HERO – liten överrubrik / eyebrow ========================================================= */ .ox-eyebrow { color: var(--ox-gold); font-size: clamp(1rem, 1.4vw, 1.25rem) !important; font-weight: 950; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1.1rem; text-shadow: 0 2px 10px rgba(0,0,0,.90); } .ox-hero h1 { color: #ffffff !important; font-size: clamp(2rem, 4.6vw, 4.2rem) !important; line-height: 1.02 !important; letter-spacing: -.035em !important; text-transform: uppercase; margin: 0 0 1.25rem; max-width: 760px !important; overflow-wrap: balance; text-shadow: 0 4px 20px rgba(0,0,0,.95), 0 1px 2px rgba(0,0,0,1); } .ox-lead, .ox-hero p { color: #eef1f7 !important; font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 760px; margin-bottom: 1.5rem; text-shadow: 0 2px 12px rgba(0,0,0,.90); } .ox-actions { display: flex; flex-wrap: wrap; gap: .8rem; } /* ========================================================= 07. KOMPONENTER / KORT / PANELER Kort, nyheter, tvåspalt, listor och footer. ========================================================= */ .ox-card, .ox-panel, .widget, .comments-area { border: 1px solid var(--ox-line) !important; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.055)) !important; box-shadow: var(--ox-shadow); backdrop-filter: blur(16px); border-radius: var(--ox-radius) !important; } .ox-card { position: relative; overflow: hidden; padding: 1.35rem; background: linear-gradient(145deg, rgba(12,13,18,.88), rgba(10,10,12,.78)) !important; border: 1px solid rgba(255,255,255,.20) !important; box-shadow: 0 28px 90px rgba(0,0,0,.72) !important; } .ox-card::after { content: ""; position: absolute; width: 190px; height: 190px; right: -75px; top: -75px; border-radius: 50%; background: rgba(200,16,46,.28); } .ox-card h2, .ox-section h2 { color: #ffffff !important; font-size: clamp(1.25rem, 2.2vw, 2rem) !important; line-height: 1.08 !important; letter-spacing: -.015em !important; max-width: 100%; overflow-wrap: break-word; margin: 0 0 1rem; text-shadow: 0 3px 18px rgba(0,0,0,.95); } .ox-card p { color: #e7ebf3 !important; } .ox-status { width: 12px; height: 12px; border-radius: 50%; background: var(--ox-gold); box-shadow: 0 0 0 7px rgba(242,199,92,.13); margin-bottom: 1rem; } .ox-info-list { display: grid; gap: .8rem; margin-top: 1.25rem; } .ox-info-list div { padding: .9rem; border-radius: 18px; background: rgba(0,0,0,.48) !important; border: 1px solid rgba(255,255,255,.18) !important; } .ox-info-list dt { color: var(--ox-muted); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 900; } .ox-info-list dd { margin: .2rem 0 0; font-weight: 950; } .ox-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; padding: 1rem; margin: 0 auto 4.5rem; border: 1px solid var(--ox-line); border-radius: var(--ox-radius); background: rgba(0,0,0,.28); } .ox-strip a { text-align: center; padding: 1rem; border-radius: 18px; background: rgba(255,255,255,.075); color: var(--ox-text); font-weight: 950; text-decoration: none; } .ox-strip a:hover { background: rgba(200,16,46,.32); } .ox-section { padding: 4rem 0; } .ox-section-head { margin-bottom: 1.4rem; max-width: 820px; } .ox-section-head h2 { margin-bottom: .8rem; } .ox-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .ox-news-card { padding: 1.15rem; min-height: 250px; display: flex; flex-direction: column; gap: .8rem; } /* Nyhetskort – tydligare rubriker */ .ox-news-card h3, .ox-news-card h3 a, .ox-news-card .entry-title, .ox-news-card .entry-title a { color: #f2c75c !important; text-decoration: none !important; text-shadow: 0 2px 12px rgba(0,0,0,.85); } /* Hover på nyhetsrubrik */ .ox-news-card h3 a:hover, .ox-news-card .entry-title a:hover { color: var(--ox-gold) !important; } .ox-news-card p { margin: 0; } .ox-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--ox-muted); font-size: .85rem; } .ox-badge { width: fit-content; color: var(--ox-gold); border: 1px solid rgba(242,199,92,.36); background: rgba(242,199,92,.08); padding: .35rem .7rem; border-radius: 999px; font-weight: 950; font-size: .78rem; } .ox-read-more { margin-top: auto; color: var(--ox-text); font-weight: 950; text-decoration: none; } .ox-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .ox-panel { padding: 1.2rem; } .ox-panel h3 { color: var(--ox-text); font-size: clamp(1.6rem, 3vw, 2.5rem); line-height: 1; letter-spacing: -.035em; } .ox-list { list-style: none; padding: 0; display: grid; gap: .7rem; } .ox-list li { padding: .8rem .9rem; border-radius: 16px; background: rgba(0,0,0,.24); border: 1px solid var(--ox-line); color: var(--ox-text); font-weight: 850; } .ox-footer-note { text-align: center; padding: 2rem 0 4rem; color: var(--ox-muted); border-top: 1px solid var(--ox-line); margin-top: 3rem; } /* ========================================================= 08. FORMS / KNAPPAR Globala formulärfält, submit-knappar och WordPress buttons. ========================================================= */ .ox-btn, button, input[type="submit"], .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: .85rem 1.15rem; border-radius: 999px !important; border: 1px solid var(--ox-line); color: var(--ox-text) !important; background: rgba(255,255,255,.09); font-weight: 950; text-decoration: none !important; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .ox-btn:hover, button:hover, input[type="submit"]:hover, .wp-block-button__link:hover { transform: translateY(-2px); } .ox-btn-primary, input[type="submit"], .wp-block-button__link { border: 0; background: linear-gradient(135deg, var(--ox-red-2), var(--ox-red)) !important; box-shadow: 0 16px 45px rgba(200,16,46,.30); } input, textarea, select { width: 100%; border: 1px solid var(--ox-line) !important; color: var(--ox-text) !important; background: rgba(0,0,0,.34) !important; border-radius: 16px !important; padding: .9rem 1rem !important; outline: none; } input:focus, textarea:focus, select:focus { border-color: rgba(255,36,75,.72) !important; box-shadow: 0 0 0 4px rgba(255,36,75,.13); } /* ========================================================= 09. SIDEBAR / WIDGETS Sidopaneler, widgettitlar och länkar. ========================================================= */ #secondary, .sidebar, .widget-area, aside, .widget { position: relative !important; z-index: 1 !important; } .sidebar .widget, #secondary .widget, .widget-area .widget, .widget { background: linear-gradient(145deg, rgba(12,13,18,.82), rgba(22,24,32,.68)) !important; color: #f3f5fb !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 22px !important; box-shadow: 0 18px 54px rgba(0,0,0,.45) !important; } .sidebar .widget *, #secondary .widget *, .widget-area .widget *, .widget * { color: inherit; } .sidebar .widget-title, #secondary .widget-title, .widget-area .widget-title, .widget-title { color: #ffffff !important; border-bottom: 3px solid var(--ox-gold) !important; padding-bottom: .6rem !important; text-shadow: 0 2px 12px rgba(0,0,0,.75); } .sidebar a, #secondary a, .widget-area a, .widget a { color: #ffffff !important; } /* ========================================================= 10. GWOLLE GUESTBOOK - GRUND Läslighet, formulär, pagination och inlägg. ========================================================= */ .ox-guestbook { padding: 1.2rem; } #gwolle_gb, #gwolle_gb_entries, .gwolle_gb, .gwolle-gb, .gwolle_gb_entries, .gwolle_gb_write, .gwolle_gb_read { position: relative !important; z-index: 999999 !important; overflow: visible !important; isolation: auto !important; max-width: 100% !important; padding: 1.2rem !important; background: transparent !important; color: #f5f7fb !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } #gwolle_gb *, #gwolle_gb_entries * { box-sizing: border-box !important; } #gwolle_gb h2, #gwolle_gb h3, #gwolle_gb legend { color: #ffffff !important; text-shadow: 0 2px 8px rgba(0,0,0,.75) !important; } /* Formulärbox */ #gwolle_gb .gwolle_gb_write, #gwolle_gb #gwolle_gb_new_entry, #gwolle_gb form { background: rgba(8, 12, 20, .92) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 22px !important; padding: 24px !important; margin: 0 0 26px 0 !important; box-shadow: 0 18px 45px rgba(0,0,0,.45) !important; } #gwolle_gb label, .gwolle_gb label, #gwolle_gb .label, #gwolle_gb .form-label { color: #eef1f7 !important; font-weight: 800 !important; } #gwolle_gb p, #gwolle_gb div { color: #f8fafc; } /* Fält */ #gwolle_gb input[type="text"], #gwolle_gb input[type="email"], #gwolle_gb input[type="url"], #gwolle_gb textarea, #gwolle_gb select, .gwolle_gb input, .gwolle_gb textarea, .gwolle_gb select { width: 100% !important; background: rgba(0,0,0,.55) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.20) !important; border-radius: 14px !important; padding: 12px 14px !important; outline: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; } #gwolle_gb input::placeholder, #gwolle_gb textarea::placeholder { color: rgba(255,255,255,.55) !important; } #gwolle_gb input:focus, #gwolle_gb textarea:focus, #gwolle_gb select:focus { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.25) !important; } /* Knappar */ #gwolle_gb .gb-write-button, #gwolle_gb .gb-button, #gwolle_gb input[type="submit"], #gwolle_gb .button, .gwolle_gb .gb-write-button, .gwolle_gb .gb-button, .gwolle_gb input[type="submit"] { background: linear-gradient(135deg, var(--ox-red-2), var(--ox-red)) !important; color: #ffffff !important; border: 0 !important; border-radius: 999px !important; padding: 10px 18px !important; font-weight: 900 !important; cursor: pointer !important; text-shadow: none !important; box-shadow: 0 14px 34px rgba(200,16,46,.32) !important; } /* Pagination */ #gwolle_gb .page-navigation, #gwolle_gb .pagination, #gwolle_gb .gb-pagination, #gwolle_gb .gb-navigation, .gwolle_gb .page-navigation, .gwolle_gb .pagination, .gwolle_gb .gb-pagination { margin: 20px 0 !important; color: #ffffff !important; } #gwolle_gb .page-navigation a, #gwolle_gb .page-navigation span, #gwolle_gb .pagination a, #gwolle_gb .pagination span, #gwolle_gb .gb-pagination a, #gwolle_gb .gb-pagination span, #gwolle_gb .gb-navigation a, #gwolle_gb .gb-navigation span, .gwolle_gb .page-navigation a, .gwolle_gb .page-navigation span, .gwolle_gb .pagination a, .gwolle_gb .pagination span, .gwolle_gb .gb-pagination a, .gwolle_gb .gb-pagination span { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 34px !important; height: 34px !important; margin: 3px !important; padding: 0 10px !important; background: rgba(0,0,0,.44) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 10px !important; text-decoration: none !important; } #gwolle_gb .page-navigation .current, #gwolle_gb .pagination .current, #gwolle_gb .gb-pagination .current, #gwolle_gb .gb-navigation .current, .gwolle_gb .page-navigation .current, .gwolle_gb .pagination .current, .gwolle_gb .gb-pagination .current { background: var(--ox-red) !important; color: #ffffff !important; } #gwolle_gb .gwolle_gb_total, #gwolle_gb .gb-total { color: #ffffff !important; font-weight: 700 !important; } /* Inlägg */ #gwolle_gb .gb-entry, #gwolle_gb article.gb-entry, #gwolle_gb .gwolle-gb-entry, #gwolle_gb .gwolle_gb_entry, #gwolle_gb .entry, .gwolle_gb .gb-entry, .gwolle_gb .gwolle_gb_entry, .gwolle_gb .entry, .gwolle-gb .gb-entry, .gwolle-gb .gwolle_gb_entry { position: relative !important; z-index: 10 !important; overflow: visible !important; background: radial-gradient(circle at top left, rgba(255,255,255,.06), transparent 35%), linear-gradient(145deg, rgba(10,11,16,.90), rgba(20,22,30,.78)) !important; color: #f3f5fb !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: 22px !important; box-shadow: 0 18px 54px rgba(0,0,0,.45) !important; padding: 1.1rem 1.25rem !important; margin: 1rem 0 !important; text-shadow: none !important; } #gwolle_gb .gb-entry article, #gwolle_gb .gb-entry-content, #gwolle_gb .gb-entry-inner { overflow: visible !important; background: transparent !important; color: #f8fafc !important; } #gwolle_gb .gb-entry *, #gwolle_gb .gwolle_gb_entry *, .gwolle_gb .gb-entry *, .gwolle_gb .gwolle_gb_entry *, .gwolle-gb .gb-entry *, .gwolle-gb .gwolle_gb_entry * { color: inherit !important; text-shadow: none !important; } #gwolle_gb .gb-entry p, #gwolle_gb .gb-entry .gb-entry-content, #gwolle_gb .gb-entry .gb-content, #gwolle_gb .gwolle_gb_entry p, #gwolle_gb .gwolle_gb_entry .gb-entry-content, .gwolle_gb .gb-entry p, .gwolle_gb .gb-entry .gb-entry-content, .gwolle_gb .gb-entry .gb-content, .gwolle_gb .gwolle_gb_entry p, .gwolle_gb .gwolle_gb_entry .gb-entry-content { color: #e7ebf3 !important; font-size: 1rem !important; line-height: 1.65 !important; } #gwolle_gb .gb-author, #gwolle_gb .gb-author-name, #gwolle_gb .gb-author-name a, #gwolle_gb .gb-entry-author, #gwolle_gb .author, #gwolle_gb .gb-datetime, #gwolle_gb .gb-date, #gwolle_gb .gb-entry-date, #gwolle_gb .gb-entry-meta, .gwolle_gb .gb-author, .gwolle_gb .gb-author-name, .gwolle_gb .gb-entry-author, .gwolle_gb .author, .gwolle_gb .gb-datetime, .gwolle_gb .gb-date, .gwolle_gb .gb-entry-date { color: #ffffff !important; font-weight: 800 !important; } #gwolle_gb small, #gwolle_gb time, #gwolle_gb .meta, #gwolle_gb .gb-meta, .gwolle_gb small, .gwolle_gb time, .gwolle_gb .meta, .gwolle_gb .gb-meta { color: #cbd1dd !important; } #gwolle_gb img.avatar, .gwolle_gb img.avatar, #gwolle_gb .gb-author-avatar img, #gwolle_gb .gb-entry img { border-radius: 10px !important; border: 1px solid rgba(255,255,255,.22) !important; background: rgba(255,255,255,.12) !important; } #gwolle_gb a { color: #ffffff !important; } #gwolle_gb a:hover { color: #fecaca !important; } /* ========================================================= 11. GWOLLE GUESTBOOK - TREPRICKSMENY / Z-INDEX Denna del löser vit meny + att popupen hamnade bakom sidebar. ========================================================= */ /* Lyft gästbokens wrappers över sidebar/widgets */ .ox-panel.ox-guestbook, .ox-panel.ox-guestbook .gwolle-gb, .ox-panel.ox-guestbook .gwolle-gb-read, #gwolle_gb, #gwolle_gb_entries { position: relative !important; z-index: 999999 !important; overflow: visible !important; } /* Inlägg måste kunna släppa ut popupen utanför sin ruta */ .ox-panel.ox-guestbook .gb-entry, .ox-panel.ox-guestbook article, .ox-panel.ox-guestbook article.gb-entry, .ox-panel.ox-guestbook .gwolle-gb-entry, #gwolle_gb .gb-entry, #gwolle_gb article.gb-entry, #gwolle_gb .gwolle-gb-entry { position: relative !important; z-index: 10 !important; overflow: visible !important; } /* Lyft inlägg när menyn är öppen eller aktiv */ .ox-panel.ox-guestbook .gb-entry:has(button.gb-metabox-handle[aria-expanded="true"]), .ox-panel.ox-guestbook article:has(button.gb-metabox-handle[aria-expanded="true"]), .ox-panel.ox-guestbook .gwolle-gb-entry:has(button.gb-metabox-handle[aria-expanded="true"]), .ox-panel.ox-guestbook .gb-entry:focus-within, .ox-panel.ox-guestbook article:focus-within, .ox-panel.ox-guestbook .gb-entry:hover, .ox-panel.ox-guestbook article:hover, #gwolle_gb .gb-entry:has(button.gb-metabox-handle[aria-expanded="true"]), #gwolle_gb article.gb-entry:has(button.gb-metabox-handle[aria-expanded="true"]), #gwolle_gb .gwolle-gb-entry:has(button.gb-metabox-handle[aria-expanded="true"]), #gwolle_gb .gb-entry:has(.gb-metabox[style*="visible"]), #gwolle_gb article.gb-entry:has(.gb-metabox[style*="visible"]), #gwolle_gb .gwolle-gb-entry:has(.gb-metabox[style*="visible"]) { position: relative !important; z-index: 2147483646 !important; overflow: visible !important; } /* Trepricksknappen */ body button.gb-metabox-handle, html body button.gb-metabox-handle, #gwolle_gb button.gb-metabox-handle { position: absolute !important; top: 0 !important; right: 0 !important; z-index: 2147483646 !important; width: 42px !important; height: 42px !important; padding: 0 !important; background: #111827 !important; background-color: #111827 !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 999px !important; box-shadow: 0 8px 22px rgba(0,0,0,.45) !important; cursor: pointer !important; } body button.gb-metabox-handle *, html body button.gb-metabox-handle *, #gwolle_gb button.gb-metabox-handle *, #gwolle_gb button.gb-metabox-handle span { color: #ffffff !important; } /* Själva popup-menyn */ html body div.gb-metabox, body div.gb-metabox, .ox-panel.ox-guestbook div.gb-metabox, #gwolle_gb div.gb-metabox, #gwolle_gb_entries div.gb-metabox { position: absolute !important; top: 48px !important; right: 18px !important; left: auto !important; z-index: 2147483647 !important; width: 270px !important; min-width: 270px !important; max-width: 90vw !important; background: #0b0f16 !important; background-color: #0b0f16 !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.25) !important; border-radius: 14px !important; overflow: hidden !important; box-shadow: 0 24px 70px rgba(0,0,0,.85) !important; opacity: 1 !important; } /* Rader i popup-menyn */ html body div.gb-metabox div.gb-metabox-line, body div.gb-metabox div.gb-metabox-line, #gwolle_gb div.gb-metabox div.gb-metabox-line, #gwolle_gb_entries div.gb-metabox div.gb-metabox-line { background: #0b0f16 !important; background-color: #0b0f16 !important; color: #ffffff !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; padding: 9px 12px !important; } /* Text och länkar i popup-menyn */ html body div.gb-metabox *, body div.gb-metabox *, #gwolle_gb div.gb-metabox *, #gwolle_gb_entries div.gb-metabox * { color: #ffffff !important; background-color: transparent !important; text-shadow: none !important; } html body div.gb-metabox a, body div.gb-metabox a, #gwolle_gb div.gb-metabox a, #gwolle_gb_entries div.gb-metabox a { color: #ffffff !important; background: transparent !important; text-decoration: none !important; display: block !important; } html body div.gb-metabox div.gb-metabox-line:hover, body div.gb-metabox div.gb-metabox-line:hover, #gwolle_gb div.gb-metabox div.gb-metabox-line:hover, #gwolle_gb_entries div.gb-metabox div.gb-metabox-line:hover { background: var(--ox-red) !important; background-color: var(--ox-red) !important; } /* Sociala ikoner i menyn */ #gwolle_gb .gb-social-media-share a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; margin-right: 4px !important; background: rgba(255,255,255,.08) !important; } /* ========================================================= 12. RESPONSIVT Tablet och mobil. ========================================================= */ @media (max-width: 920px) { .ox-hero, .ox-two { grid-template-columns: 1fr; } .ox-grid { grid-template-columns: 1fr 1fr; } .ox-strip { grid-template-columns: 1fr 1fr; } .ox-modern-front::before { background: linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.84) 48%, rgba(0,0,0,.78) 100% ); } } @media (max-width: 760px) { #gwolle_gb .gb-entry, #gwolle_gb .gwolle_gb_entry, #gwolle_gb article.gb-entry, .gwolle_gb .gb-entry, .gwolle_gb .gwolle_gb_entry { padding: 1rem !important; border-radius: 18px !important; } } @media (max-width: 700px) { .oct-head-bar { min-height: 95px !important; } .oct-site-logo img { max-width: 94vw !important; } .main-navigation ul, .site-navigation ul, .menu { gap: .35rem; padding: .55rem .5rem !important; } .main-navigation a, .site-navigation a, .menu a { font-size: .75rem; min-height: 34px; padding: .55rem .75rem !important; } } @media (max-width: 640px) { .ox-wrap { width: min(100% - 1rem, var(--ox-max)); } .ox-hero { padding-top: 3.5rem; min-height: auto; } .ox-hero h1 { font-size: clamp(2rem, 11vw, 3.2rem) !important; } .ox-grid, .ox-strip { grid-template-columns: 1fr; } .ox-actions { flex-direction: column; align-items: stretch; } .ox-btn { width: 100%; } #gwolle_gb div.gb-metabox { right: 8px !important; width: 240px !important; min-width: 240px !important; } #gwolle_gb .page-navigation a, #gwolle_gb .page-navigation span, #gwolle_gb .pagination a, #gwolle_gb .pagination span { min-width: 30px !important; height: 30px !important; font-size: 13px !important; } } /* ========================================================= NYHETER – tydligare rubriker i korten Skriver över mörka färger från modermall/admininställningar. ========================================================= */ .ox-news-card h3, .ox-news-card h3 a, .ox-news-card .entry-title, .ox-news-card .entry-title a, .ox-news-card a h3 { color: #ffffff !important; text-decoration: none !important; text-shadow: 0 2px 12px rgba(0,0,0,.85); } .ox-news-card h3 a:visited, .ox-news-card .entry-title a:visited { color: #ffffff !important; } .ox-news-card h3 a:hover, .ox-news-card .entry-title a:hover { color: var(--ox-gold) !important; } /* ========================================================= MOBIL – dölj gammal sticky-meny från modermallen Tar bort vänsterjusterad meny bakom layouten på mobil. ========================================================= */ @media (max-width: 991px) { #sticky_menu_wrapper, #sticky_menu_wrapper.d-lg-none, #sticky_menu_wrapper #sticky_menu { display: none !important; visibility: hidden !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; } } /* ========================================================= OVERRIDE – ljusa rubriker från modermallen Fixar mörka .oct-post-title-rubriker i nyheter/kort. ========================================================= */ .oct-post-title, .oct-post-title a, .ox-news-card .oct-post-title, .ox-news-card .oct-post-title a, article .oct-post-title, article .oct-post-title a { color: #ffffff !important; text-decoration: none !important; text-shadow: 0 2px 12px rgba(0,0,0,.85); } /* Besökt rubriklänk ska inte bli mörk */ .oct-post-title a:visited, .ox-news-card .oct-post-title a:visited, article .oct-post-title a:visited { color: #ffffff !important; } /* Hover */ .oct-post-title a:hover, .ox-news-card .oct-post-title a:hover, article .oct-post-title a:hover { color: var(--ox-gold) !important; } /* ========================================================= 15. MENY – BoIS-palett v1.0.4 Professionell mörkblå meny med gul/röd accent. Tar bort den tidigare ljusa/pastelliga knappstilen. ========================================================= */ :root { --ox-bois-blue: #052f66; --ox-bois-blue-2: #0b4f9c; --ox-bois-blue-deep: #020c1f; --ox-bois-red: #c8102e; --ox-bois-red-2: #8f0b22; --ox-bois-yellow: #f2c75c; --ox-bois-yellow-2: #d99b21; --ox-menu-on-dark: #ffffff; } /* Menyfältet: mörk BoIS-bas som passar bättre mot headern och loggan. */ .site-header .main-navigation, .site-header .site-navigation, .site-header .menu-primary-container, .site-header #sticky_menu, .main-navigation, .site-navigation, .menu-primary-container, #sticky_menu { background: linear-gradient(180deg, rgba(5, 18, 40, .98), rgba(2, 8, 20, .98)) !important; border-top: 1px solid rgba(242, 199, 92, .35) !important; border-bottom: 3px solid var(--ox-bois-yellow) !important; box-shadow: 0 12px 30px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.08) !important; backdrop-filter: blur(12px); } /* Håll menyn samlad, rak och mer vuxen i uttrycket. */ .site-header .main-navigation ul, .site-header .site-navigation ul, .site-header .menu, .site-header #sticky_menu ul, .main-navigation ul, .site-navigation ul, .menu, #sticky_menu ul { gap: .48rem !important; padding: .62rem 1rem !important; justify-content: center !important; align-items: center !important; flex-wrap: wrap !important; } /* Grundknappar: blå/gul BoIS-känsla, inte pastell och inte barnsligt runda. */ .site-header .main-navigation a, .site-header .site-navigation a, .site-header .menu a, .site-header #sticky_menu a, .main-navigation a, .site-navigation a, .menu a, #sticky_menu a { min-height: 38px !important; padding: .62rem .95rem !important; color: var(--ox-menu-on-dark) !important; background: linear-gradient(180deg, rgba(9, 55, 118, .96), rgba(4, 31, 72, .96)) !important; border: 1px solid rgba(242, 199, 92, .55) !important; border-radius: 12px !important; box-shadow: 0 6px 16px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.13) !important; text-shadow: 0 1px 2px rgba(0,0,0,.45) !important; font-weight: 800 !important; letter-spacing: .01em !important; text-transform: none !important; transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease !important; } /* Besökta länkar ska inte få webbläsarens lila/mörka standardfärg. */ .site-header .main-navigation a:link, .site-header .site-navigation a:link, .site-header .menu a:link, .site-header #sticky_menu a:link, .site-header .main-navigation a:visited, .site-header .site-navigation a:visited, .site-header .menu a:visited, .site-header #sticky_menu a:visited, .main-navigation a:link, .site-navigation a:link, .menu a:link, #sticky_menu a:link, .main-navigation a:visited, .site-navigation a:visited, .menu a:visited, #sticky_menu a:visited { color: var(--ox-menu-on-dark) !important; } /* Hover/fokus: gul BoIS-accent med mörkblå text. */ .site-header .main-navigation a:hover, .site-header .main-navigation a:focus-visible, .site-header .site-navigation a:hover, .site-header .site-navigation a:focus-visible, .site-header .menu a:hover, .site-header .menu a:focus-visible, .site-header #sticky_menu a:hover, .site-header #sticky_menu a:focus-visible, .main-navigation a:hover, .main-navigation a:focus-visible, .site-navigation a:hover, .site-navigation a:focus-visible, .menu a:hover, .menu a:focus-visible, #sticky_menu a:hover, #sticky_menu a:focus-visible { color: #061a38 !important; background: linear-gradient(180deg, #ffe18a, var(--ox-bois-yellow)) !important; border-color: rgba(255, 225, 138, .96) !important; text-shadow: none !important; transform: translateY(-1px) !important; box-shadow: 0 10px 24px rgba(242,199,92,.24), 0 3px 12px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.55) !important; } /* Aktiv sida: röd BoIS-markering med gul kant. */ .site-header .main-navigation .current-menu-item > a, .site-header .main-navigation .current_page_item > a, .site-header .main-navigation a[aria-current="page"], .site-header .site-navigation .current-menu-item > a, .site-header .site-navigation .current_page_item > a, .site-header .site-navigation a[aria-current="page"], .site-header .menu .current-menu-item > a, .site-header .menu .current_page_item > a, .site-header .menu a[aria-current="page"], .site-header #sticky_menu .current-menu-item > a, .site-header #sticky_menu .current_page_item > a, .site-header #sticky_menu a[aria-current="page"], .main-navigation .current-menu-item > a, .main-navigation .current_page_item > a, .main-navigation a[aria-current="page"], .site-navigation .current-menu-item > a, .site-navigation .current_page_item > a, .site-navigation a[aria-current="page"], .menu .current-menu-item > a, .menu .current_page_item > a, .menu a[aria-current="page"], #sticky_menu .current-menu-item > a, #sticky_menu .current_page_item > a, #sticky_menu a[aria-current="page"] { color: #ffffff !important; background: linear-gradient(180deg, var(--ox-bois-red), var(--ox-bois-red-2)) !important; border-color: var(--ox-bois-yellow) !important; text-shadow: 0 1px 2px rgba(0,0,0,.42) !important; box-shadow: 0 10px 24px rgba(200,16,46,.24), inset 0 0 0 1px rgba(242,199,92,.40) !important; } .site-header .main-navigation .current-menu-item > a:hover, .site-header .main-navigation .current_page_item > a:hover, .site-header .main-navigation a[aria-current="page"]:hover, .site-header .site-navigation .current-menu-item > a:hover, .site-header .site-navigation .current_page_item > a:hover, .site-header .site-navigation a[aria-current="page"]:hover, .site-header .menu .current-menu-item > a:hover, .site-header .menu .current_page_item > a:hover, .site-header .menu a[aria-current="page"]:hover, .site-header #sticky_menu .current-menu-item > a:hover, .site-header #sticky_menu .current_page_item > a:hover, .site-header #sticky_menu a[aria-current="page"]:hover, .main-navigation .current-menu-item > a:hover, .main-navigation .current_page_item > a:hover, .main-navigation a[aria-current="page"]:hover, .site-navigation .current-menu-item > a:hover, .site-navigation .current_page_item > a:hover, .site-navigation a[aria-current="page"]:hover, .menu .current-menu-item > a:hover, .menu .current_page_item > a:hover, .menu a[aria-current="page"]:hover, #sticky_menu .current-menu-item > a:hover, #sticky_menu .current_page_item > a:hover, #sticky_menu a[aria-current="page"]:hover { color: #ffffff !important; background: linear-gradient(180deg, #e01638, var(--ox-bois-red)) !important; } /* Inga externa pil-ikoner i menyn – renare och mer föreningsmässigt. */ .site-header .main-navigation a[href*="kmhockey" i]::after, .site-header .site-navigation a[href*="kmhockey" i]::after, .site-header .menu a[href*="kmhockey" i]::after, .site-header #sticky_menu a[href*="kmhockey" i]::after, .main-navigation a[href*="kmhockey" i]::after, .site-navigation a[href*="kmhockey" i]::after, .menu a[href*="kmhockey" i]::after, #sticky_menu a[href*="kmhockey" i]::after, .site-header .main-navigation a[href*="mariestadbois" i]::after, .site-header .site-navigation a[href*="mariestadbois" i]::after, .site-header .menu a[href*="mariestadbois" i]::after, .site-header #sticky_menu a[href*="mariestadbois" i]::after, .main-navigation a[href*="mariestadbois" i]::after, .site-navigation a[href*="mariestadbois" i]::after, .menu a[href*="mariestadbois" i]::after, #sticky_menu a[href*="mariestadbois" i]::after, .site-header .main-navigation a[href*="mariestad-bois" i]::after, .site-header .site-navigation a[href*="mariestad-bois" i]::after, .site-header .menu a[href*="mariestad-bois" i]::after, .site-header #sticky_menu a[href*="mariestad-bois" i]::after, .main-navigation a[href*="mariestad-bois" i]::after, .site-navigation a[href*="mariestad-bois" i]::after, .menu a[href*="mariestad-bois" i]::after, #sticky_menu a[href*="mariestad-bois" i]::after { content: none !important; } /* Externa länkar ska följa samma BoIS-stil, inte babyblå/pastell. */ .site-header .main-navigation a[href*="kmhockey" i], .site-header .site-navigation a[href*="kmhockey" i], .site-header .menu a[href*="kmhockey" i], .site-header #sticky_menu a[href*="kmhockey" i], .main-navigation a[href*="kmhockey" i], .site-navigation a[href*="kmhockey" i], .menu a[href*="kmhockey" i], #sticky_menu a[href*="kmhockey" i], .site-header .main-navigation a[href*="mariestadbois" i], .site-header .site-navigation a[href*="mariestadbois" i], .site-header .menu a[href*="mariestadbois" i], .site-header #sticky_menu a[href*="mariestadbois" i], .main-navigation a[href*="mariestadbois" i], .site-navigation a[href*="mariestadbois" i], .menu a[href*="mariestadbois" i], #sticky_menu a[href*="mariestadbois" i], .site-header .main-navigation a[href*="mariestad-bois" i], .site-header .site-navigation a[href*="mariestad-bois" i], .site-header .menu a[href*="mariestad-bois" i], .site-header #sticky_menu a[href*="mariestad-bois" i], .main-navigation a[href*="mariestad-bois" i], .site-navigation a[href*="mariestad-bois" i], .menu a[href*="mariestad-bois" i], #sticky_menu a[href*="mariestad-bois" i] { color: #ffffff !important; background: linear-gradient(180deg, rgba(8, 62, 132, .96), rgba(4, 31, 72, .96)) !important; border-color: rgba(242, 199, 92, .60) !important; } .site-header .main-navigation a[href*="kmhockey" i]:link, .site-header .main-navigation a[href*="kmhockey" i]:visited, .site-header .site-navigation a[href*="kmhockey" i]:link, .site-header .site-navigation a[href*="kmhockey" i]:visited, .site-header .menu a[href*="kmhockey" i]:link, .site-header .menu a[href*="kmhockey" i]:visited, .site-header #sticky_menu a[href*="kmhockey" i]:link, .site-header #sticky_menu a[href*="kmhockey" i]:visited, #sticky_menu a[href*="kmhockey" i]:link, #sticky_menu a[href*="kmhockey" i]:visited, .site-header .main-navigation a[href*="mariestadbois" i]:link, .site-header .main-navigation a[href*="mariestadbois" i]:visited, .site-header .site-navigation a[href*="mariestadbois" i]:link, .site-header .site-navigation a[href*="mariestadbois" i]:visited, .site-header .menu a[href*="mariestadbois" i]:link, .site-header .menu a[href*="mariestadbois" i]:visited, .site-header #sticky_menu a[href*="mariestadbois" i]:link, .site-header #sticky_menu a[href*="mariestadbois" i]:visited, #sticky_menu a[href*="mariestadbois" i]:link, #sticky_menu a[href*="mariestadbois" i]:visited, .site-header .main-navigation a[href*="mariestad-bois" i]:link, .site-header .main-navigation a[href*="mariestad-bois" i]:visited, .site-header .site-navigation a[href*="mariestad-bois" i]:link, .site-header .site-navigation a[href*="mariestad-bois" i]:visited, .site-header .menu a[href*="mariestad-bois" i]:link, .site-header .menu a[href*="mariestad-bois" i]:visited, .site-header #sticky_menu a[href*="mariestad-bois" i]:link, .site-header #sticky_menu a[href*="mariestad-bois" i]:visited, #sticky_menu a[href*="mariestad-bois" i]:link, #sticky_menu a[href*="mariestad-bois" i]:visited { color: #ffffff !important; } /* Dropdowns: mörkblå kort, gul kant, tydlig hover. */ .site-header .main-navigation ul ul, .site-header .site-navigation ul ul, .site-header .menu ul, .site-header #sticky_menu ul ul, .site-header .sub-menu, .site-header .children, .main-navigation ul ul, .site-navigation ul ul, .menu ul, #sticky_menu ul ul, .sub-menu, .children { background: linear-gradient(180deg, rgba(5, 18, 40, .99), rgba(2, 8, 20, .99)) !important; border: 1px solid rgba(242, 199, 92, .55) !important; border-radius: 14px !important; box-shadow: 0 22px 58px rgba(0,0,0,.46) !important; backdrop-filter: blur(14px); } .site-header .main-navigation ul ul a, .site-header .site-navigation ul ul a, .site-header .menu ul a, .site-header #sticky_menu ul ul a, .site-header .sub-menu a, .site-header .children a, .main-navigation ul ul a, .site-navigation ul ul a, .menu ul a, #sticky_menu ul ul a, .sub-menu a, .children a { width: 100% !important; justify-content: flex-start !important; color: #ffffff !important; background: transparent !important; border-color: transparent !important; box-shadow: none !important; border-radius: 9px !important; } .site-header .main-navigation ul ul a:hover, .site-header .site-navigation ul ul a:hover, .site-header .menu ul a:hover, .site-header #sticky_menu ul ul a:hover, .site-header .sub-menu a:hover, .site-header .children a:hover, .main-navigation ul ul a:hover, .site-navigation ul ul a:hover, .menu ul a:hover, #sticky_menu ul ul a:hover, .sub-menu a:hover, .children a:hover { background: var(--ox-bois-yellow) !important; color: #061a38 !important; transform: none !important; text-shadow: none !important; } /* Fokus ska synas tydligt för tangentbordsnavigering. */ .site-header .main-navigation a:focus-visible, .site-header .site-navigation a:focus-visible, .site-header .menu a:focus-visible, .site-header #sticky_menu a:focus-visible, .main-navigation a:focus-visible, .site-navigation a:focus-visible, .menu a:focus-visible, #sticky_menu a:focus-visible { outline: 3px solid rgba(242, 199, 92, .92) !important; outline-offset: 3px !important; } /* Mobil: samma BoIS-färger men något mindre, så menyn inte tar över. */ @media (max-width: 700px) { .site-header .main-navigation ul, .site-header .site-navigation ul, .site-header .menu, .site-header #sticky_menu ul, .main-navigation ul, .site-navigation ul, .menu, #sticky_menu ul { gap: .38rem !important; padding: .55rem .5rem !important; } .site-header .main-navigation a, .site-header .site-navigation a, .site-header .menu a, .site-header #sticky_menu a, .main-navigation a, .site-navigation a, .menu a, #sticky_menu a { min-height: 34px !important; padding: .52rem .72rem !important; font-size: .76rem !important; border-radius: 10px !important; } } /* ========================================================= 15. HERO-TEXT + TAJTARE STARTSIDA (v1.0.5) Uppdaterad hero-copy och mindre tomrum mellan meny, hero och CTA. ========================================================= */ .ox-hero { min-height: clamp(500px, 62vh, 680px) !important; padding-top: clamp(2.25rem, 5vw, 4rem) !important; padding-bottom: clamp(2.25rem, 4vw, 3.25rem) !important; gap: clamp(1.2rem, 3vw, 2rem) !important; } .ox-hero .ox-eyebrow { margin-bottom: .7rem !important; } .ox-hero h1 { margin-bottom: .9rem !important; max-width: 820px !important; } .ox-hero .ox-lead { max-width: 820px !important; margin-bottom: 1.1rem !important; line-height: 1.55 !important; } .ox-actions { margin-top: .15rem !important; } .ox-card[aria-label="Snabbinfo"] { align-self: center !important; } .ox-strip { margin-bottom: clamp(2.4rem, 5vw, 3.4rem) !important; } .ox-section { padding-top: clamp(2.7rem, 5vw, 3.5rem) !important; padding-bottom: clamp(2.7rem, 5vw, 3.5rem) !important; } .ox-section-head { margin-bottom: 1.05rem !important; } @media (max-width: 920px) { .ox-hero { min-height: auto !important; padding-top: 2.4rem !important; padding-bottom: 2.4rem !important; } } @media (max-width: 640px) { .ox-hero { padding-top: 1.8rem !important; padding-bottom: 2rem !important; } .ox-hero .ox-lead { font-size: 1rem !important; line-height: 1.5 !important; } } /* ========================================================= 10B. GÄSTBOK – formulärlyft v1.0.6 Gör "Skriv ett nytt inlägg" mer kompakt, tydligt och vuxet. ========================================================= */ /* Själva gästboksytan: mindre känsla av tomrum */ #gwolle_gb, #gwolle_gb_entries, .gwolle_gb, .gwolle-gb, .gwolle_gb_entries, .gwolle_gb_write, .gwolle_gb_read { padding: .85rem !important; } /* Formuläret som ett tydligare kort med BoIS-känsla */ #gwolle_gb .gwolle_gb_write, #gwolle_gb #gwolle_gb_new_entry, #gwolle_gb form { width: min(100%, 980px) !important; margin: 0 auto 1.6rem auto !important; padding: clamp(1.15rem, 2.2vw, 2rem) !important; background: radial-gradient(circle at top right, rgba(250, 204, 21, .10), transparent 28%), linear-gradient(145deg, rgba(9, 35, 74, .96), rgba(8, 10, 16, .95)) !important; border: 1px solid rgba(250, 204, 21, .28) !important; border-top: 4px solid var(--ox-gold) !important; border-radius: 18px !important; box-shadow: 0 22px 60px rgba(0,0,0,.42) !important; } #gwolle_gb .gwolle_gb_write h2, #gwolle_gb .gwolle_gb_write h3, #gwolle_gb #gwolle_gb_new_entry h2, #gwolle_gb #gwolle_gb_new_entry h3, #gwolle_gb form h2, #gwolle_gb form h3 { margin: 0 0 1rem 0 !important; color: #ffffff !important; font-size: clamp(1.55rem, 3vw, 2.25rem) !important; line-height: 1.1 !important; letter-spacing: -.02em !important; text-shadow: 0 2px 16px rgba(0,0,0,.55) !important; } /* Tvinga bort gammal tvåkolumnslayout från Gwolle/formulär */ #gwolle_gb form p, #gwolle_gb form .form-row, #gwolle_gb form .gb-form-row, #gwolle_gb form .gwolle-gb-form-row, #gwolle_gb form .form-group, #gwolle_gb form .gb-form-field, #gwolle_gb form .gwolle-gb-field, #gwolle_gb form .clearBoth, #gwolle_gb form .input, #gwolle_gb form .label { float: none !important; clear: both !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; text-align: left !important; } #gwolle_gb form p, #gwolle_gb form .form-row, #gwolle_gb form .gb-form-row, #gwolle_gb form .gwolle-gb-form-row, #gwolle_gb form .form-group, #gwolle_gb form .gb-form-field, #gwolle_gb form .gwolle-gb-field { margin: 0 0 .85rem 0 !important; } /* Etiketter över fälten, inte långt ut till vänster */ #gwolle_gb form label, #gwolle_gb form .label, #gwolle_gb form .form-label { display: block !important; margin: 0 0 .35rem 0 !important; color: #facc15 !important; font-size: .78rem !important; font-weight: 900 !important; letter-spacing: .06em !important; text-transform: uppercase !important; line-height: 1.3 !important; } /* Fälten: kompaktare, ljusare kant och bättre fokus */ #gwolle_gb form input[type="text"], #gwolle_gb form input[type="email"], #gwolle_gb form input[type="url"], #gwolle_gb form input[type="password"], #gwolle_gb form textarea, #gwolle_gb form select { display: block !important; width: 100% !important; min-height: 46px !important; margin: 0 !important; padding: .75rem .9rem !important; background: rgba(255,255,255,.08) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.24) !important; border-radius: 12px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important; } #gwolle_gb form textarea { min-height: 150px !important; resize: vertical !important; } #gwolle_gb form input[type="text"]:focus, #gwolle_gb form input[type="email"]:focus, #gwolle_gb form input[type="url"]:focus, #gwolle_gb form input[type="password"]:focus, #gwolle_gb form textarea:focus, #gwolle_gb form select:focus { border-color: var(--ox-gold) !important; background: rgba(255,255,255,.11) !important; box-shadow: 0 0 0 3px rgba(250,204,21,.18) !important; } /* Editor-toolbar: integrerad i formuläret */ #gwolle_gb .quicktags-toolbar, #gwolle_gb .mce-toolbar, #gwolle_gb .wp-editor-tools, #gwolle_gb .wp-editor-container, #gwolle_gb .wp-core-ui .quicktags-toolbar, #gwolle_gb .wp-editor-wrap { max-width: 100% !important; border-radius: 12px 12px 0 0 !important; overflow: hidden !important; } #gwolle_gb .quicktags-toolbar, #gwolle_gb .mce-toolbar, #gwolle_gb .wp-editor-tools { background: rgba(255,255,255,.88) !important; border: 0 !important; } #gwolle_gb .quicktags-toolbar input, #gwolle_gb .quicktags-toolbar button, #gwolle_gb .mce-toolbar button { width: auto !important; min-height: 28px !important; color: #0b2348 !important; } /* Integritetspolicy/checkbox: tillbaka till naturlig storlek */ #gwolle_gb form input[type="checkbox"], #gwolle_gb form input[type="radio"] { width: 18px !important; height: 18px !important; min-height: 18px !important; margin: 0 .55rem 0 0 !important; padding: 0 !important; accent-color: var(--ox-red) !important; vertical-align: middle !important; box-shadow: none !important; } #gwolle_gb form label:has(input[type="checkbox"]), #gwolle_gb form .checkbox, #gwolle_gb form .gb-privacy, #gwolle_gb form .gwolle-gb-privacy, #gwolle_gb form .privacy { display: flex !important; align-items: center !important; gap: .55rem !important; color: #e7ecf6 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: .95rem !important; font-weight: 700 !important; } /* Knappar: vuxnare, tydligare och inte beroende av input-regeln */ #gwolle_gb form input[type="submit"], #gwolle_gb form button, #gwolle_gb form .button, #gwolle_gb form .gb-button, #gwolle_gb form .gb-write-button { width: 100% !important; min-height: 50px !important; margin-top: .55rem !important; padding: .85rem 1.25rem !important; border-radius: 12px !important; font-size: .98rem !important; font-weight: 900 !important; letter-spacing: .01em !important; } #gwolle_gb form input[type="submit"]:first-of-type, #gwolle_gb form button[type="submit"] { background: linear-gradient(135deg, var(--ox-red), #e11d48) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.12) !important; } #gwolle_gb form input[value*="Förhands"], #gwolle_gb form button[name*="preview"], #gwolle_gb form .preview { background: rgba(255,255,255,.06) !important; color: #ffffff !important; border: 1px solid rgba(255,255,255,.18) !important; box-shadow: none !important; } /* Hjälptexten under formuläret ska inte dominera */ #gwolle_gb .gwolle_gb_write + p, #gwolle_gb form + p, #gwolle_gb .gwolle_gb_notice, #gwolle_gb .gb-notice, #gwolle_gb .gb-info, #gwolle_gb .help, #gwolle_gb .description { color: #d5dbea !important; font-size: .92rem !important; line-height: 1.55 !important; } /* Sidnumrering: högerställd på desktop, men med riktig BoIS-färg */ #gwolle_gb .page-navigation, #gwolle_gb .pagination, #gwolle_gb .gb-pagination, #gwolle_gb .gb-navigation, .gwolle_gb .page-navigation, .gwolle_gb .pagination, .gwolle_gb .gb-pagination { display: flex !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: .25rem !important; } #gwolle_gb .page-navigation a, #gwolle_gb .page-navigation span, #gwolle_gb .pagination a, #gwolle_gb .pagination span, #gwolle_gb .gb-pagination a, #gwolle_gb .gb-pagination span, #gwolle_gb .gb-navigation a, #gwolle_gb .gb-navigation span, .gwolle_gb .page-navigation a, .gwolle_gb .page-navigation span, .gwolle_gb .pagination a, .gwolle_gb .pagination span, .gwolle_gb .gb-pagination a, .gwolle_gb .gb-pagination span { background: rgba(255,255,255,.08) !important; color: #ffffff !important; border-color: rgba(250,204,21,.26) !important; border-radius: 9px !important; } #gwolle_gb .page-navigation .current, #gwolle_gb .pagination .current, #gwolle_gb .gb-pagination .current, #gwolle_gb .gb-navigation .current, .gwolle_gb .page-navigation .current, .gwolle_gb .pagination .current, .gwolle_gb .gb-pagination .current { background: var(--ox-gold) !important; color: #06142b !important; border-color: var(--ox-gold) !important; } /* Inläggskorten under formuläret: lite ljusare och renare */ #gwolle_gb .gb-entry, #gwolle_gb article.gb-entry, #gwolle_gb .gwolle-gb-entry, #gwolle_gb .gwolle_gb_entry, #gwolle_gb .entry, .gwolle_gb .gb-entry, .gwolle_gb .gwolle_gb_entry, .gwolle_gb .entry, .gwolle-gb .gb-entry, .gwolle-gb .gwolle_gb_entry { border-color: rgba(250,204,21,.20) !important; background: radial-gradient(circle at top right, rgba(250,204,21,.08), transparent 24%), linear-gradient(145deg, rgba(9,35,74,.82), rgba(12,13,18,.90)) !important; } @media (max-width: 760px) { #gwolle_gb, #gwolle_gb_entries, .gwolle_gb, .gwolle-gb, .gwolle_gb_entries, .gwolle_gb_write, .gwolle_gb_read { padding: .35rem !important; } #gwolle_gb .gwolle_gb_write, #gwolle_gb #gwolle_gb_new_entry, #gwolle_gb form { padding: 1rem !important; border-radius: 14px !important; } #gwolle_gb form textarea { min-height: 130px !important; } #gwolle_gb .page-navigation, #gwolle_gb .pagination, #gwolle_gb .gb-pagination, #gwolle_gb .gb-navigation, .gwolle_gb .page-navigation, .gwolle_gb .pagination, .gwolle_gb .gb-pagination { justify-content: center !important; } } /* ========================================================= 10C. GÄSTBOK – snyggare sidnavigering v1.0.7 Fångar fler Gwolle/WordPress-varianter av pagination så den inte visas som små vita standardknappar. ========================================================= */ /* Navigeringsraden under gästboken: gör den till en tydlig kontrollrad. */ #gwolle_gb .gwolle_gb_navigation, #gwolle_gb .gwolle-gb-navigation, #gwolle_gb .gwolle_gb_pagination, #gwolle_gb .gwolle-gb-pagination, #gwolle_gb .gb-navigation, #gwolle_gb .gb-pagination, #gwolle_gb .pagination, #gwolle_gb .page-navigation, #gwolle_gb .nav-links, #gwolle_gb_entries .gwolle_gb_navigation, #gwolle_gb_entries .gwolle-gb-navigation, #gwolle_gb_entries .gwolle_gb_pagination, #gwolle_gb_entries .gwolle-gb-pagination, #gwolle_gb_entries .gb-navigation, #gwolle_gb_entries .gb-pagination, #gwolle_gb_entries .pagination, #gwolle_gb_entries .page-navigation, #gwolle_gb_entries .nav-links, .gwolle_gb .gwolle_gb_navigation, .gwolle_gb .gwolle-gb-navigation, .gwolle_gb .gwolle_gb_pagination, .gwolle_gb .gwolle-gb-pagination, .gwolle_gb .gb-navigation, .gwolle_gb .gb-pagination, .gwolle_gb .pagination, .gwolle_gb .page-navigation, .gwolle_gb .nav-links, .gwolle-gb .gwolle_gb_navigation, .gwolle-gb .gwolle-gb-navigation, .gwolle-gb .gwolle_gb_pagination, .gwolle-gb .gwolle-gb-pagination, .gwolle-gb .gb-navigation, .gwolle-gb .gb-pagination, .gwolle-gb .pagination, .gwolle-gb .page-navigation, .gwolle-gb .nav-links, .entry-content .gwolle_gb_navigation, .entry-content .gwolle-gb-navigation, .entry-content .gwolle_gb_pagination, .entry-content .gwolle-gb-pagination { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: wrap !important; gap: .42rem !important; width: 100% !important; max-width: 100% !important; margin: 1.15rem 0 1.55rem auto !important; padding: .65rem .75rem !important; background: linear-gradient(135deg, rgba(9,35,74,.72), rgba(5,6,10,.78)) !important; border: 1px solid rgba(250,204,21,.24) !important; border-radius: 16px !important; box-shadow: 0 14px 36px rgba(0,0,0,.32) !important; } /* Själva sidknapparna. Viktigt: även button/input täcks eftersom vissa plugins renderar så. */ #gwolle_gb .gwolle_gb_navigation a, #gwolle_gb .gwolle_gb_navigation span, #gwolle_gb .gwolle_gb_navigation button, #gwolle_gb .gwolle_gb_navigation input, #gwolle_gb .gwolle-gb-navigation a, #gwolle_gb .gwolle-gb-navigation span, #gwolle_gb .gwolle-gb-navigation button, #gwolle_gb .gwolle-gb-navigation input, #gwolle_gb .gwolle_gb_pagination a, #gwolle_gb .gwolle_gb_pagination span, #gwolle_gb .gwolle_gb_pagination button, #gwolle_gb .gwolle_gb_pagination input, #gwolle_gb .gwolle-gb-pagination a, #gwolle_gb .gwolle-gb-pagination span, #gwolle_gb .gwolle-gb-pagination button, #gwolle_gb .gwolle-gb-pagination input, #gwolle_gb .gb-navigation a, #gwolle_gb .gb-navigation span, #gwolle_gb .gb-navigation button, #gwolle_gb .gb-navigation input, #gwolle_gb .gb-pagination a, #gwolle_gb .gb-pagination span, #gwolle_gb .gb-pagination button, #gwolle_gb .gb-pagination input, #gwolle_gb .pagination a, #gwolle_gb .pagination span, #gwolle_gb .pagination button, #gwolle_gb .pagination input, #gwolle_gb .page-navigation a, #gwolle_gb .page-navigation span, #gwolle_gb .page-navigation button, #gwolle_gb .page-navigation input, #gwolle_gb .nav-links a, #gwolle_gb .nav-links span, #gwolle_gb_entries .gwolle_gb_navigation a, #gwolle_gb_entries .gwolle_gb_navigation span, #gwolle_gb_entries .gwolle_gb_navigation button, #gwolle_gb_entries .gwolle_gb_navigation input, #gwolle_gb_entries .gwolle-gb-navigation a, #gwolle_gb_entries .gwolle-gb-navigation span, #gwolle_gb_entries .gwolle-gb-navigation button, #gwolle_gb_entries .gwolle-gb-navigation input, #gwolle_gb_entries .gwolle_gb_pagination a, #gwolle_gb_entries .gwolle_gb_pagination span, #gwolle_gb_entries .gwolle_gb_pagination button, #gwolle_gb_entries .gwolle_gb_pagination input, #gwolle_gb_entries .gwolle-gb-pagination a, #gwolle_gb_entries .gwolle-gb-pagination span, #gwolle_gb_entries .gwolle-gb-pagination button, #gwolle_gb_entries .gwolle-gb-pagination input, #gwolle_gb_entries .gb-navigation a, #gwolle_gb_entries .gb-navigation span, #gwolle_gb_entries .gb-navigation button, #gwolle_gb_entries .gb-navigation input, #gwolle_gb_entries .gb-pagination a, #gwolle_gb_entries .gb-pagination span, #gwolle_gb_entries .gb-pagination button, #gwolle_gb_entries .gb-pagination input, #gwolle_gb_entries .pagination a, #gwolle_gb_entries .pagination span, #gwolle_gb_entries .pagination button, #gwolle_gb_entries .pagination input, #gwolle_gb_entries .page-navigation a, #gwolle_gb_entries .page-navigation span, #gwolle_gb_entries .page-navigation button, #gwolle_gb_entries .page-navigation input, #gwolle_gb_entries .nav-links a, #gwolle_gb_entries .nav-links span, .gwolle_gb .pagination a, .gwolle_gb .pagination span, .gwolle_gb .page-navigation a, .gwolle_gb .page-navigation span, .gwolle_gb .gb-navigation a, .gwolle_gb .gb-navigation span, .gwolle_gb .gb-pagination a, .gwolle_gb .gb-pagination span, .gwolle_gb .nav-links a, .gwolle_gb .nav-links span, .gwolle-gb .pagination a, .gwolle-gb .pagination span, .gwolle-gb .page-navigation a, .gwolle-gb .page-navigation span, .gwolle-gb .gb-navigation a, .gwolle-gb .gb-navigation span, .gwolle-gb .gb-pagination a, .gwolle-gb .gb-pagination span, .gwolle-gb .nav-links a, .gwolle-gb .nav-links span, .entry-content .gwolle_gb_navigation a, .entry-content .gwolle_gb_navigation span, .entry-content .gwolle_gb_pagination a, .entry-content .gwolle_gb_pagination span, .entry-content .gwolle-gb-navigation a, .entry-content .gwolle-gb-navigation span, .entry-content .gwolle-gb-pagination a, .entry-content .gwolle-gb-pagination span { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 38px !important; height: 38px !important; padding: 0 .78rem !important; margin: 0 !important; background: rgba(255,255,255,.07) !important; color: #f8fafc !important; border: 1px solid rgba(250,204,21,.32) !important; border-radius: 11px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important; font-size: .9rem !important; font-weight: 850 !important; line-height: 1 !important; text-decoration: none !important; transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease !important; } #gwolle_gb .gwolle_gb_navigation a:hover, #gwolle_gb .gwolle-gb-navigation a:hover, #gwolle_gb .gwolle_gb_pagination a:hover, #gwolle_gb .gwolle-gb-pagination a:hover, #gwolle_gb .gb-navigation a:hover, #gwolle_gb .gb-pagination a:hover, #gwolle_gb .pagination a:hover, #gwolle_gb .page-navigation a:hover, #gwolle_gb .nav-links a:hover, #gwolle_gb_entries .gwolle_gb_navigation a:hover, #gwolle_gb_entries .gwolle-gb-navigation a:hover, #gwolle_gb_entries .gwolle_gb_pagination a:hover, #gwolle_gb_entries .gwolle-gb-pagination a:hover, #gwolle_gb_entries .gb-navigation a:hover, #gwolle_gb_entries .gb-pagination a:hover, #gwolle_gb_entries .pagination a:hover, #gwolle_gb_entries .page-navigation a:hover, #gwolle_gb_entries .nav-links a:hover, .gwolle_gb .pagination a:hover, .gwolle_gb .page-navigation a:hover, .gwolle_gb .gb-navigation a:hover, .gwolle_gb .gb-pagination a:hover, .gwolle_gb .nav-links a:hover, .gwolle-gb .pagination a:hover, .gwolle-gb .page-navigation a:hover, .gwolle-gb .gb-navigation a:hover, .gwolle-gb .gb-pagination a:hover, .gwolle-gb .nav-links a:hover, .entry-content .gwolle_gb_navigation a:hover, .entry-content .gwolle_gb_pagination a:hover, .entry-content .gwolle-gb-navigation a:hover, .entry-content .gwolle-gb-pagination a:hover { transform: translateY(-1px) !important; background: rgba(250,204,21,.16) !important; color: #ffffff !important; border-color: rgba(250,204,21,.72) !important; } /* Nuvarande sida. */ #gwolle_gb .current, #gwolle_gb .current_page_item, #gwolle_gb .page-numbers.current, #gwolle_gb .pagination .current, #gwolle_gb .page-navigation .current, #gwolle_gb .gb-navigation .current, #gwolle_gb .gb-pagination .current, #gwolle_gb_entries .current, #gwolle_gb_entries .current_page_item, #gwolle_gb_entries .page-numbers.current, #gwolle_gb_entries .pagination .current, #gwolle_gb_entries .page-navigation .current, #gwolle_gb_entries .gb-navigation .current, #gwolle_gb_entries .gb-pagination .current, .gwolle_gb .page-numbers.current, .gwolle_gb .pagination .current, .gwolle_gb .page-navigation .current, .gwolle_gb .gb-navigation .current, .gwolle_gb .gb-pagination .current, .gwolle-gb .page-numbers.current, .gwolle-gb .pagination .current, .gwolle-gb .page-navigation .current, .gwolle-gb .gb-navigation .current, .gwolle-gb .gb-pagination .current, .entry-content .gwolle_gb_navigation .current, .entry-content .gwolle_gb_pagination .current, .entry-content .gwolle-gb-navigation .current, .entry-content .gwolle-gb-pagination .current { background: linear-gradient(135deg, var(--ox-gold), #f59e0b) !important; color: #06142b !important; border-color: var(--ox-gold) !important; box-shadow: 0 6px 18px rgba(250,204,21,.18) !important; } /* Föregående/nästa/alla får lite mer plats så de känns som riktiga knappar. */ #gwolle_gb a.next, #gwolle_gb a.prev, #gwolle_gb a.last, #gwolle_gb a.first, #gwolle_gb a[href*="page"], #gwolle_gb_entries a.next, #gwolle_gb_entries a.prev, #gwolle_gb_entries a.last, #gwolle_gb_entries a.first, .gwolle_gb a.next, .gwolle_gb a.prev, .gwolle_gb a.last, .gwolle_gb a.first, .gwolle-gb a.next, .gwolle-gb a.prev, .gwolle-gb a.last, .gwolle-gb a.first { min-width: 42px !important; } /* Sista skyddsnät: om pluginen spottar ut page-numbers utanför sin wrapper. */ .entry-content .page-numbers:not(.dots), .entry-content a.page-numbers, .entry-content span.page-numbers { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 36px !important; height: 36px !important; padding: 0 .72rem !important; background: rgba(255,255,255,.07) !important; color: #f8fafc !important; border: 1px solid rgba(250,204,21,.30) !important; border-radius: 10px !important; font-weight: 850 !important; text-decoration: none !important; } .entry-content .page-numbers.current { background: var(--ox-gold) !important; color: #06142b !important; } .entry-content .page-numbers.dots { color: rgba(255,255,255,.70) !important; background: transparent !important; border-color: transparent !important; } @media (max-width: 760px) { #gwolle_gb .gwolle_gb_navigation, #gwolle_gb .gwolle-gb-navigation, #gwolle_gb .gwolle_gb_pagination, #gwolle_gb .gwolle-gb-pagination, #gwolle_gb .gb-navigation, #gwolle_gb .gb-pagination, #gwolle_gb .pagination, #gwolle_gb .page-navigation, #gwolle_gb .nav-links, #gwolle_gb_entries .gwolle_gb_navigation, #gwolle_gb_entries .gwolle-gb-navigation, #gwolle_gb_entries .gwolle_gb_pagination, #gwolle_gb_entries .gwolle-gb-pagination, #gwolle_gb_entries .gb-navigation, #gwolle_gb_entries .gb-pagination, #gwolle_gb_entries .pagination, #gwolle_gb_entries .page-navigation, #gwolle_gb_entries .nav-links, .gwolle_gb .pagination, .gwolle_gb .page-navigation, .gwolle_gb .gb-navigation, .gwolle_gb .gb-pagination, .gwolle_gb .nav-links, .gwolle-gb .pagination, .gwolle-gb .page-navigation, .gwolle-gb .gb-navigation, .gwolle-gb .gb-pagination, .gwolle-gb .nav-links { justify-content: center !important; padding: .55rem !important; border-radius: 14px !important; } #gwolle_gb .pagination a, #gwolle_gb .pagination span, #gwolle_gb .page-navigation a, #gwolle_gb .page-navigation span, #gwolle_gb .gb-navigation a, #gwolle_gb .gb-navigation span, #gwolle_gb .gb-pagination a, #gwolle_gb .gb-pagination span, #gwolle_gb_entries .pagination a, #gwolle_gb_entries .pagination span, #gwolle_gb_entries .page-navigation a, #gwolle_gb_entries .page-navigation span, #gwolle_gb_entries .gb-navigation a, #gwolle_gb_entries .gb-navigation span, #gwolle_gb_entries .gb-pagination a, #gwolle_gb_entries .gb-pagination span, .entry-content .page-numbers { min-width: 34px !important; height: 34px !important; padding: 0 .6rem !important; font-size: .82rem !important; } } /* ========================================================= 15. V1.0.8 – LJUSARE SIDBAKGRUND / MÖRKNING ENDAST VID INNEHÅLL Syfte: bakgrunden ska kännas öppnare, men text och formulär ska fortfarande ligga på tydliga läsbarhetsytor. ========================================================= */ /* Gör sidans generella bakgrund mindre nedmörkad och mer blå/svart än helsvart. */ body { background: radial-gradient(circle at 12% 8%, rgba(200,16,46,.22), transparent 34rem), radial-gradient(circle at 86% 4%, rgba(242,199,92,.12), transparent 30rem), radial-gradient(circle at 50% 18%, rgba(18,58,112,.18), transparent 42rem), linear-gradient(135deg, #08101d 0%, #101827 48%, #070b12 100%) !important; } /* Tidigare mörkade detta hela startsidan. Nu är det bara en lätt toning, så bakgrundsbilden/sidorna får andas mer. */ .ox-modern-front::before { background: linear-gradient(90deg, rgba(0,0,0,.26) 0%, rgba(0,0,0,.16) 36%, rgba(0,0,0,.08) 66%, rgba(0,0,0,.18) 100% ), radial-gradient(circle at 18% 34%, rgba(200,16,46,.16), transparent 32rem) !important; } /* Mörkningen flyttas till själva hero-textens läsbarhetsyta. */ .ox-hero-copy, .ox-hero > div:first-child { position: relative; padding: clamp(1.15rem, 2.6vw, 2rem) !important; border-radius: 26px !important; background: linear-gradient(135deg, rgba(5,8,15,.82), rgba(9,18,32,.66)) !important; border: 1px solid rgba(255,255,255,.15) !important; box-shadow: 0 24px 70px rgba(0,0,0,.46) !important; backdrop-filter: blur(10px); } .ox-hero-copy::before, .ox-hero > div:first-child::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgba(200,16,46,.16), transparent 44%), radial-gradient(circle at top left, rgba(242,199,92,.10), transparent 22rem); } .ox-hero-copy > *, .ox-hero > div:first-child > * { position: relative; z-index: 1; } /* Innehållssektioner är fortsatt läsbara, men något lättare än tidigare. */ .ox-panel, .ox-card, .widget, .comments-area, .page article, .page .post, .page .hentry, #content article, #primary article, .post, .page { background: linear-gradient(145deg, rgba(8,14,25,.78), rgba(12,18,30,.62)) !important; border-color: rgba(255,255,255,.15) !important; box-shadow: 0 20px 60px rgba(0,0,0,.42) !important; backdrop-filter: blur(10px); } /* Gästboken och formulären ska bära sin egen mörka yta, inte kräva att hela sidan mörkas. */ #gwolle_gb .gwolle_gb_write, #gwolle_gb #gwolle_gb_new_entry, #gwolle_gb form, #gwolle_gb .gb-entry, #gwolle_gb article.gb-entry, #gwolle_gb .gwolle-gb-entry, #gwolle_gb .gwolle_gb_entry, .gwolle_gb .gb-entry, .gwolle_gb .gwolle_gb_entry, .gwolle-gb .gb-entry, .gwolle-gb .gwolle_gb_entry { background: linear-gradient(145deg, rgba(8,14,25,.86), rgba(13,19,31,.72)) !important; box-shadow: 0 16px 44px rgba(0,0,0,.38) !important; backdrop-filter: blur(8px); } /* Lite mindre vertikal tyngd på startsidan så bakgrunden känns luftigare. */ .ox-hero { min-height: min(72vh, 760px) !important; padding-top: clamp(3rem, 5vw, 4.8rem) !important; padding-bottom: clamp(2.8rem, 4vw, 3.8rem) !important; } .ox-section { position: relative; } /* En svag lokal skugga bakom sektioner i stället för helsidig mörkning. */ .ox-section::before { content: ""; position: absolute; inset: -1rem; z-index: -1; pointer-events: none; border-radius: 32px; background: radial-gradient(circle at 50% 20%, rgba(0,0,0,.22), transparent 70%); } @media (max-width: 760px) { .ox-modern-front::before { background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.08)) !important; } .ox-hero-copy, .ox-hero > div:first-child { padding: 1.15rem !important; border-radius: 20px !important; } } /* ========================================================= 10E. GÄSTBOK – kompaktare skrivform + större skrivtext v1.0.9 Minskar den tomma vänsterspalten i pluginformuläret och gör texten i fält/editor större och lättare att läsa. ========================================================= */ /* Formens inre rader: mindre vänsterspalt, tydligare balans mellan etikett och fält. */ #gwolle_gb #gwolle_gb_new_entry .input, #gwolle_gb #gwolle_gb_new_entry .form-row, #gwolle_gb #gwolle_gb_new_entry .form-group, #gwolle_gb #gwolle_gb_new_entry .gb-form-row, #gwolle_gb #gwolle_gb_new_entry .gwolle-gb-form-row, #gwolle_gb .gwolle_gb_write form .input, #gwolle_gb .gwolle_gb_write form .form-row, #gwolle_gb .gwolle_gb_write form .form-group, .gwolle_gb #gwolle_gb_new_entry .input, .gwolle_gb .gwolle_gb_write form .input, .gwolle-gb #gwolle_gb_new_entry .input, .gwolle-gb .gwolle_gb_write form .input { display: grid !important; grid-template-columns: minmax(120px, 165px) minmax(260px, 560px) !important; align-items: center !important; justify-content: center !important; column-gap: 1.15rem !important; row-gap: .35rem !important; width: 100% !important; max-width: 780px !important; margin: 0 auto .9rem auto !important; padding: 0 !important; float: none !important; clear: both !important; } /* Etiketterna: inte jättestora, inte långt ut till vänster, mer vuxen färg. */ #gwolle_gb #gwolle_gb_new_entry label, #gwolle_gb .gwolle_gb_write form label, .gwolle_gb #gwolle_gb_new_entry label, .gwolle-gb #gwolle_gb_new_entry label { grid-column: 1 !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; color: #f2c75c !important; font-size: .94rem !important; line-height: 1.35 !important; font-weight: 800 !important; letter-spacing: .01em !important; text-transform: none !important; text-align: left !important; } /* Själva skrivfälten: större text och jämn bredd. */ #gwolle_gb #gwolle_gb_new_entry input[type="text"], #gwolle_gb #gwolle_gb_new_entry input[type="email"], #gwolle_gb #gwolle_gb_new_entry input[type="url"], #gwolle_gb #gwolle_gb_new_entry input[type="password"], #gwolle_gb #gwolle_gb_new_entry textarea, #gwolle_gb #gwolle_gb_new_entry select, #gwolle_gb .gwolle_gb_write form input[type="text"], #gwolle_gb .gwolle_gb_write form input[type="email"], #gwolle_gb .gwolle_gb_write form input[type="url"], #gwolle_gb .gwolle_gb_write form input[type="password"], #gwolle_gb .gwolle_gb_write form textarea, #gwolle_gb .gwolle_gb_write form select, .gwolle_gb #gwolle_gb_new_entry input[type="text"], .gwolle_gb #gwolle_gb_new_entry input[type="email"], .gwolle_gb #gwolle_gb_new_entry textarea, .gwolle-gb #gwolle_gb_new_entry input[type="text"], .gwolle-gb #gwolle_gb_new_entry input[type="email"], .gwolle-gb #gwolle_gb_new_entry textarea { grid-column: 2 !important; width: 100% !important; max-width: 560px !important; min-height: 50px !important; padding: .82rem 1rem !important; font-size: 1.05rem !important; line-height: 1.55 !important; font-weight: 500 !important; float: none !important; clear: none !important; } #gwolle_gb #gwolle_gb_new_entry textarea, #gwolle_gb .gwolle_gb_write form textarea, .gwolle_gb #gwolle_gb_new_entry textarea, .gwolle-gb #gwolle_gb_new_entry textarea { min-height: 155px !important; } /* WordPress/TinyMCE-editorn: placera toolbar och skrivyta i fältkolumnen. */ #gwolle_gb #gwolle_gb_new_entry .wp-editor-wrap, #gwolle_gb #gwolle_gb_new_entry .wp-editor-container, #gwolle_gb #gwolle_gb_new_entry .quicktags-toolbar, #gwolle_gb #gwolle_gb_new_entry .mce-tinymce, #gwolle_gb .gwolle_gb_write form .wp-editor-wrap, #gwolle_gb .gwolle_gb_write form .wp-editor-container, #gwolle_gb .gwolle_gb_write form .quicktags-toolbar, #gwolle_gb .gwolle_gb_write form .mce-tinymce, .gwolle_gb #gwolle_gb_new_entry .wp-editor-wrap, .gwolle_gb #gwolle_gb_new_entry .wp-editor-container, .gwolle-gb #gwolle_gb_new_entry .wp-editor-wrap, .gwolle-gb #gwolle_gb_new_entry .wp-editor-container { grid-column: 2 !important; width: 100% !important; max-width: 560px !important; float: none !important; clear: none !important; } #gwolle_gb #gwolle_gb_new_entry .wp-editor-area, #gwolle_gb .gwolle_gb_write form .wp-editor-area, .gwolle_gb #gwolle_gb_new_entry .wp-editor-area, .gwolle-gb #gwolle_gb_new_entry .wp-editor-area { font-size: 1.08rem !important; line-height: 1.6 !important; min-height: 155px !important; } /* Integritetspolicyn: samla text och checkbox i stället för att checkboxen hamnar mitt i sidan. */ #gwolle_gb #gwolle_gb_new_entry .input:has(input[type="checkbox"]), #gwolle_gb #gwolle_gb_new_entry .form-row:has(input[type="checkbox"]), #gwolle_gb .gwolle_gb_write form .input:has(input[type="checkbox"]), .gwolle_gb #gwolle_gb_new_entry .input:has(input[type="checkbox"]), .gwolle-gb #gwolle_gb_new_entry .input:has(input[type="checkbox"]) { grid-template-columns: minmax(260px, 560px) !important; justify-content: center !important; align-items: center !important; } #gwolle_gb #gwolle_gb_new_entry .input:has(input[type="checkbox"]) label, #gwolle_gb #gwolle_gb_new_entry .form-row:has(input[type="checkbox"]) label, #gwolle_gb .gwolle_gb_write form .input:has(input[type="checkbox"]) label, .gwolle_gb #gwolle_gb_new_entry .input:has(input[type="checkbox"]) label, .gwolle-gb #gwolle_gb_new_entry .input:has(input[type="checkbox"]) label { grid-column: 1 !important; display: inline-flex !important; align-items: center !important; gap: .55rem !important; color: #e7ecf6 !important; font-size: .95rem !important; font-weight: 750 !important; } #gwolle_gb #gwolle_gb_new_entry input[type="checkbox"], #gwolle_gb .gwolle_gb_write form input[type="checkbox"], .gwolle_gb #gwolle_gb_new_entry input[type="checkbox"], .gwolle-gb #gwolle_gb_new_entry input[type="checkbox"] { width: 18px !important; height: 18px !important; min-width: 18px !important; min-height: 18px !important; margin: 0 .55rem 0 0 !important; float: none !important; clear: none !important; } /* Knapparna följer samma smalare skrivbredd. */ #gwolle_gb #gwolle_gb_new_entry input[type="submit"], #gwolle_gb #gwolle_gb_new_entry button, #gwolle_gb .gwolle_gb_write form input[type="submit"], #gwolle_gb .gwolle_gb_write form button, .gwolle_gb #gwolle_gb_new_entry input[type="submit"], .gwolle_gb #gwolle_gb_new_entry button, .gwolle-gb #gwolle_gb_new_entry input[type="submit"], .gwolle-gb #gwolle_gb_new_entry button { display: block !important; width: min(100%, 560px) !important; max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; font-size: 1rem !important; } @media (max-width: 760px) { #gwolle_gb #gwolle_gb_new_entry .input, #gwolle_gb #gwolle_gb_new_entry .form-row, #gwolle_gb #gwolle_gb_new_entry .form-group, #gwolle_gb #gwolle_gb_new_entry .gb-form-row, #gwolle_gb #gwolle_gb_new_entry .gwolle-gb-form-row, #gwolle_gb .gwolle_gb_write form .input, #gwolle_gb .gwolle_gb_write form .form-row, #gwolle_gb .gwolle_gb_write form .form-group, .gwolle_gb #gwolle_gb_new_entry .input, .gwolle-gb #gwolle_gb_new_entry .input { display: block !important; max-width: 100% !important; margin-bottom: .8rem !important; } #gwolle_gb #gwolle_gb_new_entry label, #gwolle_gb .gwolle_gb_write form label, .gwolle_gb #gwolle_gb_new_entry label, .gwolle-gb #gwolle_gb_new_entry label { display: block !important; margin: 0 0 .35rem 0 !important; } #gwolle_gb #gwolle_gb_new_entry input[type="text"], #gwolle_gb #gwolle_gb_new_entry input[type="email"], #gwolle_gb #gwolle_gb_new_entry textarea, #gwolle_gb #gwolle_gb_new_entry select, #gwolle_gb #gwolle_gb_new_entry .wp-editor-wrap, #gwolle_gb #gwolle_gb_new_entry .wp-editor-container, #gwolle_gb .gwolle_gb_write form input[type="text"], #gwolle_gb .gwolle_gb_write form input[type="email"], #gwolle_gb .gwolle_gb_write form textarea, #gwolle_gb .gwolle_gb_write form select, #gwolle_gb .gwolle_gb_write form .wp-editor-wrap, #gwolle_gb .gwolle_gb_write form .wp-editor-container { max-width: 100% !important; width: 100% !important; } } /* ========================================================= 10F. GÄSTBOK – slutlig kompakt form v1.0.10 Lägger etiketterna direkt ovanför fälten och tar bort den stora tomma vänsterspalten som pluginets standardlayout skapar. ========================================================= */ #gwolle_gb #gwolle_gb_new_entry, #gwolle_gb .gwolle_gb_write form, .gwolle_gb #gwolle_gb_new_entry, .gwolle-gb #gwolle_gb_new_entry { max-width: 1120px !important; margin-left: auto !important; margin-right: auto !important; } /* Varje fältrad blir en kompakt blockrad i stället för tvåspalt med stor vänsteryta. */ #gwolle_gb #gwolle_gb_new_entry .input, #gwolle_gb #gwolle_gb_new_entry p.input, #gwolle_gb #gwolle_gb_new_entry .form-row, #gwolle_gb #gwolle_gb_new_entry .form-group, #gwolle_gb #gwolle_gb_new_entry .gb-form-row, #gwolle_gb #gwolle_gb_new_entry .gwolle-gb-form-row, #gwolle_gb .gwolle_gb_write form .input, #gwolle_gb .gwolle_gb_write form p.input, #gwolle_gb .gwolle_gb_write form .form-row, #gwolle_gb .gwolle_gb_write form .form-group, .gwolle_gb #gwolle_gb_new_entry .input, .gwolle_gb #gwolle_gb_new_entry p.input, .gwolle-gb #gwolle_gb_new_entry .input, .gwolle-gb #gwolle_gb_new_entry p.input { display: block !important; width: min(100%, 640px) !important; max-width: 640px !important; margin: 0 auto 1rem auto !important; padding: 0 !important; float: none !important; clear: both !important; text-align: left !important; } /* Etiketter ska ligga precis ovanför fältet, inte ute i vänster marginal. */ #gwolle_gb #gwolle_gb_new_entry label, #gwolle_gb .gwolle_gb_write form label, .gwolle_gb #gwolle_gb_new_entry label, .gwolle-gb #gwolle_gb_new_entry label { display: block !important; width: 100% !important; max-width: 640px !important; margin: 0 0 .42rem 0 !important; padding: 0 !important; float: none !important; clear: none !important; position: static !important; left: auto !important; right: auto !important; color: #f2c75c !important; font-size: .98rem !important; line-height: 1.35 !important; font-weight: 850 !important; letter-spacing: .01em !important; text-align: left !important; } /* Fält och editor får samma bredd som etiketten och större skrivtext. */ #gwolle_gb #gwolle_gb_new_entry input[type="text"], #gwolle_gb #gwolle_gb_new_entry input[type="email"], #gwolle_gb #gwolle_gb_new_entry input[type="url"], #gwolle_gb #gwolle_gb_new_entry input[type="password"], #gwolle_gb #gwolle_gb_new_entry textarea, #gwolle_gb #gwolle_gb_new_entry select, #gwolle_gb .gwolle_gb_write form input[type="text"], #gwolle_gb .gwolle_gb_write form input[type="email"], #gwolle_gb .gwolle_gb_write form input[type="url"], #gwolle_gb .gwolle_gb_write form input[type="password"], #gwolle_gb .gwolle_gb_write form textarea, #gwolle_gb .gwolle_gb_write form select, .gwolle_gb #gwolle_gb_new_entry input[type="text"], .gwolle_gb #gwolle_gb_new_entry input[type="email"], .gwolle_gb #gwolle_gb_new_entry textarea, .gwolle-gb #gwolle_gb_new_entry input[type="text"], .gwolle-gb #gwolle_gb_new_entry input[type="email"], .gwolle-gb #gwolle_gb_new_entry textarea { display: block !important; width: 100% !important; max-width: 640px !important; margin: 0 !important; padding: .9rem 1rem !important; min-height: 52px !important; font-size: 1.12rem !important; line-height: 1.58 !important; font-weight: 550 !important; float: none !important; clear: both !important; box-sizing: border-box !important; } #gwolle_gb #gwolle_gb_new_entry textarea, #gwolle_gb .gwolle_gb_write form textarea, .gwolle_gb #gwolle_gb_new_entry textarea, .gwolle-gb #gwolle_gb_new_entry textarea { min-height: 165px !important; } #gwolle_gb #gwolle_gb_new_entry .wp-editor-wrap, #gwolle_gb #gwolle_gb_new_entry .wp-editor-container, #gwolle_gb #gwolle_gb_new_entry .quicktags-toolbar, #gwolle_gb #gwolle_gb_new_entry .mce-tinymce, #gwolle_gb .gwolle_gb_write form .wp-editor-wrap, #gwolle_gb .gwolle_gb_write form .wp-editor-container, #gwolle_gb .gwolle_gb_write form .quicktags-toolbar, #gwolle_gb .gwolle_gb_write form .mce-tinymce, .gwolle_gb #gwolle_gb_new_entry .wp-editor-wrap, .gwolle_gb #gwolle_gb_new_entry .wp-editor-container, .gwolle-gb #gwolle_gb_new_entry .wp-editor-wrap, .gwolle-gb #gwolle_gb_new_entry .wp-editor-container { display: block !important; width: 100% !important; max-width: 640px !important; margin: 0 !important; float: none !important; clear: both !important; box-sizing: border-box !important; } #gwolle_gb #gwolle_gb_new_entry .wp-editor-area, #gwolle_gb .gwolle_gb_write form .wp-editor-area, .gwolle_gb #gwolle_gb_new_entry .wp-editor-area, .gwolle-gb #gwolle_gb_new_entry .wp-editor-area { font-size: 1.12rem !important; line-height: 1.62 !important; min-height: 165px !important; } /* Integritetspolicy: text och ruta ska sitta ihop och ligga på samma skrivbredd. */ #gwolle_gb #gwolle_gb_new_entry .input:has(input[type="checkbox"]), #gwolle_gb #gwolle_gb_new_entry p.input:has(input[type="checkbox"]), #gwolle_gb #gwolle_gb_new_entry .form-row:has(input[type="checkbox"]), #gwolle_gb .gwolle_gb_write form .input:has(input[type="checkbox"]), .gwolle_gb #gwolle_gb_new_entry .input:has(input[type="checkbox"]), .gwolle-gb #gwolle_gb_new_entry .input:has(input[type="checkbox"]) { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: .7rem !important; width: min(100%, 640px) !important; max-width: 640px !important; margin: 1.15rem auto 1.1rem auto !important; } #gwolle_gb #gwolle_gb_new_entry .input:has(input[type="checkbox"]) label, #gwolle_gb #gwolle_gb_new_entry p.input:has(input[type="checkbox"]) label, #gwolle_gb #gwolle_gb_new_entry .form-row:has(input[type="checkbox"]) label, #gwolle_gb .gwolle_gb_write form .input:has(input[type="checkbox"]) label, .gwolle_gb #gwolle_gb_new_entry .input:has(input[type="checkbox"]) label, .gwolle-gb #gwolle_gb_new_entry .input:has(input[type="checkbox"]) label { display: inline !important; width: auto !important; max-width: none !important; margin: 0 !important; color: #e7ecf6 !important; font-size: 1rem !important; font-weight: 750 !important; } #gwolle_gb #gwolle_gb_new_entry input[type="checkbox"], #gwolle_gb .gwolle_gb_write form input[type="checkbox"], .gwolle_gb #gwolle_gb_new_entry input[type="checkbox"], .gwolle-gb #gwolle_gb_new_entry input[type="checkbox"] { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; margin: 0 !important; float: none !important; clear: none !important; accent-color: #dca733 !important; } /* Knapparna ska linjera med fälten. */ #gwolle_gb #gwolle_gb_new_entry input[type="submit"], #gwolle_gb #gwolle_gb_new_entry button, #gwolle_gb .gwolle_gb_write form input[type="submit"], #gwolle_gb .gwolle_gb_write form button, .gwolle_gb #gwolle_gb_new_entry input[type="submit"], .gwolle_gb #gwolle_gb_new_entry button, .gwolle-gb #gwolle_gb_new_entry input[type="submit"], .gwolle-gb #gwolle_gb_new_entry button { width: min(100%, 640px) !important; max-width: 640px !important; margin-left: auto !important; margin-right: auto !important; font-size: 1.02rem !important; } /* Honeypot/spamfältet ”Rör inte detta” ska aldrig visas för besökare. */ #gwolle_gb [class*="honeypot"], #gwolle_gb [id*="honeypot"], #gwolle_gb [name*="honeypot"], #gwolle_gb [class*="trap"], #gwolle_gb [id*="trap"], #gwolle_gb [name*="trap"], .gwolle_gb [class*="honeypot"], .gwolle_gb [id*="honeypot"], .gwolle_gb [name*="honeypot"], .gwolle-gb [class*="honeypot"], .gwolle-gb [id*="honeypot"], .gwolle-gb [name*="honeypot"] { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; position: absolute !important; left: -9999px !important; pointer-events: none !important; } @media (max-width: 760px) { #gwolle_gb #gwolle_gb_new_entry .input, #gwolle_gb #gwolle_gb_new_entry p.input, #gwolle_gb .gwolle_gb_write form .input, #gwolle_gb .gwolle_gb_write form p.input, .gwolle_gb #gwolle_gb_new_entry .input, .gwolle-gb #gwolle_gb_new_entry .input, #gwolle_gb #gwolle_gb_new_entry input[type="submit"], #gwolle_gb #gwolle_gb_new_entry button, #gwolle_gb .gwolle_gb_write form input[type="submit"], #gwolle_gb .gwolle_gb_write form button { width: 100% !important; max-width: 100% !important; } } /* ========================================================= 16. MATCHDAG MED OXARNA (v1.0.14) Aktiv startsidesmodul med BoIS-känsla, ramsa och matchdagslänkar. ========================================================= */ .ox-matchday { padding-top: clamp(1.4rem, 3vw, 2rem) !important; padding-bottom: clamp(2.4rem, 5vw, 3.4rem) !important; } .ox-matchday-shell { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(280px, .95fr); gap: 1rem; padding: clamp(1.15rem, 2.8vw, 1.8rem); border-radius: var(--ox-radius); border: 1px solid rgba(242,199,92,.34); background: radial-gradient(circle at 0% 0%, rgba(242,199,92,.20), transparent 26rem), radial-gradient(circle at 100% 8%, rgba(200,16,46,.18), transparent 25rem), linear-gradient(145deg, rgba(5,18,38,.93), rgba(5,7,12,.92)) !important; box-shadow: 0 28px 90px rgba(0,0,0,.52); } .ox-matchday-shell::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(242,199,92,.12), transparent 22%, transparent 78%, rgba(200,16,46,.14)), repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 1px, transparent 1px 12px); opacity: .8; } .ox-matchday-main, .ox-matchday-card, .ox-chant-card { position: relative; z-index: 1; } .ox-matchday-main { display: flex; flex-direction: column; justify-content: center; gap: .8rem; min-width: 0; } .ox-matchday-kicker { display: inline-flex; align-items: center; gap: .55rem; width: fit-content; margin: 0 0 .15rem; color: #06142b !important; background: var(--ox-gold); border-radius: 999px; padding: .42rem .75rem; font-size: .78rem !important; line-height: 1 !important; font-weight: 950 !important; letter-spacing: .10em; text-transform: uppercase; text-shadow: none !important; } .ox-matchday-kicker::before { content: ""; width: .58rem; height: .58rem; border-radius: 50%; background: var(--ox-red); box-shadow: 0 0 0 5px rgba(200,16,46,.18); } .ox-matchday h2 { margin: 0 !important; color: #fff !important; font-size: clamp(1.85rem, 4.4vw, 3.65rem) !important; line-height: .98 !important; letter-spacing: -.035em !important; text-transform: uppercase; text-shadow: 0 4px 24px rgba(0,0,0,.75); } .ox-matchday-lead { max-width: 740px; margin: .1rem 0 .35rem !important; color: #e7ecf6 !important; font-size: clamp(1.02rem, 1.7vw, 1.2rem) !important; line-height: 1.55 !important; text-shadow: 0 2px 12px rgba(0,0,0,.68); } .ox-matchday-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .25rem; } .ox-matchday-actions .ox-btn { min-height: 44px; padding: .78rem 1rem; } .ox-matchday-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } .ox-matchday-card, .ox-chant-card { border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(0,0,0,.34); box-shadow: 0 18px 48px rgba(0,0,0,.28); padding: .95rem; min-width: 0; } .ox-matchday-card strong, .ox-chant-card strong { display: block; color: var(--ox-gold) !important; font-size: .76rem; line-height: 1; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .5rem; } .ox-matchday-card p, .ox-chant-card p { margin: 0; color: #f4f7fb !important; line-height: 1.45; font-weight: 650; } .ox-chant-card { grid-column: 1 / -1; border-color: rgba(242,199,92,.32); background: linear-gradient(135deg, rgba(9,35,74,.88), rgba(9,35,74,.38)), rgba(0,0,0,.28) !important; } .ox-chant-line { display: block; margin: .2rem 0 .75rem !important; color: #fff !important; font-size: clamp(1.15rem, 2vw, 1.55rem) !important; line-height: 1.16 !important; font-weight: 950 !important; letter-spacing: -.01em; text-transform: uppercase; } .ox-chant-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: .55rem .85rem; border-radius: 999px; border: 1px solid rgba(242,199,92,.44); background: rgba(242,199,92,.12); color: var(--ox-gold) !important; font-weight: 900; cursor: pointer; transition: transform .18s ease, background .18s ease; } .ox-chant-button:hover { transform: translateY(-1px); background: rgba(242,199,92,.20); } @media (max-width: 920px) { .ox-matchday-shell { grid-template-columns: 1fr; } .ox-matchday-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ox-matchday { padding-top: 1rem !important; padding-bottom: 2rem !important; } .ox-matchday-shell { padding: 1rem; border-radius: 20px; } .ox-matchday-grid { grid-template-columns: 1fr; } .ox-matchday-actions .ox-btn, .ox-matchday-actions { width: 100%; } .ox-matchday-actions .ox-btn { justify-content: center; } } /* ========================================================= 10J. GÄSTBOK HOME – säker reparationsfix (v1.0.14) Tar bort den grå x-limpan utan att tvinga sönder Gwolle-formen. ========================================================= */ #gastbok .ox-guestbook, #gastbok .ox-guestbook #gwolle_gb, #gastbok .ox-guestbook .gwolle_gb, #gastbok .ox-guestbook .gwolle-gb { position: relative !important; } #gastbok .ox-guestbook .ox-gb-real-close, #gastbok .ox-guestbook input.ox-gb-real-close, #gastbok .ox-guestbook button.ox-gb-real-close, #gastbok .ox-guestbook a.ox-gb-real-close, #gastbok .ox-guestbook input[type="button"][value="x"], #gastbok .ox-guestbook input[type="button"][value="X"], #gastbok .ox-guestbook input[type="button"][value="×"], #gastbok .ox-guestbook button[value="x"], #gastbok .ox-guestbook button[value="X"], #gastbok .ox-guestbook button[value="×"] { position: absolute !important; top: 1rem !important; right: 1rem !important; left: auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; max-width: 38px !important; min-width: 38px !important; height: 38px !important; max-height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 !important; border-radius: 999px !important; border: 1px solid rgba(255,255,255,.32) !important; background: rgba(255,255,255,.28) !important; color: #fff !important; font-size: 1rem !important; line-height: 1 !important; font-weight: 950 !important; text-align: center !important; box-shadow: none !important; text-shadow: none !important; z-index: 50 !important; transform: none !important; overflow: hidden !important; } #gastbok .ox-guestbook .ox-gb-real-close::before { content: "×"; color: #fff; font-size: 1.05rem; line-height: 1; } #gastbok .ox-guestbook input.ox-gb-real-close { text-indent: 0 !important; } #gastbok .ox-guestbook form#gwolle_gb_new_entry { width: min(100%, 760px) !important; max-width: 760px !important; margin: 0 auto !important; padding-top: 1.1rem !important; } #gastbok .ox-guestbook form#gwolle_gb_new_entry > div:not(.ox-gb-honeypot):not(.ox-gb-empty) { box-sizing: border-box !important; max-width: 100% !important; } #gastbok .ox-guestbook form#gwolle_gb_new_entry > div:not(.ox-gb-honeypot):not(.ox-gb-empty):has(.label):has(.input) { display: grid !important; grid-template-columns: 175px minmax(0, 1fr) !important; gap: .85rem !important; align-items: start !important; margin-bottom: 1rem !important; } #gastbok .ox-guestbook form#gwolle_gb_new_entry > div > .label, #gastbok .ox-guestbook form#gwolle_gb_new_entry > div > .input { float: none !important; clear: none !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } #gastbok .ox-guestbook form#gwolle_gb_new_entry label { color: var(--ox-gold, #f2c75c) !important; font-size: .98rem !important; line-height: 1.35 !important; font-weight: 850 !important; } #gastbok .ox-guestbook form#gwolle_gb_new_entry input[type="text"], #gastbok .ox-guestbook form#gwolle_gb_new_entry input[type="email"], #gastbok .ox-guestbook form#gwolle_gb_new_entry input[type="url"], #gastbok .ox-guestbook form#gwolle_gb_new_entry input[type="password"], #gastbok .ox-guestbook form#gwolle_gb_new_entry textarea, #gastbok .ox-guestbook form#gwolle_gb_new_entry select, #gastbok .ox-guestbook form#gwolle_gb_new_entry .wp-editor-wrap, #gastbok .ox-guestbook form#gwolle_gb_new_entry .wp-editor-container, #gastbok .ox-guestbook form#gwolle_gb_new_entry .markItUp, #gastbok .ox-guestbook form#gwolle_gb_new_entry .markItUpContainer, #gastbok .ox-guestbook form#gwolle_gb_new_entry .markItUpHeader { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #gastbok .ox-guestbook form#gwolle_gb_new_entry input[type="text"], #gastbok .ox-guestbook form#gwolle_gb_new_entry input[type="email"], #gastbok .ox-guestbook form#gwolle_gb_new_entry input[type="url"], #gastbok .ox-guestbook form#gwolle_gb_new_entry input[type="password"], #gastbok .ox-guestbook form#gwolle_gb_new_entry textarea { font-size: 1.08rem !important; line-height: 1.55 !important; } #gastbok .ox-guestbook form#gwolle_gb_new_entry .ox-gb-consent-row, #gastbok .ox-guestbook form#gwolle_gb_new_entry > div:has(input[type="checkbox"]) { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: .7rem !important; width: min(100%, 760px) !important; max-width: 760px !important; margin: .25rem auto 1.05rem !important; } #gastbok .ox-guestbook form#gwolle_gb_new_entry > div:has(input[type="checkbox"]) > .label, #gastbok .ox-guestbook form#gwolle_gb_new_entry > div:has(input[type="checkbox"]) > .input { display: contents !important; } #gastbok .ox-guestbook form#gwolle_gb_new_entry input[type="checkbox"] { width: 20px !important; min-width: 20px !important; height: 20px !important; min-height: 20px !important; margin: 0 !important; accent-color: var(--ox-gold, #f2c75c) !important; } #gastbok .ox-guestbook .ox-gb-honeypot, #gastbok .ox-guestbook .ox-gb-empty { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; max-width: 0 !important; max-height: 0 !important; overflow: hidden !important; position: absolute !important; left: -99999px !important; pointer-events: none !important; } #gastbok .ox-guestbook form#gwolle_gb_new_entry input[type="submit"], #gastbok .ox-guestbook form#gwolle_gb_new_entry button[type="submit"], #gastbok .ox-guestbook form#gwolle_gb_new_entry button[name*="preview"], #gastbok .ox-guestbook form#gwolle_gb_new_entry input[value*="Förhands"] { width: min(100%, 580px) !important; max-width: 580px !important; margin-left: auto !important; margin-right: auto !important; } @media (max-width: 760px) { #gastbok .ox-guestbook form#gwolle_gb_new_entry > div:not(.ox-gb-honeypot):not(.ox-gb-empty):has(.label):has(.input) { display: block !important; } #gastbok .ox-guestbook form#gwolle_gb_new_entry > div > .label { margin-bottom: .45rem !important; } }