/** * Yard Ready Home - Base * Reset, element defaults, layout helpers and WordPress core classes. */ /* ========================================================================== 1. Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--yrh-header-height) + var(--yrh-topbar-height) + 1rem); /* Safety net: a single mis-sized element (fixed-width collage, unconstrained flex child, etc) shouldn't be able to force the whole page into horizontal scroll on narrow screens. Kept on rather than so it doesn't interfere with the sticky header. */ overflow-x: hidden; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } body { margin: 0; background-color: var(--yrh-body-bg); color: var(--yrh-body-color); font-family: var(--yrh-font-sans); font-size: var(--yrh-fs-body); font-weight: var(--yrh-fw-regular); line-height: var(--yrh-lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.yrh-menu-open { overflow: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } svg:not([fill]) { fill: currentColor; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } hr { border: 0; border-top: 1px solid var(--yrh-grey-100); margin: var(--yrh-space-10) 0; } /* ========================================================================== 2. Typography ========================================================================== */ h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--yrh-space-4); color: var(--yrh-heading-color); font-family: var(--yrh-font-heading); font-weight: var(--yrh-fw-semibold); line-height: var(--yrh-lh-heading); letter-spacing: var(--yrh-ls-heading); } h1 { font-size: var(--yrh-fs-h1); letter-spacing: var(--yrh-ls-display); } h2 { font-size: var(--yrh-fs-h2); } h3 { font-size: var(--yrh-fs-h3); } h4 { font-size: var(--yrh-fs-h4); } h5 { font-size: var(--yrh-fs-h5); } h6 { font-size: var(--yrh-fs-h6); } p, ul, ol, dl, figure, blockquote, pre, table { margin: 0 0 var(--yrh-space-5); } p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; } a { color: var(--yrh-link); text-decoration: none; transition: color var(--yrh-transition); } a:hover, a:focus { color: var(--yrh-link-hover); } strong, b { font-weight: var(--yrh-fw-semibold); } blockquote { padding-left: var(--yrh-space-5); border-left: var(--yrh-border-accent); color: var(--yrh-ink); font-size: var(--yrh-fs-lead); } code, kbd, pre { font-family: var(--yrh-font-mono); font-size: 0.9em; } pre { overflow-x: auto; padding: var(--yrh-space-5); border-radius: var(--yrh-radius-md); background: var(--yrh-grey-50); } table { width: 100%; border-collapse: collapse; } th, td { padding: var(--yrh-space-3); border-bottom: var(--yrh-border); text-align: left; } /* ========================================================================== 3. Accessibility ========================================================================== */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .screen-reader-text:focus { top: 1rem; left: 1rem; z-index: 100000; width: auto; height: auto; clip: auto; clip-path: none; padding: var(--yrh-space-3) var(--yrh-space-5); border-radius: var(--yrh-radius-pill); background: var(--yrh-green); color: var(--yrh-white); font-weight: var(--yrh-fw-semibold); text-decoration: none; } :focus-visible { outline: 2px solid var(--yrh-focus-ring); outline-offset: 3px; } /* ========================================================================== 4. Layout helpers ========================================================================== */ .yrh-container { width: 100%; max-width: calc(var(--yrh-container) + var(--yrh-gutter) * 2); margin-inline: auto; padding-inline: var(--yrh-gutter); } .yrh-container--narrow { max-width: calc(var(--yrh-container-narrow) + var(--yrh-gutter) * 2); } .yrh-section { padding-top: var(--yrh-pt, clamp(3rem, 1.5rem + 6vw, 6.5rem)); padding-bottom: var(--yrh-pb, clamp(3rem, 1.5rem + 6vw, 6.5rem)); } .yrh-site-main { min-height: 40vh; } /* Section eyebrow - tracked uppercase label with a short rule */ .yrh-eyebrow { display: inline-flex; align-items: center; gap: var(--yrh-space-2); margin: 0 0 var(--yrh-space-3); color: var(--yrh-green); font-size: var(--yrh-fs-eyebrow); font-weight: var(--yrh-fw-semibold); letter-spacing: var(--yrh-ls-eyebrow); line-height: 1.4; text-transform: uppercase; } /* Heading with trailing accented words */ .yrh-heading__accent { color: var(--yrh-heading-accent); } /* ========================================================================== 5. Buttons ========================================================================== */ .yrh-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--yrh-space-2); padding: clamp(14px, 8px + 1.6vw, 23px) clamp(22px, 14px + 3.2vw, 40px); border: 2px solid transparent; background-color: var(--yrh-btn-green); color: var(--yrh-white); font-size: clamp(0.9375rem, 0.85rem + 0.4vw, 1.25rem); font-weight: var(--yrh-fw-semibold); line-height: 1; text-align: center; text-decoration: none; transition: background-color var(--yrh-transition), color var(--yrh-transition), border-color var(--yrh-transition), transform var(--yrh-transition); } .yrh-btn:hover, .yrh-btn:focus { background-color: var(--yrh-btn-green-dark); color: var(--yrh-white); transform: translateY(-1px); } .yrh-btn--green { background-color: var(--yrh-btn-green); } .yrh-btn--green:hover, .yrh-btn--green:focus { background-color: var(--yrh-btn-green-dark); } .yrh-btn--navy { background-color: var(--yrh-navy); } .yrh-btn--navy:hover, .yrh-btn--navy:focus { background-color: var(--yrh-navy-dark); } .yrh-btn--white { background-color: var(--yrh-white); color: var(--yrh-btn-green); } .yrh-btn--white:hover, .yrh-btn--white:focus { background-color: var(--yrh-grey-50); color: var(--yrh-btn-green-dark); } .yrh-btn--lime { background-color: var(--yrh-lime); color: var(--yrh-ink); } .yrh-btn--lime:hover, .yrh-btn--lime:focus { background-color: var(--yrh-lime-dark); color: var(--yrh-ink); } .yrh-btn--outline { border-color: rgba(255, 255, 255, 0.6); background-color: transparent; color: var(--yrh-white); } .yrh-btn--outline:hover, .yrh-btn--outline:focus { border-color: var(--yrh-white); background-color: var(--yrh-white); color: var(--yrh-green-dark); } .yrh-btn--sm { padding: 10px 18px; font-size: var(--yrh-fs-sm); } .yrh-btn--block { display: flex; width: 100%; } /* .yrh-btn applied to a real (the comment form) - strip native OS button chrome so the theme's styling actually shows. */ input.yrh-btn { appearance: none; -webkit-appearance: none; cursor: pointer; } /* ========================================================================== 6. Forms ========================================================================== */ input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select { width: 100%; padding: 13px 18px; border: var(--yrh-border); border-radius: var(--yrh-radius-md); background: var(--yrh-white); color: var(--yrh-slate); transition: border-color var(--yrh-transition), box-shadow var(--yrh-transition); } input:focus, textarea:focus, select:focus { border-color: var(--yrh-green); box-shadow: 0 0 0 3px var(--yrh-green-10); outline: none; } ::placeholder { color: var(--yrh-grey-300); opacity: 1; } /* ========================================================================== 7. WordPress core classes ========================================================================== */ .alignleft { float: left; margin: 0 var(--yrh-space-6) var(--yrh-space-4) 0; } .alignright { float: right; margin: 0 0 var(--yrh-space-4) var(--yrh-space-6); } .aligncenter { display: block; margin-inline: auto; } .alignwide { max-width: min(1200px, 100%); margin-inline: auto; } .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .wp-caption { max-width: 100%; } .wp-caption-text, .wp-block-image figcaption { margin-top: var(--yrh-space-2); color: var(--yrh-grey-500); font-size: var(--yrh-fs-sm); text-align: center; } .sticky, .bypostauthor { display: block; } /* ========================================================================== 8. Entry defaults (index.php fallback) ========================================================================== */ .yrh-entry { margin-bottom: var(--yrh-space-12); } .yrh-entry__title { font-size: var(--yrh-fs-h3); } .yrh-entry-content > * + * { margin-top: var(--yrh-space-5); } .yrh-empty-hint { padding: var(--yrh-space-6); border-radius: var(--yrh-radius-md); background: var(--yrh-grey-50); color: var(--yrh-grey-500); font-size: var(--yrh-fs-sm); text-align: center; } /* ========================================================================== 9. Star rating ========================================================================== */ .yrh-stars { display: inline-flex; align-items: center; gap: 2px; color: var(--yrh-gold); } .yrh-stars__star { display: inline-flex; color: var(--yrh-grey-300); } .yrh-stars__star.is-on { color: var(--yrh-gold); }