/* Theme Name: Twenty Twenty-Four Child - Upash Studio Template: twentytwentyfour Theme URI: https://upashstudio.com Author: Upash Studio Description: Child theme of Twenty Twenty-Four built for Upash Studio (Chicago wedding photographer & videographer). Adds the studio's real branding, an expanded homepage, and built-in SEO / AI-search schema (LocalBusiness, FAQPage, BlogPosting, Breadcrumbs) with no extra plugin required. Version: 1.3.0 Text Domain: twentytwentyfour-child-upash */ /* ========================================================================= 1. THE HERO BACKDROP One single background image behind the header + hero + welcome sections, then the rest of the page sits on clean white above it. It's painted as a fixed pseudo-element on rather than as a background on each block, so the header (a separate template part) and the first two sections share one continuous, seamless image instead of three tiled copies of it. ========================================================================= */ body.home::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; background-image: url('https://upashstudio.com/wp-content/uploads/2024/09/background.webp'); background-size: cover; background-position: center 30%; background-repeat: no-repeat; z-index: -2; } /* Dark scrim over the photo so white text stays readable on top of it. */ body.home::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 100vh; background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.45) 55%, rgba(250, 249, 247, 0.92) 88%, #faf9f7 100%); z-index: -1; } /* The header and the first two sections are transparent so the fixed image shows through; every later section gets its own solid background and scrolls over the top of it. */ body.home .wp-site-blocks > header, body.home .upash-hero, body.home .upash-welcome { background: transparent !important; } body.home .wp-site-blocks > header a, body.home .wp-site-blocks > header .wp-block-site-title a, body.home .upash-hero, body.home .upash-hero h1, body.home .upash-hero p, body.home .upash-welcome h2, body.home .upash-welcome p { color: #ffffff !important; } body.home .wp-block-navigation a:hover { color: #ff6a5e !important; } /* Everything from "Who We Photograph" down sits on solid page background, hiding the fixed image behind it. */ .upash-section { position: relative; background-color: #faf9f7; } .upash-section-alt { position: relative; background-color: #f4f4f4; } /* Inner (non-home) pages: no photo backdrop, just clean white. */ body:not(.home) { background-color: #faf9f7; } /* ========================================================================= 2. RHYTHM Twenty Twenty-Four's default section padding is very tall; these are deliberately tighter so sections read as one page rather than a stack of separate screens. ========================================================================= */ .upash-section, .upash-section-alt { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } .upash-hero { padding-top: 5rem !important; padding-bottom: 4rem !important; } .upash-welcome { padding-top: 1rem !important; padding-bottom: 5rem !important; } @media (max-width: 781px) { .upash-section, .upash-section-alt { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; } .upash-hero { padding-top: 3rem !important; padding-bottom: 2.5rem !important; } } .upash-section h2, .upash-section-alt h2 { margin-bottom: 0.5rem !important; } .upash-section-intro { max-width: 640px; margin-left: auto !important; margin-right: auto !important; margin-bottom: 2.5rem !important; opacity: 0.8; } /* ========================================================================= 3. HERO ========================================================================= */ .upash-hero .upash-eyebrow { letter-spacing: 0.22em; text-transform: uppercase; font-size: 0.75rem; opacity: 0.9; margin-bottom: 1rem !important; } .upash-hero h1 { max-width: 16ch; margin-left: auto !important; margin-right: auto !important; line-height: 1.12 !important; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35); } .upash-hero .upash-hero-sub { max-width: 52ch; margin-left: auto !important; margin-right: auto !important; margin-top: 1.25rem !important; margin-bottom: 2rem !important; opacity: 0.95; } .upash-welcome h2 { margin-bottom: 1rem !important; } .upash-welcome p { max-width: 60ch; margin-left: auto !important; margin-right: auto !important; opacity: 0.95; } /* ========================================================================= 4. CARDS ========================================================================= */ .upash-card { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 14px; padding: 1.75rem !important; height: 100%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04); transition: transform 0.25s ease, box-shadow 0.25s ease; } .upash-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.09); } .upash-card h3 { margin-top: 0 !important; margin-bottom: 0.6rem !important; } .upash-card p { margin-bottom: 0.6rem !important; font-size: 0.95rem; line-height: 1.6; } .upash-card .upash-card-link { color: #ad4546 !important; font-weight: 600; text-decoration: none; margin-bottom: 0 !important; } .upash-card .upash-card-link:hover { text-decoration: underline; } /* Stat / trust row */ .upash-stat-row { display: flex; flex-wrap: wrap; gap: 2.5rem; justify-content: center; text-align: center; margin-top: 2rem !important; } .upash-stat-row > p { margin: 0 !important; min-width: 150px; } .upash-stat-row .upash-stat-number { display: block; font-size: 2.25rem; font-weight: 700; line-height: 1.1; color: #ad4546; margin-bottom: 0.25rem; } /* Trust badges ("Fast delivery / Respectful direction / Affordable packages") */ .upash-badge-row { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; margin: 1.5rem 0 0 !important; } .upash-badge-row > p.upash-badge { display: flex; align-items: center; gap: 0.55rem; margin: 0 !important; background: #ffffff; border: 1px solid rgba(173, 69, 70, 0.18); border-radius: 10px; padding: 0.65rem 1.15rem !important; font-size: 0.95rem; font-weight: 600; color: #1a1a1a; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; } .upash-badge-row > p.upash-badge:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } .upash-badge-row > p.upash-badge::before { content: "\2713"; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.2rem; height: 1.2rem; border-radius: 5px; background: #ad4546; color: #ffffff; font-size: 0.7rem; font-weight: 700; } /* Testimonials */ .upash-testimonial { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 14px; padding: 1.75rem !important; height: 100%; } .upash-testimonial .upash-stars { color: #ad4546; letter-spacing: 0.15em; margin-bottom: 0.75rem !important; } .upash-testimonial cite { font-style: normal; font-weight: 600; display: block; margin-top: 1rem; font-size: 0.9rem; } /* ========================================================================= 5. FAQ ACCORDION Built on native

