/* ========================================================================== Kloagger – bas-CSS (design tokens, delade klasser) Laddas globalt via wp_enqueue_style. Modulerna kan skriva över --kg-* per nod via sina frontend.css.php (settings-styrda färger/typsnitt). ========================================================================== */ :root { --kg-bg: #07090b; /* nästan svart bas */ --kg-panel: #0d1116; /* panel/kort */ --kg-fg: #f4f7f8; /* text */ --kg-dim: #8b98a5; /* dämpad text/labels */ --kg-turkos: #2fd4c6; /* accent (Serwent-turkos) */ --kg-turkos-ink: #04231f; /* text på turkos yta */ --kg-line: rgba(255, 255, 255, .10); --kg-font-head: "Familjen Grotesk", sans-serif; --kg-font-ui: "Space Grotesk", sans-serif; } /* Delad container – fyller BB-kolumnen exakt och följer radens bredd/gutter. Om en modul sätter --kg-cw (Innehållsbredd) begränsas och centreras innehållet istället, vilket ger "helbredds bakgrund + innehåll på bestämd bredd". */ .kloagger-container { width: 100%; max-width: var(--kg-cw, none); margin-inline: auto; box-sizing: border-box; } /* Mobil: säker sidogutter så fullbredds-moduler inte ligger kant mot kant. "Padding sidor" (--kg-px) är 0 som standard och räcker inte på små skärmar; här ges en minsta gutter på telefoner. Header har egen motsvarande regel. */ @media (max-width: 600px) { .kloagger-container { padding-inline: 18px; } } /* Delade knappar */ .kloagger-btn { font-family: var(--kg-font-ui); font-weight: 600; font-size: 14px; letter-spacing: .05em; text-transform: uppercase; line-height: 1; padding: 14px 22px; border-radius: 2px; border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; } .kloagger-btn--primary { background: var(--kg-turkos); color: var(--kg-turkos-ink); box-shadow: 0 0 26px rgba(47, 212, 198, .30); } .kloagger-btn--ghost { background: transparent; color: var(--kg-fg); border-color: var(--kg-line); } /* Liten pulsande/glödande prick */ .kloagger-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--kg-turkos); box-shadow: 0 0 10px var(--kg-turkos); } /* Låser scroll när mobilmenyn är öppen (sätts på ) */ .kloagger-noscroll { overflow: hidden; } /* Accentfärgad text */ .kloagger-accent { color: var(--kg-turkos); } /* Teknisk `//`-etikett */ .kloagger-eyebrow { display: inline-flex; align-items: center; font-family: var(--kg-font-ui); font-weight: 600; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--kg-turkos); } .kloagger-eyebrow::before { content: "//"; margin-right: 11px; opacity: .65; font-weight: 700; } /* Pulsande prick (t.ex. akut-knapp/badge) */ .kloagger-pulse { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--kg-turkos); animation: kloagger-pulse 1.8s infinite; } @keyframes kloagger-pulse { 0% { box-shadow: 0 0 0 0 rgba(47, 212, 198, .5); } 70% { box-shadow: 0 0 0 11px rgba(47, 212, 198, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 212, 198, 0); } } /* ========================================================================== Sektionsbakgrunder – "teknisk noir" Sätts på en BB-RAD via Advanced → Class (t.ex. "kg-bg-grid") ELLER via Radinställningar → fliken "Kloagger" (där kan färg/opacitet/position/täthet ställas in per rad – se kloagger-modules.php). Klasserna är variabelstyrda och läser fyra valfria CSS-variabler; utan dem används fallback-värdena (= exakt nuvarande utseende): --kg-bg-accent accentfärg (glöd/ringar), default var(--kg-turkos) --kg-bg-opacity intensitet 0–2 (multiplikator), default 1 --kg-bg-pos position för glöd/ringar/hjälte, per-klass default --kg-bg-size mönstertäthet/storlek (px), per-klass default color-mix() används för att skala alfa med --kg-bg-opacity. ========================================================================== */ /* Bas: platt, nästan svart */ .kg-bg-base { background-color: var(--kg-bg); color: var(--kg-fg); } /* Panel: en aning ljusare – bra för att lyfta en sektion från svärtan */ .kg-bg-panel { background-color: var(--kg-panel); color: var(--kg-fg); } /* Mjuk vertikal toning från svart till panel */ .kg-bg-gradient { background-color: var(--kg-bg); background-image: linear-gradient(180deg, var(--kg-bg) 0%, var(--kg-panel) 100%); color: var(--kg-fg); } /* Tekniskt rutnät – tunna linjer i låg opacitet */ .kg-bg-grid { background-color: var(--kg-bg); background-image: linear-gradient(color-mix(in srgb, #fff calc(10% * var(--kg-bg-opacity, 1)), transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, #fff calc(10% * var(--kg-bg-opacity, 1)), transparent) 1px, transparent 1px); background-size: var(--kg-bg-size, 48px) var(--kg-bg-size, 48px); color: var(--kg-fg); } /* Prickmönster (dot-grid) */ .kg-bg-dots { background-color: var(--kg-bg); background-image: radial-gradient(color-mix(in srgb, #fff calc(12% * var(--kg-bg-opacity, 1)), transparent) 1.5px, transparent 1.6px); background-size: var(--kg-bg-size, 26px) var(--kg-bg-size, 26px); color: var(--kg-fg); } /* Turkos glöd upptill – bra ovanför en hero eller CTA */ .kg-bg-glow { background-color: var(--kg-bg); background-image: radial-gradient(ellipse 80% 55% at var(--kg-bg-pos, 50% 0%), color-mix(in srgb, var(--kg-bg-accent, var(--kg-turkos)) calc(16% * var(--kg-bg-opacity, 1)), transparent), transparent 70%); color: var(--kg-fg); } /* Ring-motiv: koncentriska ringar i accentfärg, mycket dämpat */ .kg-bg-rings { background-color: var(--kg-bg); background-image: repeating-radial-gradient( circle at var(--kg-bg-pos, 50% 50%), transparent 0, transparent calc(var(--kg-bg-size, 80px) - 2px), color-mix(in srgb, var(--kg-bg-accent, var(--kg-turkos)) calc(7% * var(--kg-bg-opacity, 1)), transparent) calc(var(--kg-bg-size, 80px) - 1px), color-mix(in srgb, var(--kg-bg-accent, var(--kg-turkos)) calc(7% * var(--kg-bg-opacity, 1)), transparent) var(--kg-bg-size, 80px), transparent calc(var(--kg-bg-size, 80px) + 1px) ); color: var(--kg-fg); } /* Rutnät + glöd i kombination */ .kg-bg-grid-glow { background-color: var(--kg-bg); background-image: radial-gradient(ellipse 80% 55% at var(--kg-bg-pos, 50% 0%), color-mix(in srgb, var(--kg-bg-accent, var(--kg-turkos)) calc(14% * var(--kg-bg-opacity, 1)), transparent), transparent 70%), linear-gradient(color-mix(in srgb, #fff calc(10% * var(--kg-bg-opacity, 1)), transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, #fff calc(10% * var(--kg-bg-opacity, 1)), transparent) 1px, transparent 1px); background-size: auto, var(--kg-bg-size, 48px) var(--kg-bg-size, 48px), var(--kg-bg-size, 48px) var(--kg-bg-size, 48px); color: var(--kg-fg); } /* Fylld turkos sektion – hög kontrast, för CTA-band e.d. Sätter mörk text som standard; egna moduler kan skriva över --kg-fg. */ .kg-bg-turkos { background-color: var(--kg-turkos); color: var(--kg-turkos-ink); --kg-fg: var(--kg-turkos-ink); --kg-dim: rgba(4, 35, 31, .7); } /* Turkos glöd nedtill – speglar kg-bg-glow, bra som avslut/övergång */ .kg-bg-glow-bottom { background-color: var(--kg-bg); background-image: radial-gradient(ellipse 80% 55% at var(--kg-bg-pos, 50% 100%), color-mix(in srgb, var(--kg-bg-accent, var(--kg-turkos)) calc(16% * var(--kg-bg-opacity, 1)), transparent), transparent 70%); color: var(--kg-fg); } /* Diagonal skanline – tunna sneda linjer i låg opacitet */ .kg-bg-scanline { background-color: var(--kg-bg); background-image: repeating-linear-gradient( 45deg, transparent 0, transparent calc(var(--kg-bg-size, 14px) - 1px), color-mix(in srgb, #fff calc(4% * var(--kg-bg-opacity, 1)), transparent) calc(var(--kg-bg-size, 14px) - 1px), color-mix(in srgb, #fff calc(4% * var(--kg-bg-opacity, 1)), transparent) var(--kg-bg-size, 14px) ); color: var(--kg-fg); } /* Superhjälte-siluett (abstrakt kappfigur, bakifrån) i nedre högra hörnet. Bas-SVG:n har turkos hårdkodad (data-URI kan inte läsa --kg-*). Väljer man färg/opacitet i Radinställningar bygger PHP om SVG:n per nod och skriver över background-image (se kloagger-modules.php). Position/storlek styrs av variablerna nedan. */ .kg-bg-hero { background-color: var(--kg-bg); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20300%20460'%3E%3Ccircle%20cx='150'%20cy='58'%20r='30'%20fill='rgba(47,212,198,0.11)'/%3E%3Cpath%20fill='rgba(47,212,198,0.11)'%20d='M120%2092%20C120%2078%20132%2072%20150%2072%20C168%2072%20180%2078%20180%2092%20Z'/%3E%3Cpath%20fill='rgba(47,212,198,0.09)'%20d='M150%2094%20C126%2096%20108%20110%20102%20134%20C84%20220%2072%20312%2058%20404%20C86%20392%20118%20398%20150%20398%20C182%20398%20214%20392%20242%20404%20C228%20312%20216%20220%20198%20134%20C192%20110%20174%2096%20150%2094%20Z'/%3E%3Cpath%20fill='rgba(47,212,198,0.11)'%20d='M112%20408%20h30%20v34%20h-30%20Z%20M158%20408%20h30%20v34%20h-30%20Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: var(--kg-bg-pos, right -20px bottom -10px); background-size: var(--kg-bg-size, clamp(180px, 28%, 420px)) auto; color: var(--kg-fg); } /* ========================================================================== Reveal-motor – fade-up (moduler) + gardin/curtain (rubriker) Guarden .kg-reveal sätts av en liten head-skript. Utan JS/guard visas allt. Attribut: data-reveal="up" → diskret fade-up data-reveal="curtain" → turkos svep (byggs om av kloagger.js) ========================================================================== */ .kg-reveal [data-reveal="up"] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } .kg-reveal [data-reveal="up"].kg-in { opacity: 1; transform: none; } /* Gardin */ .kg-reveal [data-reveal="curtain"] { opacity: 0; } .kg-reveal [data-reveal="curtain"].kg-ready { opacity: 1; } .kg-curtain { position: relative; overflow: hidden; } .kg-curtain__inner { display: block; opacity: 0; transition: opacity 0s .34s; } .kg-curtain::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--kg-turkos); transform: scaleX(0); transform-origin: left; } .kg-curtain.kg-in > .kg-curtain__inner { opacity: 1; } .kg-curtain.kg-in::after { animation: kg-sweep .8s cubic-bezier(.22, .61, .36, 1) forwards; } @keyframes kg-sweep { 0% { transform: scaleX(0); transform-origin: left; } 48% { transform: scaleX(1); transform-origin: left; } 52% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } } /* Avstängt i BB-editorn så innehåll inte döljs medan man bygger */ .fl-builder-edit [data-reveal] { opacity: 1 !important; transform: none !important; } .fl-builder-edit .kg-curtain__inner { opacity: 1 !important; } .fl-builder-edit .kg-curtain::after { display: none; } /* Respektera användarens rörelse-inställning */ @media (prefers-reduced-motion: reduce) { .kg-reveal [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; } .kg-curtain__inner { opacity: 1 !important; } .kg-curtain::after { display: none; } } /* ========================================================================== Knappar – hover/fokus + varianter (delat system, används av kloagger-button samt inline i header/hero/footer/CTA). ========================================================================== */ .kloagger-btn { transition: transform .16s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease; } .kloagger-btn:active { transform: translateY(1px); } .kloagger-btn:focus-visible { outline: 2px solid var(--kg-turkos); outline-offset: 3px; } .kloagger-btn--primary:hover { box-shadow: 0 0 40px rgba(47, 212, 198, .55); transform: translateY(-2px); } .kloagger-btn--ghost:hover { border-color: var(--kg-turkos); color: var(--kg-turkos); } /* Neon – outline som fylls */ .kbtn--neon { background: transparent; color: var(--kg-turkos); border-color: var(--kg-turkos); box-shadow: 0 0 18px rgba(47, 212, 198, .12); } .kbtn--neon:hover { background: var(--kg-turkos); color: var(--kg-turkos-ink); box-shadow: 0 0 34px rgba(47, 212, 198, .5); } /* Teknisk – hakparenteser som öppnar sig */ .kbtn--tech { background: transparent; color: var(--kg-fg); border-color: var(--kg-line); letter-spacing: .12em; } .kbtn--tech::before { content: "["; color: var(--kg-turkos); margin-right: 2px; transition: margin .18s ease; } .kbtn--tech::after { content: "]"; color: var(--kg-turkos); margin-left: 2px; transition: margin .18s ease; } .kbtn--tech:hover { border-color: var(--kg-turkos); } .kbtn--tech:hover::before { margin-right: 8px; } .kbtn--tech:hover::after { margin-left: 8px; } /* Pil – glidande pil */ .kbtn--arrow .arw { transition: transform .18s ease; } .kbtn--arrow:hover .arw { transform: translateX(5px); } /* Akut – pulserande turkos glöd */ .kbtn--akut { position: relative; } .kbtn--akut::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(47, 212, 198, .55); animation: kpulse 2s infinite; } @keyframes kpulse { 0% { box-shadow: 0 0 0 0 rgba(47, 212, 198, .5); } 70% { box-shadow: 0 0 0 14px rgba(47, 212, 198, 0); } 100% { box-shadow: 0 0 0 0 rgba(47, 212, 198, 0); } } /* Länk – turkos streck som växer (nollställer knapp-ramen) */ .kbtn--link { background: transparent; border: 0; padding: 6px 2px; border-radius: 0; color: var(--kg-fg); position: relative; } .kbtn--link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--kg-turkos); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } .kbtn--link:hover { color: var(--kg-turkos); } .kbtn--link:hover::after { transform: scaleX(1); } /* Ring – rund ikon-only-knapp */ .kbtn--ring { width: 60px; height: 60px; padding: 0; border-radius: 50%; background: transparent; color: var(--kg-turkos); border: 1.5px solid var(--kg-turkos); box-shadow: 0 0 22px rgba(47, 212, 198, .18); } .kbtn--ring:hover { background: var(--kg-turkos); color: var(--kg-turkos-ink); box-shadow: 0 0 34px rgba(47, 212, 198, .5); transform: translateY(-2px); } .kbtn--ring svg { width: 20px; height: 20px; } /* Inverterad – mörk knapp på turkos yta */ .kbtn--onTurkos { background: var(--kg-turkos-ink); color: var(--kg-turkos); } .kbtn--onTurkos:hover { background: #06312b; } /* Storlekar + fullbredd */ .kbtn--sm { padding: 10px 15px; font-size: 12px; } .kbtn--lg { padding: 18px 30px; font-size: 15px; } .kbtn--block { display: flex; width: 100%; justify-content: center; } /* Klass-alias: samma reveal via Advanced → Class i BB (kg-reveal-up / kg-reveal-curtain) */ .kg-reveal .kg-reveal-up { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1); will-change: opacity, transform; } .kg-reveal .kg-reveal-up.kg-in { opacity: 1; transform: none; } .kg-reveal .kg-reveal-curtain { opacity: 0; } .kg-reveal .kg-reveal-curtain.kg-ready { opacity: 1; } .fl-builder-edit .kg-reveal-up, .fl-builder-edit .kg-reveal-curtain { opacity: 1 !important; transform: none !important; } @media (prefers-reduced-motion: reduce) { .kg-reveal .kg-reveal-up, .kg-reveal .kg-reveal-curtain { opacity: 1 !important; transform: none !important; } }