/* =========================================================== datastack — design system (ported from the prototype) Terminal-tech editorial. Mono labels, hairline grids, index numerals, neutral-warm base + coral accent. =========================================================== */ :root { --font-display: "Space Grotesk", system-ui, sans-serif; --font-body: "IBM Plex Sans", system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* neutral-warm scale (light) */ --bg: oklch(0.987 0.003 85); --bg-2: oklch(0.965 0.004 85); --surface: oklch(1 0 0); --ink: oklch(0.20 0.006 60); --ink-2: oklch(0.44 0.006 60); --ink-3: oklch(0.62 0.006 60); --hair: oklch(0.90 0.004 70); --hair-2: oklch(0.83 0.004 70); /* accent */ --accent: var(--wp--custom--ds--accent, oklch(0.63 0.18 33)); --accent-ink: var(--wp--custom--ds--accent-ink, oklch(0.50 0.18 33)); --accent-wash: color-mix(in srgb, var(--accent) 12%, transparent); --maxw: 1280px; --gut: 32px; --radius: 3px; --hair-w: 1px; } /* dark theme — toggled by [data-theme="dark"] on */ [data-theme="dark"] { --bg: oklch(0.18 0.008 260); --bg-2: oklch(0.21 0.010 260); --surface: oklch(0.225 0.012 260); --ink: oklch(0.94 0.004 250); --ink-2: oklch(0.72 0.006 250); --ink-3: oklch(0.56 0.008 250); --hair: oklch(0.32 0.012 260); --hair-2: oklch(0.40 0.014 260); --accent-wash: color-mix(in srgb, var(--accent) 18%, transparent); --accent: var(--wp--custom--ds--accent-dark, oklch(0.70 0.16 33)); --accent-ink: var(--wp--custom--ds--accent-ink-dark, oklch(0.78 0.15 33)); } /* Bridge WordPress preset variables to the runtime design vars, so core blocks (body, links, buttons, generated global styles) follow the dark toggle. html:root beats the :root rule WP prints for theme.json. */ html:root { --wp--preset--color--base: var(--bg); --wp--preset--color--subtle: var(--bg-2); --wp--preset--color--surface: var(--surface); --wp--preset--color--contrast: var(--ink); --wp--preset--color--muted: var(--ink-2); --wp--preset--color--faint: var(--ink-3); --wp--preset--color--hairline: var(--hair); --wp--preset--color--hairline-2: var(--hair-2); --wp--preset--color--accent: var(--accent); --wp--preset--color--accent-ink: var(--accent-ink); } * { box-sizing: border-box; } .ds-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); width: 100%; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html body { font-family: var(--font-body); background: var(--bg); color: var(--ink); margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; line-height: 1.6; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.06; } /* ---- shared label primitives ---- */ .mono, .is-style-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .kicker.accent { color: var(--accent-ink); } .kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .idx { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; } /* category pill (used by the .is-style-cat post-terms block too) */ .cat, .wp-block-post-terms.is-style-cat { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); display: inline-flex; align-items: center; flex-wrap: wrap; row-gap: 2px; column-gap: 6px; max-width: 100%; min-width: 0; } .cat::before, .wp-block-post-terms.is-style-cat::before { content: ""; width: 6px; height: 6px; background: var(--accent); display: inline-block; flex: none; } .wp-block-post-terms.is-style-cat a { color: inherit; text-decoration: none; } /* dotted grid background */ .is-style-dotgrid, .dotgrid { background-image: radial-gradient(var(--hair-2) 0.7px, transparent 0.7px); background-size: 22px 22px; background-position: -1px -1px; } /* link arrow */ .go { font-family: var(--font-mono); color: var(--accent-ink); display: inline-flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: 0.04em; } .go .arr { transition: transform 0.18s ease; } a:hover .go .arr, .go:hover .arr { transform: translateX(4px); } /* hairline rule */ .rule { height: var(--hair-w); background: var(--hair); border: 0; margin: 0; } /* scrollbar */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--hair-2); } *::-webkit-scrollbar-track { background: transparent; } /* ---- buttons (core button + .btn) ---- */ .wp-block-button__link, .btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; border-radius: var(--radius); } /* density */ [data-density="compact"] { --gut: 24px; } [data-density="comfy"] { --gut: 44px; } /* theme-settings toggles (Aspetto → datastack) */ .ds-hide-ticker .ds-ticker-bar { display: none; } /* Each header-area template part renders wrapped in
. WordPress' root block-gap adds a margin-block-start between these wrappers (and before
), which pushed the nav down from the ticker. Zero it on the wrappers so the header zone is flush (content keeps its own top padding). */ .wp-site-blocks > header.wp-block-template-part, .wp-site-blocks > main { margin-top: 0 !important; margin-block-start: 0 !important; } .ds-no-sticky .ds-header { position: static; } /* dotted page background (Aspetto → datastack) — never on the home */ .ds-page-dots { background-image: radial-gradient(var(--hair-2) 0.7px, transparent 0.7px); background-size: 22px 22px; background-position: -1px -1px; } /* a dotgrid hero keeps its own pattern: give it a solid bg so the page dots don't show through and double up into a moiré */ .ds-page-dots .ds-hero.is-style-dotgrid { background-color: var(--bg); } .ds-hide-ad .ds-sec-ad, .ds-hide-archivio .ds-sec-archivio, .ds-hide-sezioni .ds-sec-sezioni, .ds-hide-newsletter .ds-sec-newsletter { display: none; } /* Single-post ad slots (inside the 720px article column): hidden unless the position is selected in the panel */ /* category/tag image in the archive header (panel: cat_img / cat_img_style). Sits inside the constrained header, so it never widens the container. */ .ds-term-media { margin: 0; line-height: 0; } .ds-term-media img { display: block; } /* thumbnail layout: title + subtitle on the left, round image on the right, vertically centred, inside the content width (never overflows or drops) */ /* image LEFT, title + subtitle tight on the right; image height tracks the text block so the header section never grows */ .ds-term-head { display: flex; align-items: stretch; gap: clamp(16px, 2.4vw, 28px); } .ds-term-head-text { min-width: 0; flex: 1 1 auto; align-self: center; } .ds-term-head-text > .wp-block-query-title, .ds-term-head-text > h1 { margin: 0; } .ds-term-dek { margin-top: 6px; color: var(--ink-2); font-size: 16px; line-height: 1.55; } .ds-term-dek > * { margin: 0; } .ds-term-media.is-thumb { flex: 0 0 auto; align-self: stretch; aspect-ratio: 1; height: auto; width: auto; max-height: 190px; min-height: 80px; border-radius: 50%; overflow: hidden; } .ds-term-media.is-thumb img { width: 100%; height: 100%; object-fit: cover; } .ds-term-media.is-banner { width: 100%; height: clamp(120px, 17vw, 200px); border-radius: 16px; overflow: hidden; margin: 0 0 18px; border: var(--hair-w) solid var(--hair); } .ds-term-media.is-banner img { width: 100%; height: 100%; object-fit: cover; } .ds-singlead { display: none; margin: 30px 0; } /* the top ad sits right under the hero image (body already has padding-top) */ .ds-singlead-top { margin-top: 4px; } .ds-show-singlead-top .ds-singlead-top, .ds-show-singlead-share .ds-singlead-share { display: block; } /* Home ad slots: hidden unless their position is selected in the panel */ .ds-adsec { display: none; } .ds-show-adsec-ultime .ds-adsec-ultime, .ds-show-adsec-trending .ds-adsec-trending, .ds-show-adsec-archivio .ds-adsec-archivio, .ds-show-adsec-sezioni .ds-adsec-sezioni { display: block; } /* "space available" CTA placeholder (shown when AdSense isn't configured) */ .ds-ad-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; padding: 26px 30px; border: var(--hair-w) dashed var(--hair-2); border-radius: 12px; background: var(--bg-2); text-decoration: none; transition: border-color 0.18s ease, background 0.18s ease; } .ds-ad-cta:hover { border-color: var(--accent); background: var(--accent-wash); } .ds-ad-cta-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); } .ds-ad-cta-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2vw, 24px); letter-spacing: -0.02em; color: var(--ink); } .ds-ad-cta-text { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; } .ds-ad-cta-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-ink); margin-top: 4px; } .ds-ad-cta:hover .ds-ad-cta-btn { color: var(--accent); } /* header layout: logo centered */ .ds-header-center .ds-header .ds-wrap { flex-wrap: wrap; justify-content: center; } .ds-header-center .ds-logo { order: 1; flex: 1 1 100%; justify-content: center; } .ds-header-center .ds-catnav { order: 2; justify-content: center; flex: 1 1 100%; } .ds-header-center .ds-navtoggle { order: 1; position: absolute; right: var(--gut); } @media (min-width: 761px) { .ds-header-center .ds-header .ds-wrap { height: auto; padding-top: 12px; padding-bottom: 12px; } } /* ========================================================= TOP BAR + TICKER ========================================================= */ .ds-statusbar { border-bottom: var(--hair-w) solid var(--hair); background: var(--bg); color: var(--ink-3); } .ds-statusbar .ds-wrap { display: flex; justify-content: space-between; align-items: center; height: 30px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; } .ds-statusbar .ds-status-right { display: flex; gap: 18px; align-items: center; } .ds-live { color: var(--accent-ink); } .ds-clock-s { color: var(--ink-2); } .ds-theme-toggle { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; background: none; border: 0; color: var(--ink-3); cursor: pointer; padding: 0; text-transform: uppercase; } .ds-theme-toggle:hover { color: var(--ink); } .ds-ticker-bar { border-bottom: var(--hair-w) solid var(--hair); background: var(--bg-2); overflow: hidden; display: flex; align-items: stretch; } .ds-ticker-tag { flex: none; display: flex; align-items: center; padding: 0 14px; background: var(--accent); color: #fff; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; z-index: 2; } .ds-ticker-mask { overflow: hidden; flex: 1; display: flex; align-items: center; } .ds-ticker { display: inline-flex; white-space: nowrap; gap: 22px; animation: ds-marquee 38s linear infinite; } .ds-ticker:hover, .ds-ticker:focus-within { animation-play-state: paused; } .ds-ticker span { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-2); padding: 8px 0; display: inline-flex; align-items: center; gap: 22px; } .ds-ticker span b { color: var(--accent); font-weight: 400; } .ds-ticker-item { text-decoration: none; color: inherit; display: inline-flex; transition: color 0.14s ease; } .ds-ticker-item:hover { color: var(--accent-ink); } .ds-ticker-item:hover span { color: var(--accent-ink); } @keyframes ds-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .ds-ticker { animation: none; } } /* ========================================================= HEADER / NAV ========================================================= */ .ds-header { border-bottom: var(--hair-w) solid var(--hair-2); background: var(--bg); position: sticky; top: 0; z-index: 40; } .ds-header .ds-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 64px; gap: 24px; padding-block: 8px; } .ds-logo { display: inline-flex; align-items: center; gap: 10px; flex: none; min-width: 0; } .ds-logo svg { display: block; flex: none; } .ds-logo .wp-block-site-title { margin: 0; font-size: var(--ds-name-size, 19px); line-height: 1.05; } .ds-logo .wp-block-site-title a { color: var(--ds-name-color, var(--ink)); text-decoration: none; font-size: inherit; } [data-theme="dark"] .ds-logo .wp-block-site-title a { color: var(--ds-name-color-dark, var(--ink)); } /* uploadable Site Logo (Settings / Site Editor) replaces the default SVG mark. Height is driven by the panel (--ds-logo-h); width stays auto so any logo — square or horizontal-with-wordmark — scales keeping its proportions. */ .ds-logo .wp-block-site-logo { display: flex; line-height: 0; width: auto !important; } .ds-logo .wp-block-site-logo img { height: var(--ds-logo-h, 28px); width: auto; display: block; max-width: min(320px, 52vw); } .ds-logo .ds-logo-mark { display: inline-flex; } .ds-logo .ds-logo-mark svg { height: var(--ds-logo-h, 21px); width: auto; max-width: 320px; display: block; } .ds-logo:has(.wp-block-site-logo img) .ds-logo-mark { display: none; } /* light/dark logo swap (panel: dark logo upload or assets/img/logo/logo-dark.svg). Both marks are inlined; CSS shows one per theme so the live toggle works. */ .ds-logo .ds-logo-mark .ds-mark { display: inline-flex; line-height: 0; } .ds-logo .ds-logo-mark .ds-mark-d { display: none; } [data-theme="dark"] .ds-logo .ds-logo-mark .ds-mark-l { display: none; } [data-theme="dark"] .ds-logo .ds-logo-mark .ds-mark-d { display: inline-flex; } /* hide the default site-name wordmark (for logos that already include the name) */ .ds-logo-notext .ds-logo .wp-block-site-title { display: none; } /* ========================================================================= TEXT EFFECTS (panel: fx_logo / fx_name / fx_secthead / fx_titles / fx_hero) Targets: name = site title · sec = section headers · title = archive/search titles · hero = single article title. Logo rainbow/gradient/outline are painted into the SVG server-side; glow/shadow on the logo are CSS filters. ====================================================================== */ /* --- RAINBOW (text) --- */ .ds-fx-name-rainbow .ds-logo .wp-block-site-title a, .ds-fx-sec-rainbow .ds-secthead h2, .ds-fx-title-rainbow .wp-block-query-title, .ds-fx-hero-rainbow .ds-hero-title { background-image: linear-gradient(90deg, #ff3b30, #ff9500, #ffcc00, #34c759, #007aff, #af52de, #ff3b30); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- GRADIENT accent (text) — colours from the panel (fx_grad_a/b) --- */ .ds-fx-name-gradient .ds-logo .wp-block-site-title a, .ds-fx-sec-gradient .ds-secthead h2, .ds-fx-title-gradient .wp-block-query-title, .ds-fx-hero-gradient .ds-hero-title { background-image: linear-gradient(90deg, var(--ds-fx-grad-a, var(--accent)), var(--ds-fx-grad-b, var(--accent-ink))); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* --- GLOW (text) --- */ .ds-fx-name-glow .ds-logo .wp-block-site-title a, .ds-fx-sec-glow .ds-secthead h2, .ds-fx-title-glow .wp-block-query-title, .ds-fx-hero-glow .ds-hero-title { text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 22px color-mix(in srgb, var(--accent) 45%, transparent); } /* --- OUTLINE (text) --- */ .ds-fx-name-outline .ds-logo .wp-block-site-title a, .ds-fx-sec-outline .ds-secthead h2, .ds-fx-title-outline .wp-block-query-title, .ds-fx-hero-outline .ds-hero-title { -webkit-text-stroke: 1.4px var(--accent); -webkit-text-fill-color: transparent; color: transparent; } /* --- SHADOW (text) --- */ .ds-fx-name-shadow .ds-logo .wp-block-site-title a, .ds-fx-sec-shadow .ds-secthead h2, .ds-fx-title-shadow .wp-block-query-title, .ds-fx-hero-shadow .ds-hero-title { text-shadow: 4px 4px 0 color-mix(in srgb, var(--accent) 60%, transparent); } /* --- LOGO glow / shadow (filters; gradient effects are in the SVG) --- */ .ds-fx-logo-glow .ds-logo-mark svg { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 75%, transparent)) drop-shadow(0 0 11px color-mix(in srgb, var(--accent) 45%, transparent)); } .ds-fx-logo-shadow .ds-logo-mark svg { filter: drop-shadow(3px 3px 0 rgba(0,0,0,.28)); } /* --- per-target animation for rainbow/gradient text --- */ .ds-fx-anim-name .ds-logo .wp-block-site-title a, .ds-fx-anim-sec .ds-secthead h2, .ds-fx-anim-title .wp-block-query-title, .ds-fx-anim-hero .ds-hero-title { animation: ds-fx-move 5s linear infinite; } @keyframes ds-fx-move { to { background-position: 200% 0; } } @media (prefers-reduced-motion: reduce) { .ds-fx-anim-name .ds-logo .wp-block-site-title a, .ds-fx-anim-sec .ds-secthead h2, .ds-fx-anim-title .wp-block-query-title, .ds-fx-anim-hero .ds-hero-title { animation: none; } } /* header layout: logo pinned left, category tabs fill the rest and align right */ .ds-header .ds-wrap { flex-wrap: nowrap; } .ds-catnav { display: flex; gap: 4px; flex-wrap: nowrap; flex: 1 1 auto; min-width: 0; justify-content: flex-end; overflow-x: auto; scrollbar-width: none; } .ds-catnav::-webkit-scrollbar { display: none; } /* mobile nav toggle (hamburger) — hidden on desktop */ .ds-navtoggle { display: none; flex: none; background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1; color: var(--ink); padding: 4px 6px; } .ds-navtoggle:hover { color: var(--accent-ink); } /* ---- HEADER NAVIGATION BLOCK (core wp:navigation, styled like the tabs) ---- */ .ds-header .ds-nav.wp-block-navigation { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; flex: 1 1 auto; justify-content: flex-end; } .ds-header .ds-nav .wp-block-navigation__container { gap: 2px; } .ds-header .ds-nav .wp-block-navigation-item__content { color: var(--ink-2); text-decoration: none; padding: 6px 10px; border-bottom: 2px solid transparent; } .ds-header .ds-nav .wp-block-navigation-item__content:hover, .ds-header .ds-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content { color: var(--ink); } .ds-header .ds-nav .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content { border-bottom-color: var(--accent); } /* dropdown / submenu */ .ds-header .ds-nav .wp-block-navigation__submenu-container { background: var(--surface); border: var(--hair-w) solid var(--hair); min-width: 200px; padding: 6px 0; box-shadow: 0 10px 30px oklch(0.2 0 0 / 0.08); } .ds-header .ds-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { display: block; padding: 8px 16px; border-bottom: 0; } .ds-header .ds-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--bg-2); color: var(--accent-ink); } .ds-header .ds-nav .wp-block-navigation__submenu-icon { padding: 0 2px; } /* mobile overlay */ .ds-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--bg); padding: 24px var(--gut); } .ds-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 16px; padding: 12px 0; border-bottom: var(--hair-w) solid var(--hair); } .ds-nav .wp-block-navigation__responsive-container-open, .ds-nav .wp-block-navigation__responsive-container-close { color: var(--ink); } .ds-catnav a { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; padding: 6px 10px; color: var(--ink-2); text-decoration: none; border-bottom: 2px solid transparent; } .ds-catnav a:hover { color: var(--ink); } .ds-catnav a.is-active { color: var(--ink); border-bottom-color: var(--accent); } /* ========================================================= SECTION HEAD ========================================================= */ .ds-secthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 22px; } .ds-secthead-l { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .ds-secthead h2 { font-size: 26px; letter-spacing: -0.02em; margin: 0; } .ds-secthead .ds-seeall { flex: none; white-space: nowrap; align-self: flex-end; } /* Home page: larger section titles + kickers (Ultime, Più letti, Archivio, Sezioni…) */ .home .ds-secthead { padding-bottom: 12px; margin-bottom: 26px; } .home .ds-secthead h2 { font-size: clamp(30px, 3.6vw, 42px); letter-spacing: -0.03em; } .home .ds-secthead .kicker { font-size: 13px; letter-spacing: 0.1em; } /* ========================================================= IMAGE PLACEHOLDER (diagonal stripes) behind featured images ========================================================= */ .wp-block-post-featured-image { position: relative; overflow: hidden; background-color: var(--bg-2); background-image: repeating-linear-gradient(45deg, var(--hair) 0, var(--hair) 1px, transparent 1px, transparent 9px); } .wp-block-post-featured-image img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ========================================================= ARTICLE CARDS (query loop → post-template.ds-cards) ========================================================= */ .ds-cards.wp-block-post-template { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: dscard; } .ds-cards.wp-block-post-template > li { counter-increment: dscard; position: relative; display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 18px; background: var(--surface); border: var(--hair-w) solid var(--hair); transition: border-color 0.16s ease, transform 0.16s ease; } .ds-cards.wp-block-post-template > li:hover { border-color: var(--ink); transform: translateY(-2px); } /* Image-optional cards. Instead of stretching an imageless card and leaving a void (or faking an image), treat it as an intentional TEXT card: equal height kept, content vertically centred, title enlarged, and the theme's dot-grid as a quiet texture. Scoped to the standard card grids (not the hero lead/stack, which are flex and intentionally image-free). Uses :has() — modern browsers. */ /* uniform, larger card title across cards — image or not, standard grid or hero stack — so the text reads consistently (cards already align to equal height). The lead keeps its display-size headline. */ .ds-cards.wp-block-post-template:not(.is-lead) .wp-block-post-title { font-size: 22px; line-height: 1.16; } /* imageless card = intentional text card: centred content + dot-grid texture (no fake image). Applies to the standard grids, the hero stack, and the lead. */ .ds-cards.wp-block-post-template:not(.is-lead) > li:not(:has(.wp-block-post-featured-image)), .ds-cards.is-lead.wp-block-post-template > li:not(:has(.wp-block-post-featured-image)) { justify-content: center; background-image: radial-gradient(var(--hair) 0.6px, transparent 0.6px); background-size: 16px 16px; } .ds-cards.wp-block-post-template:not(.is-lead):not(.is-stack) > li:not(:has(.wp-block-post-featured-image)) .ds-card-meta { margin-top: 18px; } /* HERO image-free cards: text stays LEFT-aligned, but the whole block is centred VERTICALLY (not split top/bottom). Slightly larger type. min-height gives real vertical space to centre into when the hero is short. Standalone (no :has()) so the always-imageless stack centres regardless. */ .ds-cards.is-stack.wp-block-post-template > li { justify-content: center; align-items: stretch; text-align: left; min-height: 120px; } .ds-cards.is-lead.wp-block-post-template > li:not(:has(.wp-block-post-featured-image)) { justify-content: center; align-items: stretch; text-align: left; min-height: 360px; } /* keep the meta with the block (kill margin-top:auto) so it centres too */ .ds-cards.is-stack.wp-block-post-template > li .ds-card-meta, .ds-cards.is-lead.wp-block-post-template > li:not(:has(.wp-block-post-featured-image)) .ds-card-meta { margin-top: 16px; } .ds-cards.is-stack.wp-block-post-template > li .wp-block-post-title { font-size: 25px; line-height: 1.18; } .ds-cards.is-stack.wp-block-post-template > li .wp-block-post-excerpt { font-size: 15.5px; line-height: 1.55; } /* image-less stack cards: enlarge the type so the card fills its height and doesn't look empty next to a sibling that has a thumbnail */ .ds-cards.is-stack.wp-block-post-template > li:not(:has(.wp-block-post-featured-image)) .wp-block-post-title { font-size: clamp(26px, 2.2vw, 32px); line-height: 1.14; } .ds-cards.is-stack.wp-block-post-template > li:not(:has(.wp-block-post-featured-image)) .wp-block-post-excerpt { font-size: 17px; line-height: 1.6; } .ds-cards.is-lead.wp-block-post-template > li:not(:has(.wp-block-post-featured-image)) .wp-block-post-excerpt { font-size: 18px; } .ds-cards > li::after { content: counter(dscard, decimal-leading-zero); position: absolute; top: 18px; right: 18px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; } .ds-cards .wp-block-post-featured-image { aspect-ratio: 3 / 2; border-radius: 0; } /* hero stack cards: when a post has a featured image, show it (top-aligned, compact) instead of the centred text-card treatment. Keep the subtitle. */ .ds-cards.is-stack.wp-block-post-template > li:has(.wp-block-post-featured-image) { justify-content: flex-start; gap: 9px; } /* smaller, cinematic thumbnail so image + subtitle fit the compact card */ .ds-cards.is-stack .wp-block-post-featured-image { aspect-ratio: 5 / 2; margin-bottom: 2px; } /* compact hero: shorter lead image + tighter stack cards so the section isn't too tall (the lead drives the height, the stack fills it) */ .ds-hero-grid .ds-cards.is-lead .wp-block-post-featured-image { aspect-ratio: 16 / 9; } .ds-cards.is-stack.wp-block-post-template > li:has(.wp-block-post-featured-image) { gap: 7px; } .ds-hero-grid .ds-cards.is-stack > li { padding: 16px 18px; } .ds-cards.is-stack.wp-block-post-template > li:has(.wp-block-post-featured-image) .wp-block-post-title { font-size: 19px; line-height: 1.18; } .ds-cards.is-stack.wp-block-post-template > li:has(.wp-block-post-featured-image) .wp-block-post-excerpt { font-size: 14px; line-height: 1.45; } /* lead WITH image: keep the meta with the content (not pushed to the bottom) so the whole block centres vertically inside the tall hero column */ .ds-cards.is-lead.wp-block-post-template > li:has(.wp-block-post-featured-image) .ds-card-meta { margin-top: 16px; } .ds-cards .wp-block-post-title { font-size: 18.5px; line-height: 1.12; margin: 0; } .ds-cards .wp-block-post-title a { color: var(--ink); text-decoration: none; } .ds-cards > li:hover .wp-block-post-title a { color: var(--accent-ink); } .ds-cards .wp-block-post-excerpt { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; } .ds-cards .wp-block-post-excerpt__more-text { display: none; } .ds-card-meta { margin-top: auto; display: flex; justify-content: flex-start; align-items: center; gap: 6px 12px; flex-wrap: wrap; padding-top: 10px; border-top: var(--hair-w) solid var(--hair); } .ds-card-meta > * { min-width: 0; } .ds-card-meta .wp-block-post-author-name { margin-right: auto; } /* meta pills: comment count + views, mono like the date */ .ds-meta-pill { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); white-space: nowrap; } .ds-article-meta .ds-meta-pill { font-size: 11px; } .ds-card-meta .wp-block-post-author-name, .ds-card-meta .wp-block-post-date { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; } .ds-card-meta a { color: inherit; text-decoration: none; } /* lead / large card variant */ .ds-cards.is-lead { grid-template-columns: 1fr; } .ds-cards.is-stack { grid-template-columns: 1fr; } .ds-cards.is-lead .wp-block-post-featured-image { aspect-ratio: 16 / 9; } .ds-cards.is-lead .wp-block-post-title { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.03em; line-height: 1.12; } /* --------------------------------------------------------- LIST VARIANT (block style «Lista — immagine a destra»). Per-loop dall'Editor (is-style-ds-list) o su tutti gli archivi dal pannello (Layout degli archivi). Righe orizzontali separate da hairline: testo a sinistra, miniatura a destra del titolo. --------------------------------------------------------- */ .ds-cards.wp-block-post-template.is-style-ds-list { display: flex; flex-direction: column; gap: 0; border-top: var(--hair-w) solid var(--hair); } .ds-cards.wp-block-post-template.is-style-ds-list > li { display: grid; grid-template-columns: minmax(0, 1fr) 200px; grid-template-areas: "terms img" "title img" "excerpt img" "meta img"; align-content: start; align-items: start; column-gap: 24px; row-gap: 8px; padding: 22px 0; background: var(--bg); background-image: none; border: 0; border-bottom: var(--hair-w) solid var(--hair); } .ds-cards.wp-block-post-template.is-style-ds-list > li:hover { border-color: var(--hair); transform: none; } .ds-cards.wp-block-post-template.is-style-ds-list > li::after { display: none; } .ds-cards.is-style-ds-list > li > .wp-block-post-terms { grid-area: terms; } .ds-cards.is-style-ds-list > li > .wp-block-post-title { grid-area: title; } .ds-cards.is-style-ds-list > li > .wp-block-post-excerpt { grid-area: excerpt; } .ds-cards.is-style-ds-list > li > .ds-card-meta { grid-area: meta; margin-top: 2px; border-top: 0; padding-top: 0; } .ds-cards.is-style-ds-list > li > .wp-block-post-featured-image { grid-area: img; width: 100%; aspect-ratio: 3 / 2; margin: 0; align-self: start; } /* riga senza immagine: il testo occupa tutta la larghezza (niente colonna vuota, niente trama a puntini della text-card) */ .ds-cards.wp-block-post-template.is-style-ds-list > li:not(:has(.wp-block-post-featured-image)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "terms" "title" "excerpt" "meta"; justify-content: start; } @media (max-width: 700px) { .ds-cards.wp-block-post-template.is-style-ds-list > li { grid-template-columns: minmax(0, 1fr) 112px; column-gap: 14px; row-gap: 6px; padding: 16px 0; } .ds-cards.is-style-ds-list > li > .wp-block-post-featured-image { aspect-ratio: 1 / 1; } .ds-cards.is-style-ds-list > li > .wp-block-post-excerpt { display: none; } .ds-cards.wp-block-post-template.is-style-ds-list:not(.is-lead) .wp-block-post-title { font-size: 18px; } } /* article dek (subtitle) */ .ds-dek { font-family: var(--font-body); font-size: 19px; color: var(--ink-2); line-height: 1.5; } /* ========================================================= DENSE LIST ROWS (query loop → post-template.ds-rows) ========================================================= */ .ds-rows.wp-block-post-template { list-style: none; margin: 0; padding: 0; border-top: var(--hair-w) solid var(--hair); counter-reset: dsrow; } .ds-rows.wp-block-post-template > li { counter-increment: dsrow; display: grid; grid-template-columns: 56px 110px 1fr auto; gap: 18px; align-items: center; padding: 16px 8px; border-bottom: var(--hair-w) solid var(--hair); transition: background 0.14s ease; } .ds-rows.wp-block-post-template > li:hover { background: var(--bg-2); } .ds-rows > li::before { content: counter(dsrow, decimal-leading-zero); font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .ds-rows .wp-block-post-terms { grid-column: 2; min-width: 0; align-self: center; } .ds-rows .ds-row-main { grid-column: 3; min-width: 0; } .ds-rows .wp-block-post-title { font-size: 17px; letter-spacing: -0.01em; margin: 0; } .ds-rows .wp-block-post-title a { color: var(--ink); text-decoration: none; } .ds-rows .wp-block-post-excerpt { margin: 4px 0 0; color: var(--ink-3); font-size: 13.5px; } .ds-rows .wp-block-post-excerpt__more-text { display: none; } .ds-rows .ds-row-end { grid-column: 4; display: flex; gap: 16px; align-items: center; white-space: nowrap; } .ds-rows .wp-block-post-date { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); } .ds-rows .ds-row-arrow { font-family: var(--font-mono); color: var(--accent-ink); } /* ========================================================= ARTICLE LIST (author page — thumbnail + body rows, TechCrunch-style) ========================================================= */ .ds-list.wp-block-post-template { list-style: none; margin: 0; padding: 0; } .ds-list.wp-block-post-template > li { display: grid; grid-template-columns: 220px 1fr; gap: 24px; align-items: start; padding: 26px 0; border-bottom: var(--hair-w) solid var(--hair); } .ds-list.wp-block-post-template > li:first-child { padding-top: 6px; } .ds-list .ds-list-thumb { margin: 0; } .ds-list .ds-list-thumb.wp-block-post-featured-image { aspect-ratio: 16 / 10; border-radius: 0; } .ds-list .ds-list-thumb img { width: 100%; height: 100%; object-fit: cover; } .ds-list .ds-list-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; } .ds-list .ds-list-body .wp-block-post-title { font-size: 22px; line-height: 1.2; letter-spacing: -0.02em; margin: 0; } .ds-list .ds-list-body .wp-block-post-title a { color: var(--ink); text-decoration: none; } .ds-list .ds-list-body .wp-block-post-title a:hover { color: var(--accent-ink); } .ds-list .ds-list-body .wp-block-post-excerpt { color: var(--ink-2); font-size: 15px; line-height: 1.55; margin: 0; } .ds-list .ds-list-body .wp-block-post-excerpt__more-text { display: none; } .ds-list .ds-list-body .ds-card-meta { margin-top: 4px; border-top: 0; padding-top: 0; } /* no featured image → the body spans the full width (no empty slot, no collapse) */ .ds-list.wp-block-post-template > li:not(:has(.ds-list-thumb)) { grid-template-columns: 1fr; } @media (max-width: 680px) { .ds-list.wp-block-post-template > li { grid-template-columns: 1fr; } .ds-list .ds-list-thumb.wp-block-post-featured-image { aspect-ratio: 16 / 9; } } /* ========================================================= HERO (home) ========================================================= */ .ds-hero { border-bottom: var(--hair-w) solid var(--hair-2); } .ds-hero-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .ds-hero-head h1 { font-size: clamp(34px, 5vw, 60px); letter-spacing: -0.04em; max-width: 760px; margin: 0; } .ds-hero-head h1 .accent { color: var(--accent); } /* hero highlight — default: clean accent-coloured text (no background) */ .ds-hero-head h1 mark, .ds-hero-head h1 .has-accent-color { background: transparent; color: var(--accent); } /* hero highlight — "evidenziato": on-brand accent background marker */ .ds-hero-mark .ds-hero-head h1 mark, .ds-hero-mark .ds-hero-head h1 .has-accent-color { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--ink); padding: 0.02em 0.18em; border-radius: 5px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .ds-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--hair-w); border: var(--hair-w) solid var(--hair-2); background: var(--hair-2); } .ds-hero-grid .ds-lead-cell { background: var(--surface); padding: 28px; display: flex; flex-direction: column; gap: 16px; } .ds-hero-grid .ds-lead-stack { display: flex; flex-direction: column; gap: var(--hair-w); background: var(--hair-2); } .ds-hero-grid .ds-lead-stack .ds-lead-cell { flex: 1; padding: 24px; } @media (max-width: 980px) { .ds-hero-grid { grid-template-columns: 1fr; } } /* hero cards equal-height alignment — kill grey bleed from grid bg */ .ds-hero-grid.wp-block-columns { align-items: stretch; gap: var(--hair-w) !important; /* override WP column gap */ } .ds-hero-grid > .wp-block-column { display: flex; flex-direction: column; background: var(--surface); padding: 0 !important; margin: 0 !important; } .ds-hero-grid > .wp-block-column > .wp-block-query { flex: 1; display: flex; flex-direction: column; } /* the hero-right column wraps its content in .ds-hero-alt groups (swap feature): keep the featured stack filling the column height so it lines up with the lead */ .ds-hero-grid > .wp-block-column > .ds-hero-alt { margin: 0; padding: 0; } .ds-hero-grid > .wp-block-column > .ds-hero-alt-stack, .ds-hero-grid > .wp-block-column > .ds-hero-alt-stack > .wp-block-query { flex: 1; display: flex; flex-direction: column; } .ds-cards.is-stack.wp-block-post-template { display: flex; flex-direction: column; flex: 1; gap: var(--hair-w); background: var(--hair-2); } /* margin:0 kills WP's flow-layout margin-block that would otherwise show the grey container bg as a thick band between the stacked cards. flex:1 0 auto = grow to fill the column (matches the lead height, no grey gap) but NEVER shrink below content, so cards stay dynamic and text is never cut. A card with an image is naturally taller; an image-less one takes less. */ .ds-cards.is-stack.wp-block-post-template > li { flex: 1 0 auto; margin: 0; } /* lead card must also fill its column height so no grey bg leaks below it */ .ds-cards.is-lead.wp-block-post-template { flex: 1; display: flex; flex-direction: column; } .ds-cards.is-lead.wp-block-post-template > li { flex: 1; } /* hero cards: seamless hairline grid. Drop per-card borders and the hover lift so the only grey is the 1px gaps between equal-height cells. */ .ds-hero-grid .ds-cards.wp-block-post-template > li { border: 0; } .ds-hero-grid .ds-cards.wp-block-post-template > li:hover { transform: none; } /* lead card: larger type to match the generous space it occupies */ /* lead fills the hero row height (flex:1); centre its content vertically so the left article stays centred when the right column (e.g. an 8-item "Più letti" list) makes the row taller than the lead card */ .ds-cards.is-lead > li { padding: 26px; gap: 16px; justify-content: center; } .ds-cards.is-lead .wp-block-post-excerpt { font-size: 18.5px; line-height: 1.7; color: var(--ink-2); } .ds-cards.is-lead .wp-block-post-terms.is-style-cat { font-size: 11.5px; } /* hero: bigger category pill + index number, kept proportional */ .ds-hero-grid .ds-cards .wp-block-post-terms.is-style-cat { font-size: 14px; padding: 5px 12px; } .ds-hero-grid .ds-cards.is-lead .wp-block-post-terms.is-style-cat { font-size: 16px; padding: 6px 14px; } .ds-hero-grid .ds-cards > li::after { font-size: 17px; top: 20px; right: 20px; } .ds-hero-grid .ds-cards.is-lead > li::after { font-size: 22px; top: 26px; right: 26px; } .ds-cards.is-lead .ds-card-meta .wp-block-post-author-name, .ds-cards.is-lead .ds-card-meta .wp-block-post-date { font-size: 12px; } /* hero "no featured post" fallback */ .ds-hero-grid .wp-block-query-no-results { padding: 26px; border: 0; color: var(--ink-3); margin: 0; } /* ========================================================= CATEGORY TILES (home strip) → pattern output ========================================================= */ .ds-cattiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: var(--hair-w) solid var(--hair); border-left: var(--hair-w) solid var(--hair); } .ds-cattile { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: transparent; text-decoration: none; color: inherit; border-right: var(--hair-w) solid var(--hair); border-bottom: var(--hair-w) solid var(--hair); transition: background 0.16s ease; } .ds-cattile:hover { background: var(--bg-2); } .ds-cattile-top { display: flex; justify-content: space-between; } .ds-cattile-name { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; } .ds-cattile-desc { color: var(--ink-2); font-size: 13.5px; } @media (max-width: 980px) { .ds-cattiles { grid-template-columns: repeat(2, 1fr); } } /* ========================================================= NEWSLETTER ========================================================= */ .ds-newsletter { border: var(--hair-w) solid var(--ink); padding: 48px 40px; display: flex; gap: 40px 48px; justify-content: center; flex-wrap: wrap; align-items: center; } .ds-newsletter > .wp-block-group { max-width: 520px !important; } .ds-newsletter h2 { font-size: clamp(30px, 3.6vw, 42px); letter-spacing: -0.03em; line-height: 1.08; margin: 10px 0 0; } .ds-newsletter .kicker.accent { color: var(--accent-ink); } .ds-newsletter .ds-nl-copy { max-width: 460px; } .ds-newsletter .ds-nl-form { max-width: 480px; min-width: 320px; } /* anchor scroll offset (was an inline scroll-margin that broke block validation) */ .ds-sec-newsletter { scroll-margin-top: 80px; } /* ---- NEWSLETTER SIGNUP FORM (datastack-newsletter plugin) ---- */ .ds-nl-form { display: flex; flex-direction: column; gap: 12px; min-width: 320px; flex: 1; max-width: 440px; } .ds-nl-row { display: flex; gap: 0; align-items: stretch; } .ds-nl-input { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.01em; background: var(--surface); color: var(--ink); border: var(--hair-w) solid var(--ink); border-right: 0; padding: 17px 18px; border-radius: var(--radius) 0 0 var(--radius); transition: border-color 0.14s ease; } .ds-nl-input:focus { outline: none; border-color: var(--accent); } .ds-nl-input::placeholder { color: var(--ink-3); } .ds-nl-btn { flex: none; font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; white-space: nowrap; background: var(--ink); color: var(--bg); border: var(--hair-w) solid var(--ink); padding: 17px 26px; border-radius: 0 var(--radius) var(--radius) 0; transition: background 0.14s ease, border-color 0.14s ease; } .ds-nl-btn:hover { background: var(--accent); border-color: var(--accent); } .ds-nl-btn:disabled { opacity: 0.6; cursor: default; } .ds-nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .ds-nl-msg { margin: 0; min-height: 1.2em; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-3); } .ds-nl-msg.is-ok { color: var(--accent-ink); } .ds-nl-msg.is-error { color: var(--accent); } /* ========================================================= SINGLE / ARTICLE ========================================================= */ .ds-progress { position: sticky; top: 64px; z-index: 30; height: 2px; background: transparent; } .ds-progress > i { display: block; height: 2px; width: 0; background: var(--accent); transition: width 0.08s linear; } .ds-breadcrumb { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 4px 8px; text-transform: lowercase; min-width: 0; } .ds-breadcrumb .wp-block-post-terms { display: inline; } .ds-breadcrumb a { color: var(--ink-3); text-decoration: none; } .ds-breadcrumb .wp-block-post-terms a { color: var(--accent-ink); } .ds-article-meta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding-top: 18px; border-top: var(--hair-w) solid var(--hair); } .ds-article-meta .wp-block-avatar { flex: none; } .ds-article-meta .wp-block-avatar img { width: 34px; height: 34px; border: var(--hair-w) solid var(--accent); border-radius: 50%; } .ds-article-meta .wp-block-post-author-name { font-size: 14px; } .ds-article-meta .wp-block-post-time-to-read { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; } .ds-article-meta .wp-block-post-date { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-left: auto; } /* ========================================================= AUTHOR ARCHIVE HEADER ========================================================= */ .ds-author-head { display: flex; gap: 32px; align-items: center; } .ds-author-avatar { flex: none; } .ds-author-avatar img { width: 150px; height: 150px; display: block; border-radius: 50%; border: 2px solid var(--accent); } .ds-author-meta { flex: 1; min-width: 0; } .ds-author-name { font-size: clamp(36px, 5.5vw, 58px); letter-spacing: -0.035em; line-height: 1.02; margin: 8px 0 0; } .ds-author-bio { color: var(--ink-2); font-size: 19px; line-height: 1.6; max-width: 720px; margin: 16px 0 0; } @media (max-width: 720px) { .ds-author-head { gap: 18px; } .ds-author-avatar img { width: 104px; height: 104px; } } .ds-author-social { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .ds-author-social a { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2); text-decoration: none; border: var(--hair-w) solid var(--hair-2); padding: 5px 10px; transition: border-color 0.14s ease, color 0.14s ease; } .ds-author-social a:hover { border-color: var(--accent); color: var(--accent-ink); } @media (max-width: 600px) { .ds-author-head { flex-direction: column; gap: 14px; } } /* drop cap (Aspetto → datastack) — big initial on the first article paragraph */ .ds-dropcap .ds-body > p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-weight: 600; font-size: 3.4em; line-height: 0.78; margin: 4px 10px 0 0; color: var(--accent-ink); } /* ad slot injected every N items in lists — neutralise card/row li styling */ li.ds-listad { grid-column: 1 / -1; list-style: none; display: block; margin: 22px 0; padding: 0; border: 0; background: none; } li.ds-listad::before, li.ds-listad::after { content: none !important; } li.ds-listad:hover { transform: none; background: none; } /* article body rhythm */ .ds-body { font-size: 17.5px; } .ds-body p { line-height: 1.72; margin: 0 0 22px; } .ds-body h2 { font-size: 25px; letter-spacing: -0.02em; margin: 38px 0 14px; } .ds-body h3 { font-size: 20px; margin: 30px 0 12px; } .ds-body a { color: var(--accent-ink); border-bottom: 1px solid var(--hair-2); } .ds-body blockquote { margin: 30px 0; padding-left: 22px; border-left: 3px solid var(--accent); } .ds-body blockquote p { font-family: var(--font-display); font-size: 24px; line-height: 1.3; letter-spacing: -0.02em; } .ds-body blockquote cite { font-family: var(--font-mono); color: var(--ink-3); font-style: normal; font-size: 12px; } .ds-body ul, .ds-body ol { padding-left: 1.1em; } .ds-body li { margin: 0 0 10px; line-height: 1.6; } .ds-body img { border-radius: 0; } /* generous, consistent rhythm around rich blocks in article bodies */ .ds-body .wp-block-code, .ds-body .wp-block-preformatted, .ds-body .wp-block-table, .ds-body .wp-block-image, .ds-body figure, .ds-body .wp-block-pullquote, .ds-body .wp-block-details, .ds-body .wp-block-quote { margin-top: 30px; margin-bottom: 30px; } .ds-body .is-style-ds-check { margin: 22px 0; } .ds-tags { display: flex; gap: 8px; flex-wrap: wrap; } /* the tags live inside one post-terms block as inline links; make THAT a flex-wrap row so each pill is a flex item with proper row + column gap (no overlap when a long tag wraps to the next line) */ .ds-tags .wp-block-post-terms { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; } .ds-tags .wp-block-post-terms__separator { display: none; } .ds-tags .wp-block-post-terms a { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; max-width: 100%; font-family: var(--font-mono); font-size: 11px; line-height: 1.2; letter-spacing: 0.04em; color: var(--ink-2); border: var(--hair-w) solid var(--hair-2); border-radius: var(--radius); padding: 5px 9px; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; } .ds-tags .wp-block-post-terms a:hover { border-color: var(--accent); color: var(--accent-ink); } .ds-tags .wp-block-post-terms a::before { content: "#"; color: var(--ink-3); } /* ---- SHARE ---- */ .ds-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 32px 0; padding: 16px 0; border-top: var(--hair-w) solid var(--hair); border-bottom: var(--hair-w) solid var(--hair); } .ds-share-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; } .ds-share-link, .ds-share-copy { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-2); text-decoration: none; background: none; cursor: pointer; border: var(--hair-w) solid var(--hair-2); padding: 6px 11px; border-radius: var(--radius); transition: border-color 0.14s ease, color 0.14s ease; } .ds-share-link:hover, .ds-share-copy:hover { border-color: var(--accent); color: var(--accent-ink); } /* ---- AUTHOR BOX (end of article) ---- */ .ds-authorbox { display: flex; gap: 24px; align-items: center; margin: 40px 0; padding: 26px 28px; border-radius: 12px; border: var(--hair-w) solid color-mix(in srgb, var(--accent) 22%, var(--hair)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 70%), color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(4px); } .ds-authorbox-avatar { flex: none; } .ds-authorbox-avatar img { width: 96px; height: 96px; display: block; border-radius: 50%; border: 2px solid var(--accent); } .ds-authorbox-meta { flex: 1; min-width: 0; } .ds-authorbox-name { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; display: inline-block; margin-top: 2px; } .ds-authorbox-name:hover { color: var(--accent-ink); } .ds-authorbox-bio { color: var(--ink-2); font-size: 14.5px; line-height: 1.6; margin: 8px 0 0; } .ds-authorbox .ds-author-social { margin-top: 12px; } @media (max-width: 600px) { .ds-authorbox { flex-direction: column; gap: 14px; } } /* ---- POST NAVIGATION (prev / next) ---- */ .ds-postnav { margin: 40px 0; gap: 16px; } .ds-postnav .wp-block-post-navigation-link { flex: 1 1 0; min-width: 0; } .ds-postnav .wp-block-post-navigation-link:last-child { text-align: right; } /* ---- COMMENTS — Reddit-style: compact, username-first, threaded with a collapsible reply line at every nesting level. ---- */ .ds-comments { margin-top: 52px; padding-top: 30px; border-top: 2px solid var(--ink); } .ds-comments .wp-block-comments-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 16px; font-size: 22px; } .ds-comments .wp-block-comment-template { list-style: none; margin: 0; padding: 0; } .ds-comments .wp-block-comment-template > li { padding: 9px 0 0; border: 0; } .ds-comment { gap: 10px; align-items: flex-start; border: 0; padding: 0; } .ds-comment > .wp-block-avatar { flex: none; } .ds-comment .wp-block-avatar img { width: 28px; height: 28px; border-radius: 50%; border: var(--hair-w) solid var(--hair); } /* meta line: [–] toggle · username · time · (N risposte quando compresso) */ .ds-comment-meta { gap: 4px 8px; align-items: center; margin-bottom: 3px; flex-wrap: wrap; } .ds-comment-collapse { flex: none; width: 18px; height: 18px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--ink-3); font-family: var(--font-mono); font-size: 12px; line-height: 1; } .ds-comment-collapse:hover { color: var(--accent); } .ds-comments .wp-block-comment-author-name, .ds-comments .wp-block-comment-author-name a { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: var(--ink); text-decoration: none; } .ds-comments .wp-block-comment-author-name a:hover { color: var(--accent-ink); } .ds-comments .wp-block-comment-date { display: inline-flex; align-items: center; } .ds-comments .wp-block-comment-date::before { content: "·"; margin-right: 8px; color: var(--ink-3); } /* style the container/time/link the same, so the relative label ("10 ore fa"), which the filter leaves as bare text inside