/* Theme Name: Darronsky Shhh Child Theme URI: https://darronsky.com Description: Child theme di Shhh personalizzato per il portfolio fotografico Darronsky (Light Explorer). Author: Andrea Darra Author URI: https://darronsky.com Template: shhh Version: 3.3.0 Text Domain: darronsky-shhh-child */ :root { --darronsky-side-margin: 2.5rem; --darronsky-side-margin-mobile: 1.25rem; --darronsky-content-width: 1040px; } /* Box centrato condiviso: stessa identica larghezza e margini per header, contenuto principale e footer, cosi' sono SEMPRE allineati a qualunque larghezza di schermo. */ .darronsky-align-wrap { max-width: calc(var(--darronsky-content-width) + (2 * var(--darronsky-side-margin))) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--darronsky-side-margin) !important; padding-right: var(--darronsky-side-margin) !important; box-sizing: border-box; } @media (max-width: 600px) { .darronsky-align-wrap { padding-left: var(--darronsky-side-margin-mobile) !important; padding-right: var(--darronsky-side-margin-mobile) !important; } } body { background-color: var(--wp--preset--color--background, #0a0a0a); } /* ========================================================== Header: barra in alto normale (non overlay), titolo minuscolo a sinistra, menu "archive | about" a destra. ========================================================== */ .darronsky-site-header { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem var(--darronsky-side-margin); max-width: var(--darronsky-content-width); margin: 0 auto; box-sizing: content-box; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background-color: var(--wp--preset--color--background, #0a0a0a); transition: background-color 0.2s ease; } .darronsky-header-right { gap: 1.25rem !important; } .darronsky-theme-toggle { background: none; border: none; padding: 0; margin: 0 0 0 1.1rem; cursor: pointer; font-size: 0.7rem; line-height: 1; color: var(--wp--preset--color--foreground, #f2f2f2); opacity: 0.4; transition: opacity 0.2s ease; vertical-align: middle; } .darronsky-theme-toggle:hover { opacity: 1; } /* ========================================================== Tema chiaro: inverte le variabili colore condivise da tutto il sito, attivato via JS aggiungendo questa classe all'elemento . ========================================================== */ html.darronsky-light-mode { --wp--preset--color--background: #f6f6f4; --wp--preset--color--foreground: #111111; --wp--preset--color--accent: #6a6a6a; } html.darronsky-light-mode body, html.darronsky-light-mode .darronsky-site-header { transition: background-color 0.2s ease, color 0.2s ease; } body { padding-top: 52px; } @media (max-width: 600px) { body { padding-top: 48px; } } .darronsky-site-title, .darronsky-site-title a { margin: 0; font-size: 1.5rem; text-transform: lowercase; color: var(--wp--preset--color--foreground, #f2f2f2); text-decoration: none; } .darronsky-site-nav { font-size: 1rem; text-transform: lowercase; } .darronsky-site-nav .wp-block-navigation__container, .darronsky-site-nav ul { display: flex; align-items: center; gap: 0 !important; } .darronsky-site-nav .wp-block-navigation-item { position: relative; margin: 0 !important; } .darronsky-site-nav .wp-block-navigation-item + .wp-block-navigation-item { margin-left: 1.5rem !important; } .darronsky-site-nav .wp-block-navigation-item + .wp-block-navigation-item::before { content: "|"; position: absolute; left: -0.75rem; color: var(--wp--preset--color--accent, #8a8a8a); } .darronsky-site-nav a { color: var(--wp--preset--color--foreground, #f2f2f2); text-decoration: none; } @media (max-width: 600px) { .darronsky-site-header { padding: 1.25rem var(--darronsky-side-margin-mobile); } } /* ========================================================== Feed: colonna centrale, foto con proporzioni contenute (non piu' a tutto schermo), data + titolo + estratto + link. ========================================================== */ .darronsky-page-wrap { padding: 2rem var(--darronsky-side-margin) 4rem; max-width: var(--darronsky-content-width); margin: 0 auto; box-sizing: content-box; } .darronsky-feed { width: 100%; } .darronsky-feed .wp-block-post-template { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; grid-auto-rows: 1px; column-gap: 1.75rem !important; align-items: start !important; } .darronsky-feed-item { margin: 0 !important; list-style: none; } .darronsky-feed .wp-block-post-template > li { margin-top: 0 !important; margin-block-start: 0 !important; } .darronsky-feed-item figure, .darronsky-feed-item > * { margin-top: 0 !important; } .darronsky-feed-image, .darronsky-feed-image.wp-block-post-featured-image { width: 100%; overflow: hidden; margin: 0 0 1rem !important; } .darronsky-feed-image img { width: 100%; height: auto; display: block; } @media (max-width: 782px) { .darronsky-feed .wp-block-post-template { grid-template-columns: repeat(1, 1fr) !important; } } .darronsky-feed-caption { display: flex; flex-direction: column; align-items: flex-start !important; text-align: left !important; gap: 0.15rem; } .darronsky-feed-caption > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } .darronsky-feed-date, p.darronsky-feed-date { font-size: 0.85rem; font-weight: 700; text-align: left !important; color: var(--wp--preset--color--foreground, #f2f2f2); } .darronsky-feed-title, h2.darronsky-feed-title { margin: 0; text-align: left !important; } .darronsky-feed-title::before { content: none !important; } .darronsky-feed-title a { text-decoration: none; font-size: 1.75rem; color: var(--wp--preset--color--foreground, #f2f2f2); } .darronsky-feed-excerpt-wrap { max-width: 60ch; text-align: left !important; margin: 0 !important; } .darronsky-feed-excerpt { display: inline; margin: 0; text-align: left !important; font-size: 0.95rem; line-height: 1.5; color: var(--wp--preset--color--accent, #a8a8a8); } .darronsky-feed-readmore { display: inline !important; margin: -0.25rem 0 0 !important; padding: 0 !important; text-align: left !important; width: auto !important; font-size: 0.88rem !important; font-weight: 500 !important; letter-spacing: 0.03em !important; text-transform: uppercase !important; color: var(--wp--preset--color--foreground, #f2f2f2) !important; text-decoration: none !important; } .darronsky-feed-readmore::before { content: " "; } /* "load more" centrato in fondo */ .darronsky-feed-pagination { display: flex; justify-content: center; padding: 2rem 0 0; } .darronsky-feed-pagination a { text-transform: lowercase; font-size: 0.95rem; color: var(--wp--preset--color--foreground, #f2f2f2); text-decoration: none; } /* ========================================================== Pagina singolo post: stessa impostazione della home (data sopra il titolo, niente asterisco), corpo del testo piu' piccolo per la lettura lunga. ========================================================== */ .darronsky-single-post { padding: 1rem 0 3rem; } .darronsky-single-image { width: 100%; margin: 0 0 1.25rem; overflow: hidden; } .darronsky-single-image img { width: 100%; height: auto; display: block; } .darronsky-single-caption { margin: 0 0 2rem; text-align: left !important; } .darronsky-single-caption > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; text-align: left !important; } .darronsky-single-date { display: block; font-size: 0.85rem; font-weight: 700; margin-bottom: 0.35rem; color: var(--wp--preset--color--foreground, #f2f2f2); } .darronsky-single-title { margin: 0; font-size: 2rem; } .darronsky-single-title::before { content: none !important; } .darronsky-single-content { font-size: 0.95rem; line-height: 1.7; color: var(--wp--preset--color--accent, #c9c9c9); padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; max-width: none !important; } .darronsky-single-content p { margin: 0 0 1.25rem !important; padding-left: 0 !important; text-align: left !important; } .darronsky-single-content.is-layout-constrained > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } .darronsky-single-taxonomy { margin-top: 1.5rem !important; padding-top: 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.12); text-align: left !important; } .darronsky-single-categories, .darronsky-single-tags { display: block; font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--wp--preset--color--accent, #8a8a8a); margin: 0 0 0.4rem !important; } .darronsky-single-nav-prev, .darronsky-single-nav-next { display: block; margin: 0.4rem 0 0 !important; text-align: left !important; font-size: 0.8rem !important; letter-spacing: 0.03em; color: var(--wp--preset--color--accent, #8a8a8a); } .darronsky-single-nav-prev a, .darronsky-single-nav-next a { font-weight: 700; color: var(--wp--preset--color--foreground, #f2f2f2); text-decoration: none; } .darronsky-single-nav-prev a:hover, .darronsky-single-nav-next a:hover { text-decoration: underline; } .darronsky-single-nav-prev .wp-block-post-navigation-link__arrow-previous, .darronsky-single-nav-next .wp-block-post-navigation-link__arrow-next { color: var(--wp--preset--color--accent, #8a8a8a); } .darronsky-single-categories a, .darronsky-single-tags a { color: var(--wp--preset--color--foreground, #f2f2f2); text-decoration: none; } .darronsky-single-categories a:hover, .darronsky-single-tags a:hover { text-decoration: underline; } /* ========================================================== Pagina Archivio: griglia miniature a sinistra, sidebar calendario/categorie/tag a destra. ========================================================== */ .darronsky-archive-columns { padding: 1rem 0 3rem; gap: 3rem !important; } .darronsky-archive-grid { display: block; width: 100%; } .darronsky-archive-grid .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; align-items: start !important; gap: 1.5rem !important; list-style: none; margin: 0; padding: 0; } .darronsky-archive-item { display: flex; flex-direction: column; gap: 0.35rem; align-self: start; } .darronsky-archive-thumb { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; margin: 0; } .darronsky-archive-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .darronsky-archive-date { font-size: 0.75rem; color: var(--wp--preset--color--accent, #8a8a8a); margin: 0.25rem 0 0; } .darronsky-archive-title { margin: 0; font-size: 0.95rem; } .darronsky-archive-title a { color: var(--wp--preset--color--foreground, #f2f2f2); text-decoration: none; } .darronsky-archive-title::before { content: none !important; } .darronsky-archive-pagination { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 2rem; } .darronsky-archive-pagination a { text-transform: lowercase; font-size: 0.95rem; color: var(--wp--preset--color--foreground, #f2f2f2); text-decoration: none; } .darronsky-archive-sidebar { border-left: 1px solid rgba(255, 255, 255, 0.12); padding-left: 2rem !important; } .darronsky-sidebar-block { margin-bottom: 2rem; } .darronsky-sidebar-heading { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wp--preset--color--accent, #8a8a8a); margin: 0 0 0.75rem; font-weight: 700; } .darronsky-sidebar-calendar table { width: 100%; font-size: 0.8rem; border-collapse: collapse; } .darronsky-sidebar-calendar caption { text-align: left; font-size: 0.8rem; color: var(--wp--preset--color--foreground, #f2f2f2); margin-bottom: 0.5rem; } .darronsky-sidebar-calendar th, .darronsky-sidebar-calendar td { text-align: center; padding: 0.25rem; color: var(--wp--preset--color--accent, #8a8a8a); } .darronsky-sidebar-calendar td#today { color: var(--wp--preset--color--foreground, #f2f2f2); font-weight: 700; } .darronsky-sidebar-calendar a { color: var(--wp--preset--color--foreground, #f2f2f2); } .darronsky-sidebar-calendar .wp-calendar-nav { display: flex; justify-content: space-between; margin-top: 0.6rem; font-size: 0.75rem; text-transform: lowercase; } .darronsky-sidebar-calendar .wp-calendar-nav a { color: var(--wp--preset--color--accent, #8a8a8a); text-decoration: none; } .darronsky-sidebar-calendar .wp-calendar-nav a:hover { color: var(--wp--preset--color--foreground, #f2f2f2); text-decoration: underline; } .darronsky-sidebar-calendar .wp-calendar-nav-next { text-align: right; } .darronsky-sidebar-categories { padding-left: 0 !important; margin-left: 0 !important; } .darronsky-sidebar-categories ul, .darronsky-sidebar-categories li { list-style: none; margin: 0 0 0.4rem; margin-inline-start: 0 !important; padding: 0 !important; padding-inline-start: 0 !important; font-size: 0.75rem !important; color: var(--wp--preset--color--accent, #8a8a8a); } .darronsky-sidebar-categories a { font-size: 0.85rem !important; color: var(--wp--preset--color--foreground, #f2f2f2); text-decoration: none; } .darronsky-sidebar-categories a:hover { text-decoration: underline; } .darronsky-sidebar-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .darronsky-sidebar-tags a { font-size: 0.8rem !important; color: var(--wp--preset--color--accent, #8a8a8a) !important; text-decoration: none; } .darronsky-sidebar-tags a:hover { color: var(--wp--preset--color--foreground, #f2f2f2) !important; } @media (max-width: 782px) { .darronsky-archive-columns { flex-direction: column; } .darronsky-archive-main, .darronsky-archive-sidebar { flex-basis: 100% !important; } .darronsky-archive-sidebar { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.12); padding-left: 0 !important; padding-top: 1.5rem; margin-top: 1rem; } .darronsky-archive-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; } } /* ========================================================== Pagina About: foto a sinistra, testo biografico a destra. ========================================================== */ .darronsky-about-columns { padding: 1rem 0 3rem; gap: 3rem !important; } .darronsky-about-photo { position: sticky; top: 2rem; align-self: flex-start; } .darronsky-about-image { width: 100%; margin: 0; overflow: hidden; } .darronsky-about-image img { width: 100%; height: auto; display: block; } .darronsky-about-title { font-size: 1.75rem; margin: 0 0 1.5rem; text-align: left !important; } .darronsky-about-title::before { content: none !important; } .darronsky-about-text { font-size: 0.95rem; line-height: 1.7; color: var(--wp--preset--color--accent, #c9c9c9); } .darronsky-about-text p { margin: 0 0 1.25rem !important; padding-left: 0 !important; text-align: left !important; } .darronsky-about-text.is-layout-constrained > * { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } @media (max-width: 782px) { .darronsky-about-columns { flex-direction: column; } .darronsky-about-photo, .darronsky-about-content { flex-basis: 100% !important; } .darronsky-about-photo { position: static; } } /* ========================================================== Pagina Tags: nuvola di tutti i tag del sito. ========================================================== */ .darronsky-tags-page { padding: 1rem 0 4rem; } .darronsky-tags-title { font-size: 1.75rem; margin: 0 0 2rem; text-align: left !important; } .darronsky-tags-title::before { content: none !important; } .darronsky-tags-cloud { display: flex; flex-wrap: wrap; gap: 0.9rem 1.4rem; } .darronsky-tags-cloud a { color: var(--wp--preset--color--foreground, #f2f2f2); text-decoration: none; line-height: 1.4; } .darronsky-tags-cloud a:hover { color: var(--wp--preset--color--accent, #8a8a8a); text-decoration: underline; } /* ========================================================== Archivio generico (mese/categoria/tag): stesso stile del feed della home, con un titolo di contesto in cima. ========================================================== */ .darronsky-archive-context-title { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 1.5rem; text-align: left !important; color: var(--wp--preset--color--foreground, #f2f2f2); } /* ========================================================== Footer: barra grigio chiaro, tagline minimale. ========================================================== */ .darronsky-site-footer { background-color: #d9d9d9; padding: 1.5rem 0; } .darronsky-footer-inner { padding: 0 var(--darronsky-side-margin); max-width: var(--darronsky-content-width); margin: 0 auto; box-sizing: content-box; } .darronsky-footer-tagline { margin: 0 !important; max-width: none !important; color: #1a1a1a; font-size: 0.9rem; text-align: left !important; } /* ========================================================== Skip-link di accessibilita': deve restare invisibile fuori schermo finche' non riceve il focus da tastiera. ========================================================== */ .skip-link, .screen-reader-text { position: absolute !important; top: -9999px !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } .skip-link:focus, .screen-reader-text:focus { position: fixed !important; top: 8px !important; left: 8px !important; width: auto; height: auto; z-index: 999999; background: #000; color: #fff; padding: 0.5rem 1rem; }