/** * Base CSS — JUNK Plastic Rehab * * This file provides foundational styles using CSS custom properties * defined dynamically via ACF Site Options (dynamic-css.php). * * The :root variables are injected inline on this stylesheet handle. */ /* ── Reset & Box Sizing ── */ *, *::before, *::after { box-sizing: border-box; } /* ── Base Typography ── */ html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Blocca lo scroll orizzontale a livello di viewport. overflow-x:clip non crea scroll container (a differenza di hidden) quindi non rompe position:sticky sull'asse verticale. */ overflow-x: clip; /* iOS Safari mostra il background di (non di ) nell'area di "rubber-band" overscroll in fondo alla pagina. Senza questa regola l'area appare bianca anche se il footer è scuro. Usiamo la stessa variabile del footer così i colori combaciano sempre. */ background-color: var(--footer-bg, #111); } body { font-family: var(--font-body); font-size: var(--typo-body-size, 16px); font-weight: var(--typo-body-weight, 400); line-height: var(--typo-body-lh, 1.6); letter-spacing: var(--typo-body-ls, 0); color: var(--color-text); background-color: var(--color-bg); margin: 0; /* Previene lo scroll orizzontale causato da elementi con translateX (es. data-reveal="left/right"). overflow-x:clip non crea un nuovo formatting context e non rompe position:sticky come farebbe hidden. */ overflow-x: clip; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-headings); color: var(--color-heading); margin-top: 0; } h1 { font-size: var(--typo-h1-size, 48px); font-weight: var(--typo-h1-weight, 700); line-height: var(--typo-h1-lh, 1.1); letter-spacing: var(--typo-h1-ls, -0.02em); text-transform: var(--typo-h1-transform, none); } h2 { font-size: var(--typo-h2-size, 36px); font-weight: var(--typo-h2-weight, 700); line-height: var(--typo-h2-lh, 1.15); letter-spacing: var(--typo-h2-ls, -0.01em); text-transform: var(--typo-h2-transform, none); } h3 { font-size: var(--typo-h3-size, 28px); font-weight: var(--typo-h3-weight, 600); line-height: var(--typo-h3-lh, 1.2); letter-spacing: var(--typo-h3-ls, 0); text-transform: var(--typo-h3-transform, none); } h4 { font-size: var(--typo-h4-size, 22px); font-weight: var(--typo-h4-weight, 600); line-height: var(--typo-h4-lh, 1.3); letter-spacing: var(--typo-h4-ls, 0); text-transform: var(--typo-h4-transform, none); } h5 { font-size: var(--typo-h5-size, 18px); font-weight: var(--typo-h5-weight, 500); line-height: var(--typo-h5-lh, 1.4); letter-spacing: var(--typo-h5-ls, 0); text-transform: var(--typo-h5-transform, none); } h6 { font-size: var(--typo-h6-size, 16px); font-weight: var(--typo-h6-weight, 500); line-height: var(--typo-h6-lh, 1.4); letter-spacing: var(--typo-h6-ls, 0.02em); text-transform: var(--typo-h6-transform, uppercase); } /* ── Links ── */ a { color: var(--color-link); text-decoration: none; transition: color var(--transition); } a:hover, a:focus { color: var(--color-link-hover); } /* ── Page wrapper ── */ #page { /* overflow-y:clip taglia il contenuto che sporge verticalmente (es. [data-reveal] con translateY) senza creare un scroll container, quindi position:sticky sull'header continua a funzionare correttamente. I drawer position:fixed non vengono clippati perché escono dal contesto di overflow. */ overflow-y: clip; } /* ── Container ── */ .container, .site-main > .woocommerce { width: 100%; max-width: var(--container-max); margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } .container--narrow { max-width: var(--container-narrow); } .container--full { max-width: none; padding-left: 0; padding-right: 0; } /* ── Sections ── */ .section { padding-top: var(--section-spacing); padding-bottom: var(--section-spacing); } /* ── Page / Single post prose layout ── */ /* Width is already constrained by .container in page.php / single.php */ .entry-header { margin-bottom: 2rem; } .entry-header .entry-title { margin-bottom: 0; } .entry-content { /* inherits full width of .container */ } /* Vertical rhythm inside prose */ .entry-content > * + * { margin-top: 1.5em; } .entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 { margin-top: 2.5em; margin-bottom: 0.5em; } .entry-content h1:first-child, .entry-content h2:first-child, .entry-content h3:first-child { margin-top: 0; } .entry-content p { margin-top: 0; margin-bottom: 1em; } .entry-content ul, .entry-content ol { padding-left: 1.5em; } .entry-content img { border-radius: var(--radius-md); } .entry-footer { margin-top: 2rem; padding-top: 1rem; border-top: var(--border); font-size: var(--typo-caption-size, 12px); color: var(--color-text-secondary); } /* ── Utility: Text styles ── */ .text-body-small { font-size: var(--typo-body_small-size, 14px); font-weight: var(--typo-body_small-weight, 400); line-height: var(--typo-body_small-lh, 1.5); letter-spacing: var(--typo-body_small-ls, 0); } .text-body-large { font-size: var(--typo-body_large-size, 18px); font-weight: var(--typo-body_large-weight, 400); line-height: var(--typo-body_large-lh, 1.6); } .text-lead { font-size: var(--typo-lead-size, 20px); font-weight: var(--typo-lead-weight, 400); line-height: var(--typo-lead-lh, 1.6); } .text-caption { font-size: var(--typo-caption-size, 12px); font-weight: var(--typo-caption-weight, 400); line-height: var(--typo-caption-lh, 1.4); letter-spacing: var(--typo-caption-ls, 0.02em); } .text-overline { font-size: var(--typo-overline-size, 12px); font-weight: var(--typo-overline-weight, 500); line-height: var(--typo-overline-lh, 1.4); letter-spacing: var(--typo-overline-ls, 0.1em); text-transform: var(--typo-overline-transform, uppercase); } /* ── Buttons (base) ── */ .btn, button, input[type="submit"] { font-family: var(--font-body); font-size: var(--typo-button-size, 14px); font-weight: var(--typo-button-weight, 500); letter-spacing: var(--typo-button-ls, 0.05em); text-transform: var(--typo-button-transform, uppercase); line-height: var(--typo-button-lh, 1); padding: var(--btn-padding-y, 12px) var(--btn-padding-x, 24px); cursor: pointer; transition: all var(--transition); border: var(--border); border-radius: var(--btn-radius, var(--radius-sm)); } /* Small button */ .btn--sm { padding: var(--btn-sm-padding-y, 8px) var(--btn-sm-padding-x, 16px); font-size: var(--btn-sm-font-size, 12px); } /* Large button */ .btn--lg { padding: var(--btn-lg-padding-y, 16px) var(--btn-lg-padding-x, 40px); font-size: var(--btn-lg-font-size, 16px); } .btn--primary { background-color: var(--color-primary); color: var(--color-text-light); border-color: var(--color-primary); } /* Keep button text colour correct after the link has been visited */ .btn--primary:visited { color: var(--color-text-light); } .btn--primary:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-text-light); } .btn--secondary { background-color: transparent; color: var(--color-primary); border-color: var(--color-primary); } .btn--secondary:visited { color: var(--color-primary); } .btn--secondary:hover { background-color: var(--color-primary); color: var(--color-text-light); } /* ── Images ── */ img { max-width: 100%; height: auto; display: block; } /* ── Forms (base) ── */ input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="url"], input[type="number"], textarea, select { font-family: var(--font-body); font-size: var(--typo-input-size, 15px); font-weight: var(--typo-input-weight, 400); line-height: var(--typo-input-lh, 1.4); border: var(--border); border-radius: var(--radius-sm); background-color: var(--color-bg); color: var(--color-text); transition: border-color var(--transition); width: 100%; padding: 12px 16px; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); } /* ── Badge ── */ .badge { font-size: var(--typo-badge-size, 11px); font-weight: var(--typo-badge-weight, 600); letter-spacing: var(--typo-badge-ls, 0.06em); text-transform: var(--typo-badge-transform, uppercase); line-height: var(--typo-badge-lh, 1); display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--radius-sm); } /* ── Price ── */ .price { font-size: var(--typo-price-size, 16px); font-weight: var(--typo-price-weight, 500); line-height: var(--typo-price-lh, 1.2); } .price--large { font-size: var(--typo-price_large-size, 22px); font-weight: var(--typo-price_large-weight, 600); } .price del { color: var(--color-text-secondary); text-decoration: line-through; } .price ins { color: var(--color-sale); text-decoration: none; } /* ── Screen reader ── */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important; } .screen-reader-text:focus { background-color: var(--color-bg); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); clip: auto !important; display: block; font-size: var(--typo-button-size, 14px); height: auto; left: 5px; padding: 15px 23px; top: 5px; width: auto; z-index: 100000; }