/* ===== Minimal responsive base (drop-in) ===== */ /* 1) CSS variables & sensible defaults - tweak colors here */ :root{ --sp-primary: #0d6efd; /* primary accent */ --sp-white: #fff; --sp-bg: #ffffff; --sp-text: #0f1720; --container-gutter: 1.5rem; /* bootstrap-like gutter variable */ --shadow-sm: 0 2px 4px rgb(14 30 37 / 12%); --shadow-lg: 0 2px 16px rgb(14 30 37 / 32%); --card-shadow: var(--shadow-sm), var(--shadow-lg); --max-width-lg: 1470px; --max-width-md: 1200px; --max-width-sm: 720px; --max-width-xs: 540px; } /* 2) Box sizing & basic reset */ *, *::before, *::after { box-sizing: border-box; } html,body{ height:100%; margin:0; padding:0; background:var(--sp-bg); color:var(--sp-text); -webkit-font-smoothing:antialiased; } /* 3) Accessible focus outlines */ :focus{ outline: 3px solid color-mix(in srgb, var(--sp-primary) 20%, transparent); outline-offset: 2px; } /* 4) Responsive typography (mobile-first) - tweak the multipliers */ html { font-size: 16px; } body { font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; line-height:1.5; } h1 { font-size: clamp(1.6rem, 1.8rem + 1.6vw, 2.8rem); margin:0 0 .5rem; } h2 { font-size: clamp(1.35rem, 1.45rem + 1.1vw, 2.2rem); margin:0 0 .5rem; } h3 { font-size: clamp(1.175rem, 1.2rem + .8vw, 1.6rem); margin:0 0 .4rem; } p, li, a, td { font-size: clamp(.95rem, .9rem + .2vw, 1rem); } /* 5) Images & media */ img, picture, svg, video { max-width:100%; height:auto; display:block; } figure { margin:0; } figcaption { text-align:center; font-size: .9em; color: #6b7280; } /* ===== Container (mobile-first, sane breakpoints) ===== */ .container-full { width:100%; padding-inline: calc(var(--container-gutter) / 2); margin-inline:auto; max-width: 100%; } /* small screens: already 100% */ @media (min-width: 576px){ .container-full { max-width: var(--max-width-xs); } } @media (min-width: 768px){ .container-full { max-width: var(--max-width-sm); } } @media (min-width: 992px){ /* choose one logical max for medium/large screens */ .container-full { max-width: var(--max-width-md); } } @media (min-width: 1200px){ .container-full { max-width: var(--max-width-lg); } } /* If using boxed layout, clamp it separately (keeps boxed intent) */ body.theme-boxed .container-full { padding-inline: 15px; margin-inline:auto; } /* ===== Featherlight close button fix ===== */ /* make sure the lightbox close is positioned relative to the viewport/parent */ button.featherlight-close-icon.featherlight-close { position: absolute; /* previously missing */ top: 40px; right: 40px; background-color: var(--sp-primary); color: var(--sp-white); border: 1px solid var(--sp-white); border-radius: 4px; /* less harsh than 0 */ padding: .4rem .6rem; line-height:1; cursor:pointer; box-shadow: var(--card-shadow); } /* make close button responsive on small screens */ @media (max-width:480px){ button.featherlight-close-icon.featherlight-close{ top: 12px; right: 12px; padding:.35rem .45rem; } } /* ===== Jetpack tiled gallery improvements ===== */ /* Use gap/grid for spacing instead of negative margins where possible; ensure each item is positioned for pseudo-element overlays. */ .wp-block-jetpack-tiled-gallery .tiled-gallery__gallery{ display: grid; gap: calc(var(--container-gutter) * 0.25); /* flexible spacing */ justify-content: center; align-items: stretch; } /* Keep original style variants but make them robust */ .wp-block-jetpack-tiled-gallery .tiled-gallery__item{ position: relative; /* required for :before overlay */ overflow: hidden; display:block; width:100%; box-shadow: var(--card-shadow); border-radius:6px; } /* Circle style - ensure square aspect so circle is perfect */ .wp-block-jetpack-tiled-gallery.is-style-circle .tiled-gallery__item{ aspect-ratio: 1 / 1; /* keeps a square box for perfect circle */ border-radius: 50%; } /* Overlay for hover - use better variable/ordering */ .is-style-circle figure.tiled-gallery__item::before, .is-style-circle .tiled-gallery__item::before { content: ""; position: absolute; inset: 0; background: #000; border-radius: inherit; /* follow parent radius (circle or not) */ opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility .35s; pointer-events: none; } .is-style-circle figure.tiled-gallery__item:hover::before, .is-style-circle figure.tiled-gallery__item:focus::before, .is-style-circle .tiled-gallery__item:hover::before { visibility: visible; opacity: .45; } /* rectangular style keeps the same shadow but no forced sizes */ .wp-block-jetpack-tiled-gallery.is-style-rectangular .tiled-gallery__item { width: 100%; height: auto; } /* columns style — make spacing consistent */ .wp-block-jetpack-tiled-gallery.is-style-columns .tiled-gallery__item{ width:100%; margin-bottom: 1.25rem; } /* ===== Table responsiveness & styling ===== */ .wp-block-table, table { width: 100%; border-collapse: collapse; border-spacing: 0; margin-bottom: 1rem; overflow: visible; } /* Better table cells */ .wp-block-table th, .wp-block-table td, table th, table td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(15,23,32,.06); font-size: .95rem; } /* Responsive wrapper for very wide tables */ .table-responsive { width:100%; overflow-x:auto; -webkit-overflow-scrolling: touch; } /* Small screens: make long tables scroll (or consider stacking) */ @media (max-width: 640px){ .wp-block-table th, .wp-block-table td { padding: .5rem .6rem; font-size: .9rem; } } /* ===== Sidebar tweaks from your snippet (kept but made robust) ===== */ .sidebar .widget .wp-block-group .wp-block-image { margin-bottom: 0; } .sidebar .widget .wp-block-group .is-nowrap p { padding: 0; } /* list & code tweaks */ ul.wp-block-rss { list-style: disc; padding-inline-start: 1.25rem; } .has-text-color a:hover, .has-text-color a:focus { color: inherit; text-decoration: underline; } .wp-block-code.has-text-color code { color: inherit; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", monospace; } /* Final small polish - consistent spacing for last elements */ .entry-content ul:last-child { margin-bottom: 0; }