/* ============================================================= * ES HT-Style Article Template * Mimics HumbleTrail Fox-theme article layout on EmojiSprout * Scoped to — applied only on opt-in posts. * ============================================================= */ body.es-ht-style { --ht-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --ht-text: #1a1a1a; --ht-text-muted: #4a4a4a; --ht-accent: #c3403c; --ht-border: #e7e7e7; --ht-bg: #ffffff; --ht-max-content: 680px; --ht-radius: 4px; } /* ---- Force the article + its container into a centered, full-width layout */ body.es-ht-style #main, body.es-ht-style #main.site-main, body.es-ht-style .site-main, body.es-ht-style .site-content, body.es-ht-style .content-area, body.es-ht-style .grow-content-main { max-width: 100% !important; width: 100% !important; margin: 0 auto !important; padding-left: 0 !important; padding-right: 0 !important; float: none !important; } body.es-ht-style #main, body.es-ht-style #main.site-main, body.es-ht-style .site-main { padding-top: 24px !important; } body.es-ht-style #main > .row, body.es-ht-style .site-main > .row, body.es-ht-style #main .row { display: block !important; margin: 0 !important; padding: 0 !important; max-width: 100% !important; width: 100% !important; } body.es-ht-style article.post, body.es-ht-style article#post-128048, body.es-ht-style article#post-128049, body.es-ht-style article#post-128050, body.es-ht-style article#post-128051, body.es-ht-style article#post-128052, body.es-ht-style article.mv-content-wrapper { max-width: 100% !important; width: 100% !important; margin: 0 auto !important; padding: 0 !important; float: none !important; } /* Hide Asona's auto-appended related-posts cards after the article */ body.es-ht-style article.post ~ article.post, body.es-ht-style aside.sidebar, body.es-ht-style .site-content > aside { display: none !important; } /* ---- Reset Asona's article header so we can replace it cleanly ---- */ body.es-ht-style .article > .entry-header, body.es-ht-style article.article > header.entry-header, body.es-ht-style .entry-header, body.es-ht-style header.entry-header, body.es-ht-style.single-post .entry-header, body.es-ht-style .single-post .entry-header, body.es-ht-style .article .entry-header-container, body.es-ht-style .entry-thumbnail, body.es-ht-style figure.entry-thumbnail { display: none !important; } /* ---- Shrink Asona's sticky / site header on these posts ---- * * Reclaims vertical real-estate for the article. We compress the header * height and tighten the padding without removing it (logo + nav still * available if the visitor needs them). */ body.es-ht-style .site-header, body.es-ht-style header.site-header, body.es-ht-style #masthead, body.es-ht-style .header-wrap, body.es-ht-style .header-main, body.es-ht-style .navigation-wrap, body.es-ht-style .site-branding, body.es-ht-style .header-sticky { min-height: 48px !important; padding-top: 4px !important; padding-bottom: 4px !important; } body.es-ht-style .site-header .container, body.es-ht-style #masthead .container, body.es-ht-style .header-main .container { padding-top: 4px !important; padding-bottom: 4px !important; min-height: 48px !important; } body.es-ht-style .site-branding img, body.es-ht-style .site-logo img, body.es-ht-style #masthead img.custom-logo { max-height: 36px !important; width: auto !important; height: auto !important; } body.es-ht-style .site-title, body.es-ht-style .site-description { font-size: 16px !important; line-height: 1.2 !important; margin: 0 !important; } @media (max-width: 640px) { body.es-ht-style .site-header, body.es-ht-style header.site-header, body.es-ht-style #masthead, body.es-ht-style .header-wrap, body.es-ht-style .header-main, body.es-ht-style .header-sticky { min-height: 44px !important; padding-top: 2px !important; padding-bottom: 2px !important; } body.es-ht-style .site-branding img, body.es-ht-style .site-logo img, body.es-ht-style #masthead img.custom-logo { max-height: 28px !important; } } /* ---- Page typography baseline ---- */ body.es-ht-style { font-family: var(--ht-font); color: var(--ht-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.es-ht-style article { background: var(--ht-bg); } /* ---- The HT-style header block that we inject via PHP ---- */ .es-ht-style__header { max-width: var(--ht-max-content); margin: 0 auto; padding: 4px 16px 2px; font-family: var(--ht-font); } .es-ht-style__eyebrow { display: inline-block; font-family: var(--ht-font); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ht-accent); text-decoration: none; margin: 0 0 14px; } .es-ht-style__eyebrow:hover { text-decoration: underline; } .es-ht-style__title { font-family: var(--ht-font); font-weight: 900; font-size: clamp(34px, 5vw, 52px); line-height: 1.08; letter-spacing: -0.02em; color: var(--ht-text); margin: 0 0 28px; } .es-ht-style__byline { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; } .es-ht-style__byline-avatar img, .es-ht-style__avatar { width: 42px !important; height: 42px !important; border-radius: 50%; object-fit: cover; display: block; } .es-ht-style__byline-meta { font-size: 14px; line-height: 1.5; color: var(--ht-text-muted); } .es-ht-style__byline-pub strong, .es-ht-style__byline-author strong { color: var(--ht-text); font-weight: 700; } .es-ht-style__byline-author { margin-top: 1px; } .es-ht-style__hero-image { margin: 22px 0 2px; width: 100%; } .es-ht-style__hero-image img, .es-ht-style__hero-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; } .es-ht-style__hero-image figcaption { margin-top: 8px; font-size: 12px; line-height: 1.4; color: var(--ht-text-muted); text-align: center; font-style: italic; } /* ---- Article body container ---- */ body.es-ht-style .entry-content, body.es-ht-style .article .entry-content, body.es-ht-style article .entry-content { max-width: var(--ht-max-content); margin: 0 auto !important; padding: 0 12px 20px; font-family: var(--ht-font); font-size: 17px; line-height: 1.55; color: var(--ht-text); float: none !important; width: auto !important; } /* Resort-item sections should not add their own padding — let the entry-content's * padding define the gutter so edge-to-edge images stay truly edge-to-edge. */ body.es-ht-style .entry-content .wp-block-group.resort-item, body.es-ht-style .entry-content section.resort-item { padding-left: 0 !important; padding-right: 0 !important; } /* ---- Asona theme bias fix ---- * * Asona applies `padding-left/right: 24px; max-width: var(--es-content-w) (92vw)` * to every direct child of .entry-content. On viewports wider than our 680px * column the +48px padding makes the child wider than its parent, which kills * `margin: auto` centering and anchors content to the LEFT edge. Strip it. */ body.es-ht-style .entry-content > *:not(.alignfull):not(.alignwide) { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } body.es-ht-style .entry-content .alignwide { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin-left: auto !important; margin-right: auto !important; } /* Keep alignfull edge-to-edge but contained within our 680px column. */ body.es-ht-style .entry-content .alignfull { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } body.es-ht-style .entry-content p { margin: 0 0 16px; font-family: var(--ht-font); } body.es-ht-style .entry-content p strong { color: var(--ht-text); font-weight: 700; } body.es-ht-style .entry-content a { color: var(--ht-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* ---- Section headings (### items in articles) ---- */ body.es-ht-style .entry-content h2, body.es-ht-style .entry-content h3, body.es-ht-style .entry-content .wp-block-heading { font-family: var(--ht-font); font-weight: 800; color: var(--ht-text); letter-spacing: -0.015em; line-height: 1.2; margin: 44px 0 18px; } body.es-ht-style .entry-content h2, body.es-ht-style .entry-content h2.wp-block-heading { font-size: clamp(26px, 3.4vw, 32px); } body.es-ht-style .entry-content h3, body.es-ht-style .entry-content h3.wp-block-heading { font-size: clamp(22px, 2.8vw, 28px); } body.es-ht-style .entry-content h4, body.es-ht-style .entry-content h4.wp-block-heading { font-size: 20px; font-weight: 700; margin: 28px 0 12px; } /* ---- Images / figures ---- */ /* Desktop: edge-to-edge images within the content column (no extra horizontal margin). * Mobile rules below override this with truly viewport-edge bleeding. */ body.es-ht-style .entry-content .wp-block-image, body.es-ht-style .entry-content figure.wp-block-image { margin: 18px -12px 22px; text-align: center; display: block; max-width: none; width: calc(100% + 24px); } body.es-ht-style .entry-content .wp-block-image img, body.es-ht-style .entry-content figure.wp-block-image img { width: 100%; max-width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; display: block; margin: 0 auto; } body.es-ht-style .entry-content figcaption, body.es-ht-style .entry-content figure.wp-block-image figcaption { margin-top: 10px; font-size: 13px; color: var(--ht-text-muted); text-align: center; font-style: italic; } /* ---- Resort-item / group blocks (compat with ht-affiliate-choice-cards) ---- */ body.es-ht-style .entry-content .wp-block-group.resort-item, body.es-ht-style .entry-content section.resort-item { position: relative; margin: 0 0 28px; } /* ---- Quotes ---- */ body.es-ht-style .entry-content blockquote, body.es-ht-style .entry-content .wp-block-quote { border-left: 3px solid var(--ht-accent); padding: 6px 0 6px 20px; margin: 28px 0; font-style: italic; color: var(--ht-text); } /* ---- Separators ---- */ body.es-ht-style .entry-content hr, body.es-ht-style .entry-content .wp-block-separator { border: 0; border-top: 1px solid var(--ht-border); margin: 36px auto; max-width: 120px; opacity: 1; } /* ---- Strip Asona theme cruft we don't want on these posts ---- */ body.es-ht-style .related-posts, body.es-ht-style .related.section, body.es-ht-style .single-navigation, body.es-ht-style .navigation.single-navigation, body.es-ht-style #main nav.navigation.single-navigation.row, body.es-ht-style #main .related.section, body.es-ht-style .post-tags, body.es-ht-style .author-box, body.es-ht-style .entry-footer { display: none !important; } /* Keep MV ads and ht-thread comments rendering — these are intentional. */ /* ---- Smart related-article grid ---- */ body.es-ht-style section.es-ht-related { width: min(1170px, calc(100vw - 56px)) !important; max-width: min(1170px, calc(100vw - 56px)) !important; margin: 54px auto 18px !important; padding: 0 !important; transform: none; box-sizing: border-box !important; font-family: var(--ht-font); } .es-ht-related__header { display: grid; grid-template-columns: auto minmax(80px, 1fr); align-items: center; gap: 22px; margin: 0 0 22px; } .es-ht-related__header::after { content: ""; height: 2px; background: #111; } .es-ht-related__header h2 { margin: 0 !important; font-size: 24px !important; line-height: 1 !important; font-weight: 900 !important; letter-spacing: 0 !important; text-transform: uppercase; color: #111; } .es-ht-related__header p { grid-column: 1 / -1; max-width: 620px !important; margin: -8px 0 0 !important; padding: 0 !important; color: var(--ht-text-muted); font-size: 14px !important; line-height: 1.45 !important; } .es-ht-related__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 34px 28px; align-items: start; } .es-ht-related__card { min-width: 0; } .es-ht-related__image-link { display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #f1f1f1; margin: 0 0 14px; } .es-ht-related__image { display: block; width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0 !important; transition: transform 180ms ease; } .es-ht-related__image-link:hover .es-ht-related__image, .es-ht-related__image-link:focus .es-ht-related__image { transform: scale(1.03); } .es-ht-related__cat { margin: 0 0 8px; font-size: 11px; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; color: #756b5d; font-weight: 900; } .es-ht-related__title { margin: 0 !important; padding: 0 !important; font-size: 20px !important; line-height: 1.1 !important; font-weight: 800 !important; letter-spacing: 0 !important; color: #111; } .es-ht-related__title a { color: inherit !important; text-decoration: none !important; } .es-ht-related__title a:hover, .es-ht-related__title a:focus { text-decoration: underline !important; } @media (max-width: 980px) { body.es-ht-style section.es-ht-related { width: calc(100vw - 34px) !important; max-width: calc(100vw - 34px) !important; margin-top: 42px !important; } .es-ht-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; } .es-ht-related__title { font-size: 18px !important; } } /* ---- Mobile tuning ---- */ @media (max-width: 640px) { body.es-ht-style #main, body.es-ht-style #main.site-main, body.es-ht-style .site-main { padding-top: 22px !important; } .es-ht-style__header { padding: 2px 10px 1px; } .es-ht-style__title { font-size: 26px; line-height: 1.1; } .es-ht-style__byline { margin: 0 0 4px; } .es-ht-style__hero-image { margin: 18px -10px 2px; width: calc(100% + 20px); } body.es-ht-style .entry-content { padding: 0 10px 16px; font-size: 16px; line-height: 1.5; } body.es-ht-style .entry-content p { margin: 0 0 12px; } /* Edge-to-edge images on mobile: escape the entry-content's 10px padding, * remove rounding so they truly hit the viewport edge. */ body.es-ht-style .entry-content .wp-block-image, body.es-ht-style .entry-content figure.wp-block-image, body.es-ht-style .entry-content .resort-item .wp-block-image, body.es-ht-style .entry-content section.resort-item figure.wp-block-image { margin-left: -10px !important; margin-right: -10px !important; margin-top: 14px !important; margin-bottom: 18px !important; max-width: none !important; width: calc(100% + 20px) !important; border-radius: 0 !important; } body.es-ht-style .entry-content .wp-block-image img, body.es-ht-style .entry-content figure.wp-block-image img { max-width: 100% !important; width: 100% !important; border-radius: 0 !important; } body.es-ht-style .entry-content h2, body.es-ht-style .entry-content h2.wp-block-heading { font-size: 24px; margin: 36px 0 14px; } body.es-ht-style .entry-content h3, body.es-ht-style .entry-content h3.wp-block-heading { font-size: 22px; } body.es-ht-style .entry-content h2, body.es-ht-style .entry-content h2.wp-block-heading { font-size: 22px; margin: 24px 0 10px; } body.es-ht-style .entry-content h3, body.es-ht-style .entry-content h3.wp-block-heading { font-size: 20px; margin: 22px 0 10px; } body.es-ht-style .entry-content .wp-block-image img, body.es-ht-style .entry-content figure.wp-block-image img { border-radius: 0; } body.es-ht-style section.es-ht-related { width: calc(100vw - 20px) !important; max-width: calc(100vw - 20px) !important; margin-top: 36px !important; } .es-ht-related__header { grid-template-columns: 1fr; gap: 12px; margin-bottom: 18px; } .es-ht-related__header::after { width: 90px; } .es-ht-related__header h2 { font-size: 19px !important; } .es-ht-related__grid { grid-template-columns: 1fr; gap: 24px; } } /* ---- Force light theme regardless of OS dark-mode preference ---- * * Ad-arb pages must render consistently for every visitor; the original * HT light/dark toggle was a manual user action, not OS-driven. */ body.es-ht-style, body.es-ht-style article, body.es-ht-style .entry-content, body.es-ht-style .article { background: var(--ht-bg) !important; color: var(--ht-text) !important; color-scheme: light; } body.es-ht-style html, html:has(body.es-ht-style) { background: var(--ht-bg) !important; color-scheme: light; } /* ---- Clickable byline trigger (defeats Asona's