/* Theme Name: Antífrase Theme URI: https://antifrase.com Author: Antífrase Author URI: https://antifrase.com Description: Tema clássico para blog de música pop — manchetes em destaque, carrossel de capa, reviews com nota e áreas de anúncio. Visual "carimbo RGB" no periwinkle, com modo escuro, temas de cor e tipografia ajustáveis pelo Personalizador. Totalmente em português do Brasil e responsivo. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: antifrase Tags: blog, news, magazine, music, two-columns, right-sidebar, custom-menu, custom-colors, featured-images, sticky-post, threaded-comments, translation-ready, dark-mode */ /* ============================================================ Antífrase — variáveis (valores padrão; o Personalizador sobrescreve via bloco inline no ) ============================================================ */ .pop{ --brand:#5F689F; --brand2:#34356B; --hot:#FF5C8A; --action:#FFD23D; --paper:#F5F4FB; --ink:#16152B; --card:#ffffff; --line:#16152B; --muted:rgba(20,16,22,.55); --adbg:rgba(20,16,22,.03); --adink:rgba(20,16,22,.4); --dispfont:"Bricolage Grotesque", sans-serif; --shadow:5px 5px 0 var(--line); --cardborder:2px solid var(--line); /* paleta de cores rotativa para os chips de categoria no menu */ --c1:oklch(0.80 0.15 285); --c2:oklch(0.80 0.17 350); --c3:oklch(0.85 0.15 75); --c4:oklch(0.80 0.13 220); --c5:oklch(0.86 0.18 140); --c6:oklch(0.82 0.16 30); } .pop.dark{ --paper:#15121a; --ink:#f3eefa; --card:#211c2b; --line:rgba(255,255,255,.16); --muted:rgba(255,255,255,.55); --adbg:rgba(255,255,255,.04); --adink:rgba(255,255,255,.4); } /* ============================================================ Reset / base ============================================================ */ *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } html, body{ margin:0; padding:0; } body{ background:var(--paper,#F5F4FB); } img{ max-width:100%; height:auto; } a img{ border:none; } .pop{ min-height:100vh; background:var(--paper); color:var(--ink); font-family:"Hanken Grotesk",system-ui,sans-serif; -webkit-font-smoothing:antialiased; transition:background .2s,color .2s; } .pop *{ box-sizing:border-box; } .pop .disp{ font-family:var(--dispfont); font-weight:800; line-height:.92; letter-spacing:-.02em; } .pop a{ color:inherit; text-decoration:none; cursor:pointer; } .pop .wrap{ max-width:1200px; margin:0 auto; padding:0 40px; } .pop .screen-reader-text{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .pop .skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:#fff; color:#26264A; padding:10px 16px; border-radius:0 0 8px 0; font-weight:700; } .pop .skip-link:focus{ left:0; } /* ============================================================ Header ============================================================ */ .pop .hdr{ position:sticky; top:0; z-index:50; } .pop .top{ background:#26264A; color:#fff; } .pop .top-in{ display:flex; align-items:center; justify-content:space-between; min-height:58px; padding-top:26px; padding-bottom:6px; } .pop .brand{ display:flex; align-items:center; min-width:0; } .pop .logo{ font-size:30px; letter-spacing:-.03em; } .pop .logo .dot{ color:#FFD23D; } /* carimbo RGB lockup — header + footer */ .pop .top .logo, .pop .foot .logo{ font-family:"Baloo 2","Hanken Grotesk",sans-serif; font-weight:800; letter-spacing:.4px; text-shadow:2px 0 0 #FF5C8A, -2px 0 0 #2FC4D8; } .pop .top .logo .dot, .pop .foot .logo .dot{ color:#FFD23D; text-shadow:none; } .pop .top .logo{ font-size:43px; display:inline-block; transform-origin:50% 60%; line-height:1; } .pop .top .logo:hover{ animation:logoWobble .4s ease-in-out infinite; } @keyframes logoWobble{ 0%{ transform:rotate(0deg) translate(0,0); } 20%{ transform:rotate(-2.2deg) translate(-1px,.5px); } 40%{ transform:rotate(1.8deg) translate(1px,-.5px); } 60%{ transform:rotate(-1.4deg) translate(-.5px,.5px); } 80%{ transform:rotate(1.6deg) translate(.5px,-.5px); } 100%{ transform:rotate(0deg) translate(0,0); } } .pop .slogan{ font-family:"Space Grotesk",monospace; font-size:12.5px; font-style:italic; color:rgba(255,255,255,.6); margin-left:20px; padding-left:20px; border-left:1px solid rgba(255,255,255,.18); white-space:nowrap; letter-spacing:.01em; } .pop .hdr.stuck .slogan{ display:none; } .pop .top-r{ display:flex; align-items:center; gap:9px; } .pop .pill{ font-family:"Space Grotesk",monospace; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:7px 13px; border-radius:999px; border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; transition:background .15s,transform .1s; text-decoration:none; } .pop .pill:hover{ background:rgba(255,255,255,.12); } .pop .pill.hot{ background:var(--hot); border-color:var(--hot); } .pop .pill.hot:hover{ transform:translateY(-1px); filter:brightness(1.06); } .pop .navtoggle{ display:none; } .pop .nav{ background:#26264A; padding-top:22px; padding-bottom:20px; } .pop .nav-in{ display:flex; align-items:center; justify-content:space-between; gap:20px; } .pop .chips{ display:flex; gap:26px; flex-wrap:wrap; align-items:center; margin:0; padding:0; list-style:none; } .pop .chips > li{ margin:0; padding:0; } .pop .chip, .pop .chips a{ font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:18px; letter-spacing:-.01em; padding:3px 0; background:none; border:none; cursor:pointer; white-space:nowrap; position:relative; opacity:.86; color:#fff; transition:opacity .18s, text-shadow .22s, filter .22s; text-decoration:none; } .pop .chips a:hover, .pop .chip:hover{ opacity:1; text-shadow:0 0 18px currentColor, 0 0 6px currentColor; } .pop .chips .current-menu-item > a, .pop .chips .current_page_item > a, .pop .chips .current-cat > a{ opacity:1; } .pop .chips .current-menu-item > a:hover{ text-shadow:0 0 22px currentColor, 0 0 8px currentColor; } /* paleta rotativa nos itens de menu */ .pop .chips > li:nth-child(6n+1) > a{ color:var(--c1); } .pop .chips > li:nth-child(6n+2) > a{ color:var(--c2); } .pop .chips > li:nth-child(6n+3) > a{ color:var(--c3); } .pop .chips > li:nth-child(6n+4) > a{ color:var(--c4); } .pop .chips > li:nth-child(6n+5) > a{ color:var(--c5); } .pop .chips > li:nth-child(6n+6) > a{ color:var(--c6); } .pop .util{ display:flex; gap:18px; align-items:center; margin:0; padding:0; list-style:none; } .pop .util-wrap{ display:flex; align-items:center; gap:16px; } .pop .util > li{ margin:0; } .pop .ulink, .pop .util a{ font-family:"Space Grotesk",monospace; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:rgba(255,255,255,.7); white-space:nowrap; text-decoration:none; } .pop .ulink:hover, .pop .util a:hover{ color:#fff; } .pop .util .anuncie a, .pop .ulink.hot{ color:var(--action); } .pop .social{ display:flex; align-items:center; gap:12px; margin-left:4px; padding-left:16px; border-left:1px solid rgba(255,255,255,.16); } .pop .soc{ display:inline-flex; align-items:center; justify-content:center; color:rgba(255,255,255,.42); transition:color .15s, transform .15s; } .pop .soc:hover{ color:rgba(255,255,255,.95); transform:translateY(-1px); } .pop .hdr.stuck .nav{ padding-top:10px; padding-bottom:10px; box-shadow:0 8px 24px rgba(0,0,0,.18); } .pop .hdr.stuck .top-in{ min-height:58px; padding-top:26px; padding-bottom:6px; } /* search overlay */ .pop .searchbar{ background:#1d1d3a; overflow:hidden; max-height:0; transition:max-height .25s ease; } .pop .searchbar.open{ max-height:120px; } .pop .searchbar .wrap{ padding-top:16px; padding-bottom:16px; } .pop .searchbar form{ display:flex; gap:10px; } .pop .searchbar input[type=search]{ flex:1; border:none; border-radius:999px; padding:13px 20px; font-size:15px; font-family:inherit; outline:none; } .pop .searchbar button{ border:none; border-radius:999px; padding:0 24px; font-weight:700; background:var(--action); color:#141016; cursor:pointer; font-family:inherit; } /* ============================================================ Ad slots (áreas de widget / placeholders) ============================================================ */ .pop .ad, .pop .adph{ width:100%; background:var(--adbg); border:1.5px dashed var(--adink); border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--adink); margin:0 auto; min-height:64px; padding:18px; } .pop .ad-tag{ font-family:"Space Grotesk",monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; opacity:.8; } .pop .ad-sz{ font-family:"Space Grotesk",monospace; font-size:15px; font-weight:600; letter-spacing:.04em; color:var(--ink); opacity:.55; } .pop .ad-hint{ font-family:"Space Grotesk",monospace; font-size:10px; letter-spacing:.05em; opacity:.6; } .pop .adrow{ margin:26px auto; display:flex; justify-content:center; } .pop .adrow.center{ margin:44px auto; } .pop .adrow .textwidget, .pop .adrow .widget_text{ width:100%; text-align:center; } .pop .adzone{ display:flex; justify-content:center; } /* ============================================================ Hero gallery ============================================================ */ .pop .herowrap{ position:relative; } .pop .herotrack{ position:relative; } .pop .hero-in{ display:grid; grid-template-columns:1.08fr 1fr; min-height:430px; margin-top:6px; border:var(--cardborder); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); } .pop .hero-slide{ display:none; } .pop .hero-slide.active{ display:block; animation:heroFade .45s ease both; } @keyframes heroFade{ from{ transform:translateY(10px); opacity:.6; } to{ transform:translateY(0); opacity:1; } } .pop .heroctrls{ position:absolute; bottom:16px; right:16px; z-index:6; display:flex; align-items:center; gap:13px; background:rgba(20,16,22,.4); border:1px solid rgba(255,255,255,.28); backdrop-filter:blur(6px); padding:7px 13px; border-radius:999px; } .pop .heronav{ width:30px; height:30px; border-radius:999px; border:none; background:rgba(255,255,255,.18); color:#fff; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0 0 2px; transition:background .15s, transform .15s; } .pop .heronav:hover{ background:rgba(255,255,255,.4); transform:scale(1.08); } .pop .herodots{ display:flex; gap:8px; align-items:center; } .pop .hdot{ width:8px; height:8px; border-radius:999px; border:none; background:rgba(255,255,255,.5); cursor:pointer; padding:0; transition:background .2s, width .2s; } .pop .hdot.on{ background:#fff; width:24px; } .pop .hero-txt{ background:var(--brand); color:#fff; padding:44px; display:flex; flex-direction:column; justify-content:space-between; } .pop .hero-kickrow{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; } .pop .hero-kick{ font-family:"Space Grotesk",monospace; font-size:12px; letter-spacing:.13em; text-transform:uppercase; background:#fff; color:var(--brand); display:inline-block; padding:6px 16px; border-radius:999px; font-weight:700; white-space:nowrap; } .pop .hero-date{ font-family:"Space Grotesk",monospace; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.72); white-space:nowrap; } .pop .hero-txt h1, .pop .hero-txt h2{ font-size:54px; margin:20px 0 0; font-family:var(--dispfont); font-weight:800; line-height:.92; letter-spacing:-.02em; } .pop .hero-txt h1 a, .pop .hero-txt h2 a{ color:#fff; } .pop .hero-txt .dek{ font-size:17.5px; line-height:1.45; margin-top:18px; max-width:26em; color:rgba(255,255,255,.92); } .pop .hero-txt .cta{ margin-top:24px; display:inline-flex; align-items:center; gap:10px; background:var(--action); color:#141016; font-weight:700; font-size:15px; padding:13px 22px; border-radius:999px; align-self:flex-start; transition:transform .12s,filter .12s; } .pop .hero-txt .cta:hover{ transform:translateY(-2px); filter:brightness(1.05); } .pop .hero-img{ position:relative; min-height:330px; } .pop .hero-img .ph, .pop .hero-img img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .pop .sticker{ position:absolute; top:24px; right:24px; width:98px; height:98px; border-radius:50%; background:var(--action); color:#141016; display:flex; flex-direction:column; align-items:center; justify-content:center; transform:rotate(-12deg); box-shadow:0 10px 0 rgba(0,0,0,.14); border:3px solid #141016; z-index:3; } .pop .sticker b{ font-size:38px; line-height:1; font-family:var(--dispfont); font-weight:800; } .pop .sticker span{ font-family:"Space Grotesk",monospace; font-size:10px; font-weight:700; letter-spacing:.14em; } /* ============================================================ Layout (main + rail) ============================================================ */ .pop .layout{ display:grid; grid-template-columns:1fr 300px; gap:36px; margin-top:8px; align-items:start; } .pop .main{ min-width:0; } .pop .rail-sticky{ position:sticky; top:128px; display:flex; flex-direction:column; gap:24px; } /* section heading */ .pop .sec{ display:flex; align-items:center; gap:14px; margin:40px 0 20px; } .pop .sec h2{ font-size:30px; margin:0; white-space:nowrap; font-family:var(--dispfont); font-weight:800; line-height:.92; letter-spacing:-.02em; } .pop .sec .rule{ flex:1; height:3px; background:var(--ink); border-radius:2px; opacity:.9; } .pop .sec .more{ font-family:"Space Grotesk",monospace; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; } /* feature cards */ .pop .grid2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .pop .fcard{ background:var(--card); border-radius:14px; overflow:hidden; border:var(--cardborder); box-shadow:var(--shadow); transition:transform .15s; display:block; } .pop .fcard:hover{ transform:translate(-2px,-3px); } .pop .fcard .th{ aspect-ratio:16/9; position:relative; overflow:hidden; } .pop .fcard .th img{ width:100%; height:100%; object-fit:cover; } .pop .fcard .body{ padding:14px 15px 17px; } .pop .tag{ font-family:"Space Grotesk",monospace; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:4px 9px; border-radius:999px; display:inline-block; white-space:nowrap; color:#fff; } .pop .fcard h3{ font-weight:700; font-size:19px; line-height:1.18; margin:10px 0 0; } .pop .fdate{ display:block; margin-top:9px; font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } /* post list (archives / blog) */ .pop .postlist{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } @media (max-width:620px){ .pop .postlist{ grid-template-columns:1fr; } } /* clips */ .pop .gridclips{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } .pop .clip .ct{ position:relative; aspect-ratio:16/10; border-radius:14px; overflow:hidden; border:var(--cardborder); } .pop .clip .ct img{ width:100%; height:100%; object-fit:cover; } .pop .play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } .pop .play span{ width:54px; height:54px; border-radius:50%; background:var(--hot); display:flex; align-items:center; justify-content:center; border:2px solid #fff; transition:transform .15s; } .pop .clip:hover .play span{ transform:scale(1.12); } .pop .dur{ position:absolute; right:9px; bottom:9px; font-family:"Space Grotesk",monospace; font-size:11px; color:#fff; background:rgba(0,0,0,.65); padding:2px 6px; border-radius:4px; } .pop .clip h4{ font-weight:700; font-size:16px; line-height:1.22; margin:11px 0 0; } /* reviews */ .pop .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .pop .rcard{ background:var(--card); border:var(--cardborder); box-shadow:var(--shadow); border-radius:14px; padding:12px; transition:transform .15s; display:block; } .pop .rcard:hover{ transform:translate(-2px,-3px); } .pop .rth{ position:relative; aspect-ratio:16/11; border-radius:9px; overflow:hidden; margin-bottom:12px; } .pop .rth img{ width:100%; height:100%; object-fit:cover; } .pop .rscore{ position:absolute; right:11px; bottom:9px; font-size:32px; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.5); font-family:var(--dispfont); font-weight:800; } .pop .rcard h3{ font-weight:700; font-size:16px; line-height:1.18; margin:0 5px 4px; } .pop .rsub{ font-size:12.5px; color:var(--muted); margin:0 5px; } /* ============================================================ Rail widgets ============================================================ */ .pop .widget{ background:var(--card); border:var(--cardborder); box-shadow:var(--shadow); border-radius:14px; padding:18px 18px 20px; } .pop .widget + .widget{ margin-top:0; } .pop .wh, .pop .widget-title, .pop .widget .widgettitle{ font-family:var(--dispfont); font-weight:800; letter-spacing:-.02em; font-size:22px; margin:0 0 12px; color:var(--ink); line-height:1; } .pop .widget ul{ margin:0; padding:0; list-style:none; } .pop .widget ul li{ padding:10px 0; border-top:1px solid rgba(128,128,128,.18); font-size:14px; line-height:1.35; } .pop .widget ul li:first-child{ border-top:none; } .pop .widget ul li a{ color:inherit; } .pop .widget ul li a:hover{ color:var(--hot); } .pop .widget select{ width:100%; padding:8px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink); } .pop .widget .ml li{ } .pop .sponsor{ background:var(--brand); color:#fff; border-color:var(--brand); } .pop .sponsor .wh, .pop .sponsor .widget-title{ color:#fff; } .pop .sp-tag{ font-family:"Space Grotesk",monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; opacity:.8; } .pop .sp-h{ font-size:21px; margin:8px 0 14px; } .pop .sp-form{ display:flex; flex-direction:column; gap:8px; } .pop .sp-form input{ border:none; border-radius:9px; padding:11px 13px; font-size:14px; font-family:inherit; outline:none; } .pop .sp-form button{ border:none; border-radius:9px; padding:11px; font-weight:700; font-size:14px; background:var(--action); color:#141016; cursor:pointer; } /* search widget / form */ .pop .search-form{ display:flex; gap:8px; } .pop .search-form .search-field{ flex:1; border:1px solid var(--line); border-radius:9px; padding:10px 12px; font-family:inherit; font-size:14px; background:var(--card); color:var(--ink); } .pop .search-form .search-submit{ border:none; border-radius:9px; padding:10px 16px; font-weight:700; background:var(--action); color:#141016; cursor:pointer; font-family:inherit; } /* ============================================================ Single / Page content ============================================================ */ .pop .article{ background:var(--card); border:var(--cardborder); box-shadow:var(--shadow); border-radius:18px; overflow:hidden; } .pop .article .hero-img{ min-height:0; aspect-ratio:16/8; position:relative; } .pop .article-body{ padding:36px 44px 44px; } .pop .article .kickrow{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:14px; } .pop .article h1.entry-title{ font-family:var(--dispfont); font-weight:800; letter-spacing:-.02em; line-height:.98; font-size:46px; margin:0 0 14px; } .pop .post-meta{ font-family:"Space Grotesk",monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; margin-bottom:8px; } .pop .entry-content{ font-size:18px; line-height:1.7; color:var(--ink); } .pop .entry-content p{ margin:0 0 1.2em; } .pop .entry-content h2{ font-family:var(--dispfont); font-weight:800; letter-spacing:-.02em; font-size:30px; margin:1.6em 0 .5em; } .pop .entry-content h3{ font-weight:700; font-size:23px; margin:1.4em 0 .4em; } .pop .entry-content a{ color:var(--hot); text-decoration:underline; text-underline-offset:3px; } .pop .entry-content img{ border-radius:10px; height:auto; } .pop .entry-content blockquote{ margin:1.5em 0; padding:6px 0 6px 22px; border-left:4px solid var(--hot); font-size:21px; font-style:italic; color:var(--ink); } .pop .entry-content ul, .pop .entry-content ol{ margin:0 0 1.2em; padding-left:1.4em; } .pop .entry-content li{ margin:.4em 0; } .pop .entry-content figure{ margin:1.5em 0; } .pop .entry-content figcaption{ font-family:"Space Grotesk",monospace; font-size:12px; color:var(--muted); margin-top:8px; } .pop .entry-content pre{ background:rgba(128,128,128,.12); padding:16px; border-radius:10px; overflow:auto; font-size:14px; } .pop .entry-content code{ font-family:"Space Grotesk",monospace; font-size:.9em; } .pop .wp-caption{ max-width:100%; } .pop .wp-caption-text{ font-family:"Space Grotesk",monospace; font-size:12px; color:var(--muted); } .pop .alignright{ float:right; margin:0 0 1em 1.5em; } .pop .alignleft{ float:left; margin:0 1.5em 1em 0; } .pop .aligncenter{ display:block; margin:1em auto; } .pop .entry-tags{ margin-top:28px; display:flex; flex-wrap:wrap; gap:8px; } .pop .entry-tags a{ font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line); border-radius:999px; padding:6px 12px; color:var(--ink); } .pop .entry-tags a:hover{ background:var(--hot); border-color:var(--hot); color:#fff; } .pop .page-hero{ margin:18px 0 0; } .pop .page-title-block{ margin:36px 0 8px; } .pop .page-title-block h1{ font-family:var(--dispfont); font-weight:800; letter-spacing:-.02em; font-size:42px; margin:0; } .pop .archive-desc{ color:var(--muted); margin-top:8px; font-size:16px; } /* author box / post nav */ .pop .postnav{ display:flex; justify-content:space-between; gap:16px; margin-top:28px; } .pop .postnav a{ font-family:"Space Grotesk",monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--hot); font-weight:700; } /* ============================================================ Comments ============================================================ */ .pop .comments-area{ background:var(--card); border:var(--cardborder); box-shadow:var(--shadow); border-radius:18px; padding:32px 44px 40px; margin-top:28px; } .pop .comments-title, .pop .comment-reply-title{ font-family:var(--dispfont); font-weight:800; letter-spacing:-.02em; font-size:26px; margin:0 0 20px; } .pop .comment-list{ list-style:none; margin:0; padding:0; } .pop .comment-list li{ margin:0 0 18px; } .pop .comment-list .children{ list-style:none; margin:14px 0 0 28px; padding:0; } .pop .comment-body{ border:1px solid var(--line); border-radius:12px; padding:16px 18px; } .pop .comment-author{ display:flex; align-items:center; gap:10px; font-weight:700; } .pop .comment-author .avatar{ border-radius:50%; } .pop .comment-metadata{ font-family:"Space Grotesk",monospace; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin:4px 0 8px; } .pop .comment-content{ font-size:15px; line-height:1.6; } .pop .reply a{ font-family:"Space Grotesk",monospace; font-size:11px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--hot); } .pop .comment-respond{ margin-top:24px; } .pop .comment-form{ display:grid; gap:14px; } .pop .comment-form label{ font-family:"Space Grotesk",monospace; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:block; margin-bottom:6px; } .pop .comment-form input[type=text], .pop .comment-form input[type=email], .pop .comment-form input[type=url], .pop .comment-form textarea{ width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 14px; font-family:inherit; font-size:15px; background:var(--card); color:var(--ink); } .pop .comment-form .form-submit input{ border:none; border-radius:999px; padding:13px 26px; font-weight:700; background:var(--hot); color:#fff; cursor:pointer; font-family:inherit; font-size:15px; } /* ============================================================ Pagination ============================================================ */ .pop .pagination{ margin:40px 0 0; display:flex; justify-content:center; } .pop .pagination .nav-links{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; } .pop .pagination .page-numbers{ font-family:"Space Grotesk",monospace; font-weight:700; font-size:14px; min-width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; padding:0 12px; border:2px solid var(--line); border-radius:10px; color:var(--ink); } .pop .pagination .page-numbers.current{ background:var(--brand); color:#fff; border-color:var(--brand); } .pop .pagination a.page-numbers:hover{ background:var(--hot); color:#fff; border-color:var(--hot); } .pop .nothing{ background:var(--card); border:var(--cardborder); box-shadow:var(--shadow); border-radius:18px; padding:48px 44px; text-align:center; } .pop .nothing h1{ font-family:var(--dispfont); font-weight:800; letter-spacing:-.02em; font-size:64px; margin:0 0 10px; } /* ============================================================ Footer ============================================================ */ .pop .foot{ background:#26264A; color:#fff; margin-top:54px; padding:42px 0 50px; } .pop .foot-in{ display:flex; justify-content:space-between; align-items:flex-start; gap:30px; flex-wrap:wrap; } .pop .foot .logo{ font-size:36px; } .pop .foot .cols{ display:flex; gap:54px; flex-wrap:wrap; } .pop .foot h5, .pop .foot .widget-title{ font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; margin:0 0 13px; font-weight:700; } .pop .foot a{ display:block; font-size:14px; padding:5px 0; opacity:.92; transition:color .12s; } .pop .foot a:hover{ color:var(--action); opacity:1; } .pop .foot .copy{ margin-top:26px; font-family:"Space Grotesk",monospace; font-size:12px; opacity:.6; line-height:1.5; } .pop .foot .widget{ background:none; border:none; box-shadow:none; padding:0; } .pop .foot .widget ul li{ border-top:none; padding:5px 0; } /* anchor ad */ .pop .anchorad{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(20,16,22,.92); backdrop-filter:blur(6px); border-top:1px solid rgba(255,255,255,.12); padding:8px 0; } .pop .anchorad-in{ display:flex; align-items:center; justify-content:center; position:relative; } .pop .anchorad .ad{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.25); color:rgba(255,255,255,.55); min-height:auto; } .pop .anchorx{ position:absolute; right:0; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; cursor:pointer; font-size:16px; line-height:1; } /* gradient placeholder atom */ .pop .ph{ position:relative; overflow:hidden; background:#d9d5cc; width:100%; height:100%; } .pop .ph .ph-label{ position:absolute; left:10px; bottom:8px; font-family:"Space Grotesk",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.92); background:rgba(0,0,0,.35); padding:3px 7px; border-radius:3px; } /* ============================================================ Responsive ============================================================ */ @media (max-width:980px){ .pop .layout{ grid-template-columns:1fr; } .pop .rail-sticky{ position:static; } .pop .grid3{ grid-template-columns:repeat(2,1fr); } } @media (max-width:860px){ .pop .slogan{ display:none; } } @media (max-width:760px){ .pop .wrap{ padding:0 20px; } .pop .top-in{ padding-top:16px; } .pop .hdr.stuck .top-in{ padding-top:16px; } .pop .top .logo{ font-size:34px; } /* mobile nav: pills collapse, hamburger appears */ .pop .navtoggle{ display:inline-flex; } .pop .top-r .pill.newsletter, .pop .top-r .pill.anuncie{ display:none; } .pop .nav{ padding-top:0; padding-bottom:0; } .pop .nav-in{ flex-direction:column; align-items:stretch; gap:0; } .pop .chips{ flex-direction:column; align-items:flex-start; gap:0; max-height:0; overflow:hidden; transition:max-height .3s ease; } .pop .nav.open .chips{ max-height:600px; padding:8px 0 14px; } .pop .chips > li{ width:100%; border-top:1px solid rgba(255,255,255,.1); } .pop .chips > li > a{ display:block; padding:13px 0; font-size:20px; } .pop .util-wrap{ max-height:0; overflow:hidden; transition:max-height .3s ease; flex-wrap:wrap; flex-direction:column; align-items:flex-start; gap:10px; } .pop .nav.open .util-wrap{ max-height:220px; padding-bottom:16px; } .pop .util{ flex-wrap:wrap; } .pop .social{ border-left:none; padding-left:0; margin-left:0; } .pop .hero-in{ grid-template-columns:1fr; } .pop .hero-img{ min-height:240px; order:-1; } .pop .hero-txt{ padding:30px 26px; } .pop .hero-txt h1, .pop .hero-txt h2{ font-size:34px; } .pop .hero-txt .dek{ font-size:15.5px; } .pop .grid2, .pop .gridclips{ grid-template-columns:1fr; } .pop .grid3{ grid-template-columns:1fr; } .pop .sec h2{ font-size:24px; } .pop .article-body{ padding:26px 22px 32px; } .pop .article h1.entry-title{ font-size:32px; } .pop .entry-content{ font-size:16.5px; } .pop .comments-area{ padding:24px 22px 30px; } .pop .foot-in{ flex-direction:column; } .pop .foot .cols{ gap:32px; } .pop .anchorad{ display:none; } } @media (max-width:420px){ .pop .top-r .pill span.pilltext{ display:none; } }