{"id":38993,"date":"2026-03-02T11:32:15","date_gmt":"2026-03-02T08:32:15","guid":{"rendered":"https:\/\/www.defcon.gr\/stonewave\/wordpress\/kok-k\/"},"modified":"2026-08-10T20:10:01","modified_gmt":"2026-08-10T17:10:01","slug":"kok-k","status":"publish","type":"page","link":"https:\/\/www.glavopoulos.com\/en\/kok-k\/","title":{"rendered":"DANGER WARNING SIGNS (K)"},"content":{"rendered":"\n<style data-wp-block-html=\"css\">\n.kok-back-link {\n    max-width: 1400px;\n    margin: 0 auto 20px;\n}\n\n.kok-back-link a {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n\n    padding: 10px 18px;\n\n    border: 1px solid #5b4a7a;\n    border-radius: 999px;\n\n    color: #5b4a7a;\n    text-decoration: none;\n    font-weight: 700;\n\n    transition: all .15s ease;\n}\n\n.kok-back-link a:hover {\n    background: #5b4a7a;\n    color: #fff;\n}\n<\/style>\n\n<div class=\"kok-back-link\">\n    <a href=\"https:\/\/www.glavopoulos.com\/en\/kok-traffic-signs\/\">\n        \u2190 Return to Traffic Code Signs Index (5209\/2025)\n    <\/a>\n<\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n\/* ==========================================================================\n   Container Layout\n   ========================================================================== *\/\n.kok-grid-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));\n  gap: 20px;\n  max-width: 1200px;\n  margin: 2rem auto;\n  padding: 16px;\n  box-sizing: border-box;\n}\n\n\/* ==========================================================================\n   Base Card Styles\n   ========================================================================== *\/\n.kok-sign-card {\n  position: relative;\n  width: 100%;\n  aspect-ratio: 1 \/ 1;\n  background: #ffffff;\n  border: 1px solid #e2e8f0;\n  border-radius: 14px;\n  overflow: hidden;\n  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);\n  cursor: pointer;\n  box-sizing: border-box;\n  outline: none;\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\n}\n\n\/* ==========================================================================\n   Layer Layouts\n   ========================================================================== *\/\n.kok-card-front,\n.kok-card-back {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  transition: opacity 0.25s ease, transform 0.25s ease;\n}\n\n\/* Default state: Image center-aligned *\/\n.kok-card-front {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 16px;\n  opacity: 1;\n  z-index: 2;\n  transform: scale(1);\n}\n\n.kok-card-front img {\n  max-width: 90%;\n  max-height: 90%;\n  object-fit: contain;\n}\n\n\/* Glassmorphism \/ See-through Purple Face *\/\n.kok-card-back {\n  background: rgba(46, 37, 67, 0.85); \n  backdrop-filter: blur(10px);        \n  -webkit-backdrop-filter: blur(10px); \n  color: #ffffff;\n  opacity: 0;\n  z-index: 1;\n  transform: scale(0.95);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n  border-radius: 14px;\n  overflow-y: auto;\n  scrollbar-width: none; \/* Hide scrollbar for Firefox *\/\n}\n\n.kok-card-back::-webkit-scrollbar {\n  display: none; \/* Hide scrollbar for Chrome\/Safari *\/\n}\n\n\/* Layout wrapper to ensure correct flex alignment and internal scrolling spacing *\/\n.kok-scroll-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  min-height: 100%;\n  padding: 12px;\n  box-sizing: border-box;\n}\n\n\/* Header Badge inside glass overlay *\/\n.kok-code {\n  font-family: system-ui, -apple-system, sans-serif;\n  font-weight: 800;\n  font-size: 12px; \n  background: rgba(255, 255, 255, 0.25); \n  color: #ffffff;\n  padding: 2px 8px; \n  border-radius: 6px;\n  margin-bottom: 6px; \n  letter-spacing: 0.03em;\n  display: inline-block;\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);\n  flex-shrink: 0;\n}\n\n\/* Optimized description layout *\/\n.kok-desc {\n  font-family: system-ui, -apple-system, sans-serif;\n  font-size: 11.5px; \n  line-height: 1.4; \n  margin: 0;\n  font-weight: 600; \n  text-align: center; \n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);\n}\n\n\/* ==========================================================================\n   Reveal State Rules (Fixed Click Toggle Mechanics)\n   ========================================================================== *\/\n\n\/* Subtle card lift on hover to signal clickability *\/\n.kok-sign-card:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);\n}\n\n\/* State changes managed cleanly via JavaScript class toggles *\/\n.kok-sign-card.is-flipped .kok-card-front {\n  opacity: 0; \n  transform: scale(0.95);\n  z-index: 1;\n}\n\n.kok-sign-card.is-flipped .kok-card-back {\n  opacity: 1;\n  z-index: 3;\n  transform: scale(1);\n}\n\n\/* Modern focus ring for standard keyboard accessibility navigation *\/\n.kok-sign-card:focus-visible {\n  outline: 3px solid #6366f1;\n  outline-offset: 2px;\n}\n\n\/* ==========================================================================\n   Mobile Responsiveness Settings\n   ========================================================================== *\/\n@media (max-width: 480px) {\n  .kok-grid-container {\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n    padding: 8px;\n  }\n  \n  .kok-scroll-content {\n    padding: 10px;\n    justify-content: flex-start; \/* Start text layout from top on small touchscreens *\/\n  }\n\n  .kok-desc {\n    font-size: 11px; \n    line-height: 1.35;\n  }\n  \n  .kok-code {\n    font-size: 11px;\n    margin-bottom: 4px;\n  }\n}\n<\/style>\n\n<script data-wp-block-html=\"js\">\ndocument.addEventListener(\"DOMContentLoaded\", () => {\n  \/\/ 1. KOK Data Table (Table Format)\n  const kokSignsData = [\n    { id: \"K-1a\",  img: \"k1a.gif\",      desc: \"Dangerous left bend\" },\n    { id: \"K-1d\",  img: \"k1d.gif\",      desc: \"Dangerous right bend\" },\n    { id: \"K-2a\",  img: \"k2a.gif\",      desc: \"Double bend, or a series of bends, the first to the left\" },\n    { id: \"K-2d\",  img: \"k2d.gif\",      desc: \"Double bend, or a series of bends, the first to the right\" },\n    { id: \"K-3\",   img: \"k3.gif\",       desc: \"Dangerous steep hill downwards (gradient as indicated on sign)\" },\n    { id: \"K-4\",   img: \"k4.gif\",       desc: \"Steep hill upwards (gradient as indicated on sign)\" },\n    { id: \"K-5\",   img: \"k5.gif\",       desc: \"Carriageway narrows on both sides\" },\n    { id: \"K-6a\",  img: \"k6a.gif\",      desc: \"Carriageway narrows on the left side\" },\n    { id: \"K-6d\",  img: \"k6d.gif\",      desc: \"Carriageway narrows on the right side\" },\n    { id: \"K-7\",   img: \"k7.gif\",       desc: \"Swing bridge\" },\n    { id: \"K-8\",   img: \"k8.gif\",       desc: \"Road leads on to a quay or riverbank\" },\n    { id: \"K-9\",   img: \"k9.gif\",       desc: \"Uneven road in poor condition, with potholes, etc.\" },\n    { id: \"K-10\",  img: \"k10.gif\",      desc: \"Hump \/ elevated road surface or abrupt convex change in road profile\" },\n    { id: \"K-11\",  img: \"k11.gif\",      desc: \"Dip \/ vertical gutter or abrupt concave change in road profile\" },\n    { id: \"K-12\",  img: \"k12.gif\",      desc: \"Slippery road surface\" },\n    { id: \"K-13\",  img: \"k13.gif\",      desc: \"Risk of loose chippings\" },\n    { id: \"K-14\",  img: \"k14.gif\",      desc: \"Risk of falling rocks and presence of rockfalls on the road\" },\n    { id: \"K-15\",  img: \"k15.gif\",      desc: \"Pedestrian crossing ahead\" },\n    { id: \"K-16\",  img: \"k16.gif\",      desc: \"Children frequently present (schools, sports grounds, etc.)\" },\n    { id: \"K-17\",  img: \"k17.gif\",      desc: \"Cyclists entering or crossing ahead\" },\n    { id: \"K-18\",  img: \"k18.gif\",      desc: \"Domestic animals crossing\" },\n    { id: \"K-19\",  img: \"k19.gif\",      desc: \"Wild animals crossing\" },\n    { id: \"K-20\",  img: \"k20.gif\",      desc: \"Roadworks in progress\" },\n    { id: \"K-21\",  img: \"k21.gif\",      desc: \"Caution, junction or location where traffic is controlled by three-color traffic lights\" },\n    { id: \"K-22\",  img: \"k22.gif\",      desc: \"Low-flying aircraft landing or taking off\" },\n    { id: \"K-23\",  img: \"k23.gif\",      desc: \"Frequent strong side winds (blowing in the direction shown by the windsock)\" },\n    { id: \"K-24\",  img: \"k24.gif\",      desc: \"Two-way traffic ahead\" },\n    { id: \"K-25\",  img: \"k25.gif\",      desc: \"Other danger ahead (not covered by signs K-1 to K-24)\" },\n    { id: \"K-26\",  img: \"k26.gif\",      desc: \"Intersection where priority to the right applies\" },\n    { id: \"K-27\",  img: \"k27.gif\",      desc: \"Junction with a road whose users must give way\" },\n    { id: \"K-28a\", img: \"k28a.gif\",     desc: \"Junction with a side road on the left whose users must give way\" },\n    { id: \"K-28d\", img: \"k28d.gif\",     desc: \"Junction with a side road on the right whose users must give way\" },\n    { id: \"K-29a\", img: \"k29a.gif\",     desc: \"Junction with an oblique road on the left whose users must give way\" },\n    { id: \"K-29d\", img: \"k29d.gif\",     desc: \"Junction with an oblique road on the right whose users must give way\" },\n    { id: \"K-30\",  img: \"k30.gif\",      desc: \"Approach to a mandatory roundabout\" },\n    { id: \"K-31\",  img: \"k31.gif\",      desc: \"Level crossing without barriers ahead\" },\n    { id: \"K-32\",  img: \"k32.gif\",      desc: \"Level crossing with barriers ahead\" },\n    \n    \/\/ IMPORTANT: Insert here the full URL given to you by WordPress for the new image\n    { id: \"K-33,34,35\", img: \"\/wp-content\/uploads\/2026\/06\/k333435.png\", desc: \"Additional countdown marker posts on approaches to level crossings or swing bridges, indicating distance to them\" },\n  \n    { id: \"K-36\",  img: \"k36.gif\",      desc: \"Immediate vicinity of a level crossing without barriers across a single railway track or tramway line\" },\n    { id: \"K-37\",  img: \"k37.gif\",      desc: \"Immediate vicinity of a level crossing without barriers across a double or multiple railway track or tramway line\" },\n    { id: \"K-38a\", img: \"k38a.gif\",     desc: \"Dangerous soft or soft-ground shoulder on the left\" },\n    { id: \"K-38d\", img: \"k38d.gif\",     desc: \"Dangerous soft or soft-ground shoulder on the right\" },\n    { id: \"K-39\",  img: \"k39.gif\",      desc: \"Frequent traffic congestion ahead\" },\n    { id: \"K-40\",  img: \"k40.gif\",      desc: \"Tunnel ahead\" },\n    { id: \"K-41\",  img: \"k41.gif\",      desc: \"Tramway level crossing without barriers ahead\" },\n    { id: \"K-42\",  img: \"k42.gif\",      desc: \"Risk of fog\" },\n    { id: \"K-43\",  img: \"k43.gif\",      desc: \"Parallel pedestrian and bicycle crossings ahead\" },\n    { id: \"K-44\",  img: \"k44.gif\",      desc: \"Combined pedestrian and bicycle crossing ahead\" }\n  ];\n\n  const gridContainer = document.getElementById(\"kok-interactive-grid\");\n  const baseImagePath = \"\/wp-content\/uploads\/2026\/03\/\";\n\n  if (!gridContainer) return; \/\/ Prevent errors if the HTML element is not present\n\n  \/\/ 2. Dynamic build of the Grid with Path Validation\n  kokSignsData.forEach(sign => {\n    const card = document.createElement(\"div\");\n    card.className = \"kok-sign-card\";\n    card.setAttribute(\"tabindex\", \"0\");\n\n    const finalSrc = sign.img.startsWith(\"\/\") ? sign.img : `${baseImagePath}${sign.img}`;\n\n    card.innerHTML = `\n      <div class=\"kok-card-front\">\n        <img decoding=\"async\" alt=\"Traffic Sign ${sign.id}\" src=\"${finalSrc}\" loading=\"lazy\"\/>\n      <\/div>\n      <div class=\"kok-card-back\">\n        <div class=\"kok-scroll-content\">\n          <span class=\"kok-code\">${sign.id}<\/span>\n          <p class=\"kok-desc\">${sign.desc}<\/p>\n        <\/div>\n      <\/div>\n    `;\n\n    \/\/ Click Event\n    card.addEventListener(\"click\", () => {\n      card.classList.toggle(\"is-flipped\");\n    });\n\n    \/\/ Keyboard Event (Enables clean spacebar\/enter toggling without key encoding crash issues)\n    card.addEventListener(\"keydown\", (e) => {\n      if (e.key === \"Enter\" || e.code === \"Space\") {\n        e.preventDefault(); \n        card.classList.toggle(\"is-flipped\");\n      }\n    });\n\n    gridContainer.appendChild(card);\n  });\n});\n<\/script>\n\n<div id=\"kok-interactive-grid\" class=\"kok-grid-container\"><\/div>\n\n\n\n<style data-wp-block-html=\"css\">\n.kok-back-link {\n    max-width: 1400px;\n    margin: 0 auto 20px;\n}\n\n.kok-back-link a {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n\n    padding: 10px 18px;\n\n    border: 1px solid #5b4a7a;\n    border-radius: 999px;\n\n    color: #5b4a7a;\n    text-decoration: none;\n    font-weight: 700;\n\n    transition: all .15s ease;\n}\n\n.kok-back-link a:hover {\n    background: #5b4a7a;\n    color: #fff;\n}\n<\/style>\n\n<div class=\"kok-back-link\">\n    <a href=\"https:\/\/www.glavopoulos.com\/en\/kok-traffic-signs\/\">\n        \u2190 Return to Traffic Code Signs Index (5209\/2025)\n    <\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u2190 Return to Traffic Code Signs Index (5209\/2025) \u2190 Return to Traffic Code Signs Index (5209\/2025)<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/template-full.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-38993","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.glavopoulos.com\/en\/wp-json\/wp\/v2\/pages\/38993","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.glavopoulos.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.glavopoulos.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.glavopoulos.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.glavopoulos.com\/en\/wp-json\/wp\/v2\/comments?post=38993"}],"version-history":[{"count":7,"href":"https:\/\/www.glavopoulos.com\/en\/wp-json\/wp\/v2\/pages\/38993\/revisions"}],"predecessor-version":[{"id":40622,"href":"https:\/\/www.glavopoulos.com\/en\/wp-json\/wp\/v2\/pages\/38993\/revisions\/40622"}],"wp:attachment":[{"href":"https:\/\/www.glavopoulos.com\/en\/wp-json\/wp\/v2\/media?parent=38993"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}