/* ========================================================= BETOPICK BLOG — topic-search.css Shared styles for topic.php & search.php Light mode DEFAULT · Dark mode via .dark-mode class on ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;0,600;0,700;0,800;0,900;1,700&family=Barlow:wght@300;400;500;600;700&display=swap'); /* ══════════════════════════════════════════════════════════ LIGHT THEME (default) ══════════════════════════════════════════════════════════ */ :root { --clr-bg: #f0f2f7; --clr-surface: #ffffff; --clr-surface2: #e8eaf0; --clr-border: #dde0ea; --clr-accent: #f5a623; --clr-accent2: #e8304a; --clr-accent3: #0079c1; --clr-text: #12141e; --clr-text2: #2e3248; --clr-muted: #5a6178; --clr-muted2: #9aa0b4; --clr-shadow: rgba(0,0,0,.08); --header-h: 58px; --topbar-h: 36px; --nav-h: 42px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --font-display: 'Barlow Condensed', sans-serif; --font-body: 'Barlow', sans-serif; --transition: 0.22s cubic-bezier(.4,0,.2,1); } /* ══════════════════════════════════════════════════════════ DARK THEME (toggled via ) ══════════════════════════════════════════════════════════ */ html.dark-mode { --clr-bg: #0d0f14; --clr-surface: #161921; --clr-surface2: #1e2230; --clr-border: #252a3a; --clr-accent3: #00c2a8; --clr-text: #f0f2f7; --clr-text2: #c8ccd8; --clr-muted: #7b8299; --clr-muted2: #4a5068; --clr-shadow: rgba(0,0,0,.35); } /* ── Reset ──────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--clr-bg); color: var(--clr-text); font-family: var(--font-body); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background var(--transition), color var(--transition); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } ul { list-style: none; } .flex { display: flex; } .flex_center { display: flex; align-items: center; justify-content: center; } .flex_sb { display: flex; align-items: center; justify-content: space-between; } .flex_in { display: flex; align-items: center; } .sr-only { position: absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } /* ── Layout ─────────────────────────────────────────────── */ .overall-container { max-width: 1380px; margin: 0 auto; padding: 28px 24px 72px; } .con-inner { display: grid; grid-template-columns: 220px 1fr 300px; gap: 28px; align-items: start; } @media (max-width: 1200px) { .con-inner { grid-template-columns: 200px 1fr; } .rightsided { display: none; } } @media (max-width: 820px) { .con-inner { grid-template-columns: 1fr; } .leftside { display: none; } } @media (max-width: 540px) { .overall-container { padding: 16px 14px 56px; } } /* ── LEFT SIDEBAR ───────────────────────────────────────── */ .leftside { position: sticky; top: calc(var(--topbar-h) + var(--header-h) + var(--nav-h) + 16px); } .leftside-fixed { display: flex; flex-direction: column; gap: 8px; } .leftside-ul { display: flex; flex-direction: column; gap: 2px; } .leftside-li a { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--clr-muted); padding: 10px 14px; border-radius: var(--radius-sm); border-left: 3px solid transparent; transition: all var(--transition); } .leftside-li a:hover { color: var(--clr-text); background: var(--clr-surface); border-color: var(--clr-accent); } .icon-svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } /* ── PAGE HEADER BANNER ─────────────────────────────────── */ .page-hero { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 28px 28px 24px; margin-bottom: 24px; position: relative; overflow: hidden; } .page-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--clr-accent) 0%, var(--clr-accent2) 50%, var(--clr-accent3) 100%); } .page-hero__eyebrow { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--clr-accent3); margin-bottom: 8px; } .page-hero__eyebrow svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; } .page-hero__title { font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px); font-weight: 900; line-height: 1.1; color: var(--clr-text); letter-spacing: -.01em; } .page-hero__meta { font-size: 13px; color: var(--clr-muted); margin-top: 6px; } .page-hero__meta strong { color: var(--clr-text2); } /* ── TOPIC FILTER PILLS ─────────────────────────────────── */ .topic-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; } .topic-pill { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 14px; border-radius: 20px; border: 1px solid var(--clr-border); color: var(--clr-muted); background: var(--clr-surface); transition: all var(--transition); cursor: pointer; white-space: nowrap; } .topic-pill:hover, .topic-pill.active { background: var(--clr-accent); border-color: var(--clr-accent); color: #000; } /* ── SECTION LABEL ──────────────────────────────────────── */ .section-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--clr-border); } .section-label h2 { font-family: var(--font-display); font-size: 17px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--clr-text); display: flex; align-items: center; gap: 10px; } .section-label h2::before { content: ''; display: inline-block; width: 4px; height: 18px; background: var(--clr-accent); border-radius: 2px; } .section-label a { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--clr-accent3); transition: color var(--transition); } .section-label a:hover { color: var(--clr-text); } /* ══════════════════════════════════════════════════════════ TOPIC PAGE — post list items ══════════════════════════════════════════════════════════ */ .topics--con { display: flex; flex-direction: column; gap: 2px; } .topic-box { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 16px 20px; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); position: relative; overflow: hidden; } .topic-box::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--clr-accent); transform: scaleY(0); transition: transform var(--transition); border-radius: 0 2px 2px 0; } .topic-box:hover { transform: translateX(4px); box-shadow: 0 4px 20px var(--clr-shadow); border-color: transparent; } .topic-box:hover::before { transform: scaleY(1); } .topic { font-family: var(--font-display); font-size: 17px; font-weight: 700; line-height: 1.3; color: var(--clr-text); margin-bottom: 8px; transition: color var(--transition); } .topic-box:hover .topic { color: var(--clr-accent3); } .topic_dtls { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; } .topic_author { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-muted); } .tpic-icons { display: flex; align-items: center; gap: 14px; } .icon-inner { display: flex; align-items: center; gap: 5px; } .like-icon { display: flex; align-items: center; } .icon_topic { width: 14px; height: 14px; stroke: var(--clr-muted2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .author_postcount { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-muted2); } .numbers { font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--clr-muted); } /* ══════════════════════════════════════════════════════════ SEARCH PAGE — result cards ══════════════════════════════════════════════════════════ */ .search-hero { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-lg); padding: 28px; margin-bottom: 24px; position: relative; overflow: hidden; } .search-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--clr-accent3) 0%, var(--clr-accent) 100%); } .search-hero__form { display: flex; gap: 10px; margin-bottom: 10px; } .search-hero__input { flex: 1; background: var(--clr-bg); border: 1px solid var(--clr-border); border-radius: var(--radius-md); color: var(--clr-text); font-family: var(--font-body); font-size: 15px; padding: 11px 16px 11px 44px; outline: none; transition: border-color var(--transition); } .search-hero__input:focus { border-color: var(--clr-accent3); } .search-hero__input::placeholder { color: var(--clr-muted2); } .search-hero__wrap { position: relative; flex: 1; } .search-hero__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; display: flex; align-items: center; } .search-hero__icon svg { width: 16px; height: 16px; stroke: var(--clr-muted2); fill: none; stroke-width: 2; } .search-hero__btn { font-family: var(--font-display); font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--clr-accent3); color: #fff; border: none; border-radius: var(--radius-md); padding: 11px 22px; cursor: pointer; transition: opacity var(--transition); white-space: nowrap; } .search-hero__btn:hover { opacity: .88; } .search-count { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-muted); } .search-count strong { color: var(--clr-text); } /* Empty state */ .search-empty { text-align: center; padding: 60px 20px; color: var(--clr-muted); } .search-empty svg { width: 56px; height: 56px; stroke: var(--clr-muted2); fill: none; stroke-width: 1.5; margin: 0 auto 20px; } .search-empty h3 { font-family: var(--font-display); font-size: 22px; font-weight: 800; color: var(--clr-text); margin-bottom: 8px; } .search-empty p { font-size: 14px; } /* Result card */ .c-div-con { display: flex; gap: 16px; align-items: flex-start; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 2px; transition: transform var(--transition), box-shadow var(--transition); } .c-div-con:hover { transform: translateY(-2px); box-shadow: 0 8px 28px var(--clr-shadow); } .c-div-img-con { flex-shrink: 0; } .con-img { width: 100px; height: 76px; border-radius: var(--radius-sm); overflow: hidden; background: var(--clr-surface2); } .con-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .c-div-con:hover .con-img img { transform: scale(1.06); } .c-div-headline { flex: 1; min-width: 0; } .div-headline-top { margin-bottom: 10px; } .headline-nick { display: flex; align-items: center; gap: 5px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--clr-muted2); margin-bottom: 4px; } .headline-top-h1 { font-family: var(--font-display); font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--clr-text); margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color var(--transition); } .c-div-con:hover .headline-top-h1 { color: var(--clr-accent3); } .headline-top-h3 { font-size: 13px; color: var(--clr-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .div-headline-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .div-category { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--clr-accent3); color: #fff; padding: 2px 10px; border-radius: var(--radius-sm); } .div-icons { display: flex; align-items: center; gap: 12px; } .icon-like, .icon-chat { width: 15px; height: 15px; stroke: var(--clr-muted2); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ══════════════════════════════════════════════════════════ SHARED — Pagination ══════════════════════════════════════════════════════════ */ .page-loader { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 36px 0 12px; } .next_page, .prev_page { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 9px 22px; border-radius: var(--radius-sm); border: 1px solid var(--clr-border); background: var(--clr-surface); color: var(--clr-muted); transition: all var(--transition); } .next_page:hover, .prev_page:hover { background: var(--clr-accent); border-color: var(--clr-accent); color: #000; } /* ══════════════════════════════════════════════════════════ SHARED — Right Sidebar ══════════════════════════════════════════════════════════ */ .rightsided { position: sticky; top: calc(var(--topbar-h) + var(--header-h) + var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 20px; } .right_inner { display: flex; flex-direction: column; gap: 20px; } .hed-h { display: flex; align-items: center; justify-content: space-between; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 2px solid var(--clr-border); } .hed-h h3 { font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-text); display: flex; align-items: center; gap: 8px; } .hed-h h3::before { content: ''; display: inline-block; width: 3px; height: 15px; background: var(--clr-accent2); border-radius: 2px; } .hed-h a { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--clr-accent3); transition: color var(--transition); } .hed-h a:hover { color: var(--clr-text); } /* Right list item */ .rightsided-con { border-bottom: 1px solid var(--clr-border); } .rightsided-con:last-child { border-bottom: none; } .rightsided-inner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; transition: padding-left var(--transition); } .rightsided-con:hover .rightsided-inner { padding-left: 6px; } .imghash { flex-shrink: 0; width: 28px; height: 28px; background: var(--clr-surface2); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; } .imghash .icon-svg { width: 13px; height: 13px; stroke: var(--clr-accent); } .rightsided-headline { font-family: var(--font-display); font-size: 13px; font-weight: 700; line-height: 1.35; color: var(--clr-muted); transition: color var(--transition); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .rightsided-con:hover .rightsided-headline { color: var(--clr-text); } /* Hot songs/predictions list */ .rightsided-artimg { width: 52px; height: 40px; flex-shrink: 0; border-radius: var(--radius-sm); overflow: hidden; background: var(--clr-surface2); } .rightsided-artimg img { width: 100%; height: 100%; object-fit: cover; } .hot-svg, .hot-badge { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; background: var(--clr-accent2); border-radius: 50%; } .icon-sm-svg { width: 11px; height: 11px; stroke: #fff; fill: none; stroke-width: 2.5; } .rightsided-sng-con { flex: 1; min-width: 0; } .rightsided-sng-name { font-family: var(--font-display); font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--clr-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rightsided-artist { font-size: 11px; color: var(--clr-muted2); margin-top: 2px; } /* Social follow */ .rightsided-social-con { background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-md); padding: 16px; } .rightsided-header { font-family: var(--font-display); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--clr-text); margin-bottom: 12px; } .rightsided-s { display: flex; gap: 8px; flex-wrap: wrap; } .dtls-svg { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-sm); background: var(--clr-surface2); border: 1px solid var(--clr-border); cursor: pointer; transition: background var(--transition), border-color var(--transition); } .dtls-svg:hover { background: var(--clr-accent); border-color: var(--clr-accent); } .svg_img { width: 17px; height: 17px; fill: var(--clr-muted); transition: fill var(--transition); } .dtls-svg:hover .svg_img { fill: #000; } /* Ad banners */ .rightsided_adBanner { display: flex; flex-direction: column; gap: 8px; } .r_bannerImg { border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--clr-border); } .r_bannerImg img { width: 100%; display: block; } /* ══════════════════════════════════════════════════════════ THEME TOGGLE BUTTON (floating or in page) ══════════════════════════════════════════════════════════ */ .theme-toggle-btn { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-sm); color: var(--clr-muted); padding: 7px 14px; cursor: pointer; transition: all var(--transition); } .theme-toggle-btn:hover { color: var(--clr-text); border-color: var(--clr-muted2); } .theme-toggle-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }