/* ========================================================================== Pulsar Theme — Single Post Loaded async on single post pages only. ========================================================================== */ /* --- AdSense slot — single post (top / mid in-article / end) --- */ .pls-single-spot{position:relative;display:block;margin:24px auto;padding:0;text-align:center;line-height:0} .pls-single-spot__label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--pls-mute,#7c8aa3);text-align:center;line-height:1.3;margin:0 0 2px} .pls-single-spot > ins.adsbygoogle{display:block;margin:0 auto;width:100%} .pls-single-spot--end{margin:32px auto 8px} /* Block level elements inside the article must not wrap around the floated ad, or they would collide with it. They are forced to `clear:right`, so they start below the float when they have to. The list is deliberate: the theme's own shortcodes, embeds (iframe, figure) and tables. Paragraphs, headings and lists are left out, because those are meant to wrap. */ /* The typography of .pls-entry-content — headings, paragraphs, images, blockquotes, galleries — and the float clearing rules live in entry-content.css, which is loaded on single posts and pages alike. What is left here belongs to single posts only. */ /* Top slot: floated right inside the content, so the paragraphs wrap down the left. A responsive rectangle, 300×250 or 336×280 as the network decides, at most 336px wide and never more than 40% of the column. On a phone it goes full width and the float is dropped. */ .pls-single-spot--top{position:relative;float:right;width:336px;max-width:40%;margin:8px 0 48px 24px;clear:right;padding:8px;border-radius:var(--pls-radius,calc(12px * var(--pls-r)));isolation:isolate;max-height:280px;overflow:hidden} /* A white card that reaches out past its own box, drawn with a pseudo element pulled into the negative: it has to cover the margin on the left, the top and the bottom. Nothing on the right, because there the card is already against the edge. */ .pls-single-spot--top::before{content:"";position:absolute;inset:-8px 0 -48px -8px;background:var(--pls-surface);border-radius:var(--pls-radius,calc(12px * var(--pls-r)));z-index:-1} .pls-single-spot--top .pls-single-spot__label{text-align:left} .pls-single-spot--top > ins.adsbygoogle{min-height:250px;max-width:336px;margin:0 auto} @media (max-width:640px){ .pls-single-spot--top{float:none;width:auto;max-width:100%;margin:18px auto;clear:both;background:var(--pls-surface);isolation:auto} .pls-single-spot--top::before{display:none} .pls-single-spot--top > ins.adsbygoogle{max-width:100%} .pls-single-spot--top .pls-single-spot__label{text-align:center} } /* In-article slot: a full column strip with more padding than the banner. A negative margin lets it reach the edges of the article column. */ .pls-single-spot--mid{background:var(--pls-brand-soft,#e8f0fc);padding:20px 24px 48px 24px;margin:36px 0;clear:both;border-radius:var(--pls-radius,calc(12px * var(--pls-r)))} .pls-single-spot--mid .pls-single-spot__label{color:var(--pls-brand,#1e63d4)} .pls-single-spot--mid > ins.adsbygoogle{min-height:280px;background:transparent} @media (max-width:640px){ .pls-single-spot--mid{padding:8px 16px 22px;margin:24px 0;border-radius:calc(10px * var(--pls-r))} } /* Hides the empty paragraphs wpautop can inject inside the ad container. */ .pls-single-spot--top > p:empty{display:none} /* --- The row of buttons at the end of an article --- */ /* Flex, not a fixed grid: each button has its own switch, so the row can hold one, two or three of them. With `1fr 1fr auto` a lone RSS button landed in a 1fr column and stretched into a wide rectangle instead of staying square. */ .pls-g-cta-row{display:flex;flex-wrap:wrap;align-items:stretch;gap:12px;margin:16px 0;background:var(--pls-bg);border-radius:var(--pls-radius);padding:20px} .pls-g-cta-row > .pls-g-cta{margin:0;min-width:0;flex:1 1 240px} /* The square one keeps its size whatever else is in the row. */ .pls-g-cta-row > .pls-g-cta--rss{flex:0 0 auto} @media (max-width:640px){ .pls-g-cta-row{gap:10px} } .pls-g-cta{display:flex;align-items:center;gap:14px;padding:14px 18px;margin:16px 0;background:var(--pls-surface,#fff);border:1px solid var(--pls-border-soft,#eef1f7);border-radius:var(--pls-radius,calc(12px * var(--pls-r)));text-decoration:none;color:var(--pls-ink,#0f1d36);box-shadow:0 2px 8px rgba(15,29,54,.04);transition:border-color .15s,box-shadow .15s,transform .15s} .pls-g-cta:hover{border-color:var(--pls-brand,#1e63d4);box-shadow:0 6px 16px rgba(15,29,54,.08);transform:translateY(-1px)} /* Google News button: light background on hover, like the preferred source pill. */ .pls-g-cta--news:hover{background:var(--pls-bg)} .pls-g-cta__icon{flex:0 0 auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--pls-surface);box-shadow:0 2px 6px rgba(0,0,0,.06)} .pls-g-cta__body{display:flex;flex-direction:column;line-height:1.3} .pls-g-cta__line1{font-size:13px;color:var(--pls-ink2,#3b4a66);font-weight:500} .pls-g-cta__line2{font-size:16px;font-weight:700;color:var(--pls-ink,#0f1d36);letter-spacing:-.2px} .pls-g-cta__line1 strong{color:var(--pls-ink,#0f1d36);font-weight:700} /* Telegram button: the brand colour as background, white text. The blue is dark enough for white to clear 4.5:1 on both lines. A lighter Telegram blue cannot: on #0082c7 even solid white stops at 4.19:1, so the background is what has to give, not the text. */ .pls-g-cta--telegram{background:#006a9e;border-color:#006a9e;color:#fff} .pls-g-cta--telegram:hover{background:#005b87;border-color:#20c3d0;box-shadow:0 6px 16px rgba(15,29,54,.18)} /* The icon is the Telegram logo, a filled blue circle: its container stays transparent so the circle is not drawn on a second one. */ .pls-g-cta--telegram .pls-g-cta__icon{background:transparent;box-shadow:none} .pls-g-cta--telegram .pls-g-cta__icon svg{width:44px;height:44px;display:block} /* Second line in solid white, first line quieter but still readable: white at .85 gives 4.73:1 on the background and 5.81:1 on the hover. */ .pls-g-cta--telegram .pls-g-cta__line2{color:#fff} .pls-g-cta--telegram .pls-g-cta__line1{color:rgba(255,255,255,.85)} /* Mobile: Google News and RSS share the first line, Telegram takes the second. */ @media (max-width:640px){ .pls-g-cta-row--end > .pls-g-cta--news{flex:1 1 auto} .pls-g-cta-row--end > .pls-g-cta--rss{flex:0 0 auto} .pls-g-cta-row--end > .pls-g-cta--telegram{flex:1 1 100%} } /* --- The row under the image: line — "preferred source on Google" — line --- */ /* Container query: the pill stacks as soon as the row runs out of room, whatever the width of the window, so the rules never crush it. */ .pls-cta-row-wrap{container-type:inline-size} .pls-cta-row{ display:flex; align-items:center; flex-wrap:wrap; column-gap:14px; row-gap:8px; margin:24px 0 24px; background:var(--pls-bg); padding:20px 20px; border-radius:var(--pls-radius); } .pls-cta-row__line{ flex:1; height:1px; background:var(--pls-border-soft,#eef1f7); border:0; margin:0; min-width:24px; } @container (max-width:768px){ .pls-cta-row{ flex-direction:column; gap:10px; } .pls-cta-row__line{ display:none; } .pls-cta-row .pls-cta-pill, .pls-cta-pill__label-main{ letter-spacing:-0.1px; } } /* Fallback for browsers without container queries: stack on narrow viewports */ @supports not (container-type:inline-size){ @media(max-width:820px){ .pls-cta-row{ flex-direction:column; gap:10px; } .pls-cta-row__line{ display:none; } .pls-cta-row .pls-cta-pill, .pls-cta-pill__label-main{ letter-spacing:-0.1px; } } } /* On a phone the Google pill wraps onto two lines and gets taller: line one is "Add Pulsar as", line two the bold "preferred source on Google". */ @media(max-width:640px){ .pls-cta-row .pls-cta-pill{min-height:66px;white-space:normal;line-height:1.25} .pls-cta-pill .pls-cta-pill__label{display:flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:normal} .pls-cta-pill--google .pls-cta-pill__label-pre{margin-right:0} } /* --- Base call to action pill --- */ /* The Google pill: the only pill in this row. */ .pls-cta-pill{ position:relative; display:inline-flex; align-items:center; gap:10px; min-height:55px; padding:0 18px 0 16px; border-radius:calc(12px * var(--pls-r)); background:var(--pls-surface); border:1px solid var(--pls-border); color:var(--pls-ink,#0f1d36); font:600 15px/1 -apple-system,"SF Pro Text",system-ui,Roboto,Arial,sans-serif; cursor:pointer; text-decoration:none; white-space:nowrap; flex:0 0 auto; box-shadow:0 6px 16px rgba(15,29,54,.08); transition:border-color .18s ease,background .18s ease,transform .18s ease,box-shadow .25s ease; } .pls-cta-pill:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(15,29,54,.08); } .pls-cta-pill__icon{ flex:0 0 auto; width:20px;height:20px; display:inline-flex; align-items:center; justify-content:center; } .pls-cta-pill__icon svg{ width:20px;height:20px; } .pls-cta-pill--google:hover{ border-color:var(--pls-brand,#1e63d4); background:var(--pls-bg); } .pls-cta-pill--google .pls-cta-pill__label-pre{ font-weight:400; color:var(--pls-ink2,#3b4a66); margin-right:5px; letter-spacing:-0.1px; } /* --- Single layout (article + sidebar) --- */ .pls-single-layout{display:grid;grid-template-columns:1fr var(--pls-sidebar-w);gap:var(--pls-sp-xl);padding:0;align-items:start} .pls-single-layout--full{display:block} .pls-single-layout__main{min-width:0;display:flex;flex-direction:column;gap:24px;padding-bottom:40px} .pls-single-layout__main .pls-article{background:var(--pls-surface);border:1px solid var(--pls-border-soft);border-radius:var(--pls-radius);padding:32px 32px 0 32px} .pls-single-layout__sidebar{display:flex;flex-direction:column;gap:20px;padding-bottom:40px} /* With the sidebar switched off the article takes the whole container: no measure of its own, so it is as wide as the site is. Narrower screens need no rule for it — the container is what carries the width, and it already gives ground as the window does. */ .pls-single-layout--full .pls-single-layout__main{max-width:none} /* -------------------------------------------------------------------------- Arrangement C — cover The featured image at the width of the page, with the headline written on it, and the two columns underneath. The picture keeps its own proportions: it is the article's, and a fixed height would crop it differently on every post. -------------------------------------------------------------------------- */ .pls-cover{position:relative;overflow:hidden;border-radius:var(--pls-radius); margin:0 0 var(--pls-sp-xl)} .pls-cover__media{margin:0;line-height:0} .pls-cover__media img{display:block;width:100%;height:auto} /* Words on the photograph, from the width where a photograph is wide enough to carry them. On a phone the picture is a few centimetres across: a title over it takes half the screen and leaves the reader a strip of image, so below this width the block comes out from under the picture and the page reads like the standard arrangement. Nothing else changes — it is the same block, drawn by the same partial under the same switches. The veil is what makes the words legible, and it has to be there whatever the photograph is: a light sky and a dark doorway are both possible under the same title. It fades to nothing before the middle so the picture is still a picture. */ @media(min-width:641px){ .pls-cover__inner{position:absolute;left:0;right:0;bottom:0;padding:32px; background:linear-gradient(to top,rgba(8,12,20,.88),rgba(8,12,20,.55) 42%,rgba(8,12,20,0))} /* The share button sits inside the corner of the picture, clear of the words at the bottom of it. Written with the cover in front of it because the rule it overrides places the button 18px above its box, which is right over an image that has room above and wrong over one that is clipped to its own corners. */ .pls-cover .pls-cover__actions{position:absolute;top:16px;right:16px;z-index:2} /* The headline block is the one the theme draws everywhere else, under the same switches; on the cover it is written in white. */ .pls-cover .pls-single-meta{margin:0} .pls-cover .pls-single-meta__title, .pls-cover .pls-single-meta__row a{color:#fff} .pls-cover .pls-single-meta__subtitle{color:rgba(255,255,255,.88)} .pls-cover .pls-single-meta__row{color:rgba(255,255,255,.82);border:none} .pls-cover .pls-meta__sep{color:rgba(255,255,255,.55)} /* The category keeps its word but not its ground: over a photograph the tinted and the plain states have no colour to stand against, so on a cover the badge is always the filled one. */ .pls-cover .pls-badge{background:rgba(255,255,255,.16);color:#fff; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} /* The pill loses its ground over a photograph, but keeps the room inside it: that room is what the pointer lands on, and without it the highlight closes on the words. */ .pls-cover .pls-single-meta__comments{background:none;color:#fff} } /* On a phone: the picture edge to edge, as the featured image is in every other arrangement, and the block underneath in the colours it has everywhere else. Nothing is written to put those colours back — the rules that painted the block white are inside the query above and simply do not apply here, so it keeps whatever the site sets for it, the tinted category included. */ @media(max-width:640px){ .pls-cover{border-radius:0;overflow:visible;margin-bottom:0; margin-left:calc(-1 * var(--pls-sp-md));margin-right:calc(-1 * var(--pls-sp-md))} .pls-cover__inner{padding:20px var(--pls-sp-md) 0} .pls-cover .pls-cover__actions{top:8px;right:calc(var(--pls-sp-md) + 8px)} } /* -------------------------------------------------------------------------- Arrangement E — centred The headline in the middle of the page, the picture at the width of the site, and the text narrower than the picture. There is no sidebar to arrange: the article is the middle of the page, and the template does not draw one. -------------------------------------------------------------------------- */ /* Where the share column comes to rest while the reader scrolls. It has to clear the header, which sticks to the top of the window, with enough room left that the two do not read as one bar: measured from the top of the window, not from the header, because the header is not always there. */ :root{--pls-read-w:760px;--pls-rail-top:124px} /* The block that opens the arrangement, centred or ranged left. Ranged left is the absence of these rules rather than a set of their opposites: the block is written left to right to begin with, and only the centred choice has anything to say. */ .pls-headline--center{text-align:center} .pls-head-centred .pls-single-meta__row{justify-content:center} /* Centred, and each button as wide as what it holds. The bar shares the width of a column where it stands under a headline the width of that column; here it stands under a centred block, and dividing the measure between six buttons would cut the names short for no reason — there is room. */ .pls-single-meta--center .pls-shareset--bar{margin:16px 0 0;flex-wrap:wrap} .pls-head-centred .pls-single-meta--center .pls-shareset--bar{justify-content:center} .pls-single-meta--center .pls-shareset--bar .pls-shareset__btn{flex:0 0 auto;width:auto} /* One measure for everything the reader reads: the text and every block that follows it begin and end on the same two lines. The measure belongs to two boxes, not to the blocks. Giving it to each block in turn means a rule for every one of them, and any of those rules can be lost to another written elsewhere; a block inside a box that is 760px wide is 760px wide because there is nowhere else for it to go. The blocks themselves carry no width at all and stay as they are in every other arrangement. */ .pls-single-e .pls-single-content__measure, .pls-single-e .pls-measure{max-width:var(--pls-read-w);margin-left:auto;margin-right:auto} /* The share column stands at the left edge of the picture, and begins where the picture ends: it is measured from the body of the article, which starts there. The width it needs is the width of the site, not the 1500px the other arrangements ask for — there the column stands in the margin outside the text, here in the room the narrower text leaves inside the page. */ @media(min-width:1200px){ .pls-single-e .pls-single-content__body{position:relative} .pls-single-e .pls-sharerail{display:block;position:absolute;left:0;top:0;bottom:0;width:52px} .pls-single-e .pls-sharerail .pls-shareset--rail{position:sticky;top:var(--pls-rail-top)} } /* -------------------------------------------------------------------------- Arrangement D — wide headline The block above the text is drawn across the page rather than inside the article's column, and the row that carries the author carries the share buttons at its far end. The rest of the page is the plain treatment below. -------------------------------------------------------------------------- */ /* One gap under the headline, not three. Drawn inside the article's column the block sits above the picture with the article's own spacing between them; drawn across the page it is followed by the column, whose picture brings a margin of its own — so the block gives up its own bottom margin, and the picture gives up its top one, and what is left is the figure written here. */ .pls-headline{margin:0 0 28px} .pls-headline .pls-single-meta{margin-bottom:0} .pls-single-d .pls-single-content__hero-wrap, .pls-single-e .pls-single-content__hero-wrap{margin-top:0} /* The author line becomes a line with two ends: what describes the article on the left, what does something with it on the right. It wraps rather than squeezes — on a narrow screen the buttons take a line of their own. */ .pls-single-meta--wide .pls-single-meta__row{flex-wrap:wrap;row-gap:10px} .pls-single-meta--wide .pls-shareset--bar{margin:0 0 0 auto;flex:0 0 auto;gap:2px;width:auto} /* Marks alone: no ground, no border, the colour of the destination on the mark itself. The buttons stop sharing the width of a column, so they are square and as wide as what they hold. */ .pls-single-meta--wide .pls-shareset--bar .pls-shareset__btn{flex:0 0 auto;width:30px;height:30px; padding:0;background:none;border-color:transparent;color:var(--pls-share);box-shadow:none} .pls-single-meta--wide .pls-shareset--bar .pls-shareset__name{position:absolute;width:1px;height:1px; clip:rect(0 0 0 0);overflow:hidden} .pls-single-meta--wide .pls-shareset--bar .pls-shareset__btn:hover{transform:none;box-shadow:none; background:var(--pls-bg)} /* On a phone the line has no far end to put them at: it wraps, and a row of marks pushed to the left under the author reads as something left over. They move above that line instead — first in the flex order, the width of the column, centred — and carry a rule under them, so what was one line with two ends becomes two lines each with its own. */ @media(max-width:640px){ .pls-single-meta--wide .pls-shareset--bar{order:-1;width:100%;margin:0; justify-content:center;padding-bottom:12px; border-bottom:1px solid var(--pls-border-soft)} } /* -------------------------------------------------------------------------- The plain treatment — arrangements B and D The article is not a card standing on a coloured ground: it is the page. The ground, the borders and the corners go, and what separated the article from the sidebar becomes a single rule down the gutter. The class is on the body because the ground being painted belongs to the body. The rules ask for the class alone and not for a body carrying it, so the same arrangement can be drawn inside the panel's preview, which has a wrapper of its own instead. Nothing is added or taken away here — every piece still answers to its own switch — only where it sits and what it stands on. -------------------------------------------------------------------------- */ .pls-single-flat{background:var(--pls-surface)} .pls-single-flat .pls-single-layout__main .pls-article, .pls-single-flat .pls-comments-section{background:none;border:none;border-radius:0;padding:0} .pls-single-flat .pls-widget{background:none;border:none;border-radius:0;box-shadow:none;padding-left:0;padding-right:0} /* The trail stands closer to the headline than it does over a card: there it was separated from the article by the edge of the card as well, and without that edge the same gap reads as a hole. */ .pls-single-flat .pls-breadcrumbs{padding-bottom:8px} /* Each of these sections opens right under the rule that closes the one above it. On a card that rule is the edge of a box and the box's own padding keeps the heading clear of it; with the boxes gone the heading sits on the line. */ .pls-single-flat .pls-related{padding-top:28px} .pls-single-flat .pls-comments-section{padding-top:28px} /* On a phone the article and the comments are pulled out by the width of the page's own padding, so their white ground runs to the edges of the screen while the words inside stay where the page puts them. With the boxes gone there is no ground to carry out there, and the pull would take the words with it: the article keeps the margins of the page like everything else on it. */ @media(max-width:640px){ .pls-single-flat .pls-single-layout__main .pls-article, .pls-single-flat .pls-comments-section{margin-left:0;margin-right:0} } /* What used to be a white thing on the colour of the site becomes a thing in that colour on white: the ground and the boxes trade places, so a card is still told apart from the page it stands on. It reads the same way in the dark appearance, where the two colours are two depths of dark. The share bar is deliberately not here: its outline buttons are veiled with the colour they stand on, and changing one without the other would leave the veil visible along their right edge. */ .pls-single-flat .pls-card, .pls-single-flat .pls-post-nav__item, .pls-single-flat .pls-carousel-arrow, .pls-single-flat .is-style-pulsar-card, .pls-single-flat .pls-comment-form textarea, .pls-single-flat .pls-widget-user-menu__card-wrap, .pls-single-flat .pls-widget-user-menu__nav, .pls-single-flat .pls-wsoc__btn{background:var(--pls-bg)} /* The rule stands in the gutter, which exists only where the two columns do: below that width they are stacked and a line down the side would divide the article from nothing. */ @media(min-width:1025px){ .pls-single-flat .pls-single-layout__sidebar{border-left:1px solid var(--pls-border-soft); padding-left:var(--pls-sp-xl)} } /* --- Breadcrumbs --- */ /* The trail sits between the header and the article, and wants the same air on both sides. The page already opens with 24px of its own, so that is trimmed to 16 and matched underneath, instead of adding a second gap on top. */ .pls-main:has(> .pls-container > .pls-breadcrumbs){padding-top:16px} .pls-breadcrumbs{padding:0 0 16px;font-size:13px;color:var(--pls-mute)} .pls-breadcrumbs__list{display:flex;flex-wrap:wrap;align-items:center;gap:4px} .pls-breadcrumbs__item{display:flex;align-items:center;gap:4px} .pls-breadcrumbs__item a{color:var(--pls-ink2);font-weight:500} .pls-breadcrumbs__item a:hover{color:var(--pls-brand)} .pls-breadcrumbs__item [aria-current]{color:var(--pls-mute);font-weight:400} .pls-breadcrumbs__sep{color:var(--pls-border);font-size:12px} /* --- Post meta header --- */ .pls-single-meta{margin-bottom:24px} .pls-single-meta .pls-badge{margin-bottom:12px} .pls-single-meta__title{font-size:var(--pls-single-title-size);font-weight:800;line-height:1.3;letter-spacing:var(--pls-single-title-ls);color:var(--pls-ink);margin:0 0 12px} .pls-single-meta__subtitle{font-size:var(--pls-single-subtitle-size);color:var(--pls-ink2);line-height:1.5;margin:0 0 16px} .pls-single-meta__divider{border:none;border-top:1px solid var(--pls-border-soft);margin:0 0 16px} .pls-single-meta__row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:13px;color:var(--pls-mute)} .pls-single-meta__author{display:flex;align-items:center;gap:8px;color:var(--pls-ink2);font-weight:500} .pls-single-meta__author img{border-radius:50%} .pls-single-meta__updated{font-size:12px;color:var(--pls-mute)} .pls-single-meta__reading{display:flex;align-items:center;gap:4px} /* cache-bust */ /* The sponsor, in place of the author. It reads as one thing — a mark of disclosure, the words, the logo — so it is one row that never breaks between them, and the logo is measured by height: a sponsor's mark can be a square or a long word, and only the height is the same for both. */ .pls-single-meta__sponsor{display:inline-flex;align-items:center;gap:6px;white-space:nowrap} .pls-single-meta__sponsor-lbl{font-weight:700;color:var(--pls-ink)} .pls-single-meta__sponsor svg{flex:0 0 auto;color:var(--pls-mute)} .pls-single-meta__sponsor-logo{display:block;height:20px;width:auto;max-width:160px; object-fit:contain} .pls-single-meta__sponsor a{display:inline-flex;align-items:center;transition:opacity .15s} .pls-single-meta__sponsor a:hover{opacity:.75} .pls-single-meta__comments{display:inline-flex;align-items:center;gap:4px;color:var(--pls-comment-ink,var(--pls-brand));padding:2px 9px;border-radius:calc(5px * var(--pls-r));background:var(--pls-comment-bg,var(--pls-brand-soft));transition:color .15s,background .15s,transform .15s} .pls-single-meta__comments:hover{color:#fff;background:var(--pls-brand);transform:translateY(-1px)} .pls-single-content__hero-wrap{position:relative;margin:35px 0 8px} /* Opening the page, the picture has the trail above it instead of the block that carries the title: 35px was the room that block needed, and against a single line of small text it reads as a gap. */ .pls-single-content__hero-wrap--top{margin:16px 0 24px} /* With the picture moved to the top, what follows the block that carries the title is the first row of the article rather than the picture. The room above that row was the room a picture needs; against the rule under the author line it is a gap, so the article says the picture has gone and the row closes up. */ .pls-article--img-top .pls-cta-row{margin-top:8px} .pls-article--img-top .pls-single-content--no-cta .pls-entry-content{margin-top:8px} .pls-single-actions{position:absolute;top:-18px;right:6px;z-index:2;display:flex;align-items:center;gap:8px} .pls-share-native{display:none;align-items:center;gap:6px;padding:8px 24px;background:var(--pls-surface);color:var(--pls-ink);border:none;border-radius:calc(13px * var(--pls-r));font-size:15px;font-weight:600;cursor:pointer;font-family:var(--pls-font);box-shadow:0 2px 8px rgba(0,0,0,.15);text-transform:none;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease} .pls-share-native svg{width:18px;height:18px} .pls-share-native:hover,.pls-share-native:active{background:var(--pls-brand);color:#fff} .pls-share-native:focus-visible{outline:2px solid var(--pls-brand);outline-offset:2px} /* --- Featured image --- */ /* The featured image has a radius of its own, which falls back to the radius of the theme: left alone it follows the rest of the design, and set it stops at this one image instead of rounding every card on the site. */ .pls-single-content__hero{position:relative;margin:0;border-radius:var(--pls-single-hero-radius,var(--pls-radius));overflow:hidden} .pls-single-content__hero .pls-img{width:100%;aspect-ratio:16/9;object-fit:cover} .pls-single-content__caption{font-size:12px;color:var(--pls-mute);padding:10px 0 0;text-align:center;font-style:italic} /* --- Entry content typography lives in entry-content.css --- What is left here is the single-post rule for images with the shadow option. */ /* Soft, but visible: at 7px of blur and 13% black it was there in the code and not on the screen, which is the same as not being there. */ .pls-single-img-shadow .pls-entry-content img{box-shadow:0 6px 18px rgba(15,29,54,.16)} /* The shadow under the featured image. On the wrapper, not the image: the image is clipped by the rounded corners of its frame, and a shadow inside a clip is a shadow nobody sees. */ .pls-single-hero-shadow .pls-single-content__hero-wrap{box-shadow:0 10px 30px rgba(15,29,54,.16);border-radius:var(--pls-single-hero-radius,var(--pls-radius))} /* --- Page links (multi-page) --- */ .pls-page-links{display:flex;align-items:center;gap:8px;margin:2em 0;font-size:14px;font-weight:500} .pls-page-links__label{color:var(--pls-mute)} .pls-page-links__item{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:calc(8px * var(--pls-r));background:var(--pls-bg);color:var(--pls-ink2)} .pls-page-links__item:hover{background:var(--pls-brand-soft);color:var(--pls-brand)} /* --- Tags --- */ .pls-single-tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:24px 0 0 0;border-top:1px solid var(--pls-border-soft);margin-top:28px} .pls-single-tags__item{padding:5px 12px;border-radius:calc(6px * var(--pls-r));background:var(--pls-bg);font-size:13px;font-weight:500;color:var(--pls-ink2);transition:background-color .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s;text-transform:capitalize} .pls-single-tags__item:hover{background:var(--pls-brand-soft);color:var(--pls-brand)} /* --- Share buttons --- */ .pls-share{display:flex;align-items:center;gap:16px;padding:20px 0;border-top:1px solid var(--pls-border-soft);border-bottom:1px solid var(--pls-border-soft);margin:28px 0 0 0} .pls-share__label{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--pls-ink);white-space:nowrap} .pls-share__buttons{display:flex;flex-wrap:wrap;gap:8px} .pls-share__btn{padding:7px 14px;border-radius:calc(8px * var(--pls-r));font-size:13px;font-weight:600;transition:background-color .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s;display:inline-flex;align-items:center;gap:4px} .pls-share__btn--x{background:#0f1419;color:#fff} .pls-share__btn--fb{background:#1877f2;color:#fff} .pls-share__btn--wa{background:#25d366;color:#fff} .pls-share__btn--tg{background:#0088cc;color:#fff} .pls-share__btn--li{background:#0a66c2;color:#fff} .pls-share__btn--pin{background:#e60023;color:#fff} .pls-share__btn--email{background:var(--pls-brand-soft);color:var(--pls-ink2)} .pls-share__btn--copy{background:var(--pls-bg);color:var(--pls-ink2);cursor:pointer} .pls-share__btn:hover{opacity:.85} /* --- Author box --- */ .pls-author-box{display:flex;gap:16px;padding:24px;background:var(--pls-bg);border-radius:var(--pls-radius);margin:28px 0} .pls-author-box__avatar{flex-shrink:0;width:56px;height:56px;display:block} .pls-author-box__avatar img{width:56px;height:56px;border-radius:50%;object-fit:cover;aspect-ratio:1/1;display:block} .pls-author-box__label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--pls-mute);margin-bottom:2px;display:block} .pls-author-box__name{font-size:17px;font-weight:600;color:var(--pls-ink);display:block;margin-bottom:4px} .pls-author-box__name:hover{color:var(--pls-brand)} .pls-author-box__bio{font-size:14px;color:var(--pls-ink2);line-height:1.5;margin:0} /* --- Post navigation (prev/next) --- */ .pls-post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:32px 0;border-top:1px solid var(--pls-border-soft);border-bottom:1px solid var(--pls-border-soft)} .pls-post-nav__item{padding:16px 20px;background:var(--pls-surface);border:1px solid var(--pls-border-soft);border-radius:var(--pls-radius);display:flex;flex-direction:column;gap:6px;transition:border-color .15s} .pls-post-nav__item:hover{border-color:var(--pls-brand)} .pls-post-nav__item--next{text-align:right} .pls-post-nav__item--empty{visibility:hidden} .pls-post-nav__dir{font-size:12px;font-weight:600;color:var(--pls-mute);text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:4px} .pls-post-nav__item--next .pls-post-nav__dir{justify-content:flex-end} .pls-post-nav__arrow--prev{transform:rotate(180deg)} .pls-post-nav__title{font-size:15px;font-weight:600;color:var(--pls-ink);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} /* --- Comments compat (mu-plugin) --- */ .isc-wrap .isc-user-name-link{display:inline-flex;align-items:center;gap:3px} .isc-wrap .isc-user-name-link .isc-user-name{order:0} .isc-wrap .isc-user-name-link svg{order:1} /* --- Carousel (for related posts) --- */ .pls-carousel{overflow:hidden;position:relative} .pls-carousel--static .pls-carousel__track{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .pls-carousel__track{display:flex;gap:16px;transition:transform .4s ease;will-change:transform} .pls-carousel__slide{flex:0 0 calc((100% - (var(--pls-carousel-visible) - 1) * 16px) / var(--pls-carousel-visible));min-width:0;display:flex} .pls-carousel__slide>.pls-card{width:100%;display:flex;flex-direction:column} .pls-carousel__slide>.pls-card .pls-card__body{flex:1;display:flex;flex-direction:column} .pls-carousel__slide>.pls-card .pls-meta{margin-top:auto} .pls-carousel-nav{display:flex;gap:6px;margin-left:auto} .pls-carousel-arrow{width:32px;height:32px;border-radius:calc(8px * var(--pls-r));background:var(--pls-surface);border:1px solid var(--pls-border-soft);display:flex;align-items:center;justify-content:center;color:var(--pls-ink2);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s,transform .15s,box-shadow .15s} .pls-carousel-arrow:hover{border-color:var(--pls-brand);color:var(--pls-brand);background:var(--pls-brand-soft)} .pls-carousel-dots{display:flex;justify-content:center;gap:6px;padding:16px 0 0} .pls-carousel-dot{width:8px;height:8px;border-radius:50%;background:var(--pls-border);border:none;cursor:pointer;padding:0;transition:background-color .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s} .pls-carousel-dot--active{background:var(--pls-brand);width:20px;border-radius:calc(4px * var(--pls-r))} .pls-carousel-dot:hover:not(.pls-carousel-dot--active){background:var(--pls-mute)} /* --- Related posts --- */ .pls-related{padding:0;border-bottom:1px solid var(--pls-border-soft);padding-bottom:32px} .pls-related .pls-section__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px} .pls-related__title{font-size:20px;font-weight:700;letter-spacing:-.3px;margin:0} .pls-related .pls-card__title{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:14px} .pls-related .pls-meta__avatar{display:none} .pls-related .pls-card{overflow:hidden} .pls-related .pls-meta{flex-wrap:nowrap;overflow:hidden;justify-content:space-between} .pls-related .pls-card__comments{margin-left:auto} .pls-related .pls-meta__sep{display:none} .pls-related .pls-badge{padding:0} /* --- Comments layout (content + sidebar) --- */ .pls-comments-section{background:var(--pls-surface);border:1px solid var(--pls-border-soft);border-radius:var(--pls-radius);padding:32px} /* ========================================================================== Responsive ========================================================================== */ @media(max-width:1024px){ .pls-single-layout{grid-template-columns:1fr} .pls-single-layout__main .pls-article{padding:32px 32px 0 32px} .pls-entry-content{max-width:none} .pls-post-nav{gap:12px} } @media(max-width:640px){ .pls-single-layout{padding:0} .pls-breadcrumbs{display:none} /* Scoped to single posts only: this file is loaded on pages as well, and without the scope a page on a phone would lose the padding-top .pls-main gets in layout.css. */ .single .pls-main{padding-top:0!important} .pls-single-layout__main .pls-article{padding:32px 16px 0 16px;margin:0 calc(-1 * var(--pls-sp-md));background:var(--pls-surface);border:none;border-radius:0} /* The plain arrangements draw no card, so the padding that opened the article is taken away with it. On a phone the page's own top padding is off as well, and the page then starts against the header: each of them is given back the opening the card gives the standard arrangement. Which element takes it depends on what comes first. The plain arrangement opens with the article itself; the wide and editorial ones print the block that opens the article above the columns, outside .pls-article, so there the padding goes on that block — putting it on both would space the page twice. */ .pls-single-b .pls-single-layout__main .pls-article{padding-top:32px} .pls-single-d .pls-headline, .pls-single-e .pls-headline{padding-top:32px} /* The narrow screen size is the variable, redefined in base.css. */ .pls-single-meta__row{font-size:12px;gap:6px} .pls-single-meta__reading,.pls-single-meta__reading+.pls-meta__sep,.pls-meta__sep:has(+.pls-single-meta__reading){display:none} /* Mobile overrides for the entry content live in entry-content.css */ .pls-share{flex-direction:column;align-items:flex-start;gap:12px} .pls-share__buttons{width:100%;flex-wrap:wrap} .pls-share__btn{flex:1;justify-content:center;min-width:calc(50% - 4px);padding:7px 10px;font-size:12px} .pls-author-box{flex-direction:column;align-items:center;text-align:center;padding:20px} .pls-author-box__bio{text-align:left} .pls-single-tags{gap:6px} .pls-single-tags__item{padding:4px 10px;font-size:12px} .pls-post-nav{grid-template-columns:1fr;border-bottom:1px solid var(--pls-border-soft);padding-bottom:32px} .pls-post-nav__item{padding:14px 16px} .pls-post-nav__item--next{text-align:left} .pls-post-nav__item--next .pls-post-nav__dir{justify-content:flex-start} .pls-post-nav__item--empty{display:none} .pls-grid--4{grid-template-columns:repeat(2,1fr)} .pls-related{padding:0 0 24px} .pls-related .pls-card__title{line-height:1.3} .pls-comments-section{margin:0 calc(-1 * var(--pls-sp-md));padding:16px var(--pls-sp-md);border-radius:0;background:var(--pls-surface)} .pls-breadcrumbs{font-size:12px} .pls-page-links{flex-wrap:wrap} } /* ========================================================================== Comments ========================================================================== */ .pls-comments__title{font-family:var(--pls-font);font-size:20px;font-weight:800;color:var(--pls-ink);margin:0 0 20px} .pls-comments__list{list-style:none;margin:0 0 28px;padding:0} .pls-comments__list .children{list-style:none;margin:16px 0 0 28px;padding:0;border-left:2px solid var(--pls-border-soft);padding-left:18px} .pls-comments__list li.comment{margin:0 0 20px} .pls-comments__list .comment-body{position:relative;padding:0 0 18px;border-bottom:1px solid var(--pls-border-soft)} .pls-comments__list .comment-meta{display:flex;align-items:center;gap:10px;margin:0 0 8px} .pls-comments__list .comment-author{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--pls-ink)} .pls-comments__list .comment-author img{border-radius:50%;width:48px;height:48px;flex-shrink:0} .pls-comments__list .comment-author .says{display:none} .pls-comments__list .comment-metadata{font-size:13px;color:var(--pls-ink-soft)} .pls-comments__list .comment-metadata a{color:inherit;text-decoration:none} .pls-comments__list .comment-metadata a:hover{color:var(--pls-brand)} .pls-comments__list .comment-content{font-size:15px;line-height:1.65;color:var(--pls-ink)} .pls-comments__list .comment-content p{margin:0 0 10px} .pls-comments__list .reply{margin-top:8px} .pls-comments__list .comment-reply-link{font-size:13px;font-weight:700;color:var(--pls-brand);text-decoration:none} .pls-comments__list .comment-reply-link:hover{text-decoration:underline} .pls-comments__list .bypostauthor > .comment-body{border-left:3px solid var(--pls-brand);padding-left:14px} .pls-comments__list .comment-awaiting-moderation{display:block;font-size:13px;font-style:italic;color:var(--pls-ink-soft)} .pls-comments__closed{font-size:14px;color:var(--pls-ink-soft)} .pls-comment-form{margin:0} .pls-comment-form .comment-reply-title{font-family:var(--pls-font);font-size:18px;font-weight:800;color:var(--pls-ink);margin:0 0 14px} .pls-comment-form label{display:block;font-size:13px;font-weight:700;color:var(--pls-ink);margin:0 0 6px} .pls-comment-form input[type=text], .pls-comment-form input[type=email], .pls-comment-form input[type=url], .pls-comment-form textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15px;color:var(--pls-ink);background:var(--pls-surface);border:1px solid var(--pls-border);border-radius:calc(10px * var(--pls-r));padding:10px 12px} .pls-comment-form input:focus, .pls-comment-form textarea:focus{outline:2px solid var(--pls-brand);outline-offset:1px;border-color:transparent} .pls-comment-form p{margin:0 0 14px} /* The two lines WordPress writes above the field: "logged in as …" and the note about required fields. Left alone they run into one another as a single grey sentence, with the links — edit profile, log out — the same colour as the text around them, so nothing looks clickable. */ .pls-comment-form .logged-in-as, .pls-comment-form .comment-notes{font-size:14px;color:var(--pls-mute);line-height:1.55;margin:0 0 16px} .pls-comment-form .logged-in-as a, .pls-comment-form .comment-notes a{color:var(--pls-brand);text-decoration:underline;text-underline-offset:2px} .pls-comment-form .logged-in-as a:hover, .pls-comment-form .comment-notes a:hover{color:var(--pls-brand-dark)} .pls-comment-form .required-field-message{display:block;margin-top:4px;font-size:13px} .pls-comment-form .required{color:var(--pls-accent)} .pls-comment-form .comment-form-cookies-consent{display:flex;align-items:center;gap:8px} .pls-comment-form .comment-form-cookies-consent input{width:auto} .pls-comment-form .comment-form-cookies-consent label{margin:0;font-weight:400} .pls-comment-form .form-submit{margin:0} .pls-comment-form .submit{display:inline-flex;align-items:center;gap:8px;font:inherit;font-weight:700;color:#fff;background:var(--pls-brand);border:0;border-radius:calc(10px * var(--pls-r));padding:11px 20px;cursor:pointer} .pls-comment-form .submit:hover{filter:brightness(1.06)} @media(max-width:640px){ .pls-comments__list .children{margin-left:0;padding-left:12px} .pls-comments__list .comment-author img{width:36px;height:36px} } /* No row under the image: the text would otherwise start right against the picture. The gap the row used to provide is given back here. */ .pls-single-content--no-cta .pls-entry-content{margin-top:25px} /* ── Google's confirmation toast ────────────────────────────────────── The toast is a cross-origin