/* ========================================================================== Falu Markteknik — stilmall Temat styrs av klassen .theme-light på (sätts av assets/app.js). ========================================================================== */ /* --- Typsnitt (self-hostade, latin-subset — täcker å ä ö) ----------------- */ @font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500 900; font-display: swap; src: url('fonts/archivo-normal.woff2') format('woff2'); } @font-face { font-family: 'Archivo'; font-style: italic; font-weight: 700 800; font-display: swap; src: url('fonts/archivo-italic.woff2') format('woff2'); } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/instrument-sans-normal.woff2') format('woff2'); } /* --- Designtokens -------------------------------------------------------- */ :root { --bg: #14110D; --bg2: #1C1813; --bg3: #26201A; --line: rgba(255, 255, 255, .10); --line2: rgba(255, 255, 255, .20); --tx: #F3EEE6; --tx2: #B6ADA1; --tx3: #877E73; --brand: #F26A1B; --brand2: #FF8A45; --brandInk: #14110D; --shadow: 0 30px 60px -28px rgba(0, 0, 0, .7); --head: 'Archivo', system-ui, sans-serif; --body: 'Instrument Sans', system-ui, sans-serif; } /* Samma specificitet som :root men senare i filen — vinner när klassen sitter på . */ .theme-light { --bg: #F4F0E8; --bg2: #FFFFFF; --bg3: #EBE4D8; --line: rgba(20, 17, 13, .12); --line2: rgba(20, 17, 13, .22); --tx: #191510; --tx2: #5C544A; --tx3: #867C6F; --brand: #E85F14; --brand2: #F27A2E; --brandInk: #FFFFFF; --shadow: 0 30px 60px -30px rgba(70, 45, 20, .30); } /* --- Grund --------------------------------------------------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--tx); font-family: var(--body); overflow-x: clip; transition: background .45s ease, color .45s ease; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand2); } input, textarea, select, button { font-family: inherit; } input::placeholder, textarea::placeholder { color: var(--tx3); } ::selection { background: var(--brand); color: #fff; } img { display: block; max-width: 100%; } /* Loggan är enfärgad SVG — inverteras i mörkt läge. */ .logo-img { filter: brightness(0) invert(1); } .theme-light .logo-img { filter: brightness(0); } /* --- Byggstenar ---------------------------------------------------------- */ .wrap { max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } /* Orange etikett med streck före: "— MARKENTREPRENAD I DALARNA" */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--head); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--brand); } .eyebrow::before { content: ''; width: 34px; height: 2px; background: var(--brand); } .h1 { font-family: var(--head); font-weight: 800; font-size: clamp(40px, 6vw, 72px); line-height: 1; letter-spacing: -.025em; color: var(--tx); margin: 0; text-wrap: balance; } .h2 { font-family: var(--head); font-weight: 800; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.02; letter-spacing: -.02em; color: var(--tx); margin: 0; text-wrap: balance; } .lead { color: var(--tx2); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.65; margin: 22px 0 0; } /* Knappar */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; background: var(--brand); color: var(--brandInk); font-family: var(--head); font-weight: 700; font-size: 14px; border: 0; border-radius: 8px; cursor: pointer; transition: .2s; } .btn:hover { background: var(--brand2); color: var(--brandInk); transform: translateY(-1px); } .btn-lg { padding: 15px 26px; font-size: 16px; border-radius: 9px; } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 15px 26px; background: transparent; color: var(--tx); border: 1px solid var(--line2); border-radius: 9px; font-family: var(--head); font-weight: 700; font-size: 16px; transition: .2s; } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } /* Kort med ram — grunden för tjänste-, projekt- och kontaktkort */ .card { background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; } /* Textlänk som blir orange vid hover (foot, brödsmulor, listor) */ .tlink { color: var(--tx2); transition: color .2s; } .tlink:hover { color: var(--brand); } /* --- Sidhuvud ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .header-inner { height: 74px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .header-logo { display: flex; align-items: center; flex-shrink: 0; } .header-logo img { height: 26px; width: auto; } .nav-links { display: flex; align-items: center; gap: 34px; } .nav-links a { color: var(--tx); font-size: 15px; font-weight: 500; transition: color .2s; } .nav-links a:hover { color: var(--brand); } .nav-links a.is-active { color: var(--brand); font-weight: 600; } .header-right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .header-tel { color: var(--tx2); font-size: 14px; font-weight: 600; } .header-tel:hover { color: var(--brand); } .icon-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--line2); background: transparent; color: var(--tx); border-radius: 8px; cursor: pointer; transition: .2s; } .icon-btn:hover { border-color: var(--brand); color: var(--brand); } /* Sol/måne byts med temat */ .t-sun { display: inline-flex; } .t-moon { display: none; } .theme-light .t-sun { display: none; } .theme-light .t-moon { display: inline-flex; } /* --- Mobilmeny ----------------------------------------------------------- */ .menu-btn { display: none; } .ico-bars { display: inline-flex; } .ico-x { display: none; } .mobmenu { display: none; } .mobmenu { position: fixed; top: 74px; left: 0; right: 0; z-index: 55; background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px 24px 26px; box-shadow: var(--shadow); } .mobmenu a { display: block; padding: 15px 4px; color: var(--tx); font-family: var(--head); font-weight: 600; font-size: 18px; border-bottom: 1px solid var(--line); } .mobmenu a:hover { color: var(--brand); } /* Samma markering som i skrivbordsmenyn. Gäller inte .mob-call — den är en orange knapp, och orange text på orange botten blir osynlig. */ .mobmenu a.is-active { color: var(--brand); } .mobmenu .mob-call { display: flex; align-items: center; justify-content: center; margin-top: 18px; padding: 15px; background: var(--brand); color: var(--brandInk); font-weight: 700; font-size: 16px; border-radius: 9px; border-bottom: 0; } /* --- Sidfot -------------------------------------------------------------- */ .site-footer { background: var(--bg2); border-top: 1px solid var(--line); } .site-footer .wrap { padding-top: 64px; padding-bottom: 32px; } .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 40px; } .foot-logo { height: 26px; width: auto; margin-bottom: 20px; } .foot-text { color: var(--tx2); font-size: 15px; line-height: 1.6; max-width: 300px; margin: 0; } .foot-head { font-family: var(--head); font-weight: 700; font-size: 14px; color: var(--tx); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 16px; } .foot-col-links { display: flex; flex-direction: column; gap: 10px; } .foot-col-links a, .foot-col-links span { color: var(--tx2); font-size: 15px; } .foot-col-links a:hover { color: var(--brand); } .foot-bottom { border-top: 1px solid var(--line); margin-top: 48px; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; color: var(--tx3); font-size: 13px; } .foot-bottom a { color: var(--tx2); font-weight: 600; } .foot-bottom a:hover { color: var(--brand); } /* --- Inscrollningsanimation ---------------------------------------------- */ .js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.16, .8, .24, 1), transform .6s cubic-bezier(.2, .7, .2, 1); } .js [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .js [data-reveal] { opacity: 1; transform: none; transition: none; } } /* --- Sidhuvudsband (Om oss / Tjänster / Kontakt) -------------------------- */ .page-head { border-bottom: 1px solid var(--line); background: var(--bg2); } .page-head .wrap { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); } .crumbs { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--tx3); margin-bottom: 22px; } .crumbs a { color: var(--tx3); } .crumbs a:hover { color: var(--brand); } .crumbs .here { color: var(--tx2); } /* --- Kontaktsidan -------------------------------------------------------- */ .contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; } /* Startsidan har lika breda kolumner, kontaktsidan smalare vanster. */ .contact-grid.even { grid-template-columns: 1fr 1fr; } .contact-cards { display: flex; flex-direction: column; gap: 16px; } .contact-card { display: flex; align-items: center; gap: 16px; color: var(--tx); background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 20px; transition: border-color .2s; } a.contact-card:hover { border-color: var(--brand); color: var(--tx); } .contact-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 11px; background: color-mix(in srgb, var(--brand) 16%, transparent); display: flex; align-items: center; justify-content: center; color: var(--brand); } .contact-card .label { display: block; font-size: 13px; color: var(--tx3); } .contact-card .value { font-family: var(--head); font-weight: 700; font-size: 20px; } /* Faktauppgifter på kontaktsidan. Går inte att klicka på och behöver därför ingen kortram — etikett till vänster, värde till höger, tunn linje emellan. Kortformen sparas åt Ring och Mejla, så att en ruta betyder "gör något". */ .contact-facts { margin: 26px 0 0; display: flex; flex-direction: column; } .contact-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 14px 2px; border-top: 1px solid var(--line); } .contact-facts > div:last-child { border-bottom: 1px solid var(--line); } .contact-facts dt { font-size: 13px; color: var(--tx3); } .contact-facts dd { margin: 0; font-family: var(--head); font-weight: 700; font-size: 17px; color: var(--tx); text-align: right; } .socials { display: flex; gap: 10px; margin-top: 20px; } .social-btn { width: 44px; height: 44px; border: 1px solid var(--line2); border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--tx); transition: .2s; } .social-btn:hover { border-color: var(--brand); color: var(--brand); } .form-panel { background: var(--bg2); border: 1px solid var(--line); border-radius: 18px; padding: clamp(26px, 3vw, 44px); box-shadow: var(--shadow); } .form { display: flex; flex-direction: column; gap: 18px; } .field2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { display: flex; flex-direction: column; gap: 7px; } .field > span { font-size: 13px; font-weight: 600; color: var(--tx2); } .field input, .field textarea, .field select { padding: 14px; background: var(--bg); border: 1px solid var(--line2); border-radius: 9px; color: var(--tx); font-size: 15px; outline: none; transition: border-color .2s; } .field textarea { resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); } .form button[type='submit'] { margin-top: 4px; padding: 17px; background: var(--brand); color: var(--brandInk); border: 0; border-radius: 9px; font-family: var(--head); font-weight: 700; font-size: 16px; cursor: pointer; transition: .2s; } .form button[type='submit']:hover:not(:disabled) { background: var(--brand2); } .form button[type='submit']:disabled { opacity: .55; cursor: not-allowed; } .form-note { text-align: center; color: var(--tx3); font-size: 13px; margin: 2px 0 0; } .form-error { color: var(--brand); font-size: 14px; text-align: center; margin: 0; } .form-done { text-align: center; padding: 48px 12px; } .form-done .check { width: 68px; height: 68px; margin: 0 auto; border-radius: 50%; background: var(--brand); color: var(--brandInk); display: flex; align-items: center; justify-content: center; } .form-done h3 { font-family: var(--head); font-weight: 800; font-size: 26px; color: var(--tx); margin: 24px 0 0; } .form-done p { color: var(--tx2); font-size: 16px; line-height: 1.6; margin: 12px 0 0; } /* --- Responsivt ---------------------------------------------------------- */ @media (min-width: 861px) { .mobmenu { display: none !important; } } @media (max-width: 860px) { .nav-links { display: none !important; } .contact-grid, .contact-grid.even { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; } .menu-btn { display: inline-flex; } .menu-open .mobmenu { display: block; } .menu-open .ico-x { display: inline-flex; } .menu-open .ico-bars { display: none; } } @media (max-width: 560px) { .cta-btn { display: none !important; } .foot-grid { grid-template-columns: 1fr; } .field2 { grid-template-columns: 1fr; } } /* --- Bildband med text ovanpå (Om oss-huvud, områdesband, hero) ----------- */ /* Mörk gradient över bilden — texten är alltid vit här, oavsett tema. */ .imgband { position: relative; overflow: hidden; } .imgband > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .imgband .veil { position: absolute; inset: 0; } .imgband .wrap { position: relative; } .imgband .h1, .imgband .h2 { color: #fff; } .crumbs-light { color: rgba(255, 255, 255, .7); } .crumbs-light a { color: rgba(255, 255, 255, .7); } .crumbs-light a:hover { color: #fff; } .crumbs-light .here { color: #fff; } /* --- Om oss -------------------------------------------------------------- */ .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; } .media-round { border-radius: 18px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); } .media-round img { width: 100%; height: 100%; object-fit: cover; } /* Stående porträtt infällt över hörnet på en 4:3-bild. Ramen har sidans bakgrundsfärg så att bilderna inte flyter ihop. 3:4 är samma proportion som ett stående telefonfoto, så bilden fyller rutan utan att sträckas — men den zoomas, se nedan. */ .media-stack { position: relative; } .media-inset { position: absolute; right: -18px; bottom: -26px; width: 42%; max-width: 230px; /* Bilden är 3:4. Rutan är medvetet lägre än så — 15/16 skär bort översta 20 %, alltså backspegeln och det mesta av hyttaket. Se object-position nedan, som styr att bortfallet tas uppifrån och inte från båda hållen. */ aspect-ratio: 15/16; border-radius: 14px; overflow: hidden; border: 4px solid var(--bg); box-shadow: var(--shadow); } /* Bilden är 960x1280 (3:4) och rutan 15/16, så 20 % måste bort på höjden. `object-position: 50% 100%` förankrar underkanten, vilket gör att allt bortfall tas i överkanten — annars hade cover skurit lika mycket uppe som nere och tagit bort hans händer på ratten. Här satt tidigare en zoom (scale 2.07) för att förstora en person som stod långt bort i den förra bilden. Den behövs inte: den här bilden är redan ett porträtt. Byts den mot ett vidvinkelfoto igen behövs zoomen tillbaka. */ .media-inset img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; } @media (max-width: 860px) { .media-stack { margin-bottom: 36px; } .media-inset { width: 34%; right: 4px; } } @media (max-width: 560px) { .media-inset { width: 42%; } } .h2-md { font-family: var(--head); font-weight: 800; font-size: clamp(28px, 3.6vw, 44px); line-height: 1.05; letter-spacing: -.02em; color: var(--tx); margin: 0; text-wrap: balance; } .body-text { color: var(--tx2); font-size: 17px; line-height: 1.7; margin: 16px 0 0; } .body-text:first-of-type { margin-top: 20px; } .band { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .band .wrap { padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); } .val-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .val-card { background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 32px; } .val-icon { width: 52px; height: 52px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 16%, transparent); display: flex; align-items: center; justify-content: center; color: var(--brand); } .val-card h3 { font-family: var(--head); font-weight: 700; font-size: 21px; color: var(--tx); margin: 22px 0 0; } .val-card p { color: var(--tx2); font-size: 15px; line-height: 1.65; margin: 10px 0 0; } /* Manifestmening — ersatte sifferraderna 2026-09-02. Stor displaytypografi i stället för räknare, och inget påstående som behöver beläggas. Klasserna .stat-row, .stat och .mini-stats ligger kvar nedan så att bytet går att backa utan att skriva om något. */ .manifest { font-family: var(--head); font-weight: 800; font-size: clamp(30px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.02em; color: var(--tx); margin: 0; max-width: 20ch; } /* Används bara i textkolumnen på startsidan. Den stora varianten på Om oss togs bort igen 2026-09-02 — den blev för mycket på den sidan. */ .manifest-sm { font-size: clamp(23px, 2.6vw, 31px); max-width: 24ch; margin-top: 36px; } .stat-row { display: flex; gap: 24px; justify-content: space-between; text-align: center; flex-wrap: wrap; } .stat { flex: 1; min-width: 140px; } .stat-num { font-family: var(--head); font-weight: 800; font-size: clamp(40px, 5vw, 58px); color: var(--brand); line-height: 1; } .stat-label { color: var(--tx2); font-size: 15px; margin-top: 8px; } /* Områdesbandet: bilden sätter höjden, texten ligger centrerad ovanpå. */ .area-band { border-top: 1px solid var(--line); } .area-band > img { position: static; width: 100%; height: clamp(340px, 42vw, 480px); object-fit: cover; /* Bilden är 4:3 men bandet är brett och lågt, så på desktop beskärs den vertikalt. Centrerat hamnade lastbilens hytt utanför överkanten — 35 % flyttar beskärningen uppåt i bilden så att hela ekipaget syns. På mobil är bandet högre än den skalade bilden, då beskärs den i stället horisontellt och det här värdet får ingen effekt. */ object-position: center 35%; } .area-band .overlay-center { position: absolute; inset: 0; display: flex; align-items: center; } .area-band .overlay-center > div { max-width: 1280px; margin: 0 auto; padding: 0 24px; width: 100%; } .area-band p { color: rgba(255, 255, 255, .85); font-size: 17px; line-height: 1.6; margin: 18px 0 0; } /* Avslutande uppmaningsband */ .cta-band { background: var(--bg2); border-top: 1px solid var(--line); } .cta-band .wrap { padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(56px, 7vw, 88px); display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; } .cta-band p { color: var(--tx2); font-size: 18px; margin: 14px 0 0; } .cta-btns { display: flex; gap: 14px; flex-wrap: wrap; } .btn-xl { padding: 16px 30px; font-size: 16px; gap: 10px; } .btn-xl:hover { transform: translateY(-2px); } .btn-ghost-xl { padding: 16px 28px; gap: 10px; border-radius: 8px; } /* --- Responsivt, sidspecifikt -------------------------------------------- */ @media (max-width: 1024px) { .val-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .grid2 { grid-template-columns: 1fr; } .val-grid { grid-template-columns: 1fr; } } /* --- Tjänstesidan -------------------------------------------------------- */ .svc-rows { display: flex; flex-direction: column; gap: clamp(56px, 8vw, 100px); padding-top: clamp(56px, 8vw, 104px); padding-bottom: clamp(56px, 8vw, 104px); } .svc-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; scroll-margin-top: 90px; } .imgcol { border-radius: 16px; overflow: hidden; aspect-ratio: 4/3; box-shadow: var(--shadow); } .imgcol img { width: 100%; height: 100%; object-fit: cover; } .svc-row h2 { font-family: var(--head); font-weight: 800; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.02em; color: var(--tx); margin: 8px 0 0; } .svc-row > div > p { color: var(--tx2); font-size: 17px; line-height: 1.7; margin: 16px 0 0; } .svc-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; } .svc-list div { display: flex; align-items: center; gap: 10px; color: var(--tx); font-size: 15px; } @media (max-width: 860px) { .svc-row { grid-template-columns: 1fr; } .svc-row .imgcol { order: -1; } } /* ========================================================================== Startsidan ========================================================================== */ /* Hero-texten tonar upp i tre steg vid sidladdning. */ @keyframes fu { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } } .fu { animation: fu .9s cubic-bezier(.2, .7, .2, 1) both; } .fu2 { animation: fu .9s .12s cubic-bezier(.2, .7, .2, 1) both; } .fu3 { animation: fu .9s .24s cubic-bezier(.2, .7, .2, 1) both; } @media (prefers-reduced-motion: reduce) { .fu, .fu2, .fu3 { animation: none; } } .hero { position: relative; min-height: calc(100vh - 74px); display: flex; align-items: flex-end; overflow: hidden; } .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero .veil { position: absolute; inset: 0; } .hero .wrap { position: relative; padding-bottom: 72px; width: 100%; } .hero .eyebrow { color: #fff; } .hero-title { font-family: var(--head); font-weight: 800; font-size: clamp(44px, 7vw, 88px); line-height: .98; letter-spacing: -.025em; color: #fff; margin: 0; text-wrap: balance; } .hero-lead { max-width: 560px; margin: 26px 0 0; color: rgba(255, 255, 255, .86); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.6; } .hero-btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; } .btn-glass { display: inline-flex; align-items: center; gap: 10px; padding: 16px 28px; background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .3); font-family: var(--head); font-weight: 700; font-size: 16px; border-radius: 8px; backdrop-filter: blur(6px); transition: .2s; } .btn-glass:hover { background: rgba(255, 255, 255, .16); color: #fff; } /* Förtroendeband under hero */ .trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg2); } .trust-strip .wrap { padding-top: 26px; padding-bottom: 26px; display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: center; justify-content: space-between; } .trust-strip .wrap > div { display: flex; align-items: center; gap: 12px; color: var(--tx2); font-size: 15px; font-weight: 500; } /* Sektion med rubrik till vänster och brödtext till höger */ .sec { padding-top: clamp(72px, 9vw, 120px); padding-bottom: clamp(72px, 9vw, 120px); scroll-margin-top: 80px; } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; margin-bottom: 52px; } .sec-head > div { max-width: 640px; } .sec-head > p { max-width: 380px; color: var(--tx2); font-size: 17px; line-height: 1.65; margin: 0; } /* Understruken textlänk med orange linje */ .link-rule { display: inline-flex; align-items: center; gap: 8px; color: var(--tx); font-family: var(--head); font-weight: 700; font-size: 15px; border-bottom: 2px solid var(--brand); padding-bottom: 4px; transition: color .2s; } .link-rule:hover { color: var(--brand); } /* Tjänstekort */ .svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .svc-card { display: block; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; transition: .25s; color: inherit; } .svc-card:hover { transform: translateY(-5px); border-color: var(--brand); color: inherit; } .svc-card .thumb { height: 200px; overflow: hidden; position: relative; } .svc-card .thumb img { width: 100%; height: 100%; object-fit: cover; } .svc-card .body { padding: 26px; } .svc-card .title { font-family: var(--head); font-weight: 700; font-size: 20px; color: var(--tx); } .svc-card p { color: var(--tx2); font-size: 15px; line-height: 1.6; margin: 10px 0 0; } /* Projektgalleri — ett stort kort överst, tre mindre under */ .proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .proj-fig { margin: 0; position: relative; border-radius: 16px; overflow: hidden; height: 200px; } .proj-fig.featured { margin: 0 0 16px; height: 340px; } .proj-fig img { width: 100%; height: 100%; object-fit: cover; } .proj-fig figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; background: linear-gradient(transparent, rgba(20, 17, 13, .85)); color: #fff; } .proj-fig.featured figcaption { padding: 24px; } .proj-fig .p-title { font-family: var(--head); font-weight: 700; font-size: 17px; } .proj-fig.featured .p-title { font-size: 22px; } .proj-fig .p-loc { opacity: .8; font-size: 13px; margin-top: 2px; } .proj-fig.featured .p-loc { font-size: 14px; margin-top: 4px; } /* Om oss-blocket på startsidan */ .mini-stats { display: flex; gap: 36px; margin-top: 34px; flex-wrap: wrap; } .mini-stats .num { font-family: var(--head); font-weight: 800; font-size: 38px; color: var(--brand); line-height: 1; } .mini-stats .lbl { color: var(--tx2); font-size: 14px; margin-top: 6px; } /* Bildband som flyter i flödet (Dalarna-avdelaren) */ .imgband-flow > img { position: static; width: 100%; object-fit: cover; } .imgband-flow .overlay-center { position: absolute; inset: 0; display: flex; align-items: center; } .imgband-flow .overlay-center > div { max-width: 1280px; margin: 0 auto; padding: 0 24px; width: 100%; } .imgband-flow p { color: rgba(255, 255, 255, .85); font-size: 18px; line-height: 1.6; margin: 20px 0 0; } /* Processteg */ .step-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } .step-card { padding: 30px 26px; background: var(--bg2); border: 1px solid var(--line); border-radius: 16px; position: relative; } .step-card .num { font-family: var(--head); font-weight: 800; font-size: 44px; color: var(--brand); line-height: 1; opacity: .9; } .step-card .title { font-family: var(--head); font-weight: 700; font-size: 19px; color: var(--tx); margin-top: 18px; } .step-card p { color: var(--tx2); font-size: 15px; line-height: 1.6; margin: 10px 0 0; } /* Kundomdömen */ .tst-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .tst-card { margin: 0; background: var(--bg); border: 1px solid var(--line); border-radius: 16px; padding: 32px; display: flex; flex-direction: column; } .tst-card .stars { color: var(--brand); font-size: 18px; letter-spacing: 2px; } .tst-card blockquote { margin: 18px 0 0; color: var(--tx); font-size: 17px; line-height: 1.6; flex: 1; } .tst-card figcaption { margin-top: 24px; display: flex; align-items: center; gap: 12px; } .tst-card .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--brand); color: var(--brandInk); display: flex; align-items: center; justify-content: center; font-family: var(--head); font-weight: 800; font-size: 15px; } .tst-card .who { font-weight: 600; color: var(--tx); font-size: 15px; } .tst-card .role { color: var(--tx3); font-size: 13px; } /* Kontaktblocket på startsidan — smalare fält än på kontaktsidan */ .contact-inline { display: flex; flex-direction: column; gap: 18px; margin-top: 38px; } .contact-inline a { display: flex; align-items: center; gap: 16px; color: var(--tx); transition: color .2s; } .contact-inline a:hover { color: var(--brand); } .contact-inline .ico { width: 46px; height: 46px; flex-shrink: 0; border-radius: 10px; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; color: var(--brand); } .contact-inline .label { display: block; font-size: 13px; color: var(--tx3); } .contact-inline .value { font-family: var(--head); font-weight: 700; font-size: 19px; } .form-panel-sm { padding: clamp(26px, 3vw, 40px); } .form-compact { gap: 16px; } .form-compact .field2 { gap: 16px; } .form-compact .field input, .form-compact .field textarea, .form-compact .field select { padding: 13px 14px; } .form-compact button[type="submit"] { padding: 16px; } .form-done-sm { padding: 40px 12px; } .form-done-sm .check { width: 64px; height: 64px; } .form-done-sm h3 { font-size: 24px; margin-top: 22px; } /* --- Responsivt, startsidan --------------------------------------------- */ @media (max-width: 1024px) { .svc-grid { grid-template-columns: 1fr 1fr; } .step-grid { grid-template-columns: 1fr 1fr; } .proj-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .svc-grid { grid-template-columns: 1fr; } .step-grid { grid-template-columns: 1fr; } .proj-grid { grid-template-columns: 1fr; } .tst-grid { grid-template-columns: 1fr; } .hero-title { font-size: clamp(38px, 11vw, 56px); } section { scroll-margin-top: 70px; } } /* Sociala ikoner i startsidans sidfot — mindre än på kontaktsidan. */ .socials-sm { display: flex; gap: 10px; margin-top: 6px; } .socials-sm .social-btn { width: 38px; height: 38px; border-radius: 9px; } /* --- Pilen i rullgardinsmenyn ------------------------------------------- */ /* Webbläsarens egen pil sitter ~4 px från kanten medan texten har 14 px, vilket ser skevt ut. Vi ritar en egen och lägger den på samma avstånd som texten. Två varianter eftersom en data-URI inte kan läsa CSS-variabler. */ .field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23F3EEE6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 12px; } .theme-light .field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23191510' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } /* Plats åt pilen så att lång text inte hamnar under den. */ .field select, .form-compact .field select { padding-right: 38px; } /* Rullgardinen räknar ut line-height:normal 1 px högre än textfälten vid samma typsnitt och storlek, så den blev aningen högre än fälten bredvid. Låst till samma radhöjd som fälten får av sitt normalvärde (15 px text → 19 px rad). */ .field select { line-height: 19px; } /* Honeypot mot spam. Fältet ska vara omöjligt att träffa för en människa men finnas i DOM:en för en robot. display:none undviks medvetet — enklare bottar hoppar över dolda fält, men fyller i det som ligger utanför skärmen. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }