/* ========================================================================== Pulsar Theme — Header Topbar, main nav (sticky), breaking bar, mobile nav. ========================================================================== */ /* --- Topbar --- */ .pls-topbar{background:var(--pls-band);color:#aab6cb;font-size:12px} .pls-topbar__inner{max-width:var(--pls-max-w);margin:0 auto;padding:8px var(--pls-sp-xl);display:flex;justify-content:space-between;align-items:center} /* The two ends. The strip is a row with one at each edge, and an end that has nothing in it keeps its place so the other stays where it was rather than sliding across to the middle. */ /* The pieces of an end are separate elements, so the space between them is the container's business: written into the text it would also appear when a piece stands alone, and a leading space in a bar is a bar that looks misaligned. With one piece there is no gap to draw, which is exactly the wanted result. */ .pls-topbar__end{display:flex;align-items:center;min-width:0;gap:14px} /* Two pieces at one end are told apart by a dot with air on both sides. It hangs from the piece that follows another, so it is never drawn before the first one, and an end carrying a single piece has no dot at all — which is the usual case, and the one the panel recommends. */ .pls-topbar__piece{display:inline-flex;align-items:center;min-width:0;gap:14px} .pls-topbar__piece + .pls-topbar__piece::before{content:"·";opacity:.55;line-height:1} .pls-topbar__end--right{justify-content:flex-end} /* The buttons: one mark each, in the colour of the bar. Their own colours would be the loudest thing on the page above the masthead, on a strip whose whole point is to be read after everything else. */ .pls-topbar__social{display:flex;align-items:center;gap:14px} .pls-topbar__soc{display:inline-flex;color:#aab6cb;transition:color .15s} .pls-topbar__soc:hover,.pls-topbar__soc:focus-visible{color:#fff} .pls-topbar__soc svg{display:block} .pls-topbar__links{display:flex;gap:16px} .pls-topbar__links a{color:#aab6cb;transition:color .15s} .pls-topbar__links a:hover{color:#fff} .pls-topbar__links .menu{display:flex;gap:16px;list-style:none;margin:0;padding:0} .pls-topbar__links .menu li a{color:#aab6cb;transition:color .15s} .pls-topbar__links .menu li a:hover{color:#fff} /* --- Main Header (sticky) --- */ .pls-header{background:var(--pls-surface);border-bottom:1px solid var(--pls-border);position:sticky;top:0;z-index:100} .admin-bar .pls-header{top:32px} @media(max-width:782px){.admin-bar .pls-header{top:0}} /* Between 783 and 1024px the mobile category bar appears. With sticky top:32px (the admin bar offset) on top of the margin WordPress puts on , the header is pushed 32px too far down and runs into the admin bar. The offset is zeroed here, as it already is below 782px. */ @media(min-width:783px) and (max-width:1024px){.admin-bar .pls-header{top:0}} .pls-header__inner{max-width:var(--pls-max-w);margin:0 auto;padding:14px var(--pls-sp-xl);display:flex;align-items:center;gap:18px;position:relative} /* Logo */ .pls-logo{display:flex;align-items:center;gap:10px;flex-shrink:0} .pls-logo__full{height:34px;width:auto;display:block} /* Two logo files, one per appearance. The dark one is hidden until the document says it is dark; the browser fetches only the one it shows. */ .pls-logo__dark{display:none} .pls-logo__text{font-size:22px;font-weight:700;letter-spacing:-.6px;color:var(--pls-ink)} /* Nav */ .pls-nav{display:flex;gap:2px;flex:1;margin-left:8px;align-items:center} .pls-nav__item{padding:8px 12px;font-size:14px;font-weight:500;color:var(--pls-ink2);border-radius:calc(8px * var(--pls-r));transition:background .15s,color .15s;white-space:nowrap} .pls-nav__item:hover,.pls-nav__item--active{background:var(--pls-brand-soft);color:var(--pls-brand)} /* WP nav menu inside .pls-nav */ .pls-nav .menu{display:flex;gap:2px;list-style:none;margin:0;padding:0} .pls-nav .menu > li{position:relative} .pls-nav .menu > li > a{padding:8px 12px;font-size:14px;font-weight:500;color:var(--pls-ink2);border-radius:calc(8px * var(--pls-r));transition:background .15s,color .15s;white-space:nowrap;display:flex;align-items:center;gap:4px} .pls-nav .menu > li > a:hover,.pls-nav .menu > li.current-menu-item > a,.pls-nav .menu > li.current-menu-parent > a,.pls-nav .menu > li.current-menu-ancestor > a{background:var(--pls-brand-soft);color:var(--pls-brand)} .pls-nav__dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pls-brand,#1e63d4);flex-shrink:0;margin-left:0;margin-right:-5px;align-self:flex-start;margin-top:3px} .pls-nav .menu > li.current-menu-item > a .pls-nav__dot, .pls-nav .menu > li.current-menu-parent > a .pls-nav__dot, .pls-nav .menu > li.current-menu-ancestor > a .pls-nav__dot{display:none} /* --- Dropdown submenu (standard) --- */ .pls-nav .sub-menu{position:absolute;top:100%;left:0;min-width:240px;background:var(--pls-surface);border:1px solid var(--pls-border);border-radius:calc(12px * var(--pls-r));box-shadow:0 12px 32px rgba(15,29,54,.12);padding:6px;list-style:none;margin:0;z-index:150;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility 0s linear .15s} .pls-nav .menu > li:hover > .sub-menu, .pls-nav .menu > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .15s,transform .15s,visibility 0s} .pls-nav .sub-menu li{position:relative} .pls-nav .sub-menu li + li{border-top:1px solid var(--pls-border-soft)} .pls-nav .sub-menu li a{display:block;padding:11px 14px;font-size:14px;font-weight:500;color:var(--pls-ink);border-radius:calc(8px * var(--pls-r));line-height:1.3;white-space:nowrap} .pls-nav .sub-menu li a:hover,.pls-nav .sub-menu li.current-menu-item a{background:var(--pls-bg);color:var(--pls-brand)} /* Bridge so the gap between top-level and dropdown stays hoverable */ .pls-nav .menu > li.menu-item-has-children > a::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px} /* --- Mega menu --- */ .pls-nav .menu > li.menu-item-mega{position:static} .pls-nav .pls-mega{position:absolute;top:calc(100% + 4px);left:0;right:0;width:auto;box-sizing:border-box;display:grid;grid-template-columns:220px minmax(0,1fr);gap:20px;background:var(--pls-surface);border:1px solid var(--pls-border);border-radius:calc(12px * var(--pls-r));box-shadow:0 12px 32px rgba(15,29,54,.12);padding:18px 20px;z-index:150;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s,transform .15s,visibility 0s linear .15s} .pls-nav .menu > li.menu-item-mega:hover > .pls-mega, .pls-nav .menu > li.menu-item-mega:focus-within > .pls-mega{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .15s,transform .15s,visibility 0s} .pls-mega__cats{list-style:none;margin:0;padding:0 16px 0 0;border-right:1px solid var(--pls-border-soft);align-self:start} .pls-mega__cats li + li{border-top:1px solid var(--pls-border-soft)} .pls-mega__cats li a{display:block;padding:12px 14px;font-size:14px;font-weight:500;color:var(--pls-ink);border-radius:calc(8px * var(--pls-r));line-height:1.3;cursor:pointer} .pls-mega__cats li:hover > a,.pls-mega__cats li.is-active > a,.pls-mega__cats li.current-menu-item a{background:var(--pls-bg);color:var(--pls-brand)} /* Hide divider above & below the active/hovered item so the rounded bg looks seamless */ .pls-mega__cats li:hover,.pls-mega__cats li.is-active,.pls-mega__cats li.current-menu-item, .pls-mega__cats li:hover + li,.pls-mega__cats li.is-active + li,.pls-mega__cats li.current-menu-item + li{border-top-color:transparent} .pls-mega__cats li:last-child > a,.pls-mega__cats li.vedi-tutto > a{color:var(--pls-brand);font-weight:600} .pls-mega__cats li:last-child:hover > a,.pls-mega__cats li.vedi-tutto:hover > a{background:var(--pls-brand-soft);color:var(--pls-brand-dark)} .pls-mega__panels{min-width:0;white-space:normal} .pls-mega__panel{min-width:0} .pls-mega__panel[hidden]{display:none} .pls-mega__empty{font-size:13px;color:var(--pls-mute);padding:8px;margin:0;grid-column:1/-1} /* Card overrides scoped to mega menu only */ .pls-mega .pls-badge, .pls-mega .pls-meta__avatar, .pls-mega .pls-meta__author{display:none} .pls-mega .pls-card__body{padding:6px 15px 18px} .pls-mega .pls-card__title, .pls-mega .pls-card__title a{white-space:normal;font-size:15px;font-weight:600;line-height:1.3} .pls-mega .pls-card__title{word-break:break-word;overflow-wrap:anywhere} /* Search bar */ .pls-search-trigger{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--pls-bg);border-radius:calc(10px * var(--pls-r));border:1px solid var(--pls-border-soft);color:var(--pls-mute);font-size:13px;min-width:200px;cursor:pointer;transition:border-color .15s} .pls-search-trigger:hover{border-color:var(--pls-border)} /* Icon only: a square button matching the appearance switch, for the arrangements that do not carry the search field. */ .pls-search-trigger--icon{min-width:0;width:36px;height:36px;padding:0;justify-content:center;flex:0 0 auto;background:var(--pls-surface);border-color:var(--pls-border);color:var(--pls-ink2)} .pls-search-trigger--icon:hover{background:var(--pls-bg)} .pls-search-trigger__text{flex:1} .pls-search-trigger__kbd{font-size:11px;padding:1px 5px;background:var(--pls-surface);border:1px solid var(--pls-border);border-radius:calc(4px * var(--pls-r));color:var(--pls-mute);line-height:1.4} /* Light and dark switch — a square button beside the search, the same size and the same frame as the other actions of the bar. */ .pls-theme-toggle{flex:0 0 auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--pls-surface);border:1px solid var(--pls-border);border-radius:calc(10px * var(--pls-r));color:var(--pls-ink2);cursor:pointer;transition:background .15s,border-color .15s} .pls-theme-toggle:hover{background:var(--pls-bg);border-color:var(--pls-border)} /* The sun belongs to the dark appearance: hidden until the document says so. Two classes and not one: `.pls-icon` gives every icon a display of its own, from a stylesheet loaded after this one, and at equal weight the later rule wins — both faces of the switch were showing at once. */ .pls-theme-toggle .pls-theme-toggle__sun{display:none} /* No flash of the signed-out state: with html.pls-auth — set from a cookie in the , before the first paint — the sign-in button is hidden at once and a round placeholder is shown in its place, so the anonymous state is never seen while the account request is still in flight. */ html.pls-auth #pls-btn-accedi-text{display:none} html.pls-auth #pls-btn-logout{display:flex !important} /* --- Breaking Bar --- */ .pls-breaking{background:var(--pls-surface);border-bottom:1px solid var(--pls-border)} /* The height is reserved: 26px is the pause control, the tallest thing the row can hold. Whatever appears inside it later — a control, a longer label — the strip is already as tall as it will ever be, and the page below it does not move. */ /* The height is the one the pause button needs, plus the padding: written as a single min-height so the row keeps it whether or not that button is drawn. `max-width` has to measure the same box as every other strip of the header, or the bar sits wider than the site it belongs to. */ .pls-breaking__inner{max-width:var(--pls-max-w);margin:0 auto;padding:10px var(--pls-sp-xl);display:flex;align-items:center;gap:14px;font-size:13px;min-height:46px;box-sizing:border-box} /* The badge carries the accent: it is the colour the theme keeps for what must read apart from a link, and a masthead's breaking label is exactly that. Auto e moto asks for its own red instead — the style is built around that red, and the badge sits on white. */ .pls-style-auto .pls-breaking__badge{background:var(--pls-brand)} .pls-breaking__badge{background:var(--pls-accent-ink,#bf4f28);color:#fff;padding:3px 9px;border-radius:calc(4px * var(--pls-r));font-size:11px;font-weight:700;letter-spacing:.5px;flex-shrink:0;text-transform:uppercase;position:relative;z-index:2} .pls-breaking__text-wrap{flex:1;min-width:0;overflow:hidden;position:relative;display:flex;align-items:center} /* Size, weight and colour sit on the ticker itself and not on the link: an item without a URL is plain text, and would otherwise be smaller and paler than the one beside it. */ .pls-breaking__text{color:var(--pls-ink2);font-size:15px;font-weight:500;white-space:nowrap;display:inline-block;line-height:1.4} .pls-breaking__text a{color:inherit;text-decoration:none} .pls-breaking__text a:hover{color:var(--pls-brand);text-decoration:underline} /* The ticker pause control. Two bars while it scrolls, a triangle while it is stopped: the icon says what the button does now, not what state it is in. */ .pls-breaking__pause{flex:0 0 auto;width:26px;height:26px;margin-left:8px;padding:0;display:flex; align-items:center;justify-content:center;background:none;border:0;border-radius:999px; color:var(--pls-ink2);cursor:pointer} .pls-breaking__pause:hover{background:var(--pls-bg);color:var(--pls-ink)} .pls-breaking__pause:focus-visible{outline:2px solid var(--pls-brand);outline-offset:1px} .pls-breaking__pause-icon{display:block;width:10px;height:11px; border-left:3px solid currentColor;border-right:3px solid currentColor} .pls-breaking__pause.is-paused .pls-breaking__pause-icon{width:0;height:0;border:0; border-left:9px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent} /* --- Mobile Nav --- */ .pls-mobile-toggle{display:none;background:var(--pls-surface);border:1px solid var(--pls-border);width:36px;height:36px;border-radius:calc(10px * var(--pls-r));align-items:center;justify-content:center;color:var(--pls-ink2)} .pls-mobile-nav{display:none;position:fixed;inset:0;z-index:200;background:rgba(15,29,54,.5)} .pls-mobile-nav__panel{position:absolute;top:0;right:0;width:min(320px,85vw);height:100%;background:var(--pls-surface);padding:20px;overflow-y:auto;transform:translateX(100%);transition:transform .25s ease} .pls-mobile-nav--open .pls-mobile-nav__panel{transform:translateX(0)} /* Two classes, to win over the rule that hides the mobile nav even when the inline critical CSS (id=pls-critical) repeats the base rule further down the document — without this the overlay stays display:none and tapping the button appears to do nothing. */ .pls-mobile-nav.pls-mobile-nav--open{display:block} .pls-mobile-nav__close{background:none;border:none;padding:8px;margin-bottom:16px;color:var(--pls-ink)} .pls-mobile-nav__title{font-size:13px;font-weight:600;color:var(--pls-mute);text-transform:uppercase;letter-spacing:.5px;margin:0 0 12px;padding:0 4px} .pls-mobile-nav__list{display:flex;flex-direction:column;gap:4px;border:1px solid var(--pls-border-soft);border-radius:calc(8px * var(--pls-r));padding:8px} .pls-mobile-nav__widgets{margin-top:20px;padding-top:20px;border-top:1px solid var(--pls-border-soft);display:flex;flex-direction:column;gap:16px} .pls-mobile-nav__item{padding:11px 16px;font-size:13px;font-weight:500;color:var(--pls-ink2);border-radius:calc(10px * var(--pls-r));transition:background .15s} .pls-mobile-nav__item:hover,.pls-mobile-nav__item--active{background:var(--pls-brand-soft);color:var(--pls-brand)} .pls-mobile-nav__list .menu{list-style:none;margin:0;padding:0} .pls-mobile-nav__list .menu li a{display:block;padding:11px 16px;font-size:13px;font-weight:500;color:var(--pls-ink2);border-radius:calc(10px * var(--pls-r));transition:background .15s} .pls-mobile-nav__list .menu li a:hover{background:var(--pls-brand-soft);color:var(--pls-brand)} /* --- Mobile menu (accordion drawer) --- */ .pls-mobile-menu{list-style:none;margin:0;padding:0} .pls-mobile-menu__item{border-bottom:1px solid var(--pls-border-soft)} .pls-mobile-menu__item:last-child{border-bottom:none} .pls-mobile-menu__item--child{border-bottom:none} .pls-mobile-menu__row{display:flex;align-items:center;gap:4px} .pls-mobile-menu__link{flex:1;display:block;padding:11px 16px;font-size:13px;font-weight:500;color:var(--pls-ink2);text-decoration:none;border-radius:calc(8px * var(--pls-r));transition:background .15s,color .15s} .pls-mobile-menu__link:hover,.pls-mobile-menu__item.is-current > .pls-mobile-menu__link,.pls-mobile-menu__item.is-current > .pls-mobile-menu__row > .pls-mobile-menu__link{background:var(--pls-brand-soft);color:var(--pls-brand)} .pls-mobile-menu__toggle{flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--pls-mute);cursor:pointer;border-radius:calc(8px * var(--pls-r));transition:background .15s,color .15s} .pls-mobile-menu__toggle:hover{background:var(--pls-bg);color:var(--pls-ink)} .pls-mobile-menu__toggle svg{transition:transform .25s ease} .pls-mobile-menu__toggle[aria-expanded="true"] svg{transform:rotate(180deg)} /* Smooth height animation: grid-template-rows 0fr → 1fr trick (single child = .pls-mobile-menu__sublist) */ .pls-mobile-menu__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease} .pls-mobile-menu__sublist{list-style:none;margin:0;padding:0 0 0 16px;min-height:0;overflow:hidden} .pls-mobile-menu__item.is-open > .pls-mobile-menu__sub{grid-template-rows:1fr} .pls-mobile-menu__sublink{display:block;padding:9px 12px;font-size:12.5px;font-weight:500;color:var(--pls-ink2);text-decoration:none;border-top:1px solid var(--pls-border-soft);transition:background .15s,color .15s} .pls-mobile-menu__sublink:hover{background:var(--pls-bg);color:var(--pls-brand)} /* --- Mobile menu bar (horizontal scroll) --- */ .pls-mobile-menubar{display:none;position:relative} .pls-mobile-menubar__btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;font-size:13px;font-weight:500;color:var(--pls-ink2);border-radius:var(--pls-radius-sm);background:var(--pls-bg);border:1px solid var(--pls-border-soft);cursor:pointer;font-family:inherit;line-height:1;white-space:nowrap;box-sizing:border-box;transition:background .15s,color .15s,border-color .15s} .pls-mobile-menubar__btn:hover,.pls-mobile-menubar__item.is-open > .pls-mobile-menubar__btn,.pls-mobile-menubar__btn[aria-expanded="true"]{background:var(--pls-brand-soft);color:var(--pls-brand);border-color:transparent} .pls-mobile-menubar__chev{display:inline-flex;color:currentColor;opacity:.65;transition:transform .25s,opacity .15s} .pls-mobile-menubar__btn[aria-expanded="true"] .pls-mobile-menubar__chev{transform:rotate(180deg);opacity:1} /* Dropdown panel below menubar (sibling to the .pls-mobile-menubar__list) */ .pls-mobile-menubar__dropdown{position:absolute;top:100%;left:0;right:0;background:var(--pls-surface);border-bottom:1px solid var(--pls-border);box-shadow:0 8px 24px rgba(15,29,54,.10);z-index:90;padding:6px var(--pls-sp-md) 10px} .pls-mobile-menubar__dropdown[hidden]{display:none} .pls-mobile-menubar__dropdown-all{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 12px;font-size:13px;font-weight:600;color:var(--pls-brand);text-decoration:none;border-radius:var(--pls-radius-sm)} .pls-mobile-menubar__dropdown-all:hover{background:var(--pls-brand-soft)} .pls-mobile-menubar__dropdown-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--pls-border-soft)} .pls-mobile-menubar__dropdown-list li + li{border-top:1px solid var(--pls-border-soft)} .pls-mobile-menubar__dropdown-list li a{display:block;padding:12px 12px;font-size:14px;font-weight:500;color:var(--pls-ink);text-decoration:none;border-radius:var(--pls-radius-sm);transition:background .15s,color .15s} .pls-mobile-menubar__dropdown-list li a:hover{background:var(--pls-bg);color:var(--pls-brand)} /* --- Responsive --- */ @media(max-width:1024px){ .pls-mobile-menubar{display:block;background:var(--pls-surface);border-bottom:1px solid var(--pls-border)} .pls-mobile-menubar__list{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:8px var(--pls-sp-xl);white-space:nowrap;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 24px),transparent 100%)} .pls-mobile-menubar__list::-webkit-scrollbar{display:none} .pls-mobile-menubar__item{flex-shrink:0} .pls-mobile-menubar__item a{display:inline-flex;align-items:center;height:34px;padding:0 14px;font-size:13px;font-weight:500;line-height:1;color:var(--pls-ink2);border-radius:var(--pls-radius-sm);background:var(--pls-bg);text-decoration:none;border:1px solid var(--pls-border-soft);box-sizing:border-box;transition:background .15s,color .15s,border-color .15s} .pls-mobile-menubar__item a:hover,.pls-mobile-menubar__item a:active,.pls-mobile-menubar__item.current-menu-item a{background:var(--pls-brand-soft);color:var(--pls-brand);border-color:transparent} .pls-topbar{display:none} .pls-nav{display:none} .pls-search-trigger{min-width:0;width:36px;height:36px;padding:0;justify-content:center;flex:0 0 auto;margin-left:auto} .pls-search-trigger__text{display:none} .pls-search-trigger__kbd{display:none} .pls-mobile-toggle{display:flex} .pls-header__inner{gap:8px} /* Cars & bikes, on a phone: the same scrolling bar drawn the way a motoring masthead draws it — bare uppercase words on white, no pill. 44px tall, 13px, weight 600. */ /* Without a pill around it, the first word has to start where the logo starts. The bar's own padding is therefore reduced by exactly the item's inner padding, so what lines up is the text and not an invisible box. */ .pls-style-auto .pls-mobile-menubar__list{padding:0 calc(var(--pls-sp-xl) - 12px);gap:0;mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 20px),transparent 100%)} .pls-style-auto .pls-mobile-menubar__item a{height:44px;padding:0 12px;font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.02em;color:var(--pls-ink);background:none;border:0;border-radius:0} .pls-style-auto .pls-mobile-menubar__item a:hover, .pls-style-auto .pls-mobile-menubar__item a:active, .pls-style-auto .pls-mobile-menubar__item.current-menu-item a{background:none;color:var(--pls-brand);border-color:transparent} } /* --- User bar (logged-in, loaded client-side) --- */ @media(max-width:640px){ .pls-header__inner{padding:10px var(--pls-sp-md);gap:6px} .pls-style-auto .pls-mobile-menubar__list{padding:0 calc(var(--pls-sp-md) - 12px)} /* The horizontal padding comes down with the rest of the page; the height does not, so the bar weighs the same at every width. */ .pls-breaking__inner{padding:10px var(--pls-sp-md);gap:10px} /* Smaller on a phone: the line runs across a screen a quarter as wide, so at the desktop size it goes past in pieces too big to read as one sentence. */ .pls-breaking__text{font-size:13.5px} .pls-mobile-menubar__list{padding:8px var(--pls-sp-md)} } /* ── Menu without the pill ──────────────────────────────────────────── The masthead way: the words carry the menu, nothing sits behind them, and the page you are on is named in the brand colour. Heavier than the default, because without a background the weight is what separates the menu from the text around it. */ .pls-nav--plain .menu{gap:0} .pls-nav--plain .menu > li > a{ padding:8px 14px; font-weight:600; color:var(--pls-ink); background:none; border-radius:0; } .pls-nav--plain .menu > li > a:hover{ background:none; color:var(--pls-brand); } .pls-nav--plain .menu > li.current-menu-item > a, .pls-nav--plain .menu > li.current-menu-parent > a, .pls-nav--plain .menu > li.current-menu-ancestor > a, .pls-nav--plain .menu > li.current_page_item > a, .pls-nav--plain .menu > li.current_page_parent > a{ background:none; color:var(--pls-brand); } /* The chevron of a submenu follows the word it belongs to. */ .pls-nav--plain .menu > li > a svg{opacity:.75} .pls-nav--plain .menu > li > a:hover svg, .pls-nav--plain .menu > li.current-menu-item > a svg{opacity:1} /* ── The logo of Cars & bikes ───────────────────────────────────────── A hue rotation turns the bundled logo's stroke red, to match the style's band. Only ever the bundled file: an uploaded logo is already the colour somebody chose, and might be a photograph. */ /* --- Header arrangements ------------------------------------------------ The same pieces in five dispositions. Only what changes is written here: the row itself, the logo and the menu keep the rules above whatever the arrangement, so a fix to one of them is a fix to all five. */ /* The band under the masthead, where the menu sits on b, c and e. */ /* The band closes the header now that it is printed after it: the bottom border the header carries falls above the band, so the band draws the one below — the same line, in the same colour, at the bottom of the whole arrangement. */ .pls-header__navbar{border-top:1px solid var(--pls-border-soft);border-bottom:1px solid var(--pls-border);background:var(--pls-surface)} /* The band of the menu is a sibling of the header, not a child of it, so in the arrangements that use it the line closing the header and the line opening the band fall one on top of the other and read as a rule twice as thick. The header has already drawn it. */ .pls-header + .pls-header__navbar{border-top:0} .pls-header__inner--nav{padding-top:0;padding-bottom:0;min-height:48px;gap:10px} /* On its own band the menu is the first thing on the row, so it starts where the logo above it starts: the 8px that separate it from the logo in the single row arrangements have nothing to separate it from here. With the pill style the pill is the visible edge and lines up with the column; with the plain style there is no background, so the row is pulled back by the padding of the link and the words themselves line up. */ .pls-header__inner--nav .pls-nav{margin-left:0} .pls-header__inner--nav .pls-nav--plain{margin-left:-12px} .pls-header__inner--nav .pls-nav{flex:1;min-width:0} /* b · logo centred, menu underneath. The empty side keeps the logo in the middle of the row and not in the middle of what is left of it. */ .pls-header__inner--centred{justify-content:space-between} /* The two sides take what is left in equal parts, so the logo lands in the middle of the row and not in the middle of the space beside it. The search sits at the very edge of the page rather than next to the logo: the side is what holds it there, and it starts where the row starts. */ .pls-header__side{flex:1 1 0;display:flex;align-items:center;gap:10px;min-width:0;justify-content:flex-start} .pls-header__side--end{justify-content:flex-end} .pls-header--b .pls-header__inner--centred .pls-logo, .pls-header--f .pls-header__inner--centred .pls-logo, .pls-header--e .pls-header__inner--cover .pls-logo{flex:0 0 auto} .pls-header__navbar--b .pls-header__inner--nav .pls-nav, .pls-header__navbar--f .pls-header__inner--nav .pls-nav, .pls-header__navbar--e .pls-header__inner--nav .pls-nav{flex:0 1 auto;margin:0 auto} /* b, on a wide screen: the switch on the left and the search on the right. The two sides swap with `order` rather than in the markup, because on a phone the order that works is the other one — thumb on the right, search where the eye starts. The logo is given its place explicitly, or it would go first. */ @media(min-width:1025px){ .pls-header--b .pls-header__inner--centred .pls-header__side, .pls-header--f .pls-header__inner--centred .pls-header__side{order:3;justify-content:flex-end} .pls-header--b .pls-header__inner--centred .pls-logo, .pls-header--f .pls-header__inner--centred .pls-logo{order:2} .pls-header--b .pls-header__inner--centred .pls-header__side--end, .pls-header--f .pls-header__inner--centred .pls-header__side--end{order:1;justify-content:flex-start} } /* c · masthead: logo on the left, banner beside it, menu under both. The banner takes the room that is left, so the search and the switches stay at the end of the row whether there is a banner or not. */ .pls-header__inner--masthead{gap:20px;padding-top:18px;padding-bottom:18px} .pls-header__inner--masthead .pls-header__banner{margin-left:auto} .pls-header__inner--masthead .pls-header__side--end{flex:0 0 auto;margin-left:auto} .pls-header__inner--masthead .pls-header__banner + .pls-header__side--end{margin-left:0} /* Ninety pixels tall, whatever is put in it. A leaderboard is 728×90, and the file uploaded is often twice that for sharp screens: it is drawn at 90 and keeps its proportions, rather than pushing the logo row taller than the header it belongs to. */ /* The leaderboard is shown whole or not at all: `flex:0 0 auto` with the width written out keeps flexbox from taking pixels off it when the row runs short. The two breakpoints below are where it stops fitting — first beside the logo, then on a line of its own — and at the second one the picture made for a phone takes over. */ /* No line-height:0 here. It belongs to a picture, whose descender space it removes, and the two children below are told so themselves. On the box it flattened everything else to nothing: an ad unit is not always an image — a script that has not filled yet, an iframe, a line of text — and all of it was in the page at zero height, present and invisible. */ .pls-header__banner{flex:0 0 auto;width:728px;max-width:100%;min-width:0;max-height:90px;overflow:hidden} .pls-header__banner img{height:90px;width:auto;max-width:100%;object-fit:contain;display:block;margin-left:auto;line-height:0} .pls-header__banner picture{display:block;line-height:0} /* The space a banner will take, before one is chosen: the standard leaderboard, as a block of colour. */ .pls-header__bannerph{display:block;width:728px;max-width:100%;height:90px;background:var(--pls-border-soft);border-radius:calc(6px * var(--pls-r))} /* d · one solid band: the row is painted in the darkest colour the palette has and everything on it is dressed for that ground — not only the words, which was the first version and left a white search box and a white theme switch sitting on a black row. The values are written once as variables of the band, so a piece added later has somewhere to read them from instead of repeating three rgba() by hand. */ .pls-header--d{ --pls-onband:#fff; --pls-onband-soft:rgba(255,255,255,.72); --pls-onband-fill:rgba(255,255,255,.10); --pls-onband-line:rgba(255,255,255,.18); background:var(--pls-band-set,var(--pls-band));border-bottom-color:transparent } /* A band the site painted a pale colour: white lettering on it cannot be read, so everything on it takes the ink of the page instead. */ .pls-header--bandlight{ --pls-onband:var(--pls-ink); --pls-onband-soft:var(--pls-ink2); --pls-onband-fill:rgba(0,0,0,.06); --pls-onband-line:rgba(0,0,0,.12) } .pls-header--bandlight .pls-nav .menu > li.current-menu-item > a, .pls-header--bandlight .pls-nav .menu > li.current-menu-parent > a, .pls-header--bandlight .pls-nav .menu > li.current-menu-ancestor > a{background:rgba(0,0,0,.08);color:var(--pls-ink)} .pls-header--bandlight .pls-search-trigger:hover, .pls-header--bandlight .pls-theme-toggle:hover, .pls-header--bandlight .pls-mobile-toggle:hover{background:rgba(0,0,0,.1);border-color:rgba(0,0,0,.2)} .pls-header--bandlight .pls-search-trigger__kbd{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.12);color:var(--pls-ink2)} .pls-header--d .pls-logo, .pls-header--d .pls-logo__text{color:var(--pls-onband)} /* A logo made for light paper keeps its own colours on the band; the one made for dark grounds takes over where the site has uploaded it. */ .pls-header--darklogo .pls-logo__light{display:none} .pls-header--darklogo .pls-logo__dark{display:block} .pls-header--d .pls-nav .menu > li > a{color:var(--pls-onband-soft)} .pls-header--d .pls-nav .menu > li > a:hover{background:var(--pls-onband-fill);color:var(--pls-onband)} /* The page you are on. The tinted pill of the light header would be a pale patch here, so the mark is the fill of the band itself, one step brighter. */ .pls-header--d .pls-nav .menu > li.current-menu-item > a, .pls-header--d .pls-nav .menu > li.current-menu-parent > a, .pls-header--d .pls-nav .menu > li.current-menu-ancestor > a{ background:rgba(255,255,255,.14);color:var(--pls-onband) } .pls-header--d .pls-nav--plain .menu > li.current-menu-item > a{background:none;color:var(--pls-onband)} .pls-header--d .pls-search-trigger, .pls-header--d .pls-theme-toggle, .pls-header--d .pls-mobile-toggle{ background:var(--pls-onband-fill);border-color:var(--pls-onband-line);color:var(--pls-onband) } .pls-header--d .pls-search-trigger:hover, .pls-header--d .pls-theme-toggle:hover, .pls-header--d .pls-mobile-toggle:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3)} .pls-header--d .pls-search-trigger__kbd{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:var(--pls-onband-soft)} /* The band is already dark in the light appearance: on the dark one it is the sub menus that need saying, since they are drawn on the page and not on it. */ .pls-header--d .pls-nav .sub-menu{background:var(--pls-surface)} /* e · a picture across the top with the logo on it. The veil is what keeps a logo readable over a photograph nobody chose for the purpose. */ .pls-header__cover{position:relative;background-size:cover;background-position:center;display:flex;align-items:center} .pls-header__cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.45))} /* No picture chosen: the band the picture will fill, as a block of colour at the height it will have. The veil above stays, so the logo on it is drawn exactly as it will be once a picture is there. */ .pls-header__cover--empty{background-color:var(--pls-mute)} .pls-header__inner--cover{position:relative;z-index:1;width:100%} /* ── What follows the page down ─────────────────────────────────────────── Where the menu has a band of its own, that band is the anchored part and the rest of the header scrolls away with the page. The reason is what the rest is made of: a logo alone on its line, a masthead's banner, a photograph. Anchored, they would keep a strip — a third of the screen, in the two that open with a picture — for the whole length of the article being read, and the one row worth having within reach is the one with the links on it. The classic and the band arrangements are not listed: they *are* one row, with the menu on it, so the header itself is already that row. The band already carries a background of its own, so nothing shows through it as the page slides under. The offsets are the ones `.pls-header` uses above: the admin bar is 32px tall, and below 1024px it stops being fixed, so the offset goes back to 0. */ .pls-header--b, .pls-header--c, .pls-header--e, .pls-header--f{position:static} /* The band exists only in those four, and it is a sibling of the header rather than a child — see the partial. Being a sibling is what lets it stay when the header has gone. It already carries a background of its own, so nothing shows through as the page slides under it. The offsets are the ones `.pls-header` uses above: the admin bar is 32px tall, and below 1024px it stops being fixed. */ .pls-header__navbar{position:sticky;top:0;z-index:100} .admin-bar .pls-header__navbar{top:32px} @media(max-width:1024px){.admin-bar .pls-header__navbar{top:0}} .pls-header--e .pls-logo, .pls-header--e .pls-logo__text{color:#fff} .pls-header--e .pls-search-trigger, .pls-header--e .pls-theme-toggle, .pls-header--e .pls-mobile-toggle{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);color:#fff} .pls-header--e .pls-search-trigger:hover, .pls-header--e .pls-theme-toggle:hover, .pls-header--e .pls-mobile-toggle:hover{background:rgba(255,255,255,.22)} /* On a phone every arrangement is the same thing: the logo and the hamburger. The second band would be an empty strip, since the menu it carries is in the panel the hamburger opens. */ @media(max-width:1024px){ .pls-header__navbar{display:none} /* The banner stays on a phone, in the shape made for it: 320×50, which is what the mobile picture above is for. It moves under the logo, because a row of logo, banner and buttons on a phone is three things too many. */ /* The row loses its bottom padding: the banner underneath brings its own, and the two together left more air below the picture than above it. `row-gap:0` because the gap of the row is meant for the space between the logo and the buttons beside it: once the banner wraps onto a line of its own that same gap is added again above it, on top of the margin the banner already carries. The column gap is untouched. */ .pls-header__inner--masthead{flex-wrap:wrap;row-gap:0;padding-top:8px;padding-bottom:10px} /* The bottom padding goes only where a banner actually follows: with the banner switched off there is nothing under the row to bring its own space, and the buttons ended up sitting on the rule that closes the header. A little of the space above moves below, where it is needed: the row read as pushed down before it was even short of room. */ .pls-header__inner--masthead:has(.pls-header__banner){padding-bottom:0} /* Centred, on a phone: the search on the left, the logo in the middle and the switches on the right. The logo is drawn smaller than on the desktop — at 46px it takes the width of the screen and leaves the two sides nothing. */ .pls-header__inner--centred .pls-logo__full, .pls-header__inner--cover .pls-logo__full{height:26px!important} /* The narrow search button carries `margin-left:auto` so that in the ordinary header it pushes itself to the end of the row. Inside a side of its own that margin holds it away from the edge, hanging in the middle of nothing: here the side decides where it goes. */ .pls-header__side .pls-search-trigger{margin-left:0} .pls-header__inner--centred .pls-header__side, .pls-header__inner--cover .pls-header__side{flex:1 1 0;min-width:0} .pls-header__inner--masthead{justify-content:space-between} .pls-header__inner--centred, .pls-header__inner--cover{justify-content:space-between;gap:8px} /* The picture stays on a phone too: it is the layout, not decoration for wide screens. Shorter, because a header that takes half the screen on a phone leaves nothing of the article underneath. */ .pls-header__cover{min-height:110px!important} /* The picture is still there, so what was dressed for it stays dressed. */ } /* ── The masthead banner, and where it stops fitting ────────────────────── Two measurements, not two guesses. Beside the logo the row needs 32 + 185 + 20 + 728 + 20 + 82 + 32 = 1099px; on a line of its own it needs the leaderboard plus the two paddings, 728 + 64 = 792px. Below each, the banner moves rather than shrink: a leaderboard drawn at 680px is an advertisement the buyer sold at 728. */ @media(max-width:1098px){ /* Its own band under the logo row, with a rule above it so it does not read as something hanging off the logo. `max-width:none` because that rule is the top of the band and runs the whole width of the row, while the picture keeps its own width and is centred inside it. */ .pls-header__inner--masthead .pls-header__banner{ order:3;flex:1 0 100%;width:auto;max-width:none;max-height:none;margin:14px 0 0; border-top:1px solid var(--pls-border-soft);padding:14px 0 } .pls-header__inner--masthead .pls-header__banner img, .pls-header__inner--masthead .pls-header__bannerph{margin:0 auto} } /* Not even the line of its own is wide enough: the banner made for a phone takes over. The same width is written in the `media` of the , so the file the browser fetches and the size it is drawn at change together. */ @media(max-width:791px){ .pls-header__inner--masthead .pls-header__banner img{height:50px} .pls-header__inner--masthead .pls-header__bannerph{width:320px;height:50px} } /* ── The strip of categories under a band header ────────────────────────── With the band arrangement the row of buttons takes its colour from the band instead of from the brand, so the two read as one piece. The two custom properties are worked out by the theme from the colour chosen for the band: one that can be read on the page whatever that colour is, and a thin wash of it for the button of the page you are on. Without them — any other arrangement — the row keeps the brand, which is the fallback written here. */ .pls-header-d .pls-mobile-menubar__item a:hover, .pls-header-d .pls-mobile-menubar__item a:active, .pls-header-d .pls-mobile-menubar__item.current-menu-item a{ background:var(--pls-band-soft,var(--pls-brand-soft)); color:var(--pls-band-ink,var(--pls-brand)); border-color:transparent } /* The category strip without the buttons: the words on their own, and the one you are on named in colour rather than sat on a tint. Only the surfaces go — the height, the spacing and the sideways scrolling are what make the strip work on a phone, and they stay. */ .pls-mobile-menubar--plain .pls-mobile-menubar__item a, .pls-mobile-menubar--plain .pls-mobile-menubar__btn{background:none;border-color:transparent} .pls-mobile-menubar--plain .pls-mobile-menubar__item a:hover, .pls-mobile-menubar--plain .pls-mobile-menubar__item a:active, .pls-mobile-menubar--plain .pls-mobile-menubar__item.current-menu-item a, .pls-mobile-menubar--plain .pls-mobile-menubar__btn:hover, .pls-mobile-menubar--plain .pls-mobile-menubar__item.is-open > .pls-mobile-menubar__btn, .pls-mobile-menubar--plain .pls-mobile-menubar__btn[aria-expanded="true"]{ background:none;border-color:transparent;font-weight:600 } /* ── f · the picture across the top ─────────────────────────────────────── A strip of its own above the header and outside it, the width of the page, at the proportions of the picture given: shown whole, with nothing over it and nothing cropped. That is the whole difference from the cover, where the picture is a background the logo is written on — and being outside the header is what lets it scroll away while the header stays. */ .pls-skin{display:block;line-height:0;background:var(--pls-surface)} .pls-skin a{display:block;line-height:0} .pls-skin img{display:block;width:100%;height:auto} /* Nothing chosen yet: the shape the picture will have. 1600×400 is the size the theme asks the Customizer for, so the block is drawn at four to one. No `max-height` beside the ratio: a height limit on a box with an aspect ratio is met by taking width off it, and the block would stop short of the edge instead of spanning the page. */ .pls-skin--empty{width:100%;aspect-ratio:4/1;background:var(--pls-border-soft)} /* The strip is the arrangement: on a phone it stays, unlike the banner of the masthead, because without it this header is the centred one. */ @media(max-width:640px){ .pls-skin--empty{aspect-ratio:3/1} }