@charset "UTF-8"; /* ========================================================================== DILTON KYLA AB — Custom CSS för GoHighLevel Survey Matchar kortdesignen på QR-landningssidan: vitt kort, cirkelikon per steg, stegräknare, versal rubrik, ikonrader som svarsalternativ, röd nästa-knapp. Anpassad för surveyn "Survey - QR" med fyra steg. Klistra in i: Survey → Styles → Custom CSS ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700&family=Inter:wght@400;500;600;700&display=swap"); :root { --d-blue: #237bb8; --d-blue-d: #1b6293; --d-red: #cb232e; --d-red-d: #a81d26; --d-tint: #eaf3f9; --d-ink: #132833; --d-body: #4c6472; --d-muted: #7b909c; --d-line: #e2e9ee; --d-field: #f6f9fb; --d-field-line: #e6eef4; } /* ---------- Typsnitt över hela formuläret ---------- */ #_builder-form, #_builder-form *, .ghl-footer, .ghl-footer * { font-family: "Inter", sans-serif !important; } /* ========================================================================== SIDBAKGRUND — inbäddad i landningssidan, så kortet ska inte ligga på en egen tonad platta med marginaler runt om. ========================================================================== */ html, body, .ghl-body, #form-builder, .hl_form-builder--main { background: transparent !important; } .hl_form-builder--main { margin: 0 !important; padding: 0 !important; } /* ========================================================================== KORTET ========================================================================== */ .ghl-form-wrap { background: #ffffff !important; border: 1px solid var(--d-line) !important; border-radius: 20px !important; box-shadow: 0 18px 40px -18px rgba(20, 74, 112, 0.32), 0 2px 8px -3px rgba(20, 74, 112, 0.1) !important; overflow: hidden !important; /* Fyller iframens bredd istället för att centreras som ett smalt kort med tomrum på sidorna. Rundade hörn behålls. */ max-width: none !important; width: 100% !important; margin: 0 !important; border-radius: 20px !important; } #_builder-form, .ghl-form-wrap > form { max-width: none !important; width: 100% !important; } #_builder-form { background: #ffffff !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; padding: 26px 22px 8px !important; margin-bottom: 0 !important; } /* ========================================================================== STEGHUVUD — cirkelikon + "Steg X / 4" + versal rubrik Cirkelikonen ritas på .form-field-container::before, stegräknaren på .form-builder--item::before, och själva frågan är .field-label. ========================================================================== */ /* Cirkeln (ikonen sätts per slide längre ned) */ #_builder-form .form-field-container::before { content: ""; display: block; width: 54px; height: 54px; border-radius: 50%; background-color: var(--d-tint); border: 1px solid #d3e4f1; background-repeat: no-repeat; background-position: center; background-size: 25px 25px; margin-bottom: 14px; } /* Stegräknaren */ #_builder-form .form-builder--item::before { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--d-muted); margin-bottom: 4px; } /* Frågan */ #_builder-form#_builder-form .field-label, #_builder-form#_builder-form label.label-alignment { display: block !important; font-family: "Sora", "Inter", sans-serif !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.16 !important; letter-spacing: -0.01em !important; text-transform: uppercase !important; color: var(--d-ink) !important; margin-bottom: 18px !important; } /* Dölj GHL:s tomma beskrivningslabel (finns på radiofrågan) */ #_builder-form label.item-description:empty { display: none !important; } /* Dölj den röda obligatorisk-asterisken */ #_builder-form .field-label > span, #_builder-form label.label-alignment > span { display: none !important; } /* ========================================================================== SVARSALTERNATIV — ikonrader Radioknappen läggs osynlig ovanpå hela raden, labeln blir själva raden. Ikonen ritas med ::before, förklaringstexten med ::after. ========================================================================== */ #_builder-form .option-radio { margin-bottom: 10px !important; width: 100% !important; } #_builder-form .option-radio:last-child { margin-bottom: 0 !important; } #_builder-form .standard-radio-container { position: relative; } #_builder-form input[type=radio] { position: absolute !important; opacity: 0 !important; width: 100% !important; height: 100% !important; top: 0; left: 0; margin: 0 !important; cursor: pointer; z-index: 2; } #_builder-form#_builder-form .standard-radio-container label { position: relative; display: block !important; width: 100% !important; margin: 0 !important; padding: 15px 16px 15px 52px !important; background: var(--d-field) !important; border: 1.5px solid var(--d-field-line) !important; border-radius: 13px !important; font-family: "Sora", "Inter", sans-serif !important; font-size: 15.5px !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -0.012em; color: var(--d-ink) !important; text-align: left !important; cursor: pointer; transition: border-color 0.14s ease, background 0.14s ease; } /* ikonrutan */ #_builder-form#_builder-form .standard-radio-container label::before { content: ""; position: absolute; left: 16px; top: 15px; width: 22px; height: 22px; background-repeat: no-repeat; background-position: center; background-size: 21px 21px; } /* förklaringsrad under rubriken */ #_builder-form#_builder-form .standard-radio-container label::after { display: block; font-family: "Inter", sans-serif; font-size: 13px; font-weight: 400; line-height: 1.45; color: var(--d-muted); margin-top: 3px; } #_builder-form#_builder-form input[type=radio]:hover + label { border-color: #cbd9e3 !important; } #_builder-form#_builder-form input[type=radio]:checked + label { border-color: var(--d-red) !important; background: #fdf3f3 !important; } /* ========================================================================== TEXTFÄLT ========================================================================== */ #_builder-form#_builder-form .form-builder--item input[type=text][class=form-control], #_builder-form#_builder-form input[type=tel], #_builder-form#_builder-form input[type=email] { background-color: var(--d-field) !important; color: var(--d-ink) !important; border: 1.5px solid var(--d-field-line) !important; border-radius: 11px !important; padding: 13px 14px !important; font-size: 16px !important; font-weight: 400 !important; box-shadow: none !important; height: 50px !important; } #_builder-form#_builder-form .form-builder--item input[type=text][class=form-control]:focus, #_builder-form#_builder-form input[type=tel]:focus, #_builder-form#_builder-form input[type=email]:focus { border-color: var(--d-blue) !important; background-color: #ffffff !important; outline: none !important; } #_builder-form ::placeholder { color: #9dabb6 !important; font-size: 15px !important; font-weight: 400 !important; } #_builder-form .input-icon { color: var(--d-muted) !important; } /* e-postfältets ikon skjuter in texten */ #_builder-form input#email { padding-left: 40px !important; } /* ========================================================================== PROGRESSBAR — tunn röd linje istället för GHL:s blå ========================================================================== */ .progress-outer { position: static !important; top: auto !important; background: var(--d-line) !important; height: 4px !important; line-height: 4px !important; border-radius: 4px !important; box-shadow: none !important; overflow: hidden !important; margin: 0 auto 18px !important; padding: 0 !important; width: calc(100% - 44px) !important; font-size: 0 !important; } .progress-inner, .progress-outer [style*="1C8AF6"], .ghl-footer [style*="1C8AF6"] { background-color: var(--d-red) !important; box-shadow: none !important; height: 100% !important; padding: 0 !important; font-size: 0 !important; } /* ========================================================================== FOOTER — tillbaka-pil + röd primärknapp Stylas efter position, inte klassnamn, så att Skicka-knappen på sista steget får samma utseende som Nästa. ========================================================================== */ .ghl-footer { background: #ffffff !important; box-shadow: none !important; border: none !important; border-radius: 0 0 20px 20px !important; height: auto !important; padding: 4px 22px 22px !important; } .ghl-footer-buttons { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; height: auto !important; width: 100% !important; gap: 10px !important; flex-wrap: nowrap !important; } .ghl-btn-placeholder[aria-hidden=true] { display: none !important; } /* Stegräknaren i footern göms helt — kortet visar redan "Steg X / 4" */ .ghl-footer .progress-outer, .ghl-footer [class*=progress], .ghl-footer-buttons > [class*=progress], .ghl-footer [class*=step-text], .ghl-footer [class*=StepText] { display: none !important; } .ghl-btn-placeholder, .ghl-btn-placeholder[aria-hidden=true] { display: none !important; } /* En inaktiv tillbaka-knapp (steg 1 har inget att gå tillbaka till) döljs helt istället för att stå kvar osynlig och äta 46 px av bredden. */ .ghl-footer-buttons [aria-disabled=true][aria-label=Tillbaka], .ghl-footer-buttons [aria-disabled=true][aria-label=Back], .ghl-footer-buttons .ghl-footer-back[aria-disabled=true], .ghl-footer-buttons [aria-label=Tillbaka][disabled], .ghl-footer-buttons .ghl-footer-back[disabled], .ghl-footer-buttons [style*="opacity: 0;"], .ghl-footer-buttons [style*="opacity:0;"] { display: none !important; width: 0 !important; min-width: 0 !important; flex: 0 0 0 !important; margin: 0 !important; } /* Allt i knappraden som INTE är en knapp tas bort — platshållare, stegräknare och andra element GHL stoppar in. Det är sådana som annars äter upp bredden så att Nästa-knappen inte når kanten. */ .ghl-footer-buttons > *:not([role=button]):not(.ghl-btn) { display: none !important; width: 0 !important; flex: 0 0 0 !important; } /* -------------------------------------------------------------------------- POSITIONSREGLER (som tidigare): första knappen = tillbaka-pil, sista knappen = röd primärknapp i full bredd. -------------------------------------------------------------------------- */ .ghl-footer-buttons > *:first-child:not(:only-child) { flex: 0 0 auto !important; width: 46px !important; min-width: 46px !important; height: 50px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: var(--d-field) !important; border: 1.5px solid var(--d-field-line) !important; border-radius: 12px !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; cursor: pointer; } .ghl-footer-buttons > *:first-child:not(:only-child) span { display: none !important; } .ghl-footer-buttons > *:first-child:not(:only-child) svg, .ghl-footer-buttons > *:first-child:not(:only-child) svg path { stroke: var(--d-ink) !important; color: var(--d-ink) !important; fill: none !important; } .ghl-footer-buttons > *:last-child { background: var(--d-red) !important; border-radius: 12px !important; height: 50px !important; width: auto !important; flex: 1 1 0% !important; min-width: 0 !important; font-size: 16px !important; font-weight: 700 !important; color: #ffffff !important; box-shadow: 0 8px 18px -7px rgba(203, 35, 46, 0.6) !important; padding: 0 20px !important; margin: 0 !important; opacity: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-align: center !important; transition: background 0.15s ease, transform 0.12s ease; } .ghl-footer-buttons > *:last-child:hover { background: var(--d-red-d) !important; } .ghl-footer-buttons > *:last-child:active { transform: scale(0.985); } .ghl-footer-buttons > *:last-child span { color: #ffffff !important; white-space: nowrap !important; display: inline !important; } .ghl-footer-buttons > *:last-child svg { stroke: #ffffff !important; flex-shrink: 0 !important; } /* -------------------------------------------------------------------------- SÄKERHETSNÄT: om GHL lägger in fler element i knappraden och positionerna förskjuts, tvingar dessa regler ändå rätt utseende. Ligger sist så att de vinner över positionsreglerna ovan. -------------------------------------------------------------------------- */ .ghl-footer-buttons .ghl-footer-next, .ghl-footer-buttons .ghl-footer-submit, .ghl-footer-buttons [aria-label=Nästa], .ghl-footer-buttons [aria-label=Skicka], .ghl-footer-buttons [aria-label=Submit] { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 50px !important; background: var(--d-red) !important; border: none !important; border-radius: 12px !important; color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; padding: 0 20px !important; box-shadow: 0 8px 18px -7px rgba(203, 35, 46, 0.6) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } .ghl-footer-buttons .ghl-footer-next span, .ghl-footer-buttons .ghl-footer-submit span, .ghl-footer-buttons [aria-label=Nästa] span, .ghl-footer-buttons [aria-label=Skicka] span, .ghl-footer-buttons [aria-label=Submit] span { display: inline !important; color: #ffffff !important; } .ghl-footer-buttons .ghl-footer-next svg, .ghl-footer-buttons .ghl-footer-submit svg, .ghl-footer-buttons [aria-label=Nästa] svg, .ghl-footer-buttons [aria-label=Skicka] svg { stroke: #ffffff !important; display: inline-block !important; } .ghl-footer-buttons .ghl-footer-back, .ghl-footer-buttons [aria-label=Tillbaka], .ghl-footer-buttons [aria-label=Back] { flex: 0 0 auto !important; width: 46px !important; min-width: 46px !important; background: var(--d-field) !important; border: 1.5px solid var(--d-field-line) !important; box-shadow: none !important; padding: 0 !important; } .ghl-footer-buttons .ghl-footer-back span, .ghl-footer-buttons [aria-label=Tillbaka] span, .ghl-footer-buttons [aria-label=Back] span { display: none !important; } .ghl-footer-buttons .ghl-footer-back svg, .ghl-footer-buttons .ghl-footer-back svg path, .ghl-footer-buttons [aria-label=Tillbaka] svg, .ghl-footer-buttons [aria-label=Tillbaka] svg path, .ghl-footer-buttons [aria-label=Back] svg, .ghl-footer-buttons [aria-label=Back] svg path { stroke: var(--d-ink) !important; color: var(--d-ink) !important; fill: none !important; } /* ========================================================================== PER SLIDE — stegräknare + cirkelikon Surveyn har fyra steg: ärende, namn, telefon, e-post. ========================================================================== */ /* Slide 1 — Vad kan vi hjälpa dig med? */ .slide-no-1 .form-builder--item::before { content: "Steg 1 / 4"; } .slide-no-1 .form-field-container::before { background-image: url("data:image/svg+xml;utf8,"); } /* Slide 2 — För- och efternamn */ .slide-no-2 .form-builder--item::before { content: "Steg 2 / 4"; } .slide-no-2 .form-field-container::before { background-image: url("data:image/svg+xml;utf8,"); } /* Slide 3 — Telefonnummer */ .slide-no-3 .form-builder--item::before { content: "Steg 3 / 4"; } .slide-no-3 .form-field-container::before { background-image: url("data:image/svg+xml;utf8,"); } /* Slide 4 — E-post */ .slide-no-4 .form-builder--item::before { content: "Steg 4 / 4"; } .slide-no-4 .form-field-container::before { background-image: url("data:image/svg+xml;utf8,"); } /* ========================================================================== SVARSALTERNATIV PÅ STEG 1 — ikon + förklaringsrad Väljs på value-attributet, så de följer med även om GHL byter id. ========================================================================== */ /* Standardikon för alternativ utan egen regel. Ligger först så att de specifika reglerna nedan vinner. */ #_builder-form input[type=radio] + label::before { background-image: url("data:image/svg+xml;utf8,"); } /* Ny luftvärmepump — inomhusdel med luftflöde */ #_builder-form input[type=radio][value="Ny luftvärmepump"] + label::before { background-image: url("data:image/svg+xml;utf8,"); } #_builder-form input[type=radio][value="Ny luftvärmepump"] + label::after { content: "Installation från 12 995 kr, inklusive montering."; } /* Service & reparation — skiftnyckel */ #_builder-form input[type=radio][value="Service & reparation"] + label::before { background-image: url("data:image/svg+xml;utf8,"); } #_builder-form input[type=radio][value="Service & reparation"] + label::after { content: "Just nu halva priset på komplett service."; } /* Transportkyla — lastbil */ #_builder-form input[type=radio][value=Transportkyla] + label::before { background-image: url("data:image/svg+xml;utf8,"); } #_builder-form input[type=radio][value=Transportkyla] + label::after { content: "Kylbil, frysbil eller kylrum."; } /* ========================================================================== MOBIL GHL har egna footer-inställningar för mobil. I den här surveyn står de på "onlyArrow" med progressbar påslagen, vilket ger en liten pilknapp och en stegräknare istället för den breda Nästa-knappen. Reglerna nedan tvingar tillbaka desktop-utseendet. (Går även att ändra i Survey → Styles → Mobile Footer, men då behövs inte det här.) ========================================================================== */ @media screen and (max-width: 767px) { #_builder-form { padding: 22px 18px 8px !important; } .ghl-footer { padding: 4px 18px 18px !important; } #_builder-form#_builder-form .field-label, #_builder-form#_builder-form label.label-alignment { font-size: 19px !important; } /* Stegräknaren i mobilfootern bort */ .ghl-footer [class*=progress], .ghl-footer-buttons [class*=progress], .ghl-footer [class*=step] { display: none !important; } /* Primärknappen tar hela bredden, precis som på desktop */ .ghl-footer-buttons > *:last-child, .ghl-footer-buttons .ghl-footer-next, .ghl-footer-buttons .ghl-footer-submit, .ghl-footer-buttons [aria-label=Nästa], .ghl-footer-buttons [aria-label=Skicka], .ghl-footer-buttons [aria-label=Submit] { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; height: 50px !important; background: var(--d-red) !important; border-radius: 12px !important; padding: 0 20px !important; font-size: 16px !important; font-weight: 700 !important; color: #ffffff !important; box-shadow: 0 8px 18px -7px rgba(203, 35, 46, 0.6) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } /* I mobilläget renderar GHL ingen text i knappen — vi skriver dit den. aria-label avgör om det står Nästa eller Skicka. */ .ghl-footer-buttons [aria-label=Nästa]::after { content: "Nästa"; color: #ffffff; font-size: 16px; font-weight: 700; order: -1; } .ghl-footer-buttons [aria-label=Skicka]::after, .ghl-footer-buttons [aria-label=Submit]::after { content: "Skicka"; color: #ffffff; font-size: 16px; font-weight: 700; order: -1; } /* Har GHL redan renderat texten döljs vår egen så den inte dubbleras */ .ghl-footer-buttons [aria-label=Nästa]:has(span)::after, .ghl-footer-buttons [aria-label=Skicka]:has(span)::after, .ghl-footer-buttons [aria-label=Submit]:has(span)::after { content: none; } /* Tillbaka-pilen behåller sin lilla ruta */ .ghl-footer-buttons .ghl-footer-back, .ghl-footer-buttons [aria-label=Tillbaka], .ghl-footer-buttons [aria-label=Back] { flex: 0 0 auto !important; width: 46px !important; min-width: 46px !important; background: var(--d-field) !important; border: 1.5px solid var(--d-field-line) !important; box-shadow: none !important; } .ghl-footer-buttons .ghl-footer-back::after, .ghl-footer-buttons [aria-label=Tillbaka]::after, .ghl-footer-buttons [aria-label=Back]::after { content: none !important; } }