SynligWeb – Delt stylesheet /assets/style.css ============================================================ */ /* ===== RESET & BASE ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6; color: #1a1a2e; background: #fff; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } /* ===== DESIGN TOKENS ===== */ :root { --orange: #ff6b35; --orange-dark: #e55a25; --orange-btn: #ff6b35; --orange-btn-hover: #e55a25; --blue: #216891; --blue-dark: #1a5272; --bg-light: #f7f9fc; --bg-mid: #eef2f7; --text: #1a1a2e; --text-muted: #5a6a7a; --white: #ffffff; --radius: 10px; --shadow: 0 4px 24px rgba(33,104,145,0.10); --shadow-hover: 0 8px 32px rgba(33,104,145,0.18); --max: 1200px; } /* ===== UTILITIES ===== */ .container { max-width: var(--max); margin: 0 auto; padding: 0 20px; } .container--narrow { max-width: 900px; margin: 0 auto; padding: 0 20px; } .section { padding: 72px 0; } .section--light { background: var(--bg-light); } .section--mid { background: var(--bg-mid); } .section--blue { background: var(--blue); color: var(--white); } .section--dark { background: #1a1a2e; color: var(--white); } .text-center { text-align: center; } .tag { display: inline-block; background: rgba(255,107,53,0.12); color: #993700; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 14px; border-radius: 20px; margin-bottom: 14px; } /* ===== TYPOGRAPHY ===== */ h1,h2,h3,h4 { font-weight: 700; line-height: 1.2; } h1 { font-size: clamp(30px, 4vw, 46px); } h2 { font-size: clamp(24px, 3vw, 36px); } h3 { font-size: clamp(18px, 2vw, 22px); font-weight: 600; } .section-title { margin-bottom: 14px; } .section-sub { font-size: 18px; color: var(--text-muted); line-height: 1.7; margin-bottom: 40px; } /* ===== BUTTONS ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 32px; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all .2s ease; border: 2px solid transparent; text-decoration: none; line-height: 1.3; } .btn-primary { background: #b54400; color: #fff; border-color: #b54400; } .btn-primary:hover { background: var(--orange-btn-hover); border-color: var(--orange-dark); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,107,53,.35); } .btn-outline { background: transparent; color: var(--text); border-color: var(--text); } .btn-outline:hover { background: var(--text); color: #fff; transform: translateY(-2px); } .btn-outline-white { background: transparent; color: #fff; border-color: #fff; } .btn-outline-white:hover { background: #fff; color: var(--blue); } .btn-small { padding: 10px 22px; font-size: 14px; } /* ===== NAVIGATION ===== */ /* ===== NAV ===== */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); border-bottom: 1px solid #e8edf2; padding: 0 20px; } .nav__inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 64px; } .nav__logo { font-size: 22px; font-weight: 800; color: var(--blue); letter-spacing: -.5px; flex-shrink: 0; } .nav__logo span { color: #993700; } /* Desktop links */ .nav__links { display: flex; align-items: center; gap: 4px; flex: 1; justify-content: center; } .nav__links > a { font-size: 15px; font-weight: 500; color: var(--text-muted); transition: color .2s; padding: 8px 14px; border-radius: 6px; white-space: nowrap; } .nav__links > a:hover { color: var(--blue); background: var(--bg-light); } .nav__links > a.active { color: var(--blue); } /* Dropdown container */ .nav__dropdown { position: relative; } /* Dropdown trigger button */ .nav__dropbtn { font-size: 15px; font-weight: 500; color: var(--text-muted); padding: 8px 14px; border-radius: 6px; background: none; border: none; cursor: pointer; font-family: inherit; white-space: nowrap; display: flex; align-items: center; gap: 4px; transition: color .2s, background .2s; } .nav__dropbtn:hover { color: var(--blue); background: var(--bg-light); } .nav__dropbtn.active { color: var(--blue); } /* Hidden by default – shown on hover */ .nav__dropmenu { display: none; position: absolute; top: 100%; left: 0; padding-top: 8px; /* usynlig bro over gabet */ background: #fff; border: 1px solid #e0e8f0; border-radius: 10px; box-shadow: 0 8px 32px rgba(33,104,145,.15); min-width: 230px; padding: 6px 0; z-index: 300; flex-direction: column; } .nav__dropdown:hover .nav__dropmenu, .nav__dropdown:focus-within .nav__dropmenu { display: flex; /* flex so children stack vertically */ } .nav__dropmenu a { display: block; padding: 10px 18px; font-size: 14px; font-weight: 500; color: var(--text); border-bottom: 1px solid #f0f4f8; white-space: nowrap; transition: background .15s, color .15s; } .nav__dropmenu a:last-child { border-bottom: none; } .nav__dropmenu a:hover { background: var(--bg-light); color: var(--blue); } .nav__dropmenu a .drop-icon { margin-right: 8px; } .nav__cta { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .nav__burger { display: none; background: none; border: none; cursor: pointer; padding: 4px; } .nav__burger span { display: block; width: 24px; height: 2px; background: var(--text); margin: 5px 0; transition: all .3s; border-radius: 2px; } .nav__mobile { display: none; } @media (max-width: 900px) { .nav__links { display: none; } .nav__cta .btn-outline { display: none; } .nav__burger { display: block; } .nav__mobile { padding: 16px 0 24px; border-top: 1px solid #e8edf2; } .nav__mobile.open { display: block; } .nav__mobile a, .nav__mobile-group-title { display: block; padding: 11px 0; font-size: 15px; font-weight: 500; color: var(--text); border-bottom: 1px solid #f0f4f8; } .nav__mobile-group-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding-top: 18px; border-bottom: none; display: block; } .nav__mobile-sub a { padding-left: 16px !important; font-size: 14px !important; color: var(--text-muted) !important; } .nav__mobile .btn { display: inline-flex; margin-top: 16px; width: 100%; justify-content: center; } } /* ===== HERO ===== */ .hero { background: var(--bg-light); padding: 0; overflow: hidden; } .hero__inner { width: 100%; display: grid; grid-template-columns: 1fr 1fr; min-height: 580px; } .hero__img { position: relative; overflow: hidden; min-height: 400px; } .hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .hero__content { padding: 64px clamp(24px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; max-width: 680px; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: #993700; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 18px; } .hero__eyebrow::before { content: ''; width: 32px; height: 2px; background: #993700; display: block; } .hero__h1 { font-size: clamp(28px, 3.5vw, 44px); line-height: 1.15; margin-bottom: 8px; color: var(--text); } .hero__sub { font-size: 18px; color: var(--text-muted); font-weight: 400; margin-bottom: 18px; } .hero__body { font-size: 17px; line-height: 1.7; color: #3a4a5a; margin-bottom: 28px; } .hero__body strong { color: var(--text); } .hero__btns { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; } .hero__trust { font-size: 14px; color: var(--text-muted); } .hero__trust span { margin-right: 16px; } @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } .hero__img { height: 280px; min-height: unset; } .hero__content { padding: 40px 24px; max-width: 100%; } } /* ===== TRUST BAR ===== */ .trustbar { background: var(--blue); color: #fff; padding: 22px 20px; } .trustbar__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; } .trustbar__item { text-align: center; font-size: 15px; font-weight: 500; } .trustbar__item strong { display: block; font-size: 22px; font-weight: 800; } @media (max-width: 700px) { .trustbar__inner { grid-template-columns: repeat(2,1fr); } } /* ===== CARDS ===== */ .card { background: var(--white); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow); transition: box-shadow .25s, transform .25s; border: 1px solid #e8edf4; } .card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .card__icon { font-size: 36px; margin-bottom: 14px; } .card__title { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: var(--text); } .card__body { font-size: 15px; color: var(--text-muted); line-height: 1.65; } /* ===== WHY GRID ===== */ .why__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; } @media (max-width: 900px) { .why__grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .why__grid { grid-template-columns: 1fr; } } /* ===== SERVICE CARDS ===== */ .services__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 48px; } @media (max-width: 900px) { .services__grid { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .services__grid { grid-template-columns: 1fr; } } .service-card { background: var(--white); border-radius: var(--radius); padding: 28px 24px; border: 1px solid #e8edf4; box-shadow: var(--shadow); transition: all .25s; position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--orange); border-radius: 4px 0 0 4px; } .service-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); } .service-card__icon { font-size: 32px; margin-bottom: 12px; } .service-card__title { font-size: 18px; font-weight: 700; margin-bottom: 10px; } .service-card__body { font-size: 15px; color: var(--text-muted); line-height: 1.65; } .service-card__tag { display: inline-block; margin-top: 14px; font-size: 12px; font-weight: 700; color: #993700; text-transform: uppercase; letter-spacing: .06em; } /* ===== CHECKLIST ===== */ .features__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 40px; margin-top: 32px; } @media (max-width: 600px) { .features__cols { grid-template-columns: 1fr; } } .check-item { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; padding: 10px 0; border-bottom: 1px solid #eef2f7; } .check-item__icon { color: #993700; font-weight: 700; flex-shrink: 0; margin-top: 2px; } /* ===== PROCESS ===== */ .process__steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; margin-top: 48px; position: relative; } .process__steps::before { content: ''; position: absolute; top: 28px; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--orange), var(--blue)); z-index: 0; } @media (max-width: 900px) { .process__steps { grid-template-columns: 1fr; } .process__steps::before { display: none; } } .process__step { background: var(--white); border-radius: var(--radius); padding: 24px 18px; text-align: center; box-shadow: var(--shadow); border: 1px solid #e8edf4; position: relative; z-index: 1; } .process__num { width: 52px; height: 52px; border-radius: 50%; background: #b54400; color: #fff; font-size: 22px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .process__title { font-size: 16px; font-weight: 700; margin-bottom: 8px; } .process__body { font-size: 14px; color: var(--text-muted); line-height: 1.6; } /* ===== CALC IFRAME ===== */ .calc-section { background: var(--bg-light); } .calc-iframe-wrapper { max-width: 960px; margin: 0 auto; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 40px rgba(33,104,145,.13); border: 1px solid #e0e8f0; } .calc-iframe-wrapper iframe { display: block; width: 100%; border: none; min-height: 820px; } /* ===== SEO TABS ===== */ .seo-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; justify-content: center; } .seo-tab { padding: 8px 20px; border-radius: 20px; cursor: pointer; font-size: 14px; font-weight: 700; border: 2px solid #e0e8f0; background: #fff; color: var(--text-muted); transition: all .2s; } .seo-tab.active { background: var(--blue); color: #fff; border-color: var(--blue); } .seo-panel { display: none; } .seo-panel.active { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 700px) { .seo-panel.active { grid-template-columns: 1fr; } } .seo-panel__text h3 { margin-bottom: 12px; } .seo-panel__text p { color: var(--text-muted); line-height: 1.7; margin-bottom: 12px; font-size: 15px; } .seo-panel__facts { background: var(--bg-light); border-radius: var(--radius); padding: 20px; } .seo-panel__facts h4 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: 12px; } .fact-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #e8edf4; font-size: 14px; } .fact-item:last-child{ border-bottom: none; } .fact-item__icon { color: #993700; font-size: 16px; flex-shrink: 0; } /* ===== ACCORDION ===== */ .accordion { max-width: 800px; margin: 32px auto 0; } .acc-item { border: 1px solid #e0e8f0; border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; background: var(--white); } .acc-trigger { width: 100%; padding: 18px 22px; background: none; border: none; display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; color: var(--text); cursor: pointer; text-align: left; transition: background .2s; gap: 12px; } .acc-trigger:hover { background: var(--bg-light); } .acc-trigger[aria-expanded="true"] { background: var(--bg-light); color: var(--blue); } .acc-icon { font-size: 20px; flex-shrink: 0; transition: transform .3s; color: #993700; } .acc-trigger[aria-expanded="true"] .acc-icon { transform: rotate(45deg); } .acc-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; } .acc-body.open { max-height: 400px; } .acc-body__inner { padding: 0 22px 18px; font-size: 15px; color: var(--text-muted); line-height: 1.7; } /* ===== ABOUT ===== */ .about__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .about__scenarios { display: grid; gap: 14px; } .scenario-card { background: var(--white); border-radius: var(--radius); padding: 18px 20px; border-left: 4px solid var(--orange); box-shadow: var(--shadow); font-size: 15px; color: var(--text-muted); line-height: 1.65; } .scenario-card strong { color: var(--text); display: block; margin-bottom: 4px; } @media (max-width: 768px) { .about__cols { grid-template-columns: 1fr; } } /* ===== PROTOTYPE ===== */ .proto__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } .proto__img { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-hover); } @media (max-width: 768px) { .proto__cols { grid-template-columns: 1fr; } } /* ===== CTA SECTION ===== */ .cta-section { background: linear-gradient(135deg, #1a1a2e 0%, var(--blue-dark) 100%); color: var(--white); } .cta__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } @media (max-width: 768px) { .cta__cols { grid-template-columns: 1fr; } } .cta__list { list-style: none; margin: 20px 0; } .cta__list li { padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 16px; display: flex; gap: 10px; } .cta__list li::before { content: '→'; color: #993700; flex-shrink: 0; } .cta__form-card { background: var(--white); color: var(--text); border-radius: 14px; padding: 32px; box-shadow: 0 10px 40px rgba(0,0,0,.3); } .cta__form-card h3 { margin-bottom: 22px; text-align: center; font-size: 20px; } .form-group { margin-bottom: 14px; } .form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--text-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .06em; } .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 14px; border: 2px solid #e0e8f0; border-radius: 8px; font-size: 15px; color: var(--text); background: var(--white); transition: border-color .2s; font-family: inherit; } .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--blue); } .form-group textarea { resize: vertical; min-height: 80px; } .form-submit { width: 100%; padding: 15px; background: #b54400; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 700; cursor: pointer; transition: all .2s; } .form-submit:hover { background: var(--orange-btn-hover); transform: translateY(-1px); } .form-privacy { text-align: center; font-size: 12px; color: var(--text-muted); margin-top: 10px; } /* ===== FOOTER ===== */ .footer { background: #0f1623; color: #a3b5c7; padding: 48px 0 24px; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } @media (max-width: 768px) { .footer__grid { grid-template-columns: 1fr; gap: 28px; } } .footer__brand { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 12px; } .footer__brand span { color: #ff8c42; } .footer__desc { font-size: 14px; line-height: 1.7; } .footer__heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #fff; margin-bottom: 14px; } .footer__links { list-style: none; } .footer__links li { margin-bottom: 8px; } .footer__links a { font-size: 14px; color: #a3b5c7; transition: color .2s; } .footer__links a:hover { color: #ff8c42; } .footer__bottom { border-top: 1px solid #1e2d3d; padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; } /* ===== SCROLL ANIMATION ===== */ .fade-up { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; } .fade-up.visible { opacity: 1; transform: none; } /* ===== STICKY MOBILE CTA ===== */ .sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--white); border-top: 2px solid var(--orange); padding: 12px 20px; z-index: 200; box-shadow: 0 -4px 20px rgba(0,0,0,.12); gap: 10px; } .sticky-cta a { flex: 1; text-align: center; font-weight: 700; } @media (max-width: 640px) { .sticky-cta { display: flex; } }
Guides om hjemmeside, SEO og performance – SynligWeb
Viden & Guides

Bliv Klogere på
Hjemmesider, SEO & Performance

Praktiske guides – uden bureau-snak

Her deler vi konkret viden om hjemmesider, WordPress, statisk HTML, SEO, GEO og konvertering. Alt er skrevet til virksomheder der vil forstå hvad de investerer i – og hvorfor det virker.

Se artikler ↓ Gratis analyse ⚡
✓ Ingen fluff ✓ Konkrete forklaringer ✓ Fokus på ROI
Hvorfor læse med?

Viden Der Giver Bedre Beslutninger

En hjemmeside er en investering. Jo bedre du forstår performance, SEO og konvertering, desto bedre beslutninger kan du træffe. Vores guides hjælper dig med at skelne mellem smart marketing – og det der faktisk skaber resultater.

Kategorier

Hvad Vil Du Læse Om?

⚡
Hjemmeside & Performance
Lær hvorfor hastighed betyder alt – og hvordan PageSpeed påvirker både Google og konvertering.
🔍
SEO & Synlighed
Forstå hvordan du kommer øverst på Google – uden at være afhængig af betalte annoncer.
🤖
GEO & AI-søgning
Bliv synlig i ChatGPT, Google AI Overviews og fremtidens søgninger.
📈
Konvertering & CRO
Få flere henvendelser uden mere trafik – ved at optimere brugerrejsen.
🧮
Pris & Budget
Hvad koster en hjemmeside egentlig – og hvad bør du forvente at få for pengene?
🛠️
WordPress & Teknisk
CMS, statisk HTML, sikkerhed og tekniske valg forklaret enkelt.
Seneste artikler

Guides & Indsigter

Konkrete svar på de spørgsmål vi oftest får fra virksomheder.

🧮

Hvad Koster En Hjemmeside i 2026?

En realistisk gennemgang af priser, hvad du betaler for – og hvor det kan gå galt.

Pris · Budget
⚡

Hvorfor Er PageSpeed Så Vigtigt?

Hvordan 1 sekund langsommere loadtid kan koste dig kunder – og Google-placeringer.

Performance · SEO
🟦

WordPress vs. Statisk HTML

Hvornår giver CMS mening – og hvornår bør du vælge ren, håndkodet HTML?

Teknologi · Performance
🔍

Hvad Er SEO – Forklaret Enkelt

En praktisk guide til hvordan søgemaskineoptimering faktisk fungerer i dag.

SEO · Synlighed
🤖

Hvad Er GEO?

Generative Engine Optimization forklaret – og hvorfor det er vigtigt i 2026.

GEO · AI
📈

Sådan Øger Du Konverteringsraten

Små ændringer i layout og budskab kan give markant flere henvendelser.

CRO · Leads
Ofte søgte spørgsmål

Kort & Præcist

Hurtige svar på de mest almindelige spørgsmål om hjemmesider og synlighed.

Typisk mellem 10.000 og 50.000 kr. afhængigt af kompleksitet, funktioner og strategi. Det vigtigste er ikke prisen – men ROI.
Ja – hvis det bygges korrekt. Men statisk HTML vil altid være hurtigere. Valget afhænger af behov.
SEO optimerer til klassiske søgeresultater. GEO optimerer til AI-genererede svar og fremtidens søgninger.
Gratis & Uforpligtende

Vil Du Vide Hvad Der Gælder For Dig?

Læs vores guides – eller få en konkret analyse af din hjemmeside:

  • Hvad der bremser din hjemmeside i dag
  • Hvilke SEO-muligheder du går glip af
  • Hvad der skal til for at få flere leads
  • Estimeret ROI på en investering
⚡ Svar inden 24 timer 🔒 Ingen forpligtelser

Få Din Gratis Analyse Nu

🔒 Dine data behandles fortroligt og deles aldrig.