{"id":16,"date":"2026-08-11T07:19:52","date_gmt":"2026-08-11T07:19:52","guid":{"rendered":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/?page_id=16"},"modified":"2026-10-16T13:53:30","modified_gmt":"2026-10-16T13:53:30","slug":"kv","status":"publish","type":"page","link":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/?page_id=16","title":{"rendered":"[POISTA \u2013 vanha] KV"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"16\" class=\"elementor elementor-16\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1ca58e4 e-flex e-con-boxed e-con e-parent\" data-id=\"1ca58e4\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f08ee68 elementor-widget elementor-widget-html\" data-id=\"f08ee68\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  \/* Modern Premium Font Stack *\/\n  .custom-nav-wrapper, .spotlight-section {\n    font-family: \"Inter\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n  }\n\n  \/* Base styles for the top navigation section - Forced Full Width *\/\n  .custom-nav-wrapper {\n    background-color: #000000;\n    width: 100vw;\n    margin-left: calc(-50vw + 50%);\n    padding: 20px 40px;\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n    position: relative;\n    z-index: 10;\n  }\n\n  \/* SVG Logo Styling *\/\n  .interactive-logo {\n    height: 65px;\n    width: 65px;\n    display: block;\n    overflow: visible; \n  }\n\n  \/* The true half-circle shape of the logo *\/\n  #spotlight-curve {\n    transform-origin: 57px 50px; \n    will-change: transform;\n  }\n\n  \/* Completely pitch-black base section *\/\n  .spotlight-section {\n    height: 100vh;\n    width: 100vw;\n    margin-left: calc(-50vw + 50%);\n    background-color: #000000; \n    position: relative;\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    justify-content: flex-start; \n    padding: 0 40px;\n    box-sizing: border-box;\n    \n    \/* Shared mouse variables *\/\n    --mouse-x: -2000px;\n    --mouse-y: -2000px;\n  }\n\n  \/* THE INVERT SPOTLIGHT LAYER - Sharp edge, pure difference *\/\n  .spotlight-section::after {\n    content: \"\";\n    position: absolute;\n    top: 0; left: 0; right: 0; bottom: 0;\n    \n    \/* Sharp cutoff at 350px for a solid modern circle *\/\n    background: radial-gradient(\n      circle 350px at var(--mouse-x) var(--mouse-y),\n      #ffffff 0%,\n      #ffffff 350px,\n      transparent 351px\n    );\n    \n    mix-blend-mode: difference;\n    pointer-events: none; \/* Allows interacting with the elements beneath *\/\n    z-index: 5;\n    will-change: background;\n  }\n\n  \/* HERO CONTENT TEMPLATE *\/\n  .hero-content {\n    position: relative;\n    z-index: 1; \n    text-align: left;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    gap: 24px; \/* Refined breathing room *\/\n    color: #ffffff;\n    max-width: 1000px; \n  }\n\n  \/* Delicate, wide-tracked subtitle *\/\n  .subtitle {\n    font-size: clamp(0.9rem, 2vw, 1.1rem);\n    font-weight: 500;\n    margin: 0;\n    letter-spacing: 0.4em;\n    text-transform: uppercase;\n    opacity: 0.8;\n  }\n\n  \/* Tighter, sleeker main headline *\/\n  .reveal-text {\n    font-size: clamp(3.5rem, 9vw, 8rem);\n    font-weight: 700; \/* Pulled back from 900 for a more elegant weight *\/\n    margin: 0;\n    line-height: 1.05;\n    letter-spacing: -0.04em; \/* Tighter kerning feels more bespoke *\/\n  }\n\n  \/* Clean, highly readable description *\/\n  .hero-description {\n    font-size: clamp(1.1rem, 2vw, 1.4rem); \n    font-weight: 400;\n    line-height: 1.7;\n    margin: 0 0 15px 0;\n    max-width: 700px;\n    opacity: 0.7; \/* Softens the text to let the headline punch more *\/\n  }\n\n  \/* ROUNDED, PREMIUM CALL TO ACTION BUTTONS *\/\n  .cta-container {\n    display: flex;\n    gap: 20px;\n    flex-wrap: wrap;\n  }\n\n  .cta-btn {\n    border: 1px solid #ffffff; \n    border-radius: 50px; \/* Fully rounded pill shape *\/\n    padding: 16px 45px; \n    font-size: 1.05rem; \n    font-weight: 500;\n    text-decoration: none;\n    letter-spacing: 0.05em;\n    cursor: pointer;\n    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); \/* Ultra-smooth premium easing *\/\n  }\n\n  \/* Solid primary button *\/\n  .cta-btn.primary {\n    background: #ffffff;\n    color: #000000;\n  }\n\n  \/* Outlined secondary button *\/\n  .cta-btn.secondary {\n    background: transparent;\n    color: #ffffff;\n  }\n\n  \/* Elegant hover lift instead of a harsh scale *\/\n  .cta-btn:hover {\n    transform: translateY(-4px);\n    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.15);\n  }\n<\/style>\n\n<!-- Top Nav Bar -->\n<div class=\"custom-nav-wrapper\">\n  <svg class=\"interactive-logo\" id=\"k-logo\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n    <defs>\n      <!-- Clipping mask strictly bounds the rotating shape to the base -->\n      <clipPath id=\"k-bounds\">\n        <rect x=\"-20\" y=\"15\" width=\"140\" height=\"70\" \/>\n      <\/clipPath>\n    <\/defs>\n    <!-- Vertical static base of the 'k' -->\n    <rect x=\"15\" y=\"15\" width=\"20\" height=\"70\" fill=\"#ffffff\" \/>\n    \n    <!-- Rotating true half-circle wrapped in the clipping mask -->\n    <g clip-path=\"url(#k-bounds)\">\n      <path id=\"spotlight-curve\" d=\"M 40 15 A 35 35 0 0 1 40 85 Z\" fill=\"#ffffff\" \/>\n    <\/g>\n  <\/svg>\n<\/div>\n\n<!-- Main Hero Section -->\n<div class=\"spotlight-section\" id=\"hero-spotlight\">\n  \n  <div class=\"hero-content\">\n    <h2 class=\"subtitle\">Kohdevalo<\/h2>\n    <h1 class=\"reveal-text\">valolla on v\u00e4li\u00e4.<\/h1>\n    <p class=\"hero-description\">\n      This is a full width template section. The sharp spotlight floating above this text dynamically inverts colors, transforming the pitch black background to bright white while showcasing smooth, rounded interactive elements.\n    <\/p>\n    \n    <div class=\"cta-container\">\n      <a href=\"#\" class=\"cta-btn primary\">Get Started<\/a>\n      <a href=\"#\" class=\"cta-btn secondary\">Learn More<\/a>\n    <\/div>\n  <\/div>\n\n<\/div>\n\n<script>\n  document.addEventListener(\"DOMContentLoaded\", () => {\n    const kLogoSvg = document.getElementById(\"k-logo\");\n    const spotlightLogo = document.getElementById(\"spotlight-curve\");\n    const heroSpotlight = document.getElementById(\"hero-spotlight\");\n\n    let targetX = -2000;\n    let targetY = -2000;\n    let isRendering = false;\n\n    \/\/ High-performance logic routine to update styles per frame\n    const updateFrame = () => {\n      \/\/ 1. Pivot the half-circle logo\n      if (spotlightLogo && kLogoSvg) {\n        const svgRect = kLogoSvg.getBoundingClientRect();\n        const scaleX = svgRect.width \/ 100;\n        const scaleY = svgRect.height \/ 100;\n        \n        const pivotX = svgRect.left + (40 * scaleX);\n        const pivotY = svgRect.top + (50 * scaleY);\n        \n        const dx = targetX - pivotX;\n        const dy = targetY - pivotY;\n        \n        const angle = Math.atan2(dy, dx) * (180 \/ Math.PI) + 180;\n        \n        spotlightLogo.style.transform = `rotate(${angle}deg)`;\n      }\n\n      \/\/ 2. Track the mouse for the sharp invert spotlight\n      if (heroSpotlight) {\n        const sectionRect = heroSpotlight.getBoundingClientRect();\n        const x = targetX - sectionRect.left;\n        const y = targetY - sectionRect.top;\n        \n        heroSpotlight.style.setProperty('--mouse-x', `${x}px`);\n        heroSpotlight.style.setProperty('--mouse-y', `${y}px`);\n      }\n\n      \/\/ Allow the next frame to queue up\n      isRendering = false;\n    };\n\n    \/\/ Mouse listener passing data to the rendering routine\n    window.addEventListener(\"mousemove\", (e) => {\n      targetX = e.clientX;\n      targetY = e.clientY;\n      \n      if (!isRendering) {\n        requestAnimationFrame(updateFrame);\n        isRendering = true;\n      }\n    });\n  });\n<\/script>\t\t\t\t<\/div>\n\t\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>Kohdevalo valolla on v\u00e4li\u00e4. This is a full width template section. The sharp spotlight floating above this text dynamically inverts colors, transforming the pitch black background to bright white while showcasing smooth, rounded interactive elements. Get Started Learn More<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-16","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=16"}],"version-history":[{"count":32,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions"}],"predecessor-version":[{"id":85,"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=\/wp\/v2\/pages\/16\/revisions\/85"}],"wp:attachment":[{"href":"https:\/\/funny-magenta-eagle.157-180-92-33.cpanel.site\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}