Files
hoponhopofftickets/astra-child-hoponhopoff/assets/pages-wp.css
Amir Bagheri 023b998694 fix(theme): blog posts no longer fade out; readable post layout
- Scroll reveal used threshold 0.15: a section taller than ~6.7 screens (a
  long article) never reached it, so after the reveal class hid it, it
  stayed hidden. Reveal as soon as any part enters (threshold 0).
- Post header: full-width title with meta below and a normal gap
- Article: heading sizes per level, photos keep their shape (no crop),
  icon-sized inline SVGs, full-width embeds
- Strip the imported 'Home' breadcrumb line from posts and card excerpts
- Theme 1.0.15

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-29 21:20:34 +03:30

85 lines
6.5 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/* Astra overrides for the theme's design pages — ported from VC_Display::astra_overrides() (scope .hoho-page, body class .hoho-fullwidth). */
.hoho-fullwidth .site-main>article,.hoho-fullwidth .ast-page-builder-template .site-main>article,.hoho-fullwidth.ast-page-builder-template .site-main>article{padding:0!important;margin:0!important;border:0!important;max-width:none!important;}
.hoho-fullwidth #primary,.hoho-fullwidth #content{margin:0!important;padding:0!important;}
.hoho-fullwidth .site-content .ast-container,.hoho-fullwidth .ast-container{max-width:none!important;padding-left:0!important;padding-right:0!important;display:block!important;}
.hoho-fullwidth .entry-content{margin-block:0!important;}
.hoho-fullwidth .site-content{padding:0!important;}
body.hoho-fullwidth{overflow-x:hidden;}
.hoho-page.hoho-page .hero__media,.hoho-page.hoho-page .hero-tour{background:linear-gradient(120deg,#101317,#2cafc2);}
.hoho-page.hoho-page a{text-decoration:none;box-shadow:none;}
.hoho-page.hoho-page :is(ul,ol){list-style:none!important;margin:0;padding:0;}
.hoho-page.hoho-page li{margin:0;}
.hoho-page.hoho-page .tour__text a{text-decoration:underline;}
.hoho-page.hoho-page .tour__text ul{list-style:disc!important;margin:1em 0!important;padding-inline-start:1.5em!important;}
.hoho-page.hoho-page .tour__text ol{list-style:decimal!important;margin:1em 0!important;padding-inline-start:1.5em!important;}
.hoho-page.hoho-page .tour__text li{margin:.25em 0!important;}
.hoho-page.hoho-page a:not(.btn):not(.ring-badge){color:inherit;}
.hoho-page.hoho-page .tour__text a{color:var(--c-teal);}
.hoho-page.hoho-page .dcard__title{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hoho-page.hoho-page .titem__desc{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.hoho-page.hoho-page .dcard__desc p{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.hoho-page.hoho-page .dcard__meta .meta__v{white-space:nowrap;}
.hoho-page.hoho-page>*{max-width:none!important;margin-inline:0!important;}
.hoho-page.hoho-page>.hero,.hoho-page.hoho-page>.hero-tour{margin:var(--page-inset)!important;}
.hoho-page.hoho-page{overflow-x:clip;overflow-y:visible;}
.hoho-fullwidth .site-main,.hoho-fullwidth #primary,.hoho-fullwidth #content,.hoho-fullwidth .site-content,.hoho-fullwidth .ast-container,.hoho-fullwidth .entry-content,.hoho-fullwidth .site-main>article{overflow:visible!important;}
.hoho-page.hoho-page .acc__q{box-shadow:none!important;}
.hoho-page.hoho-page :is(h1,h2,h3,h4,h5,h6){color:inherit;}
.hoho-page.hoho-page,.hoho-page.hoho-page h1,.hoho-page.hoho-page h2,.hoho-page.hoho-page h3,.hoho-page.hoho-page h4,.hoho-page.hoho-page h5,.hoho-page.hoho-page h6,.hoho-page.hoho-page p,.hoho-page.hoho-page a,.hoho-page.hoho-page span,.hoho-page.hoho-page li,.hoho-page.hoho-page button,.hoho-page.hoho-page input,.hoho-page.hoho-page select,.hoho-page.hoho-page textarea,.hoho-page.hoho-page blockquote{font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;}
/* WordPress content inside the design. */
/* Spam-trap field on the contact form: off-screen, never seen by people. */
.hoho-page.hoho-page .hoho-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;}
/* Post body from the editor, styled like the design's .tour__block text. */
.hoho-page.hoho-page .hoho-prose{display:flex;flex-direction:column;gap:var(--sp-3);}
.hoho-page.hoho-page .hoho-prose>*{margin:0;}
.hoho-page.hoho-page .hoho-prose :is(p,li){font-size:1rem;font-weight:500;line-height:1.6;opacity:.7;}
.hoho-page.hoho-page .hoho-prose a{color:var(--c-teal);text-decoration:underline;}
.hoho-page.hoho-page .hoho-prose ul{list-style:disc!important;padding-inline-start:1.5em;}
.hoho-page.hoho-page .hoho-prose ol{list-style:decimal!important;padding-inline-start:1.5em;}
.hoho-page.hoho-page .hoho-prose figure{margin:0;}
.hoho-page.hoho-page .hoho-prose blockquote{margin:0;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-card);background:var(--c-teal-05);}
/* Review replies need their indent back after the list reset. */
.hoho-page.hoho-page .rcard__text p{margin:0;}
/* Server-rendered pager uses links where the mockup used buttons. */
.hoho-page.hoho-page a.pager__btn,.hoho-page.hoho-page a.pager__num{text-decoration:none;}
/* Contact: centre the two cards (the design pushed them right) and let them
overlap the hero a little less. */
.hoho-page.hoho-page .contactpage{margin-block-start:calc(var(--sp-6) * -2);}
.hoho-page.hoho-page .contactpage__grid{margin-inline:auto;}
@media (max-width: 68.75rem){
.hoho-page.hoho-page .contactpage{margin-block-start:calc(var(--sp-6) * -1.5);}
}
/* Form fields stay flat as in the design (Astra adds a shadow/border). */
.hoho-page.hoho-page .rinput{box-shadow:none!important;border:0!important;}
/* A page's own Featured Image banner is shown as-is: no brand-teal tint. */
.hoho-page.hoho-page .hero--has-thumb .hero__media::after{display:none;}
/* Blog post header: real titles are long — use the full width (the design's
28rem cap wrapped them to four lines) with the meta underneath, and a
normal gap before the article instead of the design's ~100px. */
.hoho-page.hoho-page .post__head{flex-direction:column;align-items:flex-start;gap:var(--sp-2);margin-block-end:0;}
.hoho-page.hoho-page .post__title{max-width:none;}
.hoho-page.hoho-page .post__head + .post__body{margin-block-start:calc(var(--sp-5) - clamp(3rem, 2rem + 3vw, 6.25rem));}
/* Article headings by level (imported posts use h2–h6). */
.hoho-page.hoho-page .hoho-prose h2{margin:var(--sp-4) 0 0;font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem);font-weight:700;line-height:1.25;}
.hoho-page.hoho-page .hoho-prose h3{margin:var(--sp-3) 0 0;font-size:1.25rem;font-weight:700;line-height:1.3;}
.hoho-page.hoho-page .hoho-prose :is(h4,h5,h6){margin:var(--sp-3) 0 0;font-size:1.0625rem;font-weight:700;line-height:1.35;}
/* Photos keep their own shape (portrait ones were cropped to a strip). */
.hoho-page.hoho-page .hoho-prose img{display:block;width:auto;max-width:100%;height:auto;max-height:36rem;margin-block:var(--sp-2);border-radius:var(--r-card);object-fit:contain;}
/* Unsized inline icons from imported content stay icon-sized. */
.hoho-page.hoho-page .hoho-prose svg{width:1em;height:1em;vertical-align:-.125em;}
/* Embedded maps/videos: full width, sensible height. */
.hoho-page.hoho-page .hoho-prose iframe{display:block;width:100%;height:auto;aspect-ratio:16/9;border:0;border-radius:var(--r-card);}