so it opens and closes with zero JavaScript, stays keyboard accessible for free, and — importantly — the answer text remains in the DOM when collapsed, so Google and AI crawlers still read every answer for the FAQPage schema. ========================================================================= */ .upash-faq { max-width: 760px; margin: 2.5rem auto 0 !important; } .upash-faq .upash-faq-item { background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; margin-bottom: 0.75rem !important; padding: 0 !important; overflow: hidden; transition: box-shadow 0.2s ease; } .upash-faq .upash-faq-item[open] { box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07); } .upash-faq .upash-faq-q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: 1.15rem 1.4rem !important; margin: 0 !important; font-size: 1.02rem !important; font-weight: 600; line-height: 1.45; color: #1a1a1a; transition: color 0.2s ease; } .upash-faq .upash-faq-q::-webkit-details-marker { display: none; } .upash-faq .upash-faq-q:hover { color: #ad4546; } /* The +/- indicator */ .upash-faq .upash-faq-q::after { content: ""; flex: 0 0 auto; width: 11px; height: 11px; border-right: 2px solid #ad4546; border-bottom: 2px solid #ad4546; transform: rotate(45deg); transform-origin: center; margin-top: -4px; transition: transform 0.25s ease; } .upash-faq .upash-faq-item[open] .upash-faq-q::after { transform: rotate(-135deg); margin-top: 3px; } .upash-faq .upash-faq-a { padding: 0 1.4rem 1.3rem !important; margin: 0 !important; line-height: 1.65; opacity: 0.85; } /* ========================================================================= 6. UTILITIES ========================================================================= */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .upash-breadcrumbs { font-size: 0.85rem; opacity: 0.65; margin-bottom: 1.5rem; } .upash-breadcrumbs a { color: inherit; text-decoration: underline; } .upash-breadcrumbs .upash-breadcrumbs-sep { margin: 0 0.4em; } /* ========================================================================= 7. RESTORED SITE CSS The site's original custom CSS, recovered from a pre-change snapshot of the live homepage. It lived in Site Editor > Styles > Additional CSS, which WordPress scopes to the active theme's slug — so it stopped applying the moment a differently-named child theme was activated. Two deliberate changes from the original: the site-wide `body { background-image }` is gone (replaced by the scoped hero backdrop in section 1 above), and the blanket `.wp-block-column` card style is now scoped to `.upash-legacy-columns` so it only styles the pages that relied on it, instead of turning every column on every new section into a gray box. ========================================================================= */ .upash-legacy-columns .wp-block-column, body:not(.home) .wp-block-column { background-color: #f4f4f4; padding: 20px; border-radius: 15px; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); overflow: hidden; max-width: 100%; } @media (min-width: 768px) { .upash-legacy-columns .wp-block-column, body:not(.home) .wp-block-column { padding: 30px; border-radius: 25px; } .wp-block-button a { font-size: 17px; padding: 17px 36px; } } .wp-block-button a { background-color: #1a1a1a; color: #ffffff; padding: 15px 30px; border-radius: 50px; font-size: 16px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: bold; text-align: center; display: inline-block; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .wp-block-button a:hover { background-color: #ff3d30; box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3); transform: translateY(-3px); } .wp-block-button.is-style-outline a { background-color: transparent; border: 2px solid currentColor; box-shadow: none; } .wp-block-button.is-style-outline a:hover { background-color: #ff3d30; border-color: #ff3d30; color: #ffffff; } .wpcf7-form label { display: block; margin-bottom: 10px; font-weight: bold; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="number"], .wpcf7-form textarea { width: 100%; padding: 10px; border: 1px solid #cccccc; border-radius: 8px; margin-bottom: 15px; font-size: 16px; } .wpcf7-form input[type="submit"] { background-color: #AD4546; color: #ffffff; padding: 12px 20px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: background-color 0.3s ease; } .wpcf7-form input[type="submit"]:hover { background-color: #FF3D30; } .wpcf7-form .wpcf7-form-control.wpcf7-select, .wpcf7-form .wpcf7-form-control.wpcf7-date.wpcf7-validates-as-date { width: 100%; padding: 10px; border: 1px solid #cccccc; border-radius: 8px; margin-bottom: 15px; font-size: 16px; background-color: #ffffff; } .wp-block-navigation__responsive-container-open { width: 48px; height: 48px; padding: 8px; } .wp-block-navigation__responsive-container-open svg { width: 32px; height: 32px; } @media only screen and (max-width: 768px) { .wp-block-pages-list__item__link { font-size: 24px; padding: 15px !important; display: block; text-align: center; } .wp-block-navigation-item__label { font-size: 24px; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label { color: #000000; } } @media only screen and (max-width: 1400px) { iframe[src*="youtube.com/embed/"] { width: 100% !important; height: auto !important; } } .wp-block-navigation__responsive-container-close { color: #000000; }