/* ========================================================================== Pulsar Theme — Base Design tokens, reset, typography, utility classes. ========================================================================== */ /* Preload guard: disables every transition during bootstrap, until load, so that a change of body class or a web font arriving after the first paint does not set off a cascade of border-color/color/background repaints on the main thread. The class is put on in header.php and taken off at window.load plus two animation frames in footer.php. */ html.pls-preload, html.pls-preload *, html.pls-preload *::before, html.pls-preload *::after { transition: none !important; } /* --- Design Tokens --- */ :root{ --pls-bg:#f4f6fa; --pls-surface:#fff; --pls-border:#e4e9f2; --pls-border-soft:#e4e8ee; --pls-ink:#0f1d36; /* The text read second, both the names the stylesheets use for it. Worked out from the ink: `mix(--pls-ink, --pls-bg, .68)`, the same step the panel takes, so a site that has never opened the colour screen is drawn in the colour that screen would show. */ --pls-ink2:#586275; --pls-mute:#586275; /* Captions, comment metadata: text that is there to be read second. */ --pls-ink-soft:var(--pls-mute); /* The ink for something that stays light in both appearances: a block the author gave a colour from the editor's palette keeps that colour, so the words on it cannot follow the ink, which turns pale on the dark one. */ --pls-ink-on-light:var(--pls-ink); /* The band the top bar and the footer sit on. Dark in both appearances, so it is a colour of its own and not the ink, which turns pale on the dark one. */ --pls-band:var(--pls-ink); --pls-brand:#1e63d4; --pls-brand-dark:#174ea8; --pls-brand-soft:#e8efff; --pls-accent:#d4572c; /* The accent, dark enough for white lettering on it: white on the accent itself reads at 4.04:1. PHP recomputes this from whatever accent the site was given, so the pair stays legible on every palette. */ --pls-accent-ink:#bf4f28; /* Twelve pixels is the floor for text a reader is meant to read — meta lines, credits, the small print under a form. Below it goes only what is read at a glance and never in a sentence: the letter inside a badge, a month in three letters on a calendar. */ --pls-accent-soft:#fbe8dd; --pls-success:#2d7a6f; /* The same green, dark enough to be read on its own tint. */ --pls-success-ink:#0f7a4d; --pls-live:#c22; --pls-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif; /* The family of the headings. It follows the body's until a second one is chosen in the panel, so a site with one family everywhere reads exactly as it did before this existed. */ --pls-font-h:var(--pls-font); --pls-font-mono:"SF Mono","Fira Code",Consolas,monospace; --pls-sp-xs:4px; --pls-sp-sm:8px; --pls-sp-md:16px; --pls-sp-lg:24px; --pls-sp-xl:32px; --pls-sp-2xl:48px; --pls-max-w:1280px; --pls-sidebar-w:320px; /* How round the corners are, everywhere at once. Every radius in the theme is written as its own size times this number, so 1 is the design as drawn and 0 is a squared off site with nothing else changed. A preset can set it, and so can the panel. Shapes that are round by nature — avatars, the round buttons — use a percentage and are not affected. */ --pls-r:1; --pls-radius:calc(12px * var(--pls-r)); --pls-radius-sm:calc(8px * var(--pls-r)); --pls-radius-lg:calc(16px * var(--pls-r)); --pls-shadow-sm:0 1px 3px rgba(15,29,54,.06); --pls-shadow-md:0 4px 12px rgba(15,29,54,.08); --pls-shadow-lg:0 8px 24px rgba(15,29,54,.1); --pls-body-size:16px; --pls-body-lh:1.6; --pls-article-size:18px; --pls-article-lh:1.75; /* Headings inside the body of an article have a scale of their own: an h2 in the middle of a piece should not compete with the title of the page, so the theme draws it smaller than an h2 elsewhere. Separate variables because they are separate decisions — and because the panel sliders say "the headings inside articles", so they have to move these. */ --pls-entry-h1:40px; --pls-entry-h2:24px; --pls-entry-h3:20px; --pls-entry-h4:18px; --pls-h1-size:40px; --pls-h2-size:28px; --pls-h3-size:22px; --pls-h4-size:18px; --pls-card-title-size:16px; /* Everything else in a card — the category, the meta line, the excerpt — is scaled by one number instead of having a size per column count each: they are small type that has to keep its proportions to the title, not settings anybody wants four sliders for. 1 is the size the theme draws. */ --pls-card-scale:1; /* Every card title is its own size times this number, the way every radius is its own size times --pls-r. One value then enlarges the titles of all nine card shapes at once, and the sizes set for each shape keep their proportion to one another instead of being overwritten. */ --pls-title-scale:1; /* A card is as wide as the row lets it be, so the title has a size per column count. One card per row follows the base size; the others carry their own, and every one of them can be changed from the panel. */ --pls-card-title-size-1col:var(--pls-card-title-size); --pls-card-title-size-2col:16px; --pls-card-title-size-3col:15px; --pls-card-title-size-4col:14px; --pls-single-title-size:32px; --pls-single-subtitle-size:17px; --pls-single-title-ls:-0.03em; --pls-card-excerpt-size:13px; --pls-meta-size:12px; /* A category description takes the size of the article text. The typo_category_desc_size option overrides it through the :root block written by class-assets.php, and is read by .pls-archive-desc in archive.css. */ --pls-cat-desc-size:var(--pls-article-size) } /* On a phone the article and page text drops to 16px, from 18 on desktop. */ @media(max-width:640px){:root{--pls-article-size:16px}} @media(max-width:1024px){:root{--pls-single-title-size:28px}} @media(max-width:640px){:root{--pls-single-title-size:22px;--pls-single-title-ls:-.5px;--pls-single-subtitle-size:15px}} /* --- Reset --- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden} /* overflow-x:clip rather than hidden on the body: it clips horizontally without turning the body into a scroll container. `hidden` did turn it into one, and that broke every nested position:sticky — the sidebar, the header. `clip` does not. The horizontal guard stays on , as overflow-x:hidden. */ body{font-family:var(--pls-font);font-size:var(--pls-body-size);line-height:var(--pls-body-lh);color:var(--pls-ink);background:var(--pls-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip} img,picture,video,svg{display:block;max-width:100%;height:auto} img{border:0} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit;border:0;background:none} button{cursor:pointer} ul,ol{list-style:none} table{border-collapse:collapse;border-spacing:0} [hidden]{display:none!important} /* --- Typography Scale --- */ h1,h2,h3,h4,h5,h6{font-family:var(--pls-font-h);font-weight:700;line-height:1.2;letter-spacing:-.02em} h1{font-size:clamp(28px,4vw,var(--pls-h1-size))} h2{font-size:clamp(22px,3vw,var(--pls-h2-size))} h3{font-size:clamp(18px,2.5vw,var(--pls-h3-size))} h4{font-size:var(--pls-h4-size)} h5{font-size:16px} h6{font-size:14px} p{margin-bottom:1em} p:last-child{margin-bottom:0} strong,b{font-weight:600} /* --- Focus visible --- */ :focus-visible{outline:2px solid var(--pls-brand);outline-offset:2px;border-radius:calc(4px * var(--pls-r))} /* --- Selection --- */ ::selection{background:var(--pls-brand-soft);color:var(--pls-ink)} /* --- SVG icons --- */ .pls-icon{display:inline-block;vertical-align:middle;flex-shrink:0} /* --- Tabs UI (used by Elementor compat AND custom page templates) --- */ .pls-tabs{margin:1.6em 0} .pls-tabs__nav{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;background:var(--pls-bg);border-radius:calc(14px * var(--pls-r));margin-bottom:18px} .pls-tabs__btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 22px;border:0;background:transparent;color:var(--pls-mute);font-size:15px;font-weight:600;line-height:1;border-radius:calc(10px * var(--pls-r));cursor:pointer;transition:background .15s,color .15s;font-family:inherit} .pls-tabs__btn:hover{background:rgba(30,99,212,.08);color:var(--pls-ink)} .pls-tabs__btn--active,.pls-tabs__btn--active:hover{background:var(--pls-brand);color:#fff;box-shadow:0 2px 8px rgba(15,29,54,.08)} .pls-tabs__panel{display:none;animation:pls-tabs-fade .25s ease} .pls-tabs__panel--active{display:block} @keyframes pls-tabs-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.pls-tabs__panel{animation:none}} /* --- Screen reader only --- */ .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .pls-skip-link{position:absolute;top:-100%;left:16px;z-index:9999;padding:12px 24px;background:var(--pls-brand);color:#fff;font-size:14px;font-weight:600;border-radius:0 0 calc(8px * var(--pls-r)) calc(8px * var(--pls-r));text-decoration:none;transition:top .2s} .pls-skip-link:focus{top:0} /* --- Image placeholder --- */ .pls-img{display:block;width:100%;height:auto;object-fit:cover} /* The empty cover of a post with no featured image. 16:9 by default, like every image size the theme registers; each card type overrides it in cards.css. */ .pls-img-placeholder{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;width:100%;background:var(--pls-bg)} /* --- Shared keyframes, in one place instead of repeated per stylesheet --- */ @keyframes pls-pulse{0%,100%{opacity:1}50%{opacity:.4}} /* --- Performance: containment + lazy section reveal --- */ .pls-card,.pls-widget{contain:layout style paint} @supports (content-visibility:auto){ .pls-lazy,.pls-lazy-section{content-visibility:auto;contain-intrinsic-size:auto 600px} } /* --- Respect user motion preference --- */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* --- Responsive visibility utilities --- */ @media(min-width:641px){.pls-hide-desktop{display:none!important}} @media(max-width:640px){.pls-hide-mobile{display:none!important}} /* --- WP aligncenter / alignright (global, applied also on pages) --- */ img.aligncenter,.aligncenter img{display:block;margin-left:auto !important;margin-right:auto !important} figure.aligncenter,.wp-block-image.aligncenter,p.aligncenter{display:block;margin-left:auto;margin-right:auto;text-align:center} a:has(> img.aligncenter){display:block;text-align:center} p:has(img.aligncenter),h1:has(img.aligncenter),h2:has(img.aligncenter),h3:has(img.aligncenter),h4:has(img.aligncenter),h5:has(img.aligncenter),h6:has(img.aligncenter){text-align:center} img.alignright{display:block;margin-left:auto;margin-right:0} /* --- Lightbox, opened by clicking an image that links to itself --- */ html.pls-lightbox-lock,html.pls-lightbox-lock body{overflow:hidden} .pls-lightbox{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:24px;contain:layout paint} .pls-lightbox--open,.pls-lightbox--closing{display:flex} .pls-lightbox__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;animation:pls-lb-fade-in .25s ease forwards} .pls-lightbox--closing .pls-lightbox__backdrop{animation:pls-lb-fade-out .25s ease forwards} .pls-lightbox__close{position:absolute;top:16px;right:16px;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .2s,transform .2s;z-index:2} .pls-lightbox__close:hover{background:rgba(255,255,255,.22);transform:scale(1.05)} .pls-lightbox__img{position:relative;max-width:min(96vw,1400px);max-height:90vh;width:auto;height:auto;display:block;border-radius:calc(14px * var(--pls-r));box-shadow:0 30px 80px rgba(0,0,0,.55);transform-origin:center center;animation:pls-lb-pop .35s cubic-bezier(.34,1.56,.64,1) forwards;cursor:zoom-out;background:#0e1422} .pls-lightbox--closing .pls-lightbox__img{animation:pls-lb-shrink .25s ease forwards} @keyframes pls-lb-fade-in{from{opacity:0}to{opacity:1}} @keyframes pls-lb-fade-out{from{opacity:1}to{opacity:0}} @keyframes pls-lb-pop{from{opacity:0;transform:scale(.18)}60%{opacity:1}to{opacity:1;transform:scale(1)}} @keyframes pls-lb-shrink{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.2)}} @media (prefers-reduced-motion:reduce){.pls-lightbox__backdrop,.pls-lightbox__img{animation-duration:.01ms}} @media(max-width:640px){.pls-lightbox{padding:14px}.pls-lightbox__close{top:10px;right:10px;width:38px;height:38px}} /* --- Pill filters: the chips of the homepage grid. Theirs alone — [tabnav] used to borrow them and now carries its own, so a rule written here for the homepage cannot reach inside an article. --- */ .pls-grid-filters{display:flex;gap:8px;align-items:center} .pls-grid-filter{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;font-size:14px;line-height:1.2;font-weight:600;color:var(--pls-mute);background:var(--pls-surface);border:1.5px solid var(--pls-border);border-radius:calc(10px * var(--pls-r));cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .15s,color .15s,border-color .15s;box-shadow:none} .pls-grid-filter:hover{background:var(--pls-surface);color:var(--pls-brand);border-color:var(--pls-brand)} .pls-grid-filter--active,.pls-grid-filter--active:hover{background:var(--pls-brand);color:#fff;border-color:var(--pls-brand)} @media(max-width:640px){ .pls-grid-filters{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} .pls-grid-filters::-webkit-scrollbar{display:none} } /* ─── Page title hero ───────────────────────────────────────────── The full width bar drawn by components/page-title when _pulsar_page_title_style is 'hero' or 'hero-dark'. It replaces the inline page heading with a solid band above the .pls-container. */ .pls-page-title-hero{ position:relative;overflow:hidden; background:var(--pls-surface); border-bottom:1px solid var(--pls-border,#e4e9f2); color:var(--pls-ink,#0f1d36); margin:0; } .pls-page-title-hero::before{ content:"";position:absolute;inset:0; background-image:radial-gradient(circle at 1px 1px,rgba(30,99,212,.10) 1px,transparent 0); background-size:24px 24px;opacity:.55;pointer-events:none; mask-image:linear-gradient(to right,#000 0%,transparent 70%); -webkit-mask-image:linear-gradient(to right,#000 0%,transparent 70%); } .pls-page-title-hero__inner{ position:relative;z-index:1; max-width:1280px;margin:0 auto; padding:30px 35px; display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; } .pls-page-title-hero__heading{display:flex;align-items:center;gap:16px;min-width:0} .pls-page-title-hero__heading--with-logo .pls-page-title-hero__logo{ flex:0 0 auto;width:42px;height:42px;border-radius:calc(10px * var(--pls-r));display:block;background:var(--pls-surface); box-shadow:0 6px 14px -6px rgba(15,29,54,.25); } .pls-page-title-hero__heading-text{min-width:0} .pls-page-title-hero__title{ font-size:28px; font-weight:700;line-height:1.1;letter-spacing:-.02em; margin:0;color:inherit; } .pls-page-title-hero__subtitle{ margin:6px 0 0;font-size:clamp(14px,1.2vw,16px);line-height:1.45; color:var(--pls-mute,#57667d);max-width:720px; } .pls-page-title-hero__cta{ flex:0 0 auto; display:inline-flex;align-items:center;gap:8px; padding:11px 22px;border-radius:calc(10px * var(--pls-r)); background:var(--pls-brand,#1e63d4);color:#fff; font-weight:700;font-size:14px;text-decoration:none; transition:background .15s,transform .15s,box-shadow .15s; box-shadow:0 8px 18px -8px rgba(30,99,212,.55); } .pls-page-title-hero__cta:hover{ background:var(--pls-brand-dark,#1750ab);color:#fff;text-decoration:none; transform:translateY(-1px);box-shadow:0 12px 24px -8px rgba(30,99,212,.65); } .pls-page-title-hero{margin-bottom:24px} .pls-page-title-hero--spaced{margin-bottom:24px} .page-template-page-eventi-apple .pls-page-title-hero{margin-bottom:0} /* Variant dark */ .pls-page-title-hero--dark{ background:linear-gradient(135deg,#0f1d36 0%,#1f3458 100%); border-bottom-color:rgba(255,255,255,.08); color:#fff; } .pls-page-title-hero--dark::before{ background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,.10) 1px,transparent 0); } .pls-page-title-hero--dark .pls-page-title-hero__subtitle{color:rgba(255,255,255,.78)} @media (max-width:640px){ .pls-page-title-hero__inner{padding:24px 18px;gap:18px} .pls-page-title-hero__title{font-size:22px} .pls-page-title-hero, .pls-page-title-hero--spaced{margin-bottom:16px} } /* ── Repeating single colour icons, drawn as a mask from a cached SVG ── The comment icon appears around fifty times on a homepage, so the drawing is downloaded once and reused. A CSS mask, not SVG in the DOM: colour comes from currentColor and the size is fixed, so nothing shifts while it loads. */ .pls-micon{display:inline-block;flex-shrink:0;background-color:currentColor;-webkit-mask:no-repeat center/contain;mask:no-repeat center/contain;vertical-align:-.125em} .pls-micon--comments{-webkit-mask-image:url("../img/icons/comment.svg");mask-image:url("../img/icons/comment.svg")} .pls-micon--play{-webkit-mask-image:url("../img/icons/play.svg");mask-image:url("../img/icons/play.svg")} /* ========================================================================== WordPress core classes ========================================================================== */ .screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important} .screen-reader-text:focus{background-color:#fff;border-radius:calc(3px * var(--pls-r));box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;clip-path:none;color:#21759b;display:block;font-size:14px;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000} .sticky{position:relative} .sticky .pls-card__title::before{content:"\2605";margin-right:6px;color:var(--pls-brand)} .alignleft{float:left;margin:.4em 1.6em 1em 0} .alignright{float:right;margin:.4em 0 1em 1.6em} .aligncenter{clear:both;display:block;margin-left:auto;margin-right:auto} .alignwide{max-width:1100px;margin-left:auto;margin-right:auto} .alignfull{max-width:none;width:100%} .wp-caption{margin-bottom:1.6em;max-width:100%} .wp-caption img[class*=wp-image-]{display:block;margin-left:auto;margin-right:auto;max-width:100%;height:auto} .wp-caption .wp-caption-text, .wp-caption-text, figcaption.wp-element-caption{font-size:13px;line-height:1.5;color:var(--pls-ink-soft);text-align:center;margin:8px 0 0} .gallery-caption{display:block;font-size:13px;color:var(--pls-ink-soft)} .wp-block-image figcaption{font-size:13px;color:var(--pls-ink-soft);text-align:center} /* --- Author avatar --------------------------------------------------------- The photo sits on top of the monogram, so an address with no picture leaves the initials showing. Size and hue arrive as custom properties, set inline by pulsar_get_avatar(). */ .pls-avatar{position:relative;display:inline-block;flex-shrink:0;width:var(--pls-avatar-size,40px);height:var(--pls-avatar-size,40px);border-radius:50%;overflow:hidden;background:hsl(var(--pls-avatar-hue,220) 42% 46%);line-height:0;container-type:inline-size} .pls-avatar__mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:calc(var(--pls-avatar-size,40px) * .42);line-height:1;letter-spacing:.02em;text-transform:uppercase;user-select:none} /* The wrapper carries classes that sometimes set their own width (.pls-meta__avatar and friends), so the initials are sized against the box actually rendered rather than against the value passed in PHP. */ @supports (font-size:1cqi){.pls-avatar__mono{font-size:42cqi}} .pls-avatar__img{position:relative;display:block;width:100%;height:100%;object-fit:cover;border-radius:50%;background:var(--pls-surface,#fff)} /* The initials sit under the photograph and show through where it is transparent: a PNG with a cut-out background came out with coloured letters behind it. The photograph carries its own ground, so what shows through a transparent picture is the colour of the page. The initials remain what is drawn when there is no photograph at all, which is the case they exist for. */ /* ========================================================================== Cards on a dark ground White cards on a dark band are patches of light, and the dark text inside them has nothing to do with what is around. No card rule needs rewriting: the tokens the cards already read are enough — surface, borders, inks — so an element added to a card tomorrow is dark here without being told. Used by the black hero band and by the widgets of a dark footer. ========================================================================== */ .pls-on-dark,.pls-section--hero-d{ --pls-surface:#16181d; /* The ground a control stands on inside a card — the tab strip of a widget, a poll option, a hovered row. Given as white at low alpha rather than as a colour: on a dark ground a raised layer is lighter, not darker, and an alpha works over whatever is behind it — a black band, a dark card, or the see-through veil of a footer, which are three different colours. */ --pls-bg:rgba(255,255,255,.06); --pls-border:#2a2e37; --pls-border-soft:#2a2e37; --pls-ink:#f2f4f8; --pls-ink2:#c7cede; --pls-mute:#98a2b5; --pls-shadow-md:0 4px 14px rgba(0,0,0,.5); --pls-comment-bg:rgba(255,255,255,.08); --pls-comment-ink:#dbe2f0; } /* The one place a colour is written out rather than read from a token: the chosen option of a poll, whose pale green is a fixed value. On a dark ground it is the same green carried by an alpha, so it stays the colour that means "this is the one you picked". */ .pls-on-dark .pls-widget-poll__option--selected, .pls-section--hero-d .pls-widget-poll__option--selected{ border-color:rgba(120,214,168,.34);background:rgba(120,214,168,.13)} /* The signup form a plugin provides is dressed in footer.css: the block that holds it stands both on the front page and in the footer of every page, and that sheet is the one loaded everywhere. */