{"id":1369,"date":"2026-01-23T18:55:44","date_gmt":"2026-01-23T18:55:44","guid":{"rendered":"https:\/\/nordyn.se\/?page_id=1369"},"modified":"2026-05-17T20:21:56","modified_gmt":"2026-05-17T20:21:56","slug":"case","status":"publish","type":"page","link":"https:\/\/nordyn.se\/en\/case\/","title":{"rendered":"Our work"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\n\nV\u00e5ra Case \u2014 Nordyn<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n\/* --- GRUNDL\u00c4GGANDE VARIABLER --- *\/\n:root{\n --accent:#8A74FF;\n --muted:rgba(255,255,255,.82);\n --line:rgba(255,255,255,.12);\n --pad: clamp(24px, 3vw, 40px);\n}\n\n\/* SUPER-FIX F\u00d6R BL\u00c5 MARKERINGAR (ELEMENTOR OVERRIDE) *\/\n\/* Vi anv\u00e4nder ID (#) f\u00f6r att vinna \u00f6ver Elementors klasser *\/\n#menuToggle, \n#menuToggle:focus, \n#menuToggle:active,\n#menuToggle:focus-visible,\n#menuToggle:visited,\n#menuClose,\n#menuClose:focus,\n#menuClose:active,\n#menuClose:hover,\nbutton.submenu-toggle-btn,\nbutton.submenu-toggle-btn:focus,\nbutton.submenu-toggle-btn:active {\n outline: none !important;\n box-shadow: none !important;\n background-color: transparent !important;\n -webkit-tap-highlight-color: transparent !important;\n -webkit-focus-ring-color: transparent !important;\n -webkit-user-select: none !important;\n user-select: none !important;\n border-top: none !important;\n border-left: none !important;\n border-right: none !important;\n \/* Vi sparar border-bottom f\u00f6r designen, men tvingar bort resten *\/\n}\n\n\/* Global reset som hj\u00e4lper i WP-milj\u00f6 *\/\nbutton:focus, a:focus {\n outline: none !important;\n box-shadow: none !important;\n}\n\n*{box-sizing:border-box}\n\nhtml, body {\n background-color: #000000; \/* HELT SVART *\/\n margin: 0;\n padding: 0;\n width: 100%;\n overscroll-behavior-y: none;\n font-family: 'Inter', system-ui, sans-serif;\n color: #ffffff; \/* VIT TEXT *\/\n overflow-x:hidden;\n}\n\n\/* -----------------------------------------------------------\n HEADER & MENY (Samma som kontakt\/integritetspolicy)\n ----------------------------------------------------------- *\/\n.header {\n position:fixed; top:0; left:0; right:0; z-index:9999;\n padding: 22px 40px; display:flex; align-items: flex-start; justify-content:space-between;\n gap:16px; background: transparent; mix-blend-mode: difference; color: #fff;\n transition: opacity 0.3s ease;\n}\n.header.hidden { opacity: 0; pointer-events: none; }\n.brand { display:flex; align-items: center; gap: 16px; min-width:0; }\n.logoMark { width:145px; height:auto; display:flex; align-items:center; flex:0 0 auto; color: #fff; margin-left: -20px;}\n.logoMark svg { width:100%; height:auto; display:block; }\n.tagline { font-size:13px; line-height:1.3; color: #fff !important; opacity: 0.9; font-weight: 500; max-width: 200px;}\n.tagline.fade-out { opacity: 0; transform: translateX(-10px); transition: 0.4s ease; pointer-events: none; }\n\n.nav { display:flex; align-items:center; gap:22px; flex:0 0 auto; color: #fff; }\n.nav a.contact { color:inherit; text-decoration:none; font-size:14px; font-weight:600; opacity:.92; padding-top:2px; position:relative; padding-bottom:6px;}\n.nav a.contact::after { content:\"\"; position:absolute; left:0; bottom:0; height:1px; width:100%; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; opacity:.95;}\n.nav a.contact:hover::after { transform: scaleX(1); }\n\n\/* --- MENY KNAPP --- *\/\n.menuToggle, \n.menuToggleOverlay, \n.submenu-toggle-btn {\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n background: transparent;\n \/* Extra s\u00e4kerhet i CSS ocks\u00e5 *\/\n -webkit-tap-highlight-color: transparent !important; \n outline: none !important;\n}\n\n.menuToggle:focus, .menuToggle:active,\n.menuToggleOverlay:focus, .menuToggleOverlay:active,\n.submenu-toggle-btn:focus, .submenu-toggle-btn:active {\n background: transparent !important;\n outline: none !important;\n}\n\n.menuToggle, .menuToggleOverlay { all:unset; cursor:pointer; display:inline-flex; align-items:center; gap:12px; font-size:15px; font-weight:600; color: #fff; position:relative; padding-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.6); transition: border-color 0.3s ease;}\n.menuToggle:hover, .menuToggleOverlay:hover { border-color: #fff; }\n.menuIcon { font-size:18px; line-height:1; transform: translateY(-1px); }\n\n.menuOverlay { position:fixed; inset:0; background:#000; z-index:9990; transform: translateY(-100%); opacity: 1; visibility:hidden; transition: transform .6s cubic-bezier(0.77, 0, 0.175, 1), visibility .6s ease;}\n.menuOverlay.open { visibility:visible; transform: translateY(0); }\n.menuOverlay.closing { transform: translateY(-100%); visibility:hidden; }\n\n.menuInner {\n min-height: 100svh; height: 100svh; \n padding: 0; \n display:flex; flex-direction:column; overflow:hidden;\n overflow-y: auto; \/* Allow scrolling inside menu if needed *\/\n}\n\n.menuTop { display:flex; align-items: flex-start; justify-content:space-between; gap:16px; flex:0 0 auto; padding: 22px 40px; color: #fff; z-index: 10;}\n.menuTop .brand, .menuTop .logoMark, .menuToggleOverlay { color: #fff; }\n.menuTop .logoMark svg { fill: #fff; }\n.menuTop .tagline { color: rgba(255,255,255,0.7); }\n.menuToggleOverlay { border-color: rgba(255,255,255,0.6); }\n\n.menuContent { flex:1 1 auto; display:flex; align-items:center; padding: 18px 40px; }\n.menuList { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:24px; width:100%; }\n.menuItem { opacity:0; transform: translateY(14px); }\n.menuOverlay.open .menuItem { animation: menuIn .5s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(300ms + var(--d, 0ms)); }\n@keyframes menuIn{ to { opacity:1; transform: translateY(0); } }\n\n.menuRow { display:flex; align-items:center; justify-content:space-between; gap:18px; position: relative; }\n.menuLink { color: rgba(255,255,255,0.5); text-decoration:none; font-size: clamp(32px, 5vw, 48px); font-weight:700; letter-spacing:-0.02em; position:relative; display:inline-block; padding:0; line-height:1.1; transition: color 0.3s ease;}\n.menuLink:hover, .menuLink:focus, .menuLink:active { color: #fff; }\n\n\/* PIL LOGIK & SUBMENU STYLING *\/\n.submenu-toggle-btn {\n background: none;\n border: none;\n padding: 10px;\n cursor: pointer;\n color: var(--accent);\n display: flex;\n align-items: center;\n justify-content: center;\n \/* Extra s\u00e4kerhet *\/\n -webkit-appearance: none;\n -moz-appearance: none;\n appearance: none;\n}\n\n.bigArrow { \n flex:0 0 auto; \n color: var(--accent); \n opacity:1; \n transform: translateY(4px); \n transition: transform 0.4s ease;\n pointer-events: none; \/* L\u00e5t klicket hanteras av knappen *\/\n}\n.bigArrow svg { width:40px; height:24px; }\n\n\/* Submenu Container *\/\n.submenu {\n list-style: none;\n padding: 0;\n margin: 0;\n display: grid;\n grid-template-rows: 0fr;\n transition: grid-template-rows 0.5s cubic-bezier(0.25, 1, 0.5, 1);\n}\n\n.submenu-inner {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n gap: 12px;\n padding-left: 4px; \/* Indrag f\u00f6r hierarki *\/\n}\n\n\/* Submenu Items styling *\/\n.submenu-item {\n opacity: 0;\n transform: translateX(40px); \/* Starta fr\u00e5n h\u00f6ger *\/\n transition: opacity 0.4s ease, transform 0.4s ease;\n}\n\n.submenu-link {\n font-size: clamp(20px, 3vw, 28px);\n font-weight: 600;\n color: rgba(255,255,255,0.6);\n text-decoration: none;\n display: block;\n transition: color 0.2s;\n}\n.submenu-link:hover {\n color: #fff;\n}\n\n\/* EXPANDED STATE *\/\n.menuItem.has-expanded .submenu {\n grid-template-rows: 1fr;\n margin-top: 16px; \/* Space mellan Tj\u00e4nster och listan *\/\n}\n\n.menuItem.has-expanded .bigArrow {\n transform: translateY(4px) rotate(90deg); \/* Rotera pilen *\/\n}\n\n\/* Submenu items animation sequence when opened *\/\n.menuItem.has-expanded .submenu-item {\n opacity: 1;\n transform: translateX(0);\n}\n\n\/* Staggered delay f\u00f6r \"svep\" effekten *\/\n.menuItem.has-expanded .submenu-item:nth-child(1) { transition-delay: 0.1s; }\n.menuItem.has-expanded .submenu-item:nth-child(2) { transition-delay: 0.15s; }\n.menuItem.has-expanded .submenu-item:nth-child(3) { transition-delay: 0.2s; }\n.menuItem.has-expanded .submenu-item:nth-child(4) { transition-delay: 0.25s; }\n\n\n.menuBottom { flex:0 0 auto; display:grid; grid-template-columns: 1fr auto; gap:18px; align-items:end; padding: 20px 40px 40px 40px; border-top: 1px solid var(--line);}\n.bottomLeft { display: flex; flex-direction: column; gap: 24px; }\n.lang-container a { font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.6); text-decoration:none; }\n.lang-container a:hover { color: #fff; }\n.socials { display:flex; gap: 32px; flex-wrap:wrap; color: #fff; font-weight: 600; font-size: 18px; }\n.socials a { color:inherit; text-decoration:none; display:inline-flex; gap: 10px; align-items:center; transition: opacity 0.2s;}\n.socials a:hover { opacity: 0.7; }\n.extIcon svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.5; fill:none; margin-bottom: 2px;}\n.menuCTA { text-align: right; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.8); line-height: 1.4; }\n.menuCTA a { color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }\n.menuCTA-text { display: inline; } \n\n\/* -----------------------------------------------------------\n FOOTER CSS\n ----------------------------------------------------------- *\/\n.footer{background:#000;border-top:1px solid var(--line);padding:clamp(60px,8vh,100px) clamp(24px,3vw,40px) 40px}\n.footer-container{max-width:1200px;margin:0 auto}\n.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:60px;margin-bottom:60px}\n.footer-brand{display:flex;flex-direction:column;gap:20px}\n.footer-logo{width:140px;height:auto}\n.footer-logo svg { width: 100%; height: 100%; fill: #fff; margin-left: -21px; display: block; }\n.footer-tagline{font-size:16px;font-weight:600;color:#fff;margin:0}\n.footer-contact{font-size:14px;color:rgba(255,255,255,0.6);line-height:1.8}\n.footer-contact a{color:var(--accent);text-decoration:none}\n.footer-column h4{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#fff;margin:0 0 20px 0}\n.footer-links{display:flex;flex-direction:column;gap:12px}\n.footer-links a{color:rgba(255,255,255,0.7);text-decoration:none;font-size:14px;transition:color .2s ease}\n.footer-links a:hover{color:#fff}\n.footer-bottom{padding-top:40px;border-top:1px solid var(--line);display:flex;gap:24px;flex-wrap:wrap;justify-content:center}\n.footer-bottom a{color:rgba(255,255,255,0.4);text-decoration:none;font-size:12px}\n\n\/* -----------------------------------------------------------\n CASE SIDA CSS\n ----------------------------------------------------------- *\/\n.case-page-section {\n background-color: #000000;\n color: #ffffff;\n \/* Extra padding top f\u00f6r att komma ner fr\u00e5n fixed header *\/\n padding: clamp(140px, 15vh, 180px) clamp(24px, 3vw, 40px) 100px;\n width: 100%;\n}\n\n.case-page-header {\n max-width: 1400px;\n margin: 0 auto 100px;\n text-align: center;\n}\n\n.case-page-title {\n font-size: clamp(60px, 8vw, 120px);\n font-weight: 700;\n margin: 0 0 24px 0;\n line-height: 0.95;\n letter-spacing: -0.03em;\n color: #ffffff;\n}\n\n.case-page-intro {\n font-size: clamp(18px, 2vw, 22px);\n color: rgba(255,255,255,0.7);\n max-width: 700px;\n margin: 0 auto;\n line-height: 1.5;\n}\n\n\/* CASE WRAPPERS *\/\n.case-block {\n max-width: 1200px;\n margin: 0 auto 160px; \/* Stort avst\u00e5nd mellan case *\/\n}\n\n\/* 1. Bilddelen (Browser look) *\/\n.case-media-wrapper {\n margin-bottom: 60px;\n width: 100%;\n border-radius: 12px;\n overflow: hidden;\n box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);\n background: #fff; \/* F\u00f6r browser bar *\/\n}\n\n.browser-header {\n height: 36px;\n background: #f1f1f1;\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 16px;\n border-bottom: 1px solid #e5e5e5;\n}\n\n.browser-dots { display: flex; gap: 6px; }\n.dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; }\n.dot:nth-child(1) { background: #ff5f57; }\n.dot:nth-child(2) { background: #febc2e; }\n.dot:nth-child(3) { background: #28c840; }\n.browser-address { background: #fff; height: 20px; border-radius: 4px; flex: 1; margin: 0 12px; opacity: 0.5; }\n\n.case-img-full {\n width: 100%;\n height: auto;\n display: block;\n aspect-ratio: 16\/9; \/* Liggande format *\/\n object-fit: cover;\n object-position: top;\n}\n\n\/* 2. Textdelen *\/\n.case-content {\n display: grid;\n grid-template-columns: 1fr 1.5fr; \/* Sidomeny + Huvudtext *\/\n gap: 60px;\n align-items: start;\n}\n\n.case-meta {\n position: sticky;\n top: 120px; \/* F\u00f6ljer med vid scroll om Desktop *\/\n}\n\n.case-name {\n font-size: clamp(32px, 4vw, 48px);\n font-weight: 700;\n margin: 0 0 24px 0;\n color: #fff;\n line-height: 1.1;\n}\n\n.case-meta-list {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.meta-item h4 {\n font-size: 13px;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n color: rgba(255,255,255,0.5);\n margin: 0 0 8px 0;\n}\n\n.meta-item p {\n font-size: 16px;\n color: #fff;\n margin: 0;\n line-height: 1.5;\n}\n\n.case-body h3 {\n font-size: 24px;\n font-weight: 700;\n margin: 40px 0 16px 0;\n color: #fff;\n}\n.case-body h3:first-child { margin-top: 0; }\n\n.case-body p {\n font-size: 17px;\n line-height: 1.7;\n color: rgba(255,255,255,0.85);\n margin-bottom: 20px;\n}\n\n.process-list {\n list-style: none;\n padding: 0;\n margin: 0 0 40px 0;\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.process-item {\n border-left: 2px solid var(--accent);\n padding-left: 20px;\n}\n\n.process-item h4 {\n font-size: 18px;\n font-weight: 600;\n color: #fff;\n margin: 0 0 8px 0;\n}\n\n.process-item p, .process-item ul {\n font-size: 16px;\n color: rgba(255,255,255,0.7);\n margin: 0;\n line-height: 1.6;\n}\n.process-item ul {\n padding-left: 20px;\n margin-top: 8px;\n list-style-type: disc;\n}\n\n\/* CTA SECTION *\/\n.cta-section {\n padding: clamp(80px, 10vh, 120px) clamp(24px, 3vw, 40px);\n text-align: center;\n background: #000;\n border-top: 1px solid var(--line);\n}\n.cta-container {\n max-width: 800px;\n margin: 0 auto;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 32px;\n}\n.cta-title {\n font-size: clamp(32px, 5vw, 64px);\n font-weight: 800;\n letter-spacing: -0.02em;\n line-height: 1.1;\n color: #fff;\n margin: 0;\n}\n.cta-text {\n font-size: clamp(18px, 2vw, 20px);\n color: rgba(255,255,255,0.7);\n max-width: 600px;\n line-height: 1.6;\n margin: 0;\n}\n.cta-btn {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 18px 40px;\n background: var(--accent);\n color: #fff;\n text-decoration: none;\n font-weight: 700;\n font-size: 18px;\n border-radius: 8px;\n transition: transform 0.2s ease, background-color 0.2s ease;\n}\n.cta-btn:hover {\n transform: translateY(-2px);\n background-color: #9f8cff;\n}\n.cta-btn:active {\n transform: translateY(0);\n}\n.cta-btn .arrow {\n transition: transform 0.3s ease;\n}\n.cta-btn:hover .arrow {\n transform: translateX(4px);\n}\n\n\/* MOBIL ANPASSNING *\/\n@media (max-width:1024px){\n .case-content { grid-template-columns: 1fr; gap: 40px; }\n .case-meta { position: static; }\n .footer-main{grid-template-columns:1fr 1fr;gap:40px}\n}\n\n@media (max-width:720px){\n .header{ padding:22px 24px; align-items:center; }\n .brand { flex-direction: column; gap: 4px; align-items: flex-start; }\n .logoMark{width:130px;}\n .tagline { font-size: 14px; line-height: 1.2; white-space: normal; max-width: 100%; margin-top: 4px; opacity: 0.8; }\n .nav a.contact{display:none} \n \n .menuToggleOverlay { margin-top: 5px; }\n .menuTop { padding: 22px 24px; }\n .menuContent { padding: 10px 24px; }\n .menuBottom { display: flex; flex-direction: column; gap: 16px; padding: 0 24px 60px 24px; border-top: none; }\n .bottomLeft { display: contents; }\n .lang-container { order: 1; margin-bottom: 0; }\n .socials { order: 2; display: flex; flex-direction: row; justify-content: flex-start; gap: 20px; font-size: 23px; margin-bottom: 10px; }\n .menuCTA { order: 3; text-align:right; max-width:none; display: flex; flex-direction: column; align-items: flex-end; }\n .menuCTA-text { display: block; margin-bottom: 8px; color:rgba(255,255,255,0.6); font-weight:400; font-size:14px; }\n\n .case-page-section { padding-top: 120px; }\n .case-page-title { font-size: 60px; }\n .case-media-wrapper { margin-bottom: 40px; }\n .case-block { margin-bottom: 100px; }\n}\n<\/style>\n<\/head>\n<body>\n\n<header class=\"header invert\" id=\"mainHeader\">\n <div class=\"brand\">\n <a href=\"https:\/\/nordyn.se\" class=\"logoMark\" aria-label=\"Till startsidan\">\n <svg version=\"1.0\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"600pt\" height=\"167pt\" viewBox=\"0 0 600 167\" preserveAspectRatio=\"xMidYMid meet\" role=\"img\" aria-label=\"Nordyn\">\n <g transform=\"translate(0,167) scale(0.1,-0.1)\" fill=\"currentColor\" stroke=\"none\">\n <path d=\"M4905 1460 c-59 -24 -91 -101 -69 -165 16 -48 31 -63 79 -79 147 -51 244 154 112 234 -33 21 -87 25 -122 10z\"\/>\n <path d=\"M3335 1261 l-50 -6 -3 -133 -3 -132 -42 7 c-122 22 -219 1 -282 -62 -52 -51 -65 -92 -65 -201 0 -133 34 -210 110 -249 56 -29 169 -40 277 -26 54 8 107 12 118 11 11 -1 34 -3 50 -4 l30 -1 3 403 2 402 -47 -2 c-27 0 -70 -4 -98 -7z m-77 -462 c19 -7 22 -16 22 -63 0 -30 -4 -57 -9 -60 -22 -14 -127 -16 -151 -4 -47 25 -52 119 -7 138 23 10 106 3 145 -11z\"\/>\n <path d=\"M1135 1000 c-85 -14 -154 -39 -165 -61 -6 -11 -9 -107 -8 -246 l3 -228 98 -3 97 -3 0 154 c0 124 3 157 15 167 8 6 43 13 79 13 50 2 68 -2 85 -17 20 -18 21 -29 21 -168 l0 -149 98 3 97 3 -1 180 c0 171 -1 183 -26 236 -41 89 -96 117 -243 124 -49 2 -117 0 -150 -5z\"\/>\n <path d=\"M1825 986 c-212 -98 -212 -412 0 -512 72 -34 208 -34 281 0 205 96 205 416 0 512 -73 34 -209 34 -281 0z m218 -195 c15 -14 22 -34 22 -61 0 -55 -29 -81 -94 -88 -46 -4 -53 -2 -81 26 -21 21 -30 40 -30 62 0 22 9 41 30 62 28 28 35 30 81 26 34 -4 58 -12 72 -27z\"\/>\n <path d=\"M2465 1003 c-27 -2 -60 -6 -72 -8 l-23 -5 0 -266 0 -265 98 3 97 3 -3 125 -4 125 30 28 c32 30 70 37 134 24 l37 -8 15 53 c26 90 38 180 27 191 -5 5 -37 8 -70 5 -45 -3 -72 -12 -111 -36 -28 -18 -54 -32 -56 -32 -3 0 -5 10 -4 23 4 40 0 47 -22 45 -13 -1 -45 -3 -73 -5z\"\/>\n <path d=\"M4485 999 c-84 -12 -153 -37 -165 -60 -6 -11 -9 -107 -8 -246 l3 -228 95 0 95 0 5 160 5 160 50 7 c28 5 64 6 82 3 56 -10 63 -32 63 -193 l0 -143 98 3 97 3 3 130 c5 225 -26 333 -106 374 -74 38 -189 48 -317 30z\"\/>\n <path d=\"M3574 985 c-16 -41 139 -430 193 -487 l26 -27 -37 -88 c-20 -48 -36 -93 -36 -99 0 -6 37 -27 83 -46 61 -27 85 -33 94 -24 6 6 40 83 76 171 86 213 128 315 193 467 30 70 54 132 54 137 0 16 -195 15 -207 -1 -6 -7 -34 -72 -63 -145 -58 -143 -66 -160 -75 -152 -3 3 -19 69 -37 145 -17 76 -35 145 -41 152 -15 19 -216 17 -223 -3z\"\/>\n <\/g>\n <\/svg>\n <\/a>\n <div class=\"tagline\" id=\"headerTagline\">Digitalbyr\u00e5 \/ Webbbyr\u00e5 Stockholm<\/div>\n <\/div>\n\n <nav class=\"nav\" aria-label=\"Toppmeny\">\n <a class=\"contact\" href=\"\/kontakt\">Kontakta oss<\/a>\n <!-- FIX: Lade till onclick=\"this.blur()\" och onfocus=\"this.blur()\" direkt i HTML -->\n <button class=\"menuToggle\" id=\"menuToggle\" type=\"button\" onclick=\"this.blur()\" onfocus=\"this.blur()\" style=\"-webkit-tap-highlight-color: rgba(0,0,0,0) !important; outline: none !important; background: none !important; box-shadow: none !important; user-select: none !important; border: none !important;\">\n Meny <span class=\"menuIcon\" id=\"menuIcon\">+<\/span>\n <\/button>\n <\/nav>\n<\/header>\n\n<div class=\"menuOverlay\" id=\"menuOverlay\" aria-hidden=\"true\">\n <div class=\"menuInner\">\n <div class=\"menuTop\">\n <div class=\"brand\">\n <a href=\"https:\/\/nordyn.se\" class=\"logoMark\">\n <svg version=\"1.0\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"600pt\" height=\"167pt\" viewBox=\"0 0 600 167\" preserveAspectRatio=\"xMidYMid meet\" role=\"img\" aria-label=\"Nordyn\">\n <g transform=\"translate(0,167) scale(0.1,-0.1)\" fill=\"currentColor\" stroke=\"none\">\n <path d=\"M4905 1460 c-59 -24 -91 -101 -69 -165 16 -48 31 -63 79 -79 147 -51 244 154 112 234 -33 21 -87 25 -122 10z\"\/>\n <path d=\"M3335 1261 l-50 -6 -3 -133 -3 -132 -42 7 c-122 22 -219 1 -282 -62 -52 -51 -65 -92 -65 -201 0 -133 34 -210 110 -249 56 -29 169 -40 277 -26 54 8 107 12 118 11 11 -1 34 -3 50 -4 l30 -1 3 403 2 402 -47 -2 c-27 0 -70 -4 -98 -7z m-77 -462 c19 -7 22 -16 22 -63 0 -30 -4 -57 -9 -60 -22 -14 -127 -16 -151 -4 -47 25 -52 119 -7 138 23 10 106 3 145 -11z\"\/>\n <path d=\"M1135 1000 c-85 -14 -154 -39 -165 -61 -6 -11 -9 -107 -8 -246 l3 -228 98 -3 97 -3 0 154 c0 124 3 157 15 167 8 6 43 13 79 13 50 2 68 -2 85 -17 20 -18 21 -29 21 -168 l0 -149 98 3 97 3 -1 180 c0 171 -1 183 -26 236 -41 89 -96 117 -243 124 -49 2 -117 0 -150 -5z\"\/>\n <path d=\"M1825 986 c-212 -98 -212 -412 0 -512 72 -34 208 -34 281 0 205 96 205 416 0 512 -73 34 -209 34 -281 0z m218 -195 c15 -14 22 -34 22 -61 0 -55 -29 -81 -94 -88 -46 -4 -53 -2 -81 26 -21 21 -30 40 -30 62 0 22 9 41 30 62 28 28 35 30 81 26 34 -4 58 -12 72 -27z\"\/>\n <path d=\"M2465 1003 c-27 -2 -60 -6 -72 -8 l-23 -5 0 -266 0 -265 98 3 97 3 -3 125 -4 125 30 28 c32 30 70 37 134 24 l37 -8 15 53 c26 90 38 180 27 191 -5 5 -37 8 -70 5 -45 -3 -72 -12 -111 -36 -28 -18 -54 -32 -56 -32 -3 0 -5 10 -4 23 4 40 0 47 -22 45 -13 -1 -45 -3 -73 -5z\"\/>\n <path d=\"M4485 999 c-84 -12 -153 -37 -165 -60 -6 -11 -9 -107 -8 -246 l3 -228 95 0 95 0 5 160 5 160 50 7 c28 5 64 6 82 3 56 -10 63 -32 63 -193 l0 -143 98 3 97 3 3 130 c5 225 -26 333 -106 374 -74 38 -189 48 -317 30z\"\/>\n <path d=\"M3574 985 c-16 -41 139 -430 193 -487 l26 -27 -37 -88 c-20 -48 -36 -93 -36 -99 0 -6 37 -27 83 -46 61 -27 85 -33 94 -24 6 6 40 83 76 171 86 213 128 315 193 467 30 70 54 132 54 137 0 16 -195 15 -207 -1 -6 -7 -34 -72 -63 -145 -58 -143 -66 -160 -75 -152 -3 3 -19 69 -37 145 -17 76 -35 145 -41 152 -15 19 -216 17 -223 -3z\"\/>\n <\/g>\n <\/svg>\n <\/a>\n <div class=\"tagline\" style=\"color: rgba(255,255,255,.7); mix-blend-mode:normal;\">Digitalbyr\u00e5 \/ Webbbyr\u00e5 Stockholm<\/div>\n <\/div>\n\n <!-- FIX: Uppdaterad st\u00e4ng-knapp med inline styles f\u00f6r att d\u00f6da det bl\u00e5a -->\n <button class=\"menuToggleOverlay\" id=\"menuClose\" type=\"button\" onclick=\"this.blur()\" onfocus=\"this.blur()\" style=\"-webkit-tap-highlight-color: rgba(0,0,0,0) !important; outline: none !important; background: none !important; box-shadow: none !important; user-select: none !important; border-top:none !important; border-left:none !important; border-right:none !important;\">\n Meny <span class=\"menuIcon\">\u00d7<\/span>\n <\/button>\n <\/div>\n\n <div class=\"menuContent\">\n <ul class=\"menuList\" aria-label=\"Meny\">\n <!-- NY: Startsida -->\n <li class=\"menuItem\" style=\"--d: 80ms;\"><div class=\"menuRow\"><a class=\"menuLink nav-animate\" href=\"\/\">Startsida<\/a><\/div><\/li>\n \n <!-- Case (Justered tid till 160ms) -->\n <li class=\"menuItem\" style=\"--d: 160ms;\"><div class=\"menuRow\"><a class=\"menuLink nav-animate\" href=\"cases_nordyn.html\" style=\"color:#fff;\">Case<\/a><\/div><\/li>\n \n <!-- \u00c4NDRAD KOD H\u00c4R F\u00d6R TJ\u00c4NSTER -->\n <li class=\"menuItem\" style=\"--d: 240ms;\" id=\"servicesMenuItem\">\n <div class=\"menuRow\">\n <a class=\"menuLink nav-animate\" href=\"\/tjanster\">Tj\u00e4nster<\/a>\n <!-- LADE TILL INLINE STYLE H\u00c4R OCKS\u00c5 -->\n <button class=\"submenu-toggle-btn\" aria-label=\"Visa undertj\u00e4nster\" onclick=\"toggleSubmenu(event)\" style=\"-webkit-tap-highlight-color: rgba(0,0,0,0) !important; outline: none !important; background: none !important; box-shadow: none !important; border: none !important;\">\n <span class=\"bigArrow\" aria-hidden=\"true\">\n <svg viewBox=\"0 0 64 40\">\n <path d=\"M6 20H46\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\"\/>\n <path d=\"M36 8L50 20L36 32\" stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <\/span>\n <\/button>\n <\/div>\n \n <!-- UNDERMENY -->\n <ul class=\"submenu\">\n <div class=\"submenu-inner\">\n <li class=\"submenu-item\"><a class=\"submenu-link nav-animate\" href=\"\/webbdesign\">Webbdesign<\/a><\/li>\n <li class=\"submenu-item\"><a class=\"submenu-link nav-animate\" href=\"\/e-handel\">E-handel<\/a><\/li>\n <li class=\"submenu-item\"><a class=\"submenu-link nav-animate\" href=\"\/seo\">SEO<\/a><\/li>\n <li class=\"submenu-item\"><a class=\"submenu-link nav-animate\" href=\"\/branding\">Branding<\/a><\/li>\n <\/div>\n <\/ul>\n <\/li>\n\n <li class=\"menuItem\" style=\"--d: 320ms;\"><div class=\"menuRow\"><a class=\"menuLink nav-animate\" href=\"\/vart-lofte\">V\u00e5rt l\u00f6fte<\/a><\/div><\/li>\n <li class=\"menuItem\" style=\"--d: 400ms;\"><div class=\"menuRow\"><a class=\"menuLink nav-animate\" href=\"\/om-nordyn\">Om nordyn<\/a><\/div><\/li>\n <li class=\"menuItem\" style=\"--d: 480ms;\"><div class=\"menuRow\"><a class=\"menuLink nav-animate\" href=\"\/kontakt\">Kontakt<\/a><\/div><\/li>\n <\/ul>\n <\/div>\n\n <div class=\"menuBottom\">\n <div class=\"bottomLeft\">\n <div class=\"lang-container\">\n <div class=\"trp-shortcode-switcher__wrapper\"\r\n style=\"--bg:#ffffffb2;--bg-hover:#ffffffb2;--text:#ffffff;--text-hover:#000000;--border:1px solid transparent;--border-width:1px;--border-color:transparent;--border-radius:5px;--flag-radius:2px;--flag-size:18px;--aspect-ratio:4\/3;--font-size:14px;--transition-duration:0.2s\"\r\n role=\"group\"\r\n data-open-mode=\"hover\">\r\n\r\n \r\n <!-- ANCHOR (in-flow only; sizing\/borders; inert) -->\r\n <div class=\"trp-language-switcher trp-ls-dropdown trp-shortcode-switcher trp-shortcode-anchor trp-open-on-hover\"\r\n aria-hidden=\"true\"\r\n inert\r\n data-no-translation>\r\n <div class=\"trp-current-language-item__wrapper\">\r\n <a class=\"trp-language-item trp-language-item__default trp-language-item__current\" data-no-translation href=\"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/1369#TRPLINKPROCESSED\" title=\"English\"><img decoding=\"async\" src=\"https:\/\/nordyn.se\/wp-content\/plugins\/translatepress-multilingual\/assets\/flags\/4x3\/en_US.svg\" class=\"trp-flag-image\" alt=\"\" role=\"presentation\" loading=\"lazy\" \/><span class=\"trp-language-item-name\">English<\/span><\/a> <svg class=\"trp-shortcode-arrow\" width=\"20\" height=\"20\" viewBox=\"0 0 20 21\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M5 8L10 13L15 8\" stroke=\"var(--text)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- OVERLAY (positioned; interactive surface) -->\r\n <div class=\"trp-language-switcher trp-ls-dropdown trp-shortcode-switcher trp-shortcode-overlay trp-open-on-hover\"\r\n role=\"navigation\"\r\n aria-label=\"Website language selector\"\r\n data-no-translation\r\n >\r\n <div class=\"trp-current-language-item__wrapper\">\r\n <div class=\"trp-language-item trp-language-item__default trp-language-item__current\" data-no-translation role=\"button\" aria-expanded=\"false\" tabindex=\"0\" aria-label=\"Change language\" aria-controls=\"trp-shortcode-dropdown-6a8b927cdf8fb\"><img decoding=\"async\" src=\"https:\/\/nordyn.se\/wp-content\/plugins\/translatepress-multilingual\/assets\/flags\/4x3\/en_US.svg\" class=\"trp-flag-image\" alt=\"\" role=\"presentation\" loading=\"lazy\" \/><span class=\"trp-language-item-name\">English<\/span><\/div> <svg class=\"trp-shortcode-arrow\" width=\"20\" height=\"20\" viewBox=\"0 0 20 21\" fill=\"none\" aria-hidden=\"true\" focusable=\"false\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n <path d=\"M5 8L10 13L15 8\" stroke=\"var(--text)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\r\n <\/svg>\r\n <\/div>\r\n \r\n <div class=\"trp-switcher-dropdown-list\"\r\n id=\"trp-shortcode-dropdown-6a8b927cdf8fb\"\r\n role=\"group\"\r\n aria-label=\"Available languages\"\r\n hidden\r\n inert\r\n >\r\n <a class=\"trp-language-item\" href=\"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/1369#TRPLINKPROCESSED\" title=\"Swedish\">\r\n <img decoding=\"async\" src=\"https:\/\/nordyn.se\/wp-content\/plugins\/translatepress-multilingual\/assets\/flags\/4x3\/sv_SE.svg\" class=\"trp-flag-image\" alt=\"\" role=\"presentation\" loading=\"lazy\" \/> <span class=\"trp-language-item-name\" data-no-translation>Swedish<\/span>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n<style id=\"trp-language-switcher-shortcode-custom-css\">.trp-language-switcher-container, .trp-language-switcher { background: none !important; border: medium !important; box-shadow: none !important; margin: 0px !important; padding: 0px !important; width: auto !important; }\n.trp-language-switcher .trp-ls-shortcode-current-language { display: none !important; }\n.trp-language-switcher .trp-ls-shortcode-language { display: flex !important; flex-direction: row !important; gap: 20px !important; position: static !important; visibility: visible !important; opacity: 1 !important; background: none !important; border: medium !important; width: auto !important; padding: 0px !important; margin: 0px !important; transform: none !important; }\n.trp-language-switcher .trp-ls-shortcode-language a { display: inline-block !important; text-decoration: none !important; font-size: 0px !important; color: transparent !important; padding: 4px !important; margin: 0px !important; border-bottom-width: 2px !important; border-bottom-style: solid !important; border-bottom-color: transparent !important; cursor: pointer !important; opacity: 0.5 !important; transition: opacity 0.3s !important; background: none !important; }\n.trp-language-switcher .trp-ls-shortcode-language a:hover { transform: translateY(-1px); opacity: 1 !important; }\n.trp-language-switcher .trp-ls-shortcode-language a::after { font-size: 26px !important; line-height: 1 !important; display: block !important; font-style: normal !important; visibility: visible !important; color: rgb(255, 255, 255) !important; text-indent: 0px !important; }\n.trp-language-switcher .trp-ls-shortcode-language a:not([href*=\"\/en\/\"])::after { content: \"\ud83c\uddf8\ud83c\uddea\" !important; }\n.trp-language-switcher .trp-ls-shortcode-language a[href*=\"\/en\/\"]::after { content: \"\ud83c\uddfa\ud83c\uddf8\" !important; }\n.trp-language-switcher .trp-ls-shortcode-language a.trp-ls-active-language { opacity: 1 !important; border-bottom-color: rgb(255, 255, 255) !important; }<\/style>\n <\/div>\n\n <div class=\"socials\">\n <a class=\"nav-animate\" href=\"#\" target=\"_blank\" rel=\"noopener\">\n Facebook\n <span class=\"extIcon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M7 17L17 7\"\/><path d=\"M10 7h7v7\"\/><\/svg><\/span>\n <\/a>\n <a class=\"nav-animate\" href=\"https:\/\/www.facebook.com\/share\/14V1f9rHaeL\/?mibextid=wwXIfr\" target=\"_blank\" rel=\"noopener nofollow\">\n LinkedIn\n <span class=\"extIcon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M7 17L17 7\"\/><path d=\"M10 7h7v7\"\/><\/svg><\/span>\n <\/a>\n <a class=\"nav-animate\" href=\"https:\/\/www.instagram.com\/nordyn.se?igsh=bzVwdHhudTRlOW9s&utm_source=qr\" target=\"_blank\" rel=\"noopener\">\n Instagram\n <span class=\"extIcon\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M7 17L17 7\"\/><path d=\"M10 7h7v7\"\/><\/svg><\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <div class=\"menuCTA\">\n <span class=\"menuCTA-text\">Intresserad av ett samarbete<\/span>\n <br>\n <a class=\"nav-animate\" href=\"\/kontakt\">\n Kontakta oss\n <span class=\"ctaArrow\" aria-hidden=\"true\"><svg viewBox=\"0 0 24 24\"><path d=\"M5 12h12\"\/><path d=\"M13 6l6 6-6 6\"\/><\/svg><\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <\/div>\n<\/div>\n\n<main>\n <section class=\"case-page-section\">\n \n <div class=\"case-page-header\">\n <h1 class=\"case-page-title\">V\u00e5ra Case<\/h1>\n <p class=\"case-page-intro\">Vi bygger digitala upplevelser som kombinerar strategi, design och teknik. H\u00e4r \u00e4r ett urval av v\u00e5ra senaste projekt d\u00e4r vi hj\u00e4lpt f\u00f6retag att v\u00e4xa online.<\/p>\n <\/div>\n\n <!-- CASE 1: Rama 2 Thai -->\n <article class=\"case-block\">\n <div class=\"case-media-wrapper\">\n <div class=\"browser-header\">\n <div class=\"browser-dots\"><span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><\/div>\n <div class=\"browser-address\"><\/div>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/nordyn.se\/wp-content\/uploads\/2026\/01\/Skarmavbild-2026-01-14-kl.-23.47.47.png\" alt=\"Rama 2 Thai webbdesign\" class=\"case-img-full\">\n <\/div>\n\n <div class=\"case-content\">\n <div class=\"case-meta\">\n <h2 class=\"case-name\">Rama 2 Thai<\/h2>\n <ul class=\"case-meta-list\">\n <li class=\"meta-item\"><h4>Kund<\/h4><p>Rama 2 Thai AB<\/p><\/li>\n <li class=\"meta-item\"><h4>Tj\u00e4nster<\/h4><p>Webbdesign, WordPress, SEO, Menyhantering<\/p><\/li>\n <li class=\"meta-item\"><h4>Status<\/h4><p>Lanserad 2025<\/p><\/li>\n <\/ul>\n <\/div>\n <div class=\"case-body\">\n <h3>Uppdrag<\/h3>\n <p>Rama 2 Thai beh\u00f6vde en modern, tydlig och l\u00e4ttsk\u00f6tt webbplats som speglar restaurangens autentiska k\u00e4nsla och samtidigt g\u00f6r det enkelt f\u00f6r kunder att hitta meny, lunch, kontaktuppgifter och onlinebest\u00e4llning.<\/p>\n <p>M\u00e5let var en snabb, stilren och funktionell webbplats med fokus p\u00e5 anv\u00e4ndarv\u00e4nlighet \u2013 s\u00e4rskilt p\u00e5 mobil.<\/p>\n\n <h3>Vad som genomf\u00f6rdes<\/h3>\n <ul class=\"process-list\">\n <li class=\"process-item\">\n <h4>1. Struktur & strategi<\/h4>\n <p>Tydlig informationsarkitektur (meny, lunch, kontakt, best\u00e4llning) med fokus p\u00e5 snabb \u00e5tkomst och enkel navigering. Anpassad f\u00f6r b\u00e5de nya och \u00e5terkommande g\u00e4ster.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>2. Design & visuellt uttryck<\/h4>\n <p>Modern och avskalad design. F\u00e4rgval och typografi i linje med restaurangens varum\u00e4rke. Fokus p\u00e5 inneh\u00e5ll, bilder och tydlighet.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>3. Webbplatsutveckling<\/h4>\n <p>Byggd i WordPress f\u00f6r enkel administration. Fullt responsiv (mobil, surfplatta, desktop) och optimerad f\u00f6r prestanda och snabba laddtider.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>4. Meny & lunchmeny<\/h4>\n <p>Digital huvudmeny anpassad f\u00f6r mobil. Separat lunchmeny f\u00f6r tydlig presentation av dagens\/lunchr\u00e4tter. Enkelt att uppdatera internt vid meny\u00e4ndringar.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>5. Onlinebest\u00e4llning<\/h4>\n <p>Strategisk l\u00e4nkning till befintlig extern best\u00e4llningstj\u00e4nst f\u00f6r en snabb v\u00e4g fr\u00e5n meny till best\u00e4llning utan teknisk friktion.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>6. Kontaktsida & formul\u00e4r<\/h4>\n <p>Skr\u00e4ddarsydd kontaktsida med formul\u00e4r f\u00f6r fr\u00e5gor, feedback och \u00e4renden. Inskickade formul\u00e4r skickas automatiskt till utvald e-postadress.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>7. Bildspel & visuellt inneh\u00e5ll<\/h4>\n <p>Bildspel integrerat p\u00e5 webbplatsen med bilder p\u00e5 mat, dryck och restaurangens fasad f\u00f6r att f\u00f6rst\u00e4rka identiteten.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>8. SEO & teknisk optimering<\/h4>\n <p>Grundl\u00e4ggande teknisk SEO med rena URL:er, meta-titlar och f\u00f6rb\u00e4ttrad lokal synlighet.<\/p>\n <\/li>\n <\/ul>\n <\/div>\n <\/div>\n <\/article>\n\n <!-- CASE 2: Nordisk Rekond -->\n <article class=\"case-block\">\n <div class=\"case-media-wrapper\">\n <div class=\"browser-header\">\n <div class=\"browser-dots\"><span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><\/div>\n <div class=\"browser-address\"><\/div>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/nordyn.se\/wp-content\/uploads\/2026\/01\/Skarmavbild-2026-01-15-kl.-00.01.05.png\" alt=\"Nordisk Rekond webbplats\" class=\"case-img-full\">\n <\/div>\n\n <div class=\"case-content\">\n <div class=\"case-meta\">\n <h2 class=\"case-name\">Nordisk Rekond<\/h2>\n <ul class=\"case-meta-list\">\n <li class=\"meta-item\"><h4>Kund<\/h4><p>Nordisk Rekond<\/p><\/li>\n <li class=\"meta-item\"><h4>Tj\u00e4nster<\/h4><p>Webbdesign, Konverteringsoptimering, Lokal SEO<\/p><\/li>\n <\/ul>\n <\/div>\n <div class=\"case-body\">\n <h3>Behovsanalys & m\u00e5l<\/h3>\n <p>Nordisk Rekond beh\u00f6vde en webbplats som konverterar bes\u00f6kare till bokningar, tydligt f\u00f6rklarar tj\u00e4nster och priser, och fungerar perfekt p\u00e5 mobil. Fokus l\u00e5g p\u00e5 bokningsfl\u00f6de, tydlighet och lokal n\u00e4rvaro.<\/p>\n\n <h3>Process & Genomf\u00f6rande<\/h3>\n <ul class=\"process-list\">\n <li class=\"process-item\">\n <h4>Struktur & anv\u00e4ndarfl\u00f6de<\/h4>\n <p>Vi tog fram en struktur som leder bes\u00f6karen r\u00e4tt direkt: Startsida med tydligt v\u00e4rdeerbjudande, tj\u00e4nstesidor med f\u00e4rdiga paket och enkel bokning utan friktion.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>Design & varum\u00e4rkesuttryck<\/h4>\n <p>Ren, modern och f\u00f6rtroendeingivande design. F\u00e4rgval och typografi som signalerar kvalitet. Designen \u00e4r framtagen f\u00f6r att k\u00e4nnas seri\u00f6s, lokal och premium.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>Teknisk utveckling<\/h4>\n <p>Byggd i WordPress f\u00f6r flexibilitet. Fullt responsiv och optimerad laddtid. Stabil teknisk grund utan \u00f6verbelastning av plugins.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>Bokning & konvertering<\/h4>\n <p>Tydliga CTA-knappar (Boka, Kontakta, F\u00e5 pris). Enkel kontaktv\u00e4g f\u00f6r offertf\u00f6rfr\u00e5gningar och en struktur som g\u00f6r det l\u00e4tt att f\u00f6rst\u00e5 paketen.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>Lokal SEO & synlighet<\/h4>\n <p>Optimerad f\u00f6r lokala s\u00f6kningar (Huddinge\/Stuvsta) med strukturerat inneh\u00e5ll som fungerar bra f\u00f6r Google.<\/p>\n <\/li>\n <\/ul>\n\n <h3>Resultat<\/h3>\n <p>En webbplats som konverterar bes\u00f6k till faktiska bokningar, med tydligare tj\u00e4nsteutbud och ett starkare varum\u00e4rkesintryck lokalt.<\/p>\n <\/div>\n <\/div>\n <\/article>\n\n <!-- CASE 3: MindNote -->\n <article class=\"case-block\">\n <div class=\"case-media-wrapper\">\n <div class=\"browser-header\">\n <div class=\"browser-dots\"><span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span><\/div>\n <div class=\"browser-address\"><\/div>\n <\/div>\n <img decoding=\"async\" src=\"https:\/\/nordyn.se\/wp-content\/uploads\/2026\/01\/Skarmavbild-2026-01-14-kl.-23.58.22.png\" alt=\"MindNote E-handel\" class=\"case-img-full\">\n <\/div>\n\n <div class=\"case-content\">\n <div class=\"case-meta\">\n <h2 class=\"case-name\">MindNote<\/h2>\n <ul class=\"case-meta-list\">\n <li class=\"meta-item\"><h4>Kund<\/h4><p>MindNote<\/p><\/li>\n <li class=\"meta-item\"><h4>Tj\u00e4nster<\/h4><p>E-handel, WooCommerce, Branding<\/p><\/li>\n <\/ul>\n <\/div>\n <div class=\"case-body\">\n <h3>Behov & m\u00e5lbild<\/h3>\n <p>MindNote beh\u00f6vde en webbplats som f\u00f6rmedlar ett premium och genomt\u00e4nkt varum\u00e4rke f\u00f6r att s\u00e4lja fysiska produkter till studenter. M\u00e5let var att bygga en stilren e-handelsplattform med fokus p\u00e5 anv\u00e4ndarupplevelse och konvertering.<\/p>\n\n <h3>Process & Genomf\u00f6rande<\/h3>\n <ul class=\"process-list\">\n <li class=\"process-item\">\n <h4>Struktur & anv\u00e4ndarresa<\/h4>\n <p>Webbplatsen planerades med en tydlig k\u00f6presa: Startsida som f\u00f6rklarar v\u00e4rdet, produktsidor med fokus p\u00e5 funktion och enkel v\u00e4g till k\u00f6p.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>Design & visuellt uttryck<\/h4>\n <p>Lyxig och minimalistisk design med luftiga ytor. F\u00e4rgval som signalerar fokus och struktur. Designen differentierar MindNote fr\u00e5n generiska anteckningsb\u00f6cker.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>Teknisk l\u00f6sning & e-handel<\/h4>\n <p>Byggd i WordPress med WooCommerce. Stabil och skalbar e-handelsl\u00f6sning med enkel hantering av produkter och lager.<\/p>\n <\/li>\n <li class=\"process-item\">\n <h4>Produktpresentation<\/h4>\n <p>Tydliga produktsidor med fokus p\u00e5 anv\u00e4ndningsomr\u00e5de. Bilder och layout som lyfter produktens kvalitet.<\/p>\n <\/li>\n <\/ul>\n\n <h3>Resultat<\/h3>\n <p>En stilren och professionell e-handelswebbplats med tydlig positionering som premium studieprodukt och en smidig k\u00f6pupplevelse.<\/p>\n <\/div>\n <\/div>\n <\/article>\n\n <\/section>\n<\/main>\n\n<section class=\"cta-section\">\n <div class=\"cta-container\">\n <h2 class=\"cta-title\">Redo att ta n\u00e4sta steg digitalt?<\/h2>\n <p class=\"cta-text\">Vi hj\u00e4lper er att f\u00f6rverkliga era id\u00e9er med strategi, design och teknik. H\u00f6r av er s\u00e5 ber\u00e4ttar vi mer.<\/p>\n <a href=\"\/kontakt\" class=\"cta-btn nav-animate\">\n Kontakta oss <span class=\"arrow\">\u2192<\/span>\n <\/a>\n <\/div>\n<\/section>\n\n<footer class=\"footer\">\n<div class=\"footer-container\">\n<div class=\"footer-main\">\n<div class=\"footer-brand\">\n<div class=\"footer-logo\"><svg version=\"1.0\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"600pt\" height=\"167pt\" viewBox=\"0 0 600 167\" preserveAspectRatio=\"xMidYMid meet\"><g transform=\"translate(0,167) scale(0.1,-0.1)\" fill=\"currentColor\" stroke=\"none\"><path d=\"M4905 1460 c-59 -24 -91 -101 -69 -165 16 -48 31 -63 79 -79 147 -51 244 154 112 234 -33 21 -87 25 -122 10z\"\/><path d=\"M3335 1261 l-50 -6 -3 -133 -3 -132 -42 7 c-122 22 -219 1 -282 -62 -52 -51 -65 -92 -65 -201 0 -133 34 -210 110 -249 56 -29 169 -40 277 -26 54 8 107 12 118 11 11 -1 34 -3 50 -4 l30 -1 3 403 2 402 -47 -2 c-27 0 -70 -4 -98 -7z m-77 -462 c19 -7 22 -16 22 -63 0 -30 -4 -57 -9 -60 -22 -14 -127 -16 -151 -4 -47 25 -52 119 -7 138 23 10 106 3 145 -11z\"\/><path d=\"M1135 1000 c-85 -14 -154 -39 -165 -61 -6 -11 -9 -107 -8 -246 l3 -228 98 -3 97 -3 0 154 c0 124 3 157 15 167 8 6 43 13 79 13 50 2 68 -2 85 -17 20 -18 21 -29 21 -168 l0 -149 98 3 97 3 -1 180 c0 171 -1 183 -26 236 -41 89 -96 117 -243 124 -49 2 -117 0 -150 -5z\"\/><path d=\"M1825 986 c-212 -98 -212 -412 0 -512 72 -34 208 -34 281 0 205 96 205 416 0 512 -73 34 -209 34 -281 0z m218 -195 c15 -14 22 -34 22 -61 0 -55 -29 -81 -94 -88 -46 -4 -53 -2 -81 26 -21 21 -30 40 -30 62 0 22 9 41 30 62 28 28 35 30 81 26 34 -4 58 -12 72 -27z\"\/><path d=\"M2465 1003 c-27 -2 -60 -6 -72 -8 l-23 -5 0 -266 0 -265 98 3 97 3 -3 125 -4 125 30 28 c32 30 70 37 134 24 l37 -8 15 53 c26 90 38 180 27 191 -5 5 -37 8 -70 5 -45 -3 -72 -12 -111 -36 -28 -18 -54 -32 -56 -32 -3 0 -5 10 -4 23 4 40 0 47 -22 45 -13 -1 -45 -3 -73 -5z\"\/><path d=\"M4485 999 c-84 -12 -153 -37 -165 -60 -6 -11 -9 -107 -8 -246 l3 -228 95 0 95 0 5 160 5 160 50 7 c28 5 64 6 82 3 56 -10 63 -32 63 -193 l0 -143 98 3 97 3 3 130 c5 225 -26 333 -106 374 -74 38 -189 48 -317 30z\"\/><path d=\"M3574 985 c-16 -41 139 -430 193 -487 l26 -27 -37 -88 c-20 -48 -36 -93 -36 -99 0 -6 37 -27 83 -46 61 -27 85 -33 94 -24 6 6 40 83 76 171 86 213 128 315 193 467 30 70 54 132 54 137 0 16 -195 15 -207 -1 -6 -7 -34 -72 -63 -145 -58 -143 -66 -160 -75 -152 -3 3 -19 69 -37 145 -17 76 -35 145 -41 152 -15 19 -216 17 -223 -3z\"\/><\/g><\/svg><\/div>\n<p class=\"footer-tagline\">Nordyn Webbyr\u00e5 Stockholm<\/p>\n<div class=\"footer-contact\"><a href=\"mailto:info@nordyn.se\">info@nordyn.se<\/a><br><a href=\"tel:+46722075505\">+46 72-207 55 05<\/a><br>Stockholm, Sverige<\/div>\n<\/div>\n<div class=\"footer-column\">\n<h4>Tj\u00e4nster<\/h4>\n<div class=\"footer-links\"><a href=\"\/Webbdesign\">Webbdesign<\/a><a href=\"\/E-handel\">E-handel<\/a><a href=\"\/SEO\">SEO<\/a><a href=\"\/Branding\">Branding<\/a><\/div>\n<\/div>\n<div class=\"footer-column\">\n<h4>F\u00f6retag<\/h4>\n<div class=\"footer-links\"><a href=\"\/om-nordyn\">Om Nordyn<\/a><a href=\"\/lediga-tjanster\">Lediga tj\u00e4nster<\/a><a href=\"\/blogg\">Blogg<\/a><\/div>\n<\/div>\n<div class=\"footer-column\">\n<h4>Sociala medier<\/h4>\n<div class=\"footer-links\"><a href=\"https:\/\/www.facebook.com\/share\/14V1f9rHaeL\/?mibextid=wwXIfr\" rel=\"nofollow noopener\" target=\"_blank\">Facebook<\/a><a href=\"#\">LinkedIn<\/a><a href=\"https:\/\/www.instagram.com\/nordyn.se?igsh=bzVwdHhudTRlOW9s&utm_source=qr\">Instagram<\/a><\/div>\n<\/div>\n<\/div>\n<div class=\"footer-bottom\">\n<a href=\"\/Integritetspolicy\">Integritetspolicy<\/a><a href=\"\/Cookiepolicy\">Cookiepolicy<\/a><a href=\"\/Anvandarvillkor\">Anv\u00e4ndarvillkor<\/a><a href=\"\/GDPR\">GDPR<\/a>\n<\/div>\n<\/div>\n<\/footer>\n\n<script>\n\/\/ MENY OCH HEADER LOGIK\ndocument.addEventListener('DOMContentLoaded', () => {\n const toggle = document.getElementById('menuToggle');\n const close = document.getElementById('menuClose');\n const overlay = document.getElementById('menuOverlay');\n const mainHeader = document.getElementById('mainHeader');\n const headerTagline = document.getElementById('headerTagline');\n \n function openMenu() {\n mainHeader.classList.add('hidden'); \/\/ D\u00f6lj header\n overlay.classList.add('open');\n overlay.classList.remove('closing');\n document.body.style.overflow = 'hidden';\n }\n \n function closeMenu() {\n mainHeader.classList.remove('hidden'); \/\/ Visa header\n overlay.classList.remove('open');\n overlay.classList.add('closing');\n document.body.style.overflow = '';\n setTimeout(() => {\n overlay.classList.remove('closing');\n }, 600);\n }\n \n \/\/ FIX: L\u00e4gg till blur p\u00e5 klick f\u00f6r att d\u00f6da bl\u00e5 markering\n if(toggle) {\n toggle.addEventListener('click', function(e) {\n if(e) e.preventDefault();\n this.blur();\n openMenu();\n });\n }\n \n if(close) {\n close.addEventListener('click', function(e) {\n if(e) e.preventDefault();\n this.blur();\n closeMenu();\n });\n }\n\n \/\/ Header fade vid scroll\n if (headerTagline) {\n window.addEventListener('scroll', () => {\n if (window.scrollY > 10) { headerTagline.classList.add('fade-out'); } \n else { headerTagline.classList.remove('fade-out'); }\n });\n }\n});\n\n\/\/ FUNKTION F\u00d6R ATT \u00d6PPNA\/ST\u00c4NGA TJ\u00c4NSTER MENYN (Samma som startsidan)\nfunction toggleSubmenu(event) {\n event.preventDefault();\n event.stopPropagation();\n \n \/\/ JS-hack: Ta bort fokus omedelbart\n if (event.currentTarget) {\n event.currentTarget.blur();\n }\n \n const menuItem = document.getElementById('servicesMenuItem');\n menuItem.classList.toggle('has-expanded');\n}\n<\/script>\n<\/body>\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>V\u00e5ra Case \u2014 Nordyn Digitalbyr\u00e5 \/ Webbbyr\u00e5 Stockholm Kontakta oss Meny + Digitalbyr\u00e5 \/ Webbbyr\u00e5 Stockholm Meny \u00d7 Startsida Case Tj\u00e4nster Webbdesign […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"inline_featured_image":false,"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1369","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/1369","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/comments?post=1369"}],"version-history":[{"count":15,"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/1369\/revisions"}],"predecessor-version":[{"id":1868,"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/pages\/1369\/revisions\/1868"}],"wp:attachment":[{"href":"https:\/\/nordyn.se\/en\/wp-json\/wp\/v2\/media?parent=1369"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}