{"id":6006,"date":"2026-04-08T14:17:09","date_gmt":"2026-04-08T08:47:09","guid":{"rendered":"https:\/\/chalopahaad.com\/dehradun\/?page_id=6006"},"modified":"2026-06-03T00:46:55","modified_gmt":"2026-06-02T19:16:55","slug":"all-blog","status":"publish","type":"page","link":"https:\/\/chalopahaad.com\/dehradun\/all-blog\/","title":{"rendered":"All Blog"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Dehradun Travel Blog \u2014 Chalo Pahaad<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=DM+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\" \/>\r\n <style>\r\n \/* \u2500\u2500 Reset & Base \u2500\u2500 *\/\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --bg: #06100A;\r\n --bg-light: #0c1a12;\r\n --bg-card: #0f1f14;\r\n --gold: #C9A96E;\r\n --gold-dim: #a8894e;\r\n --text: #F5F0E8;\r\n --sage: #9CA89F;\r\n --border: #424842;\r\n --border-light: #2a3a2e;\r\n --radius: 3px;\r\n --ff-head: 'Cormorant Garamond', Georgia, serif;\r\n --ff-body: 'DM Sans', system-ui, sans-serif;\r\n --transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);\r\n }\r\n\r\n html { scroll-behavior: smooth; }\r\n\r\n body {\r\n background: #06100A !important;\r\n background-color: #06100A !important;\r\n color: var(--text);\r\n font-family: var(--ff-body);\r\n font-size: 16px;\r\n line-height: 1.65;\r\n -webkit-font-smoothing: antialiased;\r\n }\r\n\r\n \/* \u2500\u2500 Full-width utility \u2500\u2500 *\/\r\n .full-width {\r\n width: 100vw;\r\n margin-left: calc(-50vw + 50%);\r\n }\r\n\r\n \/* Force dark bg on WordPress\/Elementor wrappers *\/\r\n .full-width,\r\n .elementor-widget-container:has(.full-width),\r\n .elementor-widget:has(.full-width),\r\n .elementor-section,\r\n .elementor-section > .elementor-container,\r\n .elementor-column,\r\n .elementor-column-wrap,\r\n .elementor-widget-wrap,\r\n .elementor-element,\r\n .entry-content,\r\n .page-template-default .site-content,\r\n #page, #content, .site-main,\r\n .e-con, .e-con-inner {\r\n background: #06100A !important;\r\n background-color: #06100A !important;\r\n }\r\n\r\n .elementor-section,\r\n .elementor-section > .elementor-container,\r\n .elementor-column,\r\n .elementor-column-wrap,\r\n .elementor-widget-wrap,\r\n .e-con, .e-con-inner {\r\n padding-left: 0 !important;\r\n padding-right: 0 !important;\r\n max-width: 100% !important;\r\n width: 100% !important;\r\n }\r\n\r\n \/* \u2500\u2500 Container \u2500\u2500 *\/\r\n .container {\r\n max-width: 1240px;\r\n margin: 0 auto;\r\n padding: 0 24px;\r\n }\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n HERO\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .hero {\r\n position: relative;\r\n height: 40vh;\r\n min-height: 320px;\r\n display: flex;\r\n align-items: flex-end;\r\n padding-bottom: 52px;\r\n overflow: hidden;\r\n }\r\n\r\n .hero__bg {\r\n position: absolute;\r\n inset: 0;\r\n background-image: url('https:\/\/images.unsplash.com\/photo-1464822759023-fed622ff2c3b?w=1600&q=80');\r\n background-size: cover;\r\n background-position: center 40%;\r\n transform: scale(1.04);\r\n transition: transform 8s ease-out;\r\n }\r\n .hero__bg.loaded { transform: scale(1); }\r\n\r\n .hero__overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n to bottom,\r\n rgba(6,16,10,0.35) 0%,\r\n rgba(6,16,10,0.55) 50%,\r\n rgba(6,16,10,0.92) 100%\r\n );\r\n }\r\n\r\n .hero__content {\r\n position: relative;\r\n z-index: 2;\r\n width: 100%;\r\n }\r\n\r\n \/* Breadcrumb *\/\r\n .breadcrumb {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n font-family: var(--ff-body);\r\n font-size: 12px;\r\n font-weight: 500;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n color: var(--sage);\r\n margin-bottom: 18px;\r\n }\r\n .breadcrumb a {\r\n color: var(--sage);\r\n text-decoration: none;\r\n transition: color var(--transition);\r\n }\r\n .breadcrumb a:hover { color: var(--gold); }\r\n .breadcrumb__sep {\r\n color: var(--border);\r\n font-size: 10px;\r\n }\r\n .breadcrumb__current { color: var(--gold); }\r\n\r\n \/* Hero heading *\/\r\n .hero__title {\r\n font-family: var(--ff-head);\r\n font-size: clamp(2.2rem, 5vw, 3.8rem);\r\n font-weight: 500;\r\n letter-spacing: 0.01em;\r\n line-height: 1.15;\r\n color: var(--text);\r\n margin-bottom: 14px;\r\n }\r\n\r\n .hero__subtitle {\r\n max-width: 620px;\r\n font-size: 15px;\r\n line-height: 1.7;\r\n color: var(--sage);\r\n font-weight: 300;\r\n }\r\n\r\n \/* Decorative gold line *\/\r\n .hero__line {\r\n display: block;\r\n width: 48px;\r\n height: 2px;\r\n background: var(--gold);\r\n margin-bottom: 20px;\r\n opacity: 0.8;\r\n }\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n BLOG SECTION\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .blog-section {\r\n padding: 72px 0 88px;\r\n }\r\n\r\n \/* Section label *\/\r\n .section-label {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-family: var(--ff-body);\r\n font-size: 11px;\r\n font-weight: 600;\r\n letter-spacing: 0.16em;\r\n text-transform: uppercase;\r\n color: var(--gold);\r\n margin-bottom: 12px;\r\n }\r\n .section-label::before {\r\n content: '';\r\n display: block;\r\n width: 28px;\r\n height: 1px;\r\n background: var(--gold);\r\n opacity: 0.6;\r\n }\r\n\r\n .section-title {\r\n font-family: var(--ff-head);\r\n font-size: clamp(1.8rem, 3vw, 2.6rem);\r\n font-weight: 500;\r\n color: var(--text);\r\n margin-bottom: 8px;\r\n line-height: 1.2;\r\n }\r\n\r\n .section-desc {\r\n font-size: 14.5px;\r\n color: var(--sage);\r\n max-width: 540px;\r\n margin-bottom: 48px;\r\n font-weight: 300;\r\n }\r\n\r\n \/* Post count badge *\/\r\n .post-count {\r\n display: inline-block;\r\n background: var(--bg-light);\r\n border: 1px solid var(--border-light);\r\n color: var(--sage);\r\n font-size: 12px;\r\n font-weight: 500;\r\n letter-spacing: 0.05em;\r\n padding: 4px 12px;\r\n border-radius: var(--radius);\r\n margin-left: 14px;\r\n vertical-align: middle;\r\n position: relative;\r\n top: -3px;\r\n }\r\n\r\n \/* \u2500\u2500 Grid \u2500\u2500 *\/\r\n .blog-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 28px;\r\n }\r\n\r\n \/* \u2500\u2500 Card \u2500\u2500 *\/\r\n .blog-card {\r\n background: var(--bg-card);\r\n border: 1px solid var(--border-light);\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n display: flex;\r\n flex-direction: column;\r\n transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);\r\n cursor: pointer;\r\n\r\n \/* scroll-reveal initial state *\/\r\n opacity: 0;\r\n transform: translateY(32px);\r\n }\r\n .blog-card.revealed {\r\n opacity: 1;\r\n transform: translateY(0);\r\n }\r\n .blog-card:hover {\r\n transform: translateY(-5px);\r\n border-color: var(--gold-dim);\r\n box-shadow: 0 16px 48px rgba(0,0,0,0.45), 0 0 0 1px rgba(201,169,110,0.12);\r\n }\r\n\r\n \/* Image wrapper *\/\r\n .card-image-wrap {\r\n position: relative;\r\n overflow: hidden;\r\n aspect-ratio: 16 \/ 10;\r\n background: var(--bg-light);\r\n flex-shrink: 0;\r\n }\r\n\r\n .card-image {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n display: block;\r\n transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);\r\n }\r\n .blog-card:hover .card-image { transform: scale(1.06); }\r\n\r\n \/* Tag badge *\/\r\n .card-tag {\r\n position: absolute;\r\n top: 14px;\r\n left: 14px;\r\n background: var(--gold);\r\n color: #06100A;\r\n font-family: var(--ff-body);\r\n font-size: 10px;\r\n font-weight: 700;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n padding: 4px 10px;\r\n border-radius: var(--radius);\r\n z-index: 2;\r\n line-height: 1.4;\r\n }\r\n\r\n \/* Image overlay gradient *\/\r\n .card-image-wrap::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(to top, rgba(6,16,10,0.55) 0%, transparent 55%);\r\n pointer-events: none;\r\n }\r\n\r\n \/* Card body *\/\r\n .card-body {\r\n padding: 24px 22px 22px;\r\n display: flex;\r\n flex-direction: column;\r\n flex: 1;\r\n }\r\n\r\n .card-title {\r\n font-family: var(--ff-head);\r\n font-size: 1.22rem;\r\n font-weight: 600;\r\n line-height: 1.3;\r\n color: var(--text);\r\n margin-bottom: 10px;\r\n transition: color var(--transition);\r\n }\r\n .blog-card:hover .card-title { color: var(--gold); }\r\n\r\n .card-excerpt {\r\n font-size: 13.5px;\r\n color: var(--sage);\r\n line-height: 1.68;\r\n font-weight: 300;\r\n margin-bottom: 20px;\r\n flex: 1;\r\n display: -webkit-box;\r\n -webkit-line-clamp: 3;\r\n -webkit-box-orient: vertical;\r\n overflow: hidden;\r\n }\r\n\r\n \/* Card footer *\/\r\n .card-footer {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n border-top: 1px solid var(--border-light);\r\n padding-top: 16px;\r\n margin-top: auto;\r\n }\r\n\r\n .card-read-more {\r\n font-family: var(--ff-body);\r\n font-size: 12px;\r\n font-weight: 600;\r\n letter-spacing: 0.07em;\r\n text-transform: uppercase;\r\n color: var(--gold);\r\n text-decoration: none;\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n transition: gap var(--transition), opacity var(--transition);\r\n }\r\n .card-read-more:hover { gap: 10px; opacity: 0.85; }\r\n\r\n .card-date {\r\n font-size: 12px;\r\n color: var(--border);\r\n font-weight: 400;\r\n letter-spacing: 0.03em;\r\n }\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n NEWSLETTER CTA\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .newsletter-section {\r\n padding: 0 0 80px;\r\n }\r\n\r\n .newsletter-inner {\r\n background: var(--bg-light);\r\n border: 1px solid var(--border-light);\r\n border-radius: var(--radius);\r\n padding: 56px 48px;\r\n display: flex;\r\n align-items: center;\r\n gap: 48px;\r\n position: relative;\r\n overflow: hidden;\r\n\r\n opacity: 0;\r\n transform: translateY(28px);\r\n transition: opacity 0.55s ease, transform 0.55s ease;\r\n }\r\n .newsletter-inner.revealed { opacity: 1; transform: translateY(0); }\r\n\r\n \/* Decorative corner accent *\/\r\n .newsletter-inner::before {\r\n content: '';\r\n position: absolute;\r\n top: 0; right: 0;\r\n width: 220px;\r\n height: 220px;\r\n background: radial-gradient(ellipse at top right, rgba(201,169,110,0.07) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n .newsletter-text { flex: 1; min-width: 0; }\r\n\r\n .newsletter-eyebrow {\r\n font-family: var(--ff-body);\r\n font-size: 11px;\r\n font-weight: 600;\r\n letter-spacing: 0.18em;\r\n text-transform: uppercase;\r\n color: var(--gold);\r\n margin-bottom: 10px;\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n }\r\n .newsletter-eyebrow::before {\r\n content: '';\r\n display: block;\r\n width: 24px;\r\n height: 1px;\r\n background: var(--gold);\r\n opacity: 0.7;\r\n }\r\n\r\n .newsletter-title {\r\n font-family: var(--ff-head);\r\n font-size: clamp(1.7rem, 3vw, 2.4rem);\r\n font-weight: 500;\r\n color: var(--text);\r\n line-height: 1.2;\r\n margin-bottom: 10px;\r\n }\r\n\r\n .newsletter-desc {\r\n font-size: 14px;\r\n color: var(--sage);\r\n font-weight: 300;\r\n line-height: 1.6;\r\n }\r\n\r\n .newsletter-form { flex-shrink: 0; width: 340px; }\r\n\r\n .form-row {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n }\r\n\r\n .form-input {\r\n background: var(--bg);\r\n border: 1px solid var(--border);\r\n border-radius: var(--radius);\r\n padding: 14px 18px;\r\n font-family: var(--ff-body);\r\n font-size: 14px;\r\n color: var(--text);\r\n outline: none;\r\n transition: border-color var(--transition), box-shadow var(--transition);\r\n width: 100%;\r\n }\r\n .form-input::placeholder { color: var(--sage); opacity: 0.7; }\r\n .form-input:focus {\r\n border-color: var(--gold-dim);\r\n box-shadow: 0 0 0 3px rgba(201,169,110,0.1);\r\n }\r\n\r\n .btn-subscribe {\r\n background: var(--gold);\r\n color: #06100A;\r\n border: none;\r\n border-radius: var(--radius);\r\n padding: 14px 28px;\r\n font-family: var(--ff-body);\r\n font-size: 13px;\r\n font-weight: 700;\r\n letter-spacing: 0.1em;\r\n text-transform: uppercase;\r\n cursor: pointer;\r\n width: 100%;\r\n transition: background var(--transition), transform var(--transition);\r\n }\r\n .btn-subscribe:hover {\r\n background: #d4b47c;\r\n transform: translateY(-1px);\r\n }\r\n .btn-subscribe:active { transform: translateY(0); }\r\n\r\n .form-note {\r\n font-size: 11px;\r\n color: var(--sage);\r\n opacity: 0.7;\r\n margin-top: 8px;\r\n text-align: center;\r\n font-weight: 300;\r\n }\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n RESPONSIVE\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n @media (max-width: 1024px) {\r\n .blog-grid { grid-template-columns: repeat(2, 1fr); }\r\n .newsletter-inner { flex-direction: column; gap: 32px; padding: 40px 32px; }\r\n .newsletter-form { width: 100%; }\r\n }\r\n\r\n @media (max-width: 680px) {\r\n .blog-grid { grid-template-columns: 1fr; }\r\n .hero { height: auto; min-height: 280px; padding: 80px 0 40px; }\r\n .hero__subtitle { font-size: 14px; }\r\n .newsletter-inner { padding: 32px 20px; }\r\n .newsletter-title { font-size: 1.6rem; }\r\n }\r\n\r\n \/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n DIVIDER\r\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\r\n .section-divider {\r\n width: 100%;\r\n height: 1px;\r\n background: linear-gradient(to right, transparent, var(--border-light) 20%, var(--border-light) 80%, transparent);\r\n margin-bottom: 72px;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n HERO\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <section class=\"hero full-width\">\r\n <div class=\"hero__bg\" id=\"heroBg\"><\/div>\r\n <div class=\"hero__overlay\"><\/div>\r\n <div class=\"hero__content container\">\r\n <nav class=\"breadcrumb\" aria-label=\"Breadcrumb\">\r\n <a href=\"https:\/\/chalopahaad.com\/\">Home<\/a>\r\n <span class=\"breadcrumb__sep\">\u203a<\/span>\r\n <a href=\"https:\/\/chalopahaad.com\/dehradun\/\">Dehradun<\/a>\r\n <span class=\"breadcrumb__sep\">\u203a<\/span>\r\n <span class=\"breadcrumb__current\">Blog<\/span>\r\n <\/nav>\r\n <span class=\"hero__line\"><\/span>\r\n <h1 class=\"hero__title\">Dehradun Travel Blog<\/h1>\r\n <p class=\"hero__subtitle\">Real stories, detailed guides, and insider tips from our personal explorations across Dehradun and the Doon Valley.<\/p>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n BLOG GRID\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <section class=\"blog-section\">\r\n <div class=\"container\">\r\n\r\n <div class=\"section-label\">All Stories<\/div>\r\n <h2 class=\"section-title\">\r\n From the Blog\r\n <span class=\"post-count\">12 Articles<\/span>\r\n <\/h2>\r\n <p class=\"section-desc\">Hand-picked guides, routes, and experiences \u2014 written for travellers who want more than the tourist trail.<\/p>\r\n<div class=\"blog-grid\" id=\"blogGrid\"><\/div>\r\n\r\n<script>\r\nasync function loadBlogs() {\r\n const container = document.getElementById(\"blogGrid\");\r\n\r\n try {\r\n const res = await fetch(\"https:\/\/chalopahaad.com\/dehradun\/wp-json\/wp\/v2\/posts?per_page=12&_embed\");\r\n const posts = await res.json();\r\n\r\n container.innerHTML = posts.map((post, index) => {\r\n const img = post._embedded?.[\"wp:featuredmedia\"]?.[0]?.source_url \r\n || \"https:\/\/via.placeholder.com\/600x400\";\r\n\r\n const title = post.title.rendered;\r\n const excerpt = post.excerpt.rendered.replace(\/<[^>]+>\/g, \"\").substring(0, 120) + \"...\";\r\n const link = post.link;\r\n\r\n return `\r\n <article class=\"blog-card\" style=\"transition-delay:${index * 60}ms\">\r\n <div class=\"card-image-wrap\">\r\n <img decoding=\"async\" class=\"card-image\" src=\"${img}\" alt=\"${title}\" loading=\"lazy\"\/>\r\n <span class=\"card-tag\">Blog<\/span>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <h2 class=\"card-title\">${title}<\/h2>\r\n <p class=\"card-excerpt\">${excerpt}<\/p>\r\n <div class=\"card-footer\">\r\n <a class=\"card-read-more\" href=\"${link}\">Read Article \u2192<\/a>\r\n <span class=\"card-date\">${new Date(post.date).toLocaleDateString()}<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/article>\r\n `;\r\n }).join(\"\");\r\n\r\n \/\/ re-trigger animation\r\n initScrollReveal();\r\n\r\n } catch (err) {\r\n container.innerHTML = \"<p style='color:white'>Failed to load blogs<\/p>\";\r\n console.error(err);\r\n }\r\n}\r\n\r\nfunction initScrollReveal() {\r\n const cards = document.querySelectorAll('.blog-card');\r\n\r\n const observer = new IntersectionObserver(function(entries) {\r\n entries.forEach(function(entry) {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('revealed');\r\n observer.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.12 });\r\n\r\n cards.forEach(card => observer.observe(card));\r\n}\r\n\r\nwindow.addEventListener(\"load\", loadBlogs);\r\n<\/script>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n NEWSLETTER\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <section class=\"newsletter-section\">\r\n <div class=\"container\">\r\n <div class=\"section-divider\"><\/div>\r\n <div class=\"newsletter-inner\" id=\"newsletterBox\">\r\n <div class=\"newsletter-text\">\r\n <div class=\"newsletter-eyebrow\">Stay Updated<\/div>\r\n <h2 class=\"newsletter-title\">Stories from the mountains, straight to you<\/h2>\r\n <p class=\"newsletter-desc\">New trek guides, hidden spots, and seasonal travel tips \u2014 delivered before the crowds find out. No fluff, just useful.<\/p>\r\n <\/div>\r\n <div class=\"newsletter-form\">\r\n <form class=\"form-row\" onsubmit=\"handleSubscribe(event)\">\r\n <input\r\n class=\"form-input\"\r\n type=\"text\"\r\n placeholder=\"Your name\"\r\n aria-label=\"Your name\"\r\n autocomplete=\"given-name\"\r\n \/>\r\n <input\r\n class=\"form-input\"\r\n type=\"email\"\r\n placeholder=\"Your email address\"\r\n aria-label=\"Email address\"\r\n autocomplete=\"email\"\r\n required\r\n \/>\r\n <button class=\"btn-subscribe\" type=\"submit\">Subscribe \u2014 It's Free<\/button>\r\n <\/form>\r\n <p class=\"form-note\">No spam. Unsubscribe any time.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SCROLL REVEAL + HERO BG JS\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n <script>\r\n \/* Hero BG parallax trigger *\/\r\n window.addEventListener('load', function () {\r\n var bg = document.getElementById('heroBg');\r\n if (bg) {\r\n bg.classList.add('loaded');\r\n }\r\n });\r\n\r\n \/* Scroll reveal using IntersectionObserver *\/\r\n (function () {\r\n var cards = document.querySelectorAll('.blog-card');\r\n var newsletter = document.getElementById('newsletterBox');\r\n\r\n \/* Stagger cards in rows of 3 *\/\r\n var observer = new IntersectionObserver(function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n var el = entry.target;\r\n var delay = parseFloat(el.style.transitionDelay) || 0;\r\n el.style.transition =\r\n 'opacity 0.55s ease ' + delay + 'ms, transform 0.55s ease ' + delay + 'ms, border-color 0.35s ease, box-shadow 0.35s ease';\r\n el.classList.add('revealed');\r\n observer.unobserve(el);\r\n }\r\n });\r\n }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\r\n\r\n cards.forEach(function (card) { observer.observe(card); });\r\n\r\n \/* Newsletter reveal *\/\r\n if (newsletter) {\r\n var nlObserver = new IntersectionObserver(function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('revealed');\r\n nlObserver.unobserve(entry.target);\r\n }\r\n });\r\n }, { threshold: 0.15 });\r\n nlObserver.observe(newsletter);\r\n }\r\n })();\r\n\r\n \/* Subscribe handler *\/\r\n function handleSubscribe(e) {\r\n e.preventDefault();\r\n var btn = e.target.querySelector('.btn-subscribe');\r\n var original = btn.textContent;\r\n btn.textContent = 'Subscribed!';\r\n btn.style.background = '#4a7c5a';\r\n btn.style.color = '#F5F0E8';\r\n setTimeout(function () {\r\n btn.textContent = original;\r\n btn.style.background = '';\r\n btn.style.color = '';\r\n e.target.reset();\r\n }, 3000);\r\n }\r\n <\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n<script>\r\n\/* FETCH BLOGS FROM WORDPRESS *\/\r\nfetch('https:\/\/chalopahaad.com\/wp-json\/wp\/v2\/posts?per_page=12&_embed')\r\n.then(res => res.json())\r\n.then(posts => {\r\n\r\nlet html = '';\r\n\r\nposts.forEach((post, index) => {\r\n\r\nlet image = post._embedded?.['wp:featuredmedia']?.[0]?.source_url \r\n|| 'https:\/\/via.placeholder.com\/600x400';\r\n\r\nlet date = new Date(post.date).toLocaleDateString('en-US', {\r\n month: 'short',\r\n year: 'numeric'\r\n});\r\n\r\n\/* CLEAN EXCERPT *\/\r\nlet excerpt = post.excerpt.rendered\r\n.replace(\/(<([^>]+)>)\/gi, \"\")\r\n.substring(0, 120);\r\n\r\nhtml += `\r\n<article class=\"blog-card\" style=\"transition-delay:${index * 60}ms\">\r\n\r\n <div class=\"card-image-wrap\">\r\n <img decoding=\"async\" class=\"card-image\" src=\"${image}\" alt=\"${post.title.rendered}\" loading=\"lazy\"\/>\r\n <span class=\"card-tag\">Travel<\/span>\r\n <\/div>\r\n\r\n <div class=\"card-body\">\r\n <h2 class=\"card-title\">${post.title.rendered}<\/h2>\r\n\r\n <p class=\"card-excerpt\">\r\n ${excerpt}...\r\n <\/p>\r\n\r\n <div class=\"card-footer\">\r\n <a class=\"card-read-more\" href=\"${post.link}\">Read Article \u2192<\/a>\r\n <span class=\"card-date\">${date}<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n<\/article>\r\n`;\r\n\r\n});\r\n\r\ndocument.getElementById('blogGrid').innerHTML = html;\r\n\r\n\/* RE-APPLY SCROLL ANIMATION *\/\r\nsetTimeout(() => {\r\n const cards = document.querySelectorAll('.blog-card');\r\n\r\n const observer = new IntersectionObserver(function(entries){\r\n entries.forEach(function(entry){\r\n if(entry.isIntersecting){\r\n entry.target.classList.add('revealed');\r\n }\r\n });\r\n }, { threshold: 0.12 });\r\n\r\n cards.forEach(card => observer.observe(card));\r\n}, 200);\r\n\r\n});\r\n<\/script>\r\n\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>Dehradun Travel Blog \u2014 Chalo Pahaad Home \u203a Dehradun \u203a Blog Dehradun Travel Blog Real stories, detailed guides, and insider tips from our personal explorations across Dehradun and the Doon Valley. All Stories From the Blog 12 Articles Hand-picked guides, routes, and experiences \u2014 written for travellers who want more than the tourist trail. Stay […]<\/p>\n","protected":false},"author":21,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6006","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/chalopahaad.com\/dehradun\/wp-json\/wp\/v2\/pages\/6006","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chalopahaad.com\/dehradun\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chalopahaad.com\/dehradun\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chalopahaad.com\/dehradun\/wp-json\/wp\/v2\/users\/21"}],"replies":[{"embeddable":true,"href":"https:\/\/chalopahaad.com\/dehradun\/wp-json\/wp\/v2\/comments?post=6006"}],"version-history":[{"count":40,"href":"https:\/\/chalopahaad.com\/dehradun\/wp-json\/wp\/v2\/pages\/6006\/revisions"}],"predecessor-version":[{"id":6805,"href":"https:\/\/chalopahaad.com\/dehradun\/wp-json\/wp\/v2\/pages\/6006\/revisions\/6805"}],"wp:attachment":[{"href":"https:\/\/chalopahaad.com\/dehradun\/wp-json\/wp\/v2\/media?parent=6006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}