/* ============================================================ GDPR-INFORMATIONSBANNER (fast, nedre kanten) ============================================================ */ #gp-gdpr-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 8000; background: #0a0a0a; border-top: 2px solid var(--gp-red, #cc0000); padding: 0.9rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } #gp-gdpr-banner p { margin: 0; font-size: 0.85rem; color: #aaa; } #gp-gdpr-banner a { color: #cc0000; text-decoration: underline; } #gp-gdpr-banner button { background: #cc0000; color: #fff; border: none; padding: 0.4rem 1.2rem; margin-right: 3rem; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; white-space: nowrap; flex-shrink: 0; } #gp-gdpr-banner button:hover { background: #990000; } /* Self-hostad Dancing Script – inga anrop till Googles servrar */ @font-face { font-family: 'Dancing Script'; src: url('../fonts/DancingScript-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } /* ============================================================ Get Pumped / Betongtransport – Huvudstilar Stöder mörkt (standard) och ljust tema via data-theme-attribut ============================================================ */ /* --- Mörkt tema – standard --- */ :root { --gp-red: #cc0000; --gp-red-dark: #990000; --gp-bg: #111111; /* Sidans huvudbakgrund */ --gp-surface: #1a1a1a; /* Kort, paneler */ --gp-surface-2: #161616; /* Partners-sektion */ --gp-surface-3: #1e1e1e; /* Knappar och inputs */ --gp-border: #2a2a2a; /* Subtila kanter */ --gp-text: #ffffff; --gp-text-muted: #aaaaaa; --gp-text-dark: #ffffff; /* Rubriker */ --gp-footer-bg: #0a0a0a; /* Bootstrap-override-variabler */ --gp-card-bg: #1a1a1a; --gp-card-border: #2a2a2a; } /* --- Ljust tema – aktiveras av data-theme="light" på --- */ [data-theme="light"] { --gp-bg: #ffffff; --gp-surface: #f5f5f5; --gp-surface-2: #e8e8e8; --gp-surface-3: #d0d0d0; --gp-border: #cccccc; --gp-text: #1a1a1a; --gp-text-muted: #666666; --gp-text-dark: #1a1a1a; --gp-footer-bg: #222222; --gp-card-bg: #ffffff; --gp-card-border: #dddddd; } /* ============================================================ RESET & GLOBAL STIL ============================================================ */ *, *::before, *::after { /* Industriell känsla – inga rundade hörn */ border-radius: 0 !important; } html { scroll-behavior: smooth; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background-color: var(--gp-bg); color: var(--gp-text); transition: background-color 0.3s, color 0.3s; } main { background-color: var(--gp-bg); } /* Bootstrap-klasser åsidosatta med tema-variabler */ .text-muted { color: var(--gp-text-muted) !important; } .card { background-color: var(--gp-card-bg) !important; border-color: var(--gp-card-border) !important; } h1, h2, h3, h4, h5, h6 { color: var(--gp-text-dark); } p { color: var(--gp-text-muted); } .gp-brand-red { color: var(--gp-red); } /* ============================================================ HAMBURGARMENY-KNAPP (fast, övre vänstra hörnet) ============================================================ */ #gp-hamburger { position: fixed; top: 20px; left: 20px; z-index: 9999; background: none; border: none; cursor: pointer; padding: 4px 8px 4px 4px; display: flex; flex-direction: row; align-items: center; gap: 10px; } .gp-hamburger-bars { display: flex; flex-direction: column; justify-content: space-between; width: 32px; height: 24px; flex-shrink: 0; } .gp-hamburger-label { color: var(--gp-red); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; transition: opacity 0.25s ease; } #gp-hamburger.open .gp-hamburger-label { opacity: 0; } /* Tre röda streck */ .gp-hamburger-bars span { display: block; width: 100%; height: 3px; background-color: var(--gp-red); transition: transform 0.35s ease, opacity 0.25s ease; position: relative; transform-origin: center; } /* ── X-animation när menyn är öppen ──────────────────────── */ #gp-hamburger.open .gp-hamburger-bars span:nth-child(1) { transform: translateY(10px) rotate(45deg); } #gp-hamburger.open .gp-hamburger-bars span:nth-child(2) { opacity: 0; transform: scaleX(0); } #gp-hamburger.open .gp-hamburger-bars span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); } /* ============================================================ TEMA-TOGGLE-KNAPP (fast, övre högra hörnet) ============================================================ */ #gp-theme-toggle { position: fixed; bottom: 24px; right: 24px; z-index: 9999; background-color: var(--gp-surface-3); border: 1px solid var(--gp-border); color: var(--gp-text); width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: background-color 0.2s, color 0.2s, border-color 0.2s; } #gp-theme-toggle:hover { background-color: var(--gp-red); border-color: var(--gp-red); color: #ffffff; } /* ============================================================ OVERLAY-MENY (täcker hela skärmen) ============================================================ */ #gp-overlay { /* Dold som standard */ position: fixed; inset: 0; /* top/right/bottom/left = 0 */ z-index: 9998; /* Under hamburger-knappen (9999) */ background-color: rgba(10, 10, 10, 0.95); display: flex; align-items: center; justify-content: center; /* Fade-in-animation – starttillstånd */ opacity: 0; pointer-events: none; /* Klick blockeras när stängd */ transition: opacity 0.35s ease; } /* Aktiv overlay – tonas in */ #gp-overlay.open { opacity: 1; pointer-events: all; } /* Inre container – centrerat innehåll */ .gp-overlay-inner { display: flex; flex-direction: column; align-items: center; gap: 0; /* Slide-in uppifrån */ transform: translateY(-24px); transition: transform 0.4s ease; } #gp-overlay.open .gp-overlay-inner { transform: translateY(0); } /* Stäng-knapp (×) uppe till höger i overlay */ .gp-overlay-close { position: absolute; top: 20px; right: 24px; background: none; border: none; color: #ffffff; font-size: 2.5rem; line-height: 1; cursor: pointer; opacity: 0.6; transition: opacity 0.15s, color 0.15s; } .gp-overlay-close:hover { opacity: 1; color: var(--gp-red); } /* Menyval – stor vit text, versaler, letter-spacing */ .gp-nav-link { font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; color: #ffffff; text-decoration: none; padding: 0.4rem 0; line-height: 1; position: relative; /* Underline-animation vid hover */ transition: color 0.2s; } .gp-nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background-color: var(--gp-red); transition: width 0.25s ease; } .gp-nav-link:hover { color: var(--gp-red); } .gp-nav-link:hover::after { width: 100%; } /* Röd horisontell separator-linje mellan menyvalen */ .gp-nav-sep { width: 60px; border: none; border-top: 2px solid var(--gp-red); margin: 0.6rem 0; opacity: 1; } /* ============================================================ HERO-SEKTION ============================================================ */ .gp-hero { position: relative; width: 100%; line-height: 0; } .gp-hero-img { width: 100%; height: auto; display: block; } /* Knappar ovanpå hero-bilden */ .gp-hero-overlay-btn { position: absolute; right: 1rem; background-color: var(--gp-surface-3); color: var(--gp-text); font-weight: 700; font-size: 0.85rem; text-decoration: none; padding: 1.0rem 1.4rem; border: 1px solid var(--gp-border); border-radius: 20px !important; white-space: nowrap; z-index: 10; transition: background-color 0.15s, color 0.15s; } .gp-hero-overlay-btn:hover { background-color: var(--gp-red); color: #ffffff; border-color: var(--gp-red); } .gp-hero-btn-top { top: 0.75rem; } .gp-hero-btn-bottom { bottom: 0.75rem; } /* ============================================================ TAGLINE-SEKTION – röd toppkant som separator mot hero ============================================================ */ .gp-tagline { background-color: var(--gp-bg); padding: 1.5rem 0; border-top: 3px solid var(--gp-red); border-bottom: 1px solid var(--gp-border); transition: background-color 0.3s; } /* Stor rubrik */ .gp-tagline p { font-size: clamp(1.2rem, 3vw, 1.85rem); font-weight: 900; font-style: italic; text-align: center; color: var(--gp-text); margin: 0; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.03em; } /* Brödtext under rubriken */ .gp-tagline__sub { font-size: 1rem !important; font-weight: 400 !important; font-style: normal !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--gp-text-muted) !important; margin-top: 0.6rem !important; } /* ============================================================ KATEGORI-STRIP ============================================================ */ .gp-category-strip { background-color: var(--gp-surface); padding: 0.75rem 0; border-bottom: 1px solid var(--gp-border); transition: background-color 0.3s; } /* Kategori-knappar: röd kant, versaler, letter-spacing */ .gp-cat-btn { display: inline-block; background-color: var(--gp-surface-3); border: 1px solid var(--gp-red); color: var(--gp-text); font-weight: 700; font-size: 0.8rem; padding: 0.5rem 1.4rem; text-decoration: none; white-space: nowrap; text-transform: uppercase; letter-spacing: 0.08em; transition: background-color 0.15s, color 0.15s; } .gp-cat-btn:hover { background-color: var(--gp-red); color: #ffffff; border-color: var(--gp-red); } /* ============================================================ SAMARBETSPARTNERS – tejp-band med rivna kanter ============================================================ */ .gp-partners { background-color: var(--gp-surface-2); width: 75%; margin: 2.5rem auto; padding: 1.6rem 2.5rem; transition: background-color 0.3s; /* Rivna/ojämna kanter */ clip-path: polygon( 2% 0%, 98% 0%, 100% 6%, 97% 13%, 100% 20%, 98% 28%, 100% 36%, 97% 43%, 100% 50%, 98% 57%, 100% 64%, 97% 71%, 100% 78%, 98% 85%, 100% 92%, 98% 100%, 2% 100%, 0% 94%, 3% 87%, 0% 80%, 2% 73%, 0% 66%, 3% 59%, 0% 52%, 2% 45%, 0% 38%, 3% 31%, 0% 24%, 2% 17%, 0% 8%, 2% 2% ); } /* Rubrik med röd understrykning */ .gp-partners-title { font-family: 'Dancing Script', cursive; font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; color: var(--gp-text); text-align: center; margin-bottom: 0.5rem; text-decoration: underline; text-decoration-color: var(--gp-red); text-underline-offset: 6px; } .gp-partners-desc { font-size: 1rem; font-weight: 400; color: var(--gp-text-muted); text-align: center; margin: 0.25rem 0 0.75rem; } .gp-partners-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; } .gp-partners-list li { font-size: 1.25rem; font-weight: 700; color: var(--gp-text); position: relative; padding-left: 1rem; } /* Röd punktmarkör */ .gp-partners-list li::before { content: '•'; position: absolute; left: 0; color: var(--gp-red); } /* ============================================================ KONTAKTKORT ============================================================ */ .gp-contact-card { background: var(--gp-surface); border: 1px solid var(--gp-border); padding: 2rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; transition: border-color 0.15s, background-color 0.3s; } .gp-contact-card:hover { border-color: var(--gp-red); } .gp-contact-icon { font-size: 3.5rem; color: var(--gp-red); margin-bottom: 0.5rem; } .gp-contact-name { font-size: 1.15rem; font-weight: 700; color: var(--gp-text); margin: 0; } .gp-contact-role { font-size: 0.875rem; color: var(--gp-text-muted); margin: 0 0 0.5rem; } .gp-contact-link { display: block; font-size: 0.9rem; color: var(--gp-text-muted); text-decoration: none; } .gp-contact-link:hover { color: var(--gp-red); text-decoration: underline; } /* ============================================================ INFORMATIONSKORT (startsidan) ============================================================ */ .gp-card { background-color: var(--gp-surface) !important; border: 1px solid var(--gp-border) !important; transition: border-color 0.15s, background-color 0.3s; } /* Röd topplinje på kortet */ .gp-card::before { content: ''; display: block; height: 3px; background-color: var(--gp-red); } .gp-card:hover { border-color: var(--gp-red) !important; } .gp-card .card-title { color: var(--gp-text) !important; font-weight: 700; text-transform: uppercase; font-size: 0.9rem; letter-spacing: 0.04em; } .gp-card .card-text { color: var(--gp-text-muted) !important; font-size: 0.9rem; } .gp-card .bi { font-size: 2.2rem; color: var(--gp-red); } .gp-service-card-link { text-decoration: none; display: block; height: 100%; } .gp-home-service-card { transition: transform 0.2s ease, border-color 0.2s ease; cursor: pointer; } .gp-service-card-link:hover .gp-home-service-card { transform: translateY(-4px); border-color: var(--gp-red) !important; } /* ============================================================ TJÄNSTESIDAN – FILMREMSA ============================================================ */ .gp-filmstrip { width: 100%; overflow: hidden; background: #111; border-bottom: 3px solid var(--gp-red); } .gp-filmstrip-track { display: flex; gap: 4px; animation: gp-scroll 40s linear infinite; width: max-content; } .gp-filmstrip-track:hover { animation-play-state: paused; } .gp-filmstrip-img { height: 220px; width: auto; object-fit: cover; flex-shrink: 0; } @keyframes gp-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ============================================================ TJÄNSTESIDAN – TEJPREMSOR (accordion) ============================================================ */ .gp-service-strip { margin-bottom: 0.75rem; } /* Rubrikknapp för varje tjänst */ .gp-service-header { width: 100%; display: flex; align-items: center; padding: 1rem 1.5rem; font-size: 1.1rem; font-weight: 700; color: var(--gp-text); background-color: var(--gp-surface-3); border: 1px solid var(--gp-border); border-left: 3px solid var(--gp-red); text-align: left; cursor: pointer; text-transform: uppercase; letter-spacing: 0.05em; clip-path: polygon( 0% 8%, 1% 0%, 99% 0%, 100% 6%, 100% 94%, 99% 100%, 1% 100%, 0% 92% ); transition: background-color 0.15s, color 0.15s; } .gp-service-header:hover, .gp-service-header:not(.collapsed) { background-color: var(--gp-red); border-color: var(--gp-red); color: #ffffff; } .gp-service-chevron { margin-left: auto; transition: transform 0.2s; } .gp-service-header:not(.collapsed) .gp-service-chevron { transform: rotate(180deg); } /* Expanderat innehåll */ .gp-service-body { padding: 1.25rem 1.5rem; background: var(--gp-surface); border-left: 3px solid var(--gp-red); color: var(--gp-text-muted); transition: background-color 0.3s; } .gp-service-body p, .gp-service-body li { color: var(--gp-text-muted); } .gp-service-body strong { color: var(--gp-text); } .gp-service-facts { margin: 0.75rem 0 0; padding-left: 1.25rem; } .gp-service-facts li { margin-bottom: 0.35rem; } /* ============================================================ TJÄNSTESIDAN – SIDOPANEL ============================================================ */ .gp-services-sidebar { position: sticky; top: 1.5rem; } .gp-btn-offert { background-color: var(--gp-surface-3); color: var(--gp-text); border: 1px solid var(--gp-red); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; transition: background-color 0.15s, color 0.15s; } .gp-btn-offert:hover { background-color: var(--gp-red); color: #ffffff; border-color: var(--gp-red); } .gp-btn-contact { background-color: var(--gp-surface-3); color: var(--gp-text); border: 1px solid var(--gp-border); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; transition: background-color 0.15s, color 0.15s; } .gp-btn-contact:hover { background-color: var(--gp-red); color: #ffffff; border-color: var(--gp-red); } /* Sticky note – behåller beige som kontrast mot båda teman */ .gp-sticky-note { background: #e8dfc0; padding: 1.25rem 1.5rem; box-shadow: 3px 4px 14px rgba(0,0,0,0.4); transform: rotate(-1.5deg); } .gp-sticky-title { font-family: 'Dancing Script', cursive; font-size: 1.4rem; font-weight: 700; color: #3a3a3a; margin-bottom: 0.4rem; } .gp-sticky-body { font-size: 0.9rem; color: #555; margin-bottom: 0.5rem; } .gp-sticky-link { font-size: 0.9rem; font-weight: 700; color: #3a3a3a; text-decoration: none; } .gp-sticky-link:hover { color: var(--gp-red); } /* ============================================================ KNAPPAR ============================================================ */ .btn-danger { background-color: var(--gp-red); border-color: var(--gp-red); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .btn-danger:hover, .btn-danger:focus { background-color: var(--gp-red-dark); border-color: var(--gp-red-dark); } /* ============================================================ SEKTIONSRUBRIKER med röd vänsterbård ============================================================ */ .section-title { position: relative; padding-left: 1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gp-text); } .section-title::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background-color: var(--gp-red); } /* ============================================================ OFFERT-FORMULÄR ============================================================ */ /* Sektionsrubrik med röd vänsterbård */ .gp-form-section { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--gp-text); padding-left: 0.75rem; border-left: 3px solid var(--gp-red); margin-bottom: 1rem; } /* Fält-wrapper */ .gp-form-group { margin-bottom: 1.1rem; } .gp-form-group label { display: block; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gp-text-muted); margin-bottom: 0.35rem; } /* Alla input- och textarea-fält */ .gp-form-group input, .gp-form-group textarea, .gp-form-group select { width: 100%; background-color: var(--gp-surface); border: 1px solid var(--gp-border); color: var(--gp-text); padding: 0.65rem 0.9rem; font-size: 0.95rem; transition: border-color 0.15s; appearance: none; } .gp-form-group input:focus, .gp-form-group textarea:focus, .gp-form-group select:focus { outline: none; border-color: var(--gp-red); background-color: var(--gp-surface-2); } /* Felmeddelande under fält */ .gp-form-error { display: block; font-size: 0.8rem; color: var(--gp-red); margin-top: 0.25rem; } /* Skicka-knapp */ .gp-form-submit { background-color: var(--gp-red); color: #ffffff; border: none; padding: 0.75rem 2rem; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: background-color 0.15s; } .gp-form-submit:hover { background-color: var(--gp-red-dark); } /* ============================================================ FOOTER ============================================================ */ .gp-footer { background-color: var(--gp-footer-bg); border-top: 3px solid var(--gp-red); transition: background-color 0.3s; } .gp-footer h5 { font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; color: #ffffff; } .gp-footer p, .gp-footer li { color: #888888; font-size: 0.9rem; } /* Footerlänkar – grå, röda vid hover */ .gp-footer-link { color: #888888; text-decoration: none; line-height: 2; transition: color 0.15s; } .gp-footer-link:hover { color: var(--gp-red); } .gp-footer hr { border-color: #333333 !important; } .gp-footer .bi { color: var(--gp-red); }