{"id":7,"date":"2026-08-23T23:25:57","date_gmt":"2026-08-23T23:25:57","guid":{"rendered":"https:\/\/karsoncalligraphy.ca\/?page_id=7"},"modified":"2026-08-30T07:22:00","modified_gmt":"2026-08-30T07:22:00","slug":"home","status":"publish","type":"page","link":"https:\/\/karsoncalligraphy.ca\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c35f00e e-con-full e-flex e-con e-parent\" data-id=\"c35f00e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;slideshow&quot;,&quot;background_slideshow_gallery&quot;:[{&quot;id&quot;:20,&quot;url&quot;:&quot;https:\\\/\\\/karsoncalligraphy.ca\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/Flames-Karson-04-scaled.jpg&quot;},{&quot;id&quot;:78,&quot;url&quot;:&quot;https:\\\/\\\/karsoncalligraphy.ca\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/47a0c97f-0ee2-441c-8a82-855cf7eb6299.jpg&quot;}],&quot;background_slideshow_transition_duration&quot;:800,&quot;background_slideshow_ken_burns&quot;:&quot;yes&quot;,&quot;background_slideshow_loop&quot;:&quot;yes&quot;,&quot;background_slideshow_slide_duration&quot;:5000,&quot;background_slideshow_slide_transition&quot;:&quot;fade&quot;,&quot;background_slideshow_ken_burns_zoom_direction&quot;:&quot;in&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-43d7d23 elementor-widget elementor-widget-html\" data-id=\"43d7d23\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- 1. HTML Structure: Button & Full Screen Overlay -->\n<div id=\"custom-menu-btn\" class=\"menu-btn\">\n  <div class=\"line\"><\/div>\n  <div class=\"line\"><\/div>\n  <div class=\"line\"><\/div>\n<\/div>\n\n<div id=\"full-screen-overlay\" class=\"overlay-menu\">\n  <div class=\"menu-grid\">\n    <!-- Left Column -->\n    <div class=\"menu-col\">\n      <a href=\"#\">HOME<\/a>\n      <a href=\"#\">ABOUT<\/a>\n      <a href=\"#\">WORKS<\/a>\n      <a href=\"#\">SCHEDULE<\/a>\n    <\/div>\n    <!-- Right Column -->\n    <div class=\"menu-col\">\n      <a href=\"#\">PHOTO GALLERY<\/a>\n      <a href=\"#\">CLASS<\/a>\n      <a href=\"#\">CONTACT<\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- 2. CSS Styles: Appearance, Layout & Animations -->\n<style>\n\/* --- Button Styles --- *\/\n.menu-btn {\n  position: fixed;\n  top: 50px;\n  right: 30px;\n  width: 40px;\n  height: 14px;\n  cursor: pointer;\n  z-index: 999999;\n}\n\n.menu-btn .line {\n  position: absolute;\n  width: 100%;\n  height: 1px;\n  background-color: #7a6a55; \n  transition: all 0.4s ease;\n}\n\n.menu-btn .line:nth-child(1) { top: 0px; }\n.menu-btn .line:nth-child(2) { top: 6px; }\n.menu-btn .line:nth-child(3) { top: 12px; }\n\n.menu-btn.active .line:nth-child(1) { transform: translateY(6px) rotate(45deg); }\n.menu-btn.active .line:nth-child(2) { opacity: 0; }\n.menu-btn.active .line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }\n\n\/* --- Full Screen Overlay Styles --- *\/\n.overlay-menu {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100vw;\n  height: 100vh;\n  background-color: #000000;\n  z-index: 999998;\n  opacity: 0;\n  visibility: hidden;\n  transition: all 0.5s ease-in-out;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.overlay-menu.active {\n  opacity: 1;\n  visibility: visible;\n}\n\n\/* --- Menu Grid & Typography --- *\/\n.menu-grid {\n  display: flex;\n  gap: 80px;\n}\n\n.menu-col {\n  display: flex;\n  flex-direction: column;\n  gap: 30px;\n  text-align: center;\n  align-items: center; \/* Ensure links and underlines are perfectly centered *\/\n}\n\n.menu-col a {\n  position: relative;\n  display: inline-block;\n  color: #ffffff;\n  text-decoration: none;\n  font-family: 'Noto Serif TC', 'Noto Serif', serif;\n  font-size: 15px;\n  letter-spacing: 2px;\n  padding-bottom: 2px; \/* Add breathing space between text and underline *\/\n  transition: color 0.3s ease;\n}\n\n\/* Custom underline (Hidden and scaled down by default) *\/\n.menu-col a::after {\n  content: '';\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: 1px; \/* 1px ultra-thin line *\/\n  background-color: #7a6a55; \/* Same color as the hamburger menu *\/\n  opacity: 0; \/* Fully transparent by default *\/\n  transform: scaleX(0); \/* Start with 0 width *\/\n  transform-origin: center; \/* Anchor the animation to the center *\/\n  transition: opacity 0.35s ease, transform 0.35s ease; \/* Animate both fade and scale *\/\n}\n\n\/* Hover state: Text color change + underline fade and expand *\/\n.menu-col a:hover {\n  color: #7a6a55;\n}\n\n.menu-col a:hover::after {\n  opacity: 1; \/* Fade in *\/\n  transform: scaleX(1); \/* Expand from center to 100% width *\/\n}\n<\/style>\n\n<!-- 3. JavaScript: Toggle active states -->\n<script>\ndocument.getElementById('custom-menu-btn').addEventListener('click', function() {\n  this.classList.toggle('active');\n  document.getElementById('full-screen-overlay').classList.toggle('active');\n});\n<\/script>\n<!-- Scroll Indicator HTML -->\n<div class=\"scroll-indicator\">\n  <span class=\"scroll-text\">scroll<\/span>\n  <div class=\"scroll-line\"><\/div>\n<\/div>\n\n<!-- Scroll Indicator CSS -->\n<style>\n.scroll-indicator {\n  position: absolute;\n  bottom: -640px; \/* Negative value pushes it down to overlap the next white section *\/\n  left: 50%;\n  transform: translateX(-50%);\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  z-index: 999; \/* Ensure it stays on top of both sections *\/\n}\n\n.scroll-text {\n  font-family: 'Noto Serif TC', serif;\n  color: #7a6a55; \/* Gold-brown text color *\/\n  font-size: 12px;\n  letter-spacing: 2px;\n  margin-bottom: 3px;\n}\n\n\/* Base track for the line (semi-transparent) *\/\n.scroll-line {\n  width: 1px;\n  height: 60px; \/* Total length of the line *\/\n  background-color: rgba(122, 106, 85, 0.3);\n  position: relative;\n  overflow: hidden;\n}\n\n\/* The animated solid line segment *\/\n.scroll-line::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: #7a6a55; \n  animation: scrollDown 2s infinite ease-in-out;\n}\n\n\/* Animation sequence: Grows from top, disappears to bottom *\/\n@keyframes scrollDown {\n  0% { transform: scaleY(0); transform-origin: top; }\n  50% { transform: scaleY(1); transform-origin: top; }\n  50.1% { transform: scaleY(1); transform-origin: bottom; }\n  100% { transform: scaleY(0); transform-origin: bottom; }\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-192618b e-con e-atomic-element e-flexbox-base e-ee8fdaf \" data-id=\"192618b\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"192618b\">\n    \t\t<div class=\"elementor-element elementor-element-e56c1b5 elementor-widget elementor-widget-shortcode\" data-id=\"e56c1b5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><div class=\"custom-news-container\"><div class=\"news-heading-col\"><h2 class=\"news-main-title\">NEWS<\/h2><p class=\"news-sub-title\">\u6700\u65b0\u6d88\u606f<\/p><\/div><div class=\"news-list-col\"><a href=\"https:\/\/karsoncalligraphy.ca\/?p=1\" class=\"news-row\"><span class=\"news-tag\">Uncategorized<\/span><span class=\"news-date\">2026.08.21<\/span><span class=\"news-title\">Hello world!<\/span><\/a><\/div><\/div><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-343c51b elementor-widget elementor-widget-html\" data-id=\"343c51b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* Ensure Noto Serif JP font is loaded *\/\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Serif+JP:wght@400&display=swap');\n\n\/* Outer container: Flexbox layout with left\/right thin black borders *\/\n.custom-news-container {\n  display: flex;\n  align-items: flex-start;\n  gap: 60px;\n  border-left: 1px solid #000;\n  border-right: 1px solid #000;\n  padding: 0 40px;\n  max-width: 900px;\n  margin: 300px auto 0;\n}\n\n\/* Left Column: Heading *\/\n.news-heading-col {\n  flex: 0 0 115px; \n  padding-top: 15px;\n}\n\n.news-main-title {\n  font-family: 'Noto Serif JP', serif; \n  font-size: 38px;\n  color: #000;\n  font-weight: 400; \n  letter-spacing: 2px;\n  text-align: center; \n  \/* --- ADJUSTMENT 1: Reduce gap between lines --- *\/\n  margin: 0; \/* Removes bottom spacing *\/\n  line-height: 0.7; \/* Removes default font height spacing *\/\n}\n\n.news-sub-title {\n  font-size: 13px;\n  color: #888;\n  \/* --- ADJUSTMENT 1.5: Fine-tune vertical gap (use negative margin if you want them even closer) --- *\/\n  margin: 4px 0 0 0; \n  \/* --- ADJUSTMENT 2: Make width slightly narrower than NEWS on both sides --- *\/\n  padding: 0 5px; \/* Change '3px' to 1px or 5px to adjust how much shorter you want it *\/\n  text-align: justify;\n  text-align-last: justify; \n}\n\n\/* Right Column: List *\/\n.news-list-col {\n  flex: 1; \n  display: flex;\n  flex-direction: column;\n}\n\n\/* Layout for each news row *\/\n.news-row {\n  display: flex;\n  align-items: center;\n  padding: 20px 0;\n  border-bottom: 1px dashed #d3d3d3; \n  text-decoration: none;\n  color: #333333;\n  transition: opacity 0.3s ease;\n}\n\n.news-row:hover { \n  opacity: 0.6; \n}\n\n\/* Tag button *\/\n.news-tag {\n  background-color: #c0aa83; \n  color: #fff;\n  font-size: 11px;\n  padding: 4px 12px;\n  margin-right: 30px;\n  min-width: 100px;\n  text-align: center;\n  letter-spacing: 1px;\n}\n\n\/* Date and title *\/\n.news-date {\n  font-family: 'Noto Serif TC', serif;\n  font-size: 15px;\n  margin-right: 40px;\n  color: #888;\n}\n\n.news-title {\n  font-family: 'Noto Serif TC', serif;\n  font-size: 15px;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e73bc90 elementor-widget elementor-widget-html\" data-id=\"e73bc90\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n\/* Outer container: Flexbox layout with left\/right thin black borders *\/\n.custom-news-container {\n  display: flex;\n  align-items: flex-start; \/* Align columns to the top *\/\n  gap: 60px; \/* Space between the NEWS title and the list *\/\n  border-left: 1px solid #000;\n  border-right: 1px solid #000;\n  padding: 0 40px;\n  max-width: 900px;\n  margin: 0 auto;\n}\n\n\/* Left Column: Heading *\/\n.news-heading-col {\n  flex: 0 0 120px; \/* Fixed width for the left side *\/\n  padding-top: 15px; \/* Push down slightly to align with the first list item *\/\n}\n\n.news-main-title {\n  font-family: 'Noto Serif TC', serif;\n  font-size: 38px;\n  color: #000;\n  margin: 0 0 5px 0;\n  font-weight: normal;\n  letter-spacing: 2px;\n}\n\n.news-sub-title {\n  font-size: 13px;\n  color: #888;\n  margin: 0;\n  letter-spacing: 1px;\n}\n\n\/* Right Column: List *\/\n.news-list-col {\n  flex: 1; \/* Take up the remaining space *\/\n  display: flex;\n  flex-direction: column;\n}\n\n\/* Layout for each news row (Horizontal Flexbox arrangement) *\/\n.news-row {\n  display: flex;\n  align-items: center;\n  padding: 20px 0;\n  border-bottom: 1px dashed #d3d3d3; \/* Bottom dashed line *\/\n  text-decoration: none;\n  color: #333333;\n  transition: opacity 0.3s ease;\n}\n\n\/* Remove dashed line from the very last item for a cleaner look *\/\n.news-row:last-child {\n  border-bottom: none;\n}\n\n.news-row:hover { \n  opacity: 0.6; \n}\n\n\/* Tag button *\/\n.news-tag {\n  background-color: #c0aa83; \/* Khaki\/Gold background *\/\n  color: #fff;\n  font-size: 11px;\n  padding: 4px 12px;\n  margin-right: 30px;\n  min-width: 100px;\n  text-align: center;\n  letter-spacing: 1px;\n}\n\n\/* Date and title *\/\n.news-date {\n  font-family: 'Noto Serif TC', serif;\n  font-size: 15px;\n  margin-right: 40px;\n  color: #888;\n}\n\n.news-title {\n  font-family: 'Noto Serif TC', serif;\n  font-size: 15px;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-4ee8601 e-con e-atomic-element e-flexbox-base e-481ad5c \" data-id=\"4ee8601\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"4ee8601\">\n    <a class=\"elementor-element elementor-element-569fbc3 e-con-full e-flex e-con e-parent\" data-id=\"569fbc3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-691d23b elementor-widget elementor-widget-heading\" data-id=\"691d23b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">ABOUT\n\u95dc\u65bc\u6211<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t<a class=\"elementor-element elementor-element-952a725 e-con-full e-flex e-con e-parent\" data-id=\"952a725\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6696b19 elementor-widget elementor-widget-heading\" data-id=\"6696b19\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">WORKS<br>\u4f5c\u54c1<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t<a class=\"elementor-element elementor-element-08e1957 e-con-full e-flex e-con e-parent\" data-id=\"08e1957\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-94c6d6e elementor-widget elementor-widget-heading\" data-id=\"94c6d6e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\"><h2 data-elementor-setting-key=\"title\" data-pen-placeholder=\"Type Here...\" style=\"font-style: normal;font-weight: 600;font-family: Roboto, sans-serif\">EVENT\n\u6d3b\u52d5<span style=\"font-size: 1.875rem;font-style: inherit;background-color: transparent\"><\/span><\/h2><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t<a class=\"elementor-element elementor-element-5076f6d e-con-full e-flex e-con e-parent\" data-id=\"5076f6d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aa88950 elementor-widget elementor-widget-heading\" data-id=\"aa88950\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">GALLERY<br>\u5716\u7247<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t<a class=\"elementor-element elementor-element-cdfe03d e-con-full e-flex e-con e-parent\" data-id=\"cdfe03d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5ff3df6 elementor-widget elementor-widget-heading\" data-id=\"5ff3df6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">coming soon<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t<a class=\"elementor-element elementor-element-bc210e3 e-con-full e-flex e-con e-parent\" data-id=\"bc210e3\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-23a295a elementor-widget elementor-widget-heading\" data-id=\"23a295a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">CLASS<br>\u8ab2\u7a0b\u8207\u5de5\u4f5c\u574a<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-20488f5 e-flex e-con-boxed e-con e-parent\" data-id=\"20488f5\" 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-1acf30d elementor-widget elementor-widget-html\" data-id=\"1acf30d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* -----------------------------------\r\n   1. Basic Settings & Full-Width Layout\r\n------------------------------------ *\/\r\n.custom-footer {\r\n    background-color: #000000;\r\n    padding: 80px 40px 40px;\r\n    font-family: 'Noto Serif TC', \"Times New Roman\", serif;\r\n    \r\n    \/* --- THE MAGIC FULL-WIDTH BREAKOUT CODE --- *\/\r\n    width: 100vw;\r\n    position: relative;\r\n    left: 50%;\r\n    right: 50%;\r\n    margin-left: -50vw;\r\n    margin-right: -50vw;\r\n    box-sizing: border-box;\r\n}\r\n\r\n.custom-footer-inner {\r\n    width: 100%;\r\n    max-width: 100%; \r\n    margin: 0 auto;\r\n}\r\n\r\n\/* -----------------------------------\r\n   2. Top Calligraphy Logo\r\n------------------------------------ *\/\r\n.custom-f-logo {\r\n    text-align: center;\r\n    margin-bottom: 60px;\r\n}\r\n.custom-f-logo img {\r\n    max-height: 60px;\r\n    width: auto;\r\n}\r\n\r\n\/* -----------------------------------\r\n   3. Middle Navigation Bar\r\n------------------------------------ *\/\r\n.custom-f-nav {\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    margin-bottom: 60px;\r\n    width: 100%; \r\n}\r\n\r\n.custom-f-nav ul {\r\n    display: flex;\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n    align-items: center;\r\n    flex-wrap: wrap; \r\n    justify-content: center; \r\n}\r\n\r\n.custom-f-nav ul li {\r\n    display: flex;\r\n    justify-content: center; \r\n    position: relative;\r\n    padding: 10px 25px; \/* Adjust the 25px to change the distance between words *\/\r\n}\r\n\r\n\/* The vertical divider line '|' *\/\r\n.custom-f-nav ul li:not(:last-child)::after {\r\n    content: \"|\";\r\n    position: absolute;\r\n    right: 0;\r\n    color: #555;\r\n    font-size: 11px;\r\n}\r\n\r\n.custom-f-nav ul li a {\r\n    text-decoration: none;\r\n    color: #e0d5c1;\r\n    font-size: 13px;\r\n    letter-spacing: 1px;\r\n    transition: color 0.3s ease;\r\n    text-align: center;\r\n}\r\n\r\n.custom-f-nav ul li a:hover {\r\n    color: #ffffff;\r\n}\r\n\r\n\/* -----------------------------------\r\n   4. Bottom Copyright & Social Icons\r\n------------------------------------ *\/\r\n.custom-f-copy {\r\n    border-top: 1px solid #333;\r\n    padding-top: 25px;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    width: 100%;\r\n}\r\n\r\n\/* Split the bottom into three equal sections to ensure the center logos are perfectly aligned *\/\r\n.f-copy-left, .f-copy-center, .f-copy-right {\r\n    flex: 1;\r\n    display: flex;\r\n}\r\n.f-copy-left { justify-content: flex-start; }\r\n.f-copy-center { justify-content: center; gap: 20px; }\r\n.f-copy-right { justify-content: flex-end; }\r\n\r\n\/* Left side list settings *\/\r\n.f-copy-left ul {\r\n    display: flex;\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n}\r\n.f-copy-left ul li { margin-right: 30px; }\r\n\r\n\/* Text settings for left and right sides *\/\r\n.f-copy-left a, .f-copy-right p {\r\n    text-decoration: none;\r\n    color: #888888;\r\n    font-size: 11px;\r\n    letter-spacing: 1px;\r\n    margin: 0;\r\n    transition: color 0.3s ease;\r\n}\r\n.f-copy-left a:hover { color: #ffffff; }\r\n\r\n\/* Center social media SVG icon settings (using your preset gold color) *\/\r\n.f-copy-center a svg {\r\n    width: 18px;\r\n    height: 18px;\r\n    fill: #c0aa83; \r\n    transition: fill 0.3s ease, transform 0.3s ease;\r\n}\r\n.f-copy-center a:hover svg {\r\n    fill: #ffffff; \/* Turn white on hover *\/\r\n    transform: translateY(-2px); \/* Slight upward float on hover *\/\r\n}\r\n\r\n\/* -----------------------------------\r\n   5. Mobile Responsive Settings\r\n------------------------------------ *\/\r\n@media screen and (max-width: 768px) {\r\n    .custom-footer {\r\n        padding: 60px 20px 30px;\r\n    }\r\n    .custom-f-nav ul {\r\n        flex-direction: column; \/* Stack menu items vertically on small screens *\/\r\n    }\r\n    .custom-f-nav ul li {\r\n        width: 100%; \r\n        padding: 12px 0;\r\n    }\r\n    .custom-f-nav ul li:not(:last-child)::after {\r\n        display: none; \/* Hide the '|' dividers on mobile for a cleaner look *\/\r\n    }\r\n    .custom-f-copy {\r\n        flex-direction: column;\r\n        gap: 20px;\r\n        padding-bottom: 20px;\r\n    }\r\n    .f-copy-left, .f-copy-center, .f-copy-right {\r\n        justify-content: center; \/* Stack and center everything on mobile *\/\r\n    }\r\n    .f-copy-left ul li {\r\n        margin: 0 15px;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<!-- Footer HTML Structure -->\r\n<footer class=\"custom-footer\">\r\n\t<div class=\"custom-footer-inner\">\r\n\t\t\r\n        <!-- Layer 1: Your Calligraphy Logo -->\r\n\t\t<div class=\"custom-f-logo\">\r\n\t\t\t<!-- Replace the src URL with your actual image URL once you have it -->\r\n\t\t\t<img decoding=\"async\" src=\"https:\/\/via.placeholder.com\/300x80\/000000\/ffffff?text=Your+Calligraphy+Logo\" alt=\"Karson Calligraphy\">\r\n\t\t<\/div>\r\n\t\t\r\n\t\t<!-- Layer 2: Navigation Bar -->\r\n\t\t<nav class=\"custom-f-nav\">\r\n\t\t\t<ul>\r\n\t\t\t\t<li><a href=\"\/\">TOP<\/a><\/li>\r\n\t\t\t\t<li><a href=\"\/about\/\">ABOUT<\/a><\/li>\r\n\t\t\t\t<li><a href=\"\/works\/\">WORKS<\/a><\/li>\r\n\t\t\t\t<li><a href=\"\/schedule\/\">SCHEDULE<\/a><\/li>\r\n\t\t\t\t<li><a href=\"\/gallery\/\">PHOTO GALLERY<\/a><\/li>\r\n\t\t\t\t<li><a href=\"\/class\/\">CLASS<\/a><\/li>\r\n\t\t\t\t<li><a href=\"\/contact\/\">CONTACT<\/a><\/li>\r\n\t\t\t<\/ul>\r\n\t\t<\/nav>\r\n\t\t\r\n\t\t<!-- Layer 3: Bottom Divider, Social Media & Copyright -->\r\n\t\t<div class=\"custom-f-copy\">\r\n            \r\n            <!-- Left: Privacy & Credit -->\r\n            <div class=\"f-copy-left\">\r\n                <ul>\r\n                    <li><a href=\"\/privacy-policy\/\">PRIVACY POLICY<\/a><\/li>\r\n                    <li><a href=\"\/credit\/\">CREDIT<\/a><\/li>\r\n                <\/ul>\r\n            <\/div>\r\n            \r\n            <!-- Center: Social Media Logos (Gold SVGs with Links) -->\r\n            <div class=\"f-copy-center\">\r\n                <!-- Facebook Icon -->\r\n                <a href=\"https:\/\/www.facebook.com\/kar.calligraphy\" target=\"_blank\" aria-label=\"Facebook\">\r\n                    <svg viewBox=\"0 0 320 512\"><path d=\"M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z\"\/><\/svg>\r\n                <\/a>\r\n                \r\n                <!-- Instagram Icon -->\r\n                <a href=\"https:\/\/www.instagram.com\/kar.calligraphy\" target=\"_blank\" aria-label=\"Instagram\">\r\n                    <svg viewBox=\"0 0 448 512\"><path d=\"M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z\"\/><\/svg>\r\n                <\/a>\r\n            <\/div>\r\n            \r\n            <!-- Right: Copyright -->\r\n            <div class=\"f-copy-right\">\r\n                <p>\u00a92026 Karson Ho. All Rights Reserved.<\/p>\r\n            <\/div>\r\n            \r\n        <\/div>\r\n\t<\/div>\t\t\r\n<\/footer>\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>HOME ABOUT WORKS SCHEDULE PHOTO GALLERY CLASS CONTACT scroll ABOUT \u95dc\u65bc\u6211 WORKS\u4f5c\u54c1 EVENT \u6d3b\u52d5 GALLERY\u5716\u7247 coming soon CLASS\u8ab2\u7a0b\u8207\u5de5\u4f5c\u574a TOP ABOUT [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"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-7","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Home - Kar.Calligraphy<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/karsoncalligraphy.ca\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Home - Kar.Calligraphy\" \/>\n<meta property=\"og:description\" content=\"HOME ABOUT WORKS SCHEDULE PHOTO GALLERY CLASS CONTACT scroll ABOUT \u95dc\u65bc\u6211 WORKS\u4f5c\u54c1 EVENT \u6d3b\u52d5 GALLERY\u5716\u7247 coming soon CLASS\u8ab2\u7a0b\u8207\u5de5\u4f5c\u574a TOP ABOUT [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/karsoncalligraphy.ca\/\" \/>\n<meta property=\"og:site_name\" content=\"Kar.Calligraphy\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kar.calligraphy\" \/>\n<meta property=\"article:modified_time\" content=\"2026-08-30T07:22:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/via.placeholder.com\/300x80\/000000\/ffffff?text=Your+Calligraphy+Logo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/karsoncalligraphy.ca\\\/\",\"url\":\"https:\\\/\\\/karsoncalligraphy.ca\\\/\",\"name\":\"Home - Kar.Calligraphy\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/karsoncalligraphy.ca\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/karsoncalligraphy.ca\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/karsoncalligraphy.ca\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/via.placeholder.com\\\/300x80\\\/000000\\\/ffffff?text=Your+Calligraphy+Logo\",\"datePublished\":\"2026-08-23T23:25:57+00:00\",\"dateModified\":\"2026-08-30T07:22:00+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/karsoncalligraphy.ca\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/karsoncalligraphy.ca\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/karsoncalligraphy.ca\\\/#primaryimage\",\"url\":\"https:\\\/\\\/via.placeholder.com\\\/300x80\\\/000000\\\/ffffff?text=Your+Calligraphy+Logo\",\"contentUrl\":\"https:\\\/\\\/via.placeholder.com\\\/300x80\\\/000000\\\/ffffff?text=Your+Calligraphy+Logo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/karsoncalligraphy.ca\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/karsoncalligraphy.ca\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Home\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/karsoncalligraphy.ca\\\/#website\",\"url\":\"https:\\\/\\\/karsoncalligraphy.ca\\\/\",\"name\":\"Karson Calligraphy\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/karsoncalligraphy.ca\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Home - Kar.Calligraphy","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/karsoncalligraphy.ca\/","og_locale":"en_US","og_type":"article","og_title":"Home - Kar.Calligraphy","og_description":"HOME ABOUT WORKS SCHEDULE PHOTO GALLERY CLASS CONTACT scroll ABOUT \u95dc\u65bc\u6211 WORKS\u4f5c\u54c1 EVENT \u6d3b\u52d5 GALLERY\u5716\u7247 coming soon CLASS\u8ab2\u7a0b\u8207\u5de5\u4f5c\u574a TOP ABOUT [&hellip;]","og_url":"https:\/\/karsoncalligraphy.ca\/","og_site_name":"Kar.Calligraphy","article_publisher":"https:\/\/www.facebook.com\/kar.calligraphy","article_modified_time":"2026-08-30T07:22:00+00:00","og_image":[{"url":"https:\/\/via.placeholder.com\/300x80\/000000\/ffffff?text=Your+Calligraphy+Logo","type":"","width":"","height":""}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/karsoncalligraphy.ca\/","url":"https:\/\/karsoncalligraphy.ca\/","name":"Home - Kar.Calligraphy","isPartOf":{"@id":"https:\/\/karsoncalligraphy.ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/karsoncalligraphy.ca\/#primaryimage"},"image":{"@id":"https:\/\/karsoncalligraphy.ca\/#primaryimage"},"thumbnailUrl":"https:\/\/via.placeholder.com\/300x80\/000000\/ffffff?text=Your+Calligraphy+Logo","datePublished":"2026-08-23T23:25:57+00:00","dateModified":"2026-08-30T07:22:00+00:00","breadcrumb":{"@id":"https:\/\/karsoncalligraphy.ca\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/karsoncalligraphy.ca\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/karsoncalligraphy.ca\/#primaryimage","url":"https:\/\/via.placeholder.com\/300x80\/000000\/ffffff?text=Your+Calligraphy+Logo","contentUrl":"https:\/\/via.placeholder.com\/300x80\/000000\/ffffff?text=Your+Calligraphy+Logo"},{"@type":"BreadcrumbList","@id":"https:\/\/karsoncalligraphy.ca\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/karsoncalligraphy.ca\/"},{"@type":"ListItem","position":2,"name":"Home"}]},{"@type":"WebSite","@id":"https:\/\/karsoncalligraphy.ca\/#website","url":"https:\/\/karsoncalligraphy.ca\/","name":"Karson Calligraphy","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/karsoncalligraphy.ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/karsoncalligraphy.ca\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/karsoncalligraphy.ca\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/karsoncalligraphy.ca\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/karsoncalligraphy.ca\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/karsoncalligraphy.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":5,"href":"https:\/\/karsoncalligraphy.ca\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":113,"href":"https:\/\/karsoncalligraphy.ca\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/113"}],"wp:attachment":[{"href":"https:\/\/karsoncalligraphy.ca\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}