{"id":6024,"date":"2026-04-23T19:55:16","date_gmt":"2026-04-23T16:55:16","guid":{"rendered":"https:\/\/digiverkosto.fi\/?p=6024"},"modified":"2026-05-01T13:12:20","modified_gmt":"2026-05-01T10:12:20","slug":"kemora","status":"publish","type":"post","link":"https:\/\/digiverkosto.fi\/en\/kemora\/","title":{"rendered":"chemo"},"content":{"rendered":"<div class=\"wp-block-group is-layout-constrained wp-container-core-group-is-layout-f0623e59 wp-block-group-is-layout-constrained\">\n<section class=\"section case-intro\">\n    <div class=\"reveal\">\n        <h1 class=\"case-title\">Case Study: Kemora \u2013 Track experience in the digital age<\/h1>\n        \n        <div class=\"case-meta-grid\">\n            <div class=\"meta-item\">\n                <span class=\"meta-label\">Customer<\/span>\n                <span class=\"meta-value\">Kemora Motor Circuit<\/span>\n            <\/div>\n            <div class=\"meta-item\">\n                <span class=\"meta-label\">Implementer<\/span>\n                <span class=\"meta-value\">digital network<\/span>\n            <\/div>\n            <div class=\"meta-item\">\n                <span class=\"meta-label\">Focus<\/span>\n                <span class=\"meta-value\">Customized Technology &amp; Online Store<\/span>\n            <\/div>\n        <\/div>\n\n        <div class=\"case-content-wrapper\">\n            <h2 class=\"content-heading\">Introduction: From the Web 1.0 era to the present day<\/h2>\n            <p class=\"section-subtitle\" style=\"text-align: left; margin-left: 0;\">\n                Kemora Motorsport Circuit is an iconic destination, but its digital facade was behind its time. The old website did not serve the modern visitor, and the biggest challenge was to find a calendar solution that would be stylish but easy for the administrator. \n                <br><br>\n                We wanted to create a whole that not only looks good, but also automates the everyday life of entrepreneurs and makes it easier for hobbyists to do business.\n            <\/p>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    .case-intro {\n        padding: 120px 5vw 60px;\n        background-color: #070707;\n        color: #f5f5f7;\n    }\n\n    .case-title {\n        font-size: clamp(40px, 6vw, 72px);\n        font-weight: 700;\n        text-align: center;\n        margin-bottom: 60px;\n        letter-spacing: -0.02em;\n        background: linear-gradient(180deg, #fff 0%, #86868b 100%);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .case-meta-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 20px;\n        max-width: 1100px;\n        margin: 0 auto 80px;\n        padding: 30px;\n        border-radius: 24px;\n        background: #161617;\n        border: 1px solid #2c2c2e;\n    }\n\n    .meta-item {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n    }\n\n    .meta-label {\n        color: #0071e3;\n        font-size: 12px;\n        text-transform: uppercase;\n        letter-spacing: 1px;\n        font-weight: 600;\n    }\n\n    .meta-value {\n        font-size: 18px;\n        color: #fff;\n        font-weight: 500;\n    }\n\n    .case-content-wrapper {\n        max-width: 800px;\n        margin: 0 auto;\n    }\n\n    .content-heading {\n        font-size: 32px;\n        font-weight: 600;\n        margin-bottom: 30px;\n        color: #fff;\n    }\n\n    @media (max-width: 850px) {\n        .case-meta-grid {\n            grid-template-columns: 1fr;\n            text-align: center;\n            gap: 30px;\n        }\n    }\n<\/style>\n\n\n\n<section class=\"section case-visuals\">\n    <div class=\"reveal\">\n        <div class=\"case-image-container\">\n            <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-20-at-18.56.12.png\" alt=\"Kemora Etusivu Hero\" class=\"case-image\">\n        <\/div>\n\n        <div class=\"case-content-wrapper\">\n            <h2 class=\"content-heading\">Modern look<\/h2>\n            <div class=\"case-text\">\n                <p>The new website has a dark theme with orange details. This creates a believability appropriate for the racetrack and makes browsing easier as it is easier on the eyes.<\/p>\n                \n                <p>We used drone footage to give visitors an immediate sense of the scale and profile of the track, something that is impossible to convey with ground-level images alone. The site is designed to cater to both new visitors and drivers who regularly practice at the track.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    .case-visuals {\n        padding: 60px 5vw;\n        background-color: #070707;\n        color: #f5f5f7;\n    }\n\n    .case-image-container {\n        max-width: 1100px;\n        margin: 0 auto 60px;\n        border-radius: 32px;\n        overflow: hidden;\n        border: 1px solid #2c2c2e;\n        box-shadow: 0 20px 40px rgba(0,0,0,0.4);\n    }\n\n    .case-image {\n        width: 100%;\n        height: auto;\n        display: block;\n        transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);\n    }\n\n    .case-image-container:hover .case-image {\n        transform: scale(1.02);\n    }\n\n    .case-content-wrapper {\n        max-width: 800px;\n        margin: 0 auto;\n    }\n\n    .case-text p {\n        color: #86868b;\n        font-size: 19px;\n        line-height: 1.6;\n        margin-bottom: 25px;\n    }\n\n    .case-text strong {\n        color: #fff;\n        font-weight: 600;\n    }\n\n    .content-heading {\n        font-size: 32px;\n        font-weight: 600;\n        margin-bottom: 25px;\n        color: #fff;\n    }\n\n    @media (max-width: 850px) {\n        .case-image-container {\n            border-radius: 16px;\n        }\n        \n        .case-text p {\n            font-size: 17px;\n        }\n    }\n<\/style>\n\n\n\n<section class=\"section case-tech\">\n    <div class=\"reveal\">\n        <div class=\"case-image-container tech-preview\">\n            <div class=\"browser-bar\">\n                <span class=\"dot\"><\/span><span class=\"dot\"><\/span><span class=\"dot\"><\/span>\n                <span class=\"bar-title\">Control Panel: Calendar Editing<\/span>\n            <\/div>\n            <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-19-at-19.00.50.png\" alt=\"Kalenterin Backend\" class=\"case-image\">\n        <\/div>\n\n        <div class=\"case-content-wrapper\">\n            <div class=\"funnel-tag\" style=\"margin-bottom: 20px;\">Customized elements<\/div>\n            <h2 class=\"content-heading\">Calendar<\/h2>\n            <div class=\"case-text\">\n                <p>Because the ready-made calendar plugins on the market were too rigid and full of unnecessary fields, we decided to build the calendar ourselves. This gave the customer full control over the functionality.<\/p>\n                \n                <p><strong>The backend view has been stripped of all unnecessary elements<\/strong>, making updating events quick and easy. This is an excellent example of how a digital network utilizes the potential of the WordPress platform by building what ready-made solutions don&#039;t offer.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    .case-tech {\n        padding: 60px 5vw;\n        background-color: #070707;\n        color: #f5f5f7;\n    }\n\n    \/* Selainmaisun tyylittely backend-kuvalle *\/\n    .tech-preview {\n        background: #1c1c1e;\n        border: 1px solid #3a3a3c;\n        max-width: 1100px;\n        margin: 0 auto 60px;\n        border-radius: 20px;\n        overflow: hidden;\n        box-shadow: 0 30px 60px rgba(0,0,0,0.5);\n    }\n\n    .browser-bar {\n        background: #2c2c2e;\n        padding: 12px 20px;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        border-bottom: 1px solid #3a3a3c;\n    }\n\n    .dot {\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        background: #424245;\n    }\n\n    .bar-title {\n        margin-left: 10px;\n        font-size: 13px;\n        color: #86868b;\n        font-family: monospace;\n    }\n\n    .case-image {\n        width: 100%;\n        height: auto;\n        display: block;\n    }\n\n    .case-content-wrapper {\n        max-width: 800px;\n        margin: 0 auto;\n    }\n\n    .case-text p {\n        color: #86868b;\n        font-size: 19px;\n        line-height: 1.6;\n        margin-bottom: 25px;\n    }\n\n    .case-text strong {\n        color: #fff;\n    }\n\n    .content-heading {\n        font-size: 32px;\n        font-weight: 600;\n        margin-bottom: 25px;\n        color: #fff;\n    }\n\n    @media (max-width: 850px) {\n        .case-text p {\n            font-size: 17px;\n        }\n    }\n<\/style>\n\n\n\n<section class=\"section case-ux\">\n    <div class=\"reveal\">\n        <div class=\"case-image-container ux-preview\">\n            <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-19-at-18.52.37.png\" alt=\"Kalenterin Frontend\" class=\"case-image\">\n        <\/div>\n\n        <div class=\"case-content-wrapper\">\n            <div class=\"funnel-tag\" style=\"margin-bottom: 20px; color: #32d74b; border-color: rgba(50, 215, 75, 0.3);\">User experience<\/div>\n            <h2 class=\"content-heading\">User experience at the center<\/h2>\n            <div class=\"case-text\">\n                <p>The calendar appears clear and fully mobile-optimized to the visitor. Events open neatly <strong>to the popup window<\/strong>, which provides all the necessary information at a glance without unnecessary page loading.<\/p>\n                \n                <p>In addition, the website integrated a Foreca weather forecast and a direct link to a nearby weather camera. This is not only a visual addition, but also <strong>reduce customer service load<\/strong> by eliminating repeated queries about weather conditions. <br>Navigation has been kept straightforward so that the driver gets the information they need in seconds \u2013 even on mobile while on the track.<\/p>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    .case-ux {\n        padding: 60px 5vw;\n        background-color: #070707;\n        color: #f5f5f7;\n    }\n\n    .ux-preview {\n        max-width: 1100px;\n        margin: 0 auto 60px;\n        border-radius: 32px;\n        overflow: hidden;\n        border: 1px solid #2c2c2e;\n        background: #161617;\n        box-shadow: 0 25px 50px rgba(0,0,0,0.3);\n    }\n\n    .case-image {\n        width: 100%;\n        height: auto;\n        display: block;\n    }\n\n    .case-content-wrapper {\n        max-width: 800px;\n        margin: 0 auto;\n    }\n\n    .case-text p {\n        color: #86868b;\n        font-size: 19px;\n        line-height: 1.6;\n        margin-bottom: 25px;\n    }\n\n    .case-text strong {\n        color: #fff;\n    }\n\n    .content-heading {\n        font-size: 32px;\n        font-weight: 600;\n        margin-bottom: 25px;\n        color: #fff;\n    }\n\n    @media (max-width: 850px) {\n        .case-text p {\n            font-size: 17px;\n        }\n    }\n<\/style>\n\n\n\n<section class=\"section case-ecommerce\">\n    <div class=\"reveal\">\n        <div class=\"case-image-container shop-preview\">\n            <img decoding=\"async\" src=\"https:\/\/digiverkosto.fi\/wp-content\/uploads\/2026\/04\/Screenshot-2026-04-19-at-18.52.58.png\" alt=\"Kemora Verkkokauppa\" class=\"case-image\">\n        <\/div>\n\n        <div class=\"case-content-wrapper\">\n            <div class=\"funnel-tag\" style=\"margin-bottom: 20px; color: #ff9f0a; border-color: rgba(255, 159, 10, 0.3); display: inline-block; padding: 4px 12px; border: 1px solid; border-radius: 100px; font-size: 14px;\">Trade<\/div>\n            <h2 class=\"content-heading\">Online store: Making training fees easier<\/h2>\n            <div class=\"case-text\">\n                <p>One of the most critical improvements was the digitalization of payment for training fees and overnight stays in the depot. An integrated online store allows payments to be made directly from the homepage.<\/p>\n                \n                <p>This eliminates manual invoicing and ensures that payments are easily handled before arriving at the track. It is a straightforward solution that serves both the entrepreneur and the track user.<\/p>\n                <p>The Kemora Motor Circuit website will be further updated with new features that will benefit all parties visiting the circuit. Thanks to close cooperation, we will be able to stretch the boundaries of what a Finnish motor circuit should have.<\/p>\n            <\/div>\n        <\/div>\n\n        <div class=\"case-summary-card\">\n            <h2 class=\"summary-heading\">Result<\/h2>\n            <p class=\"summary-text\">\n                The Kemora project shows how a traditional operator can be brought into the modern world and make the everyday lives of track staff and lessees easier. The website is not just a \u201dbusiness card\u201d, but a tool that automates financial transactions and facilitates maintenance. \n                <br><br>\n                <strong>When a ready-made solution cannot be found, the easiest thing to do is to make it yourself.<\/strong>\n            <\/p>\n        <\/div>\n    <\/div>\n<\/section>\n\n<style>\n    .case-ecommerce {\n        padding: 60px 5vw;\n        background-color: #070707;\n        color: #f5f5f7;\n        overflow: hidden;\n    }\n\n    .shop-preview {\n        max-width: 1100px;\n        margin: 0 auto 40px;\n        border-radius: 24px; \/* Hieman pienempi py\u00f6ristys mobiiliin *\/\n        overflow: hidden;\n        border: 1px solid #2c2c2e;\n        box-shadow: 0 20px 40px rgba(0,0,0,0.4);\n    }\n\n    .case-image {\n        width: 100%;\n        height: auto;\n        display: block;\n    }\n\n    .case-content-wrapper {\n        max-width: 800px;\n        margin: 0 auto;\n    }\n\n    .content-heading {\n        font-size: clamp(28px, 5vw, 42px);\n        line-height: 1.2;\n        margin-bottom: 24px;\n        font-weight: 700;\n    }\n\n    .case-text p {\n        font-size: 18px;\n        line-height: 1.6;\n        color: #86868b;\n        margin-bottom: 20px;\n    }\n\n    .case-summary-card {\n        max-width: 800px;\n        margin: 60px auto 0;\n        padding: 40px 24px; \/* Tiivistetty mobiiliin *\/\n        background: linear-gradient(145deg, #161617 0%, #070707 100%);\n        border-radius: 32px;\n        border: 1px solid #2c2c2e;\n        text-align: center;\n    }\n\n    .summary-heading {\n        font-size: clamp(32px, 6vw, 48px);\n        font-weight: 700;\n        margin-bottom: 20px;\n        background: linear-gradient(180deg, #fff 0%, #0071e3 100%);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n    }\n\n    .summary-text {\n        color: #86868b;\n        font-size: clamp(16px, 4vw, 20px);\n        line-height: 1.5;\n    }\n\n    .summary-text strong {\n        color: #fff;\n    }\n\n    \/* Mobiilioptimointi *\/\n    @media (max-width: 768px) {\n        .case-ecommerce {\n            padding: 40px 20px;\n        }\n\n        .shop-preview {\n            border-radius: 16px;\n            margin-bottom: 30px;\n        }\n\n        .case-summary-card {\n            padding: 30px 20px;\n            margin-top: 40px;\n            border-radius: 24px;\n        }\n\n        .case-text p {\n            font-size: 17px; \/* Hieman pienempi teksti puhelimelle *\/\n        }\n    }\n<\/style>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Case Study: Kemora \u2013 Ratakokemus digiaikaan Asiakas Kemoran moottorirata Toteuttaja digiverkosto Fokus R\u00e4\u00e4t\u00e4l\u00f6ity tekniikka &#038; Verkkokauppa Johdanto: Web 1.0 -aikakaudesta [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"site-sidebar-layout":"default","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":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","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":""},"categories":[37],"tags":[],"class_list":["post-6024","post","type-post","status-publish","format-standard","hentry","category-referenssi"],"acf":[],"_links":{"self":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/posts\/6024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/comments?post=6024"}],"version-history":[{"count":0,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/posts\/6024\/revisions"}],"wp:attachment":[{"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/media?parent=6024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/categories?post=6024"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/digiverkosto.fi\/en\/wp-json\/wp\/v2\/tags?post=6024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}