/** * Main Styles * * Base reset, typography, container, responsive layout, and utility classes. * Mobile-first approach with breakpoints at 768px (tablet) and 1024px (desktop). * * @package One_Handyman */ /* ========================================================================== CSS Reset & Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, p, ul, ol { margin: 0; } img, picture, video, canvas, svg { display: block; max-width: 100%; } /** * Prevent horizontal scroll without breaking position: sticky. * * `overflow-x: hidden` on or creates a scroll container which * disables position: sticky descendants. `overflow-x: clip` clips overflow * without establishing a scroll container, so sticky continues to work. */ html, body { overflow-x: clip; } /* Body scroll lock when mobile nav panel is open */ body.nav-is-open { overflow: hidden; } /* WordPress admin bar — logged-in users; used by fixed header + mobile panel */ body.admin-bar { --one-wp-admin-bar-height: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --one-wp-admin-bar-height: 46px; } } /* ========================================================================== Typography ========================================================================== */ html { font-size: var(--one-font-size-base, 16px); -webkit-text-size-adjust: 100%; } body { font-family: var(--one-font-body); font-size: var(--one-font-size-base, 16px); font-weight: 400; line-height: var(--one-line-height-base, 1.6); color: var(--one-text); background-color: var(--one-bg); } h1, h2, h3, h4, h5, h6 { font-family: var(--one-font-heading); font-weight: 600; line-height: var(--one-line-height-heading, 1.15); letter-spacing: -0.01em; color: var(--one-heading-color); margin-bottom: var(--one-spacing-md, 1rem); } h1 { font-size: clamp(2rem, 5vw, 3rem); } h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); } h3 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); } h4 { font-size: clamp(1.25rem, 3vw, 1.75rem); } h5 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); } h6 { font-size: clamp(1rem, 2vw, 1.25rem); } p { margin-bottom: var(--one-spacing-md, 1rem); } a { color: var(--one-bronze-dark, #8C6D3F); text-decoration: underline; text-underline-offset: 2px; transition: color var(--one-transition-fast, 150ms ease); } a:hover, a:focus { color: var(--one-bronze, #B08D57); } /* Eyebrow / kicker label — geometric sans, tracked-out, uppercase */ .one-eyebrow { display: inline-block; font-family: var(--one-font-eyebrow); font-size: 0.75rem; font-weight: 600; letter-spacing: var(--one-letter-spacing-eyebrow, 0.18em); text-transform: uppercase; color: var(--one-bronze-dark, #8C6D3F); margin-bottom: var(--one-spacing-md, 16px); } ul, ol { padding-left: 1.5rem; } /* ========================================================================== Container ========================================================================== */ .one-container { width: 100%; max-width: var(--one-container-max, 1200px); margin-left: auto; margin-right: auto; padding-left: var(--one-container-padding, 16px); padding-right: var(--one-container-padding, 16px); } /* ========================================================================== Images & Media ========================================================================== */ img, video, iframe, embed, object { max-width: 100%; height: auto; } /* ========================================================================== Touch Targets (Mobile Only) ========================================================================== */ @media (max-width: 767px) { a:not(.site-header__utility-cta):not(.site-header__phone-cta):not(.site-header__mobile-cta-phone):not(.site-header__mobile-cta-estimate), button:not(.oh-portfolio__filter), input, select, textarea { min-height: 44px; } } button, input[type="submit"], input[type="button"] { cursor: pointer; } /* ========================================================================== Responsive Grid ========================================================================== */ /* Mobile first: single column */ .one-grid { display: grid; gap: var(--one-spacing-lg, 1.5rem); grid-template-columns: 1fr; } /* Tablet: 768px+ */ @media (min-width: 768px) { .one-grid { grid-template-columns: repeat(2, 1fr); } .one-grid--2 { grid-template-columns: repeat(2, 1fr); } .one-grid--3 { grid-template-columns: repeat(2, 1fr); } .one-grid--4 { grid-template-columns: repeat(2, 1fr); } .one-container { padding-left: var(--one-spacing-lg, 24px); padding-right: var(--one-spacing-lg, 24px); } } /* Desktop: 1024px+ */ @media (min-width: 1024px) { .one-grid--3 { grid-template-columns: repeat(3, 1fr); } .one-grid--4 { grid-template-columns: repeat(4, 1fr); } } /* ========================================================================== Page Layout ========================================================================== */ .site-main { } /* Two-column layout with sidebar */ .has-sidebar { display: grid; grid-template-columns: 1fr; gap: var(--one-spacing-xl, 2rem); } .has-sidebar .site-main { padding-top: 40px; padding-bottom: 40px; } .has-sidebar .site-sidebar { padding-top: 40px; padding-bottom: 40px; } @media (min-width: 768px) { .has-sidebar { grid-template-columns: 1fr 300px; } } @media (min-width: 1024px) { .has-sidebar { grid-template-columns: 1fr 320px; } } /* Sidebar */ .site-sidebar .widget { margin-bottom: var(--one-spacing-xl, 2rem); } .site-sidebar .widget:last-child { margin-bottom: 0; } .site-sidebar .widget-title { font-family: var(--one-font-heading); font-size: var(--one-font-size-lg, 18px); font-weight: 700; color: var(--one-text); margin: 0 0 var(--one-spacing-md, 1rem); padding-bottom: var(--one-spacing-sm, 8px); border-bottom: 2px solid var(--one-bronze, #B08D57); } .site-sidebar .widget ul { list-style: none; padding: 0; margin: 0; } .site-sidebar .widget ul li { margin-bottom: var(--one-spacing-xs, 4px); } .site-sidebar .widget ul li a { color: var(--one-text); text-decoration: none; font-size: var(--one-font-size-sm, 14px); line-height: 2; display: block; transition: color var(--one-transition-fast, 150ms ease); } .site-sidebar .widget ul li a:hover { color: var(--one-bronze-dark, #8C6D3F); } .site-sidebar .widget_search .search-form { display: flex; gap: 0; } .site-sidebar .widget_search .search-field { flex: 1; padding: var(--one-spacing-sm, 8px) var(--one-spacing-md, 16px); border: 1px solid var(--one-border); border-right: none; border-radius: 0; font-size: var(--one-font-size-sm, 14px); min-width: 0; } .site-sidebar .widget_search .search-submit { padding: var(--one-spacing-sm, 8px) var(--one-spacing-md, 16px); background: var(--one-obsidian, #1C1C1E); color: #fff; border: 1px solid var(--one-obsidian, #1C1C1E); border-radius: 0; font-size: var(--one-font-size-sm, 14px); font-weight: 600; cursor: pointer; min-width: auto; } .site-sidebar .widget_search .search-submit:hover { background: var(--one-bronze-dark, #8C6D3F); border-color: var(--one-bronze-dark, #8C6D3F); } /* Sidebar stacks below content on mobile, side-by-side on desktop */ @media (min-width: 1024px) { .has-sidebar { grid-template-columns: 1fr 300px; } } /* ========================================================================== Surface Utility Classes Light surface variants for sections requiring high-luminance backgrounds. --oh-color-bg: global page background (relative luminance >= 0.85) --oh-color-bg-alt: alternate light surface (relative luminance ~0.94) oh-surface--light: section background matching --oh-color-bg oh-surface--light-alt: alternate light surface for visual rhythm ========================================================================== */ :root { --oh-color-bg: #F9F9FB; --oh-color-bg-alt: #F1F1F4; } .oh-surface--light { background-color: var(--oh-color-bg); } .oh-surface--light-alt { background-color: var(--oh-color-bg-alt); } /* Dark obsidian surface for premium / high-contrast sections */ .oh-surface--obsidian { background-color: var(--one-obsidian, #1C1C1E); color: var(--one-champagne, #E7D9BE); } .oh-surface--obsidian h1, .oh-surface--obsidian h2, .oh-surface--obsidian h3, .oh-surface--obsidian h4 { color: #FFFFFF; } .oh-surface--obsidian a { color: var(--one-bronze-light, #C9A86A); } /* ========================================================================== Section Rhythm — generous, architectural whitespace ========================================================================== */ .oh-section { padding-top: var(--one-section-gap, 96px); padding-bottom: var(--one-section-gap, 96px); } .oh-section--tight { padding-top: var(--one-spacing-2xl, 64px); padding-bottom: var(--one-spacing-2xl, 64px); } /* Thin bronze divider line for editorial separation */ .oh-rule { width: 64px; height: 1px; border: 0; background-color: var(--one-bronze, #B08D57); margin: var(--one-spacing-lg, 24px) 0; } .oh-rule--center { margin-left: auto; margin-right: auto; } /* ========================================================================== Split-screen section (Image / Text, alternating) For homepage capability sections — usable in PHP or Elementor HTML blocks. ========================================================================== */ .oh-split { display: grid; grid-template-columns: 1fr; gap: var(--one-spacing-xl, 40px); align-items: center; } .oh-split__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--one-off-white-2, #F1F1F4); border: var(--one-hairline); } .oh-split__media img { width: 100%; height: 100%; object-fit: cover; } .oh-split__body { max-width: 560px; } @media (min-width: 900px) { .oh-split { grid-template-columns: repeat(2, 1fr); gap: clamp(40px, 6vw, 96px); } /* Alternating: even blocks put the image on the right */ .oh-split--reverse .oh-split__media { order: 2; } } /* ========================================================================== Light Tint Overlay for Background Images Replaces dark overlays on hero sections (homepage, single-service, About page). Uses a 75% white tint to maintain readability on light backgrounds. Applied via ::before pseudo-element on sections with background images. ========================================================================== */ .oh-hero-overlay { position: relative; } .oh-hero-overlay::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.75); z-index: 1; pointer-events: none; } .oh-hero-overlay > * { position: relative; z-index: 2; } /* ========================================================================== Utility Classes ========================================================================== */ /* Screen reader only */ .one-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========================================================================== Button Styles ========================================================================== */ .one-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.9rem 2rem; font-family: var(--one-font-eyebrow); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.4; text-align: center; text-decoration: none; border: 1px solid transparent; border-radius: var(--one-radius-sm, 2px); cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; min-height: 44px; min-width: 44px; } .one-btn--primary { background-color: var(--one-obsidian, #1C1C1E); border-color: var(--one-obsidian, #1C1C1E); color: #fff; } .one-btn--primary:hover, .one-btn--primary:focus { background-color: var(--one-bronze, #B08D57); border-color: var(--one-bronze, #B08D57); color: var(--one-obsidian, #1C1C1E); } .one-btn--secondary { background-color: var(--one-bronze, #B08D57); border-color: var(--one-bronze, #B08D57); color: var(--one-obsidian, #1C1C1E); } .one-btn--secondary:hover, .one-btn--secondary:focus { background-color: var(--one-bronze-dark, #8C6D3F); border-color: var(--one-bronze-dark, #8C6D3F); color: #fff; } /* ========================================================================== Loading Bar (Top of Page) ========================================================================== */ .one-loading-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; background-color: var(--one-bronze, #B08D57); z-index: 99999; transition: width 0.25s ease, opacity 0.25s ease; pointer-events: none; } body.admin-bar .one-loading-bar { top: var(--one-wp-admin-bar-offset, var(--one-wp-admin-bar-height, 32px)); } .one-loading-bar.is-loading { width: 85%; transition: width 8s cubic-bezier(0.1, 0.5, 0.3, 1); } .one-loading-bar.is-complete { width: 100%; transition: width 0.18s ease; } .one-loading-bar.is-done { width: 100%; transition: width 0.2s ease; } .one-loading-bar.is-hidden { opacity: 0; transition: opacity 0.3s ease 0.1s; } /* ========================================================================== Homepage Hero Section ========================================================================== */ .hero { padding: var(--one-spacing-3xl, 96px) 0; text-align: center; } .hero__content { max-width: 860px; margin: 0 auto; } .hero__headline { font-family: var(--one-font-heading); font-weight: 500; font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.08; letter-spacing: -0.015em; margin-bottom: var(--one-spacing-lg, 24px); color: var(--one-heading-color, var(--one-obsidian)); } .hero__sub-headline { font-family: var(--one-font-body); font-size: clamp(1.125rem, 2vw, 1.5rem); color: var(--one-text-muted, #6B6B72); max-width: 640px; margin: 0 auto var(--one-spacing-xl, 40px); font-weight: 400; line-height: 1.5; } .hero__cta { display: flex; flex-direction: column; gap: var(--one-spacing-sm, 8px); align-items: center; } .one-btn--outline { background-color: transparent; color: var(--one-obsidian, #1C1C1E); border: 1px solid var(--one-obsidian, #1C1C1E); } .one-btn--outline:hover, .one-btn--outline:focus { background-color: var(--one-obsidian, #1C1C1E); color: #fff; } @media (min-width: 768px) { .hero { padding: var(--one-spacing-4xl, 128px) 0; } .hero__cta { flex-direction: row; justify-content: center; gap: var(--one-spacing-md, 16px); } }