is bottom-aligned */ @media (min-width:701px){ .buzz-category-intro .buzz-category-intro-copy{ align-items:center!important; } .buzz-category-intro .buzz-category-intro-copy p{ align-self:flex-end!important; } } /* v1.3.27 - shared sub/search page header modules * Search and category pages now share the same toolbar/view-control shell. * Legacy page-specific classes remain in markup for JS/backward compatibility only. */ .buzz-page-hero-area{ margin:0; padding:0; } .buzz-page-toolbar{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:22px!important; height:40px!important; min-height:40px!important; margin:0 0 20px!important; padding:0!important; box-sizing:border-box!important; } .buzz-page-toolbar-copy{ display:flex!important; align-items:center!important; flex:1 1 auto!important; min-width:0!important; height:40px!important; gap:22px!important; position:relative!important; top:8px!important; margin:0!important; } .buzz-page-toolbar-copy h1{ display:flex!important; align-items:center!important; flex:0 0 auto!important; height:40px!important; min-height:40px!important; margin:0!important; padding:0!important; font-size:30px!important; line-height:1!important; font-weight:950!important; font-style:italic!important; letter-spacing:-.055em!important; white-space:nowrap!important; } /* Only the description is bottom-aligned, as requested. */ .buzz-page-toolbar-copy p{ align-self:flex-end!important; flex:1 1 auto!important; min-width:0!important; margin:0!important; padding:0!important; color:var(--muted)!important; font-size:14px!important; line-height:1.35!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .buzz-page-view-switcher{ flex:0 0 auto!important; display:inline-flex!important; align-items:center!important; gap:3px!important; height:40px!important; min-height:40px!important; padding:3px!important; box-sizing:border-box!important; border:1px solid #e5e8ed!important; border-radius:15px!important; background:#f7f8fa!important; box-shadow:0 2px 7px rgba(15,23,42,.025)!important; } .buzz-page-view-button{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; height:32px!important; min-height:32px!important; padding:0 14px!important; border:0!important; border-radius:11px!important; background:transparent!important; color:#687383!important; font-size:13px!important; line-height:1!important; cursor:pointer!important; white-space:nowrap!important; } .buzz-page-view-button span{font-size:16px!important;line-height:1!important} .buzz-page-view-button b{font-size:13px!important;font-weight:850!important} .buzz-page-view-button:hover{color:#111!important;background:#fff!important} .buzz-page-view-button.is-active{ background:var(--bk-pink)!important; color:#fff!important; box-shadow:0 2px 7px rgba(255,20,147,.18)!important; } /* Search category filter uses the same 40px toolbar shell. */ .buzz-page-toolbar .buzz-search-category-control{ align-self:center!important; min-height:40px!important; height:40px!important; padding:3px!important; box-sizing:border-box!important; } .buzz-page-toolbar .buzz-search-category-control a{ min-height:32px!important; height:32px!important; padding:0 14px!important; } /* Category promo remains its own hero content, but spacing is shared predictably. */ .buzz-category-intro.buzz-page-hero-area > .buzz-promo-slider{ margin:14px 0 14px!important; } /* Search hero shares the common hero role while keeping its search artwork. */ .buzz-search-hero.buzz-page-hero{ height:200px!important; min-height:200px!important; box-sizing:border-box!important; } html[data-theme="dark"] .buzz-page-view-switcher, body.dark-mode .buzz-page-view-switcher, html[data-theme="dark"] .buzz-page-toolbar .buzz-search-category-control, body.dark-mode .buzz-page-toolbar .buzz-search-category-control{ background:var(--panel)!important; border-color:var(--line)!important; } html[data-theme="dark"] .buzz-page-view-button, body.dark-mode .buzz-page-view-button{ color:var(--muted)!important; } html[data-theme="dark"] .buzz-page-view-button.is-active, body.dark-mode .buzz-page-view-button.is-active{ color:#fff!important; } @media (max-width:980px) and (min-width:701px){ .buzz-page-toolbar{gap:14px!important;margin-bottom:18px!important} .buzz-page-toolbar-copy{gap:14px!important} .buzz-page-toolbar-copy h1{font-size:26px!important} } @media (max-width:700px){ .buzz-page-toolbar{ height:auto!important; min-height:0!important; gap:10px 12px!important; margin-bottom:16px!important; flex-wrap:wrap!important; } .buzz-page-toolbar-copy{ height:auto!important; min-height:48px!important; flex:1 1 100%!important; top:0!important; gap:12px!important; } .buzz-page-toolbar-copy h1{ height:48px!important; min-height:48px!important; font-size:24px!important; } .buzz-page-toolbar-copy p{ padding-bottom:0!important; } .buzz-page-toolbar .buzz-search-category-control{ width:100%!important; max-width:100%!important; margin-bottom:8px!important; overflow-x:auto!important; flex-wrap:nowrap!important; } .buzz-page-view-switcher{ height:40px!important; min-height:40px!important; margin-left:auto!important; } .buzz-search-controls.buzz-page-toolbar{ display:flex!important; } .buzz-search-hero.buzz-page-hero{ height:auto!important; min-height:118px!important; } } /* v1.3.28 - unify desktop category slider and search hero height */ @media (min-width:701px){ .buzz-category-intro.buzz-page-hero-area > .buzz-promo-slider{ height:200px!important; min-height:200px!important; box-sizing:border-box!important; } .buzz-category-intro.buzz-page-hero-area > .buzz-promo-slider .buzz-promo-slider-track{ height:200px!important; min-height:200px!important; aspect-ratio:auto!important; } .buzz-category-intro.buzz-page-hero-area > .buzz-promo-slider .buzz-promo-slide, .buzz-category-intro.buzz-page-hero-area > .buzz-promo-slider .buzz-promo-slide-link, .buzz-category-intro.buzz-page-hero-area > .buzz-promo-slider picture, .buzz-category-intro.buzz-page-hero-area > .buzz-promo-slider img{ height:100%!important; } } /* v1.3.29 - mobile view controls live inside the drawer */ @media (max-width:700px){ .buzz-category-intro-top .buzz-page-view-switcher, .buzz-search-controls .buzz-page-view-switcher{display:none!important} .buzz-mobile-view-section{ display:block!important; margin:10px 0 0!important; padding:16px 8px 18px!important; border-top:1px solid var(--line)!important; border-bottom:1px solid var(--line)!important; } .buzz-mobile-view-label{ margin:0 0 10px!important; color:var(--muted)!important; font-size:12px!important; font-weight:800!important; letter-spacing:.02em!important; } .buzz-mobile-view-options{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:6px!important; width:100%!important; padding:4px!important; border:1px solid var(--line)!important; border-radius:16px!important; background:var(--panel)!important; box-sizing:border-box!important; } .buzz-mobile-view-button{ display:flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; min-width:0!important; height:38px!important; padding:0 8px!important; border:0!important; border-radius:12px!important; background:transparent!important; color:var(--muted)!important; font:inherit!important; cursor:pointer!important; } .buzz-mobile-view-button span{font-size:17px!important;line-height:1!important} .buzz-mobile-view-button b{font-size:13px!important;font-weight:850!important;white-space:nowrap!important} .buzz-mobile-view-button.is-active{ background:var(--bk-pink)!important; color:#fff!important; box-shadow:0 2px 8px rgba(255,20,147,.18)!important; } } @media (min-width:701px){.buzz-mobile-view-section{display:none!important}} /* v1.3.30 - shared page toolbar sticks directly below the sticky site header */ :root{--buzz-site-header-height:0px} .buzz-category-intro-top.buzz-page-toolbar, .buzz-search-controls.buzz-page-toolbar{ position:sticky!important; top:var(--buzz-site-header-height,0px)!important; z-index:45!important; background:var(--bg)!important; isolation:isolate; } @media(max-width:900px){ .buzz-category-intro-top.buzz-page-toolbar, .buzz-search-controls.buzz-page-toolbar{ z-index:100000!important; } } /* v1.3.31 - keep 40px controls but add visible breathing room around sticky toolbar */ @media (min-width:701px){ .buzz-category-intro-top.buzz-page-toolbar, .buzz-search-controls.buzz-page-toolbar{ height:56px!important; min-height:56px!important; padding:8px 0!important; margin:0 0 20px!important; box-sizing:border-box!important; } } /* v1.3.32 - compact mobile toolbar: prevent title/description overflow on narrow screens */ @media (max-width:480px){ .buzz-category-intro-top.buzz-page-toolbar, .buzz-search-controls.buzz-page-toolbar{ width:100%!important; min-width:0!important; overflow:hidden!important; } .buzz-page-toolbar-copy{ display:grid!important; grid-template-columns:auto minmax(0,1fr)!important; align-items:end!important; width:100%!important; min-width:0!important; min-height:44px!important; height:44px!important; gap:10px!important; overflow:hidden!important; } .buzz-page-toolbar-copy h1{ align-self:end!important; height:auto!important; min-height:0!important; max-width:42vw!important; font-size:22px!important; line-height:1!important; overflow:hidden!important; text-overflow:ellipsis!important; } .buzz-page-toolbar-copy p{ align-self:end!important; min-width:0!important; max-width:100%!important; margin:0!important; padding:0 0 1px!important; font-size:13px!important; line-height:1.25!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } } @media (max-width:360px){ .buzz-page-toolbar-copy{ gap:8px!important; } .buzz-page-toolbar-copy h1{ max-width:38vw!important; font-size:20px!important; } .buzz-page-toolbar-copy p{ font-size:12px!important; } } /* v1.3.33 - neutralize old 8px copy offset after sticky toolbar gained its own vertical padding */ @media (min-width:701px){ .buzz-page-toolbar-copy{ top:0!important; } } /* v1.3.34 - allow category/search toolbar description to use up to two lines on small mobile */ @media (max-width:480px){ .buzz-category-intro-top.buzz-page-toolbar, .buzz-search-controls.buzz-page-toolbar{ min-height:56px!important; } .buzz-page-toolbar-copy{ height:56px!important; min-height:56px!important; align-items:end!important; } .buzz-page-toolbar-copy p{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; white-space:normal!important; overflow:hidden!important; text-overflow:clip!important; line-height:1.25!important; max-height:2.5em!important; padding:0 0 2px!important; } } /* v1.3.35 - keep small-mobile toolbar at 40px and vertically center title + two-line description */ @media (max-width:480px){ .buzz-category-intro-top.buzz-page-toolbar, .buzz-search-controls.buzz-page-toolbar{ height:40px!important; min-height:40px!important; padding-top:0!important; padding-bottom:0!important; overflow:hidden!important; } .buzz-page-toolbar-copy{ grid-template-columns:max-content minmax(0,1fr)!important; align-items:center!important; height:40px!important; min-height:40px!important; gap:10px!important; overflow:hidden!important; } .buzz-page-toolbar-copy h1{ align-self:center!important; max-width:none!important; margin:0!important; padding:0!important; line-height:1!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; } .buzz-page-toolbar-copy p{ align-self:center!important; margin:0!important; padding:0!important; line-height:1.2!important; max-height:2.4em!important; } } @media (max-width:360px){ .buzz-page-toolbar-copy{gap:8px!important} } /* v1.3.36 - keep mobile title/description spacing consistent with desktop */ @media (max-width:480px){ .buzz-page-toolbar-copy{ gap:22px!important; } } @media (max-width:360px){ .buzz-page-toolbar-copy{ gap:22px!important; } } /* v1.3.37 - dark mode header search text/placeholder visibility */ html[data-theme="dark"] .buzz-search .search-field, body.dark-mode .buzz-search .search-field{ color:#16181d!important; caret-color:#16181d!important; } html[data-theme="dark"] .buzz-search .search-field::placeholder, body.dark-mode .buzz-search .search-field::placeholder{ color:#6b7280!important; opacity:1!important; } /* v1.3.39 - match the dark-mode footer separator to the shared top divider */ html[data-theme="dark"] .site-footer.buzz-footer{ border-top:1px solid var(--line)!important; } /* v1.3.42 mobile BUZZ PICK matches the desktop pink button */ @media(max-width:700px){ .mobile-nav .mobile-menu-primary>li.mobile-menu-buzz-pick{ padding:16px 8px!important; border-bottom:0!important; } .mobile-nav .mobile-menu-primary .mobile-buzz-pick-button{ display:inline-flex!important; width:auto!important; min-height:38px!important; align-items:center!important; justify-content:center!important; padding:9px 16px!important; margin:0!important; border-radius:2px!important; background:var(--bk-pink)!important; color:#fff!important; font-size:15px!important; font-weight:900!important; line-height:1!important; text-align:center!important; white-space:nowrap!important; } .mobile-nav .mobile-menu-primary .mobile-buzz-pick-button:hover, .mobile-nav .mobile-menu-primary .mobile-buzz-pick-button:focus-visible{ background:var(--bk-pink)!important; color:#fff!important; } } /* v1.3.43 - align mobile drawer View and Language section gutters */ @media (max-width:700px){ .buzz-mobile-view-section{ margin:10px 20px 0!important; padding:16px 0 18px!important; } .buzz-mobile-language{ margin:8px 20px 22px!important; } } /* v1.3.44 - mobile dark skeleton tone + keep search panel above sticky page toolbar */ @media (max-width:700px){ html[data-theme="dark"] .buzz-category-magazine .buzz-category-skeleton, html[data-theme="dark"] .buzz-search-magazine .buzz-category-skeleton, body.dark-mode .buzz-category-magazine .buzz-category-skeleton, body.dark-mode .buzz-search-magazine .buzz-category-skeleton{ background:var(--bg)!important; border-color:var(--line)!important; box-shadow:none!important; } html[data-theme="dark"] .buzz-category-magazine .buzz-category-skeleton .buzz-category-grid-media, html[data-theme="dark"] .buzz-category-magazine .buzz-category-skeleton .buzz-category-side-media, html[data-theme="dark"] .buzz-category-magazine .buzz-category-skeleton .buzz-category-featured-media, html[data-theme="dark"] .buzz-search-magazine .buzz-category-skeleton .buzz-category-grid-media, html[data-theme="dark"] .buzz-search-magazine .buzz-category-skeleton .buzz-category-side-media, body.dark-mode .buzz-category-magazine .buzz-category-skeleton .buzz-category-grid-media, body.dark-mode .buzz-category-magazine .buzz-category-skeleton .buzz-category-side-media, body.dark-mode .buzz-category-magazine .buzz-category-skeleton .buzz-category-featured-media, body.dark-mode .buzz-search-magazine .buzz-category-skeleton .buzz-category-grid-media, body.dark-mode .buzz-search-magazine .buzz-category-skeleton .buzz-category-side-media{ background:#20262e!important; } .buzz-category-intro-top.buzz-page-toolbar, .buzz-search-controls.buzz-page-toolbar{ z-index:90!important; } .buzz-header .search-panel{ z-index:130!important; } } /* v1.3.45 - mobile: when the lower content area has no real posts, show only one skeleton card */ @media (max-width: 768px){ .buzz-category-latest-grid.buzz-mobile-single-skeleton > .buzz-category-skeleton:not(:first-child), .buzz-search-latest-grid.buzz-mobile-single-skeleton > .buzz-category-skeleton:not(:first-child){ display:none!important; } } /* v1.3.46 - mobile: hide lower-area filler skeleton cards entirely */ @media (max-width: 768px){ .buzz-category-latest-grid > .buzz-category-skeleton, .buzz-search-latest-grid > .buzz-category-skeleton{ display:none!important; } } /* v1.3.47 - Weekly Ranking number badge overlays thumbnail as a flag */ .buzz-ranking-list .rank-copy{min-width:0} .buzz-ranking-list .rank-copy a{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden} /* v1.3.49 - removed Weekly Ranking thumbnail flag badge */ /* v1.3.50 - managed single/detail page banner */ .single .buzz-promo-widget.has-single-banner{overflow:hidden;padding:0;background:transparent}.single .buzz-promo-widget.has-single-banner .buzz-inline-ad{margin:0 0 16px}.buzz-single-banner{width:100%}.buzz-single-banner-link{display:block;width:100%;overflow:hidden;border-radius:18px;background:var(--panel)}.buzz-single-banner-link img{display:block;width:100%;height:auto}.buzz-single-banner-mobile{display:none}@media(max-width:900px){.buzz-single-banner-pc{display:none!important}.buzz-single-banner-mobile{display:block}}@media(min-width:901px){.buzz-single-banner-pc{display:block}.buzz-single-banner-mobile{display:none!important}} /* v1.3.52 - mobile single WEEKLY RANKING layout refinement */ @media(max-width:640px){ .single .buzz-ranking-widget{ padding:18px!important; } .single .buzz-ranking-list{ gap:14px!important; } .single .buzz-ranking-list li{ grid-template-columns:84px minmax(0,1fr)!important; gap:12px!important; align-items:start!important; } .single .rank-thumb{ width:84px!important; min-width:84px!important; border-radius:14px!important; justify-self:start!important; } .single .rank-copy{ min-width:0!important; align-self:center!important; } .single .rank-copy a{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; font-size:15px!important; line-height:1.38!important; max-height:2.76em!important; word-break:keep-all!important; } .single .rank-copy .meta{ margin-top:6px!important; font-size:12px!important; line-height:1.35!important; } } /* v1.3.53 - single sidebar: remove radius/shadow only from the three main outer blocks */ .single .buzz-single-sidebar > .buzz-ranking-widget, .single .buzz-single-sidebar > .buzz-promo-widget, .single .buzz-single-sidebar > .buzz-mini-related-widget{ border-radius:0!important; box-shadow:none!important; } /* v1.3.54 - remove radius from requested single-page containers */ .buzz-single-banner-link, .buzz-tag-box, .buzz-author-card, .buzz-related-section, .buzz-widget, .buzz-article-post-nav{ border-radius:0!important; } /* v1.3.56 - detail banner: one shared image, original aspect ratio on all devices */ .buzz-single-banner-link{display:block!important;width:100%!important;overflow:hidden!important} .buzz-single-banner-link img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important} .buzz-single-banner-pc,.buzz-single-banner-mobile{display:none!important} /* v1.3.57 - compact one-line single top breadcrumb with category flag */ .single .buzz-single-breadcrumbs{ display:flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:8px!important; font-size:12px!important; line-height:1.35!important; overflow:hidden!important; white-space:nowrap!important; } .single .buzz-single-breadcrumbs > *{flex:0 0 auto} .single .buzz-single-breadcrumbs .current{ min-width:0!important; flex:1 1 auto!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } .single .buzz-single-breadcrumbs .buzz-single-top-cat{ display:inline-flex!important; align-items:center!important; height:26px!important; padding:0 10px!important; border-radius:999px!important; font-size:12px!important; line-height:1!important; text-decoration:none!important; } /* v1.3.58 - single breadcrumb shows Home > Category only */ /* v1.3.59 - rounded corners only on lower main-content boxes, never sidebar widgets */ .single .buzz-single-main > .buzz-tag-box, .single .buzz-single-main > .buzz-author-card, .single .buzz-single-main > .buzz-article-post-nav, .single .buzz-single-main > .buzz-related-section, .single .buzz-single-main > .comments-area{ border-radius:22px!important; } /* Keep right sidebar outer widgets square even when a shared class is used elsewhere */ .single .buzz-single-sidebar > .buzz-widget, .single .buzz-single-sidebar > .buzz-hashtag-widget{ border-radius:0!important; } /* v1.3.60 - remove box-shadow from shared single-page boxes/widgets */ .buzz-tag-box, .buzz-author-card, .buzz-related-section, .buzz-widget, .buzz-article-post-nav{ box-shadow:none!important; } /* v1.3.61 - remove stray rounded separator above the comments box */ .single .buzz-single-main > .comments-area{ border-top:0!important; border-radius:0!important; padding-top:0!important; } /* v1.3.62 - keep comments separator line; remove only comments-area radius */ .single .buzz-single-main > .comments-area{ border-top:1px solid var(--line)!important; border-radius:0!important; padding-top:34px!important; } @media(max-width:620px){ .single .buzz-single-main > .comments-area{padding-top:26px!important;} } /* v1.3.63 - hide Key Takeaways when no explicit summary fields are entered */ /* v1.3.64 - single subtitle uses the full available header width */ .single .buzz-single-subtitle{ width:100%!important; max-width:none!important; box-sizing:border-box!important; } /* v1.3.65 - BuzzKorea magazine article authoring system */ .buzz-single-article[class*="buzz-mag-template-"] .buzz-single-content{--mag-pink:var(--buzz-pink);--mag-soft:color-mix(in srgb,var(--buzz-pink) 8%,var(--panel));} .buzz-single-content .buzz-mag-lead{font-size:clamp(18px,1.6vw,22px)!important;line-height:1.75!important;font-weight:600;color:color-mix(in srgb,var(--text) 78%,var(--muted));margin:0 0 42px!important;max-width:760px} .buzz-single-content .buzz-mag-section,.buzz-single-content .buzz-mag-card-section{margin:42px 0!important} .buzz-single-content .buzz-mag-section>.wp-block-columns,.buzz-single-content .buzz-mag-card-section>.wp-block-columns,.buzz-single-content .buzz-mag-journal-row{gap:30px!important;margin:0!important} .buzz-single-content .buzz-mag-section-kicker,.buzz-single-content .buzz-mag-card-no{margin:0 0 8px!important;color:var(--buzz-pink)!important;font-size:30px!important;line-height:1!important;font-weight:900!important;letter-spacing:-.03em} .buzz-single-content .buzz-mag-section h2,.buzz-single-content .buzz-mag-card-section h2{margin:.2em 0 .55em!important} .buzz-single-content .buzz-mag-photo{margin:0!important;overflow:hidden;background:var(--panel);min-height:180px} .buzz-single-content .buzz-mag-photo img{display:block;width:100%;height:auto;border-radius:0!important} .buzz-single-content .buzz-mag-caption{margin:7px 0 0!important;font-size:12px!important;line-height:1.45!important;color:var(--muted);text-align:right} .buzz-single-content .buzz-mag-tip,.buzz-single-content .buzz-mag-note{margin:30px 0!important;padding:20px 22px!important;border:1px solid color-mix(in srgb,var(--buzz-pink) 24%,var(--line));background:var(--mag-soft);} .buzz-single-content .buzz-mag-tip h3,.buzz-single-content .buzz-mag-note h3{margin:0 0 7px!important;color:var(--buzz-pink);font-size:14px!important;letter-spacing:.04em} .buzz-single-content .buzz-mag-tip p,.buzz-single-content .buzz-mag-note p{margin:0!important} .buzz-single-content .buzz-mag-location{margin-top:14px!important;color:var(--muted);font-size:12px!important;font-weight:700} .buzz-single-content .buzz-mag-dual-notes{gap:16px!important;margin:28px 0!important} .buzz-single-content .buzz-mag-dual-notes .buzz-mag-tip,.buzz-single-content .buzz-mag-dual-notes .buzz-mag-note{height:100%;margin:0!important} .buzz-single-content .buzz-mag-quote{margin:24px 0!important;padding:18px 22px!important;border:0!important;border-left:3px solid var(--buzz-pink)!important;background:var(--mag-soft)!important;font-size:18px!important;font-weight:650;color:var(--text)} .buzz-single-content .buzz-mag-quote cite{display:block;margin-top:8px;color:var(--muted);font-size:12px;font-style:normal} /* Preset: Editorial */ .buzz-mag-template-editorial .buzz-single-title{font-size:clamp(38px,4.5vw,62px)!important;max-width:980px!important} .buzz-mag-template-editorial .buzz-single-subtitle{max-width:900px!important;font-size:18px!important} .buzz-mag-template-editorial .buzz-single-hero{border:0!important;box-shadow:none!important;border-radius:0!important} .buzz-mag-template-editorial .buzz-single-hero img{aspect-ratio:16/9!important} .buzz-mag-template-editorial .buzz-summary-box{border-radius:0!important;box-shadow:none!important;background:linear-gradient(90deg,color-mix(in srgb,var(--buzz-pink) 12%,var(--panel)),var(--panel))!important} /* Preset: Modular cards */ .buzz-mag-template-cards .buzz-single-content .buzz-mag-card-section{padding:18px!important;border:1px solid var(--line);background:var(--panel);box-shadow:none} .buzz-mag-template-cards .buzz-single-content .buzz-mag-card-section .buzz-mag-photo{min-height:210px} .buzz-mag-template-cards .buzz-single-content .buzz-mag-card-section .buzz-mag-photo img{height:100%;object-fit:cover} .buzz-mag-template-cards .buzz-summary-box{border-radius:14px!important;box-shadow:none!important} /* Preset: Minimal journal */ .buzz-mag-template-journal .buzz-single-header{text-align:center} .buzz-mag-template-journal .buzz-single-breadcrumbs,.buzz-mag-template-journal .buzz-single-meta-row{justify-content:center} .buzz-mag-template-journal .buzz-single-title{font-family:Georgia,"Times New Roman","Noto Serif KR",serif;font-weight:700!important;letter-spacing:-.045em!important;max-width:980px!important;margin-left:auto!important;margin-right:auto!important} .buzz-mag-template-journal .buzz-single-subtitle{margin-left:auto!important;margin-right:auto!important;max-width:760px!important} .buzz-mag-template-journal .buzz-single-hero{border:0!important;box-shadow:none!important;border-radius:0!important} .buzz-mag-template-journal .buzz-summary-box{border-radius:0!important;box-shadow:none!important;background:color-mix(in srgb,var(--buzz-pink) 7%,var(--panel))!important} .buzz-mag-template-journal .buzz-single-content h2{font-family:Georgia,"Times New Roman","Noto Serif KR",serif!important;font-weight:700!important} .buzz-mag-template-journal .buzz-single-content .buzz-mag-lead.is-journal{text-align:center;margin-left:auto!important;margin-right:auto!important;max-width:680px} @media(max-width:700px){ .buzz-single-content .buzz-mag-lead{font-size:17px!important;margin-bottom:28px!important} .buzz-single-content .buzz-mag-section,.buzz-single-content .buzz-mag-card-section{margin:28px 0!important} .buzz-single-content .buzz-mag-section>.wp-block-columns,.buzz-single-content .buzz-mag-card-section>.wp-block-columns,.buzz-single-content .buzz-mag-journal-row{gap:14px!important} .buzz-single-content .buzz-mag-section-kicker,.buzz-single-content .buzz-mag-card-no{font-size:22px!important} .buzz-mag-template-cards .buzz-single-content .buzz-mag-card-section{padding:14px!important} .buzz-single-content .buzz-mag-photo{min-height:140px} .buzz-single-content .buzz-mag-dual-notes{display:block!important} .buzz-single-content .buzz-mag-dual-notes>.wp-block-column+ .wp-block-column{margin-top:12px} .buzz-mag-template-journal .buzz-single-header{text-align:left} .buzz-mag-template-journal .buzz-single-breadcrumbs,.buzz-mag-template-journal .buzz-single-meta-row{justify-content:flex-start} } /* v1.3.66 - sample magazine article image placeholders */ .buzz-mag-sample-photo{display:flex;align-items:center;justify-content:center;min-height:220px;padding:24px;border:1px dashed var(--line);background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--panel) 82%,var(--buzz-pink) 18%));text-align:center;color:var(--muted)} .buzz-mag-sample-photo.is-wide{min-height:320px} .buzz-mag-sample-photo p{margin:0!important;font-size:13px!important;font-weight:800!important} @media(max-width:640px){.buzz-mag-sample-photo{min-height:180px}.buzz-mag-sample-photo.is-wide{min-height:220px}} /* v1.3.67 - Buzz Pink Gutenberg preset */ :root{ --wp--preset--color--buzz-pink:#ff168d; } .has-buzz-pink-color{ color:#ff168d!important; } .has-buzz-pink-background-color{ background-color:#ff168d!important; } .has-buzz-pink-border-color{ border-color:#ff168d!important; } /* v1.3.68 - Gutenberg Magazine Number style */ .is-style-buzz-magazine-number{ margin-top:0!important; margin-bottom:18px!important; color:#ff168d!important; font-family:inherit!important; font-size:32px!important; font-weight:950!important; line-height:1!important; letter-spacing:-.04em!important; } .is-style-buzz-magazine-number.has-text-color{ color:var(--wp--preset--color--buzz-pink,#ff168d)!important; } @media(max-width:640px){ .is-style-buzz-magazine-number{ font-size:28px!important; margin-bottom:14px!important; } } /* v1.3.69 - Gutenberg Magazine Body / Lead typography */ .is-style-buzz-magazine-body{ margin-top:0!important; margin-bottom:22px!important; color:var(--text,#16181d)!important; font-family:inherit!important; font-size:17px!important; font-weight:400!important; line-height:1.9!important; letter-spacing:-.015em!important; word-break:keep-all!important; } .is-style-buzz-magazine-lead{ margin-top:0!important; margin-bottom:28px!important; color:var(--text,#16181d)!important; font-family:inherit!important; font-size:21px!important; font-weight:600!important; line-height:1.75!important; letter-spacing:-.02em!important; word-break:keep-all!important; } @media(max-width:640px){ .is-style-buzz-magazine-body{ font-size:16px!important; line-height:1.85!important; margin-bottom:18px!important; } .is-style-buzz-magazine-lead{ font-size:18px!important; line-height:1.7!important; margin-bottom:22px!important; } } /* v1.3.70 - Magazine Handwriting paragraph style */ .is-style-buzz-magazine-handwriting{ position:relative; display:inline-block; width:auto; max-width:100%; margin:10px 0 28px!important; padding:0 6px 10px 0!important; color:#ff168d!important; font-family:"Nanum Pen Script","Nanum Brush Script","Segoe Print","Bradley Hand",cursive!important; font-size:34px!important; font-weight:400!important; line-height:1.18!important; letter-spacing:.01em!important; transform:rotate(-1deg); transform-origin:left center; word-break:keep-all!important; } .is-style-buzz-magazine-handwriting::after{ content:""; position:absolute; left:12%; right:-4%; bottom:0; height:3px; border-radius:999px; background:#ff168d; opacity:.72; transform:rotate(-2deg); transform-origin:left center; } @media(max-width:640px){ .is-style-buzz-magazine-handwriting{ margin-bottom:22px!important; font-size:29px!important; padding-bottom:9px!important; } .is-style-buzz-magazine-handwriting::after{ height:2px; } } /* v1.3.71 - Magazine handwriting/location block styles */ .is-style-buzz-magazine-handwriting{ position:relative; display:inline-block; width:auto; max-width:100%; margin:10px 0 28px!important; padding:0 6px 10px 0!important; color:#ff168d!important; font-family:"Nanum Pen Script","Nanum Brush Script","Segoe Print","Bradley Hand",cursive!important; font-size:34px!important; font-weight:400!important; line-height:1.18!important; letter-spacing:.01em!important; transform:rotate(-1deg); transform-origin:left center; word-break:keep-all!important; } .is-style-buzz-magazine-handwriting::after{ content:""; position:absolute; left:12%; right:-4%; bottom:0; height:3px; border-radius:999px; background:#ff168d; opacity:.72; transform:rotate(-2deg); transform-origin:left center; } .is-style-buzz-magazine-location{ display:block; margin:14px 0 0!important; color:var(--muted,#6b7280)!important; font-family:inherit!important; font-size:12px!important; font-weight:700!important; line-height:1.5!important; letter-spacing:-.01em!important; } @media(max-width:640px){ .is-style-buzz-magazine-handwriting{ font-size:29px!important; margin-bottom:22px!important; padding-bottom:9px!important; } .is-style-buzz-magazine-handwriting::after{height:2px} .is-style-buzz-magazine-location{ font-size:11.5px!important; } } /* v1.3.72 - remove Buzz Pink bullet from magazine location style */ /* v1.3.73 - Magazine title / subtitle / number+title */ .is-style-buzz-magazine-title{ margin-top:0!important; margin-bottom:18px!important; color:#111318!important; font-family:inherit!important; font-size:38px!important; font-weight:900!important; line-height:1.18!important; letter-spacing:-.035em!important; word-break:keep-all!important; } .is-style-buzz-magazine-subtitle{ margin-top:0!important; margin-bottom:20px!important; color:var(--muted,#6b7280)!important; font-family:inherit!important; font-size:20px!important; font-weight:700!important; line-height:1.45!important; letter-spacing:-.025em!important; word-break:keep-all!important; } .buzz-magazine-number-title{ display:flex; align-items:baseline; gap:14px; margin:28px 0 16px!important; min-width:0; } .buzz-magazine-number-title__number{ flex:0 0 auto; color:#ff168d; font-family:inherit; font-size:28px; font-weight:900; line-height:1; letter-spacing:-.04em; white-space:nowrap; } .buzz-magazine-number-title__text{ min-width:0; color:#111318; font-family:inherit; font-size:28px; font-weight:900; line-height:1.25; letter-spacing:-.035em; word-break:keep-all; } @media(max-width:640px){ .is-style-buzz-magazine-title{ font-size:30px!important; line-height:1.22!important; margin-bottom:14px!important; } .is-style-buzz-magazine-subtitle{ font-size:17px!important; line-height:1.45!important; margin-bottom:16px!important; } .buzz-magazine-number-title{ gap:10px; margin:22px 0 14px!important; } .buzz-magazine-number-title__number{ font-size:23px; } .buzz-magazine-number-title__text{ font-size:23px; line-height:1.28; } } /* v1.3.74 - Magazine title and automatic Number+Title styles in Gutenberg style panel */ .is-style-buzz-magazine-title{ margin-top:0!important; margin-bottom:18px!important; color:#111318!important; font-family:inherit!important; font-size:38px!important; font-weight:900!important; line-height:1.18!important; letter-spacing:-.035em!important; word-break:keep-all!important; } /* * 매거진 번호+제목: * 텍스트 블록에는 제목만 입력하면 앞에 01, 02, 03...이 자동으로 붙습니다. * 같은 글의 본문 컨테이너 안에서 순서대로 증가합니다. */ .buzz-single-content{ counter-reset:buzz-number-title; } .is-style-buzz-magazine-number-title-style{ counter-increment:buzz-number-title; display:flex!important; align-items:baseline!important; gap:14px!important; margin:28px 0 16px!important; color:#111318!important; font-family:inherit!important; font-size:28px!important; font-weight:900!important; line-height:1.25!important; letter-spacing:-.035em!important; word-break:keep-all!important; } .is-style-buzz-magazine-number-title-style::before{ content:counter(buzz-number-title, decimal-leading-zero); flex:0 0 auto; color:#ff168d; font-size:1em; font-weight:900; line-height:1; letter-spacing:-.04em; white-space:nowrap; } /* Editor preview counter */ .editor-styles-wrapper{ counter-reset:buzz-editor-number-title; } .editor-styles-wrapper .is-style-buzz-magazine-number-title-style{ counter-increment:buzz-editor-number-title; } .editor-styles-wrapper .is-style-buzz-magazine-number-title-style::before{ content:counter(buzz-editor-number-title, decimal-leading-zero); color:#ff168d; } @media(max-width:640px){ .is-style-buzz-magazine-title{ font-size:30px!important; line-height:1.22!important; margin-bottom:14px!important; } .is-style-buzz-magazine-number-title-style{ gap:10px!important; margin:22px 0 14px!important; font-size:23px!important; line-height:1.28!important; } } /* v1.3.76 - BuzzKorea unified typography */ :root{ --buzz-font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif; --buzz-font-heading:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif; } /* 기본 UI / 본문 */ html, body, button, input, select, textarea, .wp-site-blocks, .editor-styles-wrapper{ font-family:var(--buzz-font-sans)!important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } body, .buzz-single-content, .article-content, .buzz-single-subtitle, .buzz-single-meta-row, .buzz-widget, .buzz-related-section, .buzz-tag-box, .buzz-author-card, .buzz-article-post-nav, .post-card, .compact-card{ font-family:var(--buzz-font-sans)!important; } /* BuzzKorea heading hierarchy */ h1,h2,h3,h4,h5,h6, .wp-block-heading, .editor-styles-wrapper h1, .editor-styles-wrapper h2, .editor-styles-wrapper h3, .editor-styles-wrapper h4, .editor-styles-wrapper h5, .editor-styles-wrapper h6, .buzz-single-title, .buzz-single-content h1, .buzz-single-content h2, .buzz-single-content h3, .buzz-single-content h4, .buzz-single-content h5, .buzz-single-content h6, .article-header h1, .article-content h1, .article-content h2, .article-content h3, .article-content h4, .article-content h5, .article-content h6, .hero-main h1, .post-card h2, .post-card h3, .compact-card h2, .buzz-hero-copy h1, .buzz-side-copy h2, .buzz-section-head h2, .buzz-mini-head h2, .buzz-story-card h3, .buzz-special-copy h2, .buzz-popup-copy h3, .buzz-widget-head h2, .buzz-floating-head h2, .buzz-summary-title, .buzz-tag-box h2, .buzz-author-card h2, .buzz-related-card h3{ font-family:var(--buzz-font-heading)!important; color:var(--text,#16181d); text-rendering:optimizeLegibility; } /* 제목별 Buzz 무게/자간 */ h1, .wp-block-heading:is(h1), .editor-styles-wrapper h1, .buzz-single-title, .article-header h1, .hero-main h1, .buzz-hero-copy h1{ font-weight:900!important; letter-spacing:-.048em!important; } h2, .wp-block-heading:is(h2), .editor-styles-wrapper h2, .buzz-single-content h2, .article-content h2, .post-card h2, .compact-card h2, .buzz-side-copy h2, .buzz-section-head h2, .buzz-special-copy h2{ font-weight:900!important; letter-spacing:-.038em!important; } h3, .wp-block-heading:is(h3), .editor-styles-wrapper h3, .buzz-single-content h3, .article-content h3, .post-card h3, .buzz-story-card h3, .buzz-popup-copy h3, .buzz-related-card h3{ font-weight:850!important; letter-spacing:-.03em!important; } h4, .wp-block-heading:is(h4), .editor-styles-wrapper h4, .buzz-single-content h4, .article-content h4{ font-weight:800!important; letter-spacing:-.025em!important; } h5, h6, .wp-block-heading:is(h5), .wp-block-heading:is(h6), .editor-styles-wrapper h5, .editor-styles-wrapper h6, .buzz-single-content h5, .buzz-single-content h6, .article-content h5, .article-content h6{ font-weight:800!important; letter-spacing:-.02em!important; } /* 본문은 제목보다 부드럽게 */ p, li, .buzz-single-content p, .buzz-single-content li, .article-content p, .article-content li{ font-family:var(--buzz-font-sans)!important; font-weight:400; letter-spacing:-.012em; } strong, b, .buzz-single-content strong, .article-content strong{ font-weight:800; } /* 메뉴/버튼/라벨도 동일한 Buzz UI 톤 */ .buzz-nav, .buzz-nav a, .main-navigation, .main-navigation a, .buzz-label, .buzz-read-button, .buzz-pink-button, .buzz-chips a, button, .button, .wp-element-button{ font-family:var(--buzz-font-sans)!important; font-weight:800; letter-spacing:-.02em; } /* 코드와 손글씨 스타일은 전용 글꼴 유지 */ code,pre,kbd,samp, .article-content code, .buzz-single-content code{ font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace!important; } .is-style-buzz-magazine-handwriting{ font-family:"Nanum Pen Script","Nanum Brush Script","Segoe Print","Bradley Hand",cursive!important; } /* Gutenberg에서 만든 매거진 스타일도 Buzz 타이포와 통일 */ .is-style-buzz-magazine-title, .is-style-buzz-magazine-number, .is-style-buzz-magazine-body, .is-style-buzz-magazine-lead, .is-style-buzz-magazine-location, .is-style-buzz-magazine-subtitle, .is-style-buzz-magazine-number-title-style, .buzz-magazine-number-title, .buzz-magazine-number-title__number, .buzz-magazine-number-title__text{ font-family:var(--buzz-font-heading)!important; } .is-style-buzz-magazine-body, .is-style-buzz-magazine-lead, .is-style-buzz-magazine-location{ font-family:var(--buzz-font-sans)!important; } /* v1.3.77 - restore original Buzz magazine typography after global font unification */ /* 매거진 번호 */ body .is-style-buzz-magazine-number, .editor-styles-wrapper .is-style-buzz-magazine-number{ margin-top:0!important; margin-bottom:18px!important; color:#ff168d!important; font-family:var(--buzz-font-heading,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif)!important; font-size:32px!important; font-weight:950!important; line-height:1!important; letter-spacing:-.04em!important; } /* 매거진 본문 - 기존 15px로 복원 */ body .is-style-buzz-magazine-body, .editor-styles-wrapper .is-style-buzz-magazine-body{ margin-top:0!important; margin-bottom:20px!important; color:var(--text,#16181d)!important; font-family:var(--buzz-font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif)!important; font-size:15px!important; font-weight:400!important; line-height:1.85!important; letter-spacing:-.012em!important; word-break:keep-all!important; } /* 매거진 리드문 */ body .is-style-buzz-magazine-lead, .editor-styles-wrapper .is-style-buzz-magazine-lead{ margin-top:0!important; margin-bottom:26px!important; color:var(--text,#16181d)!important; font-family:var(--buzz-font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif)!important; font-size:21px!important; font-weight:600!important; line-height:1.7!important; letter-spacing:-.02em!important; word-break:keep-all!important; } /* 매거진 손글씨 - 전역 Buzz 폰트에서 완전히 분리 */ body .is-style-buzz-magazine-handwriting, .editor-styles-wrapper .is-style-buzz-magazine-handwriting{ position:relative!important; display:inline-block!important; width:auto!important; max-width:100%!important; margin:10px 0 28px!important; padding:0 6px 10px 0!important; color:#ff168d!important; font-family:"Nanum Pen Script","Nanum Brush Script","Segoe Print","Bradley Hand",cursive!important; font-size:34px!important; font-weight:400!important; font-style:normal!important; line-height:1.18!important; letter-spacing:.01em!important; transform:rotate(-1deg)!important; transform-origin:left center!important; word-break:keep-all!important; } body .is-style-buzz-magazine-handwriting::after, .editor-styles-wrapper .is-style-buzz-magazine-handwriting::after{ content:""!important; position:absolute!important; left:12%!important; right:-4%!important; bottom:0!important; height:3px!important; border-radius:999px!important; background:#ff168d!important; opacity:.72!important; transform:rotate(-2deg)!important; transform-origin:left center!important; } /* 매거진 위치정보 */ body .is-style-buzz-magazine-location, .editor-styles-wrapper .is-style-buzz-magazine-location{ display:block!important; margin:14px 0 0!important; color:var(--muted,#6b7280)!important; font-family:var(--buzz-font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif)!important; font-size:12px!important; font-weight:700!important; line-height:1.5!important; letter-spacing:-.01em!important; } body .is-style-buzz-magazine-location::before, .editor-styles-wrapper .is-style-buzz-magazine-location::before{ content:none!important; display:none!important; } /* 매거진 소제목 */ body .is-style-buzz-magazine-subtitle, .editor-styles-wrapper .is-style-buzz-magazine-subtitle{ margin-top:0!important; margin-bottom:20px!important; color:var(--muted,#6b7280)!important; font-family:var(--buzz-font-heading,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif)!important; font-size:20px!important; font-weight:700!important; line-height:1.45!important; letter-spacing:-.025em!important; word-break:keep-all!important; } /* 매거진 타이틀 */ body .is-style-buzz-magazine-title, .editor-styles-wrapper .is-style-buzz-magazine-title{ margin-top:0!important; margin-bottom:18px!important; color:#111318!important; font-family:var(--buzz-font-heading,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif)!important; font-size:38px!important; font-weight:900!important; line-height:1.18!important; letter-spacing:-.035em!important; word-break:keep-all!important; } /* 번호+제목 */ body .is-style-buzz-magazine-number-title-style, .editor-styles-wrapper .is-style-buzz-magazine-number-title-style{ font-family:var(--buzz-font-heading,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif)!important; font-size:28px!important; font-weight:900!important; line-height:1.25!important; letter-spacing:-.035em!important; } body .is-style-buzz-magazine-number-title-style::before, .editor-styles-wrapper .is-style-buzz-magazine-number-title-style::before{ color:#ff168d!important; font-weight:900!important; letter-spacing:-.04em!important; } @media(max-width:640px){ body .is-style-buzz-magazine-number, .editor-styles-wrapper .is-style-buzz-magazine-number{ font-size:28px!important; } body .is-style-buzz-magazine-body, .editor-styles-wrapper .is-style-buzz-magazine-body{ font-size:15px!important; line-height:1.8!important; } body .is-style-buzz-magazine-lead, .editor-styles-wrapper .is-style-buzz-magazine-lead{ font-size:18px!important; line-height:1.7!important; } body .is-style-buzz-magazine-handwriting, .editor-styles-wrapper .is-style-buzz-magazine-handwriting{ font-size:29px!important; margin-bottom:22px!important; padding-bottom:9px!important; } body .is-style-buzz-magazine-handwriting::after, .editor-styles-wrapper .is-style-buzz-magazine-handwriting::after{ height:2px!important; } body .is-style-buzz-magazine-subtitle, .editor-styles-wrapper .is-style-buzz-magazine-subtitle{ font-size:17px!important; } body .is-style-buzz-magazine-title, .editor-styles-wrapper .is-style-buzz-magazine-title{ font-size:30px!important; line-height:1.22!important; } body .is-style-buzz-magazine-number-title-style, .editor-styles-wrapper .is-style-buzz-magazine-number-title-style{ font-size:23px!important; } } /* v1.3.78 - mobile typography weight refinement */ @media(max-width:640px){ h1,.wp-block-heading:is(h1),.editor-styles-wrapper h1,.buzz-single-title,.article-header h1,.hero-main h1,.buzz-hero-copy h1{ font-weight:800!important; } h2,.wp-block-heading:is(h2),.editor-styles-wrapper h2,.buzz-single-content h2,.article-content h2,.post-card h2,.compact-card h2,.buzz-side-copy h2,.buzz-section-head h2,.buzz-special-copy h2{ font-weight:800!important; } h3,.wp-block-heading:is(h3),.editor-styles-wrapper h3,.buzz-single-content h3,.article-content h3,.post-card h3,.buzz-story-card h3,.buzz-popup-copy h3,.buzz-related-card h3{ font-weight:750!important; } h4,h5,h6,.wp-block-heading:is(h4),.wp-block-heading:is(h5),.wp-block-heading:is(h6), .editor-styles-wrapper h4,.editor-styles-wrapper h5,.editor-styles-wrapper h6, .buzz-single-content h4,.buzz-single-content h5,.buzz-single-content h6, .article-content h4,.article-content h5,.article-content h6{ font-weight:700!important; } strong,b,.buzz-single-content strong,.article-content strong{ font-weight:700!important; } .buzz-nav,.buzz-nav a,.main-navigation,.main-navigation a,.buzz-label, .buzz-read-button,.buzz-pink-button,.buzz-chips a,button,.button,.wp-element-button{ font-weight:700!important; } body .is-style-buzz-magazine-number, .editor-styles-wrapper .is-style-buzz-magazine-number{ font-weight:850!important; } body .is-style-buzz-magazine-title, .editor-styles-wrapper .is-style-buzz-magazine-title{ font-weight:800!important; } body .is-style-buzz-magazine-subtitle, .editor-styles-wrapper .is-style-buzz-magazine-subtitle{ font-weight:650!important; } body .is-style-buzz-magazine-lead, .editor-styles-wrapper .is-style-buzz-magazine-lead{ font-weight:500!important; } body .is-style-buzz-magazine-location, .editor-styles-wrapper .is-style-buzz-magazine-location{ font-weight:600!important; } body .is-style-buzz-magazine-number-title-style, .editor-styles-wrapper .is-style-buzz-magazine-number-title-style, .buzz-magazine-number-title__number, .buzz-magazine-number-title__text{ font-weight:800!important; } body .is-style-buzz-magazine-body, .editor-styles-wrapper .is-style-buzz-magazine-body, body .is-style-buzz-magazine-handwriting, .editor-styles-wrapper .is-style-buzz-magazine-handwriting{ font-weight:400!important; } } /* v1.3.79 - SPECIAL FEATURE contrast fix after global heading typography */ body.home .buzz-special-card > a, body.home .buzz-special-copy{ color:#fff!important; } body.home .buzz-special-copy h2{ color:#fff!important; } body.home .buzz-special-copy p{ color:rgba(255,255,255,.90)!important; } body.home .buzz-special-copy > span:last-child{ color:#fff!important; } /* Keep the white label with blue text */ body.home .buzz-special-copy .buzz-label-light{ background:#fff!important; color:var(--bk-blue,#174bd4)!important; } @media(max-width:640px){ body.home .buzz-special-copy h2{ color:#fff!important; font-weight:800!important; } body.home .buzz-special-copy p{ color:rgba(255,255,255,.92)!important; } } /* v1.3.80 - Home hero readability and image visibility */ .buzz-hero-main .buzz-hero-shade{ background: linear-gradient( 90deg, rgba(8,10,14,.76) 0%, rgba(8,10,14,.58) 30%, rgba(8,10,14,.24) 52%, rgba(8,10,14,.04) 72%, rgba(8,10,14,0) 100% )!important; } .buzz-hero-main .buzz-hero-copy{ left:32px!important; bottom:32px!important; width:min(470px,54%)!important; color:#fff!important; } .buzz-hero-main .buzz-hero-copy h1{ color:#fff!important; font-size:clamp(28px,3.1vw,44px)!important; line-height:1.10!important; font-weight:850!important; letter-spacing:-.045em!important; max-width:11.5em!important; margin:14px 0 12px!important; text-shadow:0 2px 12px rgba(0,0,0,.30); word-break:keep-all!important; } .buzz-hero-main .buzz-hero-copy p{ color:rgba(255,255,255,.92)!important; font-size:14px!important; line-height:1.55!important; max-width:31em!important; margin-bottom:18px!important; text-shadow:0 1px 8px rgba(0,0,0,.22); } .buzz-hero-main .buzz-label{ color:#fff!important; } .buzz-hero-main .buzz-read-button{ color:#111318!important; background:#fff!important; } /* Tablet */ @media(max-width:900px){ .buzz-hero-main .buzz-hero-copy{ width:min(440px,62%)!important; } .buzz-hero-main .buzz-hero-copy h1{ font-size:clamp(28px,4.4vw,38px)!important; } } /* Mobile: keep title compact so the image remains visible */ @media(max-width:640px){ .buzz-hero-main .buzz-hero-shade{ background: linear-gradient( 90deg, rgba(8,10,14,.72) 0%, rgba(8,10,14,.48) 42%, rgba(8,10,14,.16) 72%, rgba(8,10,14,0) 100% )!important; } .buzz-hero-main .buzz-hero-copy{ left:18px!important; right:18px!important; bottom:20px!important; width:auto!important; max-width:72%!important; } .buzz-hero-main .buzz-hero-copy h1{ color:#fff!important; font-size:27px!important; line-height:1.12!important; font-weight:800!important; letter-spacing:-.04em!important; max-width:10.5em!important; margin:11px 0 12px!important; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; } .buzz-hero-main .buzz-hero-copy p{ display:none!important; } .buzz-hero-main .buzz-label{ font-size:10px!important; padding:5px 8px!important; } .buzz-hero-main .buzz-read-button{ padding:9px 13px!important; font-size:11px!important; } } /* Extra small phones */ @media(max-width:390px){ .buzz-hero-main .buzz-hero-copy{ max-width:76%!important; } .buzz-hero-main .buzz-hero-copy h1{ font-size:24px!important; max-width:10em!important; } } /* v1.3.81 - hero bottom-left gradient + smaller CTA */ .buzz-hero-main .buzz-hero-shade{ background: radial-gradient( 95% 78% at 0% 100%, rgba(8,10,14,.78) 0%, rgba(8,10,14,.58) 34%, rgba(8,10,14,.28) 58%, rgba(8,10,14,.08) 76%, rgba(8,10,14,0) 100% )!important; } .buzz-hero-main .buzz-read-button{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:0!important; padding:9px 14px!important; font-size:13px!important; line-height:1.2!important; font-weight:800!important; border-radius:0!important; } @media(max-width:640px){ .buzz-hero-main .buzz-hero-shade{ background: radial-gradient( 108% 84% at 0% 100%, rgba(8,10,14,.80) 0%, rgba(8,10,14,.60) 36%, rgba(8,10,14,.28) 62%, rgba(8,10,14,.06) 82%, rgba(8,10,14,0) 100% )!important; } .buzz-hero-main .buzz-read-button{ padding:7px 11px!important; font-size:10.5px!important; } } /* v1.3.82 - single article typography hierarchy */ .single .buzz-single-title{ font-size:clamp(38px,4vw,56px)!important; font-weight:800!important; line-height:1.16!important; letter-spacing:-.04em!important; word-break:keep-all!important; } .single .buzz-single-subtitle{ width:100%!important; max-width:none!important; margin-top:18px!important; color:var(--muted,#6b7280)!important; font-size:17px!important; font-weight:400!important; line-height:1.75!important; letter-spacing:-.015em!important; word-break:keep-all!important; } .single .buzz-single-content h2{ font-size:30px!important; font-weight:800!important; line-height:1.3!important; letter-spacing:-.035em!important; margin-top:48px!important; margin-bottom:18px!important; } .single .buzz-single-content h3{ font-size:24px!important; font-weight:750!important; line-height:1.35!important; letter-spacing:-.03em!important; margin-top:38px!important; margin-bottom:14px!important; } .single .buzz-single-content h4{ font-size:20px!important; font-weight:700!important; line-height:1.4!important; letter-spacing:-.025em!important; margin-top:32px!important; margin-bottom:12px!important; } .single .buzz-single-content h5{ font-size:17px!important; font-weight:700!important; line-height:1.45!important; letter-spacing:-.02em!important; } .single .buzz-single-content h6{ font-size:15px!important; font-weight:700!important; line-height:1.5!important; letter-spacing:-.015em!important; } /* Keep ordinary article body compact; magazine styles still override separately. */ .single .buzz-single-content > p:not([class*="is-style-buzz-magazine-"]), .single .buzz-single-content > ul:not([class*="is-style-buzz-magazine-"]), .single .buzz-single-content > ol:not([class*="is-style-buzz-magazine-"]){ font-size:15px!important; line-height:1.85!important; } @media(max-width:640px){ .single .buzz-single-title{ font-size:30px!important; font-weight:750!important; line-height:1.22!important; letter-spacing:-.035em!important; } .single .buzz-single-subtitle{ margin-top:12px!important; font-size:15px!important; line-height:1.7!important; } .single .buzz-single-content h2{ font-size:24px!important; font-weight:750!important; line-height:1.32!important; margin-top:36px!important; margin-bottom:14px!important; } .single .buzz-single-content h3{ font-size:21px!important; font-weight:700!important; line-height:1.35!important; margin-top:30px!important; margin-bottom:12px!important; } .single .buzz-single-content h4{ font-size:18px!important; font-weight:700!important; margin-top:26px!important; } .single .buzz-single-content h5{ font-size:16px!important; } .single .buzz-single-content h6{ font-size:15px!important; } .single .buzz-single-content > p:not([class*="is-style-buzz-magazine-"]), .single .buzz-single-content > ul:not([class*="is-style-buzz-magazine-"]), .single .buzz-single-content > ol:not([class*="is-style-buzz-magazine-"]){ font-size:15px!important; line-height:1.8!important; } } /* v1.3.83 - single typography */ .single .buzz-single-title{ font-size:32px!important;font-weight:800!important;line-height:1.22!important; letter-spacing:-.035em!important;word-break:keep-all!important } .single .buzz-single-subtitle{ width:100%!important;max-width:none!important;margin-top:14px!important; font-size:18px!important;font-weight:400!important;line-height:1.7!important } .single .buzz-single-content{font-size:17px!important;line-height:1.85!important} .single .buzz-single-content>p:not([class*="is-style-buzz-magazine-"]), .single .buzz-single-content>ul:not([class*="is-style-buzz-magazine-"]), .single .buzz-single-content>ol:not([class*="is-style-buzz-magazine-"]), .single .buzz-single-content li{font-size:17px!important;line-height:1.85!important} .single .buzz-single-content h2{font-size:26px!important;font-weight:800!important;line-height:1.32!important;margin:42px 0 16px!important} .single .buzz-single-content h3{font-size:22px!important;font-weight:750!important;line-height:1.35!important;margin:34px 0 13px!important} .single .buzz-single-content h4{font-size:19px!important;font-weight:700!important;line-height:1.42!important;margin:28px 0 11px!important} .single .buzz-single-content h5{font-size:18px!important;font-weight:700!important} .single .buzz-single-content h6{font-size:17px!important;font-weight:700!important} .single .buzz-single-content .is-style-buzz-magazine-body{font-size:15px!important} .single .buzz-single-content .is-style-buzz-magazine-lead{font-size:21px!important} .single .buzz-single-content .is-style-buzz-magazine-number{font-size:32px!important} .single .buzz-single-content .is-style-buzz-magazine-handwriting{font-size:34px!important} @media(max-width:640px){ .single .buzz-single-title{font-size:28px!important;font-weight:750!important;line-height:1.25!important} .single .buzz-single-subtitle{font-size:16px!important;line-height:1.65!important;margin-top:11px!important} .single .buzz-single-content{font-size:16px!important;line-height:1.8!important} .single .buzz-single-content>p:not([class*="is-style-buzz-magazine-"]), .single .buzz-single-content>ul:not([class*="is-style-buzz-magazine-"]), .single .buzz-single-content>ol:not([class*="is-style-buzz-magazine-"]), .single .buzz-single-content li{font-size:16px!important;line-height:1.8!important} .single .buzz-single-content h2{font-size:23px!important;font-weight:750!important;margin:34px 0 13px!important} .single .buzz-single-content h3{font-size:20px!important;font-weight:700!important;margin:28px 0 11px!important} .single .buzz-single-content h4{font-size:18px!important} .single .buzz-single-content h5{font-size:17px!important} .single .buzz-single-content h6{font-size:16px!important} .single .buzz-single-content .is-style-buzz-magazine-body{font-size:15px!important} .single .buzz-single-content .is-style-buzz-magazine-lead{font-size:18px!important} .single .buzz-single-content .is-style-buzz-magazine-number{font-size:28px!important} .single .buzz-single-content .is-style-buzz-magazine-handwriting{font-size:29px!important} } /* v1.3.84 - unified typography across home/category/search/single/editor */ :root{ --buzz-type-body:17px; --buzz-type-body-mobile:16px; --buzz-type-h1:32px; --buzz-type-h2:26px; --buzz-type-h3:22px; --buzz-type-h4:19px; --buzz-type-h5:18px; --buzz-type-h6:17px; --buzz-type-h1-mobile:28px; --buzz-type-h2-mobile:23px; --buzz-type-h3-mobile:20px; --buzz-type-h4-mobile:18px; --buzz-type-h5-mobile:17px; --buzz-type-h6-mobile:16px; --buzz-type-leading:1.82; --buzz-type-heading-leading:1.3; } /* ===== Global content typography ===== */ body, button, input, select, textarea{ font-family:var(--buzz-font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif)!important; } main p, main li, .buzz-main p, .buzz-main li, .buzz-page-content p, .buzz-page-content li, .buzz-category-content p, .buzz-category-content li, .buzz-search-content p, .buzz-search-content li, .buzz-single-content p, .buzz-single-content li, .article-content p, .article-content li{ font-size:var(--buzz-type-body)!important; line-height:var(--buzz-type-leading)!important; font-weight:400!important; letter-spacing:-.012em!important; word-break:keep-all!important; } /* ===== Heading hierarchy everywhere ===== */ main h1, .buzz-main h1, .buzz-page-content h1, .buzz-category-content h1, .buzz-search-content h1, .buzz-single-content h1, .article-content h1, .wp-block-heading:is(h1), .editor-styles-wrapper h1{ font-size:var(--buzz-type-h1)!important; font-weight:800!important; line-height:1.22!important; letter-spacing:-.035em!important; word-break:keep-all!important; } main h2, .buzz-main h2, .buzz-page-content h2, .buzz-category-content h2, .buzz-search-content h2, .buzz-single-content h2, .article-content h2, .wp-block-heading:is(h2), .editor-styles-wrapper h2{ font-size:var(--buzz-type-h2)!important; font-weight:800!important; line-height:1.32!important; letter-spacing:-.03em!important; word-break:keep-all!important; } main h3, .buzz-main h3, .buzz-page-content h3, .buzz-category-content h3, .buzz-search-content h3, .buzz-single-content h3, .article-content h3, .wp-block-heading:is(h3), .editor-styles-wrapper h3{ font-size:var(--buzz-type-h3)!important; font-weight:750!important; line-height:1.35!important; letter-spacing:-.025em!important; word-break:keep-all!important; } main h4, .buzz-main h4, .buzz-page-content h4, .buzz-category-content h4, .buzz-search-content h4, .buzz-single-content h4, .article-content h4, .wp-block-heading:is(h4), .editor-styles-wrapper h4{ font-size:var(--buzz-type-h4)!important; font-weight:700!important; line-height:1.42!important; letter-spacing:-.02em!important; word-break:keep-all!important; } main h5, .buzz-main h5, .buzz-page-content h5, .buzz-category-content h5, .buzz-search-content h5, .buzz-single-content h5, .article-content h5, .wp-block-heading:is(h5), .editor-styles-wrapper h5{ font-size:var(--buzz-type-h5)!important; font-weight:700!important; line-height:1.45!important; letter-spacing:-.018em!important; } main h6, .buzz-main h6, .buzz-page-content h6, .buzz-category-content h6, .buzz-search-content h6, .buzz-single-content h6, .article-content h6, .wp-block-heading:is(h6), .editor-styles-wrapper h6{ font-size:var(--buzz-type-h6)!important; font-weight:700!important; line-height:1.5!important; letter-spacing:-.015em!important; } /* ===== Page-specific titles use the same H hierarchy ===== */ .buzz-single-title, .buzz-search-title, .buzz-category-title, .buzz-page-title, .buzz-hero-copy h1, .hero-main h1{ font-size:var(--buzz-type-h1)!important; font-weight:800!important; line-height:1.22!important; letter-spacing:-.035em!important; } .buzz-section-head h2, .buzz-side-copy h2, .buzz-widget-head h2, .buzz-mini-head h2, .buzz-special-copy h2{ font-size:var(--buzz-type-h2)!important; font-weight:800!important; line-height:1.32!important; letter-spacing:-.03em!important; } /* Card titles stay compact but consistent in weight/family */ .post-card h2, .post-card h3, .compact-card h2, .buzz-story-card h3, .buzz-related-card h3{ font-family:var(--buzz-font-heading,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",Arial,sans-serif)!important; font-weight:750!important; letter-spacing:-.025em!important; } /* Search/category intro copy follows body scale */ .buzz-category-intro-copy p, .buzz-search-hero p, .buzz-search-subtitle, .buzz-category-intro-copy{ font-size:var(--buzz-type-body)!important; line-height:1.7!important; font-weight:400!important; } /* ===== Single article metadata / subtitle ===== */ .single .buzz-single-subtitle{ font-size:18px!important; line-height:1.7!important; font-weight:400!important; } /* ===== Keep magazine custom styles intentionally separate ===== */ .is-style-buzz-magazine-body{ font-size:15px!important; line-height:1.85!important; } .is-style-buzz-magazine-lead{ font-size:21px!important; line-height:1.7!important; } .is-style-buzz-magazine-number{ font-size:32px!important; line-height:1!important; } .is-style-buzz-magazine-handwriting{ font-size:34px!important; line-height:1.18!important; } /* ===== Mobile ===== */ @media(max-width:640px){ main p, main li, .buzz-main p, .buzz-main li, .buzz-page-content p, .buzz-page-content li, .buzz-category-content p, .buzz-category-content li, .buzz-search-content p, .buzz-search-content li, .buzz-single-content p, .buzz-single-content li, .article-content p, .article-content li{ font-size:var(--buzz-type-body-mobile)!important; line-height:1.8!important; } main h1, .buzz-main h1, .buzz-page-content h1, .buzz-category-content h1, .buzz-search-content h1, .buzz-single-content h1, .article-content h1, .wp-block-heading:is(h1), .editor-styles-wrapper h1, .buzz-single-title, .buzz-search-title, .buzz-category-title, .buzz-page-title, .buzz-hero-copy h1, .hero-main h1{ font-size:var(--buzz-type-h1-mobile)!important; font-weight:750!important; } main h2, .buzz-main h2, .buzz-page-content h2, .buzz-category-content h2, .buzz-search-content h2, .buzz-single-content h2, .article-content h2, .wp-block-heading:is(h2), .editor-styles-wrapper h2, .buzz-section-head h2, .buzz-side-copy h2, .buzz-widget-head h2, .buzz-mini-head h2, .buzz-special-copy h2{ font-size:var(--buzz-type-h2-mobile)!important; font-weight:750!important; } main h3, .buzz-main h3, .buzz-page-content h3, .buzz-category-content h3, .buzz-search-content h3, .buzz-single-content h3, .article-content h3, .wp-block-heading:is(h3), .editor-styles-wrapper h3{ font-size:var(--buzz-type-h3-mobile)!important; font-weight:700!important; } main h4, .buzz-main h4, .buzz-page-content h4, .buzz-category-content h4, .buzz-search-content h4, .buzz-single-content h4, .article-content h4, .wp-block-heading:is(h4), .editor-styles-wrapper h4{ font-size:var(--buzz-type-h4-mobile)!important; } main h5, .buzz-main h5, .buzz-page-content h5, .buzz-category-content h5, .buzz-search-content h5, .buzz-single-content h5, .article-content h5, .wp-block-heading:is(h5), .editor-styles-wrapper h5{ font-size:var(--buzz-type-h5-mobile)!important; } main h6, .buzz-main h6, .buzz-page-content h6, .buzz-category-content h6, .buzz-search-content h6, .buzz-single-content h6, .article-content h6, .wp-block-heading:is(h6), .editor-styles-wrapper h6{ font-size:var(--buzz-type-h6-mobile)!important; } .buzz-category-intro-copy p, .buzz-search-hero p, .buzz-search-subtitle, .buzz-category-intro-copy{ font-size:var(--buzz-type-body-mobile)!important; } .single .buzz-single-subtitle{ font-size:16px!important; } .is-style-buzz-magazine-body{font-size:15px!important} .is-style-buzz-magazine-lead{font-size:18px!important} .is-style-buzz-magazine-number{font-size:28px!important} .is-style-buzz-magazine-handwriting{font-size:29px!important} } /* v1.3.85 - final unified typography scale Home / category / search / single / editor use the same semantic sizes. */ :root{ --buzz-h1:32px; --buzz-h2:26px; --buzz-h3:22px; --buzz-h4:20px; --buzz-h5:18px; --buzz-h6:17px; --buzz-body:17px; --buzz-subtitle:18px; --buzz-ui:15px; --buzz-small:14px; --buzz-h1-m:28px; --buzz-h2-m:24px; --buzz-h3-m:20px; --buzz-h4-m:18px; --buzz-h5-m:17px; --buzz-h6-m:16px; --buzz-body-m:16px; --buzz-subtitle-m:16px; --buzz-ui-m:14px; --buzz-small-m:13px; } /* ---------- Semantic headings: same everywhere ---------- */ body main h1, body .buzz-main h1, body .buzz-page-content h1, body .buzz-category-content h1, body .buzz-search-content h1, body .buzz-single-content h1, body .article-content h1, body .buzz-single-title, body .buzz-search-title, body .buzz-category-title, body .buzz-page-title, .editor-styles-wrapper h1{ font-size:var(--buzz-h1)!important; font-weight:800!important; line-height:1.22!important; letter-spacing:-.035em!important; word-break:keep-all!important; } body main h2, body .buzz-main h2, body .buzz-page-content h2, body .buzz-category-content h2, body .buzz-search-content h2, body .buzz-single-content h2, body .article-content h2, body .buzz-section-head h2, body .buzz-side-copy h2, body .buzz-widget-head h2, body .buzz-mini-head h2, .editor-styles-wrapper h2{ font-size:var(--buzz-h2)!important; font-weight:800!important; line-height:1.3!important; letter-spacing:-.03em!important; word-break:keep-all!important; } body main h3, body .buzz-main h3, body .buzz-page-content h3, body .buzz-category-content h3, body .buzz-search-content h3, body .buzz-single-content h3, body .article-content h3, .editor-styles-wrapper h3{ font-size:var(--buzz-h3)!important; font-weight:750!important; line-height:1.34!important; letter-spacing:-.025em!important; word-break:keep-all!important; } body main h4, body .buzz-main h4, body .buzz-page-content h4, body .buzz-category-content h4, body .buzz-search-content h4, body .buzz-single-content h4, body .article-content h4, .editor-styles-wrapper h4{ font-size:var(--buzz-h4)!important; font-weight:700!important; line-height:1.4!important; letter-spacing:-.02em!important; } body main h5, body .buzz-main h5, body .buzz-page-content h5, body .buzz-category-content h5, body .buzz-search-content h5, body .buzz-single-content h5, body .article-content h5, .editor-styles-wrapper h5{ font-size:var(--buzz-h5)!important; font-weight:700!important; line-height:1.45!important; } body main h6, body .buzz-main h6, body .buzz-page-content h6, body .buzz-category-content h6, body .buzz-search-content h6, body .buzz-single-content h6, body .article-content h6, .editor-styles-wrapper h6{ font-size:var(--buzz-h6)!important; font-weight:700!important; line-height:1.5!important; } /* Hero / special section headings no longer use oversized independent H1/H2 values. */ body .buzz-hero-copy h1, body .hero-main h1{ font-size:var(--buzz-h1)!important; font-weight:800!important; } body .buzz-special-copy h2{ font-size:var(--buzz-h2)!important; font-weight:800!important; } /* ---------- Body copy ---------- */ body main p, body main li, body .buzz-main p, body .buzz-main li, body .buzz-page-content p, body .buzz-page-content li, body .buzz-category-content p, body .buzz-category-content li, body .buzz-search-content p, body .buzz-search-content li, body .buzz-single-content p, body .buzz-single-content li, body .article-content p, body .article-content li, .editor-styles-wrapper p, .editor-styles-wrapper li{ font-size:var(--buzz-body)!important; line-height:1.78!important; font-weight:400!important; letter-spacing:-.012em!important; } /* Subtitle / intro text */ body .buzz-single-subtitle, body .buzz-search-subtitle, body .buzz-category-intro-copy p, body .buzz-search-hero p{ font-size:var(--buzz-subtitle)!important; line-height:1.7!important; font-weight:400!important; } /* ---------- Links / strong / labels / controls ---------- */ /* Normal links inherit surrounding semantic size instead of having arbitrary 11/22px values. */ body main a:not(.buzz-read-button):not(.button):not(.wp-element-button), body .buzz-main a:not(.buzz-read-button):not(.button):not(.wp-element-button), body .buzz-page-content a, body .buzz-category-content a, body .buzz-search-content a, body .buzz-single-content a, body .article-content a{ font-size:inherit!important; } /* Previously strong text could fall to 16px. It now follows body scale. */ body main strong, body main b, body .buzz-single-content strong, body .buzz-single-content b, body .article-content strong, body .article-content b{ font-size:inherit!important; font-weight:700!important; } /* Form labels were 12.5px; make them comfortable and consistent. */ body label, body .comment-form label, body .buzz-form label{ font-size:var(--buzz-ui)!important; line-height:1.5!important; font-weight:700!important; } /* Buttons, including 댓글 등록 */ body button, body .button, body .wp-element-button, body input[type="submit"], body .comment-form input[type="submit"], body .form-submit .submit, body .buzz-read-button, body .buzz-pink-button{ font-size:var(--buzz-ui)!important; line-height:1.2!important; font-weight:800!important; } /* Tags / chips / tiny links: stop using 11px. */ body .buzz-tag-box a, body .buzz-chips a, body .buzz-tag, body .buzz-chip, body .buzz-meta a, body .buzz-single-stats, body .buzz-single-meta-row, body time, body .entry-date, body .post-date{ font-size:var(--buzz-small)!important; } /* Card excerpts should not drop to 13px. */ body .post-card p, body .compact-card p, body .buzz-story-card p, body .buzz-related-card p, body .buzz-card-excerpt{ font-size:var(--buzz-body)!important; line-height:1.65!important; } /* Recommendation / previous-next titles: use H3-like scale rather than arbitrary anchor size. */ body .buzz-related-section a:not(.buzz-more), body .buzz-article-post-nav a strong, body .buzz-article-post-nav .post-title{ font-size:var(--buzz-h3)!important; line-height:1.35!important; font-weight:750!important; } /* Keep utility links compact but readable. */ body .buzz-more, body .buzz-article-post-nav > a, body .buzz-breadcrumbs a, body .buzz-single-breadcrumbs a{ font-size:var(--buzz-small)!important; } /* ---------- Preserve intentional magazine styles ---------- */ .is-style-buzz-magazine-body{font-size:15px!important;line-height:1.85!important} .is-style-buzz-magazine-lead{font-size:21px!important;line-height:1.7!important} .is-style-buzz-magazine-number{font-size:32px!important;line-height:1!important} .is-style-buzz-magazine-handwriting{font-size:34px!important;line-height:1.18!important} /* ---------- Mobile ---------- */ @media(max-width:640px){ body main h1, body .buzz-main h1, body .buzz-page-content h1, body .buzz-category-content h1, body .buzz-search-content h1, body .buzz-single-content h1, body .article-content h1, body .buzz-single-title, body .buzz-search-title, body .buzz-category-title, body .buzz-page-title, body .buzz-hero-copy h1, body .hero-main h1, .editor-styles-wrapper h1{ font-size:var(--buzz-h1-m)!important; font-weight:750!important; } body main h2, body .buzz-main h2, body .buzz-page-content h2, body .buzz-category-content h2, body .buzz-search-content h2, body .buzz-single-content h2, body .article-content h2, body .buzz-section-head h2, body .buzz-side-copy h2, body .buzz-widget-head h2, body .buzz-mini-head h2, body .buzz-special-copy h2, .editor-styles-wrapper h2{ font-size:var(--buzz-h2-m)!important; font-weight:750!important; } body main h3, body .buzz-main h3, body .buzz-page-content h3, body .buzz-category-content h3, body .buzz-search-content h3, body .buzz-single-content h3, body .article-content h3, .editor-styles-wrapper h3{ font-size:var(--buzz-h3-m)!important; font-weight:700!important; } body main h4, body .buzz-main h4, body .buzz-page-content h4, body .buzz-category-content h4, body .buzz-search-content h4, body .buzz-single-content h4, body .article-content h4, .editor-styles-wrapper h4{ font-size:var(--buzz-h4-m)!important; } body main h5, body .buzz-main h5, body .buzz-page-content h5, body .buzz-category-content h5, body .buzz-search-content h5, body .buzz-single-content h5, body .article-content h5, .editor-styles-wrapper h5{ font-size:var(--buzz-h5-m)!important; } body main h6, body .buzz-main h6, body .buzz-page-content h6, body .buzz-category-content h6, body .buzz-search-content h6, body .buzz-single-content h6, body .article-content h6, .editor-styles-wrapper h6{ font-size:var(--buzz-h6-m)!important; } body main p, body main li, body .buzz-main p, body .buzz-main li, body .buzz-page-content p, body .buzz-page-content li, body .buzz-category-content p, body .buzz-category-content li, body .buzz-search-content p, body .buzz-search-content li, body .buzz-single-content p, body .buzz-single-content li, body .article-content p, body .article-content li, .editor-styles-wrapper p, .editor-styles-wrapper li{ font-size:var(--buzz-body-m)!important; line-height:1.75!important; } body .buzz-single-subtitle, body .buzz-search-subtitle, body .buzz-category-intro-copy p, body .buzz-search-hero p{ font-size:var(--buzz-subtitle-m)!important; } body label, body .comment-form label, body .buzz-form label, body button, body .button, body .wp-element-button, body input[type="submit"], body .comment-form input[type="submit"], body .form-submit .submit, body .buzz-read-button, body .buzz-pink-button{ font-size:var(--buzz-ui-m)!important; } body .buzz-tag-box a, body .buzz-chips a, body .buzz-tag, body .buzz-chip, body .buzz-meta a, body .buzz-single-stats, body .buzz-single-meta-row, body time, body .entry-date, body .post-date, body .buzz-more, body .buzz-breadcrumbs a, body .buzz-single-breadcrumbs a{ font-size:var(--buzz-small-m)!important; } body .post-card p, body .compact-card p, body .buzz-story-card p, body .buzz-related-card p, body .buzz-card-excerpt{ font-size:var(--buzz-body-m)!important; } body .buzz-related-section a:not(.buzz-more), body .buzz-article-post-nav a strong, body .buzz-article-post-nav .post-title{ font-size:var(--buzz-h3-m)!important; } .is-style-buzz-magazine-body{font-size:15px!important} .is-style-buzz-magazine-lead{font-size:18px!important} .is-style-buzz-magazine-number{font-size:28px!important} .is-style-buzz-magazine-handwriting{font-size:29px!important} } /* v1.3.86 - enforce unified main-page H1 size over legacy hero rules */ body.home .buzz-hero-main .buzz-hero-copy h1, body.home .hero-main .buzz-hero-copy h1, body.home .buzz-hero-copy h1, body.home main h1{ font-size:32px!important; font-weight:800!important; line-height:1.22!important; letter-spacing:-.035em!important; } /* Keep home H2/H3 aligned to the unified scale as well */ body.home main h2, body.home .buzz-section-head h2, body.home .buzz-side-copy h2, body.home .buzz-special-copy h2{ font-size:26px!important; font-weight:800!important; line-height:1.3!important; } body.home main h3, body.home .post-card h3, body.home .buzz-story-card h3{ font-size:22px!important; font-weight:750!important; line-height:1.34!important; } @media(max-width:640px){ body.home .buzz-hero-main .buzz-hero-copy h1, body.home .hero-main .buzz-hero-copy h1, body.home .buzz-hero-copy h1, body.home main h1{ font-size:28px!important; font-weight:750!important; } body.home main h2, body.home .buzz-section-head h2, body.home .buzz-side-copy h2, body.home .buzz-special-copy h2{ font-size:24px!important; font-weight:750!important; } body.home main h3, body.home .post-card h3, body.home .buzz-story-card h3{ font-size:20px!important; font-weight:700!important; } } /* v1.3.87 - enforce unified hero paragraph typography over legacy 14px rule */ body.home .buzz-hero-main .buzz-hero-copy p, body.home .hero-main .buzz-hero-copy p, body.home .buzz-hero-copy p{ font-size:17px!important; line-height:1.68!important; font-weight:400!important; letter-spacing:-.012em!important; color:rgba(255,255,255,.92)!important; } @media(max-width:640px){ body.home .buzz-hero-main .buzz-hero-copy p, body.home .hero-main .buzz-hero-copy p, body.home .buzz-hero-copy p{ font-size:16px!important; line-height:1.65!important; } } /* v1.3.88 - unify legacy card/excerpt paragraph sizes */ body .post-card p, body .compact-card p, body .buzz-story-card p, body .buzz-related-card p, body .buzz-card-excerpt, body .buzz-main-card p, body .buzz-list-card p, body .buzz-feature-card p, body .buzz-latest-card p, body .buzz-ranking-card p, body .buzz-category-card p, body .buzz-search-card p, body .buzz-recommend-card p, body .buzz-related-item p, body .buzz-post-excerpt{ font-size:17px!important; line-height:1.65!important; font-weight:400!important; letter-spacing:-.012em!important; } /* Small meta/date text stays compact; only descriptive copy is normalized. */ body .post-card .post-date, body .compact-card .post-date, body .buzz-story-card .post-date, body .buzz-related-card .post-date, body .buzz-card-meta, body .buzz-card-date{ font-size:14px!important; line-height:1.45!important; } @media(max-width:640px){ body .post-card p, body .compact-card p, body .buzz-story-card p, body .buzz-related-card p, body .buzz-card-excerpt, body .buzz-main-card p, body .buzz-list-card p, body .buzz-feature-card p, body .buzz-latest-card p, body .buzz-ranking-card p, body .buzz-category-card p, body .buzz-search-card p, body .buzz-recommend-card p, body .buzz-related-item p, body .buzz-post-excerpt{ font-size:16px!important; line-height:1.65!important; } body .post-card .post-date, body .compact-card .post-date, body .buzz-story-card .post-date, body .buzz-related-card .post-date, body .buzz-card-meta, body .buzz-card-date{ font-size:13px!important; } } /* v1.3.89 - hard override all legacy descriptive paragraph sizes Legacy category/home/search rules still contained 11~14px !important values. Descriptive copy now follows the unified 17px / 16px scale. */ /* Home */ body.home .buzz-hero-copy p, body.home .buzz-side-copy p, body.home .buzz-story-card > a > p, body.home .buzz-story-card p, body.home .buzz-special-copy p, body.home .buzz-popup-copy p, body.home .buzz-newsletter p, /* Category / sub pages */ body:not(.home) .buzz-category-intro-copy p, body:not(.home) .buzz-category-hero-copy p, body:not(.home) .buzz-category-featured-copy p, body:not(.home) .buzz-category-side-stories p, body:not(.home) .buzz-category-editor-card p, body:not(.home) .buzz-category-latest-grid p, /* Search */ body.search .buzz-search-hero-copy p, body.search .buzz-search-empty-copy p, body.search .buzz-category-featured-copy p, body.search .buzz-category-side-stories p, body.search .buzz-category-editor-card p, body.search .buzz-category-latest-grid p, /* Common cards */ body .post-card p, body .compact-card p, body .buzz-card-excerpt, body .buzz-post-excerpt, body .buzz-main-card p, body .buzz-list-card p, body .buzz-feature-card p, body .buzz-latest-card p, body .buzz-category-card p, body .buzz-search-card p, body .buzz-recommend-card p, body .buzz-related-item p{ font-size:17px!important; line-height:1.65!important; font-weight:400!important; letter-spacing:-.012em!important; } /* Explicitly neutralize the old category type variable that was 13px. */ :root{ --bk-cat-body:17px!important; } @media(max-width:1200px){ :root{ --bk-cat-body:17px!important; } } @media(max-width:767px){ :root{ --bk-cat-body:16px!important; } } @media(max-width:640px){ body.home .buzz-hero-copy p, body.home .buzz-side-copy p, body.home .buzz-story-card > a > p, body.home .buzz-story-card p, body.home .buzz-special-copy p, body.home .buzz-popup-copy p, body.home .buzz-newsletter p, body:not(.home) .buzz-category-intro-copy p, body:not(.home) .buzz-category-hero-copy p, body:not(.home) .buzz-category-featured-copy p, body:not(.home) .buzz-category-side-stories p, body:not(.home) .buzz-category-editor-card p, body:not(.home) .buzz-category-latest-grid p, body.search .buzz-search-hero-copy p, body.search .buzz-search-empty-copy p, body.search .buzz-category-featured-copy p, body.search .buzz-category-side-stories p, body.search .buzz-category-editor-card p, body.search .buzz-category-latest-grid p, body .post-card p, body .compact-card p, body .buzz-card-excerpt, body .buzz-post-excerpt, body .buzz-main-card p, body .buzz-list-card p, body .buzz-feature-card p, body .buzz-latest-card p, body .buzz-category-card p, body .buzz-search-card p, body .buzz-recommend-card p, body .buzz-related-item p{ font-size:16px!important; line-height:1.65!important; } } /* Metadata remains intentionally smaller than descriptive text. */ body .meta, body .buzz-meta-date, body .buzz-related-compact-meta, body .post-date, body .buzz-card-meta, body .buzz-card-date{ font-size:14px!important; } @media(max-width:640px){ body .meta, body .buzz-meta-date, body .buzz-related-compact-meta, body .post-date, body .buzz-card-meta, body .buzz-card-date{ font-size:13px!important; } } /* v1.3.90 - global typography reset */ :root{ --buzz-h2:28px!important; --buzz-h3:20px!important; --buzz-body:14px!important; --buzz-subtitle:14px!important; --buzz-h2-m:28px!important; --buzz-h3-m:20px!important; --buzz-body-m:14px!important; --buzz-subtitle-m:14px!important; --bk-cat-body:14px!important; } /* H2 */ body main h2, body .buzz-main h2, body .buzz-page-content h2, body .buzz-category-content h2, body .buzz-search-content h2, body .buzz-single-content h2, body .article-content h2, body .buzz-section-head h2, body .buzz-side-copy h2, body .buzz-widget-head h2, body .buzz-mini-head h2, body .buzz-special-copy h2, .editor-styles-wrapper h2{ font-size:28px!important; } /* H3 */ body main h3, body .buzz-main h3, body .buzz-page-content h3, body .buzz-category-content h3, body .buzz-search-content h3, body .buzz-single-content h3, body .article-content h3, body .post-card h3, body .buzz-story-card h3, body .buzz-related-card h3, .editor-styles-wrapper h3{ font-size:20px!important; } /* P / body copy */ body main p, body .buzz-main p, body .buzz-page-content p, body .buzz-category-content p, body .buzz-search-content p, body .buzz-single-content p, body .article-content p, body .post-card p, body .compact-card p, body .buzz-story-card p, body .buzz-related-card p, body .buzz-card-excerpt, body .buzz-post-excerpt, body .buzz-main-card p, body .buzz-list-card p, body .buzz-feature-card p, body .buzz-latest-card p, body .buzz-ranking-card p, body .buzz-category-card p, body .buzz-search-card p, body .buzz-recommend-card p, body .buzz-related-item p, body .buzz-category-intro-copy p, body .buzz-category-hero-copy p, body .buzz-category-featured-copy p, body .buzz-category-side-stories p, body .buzz-category-editor-card p, body .buzz-category-latest-grid p, body .buzz-search-hero-copy p, body .buzz-search-empty-copy p, body .buzz-hero-copy p, body .buzz-side-copy p, body .buzz-special-copy p, body .buzz-popup-copy p, body .buzz-newsletter p, body .buzz-single-subtitle, .editor-styles-wrapper p{ font-size:14px!important; } /* Lists follow body */ body main li, body .buzz-single-content li, body .article-content li, .editor-styles-wrapper li{ font-size:14px!important; } /* Keep intentional magazine specialty styles separate */ body .is-style-buzz-magazine-body, .editor-styles-wrapper .is-style-buzz-magazine-body{font-size:15px!important} body .is-style-buzz-magazine-lead, .editor-styles-wrapper .is-style-buzz-magazine-lead{font-size:21px!important} body .is-style-buzz-magazine-number, .editor-styles-wrapper .is-style-buzz-magazine-number{font-size:32px!important} body .is-style-buzz-magazine-handwriting, .editor-styles-wrapper .is-style-buzz-magazine-handwriting{font-size:34px!important} /* Same requested sizes on mobile */ @media(max-width:640px){ body main h2, body .buzz-main h2, body .buzz-page-content h2, body .buzz-category-content h2, body .buzz-search-content h2, body .buzz-single-content h2, body .article-content h2, body .buzz-section-head h2, body .buzz-side-copy h2, body .buzz-widget-head h2, body .buzz-mini-head h2, body .buzz-special-copy h2, .editor-styles-wrapper h2{font-size:28px!important} body main h3, body .buzz-main h3, body .buzz-page-content h3, body .buzz-category-content h3, body .buzz-search-content h3, body .buzz-single-content h3, body .article-content h3, body .post-card h3, body .buzz-story-card h3, body .buzz-related-card h3, .editor-styles-wrapper h3{font-size:20px!important} body main p, body .buzz-main p, body .buzz-page-content p, body .buzz-category-content p, body .buzz-search-content p, body .buzz-single-content p, body .article-content p, body .post-card p, body .compact-card p, body .buzz-story-card p, body .buzz-related-card p, body .buzz-card-excerpt, body .buzz-post-excerpt, body .buzz-main-card p, body .buzz-list-card p, body .buzz-feature-card p, body .buzz-latest-card p, body .buzz-ranking-card p, body .buzz-category-card p, body .buzz-search-card p, body .buzz-recommend-card p, body .buzz-related-item p, body .buzz-category-intro-copy p, body .buzz-category-hero-copy p, body .buzz-category-featured-copy p, body .buzz-category-side-stories p, body .buzz-category-editor-card p, body .buzz-category-latest-grid p, body .buzz-search-hero-copy p, body .buzz-search-empty-copy p, body .buzz-hero-copy p, body .buzz-side-copy p, body .buzz-special-copy p, body .buzz-popup-copy p, body .buzz-newsletter p, body .buzz-single-subtitle, body main li, body .buzz-single-content li, body .article-content li, .editor-styles-wrapper p, .editor-styles-wrapper li{font-size:14px!important} } /* v1.3.91 - hard typography reset with ID-level specificity Fixes legacy class-based !important sizes that overrode v1.3.90. */ /* H2 */ html body :is(#__buzz_typography_override__, h2){ font-size:28px!important; } /* H3 */ html body :is(#__buzz_typography_override__, h3){ font-size:20px!important; } /* All ordinary paragraphs */ html body :is(#__buzz_typography_override__, p){ font-size:14px!important; } /* Lists follow body copy */ html body :is(#__buzz_typography_override__, li){ font-size:14px!important; } /* Explicitly restore intentional magazine specialty sizes after the global reset */ html body .is-style-buzz-magazine-body{ font-size:15px!important; } html body .is-style-buzz-magazine-lead{ font-size:21px!important; } html body .is-style-buzz-magazine-number{ font-size:32px!important; } html body .is-style-buzz-magazine-handwriting{ font-size:34px!important; } /* Gutenberg editor canvas */ html body .editor-styles-wrapper :is(#__buzz_editor_typography_override__, h2){ font-size:28px!important; } html body .editor-styles-wrapper :is(#__buzz_editor_typography_override__, h3){ font-size:20px!important; } html body .editor-styles-wrapper :is(#__buzz_editor_typography_override__, p){ font-size:14px!important; } html body .editor-styles-wrapper :is(#__buzz_editor_typography_override__, li){ font-size:14px!important; } /* Same scale on mobile */ @media(max-width:640px){ html body :is(#__buzz_typography_override__, h2){ font-size:28px!important; } html body :is(#__buzz_typography_override__, h3){ font-size:20px!important; } html body :is(#__buzz_typography_override__, p), html body :is(#__buzz_typography_override__, li){ font-size:14px!important; } html body .is-style-buzz-magazine-body{ font-size:15px!important; } html body .is-style-buzz-magazine-lead{ font-size:18px!important; } html body .is-style-buzz-magazine-number{ font-size:28px!important; } html body .is-style-buzz-magazine-handwriting{ font-size:29px!important; } } /* v1.3.92 - requested typography adjustments */ /* inline links */ html body .buzz-inline-link{ font-size:13px!important; } /* single subtitle */ html body .buzz-single-subtitle{ font-size:17px!important; } /* Gutenberg paragraph blocks */ html body .wp-block-paragraph, html body .buzz-single-content .wp-block-paragraph, html body .article-content .wp-block-paragraph, html body .editor-styles-wrapper .wp-block-paragraph{ font-size:17px!important; line-height:1.75!important; } /* tag box and section head are now H3 semantically */ html body .buzz-tag-box h3, html body .buzz-section-head h3{ font-size:20px!important; font-weight:750!important; line-height:1.35!important; letter-spacing:-.025em!important; } /* right sidebar headings should stay compact */ html body .buzz-single-sidebar h2, html body .buzz-single-sidebar .buzz-widget h2, html body .buzz-single-sidebar .buzz-widget-head h2{ font-size:20px!important; font-weight:750!important; line-height:1.35!important; letter-spacing:-.025em!important; } @media(max-width:640px){ html body .buzz-inline-link{ font-size:13px!important; } html body .buzz-single-subtitle{ font-size:17px!important; } html body .wp-block-paragraph, html body .buzz-single-content .wp-block-paragraph, html body .article-content .wp-block-paragraph, html body .editor-styles-wrapper .wp-block-paragraph{ font-size:17px!important; } html body .buzz-tag-box h3, html body .buzz-section-head h3, html body .buzz-single-sidebar h2, html body .buzz-single-sidebar .buzz-widget h2, html body .buzz-single-sidebar .buzz-widget-head h2{ font-size:20px!important; } } /* v1.3.93 - single page body text must be 17px */ html body.single :is(#__buzz_single_text_override__, .buzz-single-content) p, html body.single :is(#__buzz_single_text_override__, .article-content) p, html body.single :is(#__buzz_single_text_override__, .entry-content) p, html body.single :is(#__buzz_single_text_override__, .buzz-single-subtitle){ font-size:17px!important; } /* Gutenberg paragraphs on the front-end are usually plain
, not necessarily .wp-block-paragraph */ html body.single :is(#__buzz_single_text_override__, .buzz-single-content) > p, html body.single :is(#__buzz_single_text_override__, .buzz-single-content) .wp-block-paragraph, html body.single :is(#__buzz_single_text_override__, .article-content) .wp-block-paragraph{ font-size:17px!important; line-height:1.75!important; } /* Preserve intentionally different magazine paragraph styles */ html body.single .is-style-buzz-magazine-body{ font-size:15px!important; } html body.single .is-style-buzz-magazine-lead{ font-size:21px!important; } html body.single .is-style-buzz-magazine-handwriting{ font-size:34px!important; } /* Editor preview */ html body .editor-styles-wrapper :is(#__buzz_editor_single_text_override__, p){ font-size:17px!important; } html body .editor-styles-wrapper .is-style-buzz-magazine-body{ font-size:15px!important; } html body .editor-styles-wrapper .is-style-buzz-magazine-lead{ font-size:21px!important; } @media(max-width:640px){ html body.single :is(#__buzz_single_text_override__, .buzz-single-content) p, html body.single :is(#__buzz_single_text_override__, .article-content) p, html body.single :is(#__buzz_single_text_override__, .entry-content) p, html body.single :is(#__buzz_single_text_override__, .buzz-single-subtitle), html body.single :is(#__buzz_single_text_override__, .buzz-single-content) > p, html body.single :is(#__buzz_single_text_override__, .buzz-single-content) .wp-block-paragraph{ font-size:17px!important; } html body.single .is-style-buzz-magazine-body{ font-size:15px!important; } html body.single .is-style-buzz-magazine-lead{ font-size:18px!important; } html body.single .is-style-buzz-magazine-handwriting{ font-size:29px!important; } } /* v1.3.94 - restore magazine caption/kicker and refine single UI typography */ /* Magazine image caption: restore original compact size */ html body.single .buzz-single-content :is(#__buzz_mag_caption_override__, .buzz-mag-caption), html body .editor-styles-wrapper :is(#__buzz_mag_caption_editor_override__, .buzz-mag-caption){ margin:7px 0 0!important; font-size:12px!important; line-height:1.45!important; color:var(--muted,#6b7280)!important; text-align:right!important; font-weight:400!important; } /* Magazine section kicker: restore original magazine scale */ html body.single .buzz-single-content :is(#__buzz_mag_kicker_override__, .buzz-mag-section-kicker), html body .editor-styles-wrapper :is(#__buzz_mag_kicker_editor_override__, .buzz-mag-section-kicker){ margin:0 0 8px!important; color:var(--buzz-pink,#ff168d)!important; font-size:30px!important; line-height:1!important; font-weight:900!important; letter-spacing:-.03em!important; } /* TOC title should visually match 핵심 정리 title */ html body.single .buzz-floating-head > span:first-child{ font-size:20px!important; line-height:1.3!important; font-weight:900!important; letter-spacing:-.02em!important; color:var(--text,#16181d)!important; } /* Breadcrumb readability */ html body.single .buzz-single-breadcrumbs, html body.single .buzz-single-breadcrumbs a, html body.single .buzz-single-breadcrumbs span{ font-size:14px!important; line-height:1.4!important; } /* Keep category flag compact but readable */ html body.single .buzz-single-breadcrumbs .buzz-single-top-cat{ font-size:14px!important; } @media(max-width:640px){ /* Original mobile kicker size */ html body.single .buzz-single-content :is(#__buzz_mag_kicker_override__, .buzz-mag-section-kicker), html body .editor-styles-wrapper :is(#__buzz_mag_kicker_editor_override__, .buzz-mag-section-kicker){ font-size:22px!important; } html body.single .buzz-single-content :is(#__buzz_mag_caption_override__, .buzz-mag-caption), html body .editor-styles-wrapper :is(#__buzz_mag_caption_editor_override__, .buzz-mag-caption){ font-size:12px!important; } /* 핵심 정리 title is 16px on mobile, so TOC title matches it */ html body.single .buzz-floating-head > span:first-child{ font-size:16px!important; } html body.single .buzz-single-breadcrumbs, html body.single .buzz-single-breadcrumbs a, html body.single .buzz-single-breadcrumbs span, html body.single .buzz-single-breadcrumbs .buzz-single-top-cat{ font-size:14px!important; } } /* v1.3.95 - single bottom modules styled like editorial reference */ /* ---------- Related tags ---------- */ html body.single .buzz-tag-box{ margin:34px 0 18px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } html body.single .buzz-tag-box h3{ display:flex!important; align-items:center!important; gap:8px!important; margin:0 0 12px!important; padding:0!important; font-size:16px!important; line-height:1.25!important; font-weight:800!important; color:#ff168d!important; border:0!important; } html body.single .buzz-tag-box h3::before{ content:""!important; width:16px!important; height:16px!important; flex:0 0 16px!important; display:inline-block!important; background:#ff168d!important; clip-path:polygon(0 25%,25% 0,100% 0,100% 75%,75% 100%,0 25%)!important; border-radius:2px!important; } html body.single .buzz-tag-list{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:8px!important; } html body.single .buzz-tag-list a{ display:inline-flex!important; align-items:center!important; min-height:30px!important; padding:5px 12px!important; border:0!important; border-radius:999px!important; background:#f3f3f5!important; box-shadow:none!important; color:#777!important; font-size:13px!important; line-height:1.2!important; font-weight:600!important; text-decoration:none!important; } html body.single .buzz-tag-list a:hover{ background:#ececef!important; color:#ff168d!important; } /* ---------- Previous / next post ---------- */ html body.single .buzz-article-post-nav{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; margin:18px 0 32px!important; padding:0!important; overflow:hidden!important; border:1px solid #e7e7eb!important; border-radius:8px!important; background:#fff!important; box-shadow:none!important; } html body.single .buzz-article-post-nav .article-post-nav-item{ position:relative!important; display:flex!important; flex-direction:column!important; justify-content:center!important; min-height:82px!important; padding:16px 44px 16px 54px!important; border:0!important; border-radius:0!important; background:transparent!important; color:#333!important; text-decoration:none!important; box-shadow:none!important; } html body.single .buzz-article-post-nav .article-post-nav-item + .article-post-nav-item{ border-left:1px solid #e7e7eb!important; } html body.single .buzz-article-post-nav .article-post-nav-label{ display:block!important; margin:0 0 4px!important; color:#777!important; font-size:13px!important; line-height:1.2!important; font-weight:700!important; } html body.single .buzz-article-post-nav strong{ display:block!important; overflow:hidden!important; color:#444!important; font-size:15px!important; line-height:1.35!important; font-weight:700!important; white-space:nowrap!important; text-overflow:ellipsis!important; } html body.single .buzz-article-post-nav .article-post-nav-prev::before, html body.single .buzz-article-post-nav .article-post-nav-next::after{ position:absolute!important; top:50%!important; width:12px!important; height:12px!important; border-top:2px solid #8c8c92!important; border-right:2px solid #8c8c92!important; content:""!important; } html body.single .buzz-article-post-nav .article-post-nav-prev::before{ left:22px!important; transform:translateY(-50%) rotate(-135deg)!important; } html body.single .buzz-article-post-nav .article-post-nav-next{ padding-left:44px!important; padding-right:54px!important; text-align:right!important; } html body.single .buzz-article-post-nav .article-post-nav-next::after{ right:22px!important; transform:translateY(-50%) rotate(45deg)!important; } /* ---------- Recommended content heading ---------- */ html body.single .buzz-related-section-compact{ margin:0 0 34px!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; } html body.single .buzz-related-section-compact .buzz-section-head{ display:flex!important; align-items:center!important; justify-content:space-between!important; min-height:28px!important; margin:0 0 14px!important; padding:0!important; border:0!important; } html body.single .buzz-related-section-compact .buzz-section-head h3{ position:relative!important; margin:0!important; padding-left:18px!important; color:#202124!important; font-size:18px!important; line-height:1.25!important; font-weight:850!important; } html body.single .buzz-related-section-compact .buzz-section-head h3::before{ content:""!important; position:absolute!important; left:0!important; top:50%!important; width:4px!important; height:20px!important; border-radius:3px!important; background:#ff168d!important; transform:translateY(-50%)!important; } html body.single .buzz-related-section-compact .buzz-section-head > a{ position:relative!important; padding-right:15px!important; color:#aaa!important; font-size:12px!important; line-height:1!important; font-weight:600!important; text-decoration:none!important; } html body.single .buzz-related-section-compact .buzz-section-head > a::after{ content:""!important; position:absolute!important; right:2px!important; top:50%!important; width:7px!important; height:7px!important; border-top:1.5px solid currentColor!important; border-right:1.5px solid currentColor!important; transform:translateY(-50%) rotate(45deg)!important; } /* ---------- Recommended cards ---------- */ html body.single .buzz-related-compact-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:14px!important; } html body.single .buzz-related-compact-card{ display:grid!important; grid-template-columns:114px minmax(0,1fr)!important; min-width:0!important; min-height:112px!important; overflow:hidden!important; border:1px solid #e8e8ec!important; border-radius:8px!important; background:#fff!important; box-shadow:none!important; } html body.single .buzz-related-compact-thumb{ display:block!important; width:114px!important; height:100%!important; min-height:112px!important; overflow:hidden!important; background:#f3f3f5!important; } html body.single .buzz-related-compact-thumb img, html body.single .buzz-related-compact-thumb .thumb-placeholder{ width:100%!important; height:100%!important; object-fit:cover!important; border-radius:0!important; } html body.single .buzz-related-compact-body{ display:flex!important; flex-direction:column!important; justify-content:center!important; min-width:0!important; padding:12px 12px!important; } html body.single .buzz-related-compact-body h3{ display:-webkit-box!important; overflow:hidden!important; margin:0 0 10px!important; color:#333!important; font-size:14px!important; line-height:1.45!important; font-weight:750!important; -webkit-line-clamp:2!important; -webkit-box-orient:vertical!important; } html body.single .buzz-related-compact-body h3 a{ color:inherit!important; font-size:inherit!important; text-decoration:none!important; } html body.single .buzz-related-compact-meta{ color:#999!important; font-size:12px!important; line-height:1.2!important; } /* Small pink category pill before date when a card has a category/label element */ html body.single .buzz-related-compact-card .buzz-related-category, html body.single .buzz-related-compact-card .buzz-card-cat{ display:inline-flex!important; align-items:center!important; width:max-content!important; margin:0 7px 0 0!important; padding:3px 8px!important; border:1px solid #ff8bc3!important; border-radius:999px!important; color:#ff168d!important; font-size:11px!important; line-height:1.1!important; font-weight:700!important; background:#fff!important; } /* Dark mode */ body.dark-mode.single .buzz-article-post-nav, body.dark-mode.single .buzz-related-compact-card{ border-color:#34343a!important; background:#18181b!important; } body.dark-mode.single .buzz-article-post-nav .article-post-nav-item + .article-post-nav-item{ border-left-color:#34343a!important; } body.dark-mode.single .buzz-article-post-nav strong, body.dark-mode.single .buzz-related-compact-body h3, body.dark-mode.single .buzz-related-section-compact .buzz-section-head h3{ color:#f4f4f5!important; } body.dark-mode.single .buzz-tag-list a{ background:#26262b!important; color:#b7b7bd!important; } /* Mobile */ @media(max-width:767px){ html body.single .buzz-tag-box{ margin-top:28px!important; } html body.single .buzz-article-post-nav{ grid-template-columns:1fr!important; } html body.single .buzz-article-post-nav .article-post-nav-item + .article-post-nav-item{ border-left:0!important; border-top:1px solid #e7e7eb!important; } html body.single .buzz-article-post-nav .article-post-nav-item{ min-height:72px!important; } html body.single .buzz-related-compact-grid{ grid-template-columns:1fr!important; gap:10px!important; } html body.single .buzz-related-compact-card{ grid-template-columns:110px minmax(0,1fr)!important; min-height:100px!important; } html body.single .buzz-related-compact-thumb{ width:110px!important; min-height:100px!important; } } /* v1.3.96 - related tags: compact single-line editorial style */ html body.single .buzz-tag-box{ display:flex!important; align-items:center!important; gap:14px!important; margin:28px 0 18px!important; padding:0!important; min-width:0!important; overflow:hidden!important; } /* compact pink label */ html body.single .buzz-tag-box h3{ flex:0 0 auto!important; display:inline-flex!important; align-items:center!important; gap:7px!important; margin:0!important; padding:0!important; font-size:14px!important; line-height:30px!important; font-weight:800!important; letter-spacing:-.02em!important; white-space:nowrap!important; color:#ff168d!important; } /* price-tag icon, closer to reference */ html body.single .buzz-tag-box h3::before{ content:""!important; position:relative!important; display:inline-block!important; width:16px!important; height:13px!important; flex:0 0 16px!important; background:#ff168d!important; border-radius:2px 3px 3px 2px!important; clip-path:polygon(0 50%,31% 0,100% 0,100% 100%,31% 100%)!important; transform:none!important; } html body.single .buzz-tag-box h3::after{ content:""!important; position:absolute!important; width:3px!important; height:3px!important; margin-left:5px!important; border-radius:50%!important; background:#fff!important; transform:translateY(0)!important; } /* tags stay on one line */ html body.single .buzz-tag-list{ flex:1 1 auto!important; display:flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:7px!important; min-width:0!important; overflow-x:auto!important; overflow-y:hidden!important; scrollbar-width:none!important; -webkit-overflow-scrolling:touch!important; } html body.single .buzz-tag-list::-webkit-scrollbar{ display:none!important; } html body.single .buzz-tag-list a{ flex:0 0 auto!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:28px!important; padding:5px 11px!important; margin:0!important; border:0!important; border-radius:999px!important; background:#f1f1f3!important; color:#777!important; font-size:12px!important; line-height:1!important; font-weight:600!important; letter-spacing:-.015em!important; white-space:nowrap!important; text-decoration:none!important; box-shadow:none!important; } /* dark mode */ body.dark-mode.single .buzz-tag-list a{ background:#28282d!important; color:#b9b9bf!important; } /* mobile remains one horizontal line and can scroll sideways */ @media(max-width:640px){ html body.single .buzz-tag-box{ gap:10px!important; margin-top:24px!important; } html body.single .buzz-tag-box h3{ font-size:13px!important; line-height:28px!important; } html body.single .buzz-tag-list{ gap:6px!important; } html body.single .buzz-tag-list a{ min-height:26px!important; padding:4px 10px!important; font-size:12px!important; } } /* v1.3.97 - related tags wrap + rotated reference-style tag icon */ html body.single .buzz-tag-box{ align-items:flex-start!important; overflow:visible!important; } /* allow wrapping when there are many tags */ html body.single .buzz-tag-list{ flex:1 1 0!important; display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:7px!important; min-width:0!important; overflow:visible!important; } /* rotated price-tag icon closer to reference */ html body.single .buzz-tag-box h3{ position:relative!important; } html body.single .buzz-tag-box h3::before{ width:15px!important; height:15px!important; flex-basis:15px!important; border-radius:2px!important; clip-path:polygon(0 28%,28% 0,100% 0,100% 72%,72% 100%,0 28%)!important; transform:rotate(-45deg)!important; transform-origin:center!important; } html body.single .buzz-tag-box h3::after{ width:3px!important; height:3px!important; margin-left:4px!important; margin-top:-1px!important; border-radius:50%!important; background:#fff!important; transform:rotate(-45deg)!important; } /* keep compact chip sizing */ html body.single .buzz-tag-list a{ font-size:12px!important; min-height:28px!important; padding:5px 11px!important; } @media(max-width:640px){ html body.single .buzz-tag-list{ flex-wrap:wrap!important; overflow:visible!important; } html body.single .buzz-tag-list a{ font-size:12px!important; min-height:26px!important; padding:4px 10px!important; } } /* v1.3.98 - refine related-tag icon to match reference tag shape */ html body.single .buzz-tag-box h3{ position:relative!important; display:inline-flex!important; align-items:center!important; gap:10px!important; } html body.single .buzz-tag-box h3::before{ content:""!important; position:relative!important; display:inline-block!important; width:14px!important; height:14px!important; flex:0 0 14px!important; background:#ff168d!important; border-radius:2px!important; clip-path:polygon(0 36%,36% 0,100% 0,100% 64%,64% 100%,0 36%)!important; transform:rotate(-45deg)!important; transform-origin:center!important; box-shadow:none!important; } html body.single .buzz-tag-box h3::after{ content:""!important; position:absolute!important; left:9px!important; top:50%!important; width:3px!important; height:3px!important; margin:0!important; border-radius:50%!important; background:#ffffff!important; transform:translateY(-50%)!important; } @media(max-width:640px){ html body.single .buzz-tag-box h3{ gap:9px!important; } html body.single .buzz-tag-box h3::before{ width:13px!important; height:13px!important; flex-basis:13px!important; } html body.single .buzz-tag-box h3::after{ left:8px!important; width:3px!important; height:3px!important; } } /* v1.3.99 - related tag icon uses rectangular proportions */ html body.single .buzz-tag-box h3::before{ width:18px!important; height:12px!important; flex:0 0 18px!important; border-radius:2px!important; clip-path:polygon(0 50%,30% 0,100% 0,100% 100%,30% 100%)!important; transform:rotate(-45deg)!important; transform-origin:center!important; } /* reposition the small hole for the wider tag shape */ html body.single .buzz-tag-box h3::after{ left:10px!important; top:50%!important; width:3px!important; height:3px!important; margin:0!important; transform:translateY(-50%)!important; } @media(max-width:640px){ html body.single .buzz-tag-box h3::before{ width:17px!important; height:11px!important; flex-basis:17px!important; } html body.single .buzz-tag-box h3::after{ left:9px!important; } } /* v1.3.100 - mobile related tags match compact reference layout */ @media(max-width:640px){ html body.single .buzz-tag-box{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:10px 10px!important; margin:24px 0 18px!important; padding:0!important; overflow:visible!important; } html body.single .buzz-tag-box h3{ flex:0 0 auto!important; display:inline-flex!important; align-items:center!important; gap:10px!important; margin:0!important; padding:0!important; font-size:15px!important; line-height:1.1!important; white-space:nowrap!important; } html body.single .buzz-tag-box h3::before{ width:17px!important; height:11px!important; flex:0 0 17px!important; } html body.single .buzz-tag-box h3::after{ left:9px!important; width:3px!important; height:3px!important; } html body.single .buzz-tag-list{ display:contents!important; } html body.single .buzz-tag-list a{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:34px!important; padding:0 14px!important; margin:0!important; border:0!important; border-radius:999px!important; background:#f3f3f5!important; color:#7c8391!important; font-size:12px!important; line-height:34px!important; font-weight:700!important; white-space:nowrap!important; box-shadow:none!important; } html body.single .buzz-tag-list a:hover{ color:#ff168d!important; } } /* v1.3.101 - smaller related-tag chip text */ html body.single .buzz-tag-list a{ font-size:11px!important; line-height:1.15!important; font-weight:650!important; } @media(max-width:640px){ html body.single .buzz-tag-list a{ font-size:11px!important; min-height:32px!important; padding:0 12px!important; line-height:32px!important; } } /* v1.3.102 - force related tag chip text to 12px */ html body.single .buzz-tag-box .buzz-tag-list > a, html body.single :is(#__buzz_related_tag_size_override__, .buzz-tag-box) .buzz-tag-list > a{ font-size:12px!important; font-weight:600!important; line-height:1.15!important; } @media(max-width:640px){ html body.single .buzz-tag-box .buzz-tag-list > a, html body.single :is(#__buzz_related_tag_size_override__, .buzz-tag-box) .buzz-tag-list > a{ font-size:12px!important; min-height:32px!important; padding:0 12px!important; line-height:32px!important; } } /* v1.3.103 - align recommended-content borders with prev/next module */ html body.single .buzz-related-section-compact{ border:0!important; border-radius:0!important; box-shadow:none!important; background:transparent!important; } html body.single .buzz-related-compact-grid{ align-items:stretch!important; } html body.single .buzz-related-compact-card{ border:1px solid #e7e7eb!important; border-radius:8px!important; background:#fff!important; box-shadow:none!important; overflow:hidden!important; min-height:112px!important; height:100%!important; } html body.single .buzz-related-compact-card + .buzz-related-compact-card{ border-color:#e7e7eb!important; } html body.single .buzz-related-compact-thumb{ border:0!important; border-right:1px solid #eeeeF1!important; border-radius:0!important; } html body.single .buzz-related-compact-body{ border:0!important; background:transparent!important; } body.dark-mode.single .buzz-related-compact-card{ border-color:#34343a!important; background:#18181b!important; } body.dark-mode.single .buzz-related-compact-thumb{ border-right-color:#34343a!important; } @media(max-width:767px){ html body.single .buzz-related-compact-card{ min-height:100px!important; } } /* v1.3.104 - compact typography inside recommended content cards */ html body.single .buzz-related-compact-body h3, html body.single .buzz-related-compact-body h3 a{ font-size:12px!important; line-height:1.4!important; font-weight:700!important; letter-spacing:-.015em!important; } html body.single .buzz-related-compact-meta{ font-size:11px!important; line-height:1.2!important; font-weight:500!important; } html body.single .buzz-related-compact-card .buzz-related-category, html body.single .buzz-related-compact-card .buzz-card-cat{ font-size:10px!important; line-height:1.1!important; padding:3px 7px!important; } @media(max-width:767px){ html body.single .buzz-related-compact-body h3, html body.single .buzz-related-compact-body h3 a{ font-size:12px!important; } html body.single .buzz-related-compact-meta{ font-size:11px!important; } } /* v1.3.105 - compact recommended cards + force 15px card title */ /* reduce overall card height/empty space */ html body.single .buzz-related-section-compact .buzz-related-compact-card{ grid-template-columns:100px minmax(0,1fr)!important; min-height:92px!important; height:92px!important; } html body.single .buzz-related-section-compact .buzz-related-compact-thumb{ width:100px!important; min-height:92px!important; height:92px!important; border-right:1px solid #eeeeF1!important; } html body.single .buzz-related-section-compact .buzz-related-compact-thumb img, html body.single .buzz-related-section-compact .buzz-related-compact-thumb .thumb-placeholder{ width:100%!important; height:92px!important; object-fit:cover!important; } html body.single .buzz-related-section-compact .buzz-related-compact-body{ justify-content:center!important; padding:9px 12px!important; } /* v1.3.91 has an ID-specific global h3 rule, so beat it with ID-level specificity */ html body.single :is(#__buzz_related_title_override__, .buzz-related-section-compact) .buzz-related-compact-body h3, html body.single :is(#__buzz_related_title_override__, .buzz-related-section-compact) .buzz-related-compact-body h3 a{ margin:0 0 7px!important; font-size:15px!important; line-height:1.38!important; font-weight:700!important; letter-spacing:-.02em!important; } html body.single :is(#__buzz_related_meta_override__, .buzz-related-section-compact) .buzz-related-compact-meta{ margin:0!important; font-size:11px!important; line-height:1.2!important; font-weight:500!important; } /* slightly tighter gaps between cards */ html body.single .buzz-related-section-compact .buzz-related-compact-grid{ gap:12px!important; } @media(max-width:767px){ html body.single .buzz-related-section-compact .buzz-related-compact-card{ grid-template-columns:96px minmax(0,1fr)!important; min-height:88px!important; height:88px!important; } html body.single .buzz-related-section-compact .buzz-related-compact-thumb{ width:96px!important; min-height:88px!important; height:88px!important; } html body.single .buzz-related-section-compact .buzz-related-compact-thumb img, html body.single .buzz-related-section-compact .buzz-related-compact-thumb .thumb-placeholder{ height:88px!important; } html body.single .buzz-related-section-compact .buzz-related-compact-body{ padding:8px 11px!important; } html body.single :is(#__buzz_related_title_override__, .buzz-related-section-compact) .buzz-related-compact-body h3, html body.single :is(#__buzz_related_title_override__, .buzz-related-section-compact) .buzz-related-compact-body h3 a{ font-size:15px!important; margin-bottom:6px!important; } } /* v1.3.106 - recommended card date 12px + remove inner gap */ html body.single .buzz-related-section-compact .buzz-related-compact-card{ column-gap:0!important; row-gap:0!important; gap:0!important; } html body.single .buzz-related-section-compact .buzz-related-compact-body{ gap:0!important; } html body.single :is(#__buzz_related_meta_override__, .buzz-related-section-compact) .buzz-related-compact-meta{ font-size:12px!important; line-height:1.2!important; } @media(max-width:767px){ html body.single .buzz-related-section-compact .buzz-related-compact-card{ column-gap:0!important; row-gap:0!important; gap:0!important; } html body.single .buzz-related-section-compact .buzz-related-compact-body{ gap:0!important; } html body.single :is(#__buzz_related_meta_override__, .buzz-related-section-compact) .buzz-related-compact-meta{ font-size:12px!important; } } /* v1.3.107 - related tag font 13px + recommended more 13px */ html body.single .buzz-tag-box .buzz-tag-list > a, html body.single :is(#__buzz_related_tag_size_override__, .buzz-tag-box) .buzz-tag-list > a{ font-size:13px!important; } html body.single .buzz-related-section-compact .buzz-section-head > a, html body.single :is(#__buzz_related_more_override__, .buzz-related-section-compact) .buzz-section-head > a{ font-size:13px!important; } @media(max-width:640px){ html body.single .buzz-tag-box .buzz-tag-list > a, html body.single :is(#__buzz_related_tag_size_override__, .buzz-tag-box) .buzz-tag-list > a{ font-size:13px!important; } html body.single .buzz-related-section-compact .buzz-section-head > a, html body.single :is(#__buzz_related_more_override__, .buzz-related-section-compact) .buzz-section-head > a{ font-size:13px!important; } } /* v1.3.108 - single page bottom modules dark-mode fix Theme dark mode is driven by html[data-theme="dark"], so mirror the older body.dark-mode rules with the actual active selector. */ /* Related tags */ html[data-theme="dark"] body.single .buzz-tag-box{ background:transparent!important; border-color:transparent!important; } html[data-theme="dark"] body.single .buzz-tag-box h3{ color:#ff168d!important; } html[data-theme="dark"] body.single .buzz-tag-list a{ background:#242a33!important; border-color:#343c48!important; color:#c4cbd4!important; } html[data-theme="dark"] body.single .buzz-tag-list a:hover{ color:#ff5aaa!important; border-color:#ff168d!important; } /* Previous / next */ html[data-theme="dark"] body.single .buzz-article-post-nav{ background:#151b23!important; border-color:#2a3340!important; } html[data-theme="dark"] body.single .buzz-article-post-nav .article-post-nav-item{ background:transparent!important; color:#e6edf3!important; } html[data-theme="dark"] body.single .buzz-article-post-nav .article-post-nav-item + .article-post-nav-item{ border-left-color:#2a3340!important; } html[data-theme="dark"] body.single .buzz-article-post-nav .article-post-nav-label{ color:#9aa4b2!important; } html[data-theme="dark"] body.single .buzz-article-post-nav strong{ color:#e6edf3!important; } html[data-theme="dark"] body.single .buzz-article-post-nav .article-post-nav-prev::before, html[data-theme="dark"] body.single .buzz-article-post-nav .article-post-nav-next::after{ border-color:#9aa4b2!important; } /* Recommended section */ html[data-theme="dark"] body.single .buzz-related-section-compact{ background:transparent!important; border-color:transparent!important; } html[data-theme="dark"] body.single .buzz-related-section-compact .buzz-section-head h3{ color:#e6edf3!important; } html[data-theme="dark"] body.single .buzz-related-section-compact .buzz-section-head > a{ color:#aab3bf!important; } html[data-theme="dark"] body.single .buzz-related-compact-card{ background:#151b23!important; border-color:#2a3340!important; } html[data-theme="dark"] body.single .buzz-related-compact-thumb{ background:#202833!important; border-right-color:#2a3340!important; } html[data-theme="dark"] body.single .buzz-related-compact-thumb .thumb-placeholder{ background:#202833!important; } html[data-theme="dark"] body.single .buzz-related-compact-body{ background:#151b23!important; } html[data-theme="dark"] body.single .buzz-related-compact-body h3, html[data-theme="dark"] body.single .buzz-related-compact-body h3 a{ color:#e6edf3!important; } html[data-theme="dark"] body.single .buzz-related-compact-meta{ color:#9aa4b2!important; } /* Category pill inside recommended card, when present */ html[data-theme="dark"] body.single .buzz-related-compact-card .buzz-related-category, html[data-theme="dark"] body.single .buzz-related-compact-card .buzz-card-cat{ background:#151b23!important; color:#ff66ad!important; border-color:#ff66ad!important; } /* Mobile divider in dark mode */ @media(max-width:767px){ html[data-theme="dark"] body.single .buzz-article-post-nav .article-post-nav-item + .article-post-nav-item{ border-left:0!important; border-top-color:#2a3340!important; } } /* v1.3.109 - magazine sample/tip/note/summary border refinements */ /* Remove background from magazine sample photo placeholder */ html body .buzz-mag-sample-photo, html body.single .buzz-single-content .buzz-mag-sample-photo{ background:none!important; background-image:none!important; background-color:transparent!important; } /* Tip / Note boxes */ html body.single .buzz-single-content .buzz-mag-tip, html body.single .buzz-single-content .buzz-mag-note{ border:1px solid #2a3340!important; } /* Key summary box */ html body.single .buzz-summary-box{ border:1px solid #2a3340!important; } /* Dark mode keeps the same requested border */ html[data-theme="dark"] body.single .buzz-single-content .buzz-mag-tip, html[data-theme="dark"] body.single .buzz-single-content .buzz-mag-note, html[data-theme="dark"] body.single .buzz-summary-box{ border:1px solid #2a3340!important; } /* Gutenberg editor preview */ html body .editor-styles-wrapper .buzz-mag-sample-photo{ background:none!important; background-image:none!important; background-color:transparent!important; } html body .editor-styles-wrapper .buzz-mag-tip, html body .editor-styles-wrapper .buzz-mag-note, html body .editor-styles-wrapper .buzz-summary-box{ border:1px solid #2a3340!important; } /* v1.3.110 - transparent tip/note/summary backgrounds */ html body.single .buzz-single-content .buzz-mag-tip, html body.single .buzz-single-content .buzz-mag-note, html body.single .buzz-summary-box{ background:transparent!important; background-image:none!important; background-color:transparent!important; } /* Keep the requested border */ html body.single .buzz-single-content .buzz-mag-tip, html body.single .buzz-single-content .buzz-mag-note, html body.single .buzz-summary-box{ border:1px solid #2a3340!important; } /* Dark mode */ html[data-theme="dark"] body.single .buzz-single-content .buzz-mag-tip, html[data-theme="dark"] body.single .buzz-single-content .buzz-mag-note, html[data-theme="dark"] body.single .buzz-summary-box{ background:transparent!important; background-image:none!important; background-color:transparent!important; border:1px solid #2a3340!important; } /* Gutenberg editor preview */ html body .editor-styles-wrapper .buzz-mag-tip, html body .editor-styles-wrapper .buzz-mag-note, html body .editor-styles-wrapper .buzz-summary-box{ background:transparent!important; background-image:none!important; background-color:transparent!important; border:1px solid #2a3340!important; } /* v1.3.111 - summary/tip/note border color */ html body.single .buzz-single-content .buzz-mag-tip, html body.single .buzz-single-content .buzz-mag-note, html body.single .buzz-summary-box{ border:1px solid #e5e7eb!important; } /* Dark mode uses the same requested line color */ html[data-theme="dark"] body.single .buzz-single-content .buzz-mag-tip, html[data-theme="dark"] body.single .buzz-single-content .buzz-mag-note, html[data-theme="dark"] body.single .buzz-summary-box{ border:1px solid #e5e7eb!important; } /* Gutenberg editor preview */ html body .editor-styles-wrapper .buzz-mag-tip, html body .editor-styles-wrapper .buzz-mag-note, html body .editor-styles-wrapper .buzz-summary-box{ border:1px solid #e5e7eb!important; } /* v1.3.112 - light/dark border colors for summary/tip/note */ /* Light mode */ html body.single .buzz-single-content .buzz-mag-tip, html body.single .buzz-single-content .buzz-mag-note, html body.single .buzz-summary-box{ border:1px solid #e5e7eb!important; } /* Dark mode */ html[data-theme="dark"] body.single .buzz-single-content .buzz-mag-tip, html[data-theme="dark"] body.single .buzz-single-content .buzz-mag-note, html[data-theme="dark"] body.single .buzz-summary-box{ border:1px solid #2a3340!important; } /* Gutenberg editor preview */ html body .editor-styles-wrapper .buzz-mag-tip, html body .editor-styles-wrapper .buzz-mag-note, html body .editor-styles-wrapper .buzz-summary-box{ border:1px solid #e5e7eb!important; } /* v1.3.113 - restore category box heading to original compact size */ html body .buzz-category-box-head h2, html body .buzz-category-box-head h3{ font-size:15px!important; line-height:1.2!important; font-weight:900!important; letter-spacing:-.03em!important; } @media(max-width:767px){ html body .buzz-category-box-head h2, html body .buzz-category-box-head h3{ font-size:15px!important; } } /* v1.3.114 - hard restore category box heading size */ html body :is(#__buzz_category_box_head_override__, .buzz-category-box-head) h2, html body :is(#__buzz_category_box_head_override__, .buzz-category-box-head) h3{ font-size:15px!important; line-height:1.2!important; font-weight:900!important; letter-spacing:-.03em!important; } @media(max-width:767px){ html body :is(#__buzz_category_box_head_override__, .buzz-category-box-head) h2, html body :is(#__buzz_category_box_head_override__, .buzz-category-box-head) h3{ font-size:15px!important; } } /* v1.3.115 - restore single sidebar widget heading to compact size */ html body.single :is(#__buzz_widget_head_override__, .buzz-widget-head) h2, html body.single :is(#__buzz_widget_head_override__, .buzz-widget-head) h3, html body.single .buzz-single-sidebar :is(#__buzz_widget_head_override__, .buzz-widget-head) h2, html body.single .buzz-single-sidebar :is(#__buzz_widget_head_override__, .buzz-widget-head) h3{ font-size:15px!important; line-height:1.2!important; font-weight:900!important; letter-spacing:-.03em!important; } @media(max-width:767px){ html body.single :is(#__buzz_widget_head_override__, .buzz-widget-head) h2, html body.single :is(#__buzz_widget_head_override__, .buzz-widget-head) h3, html body.single .buzz-single-sidebar :is(#__buzz_widget_head_override__, .buzz-widget-head) h2, html body.single .buzz-single-sidebar :is(#__buzz_widget_head_override__, .buzz-widget-head) h3{ font-size:15px!important; } } /* v1.3.116 - category box / widget headings to 16px */ html body :is(#__buzz_category_box_head_override__, .buzz-category-box-head) h2, html body :is(#__buzz_category_box_head_override__, .buzz-category-box-head) h3{ font-size:16px!important; } html body.single :is(#__buzz_widget_head_override__, .buzz-widget-head) h2, html body.single :is(#__buzz_widget_head_override__, .buzz-widget-head) h3, html body.single .buzz-single-sidebar :is(#__buzz_widget_head_override__, .buzz-widget-head) h2, html body.single .buzz-single-sidebar :is(#__buzz_widget_head_override__, .buzz-widget-head) h3{ font-size:16px!important; } @media(max-width:767px){ html body :is(#__buzz_category_box_head_override__, .buzz-category-box-head) h2, html body :is(#__buzz_category_box_head_override__, .buzz-category-box-head) h3, html body.single :is(#__buzz_widget_head_override__, .buzz-widget-head) h2, html body.single :is(#__buzz_widget_head_override__, .buzz-widget-head) h3, html body.single .buzz-single-sidebar :is(#__buzz_widget_head_override__, .buzz-widget-head) h2, html body.single .buzz-single-sidebar :is(#__buzz_widget_head_override__, .buzz-widget-head) h3{ font-size:16px!important; } } /* v1.3.117 - related posts widget text size */ html body.single .buzz-single-sidebar .buzz-widget .related-posts a, html body.single .buzz-single-sidebar .buzz-widget .related-posts h3, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-list a, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-list h3, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-item a, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-item h3, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-item strong, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-posts a, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-posts h3{ font-size:14px!important; line-height:1.45!important; } /* Fallback for common sidebar list cards where titles are direct anchors/strong text */ html body.single .buzz-single-sidebar .buzz-widget ul li > a, html body.single .buzz-single-sidebar .buzz-widget ol li > a{ font-size:14px!important; line-height:1.45!important; } @media(max-width:767px){ html body.single .buzz-single-sidebar .buzz-widget .related-posts a, html body.single .buzz-single-sidebar .buzz-widget .related-posts h3, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-list a, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-list h3, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-item a, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-item h3, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-item strong, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-posts a, html body.single .buzz-single-sidebar .buzz-widget .buzz-related-posts h3, html body.single .buzz-single-sidebar .buzz-widget ul li > a, html body.single .buzz-single-sidebar .buzz-widget ol li > a{ font-size:14px!important; } } /* v1.3.118 - hard override sidebar related-post titles to 14px */ html body.single :is(#__buzz_mini_related_override__, .buzz-mini-related-widget) .buzz-mini-related-list article > div > a, html body.single :is(#__buzz_mini_related_override__, .buzz-mini-related-widget) .buzz-mini-related-list article a:not(.thumb){ font-size:14px!important; line-height:1.45!important; font-weight:800!important; letter-spacing:-.02em!important; } /* Ensure nested text inherits the same size if markup changes */ html body.single :is(#__buzz_mini_related_override__, .buzz-mini-related-widget) .buzz-mini-related-list article > div{ font-size:14px!important; line-height:1.45!important; } @media(max-width:767px){ html body.single :is(#__buzz_mini_related_override__, .buzz-mini-related-widget) .buzz-mini-related-list article > div > a, html body.single :is(#__buzz_mini_related_override__, .buzz-mini-related-widget) .buzz-mini-related-list article a:not(.thumb), html body.single :is(#__buzz_mini_related_override__, .buzz-mini-related-widget) .buzz-mini-related-list article > div{ font-size:14px!important; } } /* v1.3.120 - single bottom utility text to 14px */ /* Related tag chips */ html body.single :is(#__buzz_footer_tag_override__, .buzz-tag-box) .buzz-tag-list > a{ font-size:14px!important; line-height:1.15!important; } /* Previous / next labels */ html body.single :is(#__buzz_footer_nav_override__, .buzz-article-post-nav) .article-post-nav-label{ font-size:14px!important; line-height:1.2!important; } /* Recommended section "더보기" */ html body.single :is(#__buzz_footer_more_override__, .buzz-related-section-compact) .buzz-section-head > a{ font-size:14px!important; line-height:1.2!important; } @media(max-width:767px){ html body.single :is(#__buzz_footer_tag_override__, .buzz-tag-box) .buzz-tag-list > a, html body.single :is(#__buzz_footer_nav_override__, .buzz-article-post-nav) .article-post-nav-label, html body.single :is(#__buzz_footer_more_override__, .buzz-related-section-compact) .buzz-section-head > a{ font-size:14px!important; } } /* v1.3.121 - Buzz Pink accents for ranking + related posts */ /* WEEKLY RANKING title */ html body.single .buzz-single-sidebar :is(#__buzz_ranking_head_override__, .buzz-ranking-widget) .buzz-widget-head h2, html body.single .buzz-single-sidebar :is(#__buzz_ranking_head_override__, .buzz-ranking-widget) .buzz-widget-head h3{ color:var(--buzz-pink,#ff168d)!important; } /* Active ranking tab */ html body.single .buzz-single-sidebar :is(#__buzz_ranking_tab_override__, .buzz-ranking-widget) .buzz-ranking-tab.is-active{ background:var(--buzz-pink,#ff168d)!important; border-color:var(--buzz-pink,#ff168d)!important; color:#fff!important; } /* Related posts widget title */ html body.single .buzz-single-sidebar :is(#__buzz_related_head_override__, .buzz-mini-related-widget) .buzz-widget-head h2, html body.single .buzz-single-sidebar :is(#__buzz_related_head_override__, .buzz-mini-related-widget) .buzz-widget-head h3{ color:var(--buzz-pink,#ff168d)!important; } /* Dark mode keeps the same Buzz Pink accent */ html[data-theme="dark"] body.single .buzz-single-sidebar :is(#__buzz_ranking_head_override__, .buzz-ranking-widget) .buzz-widget-head h2, html[data-theme="dark"] body.single .buzz-single-sidebar :is(#__buzz_ranking_head_override__, .buzz-ranking-widget) .buzz-widget-head h3, html[data-theme="dark"] body.single .buzz-single-sidebar :is(#__buzz_related_head_override__, .buzz-mini-related-widget) .buzz-widget-head h2, html[data-theme="dark"] body.single .buzz-single-sidebar :is(#__buzz_related_head_override__, .buzz-mini-related-widget) .buzz-widget-head h3{ color:var(--buzz-pink,#ff168d)!important; } html[data-theme="dark"] body.single .buzz-single-sidebar :is(#__buzz_ranking_tab_override__, .buzz-ranking-widget) .buzz-ranking-tab.is-active{ background:var(--buzz-pink,#ff168d)!important; border-color:var(--buzz-pink,#ff168d)!important; color:#fff!important; } /* v1.3.122 - make single WEEKLY RANKING title match subpage category-box title */ html body.single .buzz-single-sidebar :is(#__buzz_ranking_match_override__, .buzz-ranking-widget) .buzz-widget-head h2, html body.single .buzz-single-sidebar :is(#__buzz_ranking_match_override__, .buzz-ranking-widget) .buzz-widget-head h3{ margin:0!important; color:var(--bk-pink,var(--buzz-pink,#ff168d))!important; font-size:16px!important; line-height:1.2!important; font-weight:900!important; letter-spacing:-.025em!important; } /* Same in dark mode */ html[data-theme="dark"] body.single .buzz-single-sidebar :is(#__buzz_ranking_match_override__, .buzz-ranking-widget) .buzz-widget-head h2, html[data-theme="dark"] body.single .buzz-single-sidebar :is(#__buzz_ranking_match_override__, .buzz-ranking-widget) .buzz-widget-head h3{ color:var(--bk-pink,var(--buzz-pink,#ff168d))!important; font-size:16px!important; line-height:1.2!important; font-weight:900!important; letter-spacing:-.025em!important; } @media(max-width:767px){ html body.single .buzz-single-sidebar :is(#__buzz_ranking_match_override__, .buzz-ranking-widget) .buzz-widget-head h2, html body.single .buzz-single-sidebar :is(#__buzz_ranking_match_override__, .buzz-ranking-widget) .buzz-widget-head h3{ font-size:16px!important; } } /* v1.3.123 - global H3 typography override to 17px */ html body :is(#__buzz_typography_override__, h3){ font-size:17px!important; } @media(max-width:640px){ html body :is(#__buzz_typography_override__, h3){ font-size:17px!important; } } /* v1.3.124 - align sidebar related thumbnails to the top */ html body.single :is(#__buzz_mini_related_align_override__, .buzz-mini-related-widget) .buzz-mini-related-list article{ align-items:start!important; } html body.single :is(#__buzz_mini_related_align_override__, .buzz-mini-related-widget) .buzz-mini-related-list article > .thumb{ align-self:start!important; margin-top:0!important; } html body.single :is(#__buzz_mini_related_align_override__, .buzz-mini-related-widget) .buzz-mini-related-list article > div{ align-self:start!important; } /* v1.3.125 - category side story thumbnails align to the top */ html body :is(#__buzz_category_side_stories_override__, .buzz-category-side-stories) article{ align-items:start!important; } html body :is(#__buzz_category_side_stories_override__, .buzz-category-side-stories) .buzz-category-side-media, html body :is(#__buzz_category_side_stories_override__, .buzz-category-side-stories) .buzz-category-side-thumb, html body :is(#__buzz_category_side_stories_override__, .buzz-category-side-stories) article > a:first-child{ align-self:start!important; margin-top:0!important; } html body :is(#__buzz_category_side_stories_override__, .buzz-category-side-stories) .buzz-category-side-media img, html body :is(#__buzz_category_side_stories_override__, .buzz-category-side-stories) .buzz-category-side-thumb img, html body :is(#__buzz_category_side_stories_override__, .buzz-category-side-stories) .thumb-placeholder{ display:block!important; object-position:center top!important; } @media(max-width:767px){ html body :is(#__buzz_category_side_stories_override__, .buzz-category-side-stories) article{ align-items:start!important; } html body :is(#__buzz_category_side_stories_override__, .buzz-category-side-stories) .buzz-category-side-media, html body :is(#__buzz_category_side_stories_override__, .buzz-category-side-stories) .buzz-category-side-thumb, html body :is(#__buzz_category_side_stories_override__, .buzz-category-side-stories) article > a:first-child{ align-self:start!important; margin-top:0!important; } } /* v1.3.126 - category side story description single line */ html body :is(#__buzz_category_side_desc_override__, .buzz-category-side-stories) article p{ display:block!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; -webkit-line-clamp:unset!important; -webkit-box-orient:unset!important; max-height:none!important; } @media(max-width:767px){ html body :is(#__buzz_category_side_desc_override__, .buzz-category-side-stories) article p{ white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } } /* v1.3.127 - five category side stories */ html body .buzz-category-side-stories{ gap:0!important; } html body .buzz-category-side-stories article{ padding-top:14px!important; padding-bottom:14px!important; } html body .buzz-category-side-stories article:first-child{ padding-top:0!important; } html body .buzz-category-side-stories article:last-child{ padding-bottom:0!important; } /* v1.3.128 - confirm five visible category/search side stories */ html body .buzz-category-side-stories article{ align-items:start!important; } /* v1.3.129 - tighten vertical spacing in category side stories */ html body .buzz-category-side-stories{ gap:0!important; } html body .buzz-category-side-stories article{ padding-top:8px!important; padding-bottom:8px!important; } html body .buzz-category-side-stories article:first-child{ padding-top:0!important; } html body .buzz-category-side-stories article:last-child{ padding-bottom:0!important; } html body .buzz-category-side-stories article h3{ margin-top:0!important; margin-bottom:4px!important; } html body .buzz-category-side-stories article p{ margin-top:0!important; margin-bottom:4px!important; } html body .buzz-category-side-stories article .meta{ margin-top:0!important; } @media(max-width:767px){ html body .buzz-category-side-stories article{ padding-top:6px!important; padding-bottom:6px!important; } } /* v1.3.130 - normalize visible content image ratios across views */ /* 1) Large hero / featured media: 16:9 */ html body .buzz-hero-main, html body .buzz-category-featured-media, html body .buzz-search-feature-grid .buzz-category-featured-media, html body .hero-main .media{ aspect-ratio:16/9!important; height:auto!important; overflow:hidden!important; } html body .buzz-hero-main img, html body .buzz-category-featured-media img, html body .buzz-category-featured-media .thumb-placeholder, html body .buzz-search-feature-grid .buzz-category-featured-media img, html body .buzz-search-feature-grid .buzz-category-featured-media .thumb-placeholder, html body .hero-main .media img, html body .hero-main .media .thumb-placeholder{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; display:block!important; } /* 2) Standard cards / side stories / related cards: consistent 4:3 */ html body .buzz-category-side-media, html body .buzz-category-side-thumb, html body .buzz-category-grid-media, html body .buzz-category-editor-media, html body .compact-thumb, html body .buzz-related-compact-thumb, html body .buzz-mini-related-list .thumb, html body .post-card .media, html body .buzz-story-card .media, html body .buzz-main-card .media, html body .buzz-list-card .media, html body .buzz-feature-card .media, html body .buzz-latest-card .media, html body .buzz-search-card .media, html body .buzz-category-card .media{ aspect-ratio:4/3!important; height:auto!important; min-height:0!important; overflow:hidden!important; } html body .buzz-category-side-media img, html body .buzz-category-side-media .thumb-placeholder, html body .buzz-category-side-thumb img, html body .buzz-category-side-thumb .thumb-placeholder, html body .buzz-category-grid-media img, html body .buzz-category-grid-media .thumb-placeholder, html body .buzz-category-editor-media img, html body .buzz-category-editor-media .thumb-placeholder, html body .compact-thumb img, html body .compact-thumb .thumb-placeholder, html body .buzz-related-compact-thumb img, html body .buzz-related-compact-thumb .thumb-placeholder, html body .buzz-mini-related-list .thumb img, html body .buzz-mini-related-list .thumb .thumb-placeholder, html body .post-card .media img, html body .post-card .media .thumb-placeholder, html body .buzz-story-card .media img, html body .buzz-story-card .media .thumb-placeholder, html body .buzz-main-card .media img, html body .buzz-main-card .media .thumb-placeholder, html body .buzz-list-card .media img, html body .buzz-list-card .media .thumb-placeholder, html body .buzz-feature-card .media img, html body .buzz-feature-card .media .thumb-placeholder, html body .buzz-latest-card .media img, html body .buzz-latest-card .media .thumb-placeholder, html body .buzz-search-card .media img, html body .buzz-search-card .media .thumb-placeholder, html body .buzz-category-card .media img, html body .buzz-category-card .media .thumb-placeholder{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; display:block!important; } /* 3) Ranking thumbnails: square */ html body .rank-thumb, html body .buzz-ranking-thumb, html body .buzz-ranking-list .thumb{ aspect-ratio:1/1!important; height:auto!important; overflow:hidden!important; } html body .rank-thumb img, html body .rank-thumb .thumb-placeholder, html body .buzz-ranking-thumb img, html body .buzz-ranking-thumb .thumb-placeholder, html body .buzz-ranking-list .thumb img, html body .buzz-ranking-list .thumb .thumb-placeholder{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; } /* 4) Single article featured image: 16:9 */ html body.single .buzz-single-hero, html body.single .buzz-single-featured-image{ aspect-ratio:16/9!important; height:auto!important; overflow:hidden!important; } html body.single .buzz-single-hero > img, html body.single .buzz-single-featured-image img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; display:block!important; } /* 5) Article body images keep their original ratio. Only make them fit the content width, no forced crop. */ html body.single .buzz-single-content img, html body.single .article-content img{ max-width:100%!important; height:auto!important; object-fit:contain!important; } /* 6) Mobile: preserve the same ratios so switching views does not change image proportions */ @media(max-width:767px){ html body .buzz-hero-main, html body .buzz-category-featured-media, html body .buzz-search-feature-grid .buzz-category-featured-media{ aspect-ratio:16/9!important; } html body .buzz-category-side-media, html body .buzz-category-side-thumb, html body .buzz-category-grid-media, html body .buzz-category-editor-media, html body .compact-thumb, html body .buzz-related-compact-thumb, html body .buzz-mini-related-list .thumb{ aspect-ratio:4/3!important; } } /* v1.3.131 - unify visible images to 4:3 + single featured image lightbox */ /* 1) All main visible media boxes use 4:3 */ html body .buzz-hero-main, html body .buzz-category-featured-media, html body .buzz-search-feature-grid .buzz-category-featured-media, html body .hero-main .media, html body .buzz-category-side-media, html body .buzz-category-side-thumb, html body .buzz-category-grid-media, html body .buzz-category-editor-media, html body .compact-thumb, html body .buzz-related-compact-thumb, html body .buzz-mini-related-list .thumb, html body .post-card .media, html body .buzz-story-card .media, html body .buzz-main-card .media, html body .buzz-list-card .media, html body .buzz-feature-card .media, html body .buzz-latest-card .media, html body .buzz-search-card .media, html body .buzz-category-card .media, html body .rank-thumb, html body .buzz-ranking-thumb, html body .buzz-ranking-list .thumb, html body.single .buzz-single-hero, html body.single .buzz-single-featured-image, html body .buzz-recommend-card-thumb, html body .buzz-related-card-thumb, html body .buzz-editor-pick-thumb, html body .buzz-promo-thumb, html body .buzz-category-side-stories .buzz-story-thumb, html body .buzz-category-side-stories .buzz-story-media{ aspect-ratio:4/3 !important; height:auto !important; min-height:0 !important; overflow:hidden !important; } /* 2) Images inside those boxes fill consistently */ html body .buzz-hero-main img, html body .buzz-category-featured-media img, html body .buzz-search-feature-grid .buzz-category-featured-media img, html body .hero-main .media img, html body .buzz-category-side-media img, html body .buzz-category-side-thumb img, html body .buzz-category-grid-media img, html body .buzz-category-editor-media img, html body .compact-thumb img, html body .buzz-related-compact-thumb img, html body .buzz-mini-related-list .thumb img, html body .post-card .media img, html body .buzz-story-card .media img, html body .buzz-main-card .media img, html body .buzz-list-card .media img, html body .buzz-feature-card .media img, html body .buzz-latest-card .media img, html body .buzz-search-card .media img, html body .buzz-category-card .media img, html body .rank-thumb img, html body .buzz-ranking-thumb img, html body .buzz-ranking-list .thumb img, html body.single .buzz-single-hero > img, html body.single .buzz-single-featured-image img, html body .buzz-recommend-card-thumb img, html body .buzz-related-card-thumb img, html body .buzz-editor-pick-thumb img, html body .buzz-promo-thumb img, html body .buzz-category-side-stories .buzz-story-thumb img, html body .buzz-category-side-stories .buzz-story-media img, html body .buzz-hero-main .thumb-placeholder, html body .buzz-category-featured-media .thumb-placeholder, html body .buzz-search-feature-grid .buzz-category-featured-media .thumb-placeholder, html body .hero-main .media .thumb-placeholder, html body .buzz-category-side-media .thumb-placeholder, html body .buzz-category-side-thumb .thumb-placeholder, html body .buzz-category-grid-media .thumb-placeholder, html body .buzz-category-editor-media .thumb-placeholder, html body .compact-thumb .thumb-placeholder, html body .buzz-related-compact-thumb .thumb-placeholder, html body .buzz-mini-related-list .thumb .thumb-placeholder, html body .post-card .media .thumb-placeholder, html body .buzz-story-card .media .thumb-placeholder, html body .buzz-main-card .media .thumb-placeholder, html body .buzz-list-card .media .thumb-placeholder, html body .buzz-feature-card .media .thumb-placeholder, html body .buzz-latest-card .media .thumb-placeholder, html body .buzz-search-card .media .thumb-placeholder, html body .buzz-category-card .media .thumb-placeholder, html body .rank-thumb .thumb-placeholder, html body .buzz-ranking-thumb .thumb-placeholder, html body .buzz-ranking-list .thumb .thumb-placeholder, html body .buzz-recommend-card-thumb .thumb-placeholder, html body .buzz-related-card-thumb .thumb-placeholder, html body .buzz-editor-pick-thumb .thumb-placeholder, html body .buzz-promo-thumb .thumb-placeholder, html body .buzz-category-side-stories .buzz-story-thumb .thumb-placeholder, html body .buzz-category-side-stories .buzz-story-media .thumb-placeholder{ width:100% !important; height:100% !important; display:block !important; object-fit:cover !important; object-position:center !important; } /* 3) Keep article body images natural */ html body.single .buzz-single-content img, html body.single .article-content img{ max-width:100% !important; height:auto !important; } /* 4) Single featured image click UX */ html body.single .buzz-single-hero img, html body.single .buzz-single-featured-image img{ cursor:zoom-in; } /* 5) Lightbox styles */ #buzz-image-lightbox{ position:fixed; inset:0; background:rgba(10,14,20,.88); display:none; align-items:center; justify-content:center; padding:24px; z-index:99999; } #buzz-image-lightbox.is-open{ display:flex; } #buzz-image-lightbox img{ max-width:min(96vw,1600px); max-height:92vh; width:auto; height:auto; display:block; border-radius:0; box-shadow:none; background:transparent; } #buzz-image-lightbox-close{ position:absolute; top:16px; right:18px; width:40px; height:40px; border:0; background:transparent; color:#fff; font-size:34px; line-height:1; cursor:pointer; padding:0; } body.buzz-lightbox-open{ overflow:hidden; } /* v1.3.132 - orientation-aware fitting in fixed 4:3 frames */ html body .buzz-hero-main, html body .buzz-category-featured-media, html body .buzz-search-feature-grid .buzz-category-featured-media, html body .hero-main .media, html body .buzz-category-side-media, html body .buzz-category-side-thumb, html body .buzz-category-grid-media, html body .buzz-category-editor-media, html body .compact-thumb, html body .buzz-related-compact-thumb, html body .buzz-mini-related-list .thumb, html body .post-card .media, html body .buzz-story-card .media, html body .buzz-main-card .media, html body .buzz-list-card .media, html body .buzz-feature-card .media, html body .buzz-latest-card .media, html body .buzz-search-card .media, html body .buzz-category-card .media, html body .rank-thumb, html body .buzz-ranking-thumb, html body .buzz-ranking-list .thumb, html body.single .buzz-single-hero, html body.single .buzz-single-featured-image{ aspect-ratio:4/3!important; overflow:hidden!important; display:flex!important; align-items:center!important; justify-content:center!important; background:#f1f2f4!important; } html body img.is-buzz-landscape{ width:100%!important; height:auto!important; max-height:100%!important; object-fit:contain!important; object-position:center!important; } html body img.is-buzz-portrait{ width:auto!important; height:100%!important; max-width:100%!important; object-fit:contain!important; object-position:center!important; } html body img.is-buzz-square{ width:100%!important; height:100%!important; object-fit:contain!important; object-position:center!important; } html body .thumb-placeholder{ width:100%!important; height:100%!important; display:block!important; } html body.single .buzz-single-content img, html body.single .article-content img{ max-width:100%!important; height:auto!important; object-fit:contain!important; } html[data-theme="dark"] body .buzz-hero-main, html[data-theme="dark"] body .buzz-category-featured-media, html[data-theme="dark"] body .buzz-category-side-media, html[data-theme="dark"] body .buzz-category-grid-media, html[data-theme="dark"] body .buzz-category-editor-media, html[data-theme="dark"] body .buzz-related-compact-thumb, html[data-theme="dark"] body .buzz-mini-related-list .thumb, html[data-theme="dark"] body.single .buzz-single-hero, html[data-theme="dark"] body.single .buzz-single-featured-image{ background:#202833!important; } /* v1.3.133 - single page orientation-aware media + centered images */ /* Single featured image frame: fixed 4:3, centered */ html body.single .buzz-single-hero, html body.single .buzz-single-featured-image{ aspect-ratio:4/3!important; overflow:hidden!important; display:flex!important; align-items:center!important; justify-content:center!important; background:#f1f2f4!important; } /* Featured image orientation handling */ html body.single .buzz-single-hero > img.is-buzz-landscape, html body.single .buzz-single-featured-image img.is-buzz-landscape{ width:100%!important; height:auto!important; max-height:100%!important; object-fit:contain!important; object-position:center center!important; margin:0 auto!important; } html body.single .buzz-single-hero > img.is-buzz-portrait, html body.single .buzz-single-featured-image img.is-buzz-portrait{ width:auto!important; height:100%!important; max-width:100%!important; object-fit:contain!important; object-position:center center!important; margin:0 auto!important; } html body.single .buzz-single-hero > img.is-buzz-square, html body.single .buzz-single-featured-image img.is-buzz-square{ width:100%!important; height:100%!important; object-fit:contain!important; object-position:center center!important; margin:0 auto!important; } /* Article body images: center-align without forcing crop */ html body.single .buzz-single-content img, html body.single .article-content img, html body.single .wp-block-image img{ display:block!important; max-width:100%!important; height:auto!important; margin-left:auto!important; margin-right:auto!important; object-position:center center!important; } /* Gutenberg image block itself centered */ html body.single .buzz-single-content .wp-block-image, html body.single .article-content .wp-block-image{ text-align:center!important; } /* Dark mode */ html[data-theme="dark"] body.single .buzz-single-hero, html[data-theme="dark"] body.single .buzz-single-featured-image{ background:#202833!important; } /* v1.3.134 - fix home hero image centering and orientation-aware sizing */ /* Keep the article itself as a normal block. The media link owns the 4:3 frame. */ html body.home .buzz-hero-main{ display:block!important; aspect-ratio:auto!important; min-height:0!important; background:#f1f2f4!important; } html body.home .buzz-hero-main .buzz-hero-media{ position:relative!important; width:100%!important; aspect-ratio:4/3!important; height:auto!important; min-height:0!important; overflow:hidden!important; display:flex!important; align-items:center!important; justify-content:center!important; background:#f1f2f4!important; } /* Remove the old 420px forced image sizing */ html body.home .buzz-hero-main .buzz-hero-media > img{ min-height:0!important; max-width:100%!important; max-height:100%!important; display:block!important; object-position:center center!important; margin:auto!important; flex:none!important; } /* Landscape = width fixed */ html body.home .buzz-hero-main .buzz-hero-media > img.is-buzz-landscape{ width:100%!important; height:auto!important; object-fit:contain!important; } /* Portrait = height fixed */ html body.home .buzz-hero-main .buzz-hero-media > img.is-buzz-portrait{ width:auto!important; height:100%!important; object-fit:contain!important; } /* Square = centered inside frame */ html body.home .buzz-hero-main .buzz-hero-media > img.is-buzz-square{ width:100%!important; height:100%!important; object-fit:contain!important; } /* Placeholder fills the complete 4:3 area */ html body.home .buzz-hero-main .buzz-hero-media > .buzz-image-placeholder, html body.home .buzz-hero-main .buzz-hero-media > .thumb-placeholder{ width:100%!important; height:100%!important; min-height:0!important; } /* Right-side BUZZ NOW media also uses the same centered 4:3 logic */ html body.home .buzz-hero-side-card .buzz-side-media{ aspect-ratio:4/3!important; width:100%!important; height:auto!important; overflow:hidden!important; display:flex!important; align-items:center!important; justify-content:center!important; background:#f1f2f4!important; } html body.home .buzz-hero-side-card .buzz-side-media > img{ max-width:100%!important; max-height:100%!important; display:block!important; object-position:center center!important; margin:auto!important; flex:none!important; } html body.home .buzz-hero-side-card .buzz-side-media > img.is-buzz-landscape{ width:100%!important; height:auto!important; object-fit:contain!important; } html body.home .buzz-hero-side-card .buzz-side-media > img.is-buzz-portrait{ width:auto!important; height:100%!important; object-fit:contain!important; } html body.home .buzz-hero-side-card .buzz-side-media > img.is-buzz-square{ width:100%!important; height:100%!important; object-fit:contain!important; } html[data-theme="dark"] body.home .buzz-hero-main, html[data-theme="dark"] body.home .buzz-hero-main .buzz-hero-media, html[data-theme="dark"] body.home .buzz-hero-side-card .buzz-side-media{ background:#202833!important; } /* v1.3.137 - CSS-only image fitting to avoid first-paint/reflow issues * All card/featured media frames remain 4:3. * Images are centered with object-fit: contain. * No JS orientation classes are required. */ /* Stable 4:3 media frames */ html body .buzz-hero-main .buzz-hero-media, html body .buzz-side-media, html body .buzz-category-featured-media, html body .buzz-search-feature-grid .buzz-category-featured-media, html body .hero-main .media, html body .buzz-category-side-media, html body .buzz-category-side-thumb, html body .buzz-category-grid-media, html body .buzz-category-editor-media, html body .compact-thumb, html body .buzz-related-compact-thumb, html body .buzz-mini-related-list .thumb, html body .post-card .media, html body .buzz-story-card .media, html body .buzz-main-card .media, html body .buzz-list-card .media, html body .buzz-feature-card .media, html body .buzz-latest-card .media, html body .buzz-search-card .media, html body .buzz-category-card .media, html body .rank-thumb, html body .buzz-ranking-thumb, html body .buzz-ranking-list .thumb, html body.single .buzz-single-hero, html body.single .buzz-single-featured-image{ position:relative!important; width:100%!important; aspect-ratio:4/3!important; height:auto!important; min-height:0!important; overflow:hidden!important; display:flex!important; align-items:center!important; justify-content:center!important; background:#f1f2f4!important; } /* All card/featured images use the same browser-native fitting rule */ html body .buzz-hero-main .buzz-hero-media > img, html body .buzz-side-media > img, html body .buzz-category-featured-media img, html body .buzz-search-feature-grid .buzz-category-featured-media img, html body .hero-main .media img, html body .buzz-category-side-media img, html body .buzz-category-side-thumb img, html body .buzz-category-grid-media img, html body .buzz-category-editor-media img, html body .compact-thumb img, html body .buzz-related-compact-thumb img, html body .buzz-mini-related-list .thumb img, html body .post-card .media img, html body .buzz-story-card .media img, html body .buzz-main-card .media img, html body .buzz-list-card .media img, html body .buzz-feature-card .media img, html body .buzz-latest-card .media img, html body .buzz-search-card .media img, html body .buzz-category-card .media img, html body .rank-thumb img, html body .buzz-ranking-thumb img, html body .buzz-ranking-list .thumb img, html body.single .buzz-single-hero > img, html body.single .buzz-single-featured-image img{ display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; margin:auto!important; object-fit:contain!important; object-position:center center!important; } /* Old orientation classes must not change dimensions anymore */ html body img.is-buzz-landscape, html body img.is-buzz-portrait, html body img.is-buzz-square{ width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; object-position:center center!important; } /* Placeholder occupies the exact same frame */ html body .thumb-placeholder, html body .buzz-image-placeholder{ width:100%!important; height:100%!important; min-height:0!important; display:block!important; } /* Article body images are natural-ratio and centered */ html body.single .buzz-single-content img, html body.single .article-content img, html body.single .wp-block-image img{ display:block!important; width:auto!important; max-width:100%!important; height:auto!important; max-height:none!important; margin-left:auto!important; margin-right:auto!important; object-fit:contain!important; object-position:center center!important; } html body.single .buzz-single-content .wp-block-image, html body.single .article-content .wp-block-image{ text-align:center!important; } /* Dark mode media frame */ html[data-theme="dark"] body .buzz-hero-main .buzz-hero-media, html[data-theme="dark"] body .buzz-side-media, html[data-theme="dark"] body .buzz-category-featured-media, html[data-theme="dark"] body .buzz-category-side-media, html[data-theme="dark"] body .buzz-category-grid-media, html[data-theme="dark"] body .buzz-category-editor-media, html[data-theme="dark"] body .buzz-related-compact-thumb, html[data-theme="dark"] body .buzz-mini-related-list .thumb, html[data-theme="dark"] body.single .buzz-single-hero, html[data-theme="dark"] body.single .buzz-single-featured-image{ background:#202833!important; } /* v1.3.142 - homepage feature module images: preserve full image ratio * SPECIAL FEATURE / POP-UP CALENDAR / BUZZ VIDEO * Keep the media frame stable, but never crop the source image. */ html body .buzz-home .buzz-special-media, html body .buzz-home .buzz-popup-media, html body .buzz-home .buzz-video-card > div{ position:relative!important; overflow:hidden!important; display:flex!important; align-items:center!important; justify-content:center!important; background:#f1f2f4!important; } /* Use a consistent 4:3 visual frame for these editorial images. */ html body .buzz-home .buzz-special-media, html body .buzz-home .buzz-popup-media, html body .buzz-home .buzz-video-card > div{ aspect-ratio:4/3!important; min-height:0!important; height:auto!important; } /* Show the complete source image without trimming edges. */ html body .buzz-home .buzz-special-media img, html body .buzz-home .buzz-popup-media img, html body .buzz-home .buzz-video-card > div > img{ display:block!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; object-position:center center!important; margin:auto!important; } /* Placeholder fills the same frame. */ html body .buzz-home .buzz-special-media .buzz-image-placeholder, html body .buzz-home .buzz-special-media .thumb-placeholder, html body .buzz-home .buzz-popup-media .buzz-image-placeholder, html body .buzz-home .buzz-popup-media .thumb-placeholder, html body .buzz-home .buzz-video-card > div .buzz-image-placeholder, html body .buzz-home .buzz-video-card > div .thumb-placeholder{ width:100%!important; height:100%!important; min-height:0!important; } /* Dark mode neutral frame background. */ html[data-theme="dark"] body .buzz-home .buzz-special-media, html[data-theme="dark"] body .buzz-home .buzz-popup-media, html[data-theme="dark"] body .buzz-home .buzz-video-card > div{ background:#202833!important; } /* v1.3.143 - home feature media: true 4:3 box without grid stretching * SPECIAL FEATURE / POP-UP CALENDAR / BUZZ VIDEO */ /* Keep the content + media columns, but do not stretch media vertically. */ html body .buzz-home .buzz-special-card > a, html body .buzz-home .buzz-popup-inner{ align-items:center!important; } /* A true 4:3 media box. Grid stretch must not override this size. */ html body .buzz-home .buzz-special-media, html body .buzz-home .buzz-popup-media, html body .buzz-home .buzz-video-card > div{ position:relative!important; width:100%!important; aspect-ratio:4/3!important; height:auto!important; min-height:0!important; max-height:none!important; align-self:center!important; justify-self:stretch!important; overflow:hidden!important; display:flex!important; align-items:center!important; justify-content:center!important; background:#f1f2f4!important; } /* Never crop the source. The whole 4:3 image stays visible. */ html body .buzz-home .buzz-special-media > img, html body .buzz-home .buzz-popup-media > img, html body .buzz-home .buzz-video-card > div > img{ position:static!important; inset:auto!important; display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; margin:auto!important; object-fit:contain!important; object-position:50% 50%!important; transform:none!important; } /* Neutral bars, if the source is not exactly 4:3. */ html body .buzz-home .buzz-special-media .buzz-image-placeholder, html body .buzz-home .buzz-popup-media .buzz-image-placeholder, html body .buzz-home .buzz-video-card > div .buzz-image-placeholder, html body .buzz-home .buzz-special-media .thumb-placeholder, html body .buzz-home .buzz-popup-media .thumb-placeholder, html body .buzz-home .buzz-video-card > div .thumb-placeholder{ width:100%!important; height:100%!important; min-height:0!important; } /* Mobile/tablet: keep the same full-image rule. */ @media(max-width:980px){ html body .buzz-home .buzz-special-media, html body .buzz-home .buzz-popup-media, html body .buzz-home .buzz-video-card > div{ width:100%!important; aspect-ratio:4/3!important; height:auto!important; min-height:0!important; } } html[data-theme="dark"] body .buzz-home .buzz-special-media, html[data-theme="dark"] body .buzz-home .buzz-popup-media, html[data-theme="dark"] body .buzz-home .buzz-video-card > div{ background:#202833!important; } /* v1.3.144 - tag/archive featured images: full image, no crop */ html body.tag .post-card .media, html body.archive .post-card .media, html body.tag .archive-card .media, html body.archive .archive-card .media{ width:100%!important; aspect-ratio:4/3!important; height:auto!important; min-height:0!important; overflow:hidden!important; display:flex!important; align-items:center!important; justify-content:center!important; background:#f1f2f4!important; } html body.tag .post-card .media>img, html body.archive .post-card .media>img, html body.tag .archive-card .media>img, html body.archive .archive-card .media>img{ display:block!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; object-position:center center!important; margin:auto!important; transform:none!important; } html body.tag .post-card .media .thumb-placeholder, html body.archive .post-card .media .thumb-placeholder, html body.tag .archive-card .media .thumb-placeholder, html body.archive .archive-card .media .thumb-placeholder{ width:100%!important; height:100%!important; min-height:0!important; } html[data-theme="dark"] body.tag .post-card .media, html[data-theme="dark"] body.archive .post-card .media, html[data-theme="dark"] body.tag .archive-card .media, html[data-theme="dark"] body.archive .archive-card .media{ background:#202833!important; } /* v1.3.155 - prevent mobile category/search intro title from clipping */ @media (max-width:480px){ body .buzz-category-intro-top.buzz-page-toolbar, body .buzz-search-controls.buzz-page-toolbar{ height:auto!important; min-height:64px!important; align-items:flex-start!important; padding:4px 0 0!important; overflow:visible!important; } body .buzz-page-toolbar-copy{ display:grid!important; grid-template-columns:max-content minmax(0,1fr)!important; align-items:start!important; column-gap:12px!important; row-gap:0!important; width:100%!important; height:auto!important; min-height:64px!important; overflow:visible!important; } body .buzz-page-toolbar-copy h1{ align-self:start!important; height:auto!important; min-height:0!important; max-width:none!important; margin:0!important; padding:2px 0 0!important; line-height:1.12!important; overflow:visible!important; text-overflow:clip!important; } body .buzz-page-toolbar-copy p{ align-self:start!important; display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; white-space:normal!important; overflow:hidden!important; text-overflow:ellipsis!important; margin:0!important; padding:0!important; line-height:1.35!important; max-height:2.7em!important; } } /* v1.3.156 - mobile category/search intro: natural height, no clipping */ @media (max-width:700px){ html body .buzz-category-intro-top.buzz-page-toolbar, html body .buzz-search-controls.buzz-page-toolbar{ display:block!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0 0 14px!important; padding:8px 0 10px!important; overflow:visible!important; box-sizing:border-box!important; } html body .buzz-category-intro-top.buzz-page-toolbar > .buzz-category-intro-copy.buzz-page-toolbar-copy, html body .buzz-search-controls.buzz-page-toolbar > .buzz-page-toolbar-copy{ position:static!important; top:auto!important; display:grid!important; grid-template-columns:max-content minmax(0,1fr)!important; align-items:start!important; gap:10px 14px!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:0!important; overflow:visible!important; box-sizing:border-box!important; } html body .buzz-page-toolbar-copy h1{ align-self:start!important; display:block!important; width:auto!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:0!important; font-size:24px!important; line-height:1.18!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; } html body .buzz-page-toolbar-copy p{ align-self:start!important; display:block!important; width:auto!important; min-width:0!important; height:auto!important; min-height:0!important; max-height:none!important; margin:0!important; padding:1px 0 0!important; font-size:14px!important; line-height:1.45!important; white-space:normal!important; overflow:visible!important; text-overflow:clip!important; -webkit-line-clamp:unset!important; -webkit-box-orient:unset!important; } /* View buttons live in the mobile drawer, so they must not reserve toolbar height. */ html body .buzz-category-intro-top .buzz-page-view-switcher, html body .buzz-search-controls .buzz-page-view-switcher{ display:none!important; } } /* Very narrow phones: keep copy readable without clipping. */ @media (max-width:380px){ html body .buzz-page-toolbar-copy{ grid-template-columns:max-content minmax(0,1fr)!important; gap:8px 10px!important; } html body .buzz-page-toolbar-copy h1{ font-size:22px!important; } html body .buzz-page-toolbar-copy p{ font-size:13px!important; line-height:1.42!important; } } /* v1.3.169 - mobile Shorts rebuilt as a true vertical slider * * No document scroll-snap / vh / svh / dvh card-height coupling. * The viewport is fixed once when Shorts opens, and slides move by transform. * Browser address-bar collapse/expand therefore cannot stretch the current card. */ @media (max-width:700px){ html.buzz-shorts-slider-active, html.buzz-shorts-slider-active body{ overflow:hidden!important; height:100%!important; overscroll-behavior:none!important; } /* Hide the normal category/search intro row in Shorts mode. */ html.buzz-shorts-slider-active body .buzz-category-magazine.category-view-shorts > .buzz-category-intro-top.buzz-page-toolbar, html.buzz-shorts-slider-active body .buzz-search-magazine.search-view-shorts > .buzz-search-controls.buzz-page-toolbar{ display:none!important; } /* Hide normal page pagination/footer while slider mode is active. We clone them into the slider as final slides. */ html.buzz-shorts-slider-active body > .site-footer, html.buzz-shorts-slider-active body > .buzz-footer, html.buzz-shorts-slider-active body .buzz-shorts-pagination{ display:none!important; } /* Use the mobile promo art only. */ html.buzz-shorts-slider-active body .buzz-promo-slider-pc{ display:none!important; } html.buzz-shorts-slider-active body .buzz-promo-slider-mobile{ display:block!important; } /* Slider viewport sits below the site header. */ html.buzz-shorts-slider-active body .buzz-shorts-stage{ position:fixed!important; left:0!important; right:0!important; top:var(--buzz-shorts-top, 0px)!important; height:var(--buzz-shorts-stage, 640px)!important; overflow:hidden!important; z-index:20!important; background:var(--bg)!important; touch-action:none!important; } html.buzz-shorts-slider-active body .buzz-shorts-track{ position:absolute!important; left:0!important; top:0!important; width:100%!important; height:100%!important; will-change:transform!important; transform:translate3d(0,0,0); } html.buzz-shorts-slider-active body .buzz-shorts-slide{ position:absolute!important; left:0!important; top:0!important; width:100%!important; height:100%!important; box-sizing:border-box!important; overflow:hidden!important; background:var(--bg)!important; color:var(--text)!important; } /* Promo is one full slider page. */ html.buzz-shorts-slider-active body .buzz-shorts-slide.is-promo{ display:flex!important; align-items:center!important; justify-content:center!important; padding:18px 14px!important; } html.buzz-shorts-slider-active body .buzz-shorts-slide.is-promo .buzz-promo-slider-mobile{ width:min(100%,520px)!important; max-width:520px!important; margin:0 auto!important; } html.buzz-shorts-slider-active body .buzz-shorts-slide.is-promo .buzz-promo-slider-track{ width:100%!important; aspect-ratio:4/5!important; height:auto!important; max-height:calc(var(--buzz-shorts-stage,640px) - 36px)!important; } html.buzz-shorts-slider-active body .buzz-shorts-slide.is-promo .buzz-promo-slide img{ width:100%!important; height:100%!important; object-fit:contain!important; object-position:center!important; } /* One article per full slider page. */ html.buzz-shorts-slider-active body .buzz-shorts-slide.is-post{ padding:14px 14px max(16px,env(safe-area-inset-bottom))!important; } html.buzz-shorts-slider-active body .buzz-shorts-slide.is-post .buzz-shorts-card{ width:100%!important; height:100%!important; margin:0!important; padding:0!important; display:grid!important; grid-template-rows:auto minmax(0,1fr) auto!important; overflow:hidden!important; background:var(--bg)!important; color:var(--text)!important; border:0!important; } html.buzz-shorts-slider-active body .buzz-shorts-media{ grid-row:1!important; width:100%!important; aspect-ratio:4/3!important; height:auto!important; max-height:none!important; display:flex!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; border-radius:14px!important; background:#f1f2f4!important; } html.buzz-shorts-slider-active body .buzz-shorts-media > img{ display:block!important; width:100%!important; height:100%!important; object-fit:contain!important; object-position:center center!important; margin:auto!important; } html.buzz-shorts-slider-active body .buzz-shorts-copy{ grid-row:3!important; align-self:end!important; padding:10px 4px 0!important; margin:0!important; } html.buzz-shorts-slider-active body .buzz-shorts-copy h2{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; margin:0 0 6px!important; font-size:22px!important; line-height:1.30!important; letter-spacing:-.035em!important; color:var(--text)!important; } html.buzz-shorts-slider-active body .buzz-shorts-copy h2 a{ color:inherit!important; } html.buzz-shorts-slider-active body .buzz-shorts-copy p{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; margin:0 0 7px!important; font-size:14px!important; line-height:1.5!important; color:var(--muted)!important; } html.buzz-shorts-slider-active body .buzz-shorts-copy .meta{ margin:0!important; font-size:12px!important; color:var(--muted)!important; } /* Final page: real footer content, vertically scrollable only inside itself. */ html.buzz-shorts-slider-active body .buzz-shorts-slide.is-footer{ overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; padding:0!important; background:var(--bg)!important; touch-action:pan-y!important; } html.buzz-shorts-slider-active body .buzz-shorts-slide.is-footer .site-footer, html.buzz-shorts-slider-active body .buzz-shorts-slide.is-footer .buzz-footer{ display:block!important; position:relative!important; margin:0!important; } html[data-theme="dark"].buzz-shorts-slider-active body .buzz-shorts-media{ background:#18181c!important; } } /* v1.3.178 - scalable mobile Shorts: virtual vertical slider + end screen */ @media (max-width:700px){ html.buzz-shorts-virtual-active, html.buzz-shorts-virtual-active body{ width:100%!important; height:100%!important; overflow:hidden!important; overscroll-behavior:none!important; } html.buzz-shorts-virtual-active body .buzz-category-magazine.category-view-shorts > .buzz-category-intro-top.buzz-page-toolbar, html.buzz-shorts-virtual-active body .buzz-search-magazine.search-view-shorts > .buzz-search-controls.buzz-page-toolbar{ display:none!important; } html.buzz-shorts-virtual-active body > .site-footer, html.buzz-shorts-virtual-active body > .buzz-footer, html.buzz-shorts-virtual-active body .buzz-shorts-pagination{ display:none!important; } html.buzz-shorts-virtual-active body .buzz-promo-slider-pc{display:none!important;} html.buzz-shorts-virtual-active body .buzz-promo-slider-mobile{display:block!important;} html.buzz-shorts-virtual-active body .buzz-shorts-stage{ position:fixed!important; left:0!important; right:0!important; top:var(--buzz-shorts-top,0px)!important; height:var(--buzz-shorts-stage,640px)!important; overflow:hidden!important; z-index:30!important; background:var(--bg)!important; touch-action:none!important; } html.buzz-shorts-virtual-active body .buzz-shorts-track{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; transform:translate3d(0,0,0); will-change:transform!important; } /* v1.3.356 - viewport-level spinner positioned below the rendered header */ html.buzz-shorts-virtual-active body .buzz-shorts-refresh-indicator{ position:fixed!important; z-index:1005!important; top:12px!important; left:50%!important; display:grid!important; place-items:center!important; width:44px!important; height:44px!important; padding:0!important; border:0!important; border-radius:50%!important; background:var(--bg)!important; box-shadow:0 8px 24px rgba(17,24,39,.16)!important; opacity:0!important; transform:translate3d(-50%,0,0) scale(.82)!important; transition:opacity .14s ease,transform .16s ease,box-shadow .16s ease!important; pointer-events:none!important; box-sizing:border-box!important; } html.buzz-shorts-virtual-active body .buzz-shorts-refresh-indicator.is-visible{ opacity:1!important; transform:translate3d(-50%,0,0) scale(1)!important; } html.buzz-shorts-virtual-active body .buzz-shorts-refresh-icon{ display:block!important; width:23px!important; height:23px!important; border-radius:50%!important; border:3px solid rgba(255,22,132,.22)!important; border-top-color:var(--buzz-pink,#ff1684)!important; background:transparent!important; box-sizing:border-box!important; transition:border-color .16s ease!important; } html.buzz-shorts-virtual-active body .buzz-shorts-refresh-indicator.is-ready{ box-shadow:0 8px 24px rgba(255,22,132,.24)!important; } html.buzz-shorts-virtual-active body .buzz-shorts-refresh-indicator.is-ready .buzz-shorts-refresh-icon{ border-color:rgba(255,22,132,.42)!important; border-top-color:var(--buzz-pink,#ff1684)!important; } html.buzz-shorts-virtual-active body .buzz-shorts-refresh-indicator.is-refreshing .buzz-shorts-refresh-icon{ animation:buzz-shorts-refresh-spin .72s linear infinite!important; } @keyframes buzz-shorts-refresh-spin{to{transform:rotate(360deg)}} html.buzz-shorts-virtual-active body .buzz-shorts-slide{ position:absolute!important; left:0!important; top:0!important; width:100%!important; height:100%!important; box-sizing:border-box!important; overflow:hidden!important; background:var(--bg)!important; color:var(--text)!important; } html.buzz-shorts-virtual-active body .buzz-shorts-slide.is-promo{ display:flex!important; align-items:center!important; justify-content:center!important; padding:18px 14px!important; } html.buzz-shorts-virtual-active body .buzz-shorts-slide.is-promo .buzz-promo-slider-mobile{ width:min(100%,520px)!important; max-width:520px!important; margin:auto!important; } html.buzz-shorts-virtual-active body .buzz-shorts-slide.is-promo .buzz-promo-slider-track{ width:100%!important; aspect-ratio:4/5!important; height:auto!important; max-height:calc(var(--buzz-shorts-stage,640px) - 36px)!important; } html.buzz-shorts-virtual-active body .buzz-shorts-slide.is-promo .buzz-promo-slide img{ width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important; } html.buzz-shorts-virtual-active body .buzz-shorts-slide.is-post{ padding:14px 14px max(16px,env(safe-area-inset-bottom))!important; } html.buzz-shorts-virtual-active body .buzz-shorts-card{ width:100%!important;height:100%!important;margin:0!important;padding:0!important; display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important; overflow:hidden!important;border:0!important;background:var(--bg)!important; } html.buzz-shorts-virtual-active body .buzz-shorts-media{ grid-row:1!important;width:100%!important;aspect-ratio:4/3!important;height:auto!important; display:flex!important;align-items:center!important;justify-content:center!important; overflow:hidden!important;border-radius:14px!important;background:#f1f2f4!important; } html.buzz-shorts-virtual-active body .buzz-shorts-media > img{ display:block!important;width:100%!important;height:100%!important; object-fit:contain!important;object-position:center!important;margin:auto!important; } html.buzz-shorts-virtual-active body .buzz-shorts-copy{ grid-row:3!important;align-self:end!important;margin:0!important;padding:10px 4px 0!important; } html.buzz-shorts-virtual-active body .buzz-shorts-copy h2{ display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important; overflow:hidden!important;margin:0 0 6px!important;font-size:22px!important;line-height:1.30!important; letter-spacing:-.035em!important;color:var(--text)!important; } html.buzz-shorts-virtual-active body .buzz-shorts-copy h2 a{color:inherit!important;} html.buzz-shorts-virtual-active body .buzz-shorts-copy p{ display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2!important; overflow:hidden!important;margin:0 0 7px!important;font-size:14px!important;line-height:1.5!important; color:var(--muted)!important; } html.buzz-shorts-virtual-active body .buzz-shorts-copy .meta{ margin:0!important;font-size:12px!important;color:var(--muted)!important; } html.buzz-shorts-virtual-active body .buzz-shorts-slide.is-end{ display:flex!important;align-items:center!important;justify-content:center!important; padding:32px 24px!important;text-align:center!important; } .buzz-shorts-end-inner{width:min(100%,420px);} .buzz-shorts-end-kicker{display:inline-block;margin-bottom:14px;color:var(--buzz-pink,#ff1684);font-weight:900;font-size:13px;letter-spacing:.04em;} .buzz-shorts-end-title{margin:0 0 10px!important;font-size:28px!important;line-height:1.2!important;color:var(--text)!important;} .buzz-shorts-end-copy{margin:0 0 24px!important;color:var(--muted)!important;font-size:14px!important;line-height:1.6!important;} .buzz-shorts-end-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .buzz-shorts-end-actions button,.buzz-shorts-end-actions a{ display:flex;align-items:center;justify-content:center;min-height:46px;padding:10px 14px; border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--text); font-weight:800;text-decoration:none; } .buzz-shorts-end-actions .is-primary{border-color:var(--buzz-pink,#ff1684);background:var(--buzz-pink,#ff1684);color:#fff;} html[data-theme="dark"].buzz-shorts-virtual-active body .buzz-shorts-media{background:#18181c!important;} html.buzz-shorts-virtual-active body .buzz-shorts-feed{display:none!important;} } /* v1.3.179 - Shorts end screen: 처음으로 + 목록 + 홈 */ @media (max-width:700px){ .buzz-shorts-end-actions{ grid-template-columns:1fr!important; } } /* v1.3.180 - Shorts end-screen buttons stay tappable */ @media (max-width:700px){ html.buzz-shorts-virtual-active body .buzz-shorts-end-actions button, html.buzz-shorts-virtual-active body .buzz-shorts-end-actions a{ position:relative!important; z-index:5!important; pointer-events:auto!important; touch-action:manipulation!important; cursor:pointer!important; } } /* v1.3.182 - mobile Shorts image centered in available slide space */ @media (max-width:700px){ html.buzz-shorts-virtual-active body .buzz-shorts-slide.is-post{ padding:14px 14px max(16px,env(safe-area-inset-bottom))!important; } html.buzz-shorts-virtual-active body .buzz-shorts-card{ display:grid!important; grid-template-rows:minmax(0,1fr) auto!important; height:100%!important; min-height:0!important; overflow:hidden!important; } html.buzz-shorts-virtual-active body .buzz-shorts-media{ grid-row:1!important; align-self:center!important; justify-self:center!important; width:min(100%,560px)!important; max-width:560px!important; aspect-ratio:4/3!important; height:auto!important; max-height:100%!important; margin:auto!important; } html.buzz-shorts-virtual-active body .buzz-shorts-copy{ grid-row:2!important; align-self:end!important; justify-self:center!important; width:min(100%,560px)!important; max-width:560px!important; margin:0 auto!important; padding:12px 4px 0!important; } } /* v1.3.183 - center Shorts title and description below centered image */ @media (max-width:700px){ html.buzz-shorts-virtual-active body .buzz-shorts-copy{ text-align:center!important; } html.buzz-shorts-virtual-active body .buzz-shorts-copy h2, html.buzz-shorts-virtual-active body .buzz-shorts-copy p{ text-align:center!important; margin-left:auto!important; margin-right:auto!important; } html.buzz-shorts-virtual-active body .buzz-shorts-copy h2 a{ display:inline!important; } } /* v1.3.184 - vertically center image + title/description group in Shorts */ @media (max-width:700px){ html.buzz-shorts-virtual-active body .buzz-shorts-slide.is-post{ display:flex!important; align-items:center!important; justify-content:center!important; padding:14px 14px max(16px,env(safe-area-inset-bottom))!important; } html.buzz-shorts-virtual-active body .buzz-shorts-card{ width:100%!important; height:auto!important; max-height:100%!important; display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:center!important; overflow:visible!important; } html.buzz-shorts-virtual-active body .buzz-shorts-media{ flex:0 0 auto!important; align-self:center!important; width:min(100%,560px)!important; max-width:560px!important; aspect-ratio:4/3!important; height:auto!important; margin:0 auto!important; } html.buzz-shorts-virtual-active body .buzz-shorts-copy{ flex:0 0 auto!important; align-self:center!important; width:min(100%,560px)!important; max-width:560px!important; margin:0 auto!important; padding:12px 4px 0!important; text-align:left!important; } html.buzz-shorts-virtual-active body .buzz-shorts-copy h2, html.buzz-shorts-virtual-active body .buzz-shorts-copy p{ text-align:left!important; margin-left:0!important; margin-right:0!important; } html.buzz-shorts-virtual-active body .buzz-shorts-copy h2 a{ display:inline!important; } } /* v1.3.185 - mobile Shorts bottom bar */ @media (max-width:700px){ html.buzz-shorts-virtual-active body .buzz-shorts-stage{ z-index:30!important; } html.buzz-shorts-virtual-active body .buzz-shorts-slide.is-post{ padding:14px 14px calc(84px + env(safe-area-inset-bottom))!important; } html.buzz-shorts-virtual-active body .buzz-shorts-bottom-bar{ position:fixed!important; left:12px!important; right:12px!important; bottom:calc(12px + env(safe-area-inset-bottom))!important; min-height:48px!important; display:grid!important; grid-template-columns:auto 1fr auto!important; align-items:center!important; gap:10px!important; padding:10px 12px!important; border:1px solid var(--line)!important; border-radius:14px!important; background:rgba(255,255,255,.92)!important; z-index:45!important; backdrop-filter:blur(10px)!important; -webkit-backdrop-filter:blur(10px)!important; } html[data-theme="dark"].buzz-shorts-virtual-active body .buzz-shorts-bottom-bar{ background:rgba(17,20,24,.92)!important; border-color:#2a3340!important; } html.buzz-shorts-virtual-active body .buzz-shorts-bottom-brand{ font-size:12px!important; line-height:1!important; font-weight:900!important; letter-spacing:.02em!important; color:var(--buzz-pink,#ff1684)!important; white-space:nowrap!important; } html.buzz-shorts-virtual-active body .buzz-shorts-bottom-progress{ min-width:0!important; font-size:12px!important; line-height:1.35!important; color:var(--muted)!important; overflow:hidden!important; text-overflow:ellipsis!important; white-space:nowrap!important; } html.buzz-shorts-virtual-active body .buzz-shorts-bottom-actions{ display:flex!important; align-items:center!important; gap:6px!important; margin-left:auto!important; } html.buzz-shorts-virtual-active body .buzz-shorts-bottom-btn{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:40px!important; height:30px!important; padding:0 10px!important; border:1px solid var(--line)!important; border-radius:999px!important; background:transparent!important; color:var(--text)!important; font-size:12px!important; line-height:1!important; font-weight:800!important; text-decoration:none!important; white-space:nowrap!important; cursor:pointer!important; touch-action:manipulation!important; } html[data-theme="dark"].buzz-shorts-virtual-active body .buzz-shorts-bottom-btn{ border-color:#2a3340!important; } } /* v1.3.186 - allow Shorts swipe gesture from image/title/text areas */ @media (max-width:700px){ html.buzz-shorts-virtual-active body .buzz-shorts-card, html.buzz-shorts-virtual-active body .buzz-shorts-media, html.buzz-shorts-virtual-active body .buzz-shorts-media a, html.buzz-shorts-virtual-active body .buzz-shorts-copy, html.buzz-shorts-virtual-active body .buzz-shorts-copy h2, html.buzz-shorts-virtual-active body .buzz-shorts-copy h2 a, html.buzz-shorts-virtual-active body .buzz-shorts-copy p{ touch-action:none!important; } html.buzz-shorts-virtual-active body .buzz-shorts-bottom-bar, html.buzz-shorts-virtual-active body .buzz-shorts-bottom-bar button, html.buzz-shorts-virtual-active body .buzz-shorts-bottom-bar a, html.buzz-shorts-virtual-active body .buzz-shorts-end-actions button, html.buzz-shorts-virtual-active body .buzz-shorts-end-actions a{ touch-action:manipulation!important; } } /* v1.3.187 - Shorts bottom bar: refresh / previous / next */ @media (max-width:700px){ html.buzz-shorts-virtual-active body .buzz-shorts-bottom-btn[disabled], html.buzz-shorts-virtual-active body .buzz-shorts-end-actions button[disabled]{ opacity:.38!important; pointer-events:none!important; cursor:default!important; } } /* v1.3.188 - widen bottom bar button spacing */ /* v1.3.190 - anchor Shorts category flag to its own image */ @media (max-width:700px){ html.buzz-shorts-virtual-active body .buzz-shorts-media{ position:relative!important; } html.buzz-shorts-virtual-active body .buzz-shorts-media .buzz-card-category-flag{ display:inline-flex!important; position:absolute!important; left:10px!important; top:10px!important; right:auto!important; bottom:auto!important; z-index:6!important; margin:0!important; } } /* v1.3.191 - Shorts category flag sits to the left of the title */ @media (max-width:700px){ html.buzz-shorts-virtual-active body .buzz-shorts-media .buzz-card-category-flag{ display:none!important; } html.buzz-shorts-virtual-active body .buzz-shorts-title-line{ display:flex!important; align-items:flex-start!important; gap:8px!important; width:100%!important; min-width:0!important; margin:0 0 6px!important; } html.buzz-shorts-virtual-active body .buzz-shorts-title-line .buzz-shorts-title-category{ position:static!important; inset:auto!important; flex:0 0 auto!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; margin:2px 0 0!important; padding:4px 9px!important; border-radius:999px!important; line-height:1.2!important; white-space:nowrap!important; z-index:auto!important; } html.buzz-shorts-virtual-active body .buzz-shorts-title-line h2{ flex:1 1 auto!important; min-width:0!important; margin:0!important; } html.buzz-shorts-virtual-active body .buzz-shorts-copy > p{ margin-top:0!important; } } /* v1.3.192 - Shorts category flag on its own line above title */ @media (max-width:700px){ html.buzz-shorts-virtual-active body .buzz-shorts-title-line{ display:block!important; margin:0!important; } html.buzz-shorts-virtual-active body .buzz-shorts-category-line{ display:flex!important; align-items:center!important; width:100%!important; margin:0 0 7px!important; } html.buzz-shorts-virtual-active body .buzz-shorts-category-line .buzz-shorts-title-category{ position:static!important; inset:auto!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; margin:0!important; padding:4px 9px!important; border-radius:999px!important; line-height:1.2!important; white-space:nowrap!important; } html.buzz-shorts-virtual-active body .buzz-shorts-copy > h2{ width:100%!important; margin:0 0 6px!important; } } /* v1.3.193 - Shorts is mobile-only; desktop resize exits fixed Shorts safely */ @media (min-width:701px){ .buzz-page-view-switcher .buzz-shorts-view-button, .buzz-search-view-switcher .buzz-shorts-view-button, .buzz-category-view-switcher .buzz-shorts-view-button{ display:none!important; } html.buzz-shorts-virtual-active, html.buzz-shorts-virtual-active body{ height:auto!important; overflow:auto!important; overscroll-behavior:auto!important; } } /* v1.3.194 - mobile global bottom bar */ @media (max-width:700px){ body{ padding-bottom:calc(72px + env(safe-area-inset-bottom))!important; } .buzz-mobile-global-bar{ position:fixed!important; left:0!important; right:0!important; bottom:0!important; z-index:60!important; display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; align-items:center!important; min-height:60px!important; padding:6px 8px calc(6px + env(safe-area-inset-bottom))!important; border-top:1px solid var(--line)!important; background:rgba(255,255,255,.96)!important; box-shadow:0 -8px 24px rgba(0,0,0,.06)!important; backdrop-filter:blur(12px)!important; -webkit-backdrop-filter:blur(12px)!important; } html[data-theme="dark"] .buzz-mobile-global-bar{ background:rgba(11,11,13,.96)!important; border-color:#2a3340!important; box-shadow:0 -8px 24px rgba(0,0,0,.25)!important; } .buzz-mobile-global-item{ appearance:none!important; border:0!important; background:transparent!important; color:var(--muted)!important; min-width:0!important; min-height:48px!important; padding:4px 2px!important; margin:0!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:3px!important; text-decoration:none!important; font:inherit!important; cursor:pointer!important; touch-action:manipulation!important; } .buzz-mobile-global-item:hover, .buzz-mobile-global-item:focus-visible{ color:var(--text)!important; } .buzz-mobile-global-shorts{ color:var(--buzz-pink,#ff1684)!important; font-weight:800!important; } .buzz-mobile-global-icon{ display:block!important; height:20px!important; font-size:20px!important; line-height:20px!important; font-weight:800!important; } .buzz-mobile-global-label{ display:block!important; font-size:11px!important; line-height:1.15!important; font-weight:700!important; white-space:nowrap!important; } .buzz-mobile-global-bar.is-hidden-for-shorts{ display:none!important; } /* In the mobile drawer's view selector, Shorts is no longer a view option. */ .mobile-menu .buzz-shorts-view-button, .mobile-menu [data-category-view="shorts"], .mobile-menu [data-search-view="shorts"], .site-mobile-menu .buzz-shorts-view-button, .site-mobile-menu [data-category-view="shorts"], .site-mobile-menu [data-search-view="shorts"]{ display:none!important; } /* Shorts has its own refresh/previous/next bar, so don't reserve space for the global bar. */ html.buzz-shorts-virtual-active body{ padding-bottom:0!important; } } @media (min-width:701px){ .buzz-mobile-global-bar{ display:none!important; } } /* v1.3.195 - bottom bar actions + dedicated all-post Shorts route */ @media (max-width:700px){ html.buzz-shorts-virtual-active body .buzz-mobile-global-bar{ display:none!important; } .buzz-all-shorts-magazine{ min-height:0!important; margin:0 auto!important; padding:0!important; } .buzz-mobile-global-search, .buzz-mobile-global-shorts{ pointer-events:auto!important; touch-action:manipulation!important; } } /* v1.3.196 - one common mobile bottom bar, including Shorts */ @media (max-width:700px){ /* Global bar stays visible in ordinary pages and Shorts. */ .buzz-mobile-global-bar, .buzz-mobile-global-bar.is-hidden-for-shorts, html.buzz-shorts-virtual-active body .buzz-mobile-global-bar{ display:grid!important; } /* The old Shorts-only refresh/previous/next bar is retired. */ html.buzz-shorts-virtual-active body .buzz-shorts-bottom-bar{ display:none!important; } /* Reserve space for the shared global bar in Shorts. */ html.buzz-shorts-virtual-active body{ padding-bottom:calc(66px + env(safe-area-inset-bottom))!important; } html.buzz-shorts-virtual-active body .buzz-shorts-slide.is-post{ padding-bottom:calc(76px + env(safe-area-inset-bottom))!important; } /* Keep the Shorts tab visually active while using the shared bar. */ .buzz-mobile-global-bar.is-shorts-active .buzz-mobile-global-shorts{ color:var(--buzz-pink,#ff1684)!important; font-weight:900!important; } /* Mobile search opens directly above the fixed bottom bar. */ .buzz-header .search-panel, .site-header .search-panel, .search-panel[data-search-panel]{ position:fixed!important; left:0!important; right:0!important; top:auto!important; bottom:calc(60px + env(safe-area-inset-bottom))!important; width:100%!important; margin:0!important; padding:0!important; border-top:1px solid var(--line)!important; border-bottom:1px solid var(--line)!important; background:var(--bg)!important; box-shadow:0 -10px 28px rgba(0,0,0,.10)!important; z-index:70!important; } html[data-theme="dark"] .buzz-header .search-panel, html[data-theme="dark"] .site-header .search-panel, html[data-theme="dark"] .search-panel[data-search-panel]{ background:#0b0b0d!important; border-color:#2a3340!important; box-shadow:0 -10px 28px rgba(0,0,0,.30)!important; } .search-panel[data-search-panel] .container{ width:min(calc(100% - 24px),var(--max))!important; padding:10px 0!important; } .search-panel[data-search-panel] .search-form{ display:flex!important; align-items:center!important; gap:8px!important; margin:0!important; } .search-panel[data-search-panel] .search-field{ min-width:0!important; height:44px!important; } .search-panel[data-search-panel] .search-submit{ flex:0 0 68px!important; height:44px!important; } } /* v1.3.197 - mobile "보기" bottom sheet */ @media (max-width:700px){ .buzz-mobile-view-sheet-backdrop{ position:fixed!important; inset:0!important; z-index:78!important; background:rgba(0,0,0,.34)!important; } .buzz-mobile-view-sheet{ position:fixed!important; left:0!important; right:0!important; bottom:0!important; z-index:79!important; transform:translateY(110%)!important; transition:transform .24s ease!important; padding:8px 16px calc(18px + env(safe-area-inset-bottom))!important; border-radius:20px 20px 0 0!important; border-top:1px solid var(--line)!important; background:var(--bg)!important; box-shadow:0 -14px 34px rgba(0,0,0,.16)!important; } .buzz-mobile-view-sheet.is-open{ transform:translateY(0)!important; } .buzz-mobile-view-sheet-handle{ width:42px!important; height:4px!important; margin:0 auto 10px!important; border-radius:999px!important; background:var(--line)!important; } .buzz-mobile-view-sheet-head{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; margin-bottom:12px!important; } .buzz-mobile-view-sheet-head strong{ font-size:17px!important; color:var(--text)!important; } .buzz-mobile-view-sheet-close{ width:36px!important; height:36px!important; border:0!important; border-radius:50%!important; background:transparent!important; color:var(--muted)!important; font-size:28px!important; line-height:1!important; cursor:pointer!important; } .buzz-mobile-view-sheet-options{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important; } .buzz-mobile-view-option{ min-height:82px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:7px!important; border:1px solid var(--line)!important; border-radius:14px!important; background:transparent!important; color:var(--text)!important; font-size:14px!important; font-weight:800!important; cursor:pointer!important; touch-action:manipulation!important; } .buzz-mobile-view-option:active{ transform:scale(.98)!important; } .buzz-mobile-view-option-icon{ font-size:24px!important; line-height:1!important; color:var(--muted)!important; } html[data-theme="dark"] .buzz-mobile-view-sheet{ background:#0b0b0d!important; border-color:#2a3340!important; } html[data-theme="dark"] .buzz-mobile-view-option{ border-color:#2a3340!important; } html.buzz-mobile-sheet-open, html.buzz-mobile-sheet-open body{ overflow:hidden!important; } } /* v1.3.198 - mobile drawer: remove view switcher, add light/dark mode */ @media (max-width:700px){ .mobile-nav .buzz-mobile-view-section{ display:none!important; } .buzz-mobile-theme-section{ padding:18px 18px 4px!important; border-top:1px solid var(--line)!important; } .buzz-mobile-theme-label{ margin:0 0 10px!important; font-size:14px!important; font-weight:800!important; color:var(--muted)!important; } .buzz-mobile-theme-options{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; } .buzz-mobile-theme-button{ min-height:48px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; padding:10px 12px!important; border:1px solid var(--line)!important; border-radius:14px!important; background:transparent!important; color:var(--text)!important; font:inherit!important; cursor:pointer!important; touch-action:manipulation!important; } .buzz-mobile-theme-button span{ font-size:18px!important; line-height:1!important; } .buzz-mobile-theme-button b{ font-size:13px!important; line-height:1.2!important; font-weight:800!important; } .buzz-mobile-theme-button.is-active{ border-color:var(--buzz-pink,#ff1684)!important; background:var(--buzz-pink,#ff1684)!important; color:#fff!important; } html[data-theme="dark"] .buzz-mobile-theme-section{ border-color:#2a3340!important; } html[data-theme="dark"] .buzz-mobile-theme-button{ border-color:#2a3340!important; } html[data-theme="dark"] .buzz-mobile-theme-button.is-active{ border-color:var(--buzz-pink,#ff1684)!important; } } /* v1.3.199 - compact theme controls, reliable bottom sheet, mobile header cleanup */ @media (max-width:700px){ /* Mobile header: logo left, no duplicate top search/menu controls. */ .buzz-header .buzz-brand-row{ display:flex!important; align-items:center!important; justify-content:flex-start!important; min-height:64px!important; padding-left:14px!important; padding-right:14px!important; } .buzz-header .buzz-mobile-header-spacer, .buzz-header .buzz-mobile-actions{ display:none!important; } .buzz-header .buzz-brand{ display:flex!important; align-items:center!important; justify-content:flex-start!important; width:auto!important; max-width:100%!important; margin:0!important; text-align:left!important; } .buzz-header .buzz-brand .site-name, .buzz-header .buzz-brand .custom-logo-link{ justify-content:flex-start!important; margin:0!important; } /* Theme mode controls should visually match the compact language controls. */ .buzz-mobile-theme-section{ padding:14px 20px 6px!important; } .buzz-mobile-theme-label{ margin:0 0 9px!important; font-size:12px!important; line-height:1.2!important; } .buzz-mobile-theme-options{ display:flex!important; flex-wrap:wrap!important; gap:8px!important; } .buzz-mobile-theme-button{ width:auto!important; min-width:0!important; min-height:38px!important; height:38px!important; padding:0 12px!important; border-radius:999px!important; gap:6px!important; } .buzz-mobile-theme-button span{ font-size:16px!important; } .buzz-mobile-theme-button b{ font-size:12px!important; white-space:nowrap!important; } /* Bottom-sheet must sit above the global nav and receive taps. */ .buzz-mobile-view-sheet-backdrop{ z-index:100080!important; pointer-events:auto!important; } .buzz-mobile-view-sheet{ z-index:100081!important; pointer-events:auto!important; } .buzz-mobile-view-sheet.is-open{ visibility:visible!important; pointer-events:auto!important; } /* Search panel sits immediately above the shared bottom bar. */ .search-panel[data-search-panel]{ z-index:100082!important; bottom:calc(60px + env(safe-area-inset-bottom))!important; } .search-panel[data-search-panel] > .container{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:center!important; gap:8px!important; padding:10px 12px!important; } .search-panel[data-search-panel] .search-form{ min-width:0!important; margin:0!important; } .buzz-mobile-search-cancel{ display:inline-flex!important; align-items:center!important; justify-content:center!important; height:44px!important; padding:0 12px!important; border:0!important; background:transparent!important; color:var(--text)!important; font-size:13px!important; font-weight:800!important; cursor:pointer!important; touch-action:manipulation!important; } .buzz-mobile-global-search.is-active{ color:var(--buzz-pink,#ff1684)!important; } } /* v1.3.200 - mobile drawer: remove 전체 글, color language selector */ @media (max-width:700px){ /* Safety hide in case an older mobile-menu item remains in markup. */ .mobile-menu-all, .mobile-menu-all-posts, .mobile-nav a[href*="view=all"], .site-mobile-menu a[href*="view=all"]{ display:none!important; } /* Language section uses compact colored pills. */ .buzz-mobile-language-options, .mobile-language-options, .buzz-language-options{ display:flex!important; flex-wrap:wrap!important; gap:8px!important; } .buzz-mobile-language-options a, .buzz-mobile-language-options button, .mobile-language-options a, .mobile-language-options button, .buzz-language-options a, .buzz-language-options button{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:44px!important; height:38px!important; padding:0 12px!important; border:1px solid var(--line)!important; border-radius:999px!important; background:#f3f4f6!important; color:#596273!important; font-size:12px!important; font-weight:800!important; line-height:1!important; text-decoration:none!important; cursor:pointer!important; transition:.18s ease!important; } .buzz-mobile-language-options a:hover, .buzz-mobile-language-options button:hover, .mobile-language-options a:hover, .mobile-language-options button:hover, .buzz-language-options a:hover, .buzz-language-options button:hover{ border-color:var(--buzz-pink,#ff1684)!important; color:var(--buzz-pink,#ff1684)!important; } .buzz-mobile-language-options .is-active, .buzz-mobile-language-options [aria-current="true"], .buzz-mobile-language-options [aria-current="page"], .mobile-language-options .is-active, .mobile-language-options [aria-current="true"], .mobile-language-options [aria-current="page"], .buzz-language-options .is-active, .buzz-language-options [aria-current="true"], .buzz-language-options [aria-current="page"]{ border-color:var(--buzz-pink,#ff1684)!important; background:var(--buzz-pink,#ff1684)!important; color:#fff!important; box-shadow:0 5px 14px rgba(255,22,132,.18)!important; } html[data-theme="dark"] .buzz-mobile-language-options a, html[data-theme="dark"] .buzz-mobile-language-options button, html[data-theme="dark"] .mobile-language-options a, html[data-theme="dark"] .mobile-language-options button, html[data-theme="dark"] .buzz-language-options a, html[data-theme="dark"] .buzz-language-options button{ background:#15181d!important; border-color:#2a3340!important; color:#aeb6c2!important; } html[data-theme="dark"] .buzz-mobile-language-options .is-active, html[data-theme="dark"] .buzz-mobile-language-options [aria-current="true"], html[data-theme="dark"] .buzz-mobile-language-options [aria-current="page"], html[data-theme="dark"] .mobile-language-options .is-active, html[data-theme="dark"] .mobile-language-options [aria-current="true"], html[data-theme="dark"] .mobile-language-options [aria-current="page"], html[data-theme="dark"] .buzz-language-options .is-active, html[data-theme="dark"] .buzz-language-options [aria-current="true"], html[data-theme="dark"] .buzz-language-options [aria-current="page"]{ background:var(--buzz-pink,#ff1684)!important; border-color:var(--buzz-pink,#ff1684)!important; color:#fff!important; } } /* v1.3.201 - active mobile language uses Buzz Pink */ @media (max-width:700px){ .buzz-mobile-language .buzz-lang-link.is-active{ background:var(--buzz-pink,#ff1684)!important; border-color:var(--buzz-pink,#ff1684)!important; color:#fff!important; box-shadow:0 5px 14px rgba(255,22,132,.20)!important; } html[data-theme="dark"] .buzz-mobile-language .buzz-lang-link.is-active{ background:var(--buzz-pink,#ff1684)!important; border-color:var(--buzz-pink,#ff1684)!important; color:#fff!important; } } /* v1.3.202 - remove mobile drawer "전체 글" entry */ @media (max-width:700px){ .mobile-menu-all, .mobile-menu-all-posts, .mobile-menu-item-all, .buzz-mobile-menu-all, .buzz-mobile-all-posts{ display:none!important; } } /* v1.3.203 - mobile drawer scrolls as one continuous panel */ @media (max-width:900px){ /* Scroll the drawer itself, not only the category/menu section. */ .mobile-nav{ display:block!important; overflow-y:auto!important; overflow-x:hidden!important; overscroll-behavior-y:contain!important; -webkit-overflow-scrolling:touch!important; } /* Keep the header available while the entire contents beneath it move together. */ .mobile-nav .mobile-nav-head{ position:sticky!important; top:0!important; z-index:5!important; width:100%!important; } /* Menu/categories no longer form their own independent scroller. */ .mobile-nav .mobile-nav-inner{ display:block!important; flex:none!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; overscroll-behavior:auto!important; padding-bottom:12px!important; } /* Theme and language remain in the same normal document flow. */ .mobile-nav .buzz-mobile-theme-section, .mobile-nav .buzz-mobile-language{ position:static!important; flex:none!important; } .mobile-nav .buzz-mobile-language{ margin-bottom:calc(28px + env(safe-area-inset-bottom))!important; } } /* v1.3.204 - Shorts end screen keeps only refresh */ @media (max-width:700px){ .buzz-shorts-end-actions{ display:block!important; } .buzz-shorts-end-actions button{ width:100%!important; } } /* v1.3.205 - desktop archives must never inherit mobile Shorts scroll locking */ @media (min-width:701px){ html.buzz-shorts-document, html.buzz-shorts-slider-active, html.buzz-shorts-virtual-active, html.buzz-shorts-document body, html.buzz-shorts-slider-active body, html.buzz-shorts-virtual-active body{ height:auto!important; min-height:100%!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior:auto!important; touch-action:auto!important; } body.tag, body.archive, body.category{ overflow-y:auto!important; height:auto!important; min-height:100%!important; } } /* v1.3.206 - Shorts state is independent from saved large/small/list view. * The default normal view is "small"; no visual rule is needed here. */ /* v1.3.207 - view buttons restored after separating Shorts preference */ /* v1.3.208 - view bottom sheet is hidden at HTML level until opened */ @media (max-width:700px){ .buzz-mobile-view-sheet[hidden], .buzz-mobile-view-sheet-backdrop[hidden]{ display:none!important; } .buzz-mobile-view-sheet:not(.is-open){ pointer-events:none!important; } .buzz-mobile-view-sheet.is-open{ pointer-events:auto!important; } } /* v1.3.209 - iPad mini / small tablet category-search layout repair */ @media (min-width:701px) and (max-width:1024px){ /* Keep the magazine inside the actual tablet viewport. */ .buzz-category-magazine, .buzz-search-magazine{ width:100%!important; max-width:100%!important; min-width:0!important; overflow-x:hidden!important; } .buzz-category-magazine .container, .buzz-search-magazine .container{ min-width:0!important; } /* Tablet: featured content and side stories must not share a squeezed row. */ .buzz-category-feature-grid, .buzz-search-feature-grid{ grid-template-columns:minmax(0,1fr)!important; gap:22px!important; } .buzz-category-main-column, .buzz-search-magazine .buzz-category-main-column{ grid-template-columns:minmax(0,1fr)!important; gap:20px!important; width:100%!important; min-width:0!important; } .buzz-category-featured-card, .buzz-search-magazine .buzz-category-featured-card{ width:100%!important; min-width:0!important; } .buzz-category-featured-media, .buzz-search-magazine .buzz-category-featured-media{ width:100%!important; max-width:100%!important; aspect-ratio:4/3!important; } /* Side stories become a roomy two-column block under the featured article. */ .buzz-category-side-stories, .buzz-search-magazine .buzz-category-side-stories{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; width:100%!important; min-width:0!important; } .buzz-category-side-stories article, .buzz-search-magazine .buzz-category-side-stories article{ display:grid!important; grid-template-columns:112px minmax(0,1fr)!important; gap:12px!important; min-width:0!important; width:100%!important; padding-bottom:14px!important; } .buzz-category-side-media, .buzz-search-magazine .buzz-category-side-media{ width:112px!important; min-width:112px!important; aspect-ratio:4/3!important; } .buzz-category-side-stories h3, .buzz-search-magazine .buzz-category-side-stories h3{ min-width:0!important; overflow-wrap:anywhere!important; word-break:keep-all!important; font-size:14px!important; line-height:1.42!important; } .buzz-category-side-stories p, .buzz-search-magazine .buzz-category-side-stories p{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; } /* View controls stay in their own row instead of overlapping content. */ .buzz-category-intro-top, .buzz-search-controls{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; width:100%!important; min-width:0!important; } .buzz-category-view-switcher, .buzz-search-view-switcher, .buzz-page-view-switcher{ position:static!important; inset:auto!important; transform:none!important; flex:0 0 auto!important; max-width:100%!important; margin-left:auto!important; } /* Lower grids scale down cleanly on small tablets. */ .buzz-category-magazine.category-view-large .buzz-category-latest-grid, .buzz-search-magazine.search-view-large .buzz-category-latest-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .buzz-category-magazine.category-view-small .buzz-category-latest-grid, .buzz-search-magazine.search-view-small .buzz-category-latest-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } .buzz-category-magazine.category-view-list .buzz-category-latest-grid, .buzz-search-magazine.search-view-list .buzz-category-latest-grid{ grid-template-columns:minmax(0,1fr)!important; } /* Right-side widgets move below content on tablet. */ .buzz-category-aside{ grid-template-columns:repeat(2,minmax(0,1fr))!important; width:100%!important; min-width:0!important; } } /* Narrow iPad mini portrait / split-view: use an even safer single-column flow. */ @media (min-width:701px) and (max-width:820px){ .buzz-category-side-stories, .buzz-search-magazine .buzz-category-side-stories{ grid-template-columns:minmax(0,1fr)!important; } .buzz-category-side-stories article, .buzz-search-magazine .buzz-category-side-stories article{ grid-template-columns:132px minmax(0,1fr)!important; } .buzz-category-side-media, .buzz-search-magazine .buzz-category-side-media{ width:132px!important; min-width:132px!important; } .buzz-category-aside{ grid-template-columns:minmax(0,1fr)!important; } .buzz-category-magazine.category-view-small .buzz-category-latest-grid, .buzz-search-magazine.search-view-small .buzz-category-latest-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* v1.3.210 - keep Back to Top above the shared mobile bottom bar */ @media (max-width:700px){ .utillog-back-to-top{ right:16px!important; bottom:calc(76px + env(safe-area-inset-bottom))!important; z-index:76!important; width:42px!important; height:42px!important; } /* When the mobile search panel is open, lift the button above it too. */ html:has(.search-panel[data-search-panel].open) .utillog-back-to-top{ bottom:calc(136px + env(safe-area-inset-bottom))!important; } /* Shorts is fixed/no document scroll, so the top button is not useful there. */ html.buzz-shorts-virtual-active .utillog-back-to-top{ display:none!important; } } /* v1.3.211 - refreshed mobile bottom bar icons */ @media (max-width:700px){ .buzz-mobile-global-bar{ min-height:64px!important; padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important; } .buzz-mobile-global-item{ gap:5px!important; } .buzz-mobile-global-icon{ display:flex!important; align-items:center!important; justify-content:center!important; width:24px!important; height:24px!important; line-height:1!important; font-size:0!important; } .buzz-mobile-global-icon svg{ display:block!important; width:22px!important; height:22px!important; stroke:currentColor!important; stroke-width:2!important; stroke-linecap:round!important; stroke-linejoin:round!important; fill:none!important; overflow:visible!important; } .buzz-mobile-global-item:hover .buzz-mobile-global-icon svg, .buzz-mobile-global-item:focus-visible .buzz-mobile-global-icon svg{ transform:translateY(-1px); } .buzz-mobile-global-label{ font-size:11px!important; line-height:1.1!important; letter-spacing:-0.01em!important; } .buzz-mobile-global-shorts .buzz-mobile-global-icon svg{ stroke-width:2.1!important; } } /* v1.3.212 - mobile small view uses a true 2-column editorial card grid */ @media (max-width: 767px){ [data-content-grid].content-view-small, .search-results-grid.content-view-small, .post-grid.content-view-small{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:16px !important; align-items:stretch !important; } [data-content-grid].content-view-small .post-card, .search-results-grid.content-view-small .post-card, .post-grid.content-view-small .post-card{ display:flex !important; flex-direction:column !important; min-width:0 !important; height:100% !important; border-radius:16px !important; overflow:hidden !important; } [data-content-grid].content-view-small .post-card > .media, .search-results-grid.content-view-small .post-card > .media, .post-grid.content-view-small .post-card > .media{ position:relative !important; display:block !important; width:100% !important; aspect-ratio:4 / 3 !important; min-height:0 !important; flex:0 0 auto !important; overflow:hidden !important; } [data-content-grid].content-view-small .post-card > .media img, .search-results-grid.content-view-small .post-card > .media img, .post-grid.content-view-small .post-card > .media img, [data-content-grid].content-view-small .post-card > .media .thumb-placeholder, .search-results-grid.content-view-small .post-card > .media .thumb-placeholder, .post-grid.content-view-small .post-card > .media .thumb-placeholder{ width:100% !important; height:100% !important; object-fit:cover !important; } [data-content-grid].content-view-small .post-card .card-body, .search-results-grid.content-view-small .post-card .card-body, .post-grid.content-view-small .post-card .card-body{ display:flex !important; flex:1 1 auto !important; flex-direction:column !important; padding:14px 0 0 !important; min-width:0 !important; } [data-content-grid].content-view-small .post-card h2, [data-content-grid].content-view-small .post-card h3, .search-results-grid.content-view-small .post-card h2, .search-results-grid.content-view-small .post-card h3, .post-grid.content-view-small .post-card h2, .post-grid.content-view-small .post-card h3{ display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:3 !important; overflow:hidden !important; margin:0 0 10px !important; font-size:18px !important; font-weight:900 !important; line-height:1.33 !important; letter-spacing:-0.03em !important; } [data-content-grid].content-view-small .post-card p, .search-results-grid.content-view-small .post-card p, .post-grid.content-view-small .post-card p{ display:-webkit-box !important; -webkit-box-orient:vertical !important; -webkit-line-clamp:4 !important; overflow:hidden !important; margin:0 0 12px !important; color:var(--muted) !important; font-size:13px !important; line-height:1.6 !important; } [data-content-grid].content-view-small .post-card .meta, .search-results-grid.content-view-small .post-card .meta, .post-grid.content-view-small .post-card .meta{ margin-top:auto !important; font-size:11px !important; line-height:1.45 !important; white-space:normal !important; } [data-content-grid].content-view-small .post-card .buzz-card-category-flag, .search-results-grid.content-view-small .post-card .buzz-card-category-flag, .post-grid.content-view-small .post-card .buzz-card-category-flag{ left:10px !important; top:10px !important; min-height:28px !important; padding:5px 12px !important; font-size:11px !important; } } @media (max-width: 389px){ [data-content-grid].content-view-small, .search-results-grid.content-view-small, .post-grid.content-view-small{ grid-template-columns:1fr !important; } } /* v1.3.213 - mobile category/search small view matches the requested 2-column card layout */ .buzz-category-grid-excerpt{ display:none; } @media (max-width:767px){ .buzz-category-magazine.category-view-small .buzz-category-latest-grid, .buzz-search-magazine.search-view-small .buzz-category-latest-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; align-items:stretch!important; } .buzz-category-magazine.category-view-small .buzz-category-latest-grid > article, .buzz-search-magazine.search-view-small .buzz-category-latest-grid > article{ display:flex!important; flex-direction:column!important; min-width:0!important; height:100%!important; } .buzz-category-magazine.category-view-small .buzz-category-grid-media, .buzz-search-magazine.search-view-small .buzz-category-grid-media{ position:relative!important; display:block!important; width:100%!important; aspect-ratio:4 / 3!important; min-height:0!important; overflow:hidden!important; border-radius:18px!important; } .buzz-category-magazine.category-view-small .buzz-category-grid-media img, .buzz-search-magazine.search-view-small .buzz-category-grid-media img, .buzz-category-magazine.category-view-small .buzz-category-grid-media .thumb-placeholder, .buzz-search-magazine.search-view-small .buzz-category-grid-media .thumb-placeholder{ width:100%!important; height:100%!important; object-fit:cover!important; } .buzz-category-magazine.category-view-small .buzz-category-latest-grid h3, .buzz-search-magazine.search-view-small .buzz-category-latest-grid h3{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:3!important; overflow:hidden!important; margin:14px 0 10px!important; font-size:18px!important; line-height:1.34!important; font-weight:900!important; letter-spacing:-0.03em!important; } .buzz-category-magazine.category-view-small .buzz-category-grid-excerpt, .buzz-search-magazine.search-view-small .buzz-search-list-excerpt{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:4!important; overflow:hidden!important; margin:0 0 12px!important; color:var(--muted)!important; font-size:13px!important; line-height:1.6!important; font-weight:400!important; letter-spacing:-0.012em!important; } .buzz-category-magazine.category-view-small .buzz-category-latest-grid .meta, .buzz-search-magazine.search-view-small .buzz-category-latest-grid .meta{ margin-top:auto!important; font-size:11px!important; line-height:1.45!important; white-space:normal!important; } .buzz-search-magazine.search-view-small .buzz-card-category-flag{ left:10px!important; top:10px!important; min-height:28px!important; padding:5px 12px!important; font-size:11px!important; } } @media (max-width:389px){ .buzz-category-magazine.category-view-small .buzz-category-latest-grid, .buzz-search-magazine.search-view-small .buzz-category-latest-grid{ grid-template-columns:1fr!important; } } /* v1.3.214 - category/search list view: compact horizontal news rows */ .buzz-category-magazine.category-view-list .buzz-category-latest-grid, .buzz-search-magazine.search-view-list .buzz-category-latest-grid{ grid-template-columns:minmax(0,1fr)!important; gap:0!important; border-top:1px solid var(--line)!important; border-left:1px solid var(--line)!important; border-right:1px solid var(--line)!important; } .buzz-category-magazine.category-view-list .buzz-category-latest-grid > article, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > article{ display:grid!important; grid-template-columns:192px minmax(0,1fr)!important; grid-template-rows:auto auto auto!important; column-gap:20px!important; row-gap:7px!important; align-items:start!important; min-width:0!important; margin:0!important; padding:14px 20px!important; border:0!important; border-bottom:1px solid var(--line)!important; border-radius:0!important; background:var(--panel)!important; box-shadow:none!important; } .buzz-category-magazine.category-view-list .buzz-category-grid-media, .buzz-search-magazine.search-view-list .buzz-category-grid-media{ grid-column:1!important; grid-row:1 / span 3!important; display:block!important; width:192px!important; max-width:100%!important; aspect-ratio:4 / 3!important; margin:0!important; border-radius:0!important; overflow:hidden!important; } .buzz-category-magazine.category-view-list .buzz-category-grid-media img, .buzz-search-magazine.search-view-list .buzz-category-grid-media img, .buzz-category-magazine.category-view-list .buzz-category-grid-media .thumb-placeholder, .buzz-search-magazine.search-view-list .buzz-category-grid-media .thumb-placeholder{ width:100%!important; height:100%!important; object-fit:cover!important; } .buzz-category-magazine.category-view-list .buzz-category-latest-grid h3, .buzz-search-magazine.search-view-list .buzz-category-latest-grid h3{ grid-column:2!important; grid-row:1!important; display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; margin:0!important; font-size:24px!important; line-height:1.35!important; font-weight:900!important; letter-spacing:-.035em!important; } .buzz-category-magazine.category-view-list .buzz-category-grid-excerpt, .buzz-search-magazine.search-view-list .buzz-search-list-excerpt{ display:-webkit-box!important; grid-column:2!important; grid-row:2!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:1!important; overflow:hidden!important; margin:0!important; color:var(--muted)!important; font-size:16px!important; line-height:1.55!important; font-weight:400!important; letter-spacing:-.015em!important; } .buzz-category-magazine.category-view-list .buzz-category-latest-grid .meta, .buzz-search-magazine.search-view-list .buzz-category-latest-grid .meta{ grid-column:2!important; grid-row:3!important; align-self:end!important; margin:0!important; color:var(--muted)!important; font-size:14px!important; line-height:1.45!important; white-space:normal!important; } /* Keep list mode visually clean like the supplied reference. */ .buzz-search-magazine.search-view-list .buzz-card-category-flag{ display:none!important; } @media (max-width:700px){ .buzz-category-magazine.category-view-list .buzz-category-latest-grid, .buzz-search-magazine.search-view-list .buzz-category-latest-grid{ width:100%!important; margin-top:14px!important; } .buzz-category-magazine.category-view-list .buzz-category-latest-grid > article, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > article{ grid-template-columns:112px minmax(0,1fr)!important; grid-template-rows:auto auto auto!important; column-gap:12px!important; row-gap:5px!important; padding:12px 14px!important; } .buzz-category-magazine.category-view-list .buzz-category-grid-media, .buzz-search-magazine.search-view-list .buzz-category-grid-media{ width:112px!important; aspect-ratio:4 / 3!important; } .buzz-category-magazine.category-view-list .buzz-category-latest-grid h3, .buzz-search-magazine.search-view-list .buzz-category-latest-grid h3{ font-size:17px!important; line-height:1.4!important; -webkit-line-clamp:2!important; } .buzz-category-magazine.category-view-list .buzz-category-grid-excerpt, .buzz-search-magazine.search-view-list .buzz-search-list-excerpt{ font-size:13px!important; line-height:1.45!important; -webkit-line-clamp:1!important; } .buzz-category-magazine.category-view-list .buzz-category-latest-grid .meta, .buzz-search-magazine.search-view-list .buzz-category-latest-grid .meta{ font-size:12px!important; line-height:1.35!important; } } @media (max-width:390px){ .buzz-category-magazine.category-view-list .buzz-category-latest-grid > article, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > article{ grid-template-columns:96px minmax(0,1fr)!important; column-gap:10px!important; padding:10px!important; } .buzz-category-magazine.category-view-list .buzz-category-grid-media, .buzz-search-magazine.search-view-list .buzz-category-grid-media{ width:96px!important; } .buzz-category-magazine.category-view-list .buzz-category-latest-grid h3, .buzz-search-magazine.search-view-list .buzz-category-latest-grid h3{ font-size:15px!important; } } /* v1.3.215 - small view excerpts: show 3 lines */ [data-content-grid].content-view-small .post-card p, .search-results-grid.content-view-small .post-card p{ -webkit-line-clamp:3!important; } body.home.utillog-home-card-view-small .hero-main p{ -webkit-line-clamp:3!important; } .buzz-category-magazine.category-view-small .buzz-category-grid-excerpt, .buzz-search-magazine.search-view-small .buzz-search-list-excerpt{ -webkit-line-clamp:3!important; } @media (min-width:420px) and (max-width:700px){ [data-content-grid].content-view-small .post-card p, .search-results-grid.content-view-small .post-card p{ -webkit-line-clamp:3!important; } } @media (max-width:767px){ .buzz-category-magazine.category-view-small .buzz-category-grid-excerpt, .buzz-search-magazine.search-view-small .buzz-search-list-excerpt{ -webkit-line-clamp:3!important; } } /* v1.3.216 - small/list thumbnails use the same image frame as large view */ [data-content-grid].content-view-small .post-card > .media, .search-results-grid.content-view-small .post-card > .media, .post-grid.content-view-small .post-card > .media, [data-content-grid].content-view-list .post-card > .media, .search-results-grid.content-view-list .post-card > .media, .post-grid.content-view-list .post-card > .media, .buzz-category-magazine.category-view-small .buzz-category-grid-media, .buzz-search-magazine.search-view-small .buzz-category-grid-media, .buzz-category-magazine.category-view-list .buzz-category-grid-media, .buzz-search-magazine.search-view-list .buzz-category-grid-media{ position:relative!important; display:block!important; width:100%!important; aspect-ratio:4 / 3!important; height:auto!important; min-height:0!important; overflow:hidden!important; } [data-content-grid].content-view-small .post-card > .media > img, .search-results-grid.content-view-small .post-card > .media > img, .post-grid.content-view-small .post-card > .media > img, [data-content-grid].content-view-small .post-card > .media > .thumb-placeholder, .search-results-grid.content-view-small .post-card > .media > .thumb-placeholder, .post-grid.content-view-small .post-card > .media > .thumb-placeholder, [data-content-grid].content-view-list .post-card > .media > img, .search-results-grid.content-view-list .post-card > .media > img, .post-grid.content-view-list .post-card > .media > img, [data-content-grid].content-view-list .post-card > .media > .thumb-placeholder, .search-results-grid.content-view-list .post-card > .media > .thumb-placeholder, .post-grid.content-view-list .post-card > .media > .thumb-placeholder, .buzz-category-magazine.category-view-small .buzz-category-grid-media img, .buzz-search-magazine.search-view-small .buzz-category-grid-media img, .buzz-category-magazine.category-view-small .buzz-category-grid-media .thumb-placeholder, .buzz-search-magazine.search-view-small .buzz-category-grid-media .thumb-placeholder, .buzz-category-magazine.category-view-list .buzz-category-grid-media img, .buzz-search-magazine.search-view-list .buzz-category-grid-media img, .buzz-category-magazine.category-view-list .buzz-category-grid-media .thumb-placeholder, .buzz-search-magazine.search-view-list .buzz-category-grid-media .thumb-placeholder{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-height:0!important; object-fit:cover!important; object-position:center center!important; } [data-content-grid].content-view-list .post-card, .search-results-grid.content-view-list .post-card, .post-grid.content-view-list .post-card{ align-items:start!important; } @media (max-width:700px){ [data-content-grid].content-view-list .post-card, .search-results-grid.content-view-list .post-card, .post-grid.content-view-list .post-card{ grid-template-columns:112px minmax(0,1fr)!important; column-gap:12px!important; } [data-content-grid].content-view-list .post-card > .media, .search-results-grid.content-view-list .post-card > .media, .post-grid.content-view-list .post-card > .media{ width:112px!important; } } @media (max-width:390px){ [data-content-grid].content-view-list .post-card, .search-results-grid.content-view-list .post-card, .post-grid.content-view-list .post-card{ grid-template-columns:96px minmax(0,1fr)!important; column-gap:10px!important; } [data-content-grid].content-view-list .post-card > .media, .search-results-grid.content-view-list .post-card > .media, .post-grid.content-view-list .post-card > .media{ width:96px!important; } } /* v1.3.220 - small/list thumbnails follow large-view orientation-aware fitting */ [data-content-grid].content-view-small .post-card > .media, .search-results-grid.content-view-small .post-card > .media, .post-grid.content-view-small .post-card > .media, [data-content-grid].content-view-list .post-card > .media, .search-results-grid.content-view-list .post-card > .media, .post-grid.content-view-list .post-card > .media, .buzz-category-magazine.category-view-small .buzz-category-grid-media, .buzz-search-magazine.search-view-small .buzz-category-grid-media, .buzz-category-magazine.category-view-list .buzz-category-grid-media, .buzz-search-magazine.search-view-list .buzz-category-grid-media{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; aspect-ratio:4 / 3!important; height:auto!important; min-height:0!important; overflow:hidden!important; background:#f1f2f4!important; } [data-content-grid].content-view-small .post-card > .media > img, .search-results-grid.content-view-small .post-card > .media > img, .post-grid.content-view-small .post-card > .media > img, [data-content-grid].content-view-list .post-card > .media > img, .search-results-grid.content-view-list .post-card > .media > img, .post-grid.content-view-list .post-card > .media > img, .buzz-category-magazine.category-view-small .buzz-category-grid-media img, .buzz-search-magazine.search-view-small .buzz-category-grid-media img, .buzz-category-magazine.category-view-list .buzz-category-grid-media img, .buzz-search-magazine.search-view-list .buzz-category-grid-media img{ position:static!important; display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; margin:auto!important; object-fit:contain!important; object-position:center center!important; } [data-content-grid].content-view-small .post-card > .media > img.is-buzz-landscape, .search-results-grid.content-view-small .post-card > .media > img.is-buzz-landscape, .post-grid.content-view-small .post-card > .media > img.is-buzz-landscape, [data-content-grid].content-view-list .post-card > .media > img.is-buzz-landscape, .search-results-grid.content-view-list .post-card > .media > img.is-buzz-landscape, .post-grid.content-view-list .post-card > .media > img.is-buzz-landscape, .buzz-category-magazine.category-view-small .buzz-category-grid-media img.is-buzz-landscape, .buzz-search-magazine.search-view-small .buzz-category-grid-media img.is-buzz-landscape, .buzz-category-magazine.category-view-list .buzz-category-grid-media img.is-buzz-landscape, .buzz-search-magazine.search-view-list .buzz-category-grid-media img.is-buzz-landscape{ width:100%!important; height:auto!important; } [data-content-grid].content-view-small .post-card > .media > img.is-buzz-portrait, .search-results-grid.content-view-small .post-card > .media > img.is-buzz-portrait, .post-grid.content-view-small .post-card > .media > img.is-buzz-portrait, [data-content-grid].content-view-list .post-card > .media > img.is-buzz-portrait, .search-results-grid.content-view-list .post-card > .media > img.is-buzz-portrait, .post-grid.content-view-list .post-card > .media > img.is-buzz-portrait, .buzz-category-magazine.category-view-small .buzz-category-grid-media img.is-buzz-portrait, .buzz-search-magazine.search-view-small .buzz-category-grid-media img.is-buzz-portrait, .buzz-category-magazine.category-view-list .buzz-category-grid-media img.is-buzz-portrait, .buzz-search-magazine.search-view-list .buzz-category-grid-media img.is-buzz-portrait{ width:auto!important; height:100%!important; } [data-content-grid].content-view-small .post-card > .media > img.is-buzz-square, .search-results-grid.content-view-small .post-card > .media > img.is-buzz-square, .post-grid.content-view-small .post-card > .media > img.is-buzz-square, [data-content-grid].content-view-list .post-card > .media > img.is-buzz-square, .search-results-grid.content-view-list .post-card > .media > img.is-buzz-square, .post-grid.content-view-list .post-card > .media > img.is-buzz-square, .buzz-category-magazine.category-view-small .buzz-category-grid-media img.is-buzz-square, .buzz-search-magazine.search-view-small .buzz-category-grid-media img.is-buzz-square, .buzz-category-magazine.category-view-list .buzz-category-grid-media img.is-buzz-square, .buzz-search-magazine.search-view-list .buzz-category-grid-media img.is-buzz-square{ width:100%!important; height:100%!important; } [data-content-grid].content-view-small .post-card > .media > .thumb-placeholder, .search-results-grid.content-view-small .post-card > .media > .thumb-placeholder, .post-grid.content-view-small .post-card > .media > .thumb-placeholder, [data-content-grid].content-view-list .post-card > .media > .thumb-placeholder, .search-results-grid.content-view-list .post-card > .media > .thumb-placeholder, .post-grid.content-view-list .post-card > .media > .thumb-placeholder, .buzz-category-magazine.category-view-small .buzz-category-grid-media .thumb-placeholder, .buzz-search-magazine.search-view-small .buzz-category-grid-media .thumb-placeholder, .buzz-category-magazine.category-view-list .buzz-category-grid-media .thumb-placeholder, .buzz-search-magazine.search-view-list .buzz-category-grid-media .thumb-placeholder{ position:static!important; display:block!important; width:100%!important; height:100%!important; min-height:0!important; } /* v1.3.220 - small view excerpts show 3 lines on desktop too */ [data-content-grid].content-view-small .post-card p, .search-results-grid.content-view-small .post-card p, .post-grid.content-view-small .post-card p, .buzz-category-magazine.category-view-small .buzz-category-grid-excerpt, .buzz-search-magazine.search-view-small .buzz-search-list-excerpt{ display:-webkit-box!important; -webkit-box-orient:vertical!important; overflow:hidden!important; -webkit-line-clamp:3!important; } @media (min-width:768px){ [data-content-grid].content-view-small .post-card p, .search-results-grid.content-view-small .post-card p, .post-grid.content-view-small .post-card p, .buzz-category-magazine.category-view-small .buzz-category-grid-excerpt, .buzz-search-magazine.search-view-small .buzz-search-list-excerpt{ display:-webkit-box!important; -webkit-box-orient:vertical!important; overflow:hidden!important; -webkit-line-clamp:3!important; } } /* v1.3.220 - desktop list view uses 2 columns */ @media (min-width:1101px){ [data-content-grid].content-view-list, .search-results-grid.content-view-list, .post-grid.content-view-list{ grid-template-columns:repeat(2, minmax(0, 1fr))!important; gap:16px!important; align-items:start!important; } [data-content-grid].content-view-list .post-card, .search-results-grid.content-view-list .post-card, .post-grid.content-view-list .post-card{ height:100%!important; } .buzz-category-magazine.category-view-list .buzz-category-latest-grid, .buzz-search-magazine.search-view-list .buzz-category-latest-grid{ grid-template-columns:repeat(2, minmax(0, 1fr))!important; gap:16px!important; border:0!important; } .buzz-category-magazine.category-view-list .buzz-category-latest-grid > article, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > article{ height:100%!important; border:1px solid var(--line)!important; } } /* v1.3.220 - desktop list view: no border/background, 3-line excerpts */ @media (min-width:1101px){ [data-content-grid].content-view-list, .search-results-grid.content-view-list, .post-grid.content-view-list, .buzz-category-magazine.category-view-list .buzz-category-latest-grid, .buzz-search-magazine.search-view-list .buzz-category-latest-grid{ border:0!important; background:transparent!important; } [data-content-grid].content-view-list .post-card, .search-results-grid.content-view-list .post-card, .post-grid.content-view-list .post-card, .buzz-category-magazine.category-view-list .buzz-category-latest-grid > article, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > article{ border:0!important; background:transparent!important; box-shadow:none!important; } [data-content-grid].content-view-list .post-card p, .search-results-grid.content-view-list .post-card p, .post-grid.content-view-list .post-card p, .buzz-category-magazine.category-view-list .buzz-category-grid-excerpt, .buzz-search-magazine.search-view-list .buzz-search-list-excerpt{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:3!important; overflow:hidden!important; } } /* v1.3.221 - list view polish: 12px date on desktop, borderless/transparent on mobile */ @media (min-width:1101px){ [data-content-grid].content-view-list .post-card .meta, .search-results-grid.content-view-list .post-card .meta, .post-grid.content-view-list .post-card .meta, .buzz-category-magazine.category-view-list .buzz-category-latest-grid .meta, .buzz-search-magazine.search-view-list .buzz-category-latest-grid .meta{ font-size:12px!important; line-height:1.4!important; } } @media (max-width:1100px){ [data-content-grid].content-view-list, .search-results-grid.content-view-list, .post-grid.content-view-list, .buzz-category-magazine.category-view-list .buzz-category-latest-grid, .buzz-search-magazine.search-view-list .buzz-category-latest-grid{ border:0!important; background:transparent!important; box-shadow:none!important; } [data-content-grid].content-view-list .post-card, .search-results-grid.content-view-list .post-card, .post-grid.content-view-list .post-card, .buzz-category-magazine.category-view-list .buzz-category-latest-grid > article, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > article{ border:0!important; background:transparent!important; box-shadow:none!important; } } /* v1.3.222 - list row vertical padding */ .buzz-category-magazine.category-view-list .buzz-category-latest-grid > article, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > article{ padding:14px 0!important; } @media (max-width:700px){ .buzz-category-magazine.category-view-list .buzz-category-latest-grid > article, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > article{ padding:12px 0!important; } } /* v1.3.223 - slightly larger list thumbnails so image bottom aligns with date row */ .buzz-category-magazine.category-view-list .buzz-category-latest-grid > article, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > article{ grid-template-columns:208px minmax(0,1fr)!important; } .buzz-category-magazine.category-view-list .buzz-category-grid-media, .buzz-search-magazine.search-view-list .buzz-category-grid-media{ width:208px!important; } @media (max-width:700px){ .buzz-category-magazine.category-view-list .buzz-category-latest-grid > article, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > article{ grid-template-columns:124px minmax(0,1fr)!important; } .buzz-category-magazine.category-view-list .buzz-category-grid-media, .buzz-search-magazine.search-view-list .buzz-category-grid-media{ width:124px!important; } } @media (max-width:390px){ .buzz-category-magazine.category-view-list .buzz-category-latest-grid > article, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > article{ grid-template-columns:104px minmax(0,1fr)!important; } .buzz-category-magazine.category-view-list .buzz-category-grid-media, .buzz-search-magazine.search-view-list .buzz-category-grid-media{ width:104px!important; } } /* v1.3.225 - tablet side gutters */ @media (min-width:701px) and (max-width:1024px){ .buzz-category-magazine, .buzz-search-magazine{ width:calc(100% - 32px)!important; max-width:calc(100% - 32px)!important; margin-left:auto!important; margin-right:auto!important; padding-left:0!important; padding-right:0!important; } } /* v1.3.226 - tablet small view: skeletons only fill the incomplete final row */ .buzz-tablet-fill-skeleton{ display:none!important; } @media (min-width:701px) and (max-width:1024px){ /* Keep generic server filler hidden on tablet because it is based on the desktop column count. Tablet-specific fillers below match the 3-column row. */ .buzz-category-magazine .buzz-category-latest-grid > .buzz-category-grid-skeleton:not(.buzz-tablet-fill-skeleton), .buzz-search-magazine .buzz-category-latest-grid > .buzz-search-grid-skeleton:not(.buzz-tablet-fill-skeleton), .buzz-search-magazine .buzz-category-latest-grid > .buzz-category-grid-skeleton:not(.buzz-tablet-fill-skeleton){ display:none!important; } .buzz-category-magazine.category-view-small .buzz-category-latest-grid > .buzz-tablet-fill-skeleton, .buzz-search-magazine.search-view-small .buzz-category-latest-grid > .buzz-tablet-fill-skeleton{ display:block!important; } } /* v1.3.227 - tablet list view uses 2 columns */ @media (min-width:701px) and (max-width:1024px){ [data-content-grid].content-view-list, .search-results-grid.content-view-list, .post-grid.content-view-list, .buzz-category-magazine.category-view-list .buzz-category-latest-grid, .buzz-search-magazine.search-view-list .buzz-category-latest-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px 20px!important; align-items:start!important; } .buzz-category-magazine.category-view-list .buzz-category-latest-grid, .buzz-search-magazine.search-view-list .buzz-category-latest-grid{ border:0!important; background:transparent!important; } .buzz-category-magazine.category-view-list .buzz-category-latest-grid > article, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > article{ height:100%!important; grid-template-columns:160px minmax(0,1fr)!important; column-gap:14px!important; padding:14px 0!important; border:0!important; background:transparent!important; box-shadow:none!important; } .buzz-category-magazine.category-view-list .buzz-category-grid-media, .buzz-search-magazine.search-view-list .buzz-category-grid-media{ width:160px!important; } .buzz-category-magazine.category-view-list .buzz-category-grid-excerpt, .buzz-search-magazine.search-view-list .buzz-search-list-excerpt{ -webkit-line-clamp:3!important; } } /* v1.3.228 - tablet list view: never show filler skeletons in an empty final slot */ @media (min-width:701px) and (max-width:1024px){ .buzz-category-magazine.category-view-list .buzz-category-latest-grid > .buzz-category-skeleton, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > .buzz-category-skeleton, .buzz-category-magazine.category-view-list .buzz-category-latest-grid > .buzz-tablet-fill-skeleton, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > .buzz-tablet-fill-skeleton{ display:none!important; } } /* v1.3.229 - common responsive list rule: never render filler skeletons in empty list slots */ .buzz-category-magazine.category-view-list .buzz-category-latest-grid > .buzz-category-skeleton, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > .buzz-category-skeleton, .buzz-category-magazine.category-view-list .buzz-category-latest-grid > .buzz-tablet-fill-skeleton, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > .buzz-tablet-fill-skeleton{ display:none!important; } /* v1.3.230 - responsive final-row filler skeletons */ .buzz-responsive-fill-skeleton{ display:none!important; } .buzz-category-magazine.category-view-large .buzz-category-latest-grid > .buzz-responsive-fill-skeleton.is-active, .buzz-search-magazine.search-view-large .buzz-category-latest-grid > .buzz-responsive-fill-skeleton.is-active, .buzz-category-magazine.category-view-small .buzz-category-latest-grid > .buzz-responsive-fill-skeleton.is-active, .buzz-search-magazine.search-view-small .buzz-category-latest-grid > .buzz-responsive-fill-skeleton.is-active{ display:block!important; } .buzz-category-magazine.category-view-list .buzz-category-latest-grid > .buzz-responsive-fill-skeleton.is-active, .buzz-search-magazine.search-view-list .buzz-category-latest-grid > .buzz-responsive-fill-skeleton.is-active{ display:grid!important; } /* v1.3.231 tune category/search feature strip image balance on desktop */ @media (min-width: 981px){ .buzz-category-feature-grid{ grid-template-columns:minmax(0,1fr) 294px; gap:14px; } .buzz-category-main-column{ grid-template-columns:minmax(0,1.28fr) minmax(320px,.94fr); gap:14px; } .buzz-category-featured-copy{ padding-top:10px; } .buzz-category-side-stories{ gap:14px; } .buzz-category-side-stories article{ grid-template-columns:154px minmax(0,1fr); gap:14px; padding-bottom:15px; } .buzz-category-side-stories h3{ margin-bottom:8px; } .buzz-category-side-stories p{ margin-bottom:8px; } } /* v1.3.238 - requested center side-story column width */ @media (min-width:981px){ .buzz-category-side-stories article{ grid-template-columns:127px minmax(0,1fr)!important; } } /* v1.3.239 - clamp featured left description to 3 lines */ .buzz-category-featured-copy p{display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:3!important;overflow:hidden!important} /* v1.3.240 - featured left description: true 3-line output */ .buzz-category-featured-copy p{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:3!important; overflow:hidden!important; min-height:calc(3 * 1.65em)!important; max-height:calc(3 * 1.65em)!important; } /* v1.3.241 - side stories: align every card from the top and use gap only. No row gets its spacing from top/bottom padding, so first/next rows keep the same visual rhythm on desktop, tablet and mobile. */ html body .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ align-content:start!important; align-items:start!important; row-gap:14px!important; } html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ padding-top:0!important; padding-bottom:0!important; margin-top:0!important; margin-bottom:0!important; border-bottom:0!important; align-items:start!important; align-self:start!important; } html body .buzz-category-side-stories > article > .buzz-category-side-media, html body .buzz-search-magazine .buzz-category-side-stories > article > .buzz-category-side-media, html body .buzz-category-side-stories > article > div, html body .buzz-search-magazine .buzz-category-side-stories > article > div{ align-self:start!important; } @media (min-width:981px){ html body .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ row-gap:14px!important; } html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ grid-template-columns:127px minmax(0,1fr)!important; column-gap:14px!important; } html body .buzz-category-side-media, html body .buzz-search-magazine .buzz-category-side-media{ width:127px!important; min-width:127px!important; } } @media (min-width:701px) and (max-width:1024px){ html body .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ row-gap:14px!important; } html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ padding:0!important; align-items:start!important; } } @media (max-width:700px){ html body .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ row-gap:12px!important; } html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ padding:0!important; align-items:start!important; } } /* v1.3.242 - normalize side-story row rhythm from the TOP. Older rules still used fixed/stretch grid rows (repeat(...,1fr) + height:100%), which could make the first gap look larger. Remove those constraints and let every row start naturally from its content top. */ html body .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ grid-template-rows:none!important; grid-auto-rows:max-content!important; grid-auto-flow:row!important; height:auto!important; min-height:0!important; align-content:start!important; } html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ height:auto!important; min-height:0!important; margin:0!important; padding:0!important; align-self:start!important; align-items:start!important; } html body .buzz-category-side-stories > article:first-child, html body .buzz-search-magazine .buzz-category-side-stories > article:first-child, html body .buzz-category-side-stories > article:last-child, html body .buzz-search-magazine .buzz-category-side-stories > article:last-child{ margin:0!important; padding:0!important; } @media (min-width:981px){ html body .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ row-gap:14px!important; } } @media (min-width:701px) and (max-width:1024px){ html body .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ grid-auto-rows:max-content!important; height:auto!important; align-content:start!important; row-gap:14px!important; } } @media (max-width:700px){ html body .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ grid-auto-rows:max-content!important; height:auto!important; align-content:start!important; row-gap:12px!important; } } /* v1.3.243 - remove mobile/tablet divider lines from side stories */ @media (max-width:1024px){ html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ border-top:0!important; border-bottom:0!important; box-shadow:none!important; } } /* v1.3.244 - remove outer left/right rails from list view */ .buzz-category-magazine.category-view-list .buzz-category-latest-grid, .buzz-search-magazine.search-view-list .buzz-category-latest-grid{ border-left:0!important; border-right:0!important; } /* v1.3.245 - remove remaining tablet/mobile side-story card rails */ @media (max-width:1024px){ html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ border:0!important; border-left:0!important; border-right:0!important; border-top:0!important; border-bottom:0!important; outline:0!important; box-shadow:none!important; } } /* v1.3.249 - keep PC/tablet exactly as v1.3.245; adjust side stories only on mobile */ @media (max-width:700px){ html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ grid-template-columns:124px minmax(0,1fr)!important; column-gap:12px!important; align-items:stretch!important; } html body .buzz-category-side-media, html body .buzz-search-magazine .buzz-category-side-media{ width:124px!important; min-width:124px!important; aspect-ratio:4/3!important; align-self:start!important; } html body .buzz-category-side-stories > article > div, html body .buzz-search-magazine .buzz-category-side-stories > article > div{ min-width:0!important; height:100%!important; display:flex!important; flex-direction:column!important; align-self:stretch!important; } html body .buzz-category-side-stories > article > div > h3, html body .buzz-search-magazine .buzz-category-side-stories > article > div > h3{ margin-top:0!important; } html body .buzz-category-side-stories > article > div > .meta, html body .buzz-search-magazine .buzz-category-side-stories > article > div > .meta{ margin-top:auto!important; } } @media (max-width:390px){ html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ grid-template-columns:104px minmax(0,1fr)!important; column-gap:10px!important; } html body .buzz-category-side-media, html body .buzz-search-magazine .buzz-category-side-media{ width:104px!important; min-width:104px!important; } } /* v1.3.250 - tablet: first row left/right must start on the same top line. Match the legacy :is(...ID...) specificity so old 8px top-padding rules cannot push the right card down. */ @media (min-width:701px) and (max-width:1024px){ html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ padding-top:0!important; padding-bottom:0!important; margin-top:0!important; margin-bottom:0!important; align-self:start!important; align-items:start!important; } html body .buzz-category-side-stories > article:first-child, html body .buzz-category-side-stories > article:nth-child(2){ padding-top:0!important; margin-top:0!important; } html body .buzz-category-side-stories{ align-items:start!important; align-content:start!important; grid-auto-rows:max-content!important; } html body .buzz-category-side-stories > article > .buzz-category-side-media, html body .buzz-category-side-stories > article > div{ margin-top:0!important; align-self:start!important; } } /* v1.3.251 - tablet spacing + side stories one item per row */ @media (min-width:701px) and (max-width:1024px){ /* Give tablet layouts more breathing room at the viewport edges. */ html body .buzz-category-magazine, html body .buzz-search-magazine{ box-sizing:border-box!important; padding-left:24px!important; padding-right:24px!important; } /* Side stories: one card per row so there is never an empty second column. */ html body .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ display:grid!important; grid-template-columns:1fr!important; grid-auto-rows:max-content!important; grid-auto-flow:row!important; gap:14px!important; width:100%!important; min-width:0!important; align-content:start!important; align-items:start!important; } html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ width:100%!important; min-width:0!important; grid-column:1 / -1!important; grid-template-columns:160px minmax(0,1fr)!important; column-gap:14px!important; padding:0!important; margin:0!important; align-items:start!important; align-self:start!important; } html body .buzz-category-side-media, html body .buzz-search-magazine .buzz-category-side-media{ width:160px!important; min-width:160px!important; aspect-ratio:4/3!important; align-self:start!important; } html body .buzz-category-side-stories > article > div, html body .buzz-search-magazine .buzz-category-side-stories > article > div{ min-width:0!important; align-self:start!important; } } /* v1.3.252 - side-story titles max 2 lines */ html body .buzz-category-side-stories h3, html body .buzz-search-magazine .buzz-category-side-stories h3{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; max-height:calc(2 * 1.42em)!important; } /* v1.3.253 - non-PC side stories always use the single-row list pattern. PC (1025px+) remains untouched. Tablet/mobile keep side margins and never switch back to a two-column side-story grid around 700px. */ @media (max-width:1024px){ html body .buzz-category-magazine, html body .buzz-search-magazine{ box-sizing:border-box!important; padding-left:20px!important; padding-right:20px!important; } html body .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ display:grid!important; grid-template-columns:1fr!important; grid-auto-flow:row!important; grid-auto-rows:max-content!important; gap:14px!important; width:100%!important; min-width:0!important; align-content:start!important; align-items:start!important; } html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ grid-column:1 / -1!important; width:100%!important; min-width:0!important; margin:0!important; padding:0!important; display:grid!important; grid-template-columns:160px minmax(0,1fr)!important; column-gap:16px!important; align-items:start!important; align-self:start!important; } html body .buzz-category-side-media, html body .buzz-search-magazine .buzz-category-side-media{ width:160px!important; min-width:160px!important; aspect-ratio:4/3!important; align-self:start!important; } html body .buzz-category-side-stories > article > div, html body .buzz-search-magazine .buzz-category-side-stories > article > div{ min-width:0!important; align-self:start!important; } html body .buzz-category-side-stories h3, html body .buzz-search-magazine .buzz-category-side-stories h3{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; } } /* Compact widths still keep ONE card per row; only thumbnail size changes. */ @media (max-width:700px){ html body .buzz-category-magazine, html body .buzz-search-magazine{ padding-left:16px!important; padding-right:16px!important; } html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ grid-template-columns:124px minmax(0,1fr)!important; column-gap:12px!important; } html body .buzz-category-side-media, html body .buzz-search-magazine .buzz-category-side-media{ width:124px!important; min-width:124px!important; } } @media (max-width:390px){ html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ grid-template-columns:104px minmax(0,1fr)!important; column-gap:10px!important; } html body .buzz-category-side-media, html body .buzz-search-magazine .buzz-category-side-media{ width:104px!important; min-width:104px!important; } } /* v1.3.254 - restore vertical breathing room on tablet/non-PC single-row side stories */ @media (min-width:701px) and (max-width:1024px){ html body .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ row-gap:22px!important; gap:22px!important; } html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ padding-top:0!important; padding-bottom:0!important; margin:0!important; } } /* v1.3.255 - use the SAME side-story layout as mobile for every non-PC width. PC (1025px+) is untouched. */ @media (max-width:1024px){ html body .buzz-category-magazine, html body .buzz-search-magazine{ box-sizing:border-box!important; padding-left:16px!important; padding-right:16px!important; } html body .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ display:grid!important; grid-template-columns:1fr!important; grid-auto-flow:row!important; grid-auto-rows:max-content!important; gap:14px!important; row-gap:14px!important; width:100%!important; min-width:0!important; height:auto!important; align-content:start!important; align-items:start!important; } html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ grid-column:1 / -1!important; width:100%!important; min-width:0!important; height:auto!important; margin:0!important; padding:0!important; display:grid!important; grid-template-columns:124px minmax(0,1fr)!important; column-gap:12px!important; align-items:start!important; align-self:start!important; } html body .buzz-category-side-media, html body .buzz-search-magazine .buzz-category-side-media{ width:124px!important; min-width:124px!important; height:auto!important; aspect-ratio:4/3!important; align-self:start!important; overflow:hidden!important; } html body .buzz-category-side-media img, html body .buzz-search-magazine .buzz-category-side-media img{ width:100%!important; height:100%!important; object-fit:cover!important; display:block!important; } html body .buzz-category-side-stories > article > div, html body .buzz-search-magazine .buzz-category-side-stories > article > div{ min-width:0!important; height:auto!important; align-self:start!important; } html body .buzz-category-side-stories h3, html body .buzz-search-magazine .buzz-category-side-stories h3{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; } } @media (max-width:390px){ html body .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ grid-template-columns:104px minmax(0,1fr)!important; column-gap:10px!important; } html body .buzz-category-side-media, html body .buzz-search-magazine .buzz-category-side-media{ width:104px!important; min-width:104px!important; } } /* v1.3.256 - stack Weekly Ranking and Editor's Pick in a single column on non-PC widths */ @media (max-width:1024px){ html body .buzz-category-aside{ display:grid!important; grid-template-columns:1fr!important; gap:14px!important; align-items:start!important; } html body .buzz-category-ranking-card, html body .buzz-category-editor-card{ width:100%!important; height:auto!important; margin:0!important; align-self:start!important; } html body .buzz-category-ranking-card ol{ gap:12px!important; } html body .buzz-category-editor-card h3{ margin-top:10px!important; } } body.search .buzz-search-controls.is-category-disabled{justify-content:flex-end}body.search .buzz-search-controls.is-category-disabled .buzz-search-view-switcher{margin-left:auto}@media(max-width:700px){body.search .buzz-search-controls.is-category-disabled{justify-content:flex-end}} /* v1.3.267 - encoding-safe search icons */ .buzz-search-icon{position:relative} /* v1.3.270 - SVG search icons */ .buzz-search-icon .buzz-search-svg{display:block;width:22px;height:22px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} /* v1.3.271 - tablet hero ratio refinement */ @media (min-width: 981px) and (max-width: 1240px){ html body.home .buzz-hero{ grid-template-columns:minmax(0,1.65fr) minmax(300px,.95fr)!important; gap:18px!important; align-items:start!important; } html body.home .buzz-hero-main, html body.home .buzz-hero-side-card{ min-height:0!important; height:auto!important; align-self:start!important; } html body.home .buzz-hero-main .buzz-hero-media{ aspect-ratio:4/3!important; min-height:0!important; } html body.home .buzz-hero-main .buzz-hero-copy{ left:24px!important; right:24px!important; bottom:24px!important; width:auto!important; max-width:520px!important; } html body.home .buzz-hero-main .buzz-hero-copy h1{ font-size:clamp(34px,4vw,50px)!important; line-height:1.08!important; letter-spacing:-.045em!important; max-width:11em!important; margin:14px 0 12px!important; } html body.home .buzz-hero-main .buzz-hero-copy p{ font-size:14px!important; line-height:1.55!important; margin:0 0 18px!important; max-width:30em!important; } html body.home .buzz-hero-main .buzz-read-button{ padding:10px 15px!important; font-size:12px!important; } html body.home .buzz-hero-side-card > a{ display:grid!important; grid-template-rows:auto auto!important; height:auto!important; min-height:0!important; } html body.home .buzz-side-copy{ padding:22px 24px 14px!important; } html body.home .buzz-side-copy h2{ font-size:clamp(28px,3.4vw,40px)!important; line-height:1.12!important; letter-spacing:-.04em!important; margin:12px 0!important; } html body.home .buzz-side-copy p{ font-size:14px!important; line-height:1.55!important; margin:0 0 10px!important; } html body.home .buzz-inline-link{ font-size:12px!important; } html body.home .buzz-hero-side-card .buzz-side-media{ width:100%!important; aspect-ratio:4/3!important; min-height:0!important; margin-top:0!important; } } /* v1.3.272 - tablet today buzz single column */ @media (min-width: 641px) and (max-width: 980px){ html body.home .buzz-today .buzz-five-grid{ grid-template-columns:1fr!important; gap:18px!important; } html body.home .buzz-today .buzz-story-card, html body.home .buzz-today .buzz-story-card:last-child{ grid-column:auto!important; } html body.home .buzz-today .buzz-story-card a{ display:grid!important; grid-template-columns:minmax(200px, 260px) minmax(0, 1fr)!important; gap:18px!important; align-items:start!important; } html body.home .buzz-today .buzz-story-media{ aspect-ratio:4/3!important; min-height:0!important; } html body.home .buzz-today .buzz-story-card h3{ margin:0 0 8px!important; font-size:clamp(28px, 3.2vw, 36px)!important; line-height:1.18!important; } html body.home .buzz-today .buzz-story-card p{ font-size:15px!important; line-height:1.7!important; margin:0!important; } } /* v1.3.273 - tablet TODAY'S BUZZ true single-column cards * v1.3.272 used a horizontal grid inside each card, which caused the * title/description to auto-place into separate grid cells. Tablet now uses * the same natural card flow as mobile, one complete card per row. */ @media (min-width:641px) and (max-width:980px){ html body.home .buzz-today .buzz-five-grid{ display:grid!important; grid-template-columns:1fr!important; gap:24px!important; } html body.home .buzz-today .buzz-story-card, html body.home .buzz-today .buzz-story-card:last-child{ display:block!important; grid-column:auto!important; width:100%!important; min-width:0!important; } html body.home .buzz-today .buzz-story-card > a{ display:block!important; width:100%!important; } html body.home .buzz-today .buzz-story-media{ width:100%!important; aspect-ratio:4/3!important; min-height:0!important; overflow:hidden!important; } html body.home .buzz-today .buzz-story-media img, html body.home .buzz-today .buzz-story-media .buzz-image-placeholder{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; } html body.home .buzz-today .buzz-story-card h3{ display:block!important; width:100%!important; margin:12px 0 6px!important; font-size:24px!important; line-height:1.32!important; letter-spacing:-.025em!important; } html body.home .buzz-today .buzz-story-card p{ display:block!important; width:100%!important; margin:0!important; font-size:15px!important; line-height:1.65!important; } } /* v1.3.274 - align BUZZ VIDEO media with ranking/list first row */ html body.home .buzz-video-card > div{ margin-top:9px!important; } /* v1.3.275 - mobile TODAY'S BUZZ single column */ @media (max-width:640px){ html body.home .buzz-today .buzz-five-grid{ display:grid!important; grid-template-columns:1fr!important; gap:24px!important; } html body.home .buzz-today .buzz-story-card, html body.home .buzz-today .buzz-story-card:last-child{ display:block!important; grid-column:auto!important; width:100%!important; min-width:0!important; } html body.home .buzz-today .buzz-story-card > a{ display:block!important; width:100%!important; } html body.home .buzz-today .buzz-story-media{ width:100%!important; aspect-ratio:4/3!important; min-height:0!important; overflow:hidden!important; } html body.home .buzz-today .buzz-story-media img, html body.home .buzz-today .buzz-story-media .buzz-image-placeholder{ display:block!important; width:100%!important; height:100%!important; object-fit:cover!important; } html body.home .buzz-today .buzz-story-card h3{ display:block!important; width:100%!important; margin:12px 0 6px!important; } html body.home .buzz-today .buzz-story-card p{ display:block!important; width:100%!important; margin:0!important; } } /* v1.3.276 - tablet TODAY'S BUZZ header uses mobile-style layout */ @media (min-width:641px) and (max-width:980px){ html body.home .buzz-today .buzz-section-head-inline{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; grid-template-areas: "title more" "chips chips"!important; align-items:start!important; gap:14px 16px!important; } html body.home .buzz-today .buzz-section-head-inline > h3{ grid-area:title!important; margin:0!important; font-size:clamp(24px,4vw,34px)!important; line-height:1.18!important; } html body.home .buzz-today .buzz-section-head-inline > .buzz-chips{ grid-area:chips!important; width:100%!important; display:flex!important; flex-wrap:nowrap!important; overflow-x:auto!important; overflow-y:hidden!important; gap:8px!important; padding-bottom:4px!important; -webkit-overflow-scrolling:touch!important; scrollbar-width:none!important; } html body.home .buzz-today .buzz-section-head-inline > .buzz-chips::-webkit-scrollbar{ display:none!important; } html body.home .buzz-today .buzz-section-head-inline > .buzz-chips a{ white-space:nowrap!important; flex:0 0 auto!important; } html body.home .buzz-today .buzz-section-head-inline > .buzz-more{ grid-area:more!important; margin-left:0!important; white-space:nowrap!important; align-self:start!important; justify-self:end!important; display:inline-flex!important; align-items:center!important; gap:4px!important; } } /* v1.3.280 - mobile view sheet Relay */ @media(max-width:700px){ .buzz-mobile-view-sheet-options{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:8px!important; } .buzz-mobile-view-option{ min-width:0!important; padding:10px 4px!important; } .buzz-mobile-view-option-icon-relay{ display:flex!important; align-items:center!important; justify-content:center!important; } .buzz-mobile-view-option-icon-relay svg{ display:block!important; width:24px!important; height:24px!important; fill:none!important; stroke:currentColor!important; stroke-width:1.8!important; stroke-linecap:round!important; stroke-linejoin:round!important; } } /* v1.3.282 - search "전체" list view keeps category flags visible */ .buzz-search-magazine.buzz-search-all-category.search-view-list .buzz-card-category-flag{ display:inline-flex!important; } .buzz-search-magazine.buzz-search-all-category.search-view-list .buzz-category-grid-media{ position:relative!important; } /* v1.3.284 - list flags use the exact same shared tiny badge sizing */ .buzz-search-magazine.buzz-search-all-category.search-view-list .buzz-card-category-flag{ display:inline-flex!important; } /* v1.3.285 - mobile search category flag sizing by available card space */ @media (max-width:700px){ /* 크게 / 리스트: 릴레이와 같은 표준 모바일 플래그 크기 */ .buzz-search-magazine.buzz-search-all-category.search-view-large .buzz-card-category-flag--tiny, .buzz-search-magazine.buzz-search-all-category.search-view-list .buzz-card-category-flag--tiny{ left:8px!important; top:8px!important; min-height:24px!important; padding:4px 9px!important; font-size:10px!important; line-height:1!important; font-weight:900!important; border-radius:999px!important; } /* 작게: 2열 이미지 공간에 맞춰 한 단계만 축소 */ .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag--tiny{ left:7px!important; top:7px!important; min-height:22px!important; padding:3px 8px!important; font-size:9px!important; line-height:1!important; font-weight:900!important; border-radius:999px!important; } } @media (max-width:390px){ .buzz-search-magazine.buzz-search-all-category.search-view-large .buzz-card-category-flag--tiny, .buzz-search-magazine.buzz-search-all-category.search-view-list .buzz-card-category-flag--tiny{ left:7px!important; top:7px!important; min-height:22px!important; padding:3px 8px!important; font-size:9px!important; } .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag--tiny{ left:6px!important; top:6px!important; min-height:20px!important; padding:3px 7px!important; font-size:8px!important; } } /* v1.3.286 - mobile category flag font size unified */ @media (max-width:700px){ .buzz-search-magazine.buzz-search-all-category .buzz-card-category-flag, .buzz-search-magazine.buzz-search-all-category .buzz-card-category-flag--tiny, .buzz-shorts-virtual-active .buzz-card-category-flag, .buzz-shorts-virtual-active .buzz-card-category-flag--tiny{ font-size:10px!important; } } @media (max-width:390px){ .buzz-search-magazine.buzz-search-all-category .buzz-card-category-flag, .buzz-search-magazine.buzz-search-all-category .buzz-card-category-flag--tiny, .buzz-shorts-virtual-active .buzz-card-category-flag, .buzz-shorts-virtual-active .buzz-card-category-flag--tiny{ font-size:10px!important; } } /* v1.3.287 - category flag font size unified globally */ .buzz-card-category-flag, .buzz-card-category-flag--tiny, .buzz-shorts-virtual-active .buzz-card-category-flag, .buzz-shorts-virtual-active .buzz-card-category-flag--tiny, .search-view-large .buzz-card-category-flag, .search-view-large .buzz-card-category-flag--tiny, .search-view-small .buzz-card-category-flag, .search-view-small .buzz-card-category-flag--tiny, .search-view-list .buzz-card-category-flag, .search-view-list .buzz-card-category-flag--tiny{ font-size:10px!important; } /* v1.3.288 - hard lock category flag font size to 10px in every viewport/view */ html body .buzz-search-magazine.buzz-search-all-category.search-view-large .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-large .buzz-card-category-flag--tiny, html body .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag--tiny, html body .buzz-search-magazine.buzz-search-all-category.search-view-list .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-list .buzz-card-category-flag--tiny, html body .buzz-shorts-virtual-active .buzz-card-category-flag, html body .buzz-shorts-virtual-active .buzz-card-category-flag--tiny{ font-size:10px!important; } @media (max-width:700px){ html body .buzz-search-magazine.buzz-search-all-category.search-view-large .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-large .buzz-card-category-flag--tiny, html body .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag--tiny, html body .buzz-search-magazine.buzz-search-all-category.search-view-list .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-list .buzz-card-category-flag--tiny, html body .buzz-shorts-virtual-active .buzz-card-category-flag, html body .buzz-shorts-virtual-active .buzz-card-category-flag--tiny{ font-size:10px!important; } } @media (max-width:390px){ html body .buzz-search-magazine.buzz-search-all-category.search-view-large .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-large .buzz-card-category-flag--tiny, html body .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag--tiny, html body .buzz-search-magazine.buzz-search-all-category.search-view-list .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-list .buzz-card-category-flag--tiny, html body .buzz-shorts-virtual-active .buzz-card-category-flag, html body .buzz-shorts-virtual-active .buzz-card-category-flag--tiny{ font-size:10px!important; } } /* v1.3.289 - mobile small-view flag style matches all other views */ @media (max-width:700px){ html body .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag--tiny{ min-height:24px!important; padding:4px 9px!important; font-size:10px!important; line-height:1!important; border-radius:999px!important; } } @media (max-width:390px){ html body .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag--tiny{ min-height:24px!important; padding:4px 9px!important; font-size:10px!important; } } /* v1.3.293 - single authoritative category flag module */ html body .buzz-category-grid-media, html body .buzz-category-featured-media, html body .buzz-category-side-media, html body .buzz-category-editor-media, html body .buzz-search-popular-media, html body a:has(> .buzz-card-category-flag){ position:relative!important; } /* Search: large / small / list all use the exact same module */ html body .buzz-search-magazine.buzz-search-all-category.search-view-large .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-large .buzz-card-category-flag--tiny, html body .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-small .buzz-card-category-flag--tiny, html body .buzz-search-magazine.buzz-search-all-category.search-view-list .buzz-card-category-flag, html body .buzz-search-magazine.buzz-search-all-category.search-view-list .buzz-card-category-flag--tiny, html body .buzz-shorts-virtual-active .buzz-card-category-flag, html body .buzz-shorts-virtual-active .buzz-card-category-flag--tiny, html body .buzz-card-category-flag, html body .buzz-card-category-flag--tiny{ position:absolute!important; inset:auto!important; left:4px!important; top:4px!important; right:auto!important; bottom:auto!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:0!important; min-height:24px!important; margin:0!important; padding:4px 9px!important; font-size:10px!important; line-height:1!important; font-weight:900!important; border-radius:999px!important; box-sizing:border-box!important; transform:none!important; } /* v1.3.294 - restore tablet spacing for category side stories */ @media (min-width:701px) and (max-width:1024px){ html body .buzz-category-side-stories{ margin-top:16px!important; row-gap:16px!important; gap:16px!important; } html body .buzz-category-side-stories > article{ margin:0!important; } } /* v1.3.295 - restore real tablet spacing around category side stories */ @media (min-width:701px) and (max-width:1240px){ html body .buzz-category-feature-grid > .buzz-category-side-stories, html body .buzz-category-main-column > .buzz-category-side-stories, html body .buzz-search-feature-grid > .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories, html body .buzz-category-magazine .buzz-category-side-stories{ margin-top:20px!important; margin-bottom:20px!important; padding-top:0!important; padding-bottom:0!important; row-gap:18px!important; gap:18px!important; } html body .buzz-category-feature-grid > .buzz-category-side-stories > article, html body .buzz-category-main-column > .buzz-category-side-stories > article, html body .buzz-search-feature-grid > .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article, html body .buzz-category-magazine .buzz-category-side-stories > article{ margin:0!important; padding:0!important; } } /* At the normal <=1024 tablet breakpoint, keep one-card-per-row layout and make the vertical spacing explicit. */ @media (min-width:701px) and (max-width:1024px){ html body .buzz-category-magazine .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ display:grid!important; grid-template-columns:1fr!important; grid-auto-rows:max-content!important; align-content:start!important; row-gap:18px!important; } } /* v1.3.296 - tablet category side-story spacing, after removing fake-ID specificity */ @media (min-width:701px) and (max-width:1240px){ html body .buzz-category-magazine .buzz-category-side-stories, html body .buzz-search-magazine .buzz-category-side-stories{ margin-top:20px!important; margin-bottom:20px!important; display:grid!important; grid-template-columns:1fr!important; grid-auto-rows:max-content!important; align-content:start!important; row-gap:18px!important; column-gap:0!important; gap:18px 0!important; } html body .buzz-category-magazine .buzz-category-side-stories > article, html body .buzz-search-magazine .buzz-category-side-stories > article{ margin:0!important; padding-top:0!important; padding-bottom:0!important; } } /* v1.3.396 - balance the main category columns after the aside moves below */ @media (min-width:1025px) and (max-width:1240px){ html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-main-column{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:20px!important; align-items:start!important; width:100%!important; min-width:0!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) :is( .buzz-category-featured-card, .buzz-category-side-stories ){ width:100%!important; min-width:0!important; } } /* v1.3.297 - selected mobile view mode active state */ @media(max-width:700px){ .buzz-mobile-view-option.is-active{ border-color:var(--bk-pink)!important; background:var(--bk-pink)!important; color:#fff!important; box-shadow:0 4px 12px rgba(255,20,147,.20)!important; } .buzz-mobile-view-option.is-active .buzz-mobile-view-option-icon{ color:#fff!important; } .buzz-mobile-view-option.is-active svg{ stroke:currentColor!important; } html[data-theme="dark"] .buzz-mobile-view-option.is-active, body.dark-mode .buzz-mobile-view-option.is-active{ border-color:var(--bk-pink)!important; background:var(--bk-pink)!important; color:#fff!important; } } /* v1.3.298 - selected view uses text/icon color only, no filled background */ @media(max-width:700px){ .buzz-mobile-view-option.is-active{ background:transparent!important; color:var(--bk-pink)!important; border-color:#dfe3e8!important; box-shadow:none!important; } .buzz-mobile-view-option.is-active .buzz-mobile-view-option-icon{ color:var(--bk-pink)!important; } .buzz-mobile-view-option.is-active svg{ stroke:currentColor!important; } html[data-theme="dark"] .buzz-mobile-view-option.is-active, body.dark-mode .buzz-mobile-view-option.is-active{ background:transparent!important; color:var(--bk-pink)!important; border-color:#2a3340!important; box-shadow:none!important; } } /* v1.3.299 - mobile Large view is single-column through 700px */ @media (max-width:700px){ html body .buzz-category-magazine.category-view-large .buzz-category-latest-grid, html body .buzz-search-magazine.search-view-large .buzz-category-latest-grid{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:24px!important; width:100%!important; } html body .buzz-category-magazine.category-view-large .buzz-category-latest-grid > article, html body .buzz-search-magazine.search-view-large .buzz-category-latest-grid > article{ display:block!important; width:100%!important; min-width:0!important; } html body .buzz-category-magazine.category-view-large .buzz-category-grid-media, html body .buzz-search-magazine.search-view-large .buzz-category-grid-media{ display:block!important; width:100%!important; max-width:100%!important; aspect-ratio:4/3!important; margin:0 0 12px!important; } html body .buzz-category-magazine.category-view-large .buzz-category-grid-media img, html body .buzz-search-magazine.search-view-large .buzz-category-grid-media img{ display:block!important; width:100%!important; height:100%!important; object-fit:contain!important; } } /* v1.3.300 - tablet search toolbar sticky repair overflow-x:hidden on the magazine created a scroll container and broke sticky. */ @media (min-width:701px) and (max-width:1024px){ html body .buzz-search-magazine, html body .buzz-category-magazine{ overflow-x:clip!important; overflow-y:visible!important; } html body .buzz-search-magazine > .buzz-search-controls.buzz-page-toolbar, html body .buzz-category-magazine > .buzz-category-intro-top.buzz-page-toolbar{ position:-webkit-sticky!important; position:sticky!important; top:var(--buzz-site-header-height,0px)!important; z-index:90!important; background:var(--bg)!important; isolation:isolate!important; } } /* v1.3.301 - Galaxy Fold unfolded / tablet mobile-menu repair The drawer is used up to 980px, but several control styles stopped at 700px. */ @media (min-width:701px) and (max-width:980px){ /* Keep the drawer compact and independent of the wide unfolded viewport. */ html body .mobile-nav{ width:min(360px,88vw)!important; max-width:88vw!important; box-sizing:border-box!important; background:var(--bg)!important; overflow-y:auto!important; overflow-x:hidden!important; } html body .mobile-nav .mobile-nav-inner{ display:block!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; padding:12px 20px!important; box-sizing:border-box!important; } html body .mobile-nav .mobile-menu-primary, html body .mobile-nav .mobile-menu-secondary{ width:100%!important; margin:0!important; padding:0!important; } html body .mobile-nav .mobile-menu-primary > li, html body .mobile-nav .mobile-menu-secondary > li{ margin:0!important; padding:0!important; border-bottom:1px solid var(--line)!important; } html body .mobile-nav .mobile-menu-primary a, html body .mobile-nav .mobile-menu-secondary a, html body .mobile-nav .mobile-buzz-pick-button{ display:flex!important; align-items:center!important; min-height:56px!important; padding:0 8px!important; font-size:15px!important; line-height:1.35!important; font-weight:800!important; box-sizing:border-box!important; color:var(--text)!important; background:transparent!important; } /* Screen-mode section must use the same styled buttons as folded mobile. */ html body .mobile-nav .buzz-mobile-theme-section{ position:static!important; margin:8px 20px 0!important; padding:18px 0 4px!important; border-top:1px solid var(--line)!important; } html body .mobile-nav .buzz-mobile-theme-label{ margin:0 0 10px!important; color:var(--muted)!important; font-size:12px!important; line-height:1.2!important; font-weight:800!important; } html body .mobile-nav .buzz-mobile-theme-options{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:8px!important; } html body .mobile-nav .buzz-mobile-theme-button{ appearance:none!important; -webkit-appearance:none!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:0!important; height:38px!important; min-height:38px!important; margin:0!important; padding:0 12px!important; gap:6px!important; border:1px solid var(--line)!important; border-radius:999px!important; background:transparent!important; color:var(--text)!important; font:inherit!important; box-shadow:none!important; cursor:pointer!important; } html body .mobile-nav .buzz-mobile-theme-button span{ font-size:16px!important; line-height:1!important; } html body .mobile-nav .buzz-mobile-theme-button b{ font-size:12px!important; line-height:1.2!important; font-weight:800!important; white-space:nowrap!important; } html body .mobile-nav .buzz-mobile-theme-button.is-active{ border-color:var(--buzz-pink,#ff1684)!important; color:var(--buzz-pink,#ff1684)!important; background:transparent!important; } /* Language area follows the same drawer gutter and compact chip styling. */ html body .mobile-nav .buzz-mobile-language{ position:static!important; display:flex!important; flex-direction:column!important; margin:8px 20px calc(28px + env(safe-area-inset-bottom))!important; padding:18px 0 0!important; border-top:1px solid var(--line)!important; } html body .mobile-nav .buzz-mobile-language-label{ margin:0 0 10px!important; min-height:0!important; color:var(--muted)!important; font-size:12px!important; line-height:1.2!important; font-weight:850!important; } html body .mobile-nav .buzz-mobile-language .buzzkorea-language-switcher{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:7px!important; } html body .mobile-nav .buzz-mobile-language .buzz-lang-link{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:38px!important; height:38px!important; padding:0 10px!important; margin:0!important; border-radius:999px!important; font-size:11px!important; line-height:1!important; box-sizing:border-box!important; } html body .mobile-nav .buzz-mobile-language .buzz-lang-link.is-active{ width:38px!important; min-width:38px!important; padding:0!important; border-radius:50%!important; background:var(--buzz-pink,#ff1684)!important; border-color:var(--buzz-pink,#ff1684)!important; color:#fff!important; } html[data-theme="dark"] body .mobile-nav .buzz-mobile-theme-section, html[data-theme="dark"] body .mobile-nav .buzz-mobile-language{ border-color:#2a3340!important; } html[data-theme="dark"] body .mobile-nav .buzz-mobile-theme-button{ border-color:#2a3340!important; } } /* v1.3.302 - show language switcher in header on tablet/mobile */ .buzz-header-mobile-language{ display:none; } @media(max-width:1024px){ .buzz-header-mobile-language{ display:flex!important; align-items:center!important; justify-content:center!important; margin-left:auto!important; margin-right:8px!important; flex:0 0 auto!important; } .buzz-header-mobile-language .buzzkorea-language-switcher{ display:flex!important; align-items:center!important; gap:4px!important; margin:0!important; padding:0!important; } .buzz-header-mobile-language .buzz-lang-link{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:30px!important; height:30px!important; padding:0 8px!important; margin:0!important; border:1px solid var(--line)!important; border-radius:999px!important; background:transparent!important; color:var(--muted)!important; font-size:10px!important; line-height:1!important; font-weight:850!important; box-sizing:border-box!important; text-decoration:none!important; white-space:nowrap!important; } .buzz-header-mobile-language .buzz-lang-link.is-active{ min-width:30px!important; padding:0 8px!important; background:var(--buzz-pink,#ff1684)!important; border-color:var(--buzz-pink,#ff1684)!important; color:#fff!important; } } @media(max-width:700px){ .buzz-header-mobile-language{ margin-right:6px!important; } .buzz-header-mobile-language .buzz-lang-link{ min-width:28px!important; height:28px!important; padding:0 7px!important; font-size:10px!important; } } @media(min-width:1025px){ .buzz-header-mobile-language{ display:none!important; } } /* v1.3.303 - mobile/tablet header: logo left, language right on same row */ @media(max-width:1024px){ html body .site-header .container, html body .site-header-inner, html body .header-main, html body .header-row{ display:flex!important; align-items:center!important; } html body .site-header .site-branding, html body .site-header .custom-logo-link, html body .site-header .site-logo, html body .site-header .buzz-logo{ margin-right:auto!important; flex:0 1 auto!important; } html body .buzz-header-mobile-language{ display:flex!important; align-items:center!important; justify-content:flex-end!important; margin-left:auto!important; margin-right:0!important; flex:0 0 auto!important; position:static!important; align-self:center!important; } html body .buzz-header-mobile-language .buzzkorea-language-switcher{ display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:6px!important; margin:0!important; padding:0!important; } } /* v1.3.304 - mobile/tablet header is exactly one row: logo left, language right */ @media(max-width:1024px){ html body .buzz-header .buzz-brand-row{ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:space-between!important; width:100%!important; min-height:92px!important; gap:12px!important; } html body .buzz-header .buzz-mobile-header-spacer{ display:none!important; } html body .buzz-header .buzz-brand{ display:flex!important; align-items:center!important; justify-content:flex-start!important; flex:0 1 auto!important; width:auto!important; min-width:0!important; margin:0!important; justify-self:auto!important; grid-column:auto!important; } html body .buzz-header .buzz-brand .buzz-wordmark{ margin:0!important; } html body .buzz-header .buzz-header-mobile-language{ display:flex!important; align-items:center!important; justify-content:flex-end!important; flex:0 0 auto!important; width:auto!important; margin:0 0 0 auto!important; padding:0!important; position:static!important; align-self:center!important; } html body .buzz-header .buzz-header-mobile-language .buzzkorea-language-switcher{ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:flex-end!important; gap:6px!important; margin:0!important; padding:0!important; } /* Do not let the old centered 3-column mobile header layout reassert itself. */ html body .buzz-header .header-search, html body .buzz-header .buzz-mobile-actions{ flex:0 0 auto!important; } } @media(max-width:700px){ html body .buzz-header .buzz-brand-row{ min-height:84px!important; } } /* v1.3.305 - mobile/tablet search panel uses full available width */ @media(max-width:1024px){ html body .search-panel{ width:100%!important; } html body .search-panel > .container{ width:100%!important; max-width:none!important; margin:0!important; padding:16px 20px!important; box-sizing:border-box!important; } html body .search-panel form, html body .search-panel .search-form, html body .search-panel .buzz-search-form{ display:flex!important; align-items:center!important; width:100%!important; max-width:none!important; margin:0!important; gap:10px!important; } html body .search-panel form label, html body .search-panel .search-form label, html body .search-panel .buzz-search-form label{ display:block!important; flex:1 1 auto!important; width:auto!important; min-width:0!important; margin:0!important; } html body .search-panel input[type="search"], html body .search-panel .search-field{ width:100%!important; max-width:none!important; min-width:0!important; box-sizing:border-box!important; } html body .search-panel button[type="submit"], html body .search-panel input[type="submit"], html body .search-panel .search-submit{ flex:0 0 auto!important; width:auto!important; min-width:88px!important; margin:0!important; } } @media(max-width:700px){ html body .search-panel > .container{ padding:12px 16px!important; } html body .search-panel button[type="submit"], html body .search-panel input[type="submit"], html body .search-panel .search-submit{ min-width:72px!important; } } /* v1.3.306 - language switcher lives in header only */ @media(max-width:1024px){ html body .mobile-nav .buzz-mobile-language{ display:none!important; } } /* v1.3.307 - wider header language buttons for easier tapping */ @media(max-width:1024px){ html body .buzz-header-mobile-language .buzz-lang-link{ min-width:44px!important; height:32px!important; padding:0 12px!important; } html body .buzz-header-mobile-language .buzz-lang-link.is-active{ min-width:44px!important; padding:0 12px!important; } } @media(max-width:700px){ html body .buzz-header-mobile-language .buzz-lang-link{ min-width:42px!important; height:32px!important; padding:0 11px!important; } html body .buzz-header-mobile-language .buzz-lang-link.is-active{ min-width:42px!important; padding:0 11px!important; } } /* v1.3.308 - full language names in header */ @media(max-width:1024px){ html body .buzz-header-mobile-language .buzz-lang-link{ min-width:64px!important; height:32px!important; padding:0 12px!important; white-space:nowrap!important; } html body .buzz-header-mobile-language .buzz-lang-link.is-active{ min-width:64px!important; padding:0 12px!important; } } @media(max-width:700px){ html body .buzz-header-mobile-language .buzz-lang-link{ min-width:60px!important; height:32px!important; padding:0 10px!important; } html body .buzz-header-mobile-language .buzz-lang-link.is-active{ min-width:60px!important; padding:0 10px!important; } } /* v1.3.309 - header language label size */ @media(max-width:1024px){ html body .buzz-header-mobile-language .buzz-lang-link{ font-size:12px!important; } } /* v1.3.316 - mobile/tablet search panel: remove cancel button, add backdrop */ @media(max-width:1024px){ html body .search-panel-backdrop{ display:block!important; position:fixed!important; inset:0!important; z-index:100081!important; background:rgba(15,23,42,.30)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transition:opacity .22s ease, visibility .22s ease!important; touch-action:none!important; } html body .search-panel-backdrop.open{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; } html body .search-panel[data-search-panel]{ z-index:100082!important; } html body .buzz-mobile-search-cancel, html body [data-buzz-search-cancel]{ display:none!important; } } /* v1.3.317 - keep mobile bottom navigation interactive while search overlay is open */ @media(max-width:700px){ html.utillog-search-open body .buzz-mobile-global-bar{ z-index:100083!important; } } /* v1.3.318 - tablet search backdrop should begin below the open search panel */ @media (min-width:701px) and (max-width:1024px){ html body .search-panel-backdrop{ inset:auto 0 0 0 !important; top:var(--buzz-search-backdrop-top, 0) !important; } } /* v1.3.319 - mobile/tablet search form uses full available width */ @media(max-width:1024px){ html body .search-panel > .container{ width:100%!important; max-width:none!important; margin:0!important; padding:16px 20px!important; box-sizing:border-box!important; } html body .search-panel form, html body .search-panel .search-form, html body .search-panel .buzz-search-form{ display:grid!important; grid-template-columns:minmax(0,1fr) auto!important; align-items:stretch!important; width:100%!important; max-width:none!important; margin:0!important; gap:12px!important; } html body .search-panel form label, html body .search-panel .search-form label, html body .search-panel .buzz-search-form label{ display:block!important; width:100%!important; min-width:0!important; margin:0!important; } html body .search-panel input[type="search"], html body .search-panel .search-field{ width:100%!important; max-width:none!important; min-width:0!important; height:48px!important; box-sizing:border-box!important; } html body .search-panel button[type="submit"], html body .search-panel input[type="submit"], html body .search-panel .search-submit{ width:auto!important; min-width:104px!important; height:48px!important; margin:0!important; white-space:nowrap!important; } } @media(max-width:700px){ html body .search-panel > .container{ padding:12px 16px!important; } html body .search-panel form, html body .search-panel .search-form, html body .search-panel .buzz-search-form{ grid-template-columns:minmax(0,1fr)!important; } html body .search-panel button[type="submit"], html body .search-panel input[type="submit"], html body .search-panel .search-submit{ width:100%!important; min-width:0!important; } } /* v1.3.320 - full-width search panel with equal side gutters + view panel UI */ @media(max-width:1024px){ html body .search-panel > .container{ width:100%!important; max-width:none!important; margin:0!important; padding:12px!important; box-sizing:border-box!important; } html body .search-panel form, html body .search-panel .search-form, html body .search-panel .buzz-search-form{ display:flex!important; align-items:center!important; width:100%!important; max-width:none!important; min-width:0!important; margin:0!important; gap:12px!important; } html body .search-panel form label, html body .search-panel .search-form label, html body .search-panel .buzz-search-form label{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; } html body .search-panel input[type="search"], html body .search-panel .search-field{ flex:1 1 auto!important; width:auto!important; max-width:none!important; min-width:0!important; height:48px!important; box-sizing:border-box!important; } html body .search-panel button[type="submit"], html body .search-panel input[type="submit"], html body .search-panel .search-submit{ flex:0 0 auto!important; width:auto!important; min-width:96px!important; height:48px!important; margin:0!important; white-space:nowrap!important; } } @media(max-width:700px){ html body .search-panel > .container{ padding:10px 12px!important; } html body .search-panel button[type="submit"], html body .search-panel input[type="submit"], html body .search-panel .search-submit{ min-width:88px!important; } /* View now opens as a flat panel directly above the global bottom nav, matching the mobile search-panel interaction instead of a bottom sheet. */ html body .buzz-mobile-view-sheet{ position:fixed!important; left:0!important; right:0!important; bottom:calc(60px + env(safe-area-inset-bottom))!important; width:100%!important; margin:0!important; padding:10px 12px!important; border:0!important; border-top:1px solid var(--line)!important; border-bottom:1px solid var(--line)!important; border-radius:0!important; background:var(--bg)!important; box-shadow:0 -10px 28px rgba(0,0,0,.10)!important; transform:none!important; transition:opacity .18s ease, visibility .18s ease!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; z-index:100082!important; box-sizing:border-box!important; } html body .buzz-mobile-view-sheet.is-open{ transform:none!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; } html body .buzz-mobile-view-sheet-handle, html body .buzz-mobile-view-sheet-head{ display:none!important; } html body .buzz-mobile-view-sheet-options{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:8px!important; width:100%!important; margin:0!important; } html body .buzz-mobile-view-option{ min-width:0!important; min-height:68px!important; padding:8px 4px!important; border:1px solid var(--line)!important; border-radius:12px!important; background:transparent!important; box-shadow:none!important; } html.buzz-mobile-sheet-open body .buzz-mobile-global-bar{ z-index:100083!important; } html[data-theme="dark"] body .buzz-mobile-view-sheet{ background:#0b0b0d!important; border-color:#2a3340!important; box-shadow:0 -10px 28px rgba(0,0,0,.30)!important; } } /* v1.3.321 - flat View panel: invisible click-catcher outside the panel */ @media(max-width:700px){ html body .buzz-mobile-view-sheet-backdrop{ display:block!important; position:fixed!important; inset:0!important; background:transparent!important; opacity:1!important; visibility:visible!important; z-index:100081!important; pointer-events:auto!important; } html body .buzz-mobile-view-sheet-backdrop[hidden]{ display:none!important; } html body .buzz-mobile-view-sheet{ z-index:100082!important; } html.buzz-mobile-sheet-open body .buzz-mobile-global-bar{ z-index:100083!important; } } /* v1.3.322 - four-item mobile bottom bar, View open state, side-story dark mode */ @media(max-width:700px){ html body .buzz-mobile-global-bar{ grid-template-columns:repeat(4,minmax(0,1fr))!important; } html body .buzz-mobile-global-view.is-active{ color:var(--buzz-pink,#ff1684)!important; font-weight:800!important; } html body .buzz-mobile-global-view.is-active .buzz-mobile-global-icon, html body .buzz-mobile-global-view.is-active .buzz-mobile-global-label{ color:inherit!important; } } /* A legacy <=980px rule hard-coded white side-story cards. Use theme variables so the cards follow dark mode correctly. */ @media(max-width:1024px){ html[data-theme="dark"] body .buzz-category-side-stories > article, html[data-theme="dark"] body .buzz-search-magazine .buzz-category-side-stories > article, body.dark-mode .buzz-category-side-stories > article, body.dark-mode .buzz-search-magazine .buzz-category-side-stories > article{ background:var(--panel)!important; border-color:var(--line)!important; color:var(--text)!important; } html[data-theme="dark"] body .buzz-category-side-stories h3, html[data-theme="dark"] body .buzz-category-side-stories h3 a, html[data-theme="dark"] body .buzz-search-magazine .buzz-category-side-stories h3, html[data-theme="dark"] body .buzz-search-magazine .buzz-category-side-stories h3 a, body.dark-mode .buzz-category-side-stories h3, body.dark-mode .buzz-category-side-stories h3 a{ color:var(--text)!important; } html[data-theme="dark"] body .buzz-category-side-stories p, html[data-theme="dark"] body .buzz-category-side-stories .meta, html[data-theme="dark"] body .buzz-search-magazine .buzz-category-side-stories p, html[data-theme="dark"] body .buzz-search-magazine .buzz-category-side-stories .meta, body.dark-mode .buzz-category-side-stories p, body.dark-mode .buzz-category-side-stories .meta{ color:var(--muted)!important; } } /* v1.3.323 - remove the empty cancel-button grid track from the search panel */ @media(max-width:1024px){ html body .search-panel[data-search-panel] > .container{ display:block!important; grid-template-columns:none!important; gap:0!important; } html body .search-panel[data-search-panel] .search-form{ width:100%!important; max-width:none!important; } } /* v1.3.324 - override the legacy calc(100% - 24px) container width */ @media(max-width:1024px){ html body .search-panel[data-search-panel] > .container{ width:100%!important; max-width:none!important; margin:0!important; padding:10px 12px!important; box-sizing:border-box!important; } } /* v1.3.325 - featured video */ html body .buzz-featured-video, html body .buzz-featured-video-stage{ position:relative; display:block; width:100%; height:100%; min-width:0; min-height:0; overflow:hidden; background:#050505; } html body .buzz-featured-video-stage > .buzz-featured-video-poster-empty{ display:block!important; width:100%!important; height:100%!important; min-height:100%!important; } html body .buzz-featured-video-stage > img, html body .buzz-featured-video-stage > video, html body .buzz-featured-video-stage > iframe{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; margin:0!important; border:0!important; object-fit:contain!important; object-position:center!important; } html body .buzz-featured-video-play{ position:absolute; left:50%; top:50%; z-index:8; display:flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border:1px solid rgba(255,255,255,.88); border-radius:50%; background:rgba(255,22,132,.94); color:#fff; box-shadow:0 4px 12px rgba(0,0,0,.24); transform:translate(-50%,-50%); cursor:pointer; transition:transform .18s ease,background .18s ease; } html body .buzz-featured-video-play:hover, html body .buzz-featured-video-play:focus-visible{ background:var(--buzz-pink,#ff1684); outline:3px solid rgba(255,255,255,.72); outline-offset:3px; transform:translate(-50%,-50%); } html body .buzz-featured-video-play svg{ width:12px; height:12px; margin-left:2px; } html body .buzz-featured-video.is-playing .buzz-featured-video-play{ display:none!important; } html body .buzz-featured-video.is-playing, html body .buzz-featured-video.is-playing .buzz-featured-video-stage{ z-index:12; } html body a.buzz-video-playing > .buzz-hero-shade, html body a.buzz-video-playing > .buzz-hero-copy, html body a.buzz-video-playing > .buzz-card-category-flag{ display:none!important; } html body .compact-thumb .buzz-featured-video-play, html body .rank-thumb .buzz-featured-video-play, html body .buzz-ranking-thumb .buzz-featured-video-play, html body .buzz-related-compact-thumb .buzz-featured-video-play, html body .buzz-mini-related-list .buzz-featured-video-play{ width:26px; height:26px; border-width:1px; } html body .compact-thumb .buzz-featured-video-play svg, html body .rank-thumb .buzz-featured-video-play svg, html body .buzz-ranking-thumb .buzz-featured-video-play svg, html body .buzz-related-compact-thumb .buzz-featured-video-play svg, html body .buzz-mini-related-list .buzz-featured-video-play svg{ width:12px; height:12px; } @media(max-width:700px){ html body .buzz-featured-video-play{width:26px;height:26px} html body .buzz-featured-video-play svg{width:12px;height:12px} } /* v1.3.326 - dark backdrop for the mobile View panel */ @media(max-width:700px){ html body .buzz-mobile-view-sheet-backdrop{ background:rgba(15,23,42,.30)!important; } } /* v1.3.328 - keep the sticky header visible while the View panel is open */ @media(max-width:700px){ html.buzz-mobile-sheet-open, html.buzz-mobile-sheet-open body{ overflow:visible!important; } html.buzz-mobile-sheet-open body .buzz-header, html.buzz-mobile-sheet-open body .site-header{ position:-webkit-sticky!important; position:sticky!important; top:0!important; z-index:100084!important; } html body .buzz-mobile-view-sheet-backdrop{ touch-action:none!important; overscroll-behavior:contain!important; } } /* v1.3.329 - dim the still-visible header like the Search backdrop */ @media(max-width:700px){ html.buzz-mobile-sheet-open body .buzz-header, html.buzz-mobile-sheet-open body .site-header{ z-index:100080!important; } } /* v1.3.330 - More button and bounded infinite archive list */ .buzz-infinite-loader{ display:flex; flex-direction:column; align-items:center; justify-content:center; width:100%; padding:42px 16px 64px; } .buzz-infinite-loader[hidden]{display:none!important} .buzz-infinite-more{ display:inline-flex; align-items:center; justify-content:center; gap:12px; min-width:220px; min-height:58px; padding:14px 28px; border:1px solid #e3e6eb; border-radius:999px; background:#fff; box-shadow:0 12px 34px rgba(17,24,39,.08); color:#111827; font-family:inherit; font-size:17px; font-weight:800; line-height:1.2; cursor:pointer; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; } .buzz-infinite-more:hover{transform:translateY(-2px);border-color:#ff1493;box-shadow:0 14px 38px rgba(255,20,147,.14)} .buzz-infinite-more:focus-visible{outline:3px solid rgba(255,20,147,.24);outline-offset:3px} .buzz-infinite-more:disabled{cursor:wait;opacity:.72;transform:none} .buzz-infinite-more-icon{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ff1493;color:#fff;font-size:18px} .buzz-infinite-more.is-loading .buzz-infinite-more-icon{animation:buzz-infinite-spin .8s linear infinite} .buzz-infinite-status{min-height:20px;margin:10px 0 0;color:#697386;font-size:13px;text-align:center} @keyframes buzz-infinite-spin{to{transform:rotate(360deg)}} [data-buzz-loaded-item]{content-visibility:auto;contain-intrinsic-size:auto 340px} .buzz-infinite-pruned-spacer{ grid-column:1/-1; display:flex; align-items:flex-start; justify-content:center; min-height:1px; padding-top:18px; color:#8a94a5; font-size:12px; text-align:center; } @media(max-width:700px){ .buzz-infinite-loader{padding:28px 12px 44px} .buzz-infinite-more{width:100%;min-width:0;min-height:54px} } @media(prefers-reduced-motion:reduce){ .buzz-infinite-more{transition:none} .buzz-infinite-more.is-loading .buzz-infinite-more-icon{animation:none} } /* v1.3.331 - no lower filler skeletons when the rendered list is one column */ html body [data-responsive-fill-grid].buzz-single-column-grid > .buzz-category-skeleton, html body [data-responsive-fill-grid].buzz-single-column-grid > .buzz-tablet-fill-skeleton, html body [data-responsive-fill-grid].buzz-single-column-grid > .buzz-responsive-fill-skeleton{ display:none!important; } /* v1.3.332 - CSS fallback when mobile Large/Small resolves to one column */ @media(max-width:700px){ html body .buzz-category-magazine.category-view-large [data-responsive-fill-grid] > article.buzz-category-skeleton, html body .buzz-search-magazine.search-view-large [data-responsive-fill-grid] > article.buzz-category-skeleton{ display:none!important; } } @media(max-width:389px){ html body .buzz-category-magazine.category-view-small [data-responsive-fill-grid] > article.buzz-category-skeleton, html body .buzz-search-magazine.search-view-small [data-responsive-fill-grid] > article.buzz-category-skeleton{ display:none!important; } } /* v1.3.333 - inactive fillers must never create a completely empty row */ html body [data-responsive-fill-grid] > article.buzz-responsive-fill-skeleton:not(.is-active){ display:none!important; } /* v1.3.334 - a two-column List view may fill only its incomplete final row */ html body .buzz-category-magazine.category-view-list [data-responsive-fill-grid] > article.buzz-responsive-fill-skeleton.is-active, html body .buzz-search-magazine.search-view-list [data-responsive-fill-grid] > article.buzz-responsive-fill-skeleton.is-active{ display:grid!important; } /* v1.3.337 - use one 980px breakpoint for the header and viewport drawer */ @media(max-width:980px){ html body .mobile-nav-backdrop{ display:block!important; position:fixed!important; top:var(--buzz-mobile-drawer-top,82px)!important; right:0!important; bottom:0!important; left:0!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; z-index:100001!important; background:rgba(15,23,42,.44)!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; } html body .mobile-nav-backdrop.open{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; } html body .mobile-nav{ display:block!important; position:fixed!important; top:var(--buzz-mobile-drawer-top,82px)!important; right:0!important; bottom:0!important; left:auto!important; width:min(360px,88vw)!important; max-width:88vw!important; height:auto!important; max-height:none!important; margin:0!important; padding:0!important; z-index:100002!important; overflow-y:auto!important; overflow-x:hidden!important; box-sizing:border-box!important; background:var(--bg)!important; border-top:1px solid var(--line)!important; border-left:1px solid var(--line)!important; box-shadow:-18px 0 40px rgba(15,23,42,.14)!important; transform:translate3d(105%,0,0)!important; transition:transform .22s ease!important; opacity:1!important; visibility:visible!important; pointer-events:none!important; overscroll-behavior-y:contain!important; -webkit-overflow-scrolling:touch!important; } html body .mobile-nav.open{ transform:translate3d(0,0,0)!important; pointer-events:auto!important; } html body .mobile-nav .mobile-nav-head{ display:none!important; } html body .mobile-nav .mobile-nav-inner{ display:block!important; width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; padding:12px 20px!important; box-sizing:border-box!important; } } @media(max-width:620px){ html body .mobile-nav{ width:min(300px,90vw)!important; max-width:90vw!important; } } /* v1.3.338 - keep View More identical to the desktop accent button at every drawer width */ @media(max-width:980px){ html body .mobile-nav .mobile-menu-primary > li.mobile-menu-buzz-pick{ padding:16px 8px!important; border-bottom:0!important; } html body .mobile-nav .mobile-menu-primary .mobile-buzz-pick-button{ display:inline-flex!important; width:auto!important; min-height:38px!important; align-items:center!important; justify-content:center!important; margin:0!important; padding:9px 16px!important; border-radius:2px!important; background:var(--bk-pink)!important; color:#fff!important; font-size:15px!important; line-height:1!important; font-weight:900!important; text-align:center!important; white-space:nowrap!important; } html body .mobile-nav .mobile-menu-primary .mobile-buzz-pick-button:hover, html body .mobile-nav .mobile-menu-primary .mobile-buzz-pick-button:focus-visible{ background:var(--bk-pink)!important; color:#fff!important; } } /* v1.3.340 - sub-home gutters use the same outer container as the homepage */ @media(max-width:1024px){ html body .buzz-category-magazine, html body .buzz-search-magazine{ padding-left:0!important; padding-right:0!important; } } /* v1.3.341 - Back to Top is pink only while it is being pressed */ .utillog-back-to-top:hover, .utillog-back-to-top:focus, .utillog-back-to-top:focus-visible{ background:color-mix(in srgb,var(--bg) 94%,transparent)!important; border-color:var(--line)!important; color:var(--text)!important; transform:translateY(0)!important; } .utillog-back-to-top:focus-visible{ outline:2px solid var(--accent)!important; outline-offset:2px!important; } .utillog-back-to-top:active{ background:var(--accent)!important; border-color:var(--accent)!important; color:#fff!important; outline:0!important; transform:translateY(0)!important; } /* v1.3.342 - hard-disable smooth scrolling while Top position is committed */ html.buzz-instant-top, html.buzz-instant-top body, html.buzz-instant-top *{ scroll-behavior:auto!important; } /* v1.3.343 - place single-post share buttons beside the Home breadcrumb */ .single .buzz-single-top-row{ display:flex!important; width:100%!important; align-items:center!important; justify-content:space-between!important; gap:16px!important; margin:0 0 18px!important; } .single .buzz-single-top-row .buzz-single-breadcrumbs{ display:flex!important; min-width:0!important; flex:1 1 auto!important; align-items:center!important; margin:0!important; overflow:hidden!important; white-space:nowrap!important; } .single .buzz-single-top-row .buzz-single-top-cat{ min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; } .single .buzz-single-top-row .buzz-single-share{ display:flex!important; flex:0 0 auto!important; align-items:center!important; justify-content:flex-end!important; margin:0 0 0 auto!important; } @media(max-width:620px){ .single .buzz-single-top-row{ gap:10px!important; margin-bottom:14px!important; } .single .buzz-single-top-row .buzz-single-share{ gap:5px!important; } .single .buzz-single-top-row .buzz-single-share a, .single .buzz-single-top-row .buzz-single-share button{ width:30px!important; height:30px!important; flex:0 0 30px!important; } } @media(max-width:380px){ .single .buzz-single-top-row{ gap:8px!important; } .single .buzz-single-top-row .buzz-single-share{ gap:4px!important; } .single .buzz-single-top-row .buzz-single-share a, .single .buzz-single-top-row .buzz-single-share button{ width:27px!important; height:27px!important; flex-basis:27px!important; } } /* v1.3.347 - one reusable upper-card set moves into this grid on compact Small view */ .buzz-small-top-grid{ display:none!important; } @media(max-width:1024px){ :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) > .buzz-small-top-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; width:100%!important; margin:0!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) > .buzz-category-feature-grid .buzz-category-main-column.buzz-small-grid-moved{ display:none!important; } } @media(max-width:380px){ :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) > .buzz-small-top-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } } /* v1.3.344 - keep Home visible beside share buttons on mobile */ @media(max-width:620px){ .single .buzz-single-top-row{ box-sizing:border-box!important; min-width:0!important; padding-right:2px!important; } .single .buzz-single-top-row .buzz-single-breadcrumbs{ display:flex!important; flex:1 1 auto!important; min-width:36px!important; max-width:calc(100% - 145px)!important; margin:0!important; overflow:visible!important; color:var(--muted)!important; opacity:1!important; visibility:visible!important; } .single .buzz-single-top-row .buzz-single-breadcrumbs > a:first-child{ display:inline-flex!important; flex:0 0 auto!important; min-width:max-content!important; color:var(--muted)!important; opacity:1!important; visibility:visible!important; } .single .buzz-single-top-row .buzz-single-share{ width:135px!important; max-width:135px!important; } } @media(max-width:380px){ .single .buzz-single-top-row .buzz-single-breadcrumbs{ max-width:calc(100% - 120px)!important; } .single .buzz-single-top-row .buzz-single-share{ width:120px!important; max-width:120px!important; } } /* v1.3.345 - Small view uses the same two-column cards above and below on mobile/tablet */ @media(max-width:1024px){ :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-feature-grid{ display:block!important; width:100%!important; margin:0!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-main-column{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; width:100%!important; min-width:0!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-side-stories{ display:contents!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-featured-card, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-side-stories > article:not(.buzz-category-skeleton), :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-latest-grid > article:not(.buzz-category-skeleton){ display:flex!important; flex-direction:column!important; width:100%!important; min-width:0!important; height:100%!important; margin:0!important; padding:0!important; border:0!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-featured-media, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-side-media, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-grid-media{ position:relative!important; display:block!important; width:100%!important; min-width:0!important; aspect-ratio:4 / 3!important; overflow:hidden!important; border-radius:18px!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-featured-media img, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-featured-media .thumb-placeholder, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-side-media img, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-side-media .thumb-placeholder, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-grid-media img, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-grid-media .thumb-placeholder{ width:100%!important; height:100%!important; min-height:0!important; object-fit:contain!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-featured-copy, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-side-stories > article > div:last-child, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-small-top-grid > article > div:last-child{ display:flex!important; flex:1 1 auto!important; flex-direction:column!important; min-width:0!important; padding:0!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-featured-copy h2, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-side-stories h3, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-latest-grid h3{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:3!important; overflow:hidden!important; margin:14px 0 10px!important; font-size:18px!important; line-height:1.34!important; font-weight:900!important; letter-spacing:-.03em!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-featured-copy p, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-side-stories p, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-small-top-grid p, .buzz-category-magazine.category-view-small .buzz-category-grid-excerpt, .buzz-search-magazine.search-view-small .buzz-search-list-excerpt{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:4!important; overflow:hidden!important; min-height:0!important; max-height:none!important; margin:0 0 12px!important; color:var(--muted)!important; font-size:13px!important; line-height:1.6!important; font-weight:400!important; letter-spacing:-.012em!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-featured-copy .meta, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-side-stories .meta, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-latest-grid .meta{ margin-top:auto!important; font-size:11px!important; line-height:1.45!important; white-space:normal!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-side-stories > .buzz-category-skeleton{ display:none!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-aside{ margin-top:22px!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-latest-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; margin-top:16px!important; } } @media(max-width:700px){ :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-aside{ margin-top:16px!important; } } @media(max-width:380px){ :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-main-column, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-latest-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-featured-copy h2, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-side-stories h3, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-latest-grid h3{ margin:10px 0 8px!important; font-size:15px!important; } :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-featured-copy p, :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) .buzz-category-side-stories p, .buzz-category-magazine.category-view-small .buzz-category-grid-excerpt, .buzz-search-magazine.search-view-small .buzz-search-list-excerpt{ -webkit-line-clamp:2!important; font-size:12px!important; } } /* v1.3.348 - all six compact Small-view cards use identical title typography */ @media(max-width:1024px){ html body :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) > .buzz-small-top-grid > article :is(h2,h3){ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:3!important; overflow:hidden!important; margin:14px 0 10px!important; font-size:18px!important; line-height:1.34!important; font-weight:900!important; letter-spacing:-.03em!important; } } @media(max-width:380px){ html body :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) > .buzz-small-top-grid > article :is(h2,h3){ margin:10px 0 8px!important; font-size:15px!important; } } /* v1.3.349 - Large view keeps all six upper stories as full-width cards on mobile/tablet */ @media(max-width:1024px){ html body :is(.buzz-category-magazine.category-view-large,.buzz-search-magazine.search-view-large) > .buzz-category-feature-grid, html body :is(.buzz-category-magazine.category-view-large,.buzz-search-magazine.search-view-large) .buzz-category-main-column{ display:block!important; width:100%!important; min-width:0!important; } html body :is(.buzz-category-magazine.category-view-large,.buzz-search-magazine.search-view-large) .buzz-category-side-stories{ display:grid!important; grid-template-columns:minmax(0,1fr)!important; gap:28px!important; width:100%!important; min-width:0!important; margin-top:28px!important; } html body :is(.buzz-category-magazine.category-view-large,.buzz-search-magazine.search-view-large) .buzz-category-side-stories > article:not(.buzz-category-skeleton){ display:flex!important; flex-direction:column!important; width:100%!important; min-width:0!important; gap:0!important; margin:0!important; padding:0!important; border:0!important; } html body :is(.buzz-category-magazine.category-view-large,.buzz-search-magazine.search-view-large) .buzz-category-side-stories > article:not(.buzz-category-skeleton) .buzz-category-side-media{ display:block!important; width:100%!important; min-width:0!important; max-width:none!important; aspect-ratio:4 / 3!important; margin:0!important; overflow:hidden!important; } html body :is(.buzz-category-magazine.category-view-large,.buzz-search-magazine.search-view-large) .buzz-category-side-media img, html body :is(.buzz-category-magazine.category-view-large,.buzz-search-magazine.search-view-large) .buzz-category-side-media .thumb-placeholder{ display:block!important; width:100%!important; height:100%!important; min-height:0!important; object-fit:contain!important; } html body :is(.buzz-category-magazine.category-view-large,.buzz-search-magazine.search-view-large) .buzz-category-side-stories > article:not(.buzz-category-skeleton) > div:last-child{ display:flex!important; flex-direction:column!important; width:100%!important; min-width:0!important; padding:0!important; } html body :is(.buzz-category-magazine.category-view-large,.buzz-search-magazine.search-view-large) .buzz-category-side-stories h3{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:3!important; overflow:hidden!important; margin:14px 0 10px!important; font-size:var(--bk-cat-feature-title)!important; line-height:1.3!important; font-weight:850!important; letter-spacing:-.03em!important; } html body :is(.buzz-category-magazine.category-view-large,.buzz-search-magazine.search-view-large) .buzz-category-side-stories p{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:3!important; overflow:hidden!important; min-height:0!important; max-height:none!important; margin:0 0 10px!important; font-size:var(--bk-cat-body)!important; line-height:1.65!important; } } /* v1.3.350 - compact Small titles and the first List title share the 17px scale */ @media(max-width:1024px){ html body :is(.buzz-category-magazine.category-view-small,.buzz-search-magazine.search-view-small) > .buzz-small-top-grid > article :is(h2,h3), html body :is(.buzz-category-magazine.category-view-list,.buzz-search-magazine.search-view-list) .buzz-category-featured-copy h2{ font-size:17px!important; line-height:1.4!important; } } /* v1.3.358 - dark card descriptions use the exact same secondary color as dates */ html[data-theme="dark"] body :is(.buzz-category-magazine,.buzz-search-magazine) :is( .buzz-category-featured-copy > p, .buzz-category-side-stories p, .buzz-small-top-grid p, .buzz-category-grid-excerpt, .buzz-search-list-excerpt, .buzz-category-latest-grid > article > p ), html[data-theme="dark"] body :is(.buzz-category-magazine,.buzz-search-magazine) .meta, body.dark-mode :is(.buzz-category-magazine,.buzz-search-magazine) :is( .buzz-category-featured-copy > p, .buzz-category-side-stories p, .buzz-small-top-grid p, .buzz-category-grid-excerpt, .buzz-search-list-excerpt, .buzz-category-latest-grid > article > p, .meta ){ color:var(--muted)!important; -webkit-text-fill-color:var(--muted)!important; opacity:1!important; } /* v1.3.366 - light card descriptions use the exact same secondary color as dates */ html body :is(.buzz-category-magazine,.buzz-search-magazine) :is( .buzz-category-featured-copy > p, .buzz-category-side-stories p, .buzz-small-top-grid p, .buzz-category-grid-excerpt, .buzz-search-list-excerpt, .buzz-category-latest-grid > article > p ){ color:var(--muted)!important; -webkit-text-fill-color:var(--muted)!important; opacity:1!important; } /* v1.3.359 - fail-safe release for stale mobile interaction layers on PC */ @media(min-width:1025px){ html body :is( .mobile-nav, .mobile-nav-backdrop, .search-panel[data-search-panel], .search-panel-backdrop, .buzz-mobile-view-sheet-backdrop, .buzz-mobile-view-sheet, .buzz-mobile-global-bar, .buzz-shorts-stage, .buzz-shorts-refresh-indicator ){ display:none!important; visibility:hidden!important; pointer-events:none!important; } html:is( .utillog-menu-open, .utillog-search-open, .buzz-mobile-sheet-open, .buzz-shorts-virtual-active, .buzz-shorts-document, .buzz-shorts-slider-active ){ height:auto!important; overflow-y:auto!important; touch-action:auto!important; overscroll-behavior:auto!important; } html:is( .utillog-menu-open, .utillog-search-open, .buzz-mobile-sheet-open, .buzz-shorts-virtual-active, .buzz-shorts-document, .buzz-shorts-slider-active ) body{ height:auto!important; overflow-y:visible!important; touch-action:auto!important; overscroll-behavior:auto!important; } } /* v1.3.361 - matching divider above the single-post title */ html body.single .buzz-single-top-row{ padding-bottom:18px!important; border-bottom:1px solid var(--line)!important; } @media(max-width:620px){ html body.single .buzz-single-top-row{ padding-bottom:14px!important; } } /* v1.3.362 - decorative SEO-neutral sparkle before the single-post title */ html body.single .buzz-single-title::before{ content:""; display:inline-block; width:.52em; height:.52em; margin-right:.24em; background:var(--buzz-pink,#ff1684); -webkit-clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); transform:translateY(-.05em); } /* v1.3.363 - centered all-posts divider between home stories and newsletter */ html body.home .buzz-home-view-all-divider{ display:flex; width:100%; align-items:center; gap:18px; margin:22px 0 0; } /* v1.3.365 - subtle dotted divider around the all-posts link */ html body.home .buzz-home-view-all-divider::before, html body.home .buzz-home-view-all-divider::after{ content:""; height:2px; flex:1 1 auto; background:radial-gradient(circle,var(--line) 1px,transparent 1.2px) left center/7px 2px repeat-x; } html body.home .buzz-home-view-all-divider a{ display:inline-flex; flex:0 0 auto; align-items:center; justify-content:center; color:var(--muted); font-size:14px!important; line-height:1.2; font-weight:800; text-decoration:none; white-space:nowrap; transition:color .18s ease; } html body.home .buzz-home-view-all-divider a:hover, html body.home .buzz-home-view-all-divider a:focus-visible{ color:var(--buzz-pink,#ff1684); } html body.home .buzz-home-view-all-divider a:focus-visible{ outline:2px solid var(--buzz-pink,#ff1684); outline-offset:5px; } @media(max-width:640px){ html body.home .buzz-home-view-all-divider{ gap:12px; margin-top:18px; } } /* v1.3.384 - make the 4:3 main media the only desktop hero height source */ @media(min-width:981px){ html body.home .buzz-hero{ grid-template-columns:minmax(0,2fr) minmax(0,1fr)!important; gap:clamp(10px,1.1vw,18px)!important; align-items:stretch!important; width:100%!important; min-height:0!important; aspect-ratio:auto!important; overflow:hidden!important; } html body.home .buzz-hero-main{ min-width:0!important; min-height:0!important; height:auto!important; aspect-ratio:auto!important; align-self:stretch!important; overflow:hidden!important; } html body.home .buzz-hero-main .buzz-hero-media{ width:100%!important; height:auto!important; min-height:0!important; aspect-ratio:4/3!important; overflow:hidden!important; } html body.home .buzz-hero-main .buzz-hero-media > img, html body.home .buzz-hero-main .buzz-hero-media > img.is-buzz-landscape, html body.home .buzz-hero-main .buzz-hero-media > img.is-buzz-portrait, html body.home .buzz-hero-main .buzz-hero-media > img.is-buzz-square, html body.home .buzz-hero-main .buzz-hero-media > .buzz-image-placeholder, html body.home .buzz-hero-main .buzz-hero-media > .thumb-placeholder{ width:100%!important; height:100%!important; min-height:0!important; max-width:none!important; max-height:none!important; object-fit:cover!important; } html body.home .buzz-hero-side-card{ position:relative!important; min-width:0!important; min-height:0!important; height:auto!important; align-self:stretch!important; overflow:hidden!important; } html body.home .buzz-hero-side-card > a{ position:absolute!important; inset:0!important; display:grid!important; grid-template-rows:auto minmax(0,1fr)!important; width:100%!important; height:auto!important; min-height:0!important; overflow:hidden!important; } html body.home .buzz-hero-side-card .buzz-side-media{ width:100%!important; height:100%!important; min-height:0!important; aspect-ratio:auto!important; align-self:stretch!important; } html body.home .buzz-hero-side-card .buzz-side-media > img, html body.home .buzz-hero-side-card .buzz-side-media > img.is-buzz-landscape, html body.home .buzz-hero-side-card .buzz-side-media > img.is-buzz-portrait, html body.home .buzz-hero-side-card .buzz-side-media > img.is-buzz-square, html body.home .buzz-hero-side-card .buzz-side-media > .buzz-image-placeholder, html body.home .buzz-hero-side-card .buzz-side-media > .thumb-placeholder{ width:100%!important; height:100%!important; min-height:0!important; max-width:none!important; max-height:none!important; object-fit:cover!important; } } /* v1.3.385 - keep post navigation labels readable at narrow widths */ html body.single .buzz-article-post-nav .article-post-nav-item{ min-width:0!important; } html body.single .buzz-article-post-nav .article-post-nav-label{ flex:0 0 auto!important; align-self:flex-start!important; width:max-content!important; max-width:100%!important; white-space:nowrap!important; word-break:keep-all!important; overflow-wrap:normal!important; } html body.single .buzz-article-post-nav .article-post-nav-next .article-post-nav-label{ align-self:flex-end!important; } html body.single .buzz-article-post-nav strong{ min-width:0!important; max-width:100%!important; } @media(max-width:980px){ html body.single .buzz-article-post-nav{ grid-template-columns:minmax(0,1fr)!important; } html body.single .buzz-article-post-nav .article-post-nav-item + .article-post-nav-item{ border-left:0!important; border-top:1px solid #e7e7eb!important; } html body.single .buzz-article-post-nav .article-post-nav-next{ text-align:left!important; } html body.single .buzz-article-post-nav .article-post-nav-next .article-post-nav-label{ align-self:flex-start!important; } } /* v1.3.386 - preserve a true 50:50 previous/next split on tablet */ html body.single .buzz-article-post-nav{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } html body.single .buzz-article-post-nav .article-post-nav-prev, html body.single .buzz-article-post-nav .article-post-nav-prev:only-child{ grid-column:1!important; text-align:left!important; } html body.single .buzz-article-post-nav .article-post-nav-next, html body.single .buzz-article-post-nav .article-post-nav-next:only-child{ grid-column:2!important; text-align:right!important; } html body.single .buzz-article-post-nav .article-post-nav-item + .article-post-nav-item{ border-top:0!important; border-left:1px solid #e7e7eb!important; } html body.single .buzz-article-post-nav .article-post-nav-prev .article-post-nav-label{ align-self:flex-start!important; } html body.single .buzz-article-post-nav .article-post-nav-next .article-post-nav-label{ align-self:flex-end!important; } @media(max-width:480px){ html body.single .buzz-article-post-nav{ grid-template-columns:minmax(0,1fr)!important; } html body.single .buzz-article-post-nav .article-post-nav-item, html body.single .buzz-article-post-nav .article-post-nav-prev, html body.single .buzz-article-post-nav .article-post-nav-prev:only-child, html body.single .buzz-article-post-nav .article-post-nav-next, html body.single .buzz-article-post-nav .article-post-nav-next:only-child{ grid-column:1!important; text-align:left!important; } html body.single .buzz-article-post-nav .article-post-nav-item + .article-post-nav-item{ border-left:0!important; border-top:1px solid #e7e7eb!important; } html body.single .buzz-article-post-nav .article-post-nav-next .article-post-nav-label{ align-self:flex-start!important; } } /* v1.3.391 - restore container gutters in the tablet header */ @media (min-width:701px) and (max-width:1024px){ html body .buzz-header .container.buzz-brand-row{ width:min(var(--bk-max,1160px),calc(100% - 32px))!important; margin-right:auto!important; margin-left:auto!important; box-sizing:border-box!important; } } /* v1.3.394 - move the category aside below before the desktop columns get cramped. * Based on v1.3.391; the featured-card scaling experiments are intentionally excluded. */ @media (min-width:701px) and (max-width:1240px){ html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-feature-grid{ grid-template-columns:minmax(0,1fr)!important; gap:24px!important; width:100%!important; min-width:0!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-aside{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; align-items:start!important; width:100%!important; min-width:0!important; margin:0!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) :is( .buzz-category-ranking-card, .buzz-category-editor-card ){ width:100%!important; min-width:0!important; height:auto!important; margin:0!important; align-self:start!important; box-sizing:border-box!important; } } @media (max-width:700px){ html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-aside{ grid-template-columns:minmax(0,1fr)!important; } } /* v1.3.395 - compact Editor's Pick to the Weekly Ranking height in the two-column aside */ @media (min-width:701px) and (max-width:1240px){ html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-aside{ align-items:stretch!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) :is( .buzz-category-ranking-card, .buzz-category-editor-card ){ height:100%!important; align-self:stretch!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-editor-card{ display:grid!important; grid-template-columns:minmax(140px,180px) minmax(0,1fr)!important; grid-template-rows:auto 1fr!important; column-gap:16px!important; align-items:start!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-editor-card > .buzz-category-box-head{ grid-column:1 / -1!important; grid-row:1!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-editor-card > .buzz-category-editor-media{ grid-column:1!important; grid-row:2!important; width:100%!important; min-width:0!important; aspect-ratio:4 / 3!important; margin:0!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-editor-card > h3{ grid-column:2!important; grid-row:2!important; align-self:start!important; min-width:0!important; margin:0!important; display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:4!important; overflow:hidden!important; } } /* v1.3.397 - remove the side-story top/bottom inset and match the featured-card height */ @media (min-width:1025px) and (max-width:1240px){ html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-main-column{ align-items:stretch!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-main-column > .buzz-category-side-stories{ width:100%!important; min-width:0!important; height:100%!important; margin-top:0!important; margin-bottom:0!important; padding-top:0!important; padding-bottom:0!important; align-self:stretch!important; align-content:space-between!important; grid-auto-rows:max-content!important; row-gap:0!important; gap:0!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-main-column > .buzz-category-side-stories > article{ height:auto!important; margin-top:0!important; margin-bottom:0!important; padding-top:0!important; padding-bottom:0!important; } } /* v1.3.398 - shorten the featured excerpt and reduce side-story whitespace */ @media (min-width:1025px) and (max-width:1240px){ html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-featured-copy > p{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; min-height:calc(2 * 1.65em)!important; max-height:calc(2 * 1.65em)!important; overflow:hidden!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-main-column > .buzz-category-side-stories > article{ grid-template-columns:clamp(140px,13vw,160px) minmax(0,1fr)!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-main-column > .buzz-category-side-stories .buzz-category-side-media{ width:clamp(140px,13vw,160px)!important; min-width:clamp(140px,13vw,160px)!important; } } /* v1.3.399 - restore breathing room between the right-side story thumbnails */ @media (min-width:1025px) and (max-width:1240px){ html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-main-column > .buzz-category-side-stories{ row-gap:clamp(12px,1.25vw,18px)!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-main-column > .buzz-category-side-stories > article{ grid-template-columns:clamp(124px,11vw,140px) minmax(0,1fr)!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-main-column > .buzz-category-side-stories .buzz-category-side-media{ width:clamp(124px,11vw,140px)!important; min-width:clamp(124px,11vw,140px)!important; } } /* v1.3.400 - show a two-line Editor's Pick excerpt in the two-column aside */ .buzz-category-editor-copy{ min-width:0; } .buzz-category-editor-excerpt{ display:none; } .buzz-category-editor-meta{ display:none; } @media (min-width:701px) and (max-width:1240px){ html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-editor-card > .buzz-category-editor-copy{ grid-column:2!important; grid-row:2!important; min-width:0!important; align-self:start!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-editor-copy > h3{ margin:0!important; display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-editor-excerpt{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; overflow:hidden!important; margin:6px 0 0!important; color:var(--muted)!important; font-size:14px!important; line-height:1.55!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-editor-meta{ display:block!important; margin-top:5px!important; } html body :is(.buzz-category-magazine,.buzz-search-magazine) .buzz-category-editor-meta > .meta{ margin:0!important; color:var(--muted)!important; font-size:13px!important; line-height:1.4!important; } } /* v1.3.408 - Relay video click opens the article detail page. */ html.buzz-shorts-virtual-active body .buzz-shorts-media video, html.buzz-shorts-virtual-active body .buzz-shorts-media iframe{ pointer-events:none!important; } html.buzz-shorts-virtual-active body .buzz-shorts-media{ cursor:pointer; } /* v1.3.411 - home/list video posters fill the card without black letterbox bars */ html body:not(.single) .buzz-featured-video:not(.is-playing) .buzz-featured-video-stage > img.buzz-featured-video-poster{ object-fit:cover!important; width:100%!important; height:100%!important; } /* v1.3.412 - BUZZ NOW video media must fill the side-card media frame exactly. * The desktop BUZZ NOW media height is driven by the remaining hero-card space, * so a nested featured-video wrapper must not preserve its own 4:3 box. */ html body.home .buzz-hero-side-card .buzz-side-media > .buzz-featured-video{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; aspect-ratio:auto!important; background:transparent!important; } html body.home .buzz-hero-side-card .buzz-side-media > .buzz-featured-video > .buzz-featured-video-stage{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; aspect-ratio:auto!important; background:transparent!important; } html body.home .buzz-hero-side-card .buzz-side-media > .buzz-featured-video:not(.is-playing) .buzz-featured-video-stage > img.buzz-featured-video-poster{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover!important; object-position:center!important; margin:0!important; } html body.home .buzz-hero-side-card .buzz-side-media > .buzz-featured-video.is-playing .buzz-featured-video-stage > video, html body.home .buzz-hero-side-card .buzz-side-media > .buzz-featured-video.is-playing .buzz-featured-video-stage > iframe{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; margin:0!important; } html body.home .buzz-hero-side-card .buzz-side-media > .buzz-featured-video.is-playing .buzz-featured-video-stage > video{ object-fit:cover!important; } /* v1.3.413 - make BUZZ NOW use the same true 4:3 media ratio as other cards. */ @media(min-width:981px){ html body.home .buzz-hero-side-card{ height:auto!important; align-self:start!important; overflow:visible!important; } html body.home .buzz-hero-side-card > a{ position:relative!important; inset:auto!important; display:flex!important; flex-direction:column!important; width:100%!important; height:auto!important; min-height:0!important; overflow:visible!important; } html body.home .buzz-hero-side-card .buzz-side-media{ position:relative!important; flex:0 0 auto!important; width:100%!important; height:auto!important; min-height:0!important; aspect-ratio:4/3!important; align-self:auto!important; margin-top:0!important; overflow:hidden!important; } html body.home .buzz-hero-side-card .buzz-side-media > .buzz-featured-video, html body.home .buzz-hero-side-card .buzz-side-media > .buzz-featured-video > .buzz-featured-video-stage{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; aspect-ratio:auto!important; } html body.home .buzz-hero-side-card .buzz-side-media > img, html body.home .buzz-hero-side-card .buzz-side-media > .buzz-image-placeholder, html body.home .buzz-hero-side-card .buzz-side-media > .thumb-placeholder, html body.home .buzz-hero-side-card .buzz-side-media .buzz-featured-video-stage > img, html body.home .buzz-hero-side-card .buzz-side-media .buzz-featured-video-stage > video, html body.home .buzz-hero-side-card .buzz-side-media .buzz-featured-video-stage > iframe{ width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover!important; object-position:center!important; margin:0!important; } } /* v1.3.414 - keep HOT ISSUE and BUZZ NOW bottom edges aligned responsively. * JS updates the two desktop grid columns while both media frames retain 4:3. */ @media(min-width:981px){ html body.home .buzz-hero[data-buzz-hero-balanced="1"]{ align-items:start!important; } html body.home .buzz-hero[data-buzz-hero-balanced="1"] .buzz-hero-main, html body.home .buzz-hero[data-buzz-hero-balanced="1"] .buzz-hero-side-card{ align-self:start!important; } } /* v1.3.416 - limit BUZZ NOW description to two lines. */ html body.home .buzz-hero-side-card .buzz-side-copy p{ display:-webkit-box!important; -webkit-box-orient:vertical!important; -webkit-line-clamp:2!important; line-clamp:2!important; overflow:hidden!important; text-overflow:ellipsis!important; max-height:calc(1.5em * 2)!important; } /* v1.3.418 - keep the poster visible until the first video frame is ready. */ html body .buzz-featured-video-stage > video.buzz-featured-video-element{ position:absolute!important; inset:0!important; z-index:3!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; } html body .buzz-featured-video.is-video-ready .buzz-featured-video-stage > video.buzz-featured-video-element{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; } /* v1.3.425 - Relay owns the vertical swipe surface even while video plays. * Keep native media from stealing pointer gestures; the enclosing media link * still opens the article on a tap, while a drag changes Relay slides. */ html.buzz-shorts-virtual-active body .buzz-shorts-slide .buzz-shorts-media .buzz-featured-video.is-video-ready .buzz-featured-video-stage > video.buzz-featured-video-element, html.buzz-shorts-virtual-active body .buzz-shorts-slide .buzz-shorts-media .buzz-featured-video-stage > iframe.buzz-featured-video-frame{ pointer-events:none!important; } html body .buzz-featured-video-stage > img.buzz-featured-video-poster, html body .buzz-featured-video-stage > .buzz-featured-video-poster-empty{ position:relative; z-index:1; } /* v1.3.426 - persistent Relay video controls without stealing vertical swipe. */ @media(max-width:700px){ html.buzz-shorts-virtual-active body .buzz-shorts-media .buzz-featured-video{ position:relative!important; } html.buzz-shorts-virtual-active body .buzz-relay-video-controls{ position:absolute!important; left:8px!important; right:8px!important; bottom:8px!important; z-index:30!important; display:flex!important; align-items:center!important; gap:8px!important; min-height:34px!important; padding:4px 7px!important; border-radius:8px!important; background:rgba(0,0,0,.58)!important; color:#fff!important; opacity:1!important; visibility:visible!important; pointer-events:auto!important; box-sizing:border-box!important; } html.buzz-shorts-virtual-active body .buzz-relay-video-controls button{ flex:0 0 30px!important; width:30px!important; height:30px!important; margin:0!important; padding:0!important; border:0!important; border-radius:6px!important; background:transparent!important; color:#fff!important; font-size:16px!important; line-height:1!important; display:grid!important; place-items:center!important; cursor:pointer!important; touch-action:manipulation!important; } html.buzz-shorts-virtual-active body .buzz-relay-video-time{ flex:0 0 auto!important; min-width:34px!important; font-size:11px!important; font-variant-numeric:tabular-nums!important; } html.buzz-shorts-virtual-active body .buzz-relay-video-seek{ flex:1 1 auto!important; min-width:0!important; height:24px!important; margin:0!important; padding:0!important; accent-color:#fff!important; touch-action:manipulation!important; } }