{"id":2065,"date":"2025-08-02T15:47:28","date_gmt":"2025-08-02T20:47:28","guid":{"rendered":"https:\/\/dev.tollkeeperscottage.ca\/?page_id=2065"},"modified":"2026-05-31T19:10:18","modified_gmt":"2026-06-01T00:10:18","slug":"torontohistorynetorig6-3","status":"publish","type":"page","link":"https:\/\/dev.tollkeeperscottage.ca\/","title":{"rendered":"firstpage ala tohistorynet modb"},"content":{"rendered":"\n<style>\n\/* FULLSCREEN CONTAINER - NO PADDING (your existing, unchanged) *\/\nbody {\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n}\n\n\/* New full-width breakout for slider (enhanced overrides for Astra container; targets 1200px width from debug) *\/\n.full-width-slider-wrapper {\n  width: 100vw !important;\n  position: relative;\n  left: calc(50% - 50vw) !important; \/* Better centering *\/\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n  overflow: visible !important; \/* Prevent headline clip *\/\n}\n\n\/* Force Astra container to full-width on this page (overrides 1200px width) *\/\nbody.page-slider .ast-container,\nbody.page-slider .entry-content,\nbody.page-slider #primary,\nbody.page-slider .site-content {\n  max-width: 100vw !important;\n  width: 100vw !important;\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n#rev_slider_2_1_wrapper {\n  position: relative;\n  width: 100vw !important; \/* Full viewport *\/\n  height: 100vh;\n  min-height: 868px !important; \/* Match target gridheight *\/\n  margin: 0 auto !important;\n  padding: 0;\n  left: 0;\n}\n\n\/* SLIDE STYLING (your existing, unchanged) *\/\n#rev_slider_2_1 li {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0;\n  transition: opacity 0.5s ease;\n}\n#rev_slider_2_1 li.active { \n  opacity: 1; \n  z-index: 2; \n}\n\n\/* IMAGE CROPPING (use cover to fill frame completely like target) *\/\n.rev-slidebg {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  object-fit: cover !important; \/* Covers the frame, shows full scene edges *\/\n  object-position: center center !important; \/* Center for balanced crop, adjust if needed (e.g., top for hats) *\/\n}\n\n\/* OVERLAY AND TEXT STYLING (exact dimensions\/positions from target code) *\/\n.slide-overlay {\n  background: rgba(0,0,0,0.34);\n  position: absolute;\n  width: 747px !important; \/* Target width *\/\n  height: 513px !important; \/* Target height *\/\n  left: 80px !important; \/* Increased inset *\/\n  top: 256px !important; \/* Target y *\/\n  z-index: 1;\n  overflow: hidden !important; \/* Keeps text inside on resize *\/\n}\n\n.headline-text {\n  font-family: Montserrat;\n  font-weight: 700;\n  font-size: 55px;\n  color: #fddc0a;\n  line-height: 55px !important;\n  position: absolute;\n  left: 97px !important; \/* Target x + 80px *\/\n  top: 312px !important; \/* Target y *\/\n  width: 571px !important; \/* Target width *\/\n  z-index: 2;\n  white-space: nowrap !important; \/* Match target to prevent wrap issues *\/\n  overflow: hidden !important;\n}\n\n.subtext {\n  font-family: 'Libre Baskerville';\n  font-size: 30px;\n  color: #fff;\n  line-height: 40px !important;\n  position: absolute;\n  left: 95px !important; \/* Target x + 80px *\/\n  top: 520px !important; \/* Target y *\/\n  width: 571px !important; \/* Target width for constrain *\/\n  z-index: 2;\n  white-space: normal !important; \/* Allow wrap if needed *\/\n  overflow: hidden !important;\n}\n\n\/* Header transparency and positioning (white-ish semi-transparent from start, black text) *\/\nbody.transparent-header .ast-primary-header-bar {\n  position: fixed !important;\n  top: 0;\n  width: 100%;\n  background-color: rgba(255,255,255,0.5) !important; \/* White-ish semi-transparent initial *\/\n  transition: background-color 0.3s ease, padding 0.3s ease;\n  z-index: 1000;\n  padding-top: 15px !important; \/* Slimmer to match screenshot *\/\n  padding-bottom: 15px !important;\n}\n\n\/* Ensure other header elements transparent *\/\nbody.transparent-header #masthead,\nbody.transparent-header .ast-main-header-bar,\nbody.transparent-header .ast-header-break-point .main-header-bar-wrap .main-header-bar {\n  background-color: transparent !important;\n}\n\n\/* Header text\/icons: black always (match screenshot) *\/\nbody.transparent-header .site-title a,\nbody.transparent-header .main-header-menu > .menu-item > .menu-link {\n  color: #000 !important;\n}\n\n\/* Scroll shrink and opacity change (using Astra's .ast-site-header-shrink; more opaque white-ish) *\/\nbody.transparent-header .ast-primary-header-bar.ast-site-header-shrink {\n  background-color: rgba(255, 255, 255, 0.8) !important;\n  backdrop-filter: blur(5px);\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n  padding-top: 0px !important; \/* Slim on shrink *\/\n  padding-bottom: 0px !important;\n}\n\n\/* Desktop dropdowns: white bg, black text (from old CSS) *\/\nbody.transparent-header .main-header-menu .sub-menu {\n  background-color: #fff !important;\n}\n\nbody.transparent-header .main-header-menu .sub-menu .menu-link {\n  color: #000 !important;\n}\n\n\/* Fix dropdown menus under transparent header *\/\nbody.transparent-header .main-header-menu .sub-menu {\n  border-radius: 4px;\n  box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n}\n\n\/* Ensure content starts below header initially, but slider overlaps *\/\nbody.transparent-header #content {\n  margin-top: 0 !important;\n  padding-top: 0 !important;\n}\n\n\/* Pull slider up under header (reduced for more vertical image show) *\/\nbody.transparent-header #rev_slider_2_1_wrapper {\n  margin-top: -50px !important; \/* Less pull-up to show more bottom *\/\n}\n\n\/* Offset for WP admin bar (from old CSS) *\/\nbody.admin-bar.transparent-header .ast-primary-header-bar {\n  top: 32px !important; \/* Desktop admin bar *\/\n}\nbody.admin-bar.transparent-header #rev_slider_2_1_wrapper {\n  margin-top: -82px !important; \/* -50px + -32px *\/\n}\n\n\/* MOBILE RESPONSIVE (adapted from your old CSS + existing; flush left text\/overlay like screenshot, with target visibilityLevels breakpoints) *\/\n@media (max-width: 1240px) {\n  .slide-overlay {\n    width: 747px !important;\n    height: 513px !important;\n  }\n  .headline-text {\n    font-size: 55px;\n    line-height: 55px !important;\n    width: 571px !important;\n  }\n  .subtext {\n    font-size: 30px;\n    line-height: 40px !important;\n  }\n}\n\n@media (max-width: 1024px) {\n  .slide-overlay {\n    width: 600px !important;\n    height: 410px !important;\n  }\n  .headline-text {\n    font-size: 44px;\n    line-height: 44px !important;\n    width: 456px !important;\n  }\n  .subtext {\n    font-size: 24px;\n    line-height: 32px !important;\n  }\n}\n\n\/* MOBILE - BLACK BOX FLUSH LEFT & SMALLER *\/\n@media (max-width: 768px) {\n  #rev_slider_2_1_wrapper {\n    height: 70vh;\n    min-height: 400px !important;\n  }\n  \n  .slide-overlay {\n    width: 70% !important; \/* REDUCED WIDTH *\/\n    height: auto !important;\n    left: 0 !important; \/* FLUSH LEFT *\/\n    top: auto !important;\n    bottom: 20px !important;\n    padding: 15px !important;\n    background: rgba(0,0,0,0.4); \/* SLIGHTLY DARKER *\/\n  }\n  .headline-text, .subtext {\n    width: calc(100% - 20px) !important; \/* Slight padding for readability, but flush feel *\/\n    left: 10px !important; \/* Small indent, adjust to 0 if exact flush needed *\/\n    right: 10px !important;\n    overflow: visible !important;\n  }\n  .headline-text {\n    font-size: 24px !important;\n    line-height: 28px !important;\n    top: 10% !important; \/* Lower to prevent fly-off *\/\n  }\n  .subtext {\n    font-size: 18px !important;\n     font-size: 16px !important;\n    line-height: 20px !important;\n    top: auto !important;\n    bottom: 10% !important; \/* Stick to bottom *\/\n  }\n  .rev-slidebg {\n    object-position: center 25%;\n  }\n\n  \/* Mobile header shrink (from old CSS) *\/\n  body.transparent-header .ast-primary-header-bar.ast-site-header-shrink {\n    background-color: rgba(255,255,255,0.9) !important; \/* More opaque white-ish *\/\n    padding: 5px 0 !important;\n    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;\n  }\n\n  body.transparent-header .ast-primary-header-bar {\n    padding-top: 15px !important;\n    padding-bottom: 15px !important;\n  }\n  body.transparent-header .ast-primary-header-bar.ast-site-header-shrink {\n    padding-top: 5px !important;\n    padding-bottom: 5px !important;\n  }\n\n  body.transparent-header #rev_slider_2_1_wrapper {\n    margin-top: -50px !important; \/* Adjusted for mobile *\/\n  }\n\n  body.admin-bar.transparent-header .ast-primary-header-bar {\n    top: 46px !important; \/* Mobile admin bar *\/\n  }\n  body.admin-bar.transparent-header #rev_slider_2_1_wrapper {\n    margin-top: -96px !important; \/* -50px + -46px *\/\n  }\n\n  \/* Mobile menu toggle black (match screenshot) *\/\n  body.transparent-header .ast-header-break-point button.menu-toggle {\n    color: #000 !important;\n  }\n\n  \/* Mobile off-canvas: white bg, black text (from old CSS) *\/\n  body.transparent-header .ast-mobile-header-content {\n    position: fixed !important;\n    top: 68px !important; \/* Adjust if needed *\/\n    left: 0 !important;\n    width: 100% !important;\n    z-index: 9998 !important;\n    background-color: #fff !important;\n  }\n\n  body.transparent-header .ast-mobile-header-content .main-header-menu > .menu-item > .menu-link {\n    color: #000 !important;\n    background: transparent !important;\n  }\n  body.transparent-header .ast-mobile-header-content .main-header-menu > .menu-item > .menu-link:hover,\n  body.transparent-header .ast-mobile-header-content .main-header-menu > .menu-item > .menu-link:focus {\n    background-color: rgba(0,0,0,0.05) !important;\n    color: #000 !important;\n  }\n\n  body.transparent-header .ast-mobile-header-content .main-header-menu .sub-menu {\n    background-color: #fff !important;\n  }\n  body.transparent-header .ast-mobile-header-content .main-header-menu .sub-menu .menu-link {\n    color: #000 !important;\n    background: transparent !important;\n  }\n  body.transparent-header .ast-mobile-header-content .main-header-menu .sub-menu .menu-link:hover,\n  body.transparent-header .ast-mobile-header-content .main-header-menu .sub-menu .menu-link:focus {\n    background-color: rgba(0,0,0,0.05) !important;\n    color: #000 !important;\n  }\n}\n\n\/* SMALLEST SCREENS - EVEN SMALLER BLACK BOX *\/\n@media (max-width: 480px) {\n  #rev_slider_2_1_wrapper {\n    height: 60vh;\n    min-height: 350px !important;\n  }\n  \n  .slide-overlay {\n    width: 80% !important; \/* NARROWER *\/\n    bottom: 15px !important;\n    padding: 10px !important;\n  }\n  \n  .headline-text {\n    font-size: 20px !important;\n    line-height: 24px !important;\n    bottom: 80px !important;\n  }\n  \n  .subtext {\n    font-size: 14px !important;\n    line-height: 18px !important;\n    bottom: 20px !important;\n  }\n  \n  \/* SMALLER ADMIN BAR ADJUSTMENT *\/\n  body.admin-bar.transparent-header .ast-primary-header-bar {\n    top: 32px !important;\n  }\n  \n  body.admin-bar #rev_slider_2_1_wrapper {\n    margin-top: -32px !important;\n  }\n}\n\/* TARGETED PADDING OVERRIDE FOR SLIDER PAGES *\/\nbody.page-slider .ast-container,\nbody.page-slider .ast-container-fluid {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n}\n\n\/* ENSURE FULL WIDTH FOR SLIDER CONTAINERS *\/\nbody.page-slider .site-content #primary {\n  padding-left: 0 !important;\n  padding-right: 0 !important;\n}\n\n\/* FULL-WIDTH SLIDER ADJUSTMENTS *\/\n.full-width-slider-wrapper {\n  width: 100vw !important;\n  position: relative;\n  left: 0 !important;\n  margin-left: 0 !important;\n  margin-right: 0 !important;\n}\n\n\/* IMAGE EDGE ALIGNMENT *\/\n.rev-slidebg {\n  left: 0 !important;\n  margin-left: 0 !important;\n}\n\/* Add this to your existing CSS *\/\n.bw-filter {\n  filter: grayscale(100%) contrast(110%);\n  transition: filter 1.5s ease;\n}\n\n\/* Animation for color transition *\/\n#rev_slider_2_1 li.active .rev-slidebg.bw-filter,\n#rev_slider_2_1 li .rev-slidebg {\n  filter: grayscale(0%);\n}\n\n\/* Adjust text positioning if needed *\/\n.headline-text {\n  font-size: 55px;\n  line-height: 1.1;\n}\n.subtext {\n  font-size: 26px;\n  line-height: 1.3;\n}\n\n@media (max-width: 768px) {\n  .headline-text {\n    font-size: 32px;\n  }\n  .subtext {\n    font-size: 18px;\n  }\n}\n\/* CRITICAL FIXES - ADD TO YOUR EXISTING CSS *\/\n.headline-text {\n  font-size: 48px !important; \/* Slightly smaller for better fit *\/\n  line-height: 1.2 !important; \/* Better line spacing *\/\n  white-space: normal !important; \/* Allows text to wrap *\/\n}\n\n.subtext {\n  font-size: 24px !important;\n  line-height: 1.4 !important;\n}\n\n\/* Black and white effect *\/\n.bw-mode .rev-slidebg {\n  filter: grayscale(100%) contrast(110%);\n}\n\n\/* Slide transition fix *\/\n#rev_slider_2_1 li {\n  transition: opacity 0.8s ease !important; \/* Smoother transition *\/\n}\n#rev_slider_2_1 li:not(.active) {\n  opacity: 0 !important;\n  pointer-events: none !important;\n}\n\n@media (max-width: 768px) {\n  .headline-text {\n    font-size: 32px !important;\n  }\n  .subtext {\n    font-size: 18px !important;\n  }\n}\n\/* CRITICAL FIXES *\/\n#rev_slider_2_1 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n#rev_slider_2_1 li {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  transition: opacity 1s ease;\n  z-index: 1;\n}\n\n#rev_slider_2_1 li.active {\n  opacity: 1;\n  z-index: 2;\n}\n\n\/* Black and white effect - NOW WORKING *\/\n#rev_slider_2_1 li[data-bw=\"true\"] .rev-slidebg {\n  filter: grayscale(100%) contrast(110%) !important;\n}\n\n\/* Text styling *\/\n.headline-text {\n  font-family: Montserrat, sans-serif;\n  font-weight: 700;\n  font-size: 48px;\n  color: #fddc0a;\n  line-height: 1.2;\n  position: absolute;\n  left: 97px;\n  top: 312px;\n  width: 571px;\n  z-index: 3;\n  white-space: normal;\n}\n\n.subtext {\n  font-family: 'Libre Baskerville', serif;\n  font-size: 24px;\n  color: #fff;\n  line-height: 1.4;\n  position: absolute;\n  left: 95px;\n  top: 520px;\n  width: 571px;\n  z-index: 3;\n}\n\/* here to media ensure title is padded each side plus menu on one line for desktop *\/\n\/* Header transparency and positioning (white-ish semi-transparent from start, black text) *\/\nbody.transparent-header .ast-primary-header-bar {\n  position: fixed !important;\n  top: 0;\n  width: 100%;\n  background-color: rgba(255,255,255,0.5) !important; \/* White-ish semi-transparent initial *\/\n  transition: background-color 0.3s ease, padding 0.3s ease;\n  z-index: 1000;\n  padding-top: 15px !important; \/* Slimmer to match screenshot *\/\n  padding-bottom: 15px !important;\n}\n\n\/* Header container adjustments for proper spacing *\/\nbody.transparent-header .ast-primary-header-bar .ast-container {\n  padding-left: 20px !important;\n  padding-right: 20px !important;\n  width: 100% !important;\n  max-width: 100% !important;\n}\n\n\/* Logo\/site title spacing *\/\nbody.transparent-header .site-branding {\n  margin-right: 30px !important;\n  min-width: max-content !important;\n}\n\n\n\n\/* Ensure search button is visible *\/\nbody.transparent-header .ast-search-menu-icon {\n  margin-left: 15px !important;\n}\n\n\n\n\/* Ensure dropdowns don't get affected *\/\nbody.transparent-header .main-header-menu .sub-menu {\n  white-space: normal !important;\n}\n\/* Desktop menu adjustments (only for screens wider than 768px) *\/\n@media (min-width: 922px) {\n  body.transparent-header .main-navigation {\n    white-space: nowrap !important;\n  }\n\n  body.transparent-header .main-header-menu {\n    display: flex !important;\n    flex-wrap: nowrap !important;\n    justify-content: flex-start !important;\n  }\n  \n  body.transparent-header .main-header-menu .menu-item {\n    margin: 0 12px !important;\n  }\n\n  body.transparent-header .main-header-menu .menu-item:first-child {\n    margin-left: 0 !important;\n  }\n}\n@media (max-width: 768px) {\n  .headline-text {\n    font-size: 32px;\n    left: 20px;\n    width: calc(100% - 40px);\n  }\n  .subtext {\n    font-size: 18px;\n    left: 20px;\n    width: calc(100% - 40px);\n  }\n}\n\/* TEXT POSITIONING - ORIGINAL DESKTOP POSITIONING *\/\n.headline-text {\n  font-size: 55px;\n  line-height: 55px;\n  top: 312px !important; \/* Original desktop position *\/\n}\n\n.subtext {\n  font-size: 30px;\n  line-height: 40px;\n  top: 520px !important; \/* Original desktop position *\/\n}\n\n\/* MOBILE ADJUSTMENTS ONLY *\/\n@media (max-width: 1240px) {\n  .headline-text {\n    top: 25vh !important; \/* Starts adjusting on smaller desktop *\/\n  }\n  .subtext {\n    top: calc(25vh + 120px) !important;\n  }\n}\n\n@media (max-width: 1024px) {\n  .headline-text {\n    font-size: 44px;\n    line-height: 44px;\n    top: 22vh !important;\n  }\n  .subtext {\n    font-size: 24px;\n    line-height: 32px;\n    top: calc(22vh + 100px) !important;\n  }\n}\n\n@media (max-width: 768px) {\n  .headline-text {\n    font-size: 32px;\n    line-height: 32px;\n    top: 20vh !important; \/* About 10% from bottom when combined with subtext *\/\n    left: 20px !important;\n    width: calc(100% - 40px) !important;\n  }\n  .subtext {\n    font-size: 18px;\n    line-height: 24px;\n    top: calc(20vh + 80px) !important; \/* Positions subtext about 10% above bottom *\/\n    left: 20px !important;\n    width: calc(100% - 40px) !important;\n  }\n}\n\n@media (max-width: 480px) {\n  .headline-text {\n    font-size: 26px;\n    line-height: 28px;\n    top: 15vh !important;\n  }\n  .subtext {\n    font-size: 16px;\n    line-height: 20px;\n    top: calc(15vh + 70px) !important; \/* Ensures text stays in bottom 25% *\/\n  }\n}\n\/* DEBUG MOBILE VIEWPORT (temporary) *\/\nbody::after {\n  content: 'Viewport: ' attr(data-viewport);\n  position: fixed;\n  bottom: 10px;\n  right: 10px;\n  background: rgba(0,0,0,0.7);\n  color: white;\n  padding: 5px;\n  z-index: 9999;\n  display: none;\n}\n.debug-viewport body::after {\n  display: block;\n}\n@media (max-width: 1024px) {\n  body.transparent-header .main-header-menu .menu-item {\n    margin: 0 8px !important;\n  }\n}\n\n@media (max-width: 768px) {\n  \/* Mobile header adjustments *\/\n  body.transparent-header .ast-primary-header-bar .ast-container {\n    padding-left: 15px !important;\n    padding-right: 15px !important;\n  }\n  \n  body.transparent-header .site-branding {\n    margin-right: 15px !important;\n  }\n  \n  body.transparent-header .main-header-menu .menu-item {\n    margin: 0 6px !important;\n    font-size: 14px !important;\n  }\n}\n\n@media (max-width: 480px) {\n  body.transparent-header .main-header-menu .menu-item {\n    margin: 0 4px !important;\n    font-size: 13px !important;\n  }\n  \n  body.transparent-header .site-title {\n    font-size: 16px !important;\n  }\n}\n\n<\/style>\n\n\n\n<!-- Slider content -->\n<link href=\"https:\/\/fonts.googleapis.com\/css?family=Montserrat:700|Libre+Baskerville:400\" rel=\"stylesheet\">\n\n<div class=\"full-width-slider-wrapper\">\n  <div id=\"rev_slider_2_1_wrapper\">\n    <div id=\"rev_slider_2_1\">\n      <ul>\n        <!-- SLIDE 1: 1875 Painting B&W -->\n        <li class=\"active\" data-bw=\"true\">\n          <img decoding=\"async\" src=\"http:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/02\/The-Howland-Plain-by-Art-Cox-1875-scaled.jpg\" class=\"rev-slidebg\">\n          <div class=\"slide-overlay\"><\/div>\n          <div class=\"headline-text\">Toronto&#8217;s Tollkeeper&#8217;s Cottage<\/div>\n          <div class=\"subtext\">Cottage in its location on Davenport Road and Bathurst in 1875<\/div>\n        <\/li>\n        \n        <!-- SLIDE 2: Early Cottage B&W -->\n        <li data-bw=\"true\">\n          <img decoding=\"async\" src=\"http:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/02\/cottagepic.jpg\" class=\"rev-slidebg\">\n          <div class=\"slide-overlay\"><\/div>\n          <div class=\"headline-text\">A Humble Home<\/div>\n          <div class=\"subtext\">Built in the 1830s, this structure housed multiple tollkeeper families over the years<\/div>\n        <\/li>\n        \n        <!-- SLIDE 3: Docents B&W -->\n        <li data-bw=\"true\">\n          <img decoding=\"async\" src=\"https:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/03\/resized2.jpg\" class=\"rev-slidebg\">\n          <div class=\"slide-overlay\"><\/div>\n          <div class=\"headline-text\">The Families Who Lived Here<\/div>\n          <div class=\"subtext\">Including John Bulman (1861) and others like Frances McCegue, Moses Hanna, and Thomas Brown<\/div>\n        <\/li>\n        \n        <!-- SLIDE 4: 1875 Painting Color -->\n        <li>\n          <img decoding=\"async\" src=\"http:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/02\/The-Howland-Plain-by-Art-Cox-1875-scaled.jpg\" class=\"rev-slidebg\">\n          <div class=\"slide-overlay\"><\/div>\n          <div class=\"headline-text\">Art Cox&#8217;s 1875 Painting<\/div>\n          <div class=\"subtext\">Color version of this rare depiction by local artist Arthur Cox<\/div>\n        <\/li>\n   <!-- SLIDE 4: 1875 Painting zoom in-->\n<li id=\"video-slide\">\n\n  <video muted playsinline style=\"width:100%; height:auto;\">\n    <source src=\"https:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/08\/Zooming_In_On_Cottage_Porch.mp4\" type=\"video\/mp4\">\n    Your browser does not support the video tag.\n  <\/video>\n  \n  <div class=\"slide-overlay\"><\/div>\n  <div class=\"headline-text\">Now across the street <\/div>\n  <div class=\"subtext\"><\/div>\n<\/li>\n        \n        <!-- SLIDE 5: Summer Cottage Color -->\n        <li>\n          <img decoding=\"async\" src=\"http:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/02\/cottagepic.jpg\" class=\"rev-slidebg\">\n          <div class=\"slide-overlay\"><\/div>\n          <div class=\"headline-text\">Restored to 1861<\/div>\n          <div class=\"subtext\">Furnished with period artifacts including some from the Bulman family and other 19th century pieces<\/div>\n        <\/li>\n        \n        <!-- SLIDE 6: Docents Color -->\n        <li>\n          <img decoding=\"async\" src=\"https:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/03\/resized2.jpg\" class=\"rev-slidebg\">\n          <div class=\"slide-overlay\"><\/div>\n          <div class=\"headline-text\">Meet Our Costumed Docents<\/div>\n          <div class=\"subtext\">Experience daily life as it was for Toronto&#8217;s early tollkeeping families<\/div>\n        <\/li>\n        \n        <!-- SLIDE 7: Autumn Cottage Color -->\n        <li>\n          <img decoding=\"async\" src=\"http:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/02\/cottageinfall.jpg\" class=\"rev-slidebg\">\n          <div class=\"slide-overlay\"><\/div>\n          <div class=\"headline-text\">A Living History Site<\/div>\n          <div class=\"subtext\">One of Toronto&#8217;s few surviving examples of early municipal architecture<\/div>\n        <\/li>\n        \n        <!-- SLIDE 8: Return to 1875 -->\n        <li>\n          <img decoding=\"async\" src=\"http:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/02\/The-Howland-Plain-by-Art-Cox-1875-scaled.jpg\" class=\"rev-slidebg\">\n          <div class=\"slide-overlay\"><\/div>\n          <div class=\"headline-text\">Visit the Tollkeeper&#8217;s Cottage<\/div>\n          <div class=\"subtext\">Open February-December<br>Saturdays 12-5pm &#038; first Sunday each month 1-4pm<\/div>\n        <\/li>\n      <\/ul>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n\/* CRITICAL SLIDER STYLES *\/\n#rev_slider_2_1 {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n#rev_slider_2_1 li {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n  opacity: 0;\n  transition: opacity 1.2s ease;\n  z-index: 1;\n}\n\n#rev_slider_2_1 li.active {\n  opacity: 1;\n  z-index: 2;\n}\n\n\/* Black and white effect *\/\n#rev_slider_2_1 li[data-bw=\"true\"] .rev-slidebg {\n  filter: grayscale(100%) contrast(110%) !important;\n}\n\n\/* Text positioning - responsive *\/\n.headline-text {\n  font-family: Montserrat, sans-serif;\n  font-weight: 700;\n  font-size: 48px;\n  color: #fddc0a;\n  line-height: 1.2;\n  position: absolute;\n  left: 97px;\n  top: 312px;\n  width: 571px;\n  z-index: 3;\n  white-space: normal;\n}\n\n.subtext {\n  font-family: 'Libre Baskerville', serif;\n  font-size: 24px;\n  color: #fff;\n  line-height: 1.4;\n  position: absolute;\n  left: 95px;\n  top: 520px;\n  width: 571px;\n  z-index: 3;\n}\n\n@media (max-width: 768px) {\n  .headline-text {\n    font-size: 32px;\n    left: 20px;\n    width: calc(100% - 40px);\n    top: 25vh !important;\n  }\n  .subtext {\n    font-size: 18px;\n    left: 20px;\n    width: calc(100% - 40px);\n    top: calc(25vh + 80px) !important;\n  }\n}\n<\/style>\n\n\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n  \n  \/\/ --- Part 1: Slider Logic ---\n  \n  const sliderContainer = document.getElementById('rev_slider_2_1');\n\n  \/\/ Only run the slider code if the slider element actually exists on the page\n  if (sliderContainer) {\n    const slides = sliderContainer.querySelectorAll('li');\n    const videoSlideId = 'video-slide'; \/\/ The ID you added to your video <li>\n    const videoPlaybackDuration = 7;   \/\/ How many seconds of video to play\n    \n    let currentSlide = 0;\n    const totalSlides = slides.length;\n    let slideTimeout;\n    \n    const videoSlide = document.getElementById(videoSlideId);\n    const video = videoSlide ? videoSlide.querySelector('video') : null;\n\n    \/\/ Initialization\n    slides.forEach((slide, index) => {\n      slide.style.transition = 'opacity 1.2s ease';\n      if (index !== 0) {\n        slide.style.opacity = '0';\n      } else {\n        slide.style.opacity = '1'; \/\/ Make sure the first slide is visible\n        slide.classList.add('active');\n      }\n    });\n\n    function advanceToNextSlide() {\n      clearTimeout(slideTimeout);\n      if (slides.length > 1) { \/\/ Only cycle if there's more than one slide\n        cycleSlides();\n      }\n    }\n\n    function cycleSlides() {\n      slides[currentSlide].style.opacity = '0';\n      slides[currentSlide].classList.remove('active');\n      \n      currentSlide = (currentSlide + 1) % totalSlides;\n      const nextSlide = slides[currentSlide];\n      \n      nextSlide.style.opacity = '1';\n      nextSlide.classList.add('active');\n      \n      if (video && nextSlide.id === videoSlideId) {\n        video.currentTime = 0;\n        video.play().catch(error => {\n          console.error(\"Video autoplay was prevented:\", error);\n          slideTimeout = setTimeout(advanceToNextSlide, 6000);\n        });\n      } else {\n        const delay = currentSlide === totalSlides - 1 ? 8000 : 6000;\n        slideTimeout = setTimeout(advanceToNextSlide, delay);\n      }\n    }\n    \n    \/\/ Event Listeners for the Slider\n    if (video) {\n      video.addEventListener('timeupdate', function() {\n        if (this.currentTime >= videoPlaybackDuration) {\n          this.pause(); \n          this.currentTime = 0;\n          advanceToNextSlide();\n        }\n      });\n    }\n    \n    sliderContainer.addEventListener('mouseenter', () => {\n      clearTimeout(slideTimeout);\n      if (video && slides[currentSlide].id === videoSlideId) {\n        video.pause();\n      }\n    });\n    \n    sliderContainer.addEventListener('mouseleave', () => {\n      if (video && slides[currentSlide].id === videoSlideId) {\n        video.play();\n      } else {\n        slideTimeout = setTimeout(advanceToNextSlide, 2000);\n      }\n    });\n\n    \/\/ Start the slideshow\n    if (slides.length > 1) {\n      slideTimeout = setTimeout(advanceToNextSlide, 6000);\n    }\n  } \/\/ End of slider logic block\n  \n\n  \/\/ --- Part 2: Header and Admin Bar Logic ---\n  \n  const header = document.querySelector('.ast-primary-header-bar');\n  if (header && document.body.classList.contains('transparent-header')) {\n    header.style.backgroundColor = 'rgba(255,255,255,0.5)';\n    header.style.backdropFilter = 'blur(5px)';\n    \n    window.addEventListener('scroll', function() {\n      if (window.scrollY > 20) {\n        header.classList.add('ast-site-header-shrink');\n        header.style.backgroundColor = 'rgba(255,255,255,0.9)';\n        header.style.paddingTop = '5px';\n        header.style.paddingBottom = '5px';\n      } else {\n        header.classList.remove('ast-site-header-shrink');\n        header.style.backgroundColor = 'rgba(255,255,255,0.5)';\n        header.style.paddingTop = '15px';\n        header.style.paddingBottom = '15px';\n      }\n    });\n    \n    const menuLinks = document.querySelectorAll('.main-header-menu > .menu-item > .menu-link, .site-title a');\n    menuLinks.forEach(link => {\n      link.style.color = '#000';\n    });\n  }\n  \n  if (document.body.classList.contains('admin-bar')) {\n    const adminBar = document.getElementById('wpadminbar');\n    if (adminBar) {\n      const adminBarHeight = adminBar.offsetHeight;\n      document.querySelector('.ast-primary-header-bar').style.top = adminBarHeight + 'px';\n      const sliderWrapper = document.querySelector('#rev_slider_2_1_wrapper');\n      if (sliderWrapper) {\n        sliderWrapper.style.marginTop = '-' + adminBarHeight + 'px';\n      }\n    }\n  }\n\n}); \/\/ End of the single DOMContentLoaded listener\n<\/script>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-a66a833c alignfull uagb-is-root-container\"><div class=\"uagb-container-inner-blocks-wrap\">\n<div class=\"wp-block-uagb-container uagb-block-81088b39\">\n<div class=\"wp-block-uagb-advanced-heading uagb-block-6be2a175\"><h2 class=\"uagb-heading-text\">Tollkeepers Cottage Museum<\/h2><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-uagb-container uagb-block-6fb6c16e\">\n<h4 class=\"wp-block-heading\"><strong>Open Saturdays 12-4pm winter, 12-5pm summer; 1st Sun each month 1 &#8211; 4pm<\/strong><\/h4>\n<\/div>\n<\/div><\/div>\n\n\n<style>.gvb-site-section table, .gvb-site-section tr, .gvb-site-section td{border:none !important;}<\/style><div class=\"gvb-site-section\"><p><\/p><p><\/p><div style=\"text-align: center\"><span style=\"color: #0000cd\"><span style=\"font-size: 18px\"><strong><\/strong><\/span><\/span><\/div><div><span style=\"color: #222222;font-family: Arial, Helvetica, sans-serif;font-size: small;font-style: normal;font-weight: 400;letter-spacing: normal;text-align: start;text-indent: 0px;text-transform: none;white-space: normal;background-color: #ffffff;display: inline !important;float: none\">We regret that next Thursday's pub night with history trivia quiz will have to be postponed, probably until the fall.\u00a0 Our quizmaster has a family health emergency, much to the disappointment of all concerned.\u00a0 She has really been looking forward to stumping your with the questions she has been amassing, while you enjoyed near-beer and pretzels!\u00a0 We'll let you know as soon as we are able to revive this fun event.<\/span><br style=\"color: #222222;font-family: Arial, Helvetica, sans-serif;font-size: small;font-style: normal;font-weight: 400;letter-spacing: normal;text-align: start;text-indent: 0px;text-transform: none;white-space: normal;background-color: #ffffff\" \/><span style=\"color: #222222;font-family: Arial, Helvetica, sans-serif;font-size: small;font-style: normal;font-weight: 400;letter-spacing: normal;text-align: start;text-indent: 0px;text-transform: none;white-space: normal;background-color: #ffffff;display: inline !important;float: none\">Meantime, learn as much history as you can to be ready for the challenge!<\/span><\/div><div><\/div><div style=\"text-align: left\"><\/div><div style=\"text-align: left\">\u00a0<\/div><div style=\"text-align: center\">JUNE 21 SUMMER SOLSTICE<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Toronto&#8217;s Tollkeeper&#8217;s Cottage Cottage in its location on Davenport Road and Bathurst in 1875 A Humble Home Built in the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":986,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"","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":"disabled","footer-sml-layout":"","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":""}},"ngg_post_thumbnail":0,"footnotes":""},"tags":[22],"class_list":["post-2065","page","type-page","status-publish","has-post-thumbnail","hentry","tag-front"],"uagb_featured_image_src":{"full":["https:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/03\/resized2.jpg",800,1043,false],"thumbnail":["https:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/03\/resized2-150x150.jpg",150,150,true],"medium":["https:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/03\/resized2-230x300.jpg",230,300,true],"medium_large":["https:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/03\/resized2-768x1001.jpg",768,1001,true],"large":["https:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/03\/resized2-785x1024.jpg",785,1024,true],"1536x1536":["https:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/03\/resized2.jpg",800,1043,false],"2048x2048":["https:\/\/dev.tollkeeperscottage.ca\/wp-content\/uploads\/2025\/03\/resized2.jpg",800,1043,false]},"uagb_author_info":{"display_name":"george","author_link":"https:\/\/dev.tollkeeperscottage.ca\/index.php\/author\/admindev\/"},"uagb_comment_info":0,"uagb_excerpt":"Toronto&#8217;s Tollkeeper&#8217;s Cottage Cottage in its location on Davenport Road and Bathurst in 1875 A Humble Home Built in the [&hellip;]","_links":{"self":[{"href":"https:\/\/dev.tollkeeperscottage.ca\/index.php\/wp-json\/wp\/v2\/pages\/2065","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.tollkeeperscottage.ca\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.tollkeeperscottage.ca\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.tollkeeperscottage.ca\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.tollkeeperscottage.ca\/index.php\/wp-json\/wp\/v2\/comments?post=2065"}],"version-history":[{"count":32,"href":"https:\/\/dev.tollkeeperscottage.ca\/index.php\/wp-json\/wp\/v2\/pages\/2065\/revisions"}],"predecessor-version":[{"id":2951,"href":"https:\/\/dev.tollkeeperscottage.ca\/index.php\/wp-json\/wp\/v2\/pages\/2065\/revisions\/2951"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.tollkeeperscottage.ca\/index.php\/wp-json\/wp\/v2\/media\/986"}],"wp:attachment":[{"href":"https:\/\/dev.tollkeeperscottage.ca\/index.php\/wp-json\/wp\/v2\/media?parent=2065"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.tollkeeperscottage.ca\/index.php\/wp-json\/wp\/v2\/tags?post=2065"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}