/* * AKD child theme — custom CSS * * 1. Tokens * 2. Global typography * 3a. Footer + sidebar removal * 3b. Header / nav (active indicator, hover, home translucent variant) * 4. Two-column About + Services layout * 5. About * 6. Services * 7. Contact (incl. CF7 form) * 8. Project detail pages + WP gallery override * 9. Projects index 6-tile grid */ /* ---------- 1. Tokens ---------- */ :root { --akd-font-body: "Avenir LT Pro", "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --akd-font-display: "Montserrat", "Avenir LT Pro", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --akd-color-text: #111111; --akd-color-text-muted: #6b6b6b; --akd-color-bg: #ffffff; --akd-color-bg-warm: #d8cfc4; --akd-color-header: #c8c1bc; /* exact rendered color of the Theme Builder header */ --akd-color-accent: #b1a193; --akd-header-height: 72px; --akd-content-max: 1200px; --akd-content-wide: 1700px; --akd-content-narrow: 880px; --akd-gap: clamp(2rem, 4vw, 4rem); --akd-gap-tight: clamp(1rem, 2vw, 2rem); --akd-gap-projects: 50px; } /* ---------- 2. Global typography ---------- */ body, body .et_pb_text, body p, body li { font-family: var(--akd-font-body); color: var(--akd-color-text); font-weight: 400; line-height: 1.6; } h1, h2, h3, h4, h5, h6, .et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4, .et_pb_module h5, .et_pb_module h6 { font-family: var(--akd-font-display); font-weight: 400; letter-spacing: 0.02em; color: var(--akd-color-text); } /* ---------- 3a. Footer + sidebar removal (site-wide) ---------- */ #main-footer { display: none !important; } /* Hide WordPress/Divi page titles site-wide. The mockup has none; pages * communicate their identity through the active nav indicator. */ body.page .entry-title, body.page h1.entry-title, body.page .main_title, body.page .et_post_meta_wrapper { display: none !important; } #left-area { width: 100% !important; float: none !important; padding-right: 0 !important; border-right: none !important; } #sidebar, .et_right_sidebar #sidebar, .et_left_sidebar #sidebar { display: none !important; } #content-area { display: block !important; } /* ---------- 3b. Header / nav ---------- */ /* Nav active-page dot indicator + hover state. * * The site uses the Divi Mad Menu plugin (`.dvmm_menu`) for its primary * nav, NOT Divi's stock `#top-menu`. Selectors target both so the rules * still apply if the plugin is ever switched out. */ .dvmm_menu li.menu-item > a, #top-menu li > a { position: relative; transition: opacity 200ms ease; } .dvmm_menu li.menu-item > a::after, #top-menu li > a::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 24px; height: 1px; background: #8c807f; transform: translateX(-50%) scaleX(0); transform-origin: center; opacity: 0; transition: opacity 250ms ease, transform 250ms ease; pointer-events: none; } .dvmm_menu li.menu-item > a:hover::after, .dvmm_menu li.menu-item.current-menu-item > a::after, .dvmm_menu li.menu-item.current_page_item > a::after, .dvmm_menu li.menu-item.current-menu-ancestor > a::after, .dvmm_menu li.menu-item.current-page-ancestor > a::after, #top-menu li > a:hover::after, #top-menu li.current-menu-item > a::after, #top-menu li.current_page_item > a::after, #top-menu li.current-menu-ancestor > a::after, #top-menu li.current-page-ancestor > a::after { opacity: 1; transform: translateX(-50%) scaleX(1); } .dvmm_menu li.menu-item > a:hover, #top-menu li > a:hover { opacity: 0.75; } /* Lighter nav weight — Divi UI sets the desktop menu links at weight 500 * via inline `.dvmm_mad_menu_0_tb_header .dvmm_menu__menu .dvmm_menu li a`; * matching that selector + raising specificity to drop it to 400. */ body .dvmm_mad_menu_0_tb_header .dvmm_menu__menu .dvmm_menu li a, body .dvmm_menu li.menu-item > a { font-weight: 400 !important; } /* Home page: translucent blurred white nav bar OVERLAID over the hero. * * The hero photo fills exactly 100vh; the Theme Builder header is pulled * out of the document flow and positioned absolute over the top so the * image reads behind it. No scrolling on the home page (the hero is the * only content). */ body.home .et-l--header, body.home #main-header, body.page-id-383 .et-l--header, body.page-id-383 #main-header { /* Standard iOS-safe pattern for fixed/absolute headers: * - position: fixed pins to viewport * - top: 0 sits at the very top * - padding-top: env(safe-area-inset-top) reserves space inside the * header for the notch / Dynamic Island, pushing the logo + menu * below the system UI * Background extends edge-to-edge (which is what we want — the * beige bar should fill the notch area too). * * env() requires viewport-fit=cover in the viewport meta — see * akd_viewport_fit_cover() in inc/enqueue.php. */ position: fixed; top: 0; left: 0; right: 0; z-index: 100; width: 100%; padding-top: env(safe-area-inset-top, 0px); } body.home.admin-bar .et-l--header, body.page-id-383.admin-bar .et-l--header { top: 32px; } @media screen and (max-width: 782px) { body.home.admin-bar .et-l--header, body.page-id-383.admin-bar .et-l--header { top: 46px; } } /* Translucent blurred white nav background — strong blur, very low opacity * so the photo reads through as the dominant element. * * Smooth transition so when the mobile menu opens (selector below), the * translucent home nav animates to opaque beige to match the menu. */ body.home .et-l--header, body.home #main-header, body.home .et_pb_menu, body.home .et_pb_section_0_tb_header, body.home #desktop-fixed, body.page-id-383 .et-l--header, body.page-id-383 #main-header, body.page-id-383 .et_pb_menu, body.page-id-383 .et_pb_section_0_tb_header, body.page-id-383 #desktop-fixed { background: rgba(255, 255, 255, 0.2) !important; -webkit-backdrop-filter: blur(38px) saturate(220%); backdrop-filter: blur(38px) saturate(220%); transition: background-color 300ms ease, background 300ms ease, backdrop-filter 300ms ease, -webkit-backdrop-filter 300ms ease; } /* When the mobile menu is open on the home page, swap the translucent * nav for opaque WHITE so the area behind the iOS notch matches every * other page (always white). The beige menu overlay sits below the * white header bar. * * Specificity boosted with `html body.home` + the full Divi descendant * chain so we beat Divi Theme Builder's inline color rule * (`.et-l--header > .et_builder_inner_content .et_pb_section.et_pb_section_0_tb_header`). */ html body.home:has(.dvmm_mobile__menu.open) .et-l--header > .et_builder_inner_content .et_pb_section.et_pb_section_0_tb_header, html body.page-id-383:has(.dvmm_mobile__menu.open) .et-l--header > .et_builder_inner_content .et_pb_section.et_pb_section_0_tb_header, html body.home:has(.dvmm_mobile__menu.open) .et-l--header, html body.home:has(.dvmm_mobile__menu.open) #main-header, html body.home:has(.dvmm_mobile__menu.open) .et_pb_menu, html body.home:has(.dvmm_mobile__menu.open) .et_pb_section_0_tb_header, html body.home:has(.dvmm_mobile__menu.open) #desktop-fixed, html body.page-id-383:has(.dvmm_mobile__menu.open) .et-l--header, html body.page-id-383:has(.dvmm_mobile__menu.open) #main-header, html body.page-id-383:has(.dvmm_mobile__menu.open) .et_pb_menu, html body.page-id-383:has(.dvmm_mobile__menu.open) .et_pb_section_0_tb_header, html body.page-id-383:has(.dvmm_mobile__menu.open) #desktop-fixed { background: #ffffff !important; background-color: #ffffff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Site-wide: kill any bottom border / shadow line on the header so the * nav strip sits seamlessly against whatever's below it. */ #main-header, .et-l--header, .et_pb_section_0_tb_header, #desktop-fixed { box-shadow: none !important; border-bottom: none !important; } #main-header > .container::after, .et-l--header > .container::after { display: none !important; } /* Hero section: oversize past `100lvh` by the header height so the bg * image extends behind the iOS URL bar. * * On iOS Safari with overflow:hidden body (locked scrolling), `100lvh` * computes against the visible-content area (excluding URL bar), so the * image stops short. Adding the header height (--akd-header-height, * 72px) covers the gap. body's overflow:hidden clips the overshoot. */ body.home .et_pb_section_0, body.page-id-383 .et_pb_section_0, body.home #et-boc > .et_pb_section:first-of-type, body.page-id-383 #et-boc > .et_pb_section:first-of-type { /* Section = visible content area (above whichever URL bar the user * has). `100dvh` is the dynamic viewport height; `100lvh` and * `100vh` are fallbacks. The hero photo itself is painted on `html` * (rule below) at `100lvh` so it fills the full physical viewport, * extending behind the URL bar regardless of position. */ height: 100vh !important; height: 100lvh !important; height: 100dvh !important; min-height: 100vh !important; min-height: 100lvh !important; min-height: 100dvh !important; margin: 0 !important; padding-top: 0 !important; } /* Lock the home page to viewport height — no scrolling. */ body.home, body.page-id-383 { overflow: hidden; } /* When the mobile menu is open, paint the body background the same * beige as the menu wrapper. The wrapper itself is offset 50px below * the header by the dvmm plugin and only paints to small-viewport * height — so by tinting the body, the area behind the iOS URL bar * (where the wrapper doesn't reach) stays visually continuous with * the menu instead of showing white. * * Color matches `.dvmm_mobile_menu_wrapper { background-color: #c8c0bc }` * set in Divi UI. */ html body.home:has(.dvmm_mobile__menu.open), html body.page-id-383:has(.dvmm_mobile__menu.open) { background-color: #c8c0bc !important; } body.home #page-container, body.home #et-boc, body.page-id-383 #page-container, body.page-id-383 #et-boc { padding-top: 0 !important; margin: 0 !important; } body.home #main-header a, body.home #top-menu a, body.home .dvmm_menu a, body.page-id-383 #main-header a, body.page-id-383 #top-menu a, body.page-id-383 .dvmm_menu a { color: var(--akd-color-text) !important; text-shadow: none; } /* Disable the dark gradient overlay on the home hero — the translucent * white nav bar handles legibility now. Scoped to non-mobile so it * doesn't override the mobile bg-image pseudo below. */ @media (min-width: 981px) { body.page-id-383 .et_pb_section:first-of-type::before { display: none !important; } } /* Floating "back to top" button — site-wide except on the home page * (which is locked to one viewport, nothing to scroll up to). JS in * `assets/js/back-to-top.js` toggles `.akd-back-to-top--visible` * once the page has scrolled past a threshold. Style mirrors the * home-page header: low-opacity white fill + heavy backdrop blur so * it reads against any background. */ .akd-back-to-top { position: fixed; right: 24px; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); width: 48px; height: 48px; background: rgba(255, 255, 255, 0.2); -webkit-backdrop-filter: blur(20px) saturate(220%); backdrop-filter: blur(20px) saturate(220%); border: none; border-radius: 50%; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); color: var(--akd-color-text); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 200; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity 250ms ease, transform 250ms ease, background-color 200ms ease; } .akd-back-to-top--visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .akd-back-to-top:hover { background: rgba(255, 255, 255, 0.35); } .akd-back-to-top:active { transform: translateY(0) scale(0.94); } .akd-back-to-top svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; } /* Hide on the home page since it doesn't scroll. */ body.home .akd-back-to-top, body.page-id-383 .akd-back-to-top { display: none !important; } @media (prefers-reduced-motion: reduce) { .akd-back-to-top { transition: opacity 250ms ease; transform: none; } .akd-back-to-top--visible { transform: none; } .akd-back-to-top:active { transform: scale(0.94); } } /* Static hero — focal point at left side of the photo. Desktop only; * mobile overrides bg-image and bg-position in the @media block below. * (The `:first-of-type` selector here adds pseudo-class specificity, * which is why mobile must scope itself explicitly to win the cascade.) */ @media (min-width: 981px) { body.home .et_pb_section_0, body.page-id-383 .et_pb_section_0, body.page-id-383 .et_pb_section:first-of-type { position: relative; background-position: 15% 40% !important; background-size: cover !important; } } body.home .et_pb_section_0, body.page-id-383 .et_pb_section_0 { position: relative; } /* Mobile hero: photo painted on `html` so it fills the full physical * viewport (`100lvh`) regardless of URL bar position. The section * itself stays sized to the visible content area (`100dvh`, set above) * — that gives the layout. The image just extends behind any URL bar, * filling the gap that would otherwise show the html background. * * Constraint: `html.home` and `html:has(body.page-id-383)` use :has() * because we can't put body classes on html directly. Falls back to * applying on body for browsers without :has(). */ @media (max-width: 980px) { html:has(body.home), html:has(body.page-id-383) { background-image: url('/wp-content/uploads/2026/04/upstate-new-york-05.jpg') !important; background-size: cover !important; background-position: -10px bottom !important; background-repeat: no-repeat !important; height: 100lvh; } /* Section transparent so the html bg shows through. */ body.home .et_pb_section_0, body.page-id-383 .et_pb_section_0 { background-image: none !important; background-color: transparent !important; } /* Body transparent on mobile home so html bg shows through. */ body.home, body.page-id-383 { background-color: transparent !important; } } /* Mobile: hide any leftover JS-inserted scroller — section's own * background-image (set in the static rule above) handles the photo. */ @media (max-width: 980px) { .akd-hero-scroller, .akd-hero-img { display: none !important; } } /* ---------- 4. Two-column About + Services layout ---------- */ .akd-about, .akd-services { display: grid; grid-template-columns: 1fr 1fr; gap: var(--akd-gap); align-items: end; /* Capped at 1200px (--akd-content-max) so the two-column layout * doesn't get too wide on big screens. Viewport breakout still used * to escape Divi's 1080px .container. */ box-sizing: border-box; width: min(var(--akd-content-max), calc(100vw - 3rem)); max-width: none; margin-top: clamp(1.5rem, 3vw, 3rem); margin-bottom: clamp(3rem, 6vw, 6rem); margin-left: 50%; transform: translateX(-50%); padding: 0; position: relative; } .akd-about__image img, .akd-services__image img { display: block; width: 100%; height: auto; } .akd-about__text, .akd-services__text { font-size: clamp(0.95rem, 1.05vw, 1.05rem); line-height: 1.7; } /* About: shrink the portrait photo column so Lauren's headshot reads as * an accent rather than dominating the page. Services keeps the * balanced 1fr/1fr layout. */ @media (min-width: 769px) { .akd-about { grid-template-columns: minmax(0, 350px) 1fr; } } .akd-about__text p + p, .akd-services__text p + p { margin-top: 1em; } @media (max-width: 768px) { .akd-about, .akd-services { grid-template-columns: 1fr; gap: var(--akd-gap-tight); } /* About: on mobile, lead with the text and put Lauren's photo at the * bottom (DOM order is image-then-text, so flip with grid order). * Services keeps its DOM order — the hero image still leads on * Services. */ .akd-about__text { order: 1; } .akd-about__image { order: 2; } } /* ---------- 5. About ---------- */ /* Layout inherits from section 4. */ /* ---------- 6. Services ---------- */ .akd-services__list-intro { margin-top: 1.25em; } /* Strong overrides — Divi's .entry-content ul re-applies disc bullets at * higher specificity, so we have to be explicit at every level. */ .akd-services__list, .entry-content .akd-services__list, body .akd-services__list, body .entry-content .akd-services__list { list-style: none !important; list-style-type: none !important; padding-left: 0 !important; margin-left: 0 !important; margin: 0.5em 0 0 !important; } .akd-services__list li, .entry-content .akd-services__list li, body .akd-services__list li { list-style: none !important; list-style-type: none !important; background: none !important; position: relative; padding-left: 1.4em; margin-bottom: 0.5em; } .akd-services__list li::marker { content: "" !important; } .akd-services__list li::before { content: "+"; position: absolute; left: 0; top: 0; color: var(--akd-color-text); font-weight: 400; } /* ---------- 7. Contact (incl. CF7 form) ---------- */ .akd-contact { /* Capped at 1200px (--akd-content-max) for consistency with About * and Services. The form itself stays narrow via its own * max-width on .wpcf7-form / form rows below. */ box-sizing: border-box; width: min(var(--akd-content-max), calc(100vw - 3rem)); max-width: none; margin-top: clamp(1.5rem, 3vw, 3rem); margin-bottom: clamp(3rem, 6vw, 6rem); margin-left: 50%; transform: translateX(-50%); padding: 0; position: relative; text-align: center; } /* Constrain the inner copy + form so reading line-length stays readable * inside the wide container. */ .akd-contact > * { max-width: 760px; margin-left: auto; margin-right: auto; } .akd-contact__intro, .akd-contact__form-intro { font-size: clamp(0.95rem, 1.05vw, 1.05rem); line-height: 1.7; } .akd-contact__form-intro { margin-top: clamp(2.5rem, 5vw, 4rem); } .akd-contact__cta { margin: clamp(2rem, 4vw, 3rem) auto; text-align: center; } .akd-contact .calendly-button { display: inline-block; background: var(--akd-color-accent); color: #ffffff; padding: 0.95em 2.5em; font-family: var(--akd-font-display); font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; text-align: center; text-decoration: none; border: none; cursor: pointer; transition: background-color 180ms ease; min-width: 280px; width: auto; max-width: 100%; box-sizing: border-box; } /* Calendly now opens in a new tab — no popup-widget overlay on the * current page, so no special hide/z-index rules needed. */ .akd-contact .calendly-button:hover { background: #9a8a7c; } /* CF7 form — match mockup: Name + Email side by side with bottom-line * inputs, full-width Message inside a bordered box, full-width Send. */ .akd-contact .wpcf7-form { margin-top: 1.25rem; text-align: left; } .akd-contact .akd-form-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; row-gap: 0; margin-bottom: 2.25rem; } @media (max-width: 600px) { .akd-contact .akd-form-row { grid-template-columns: 1fr; row-gap: 1.75rem; } } .akd-contact .akd-field { display: block; width: 100%; } .akd-contact .akd-field__label { display: block; font-family: var(--akd-font-body); font-size: 0.95rem; color: var(--akd-color-text); margin-bottom: 0.4rem; } /* Input baseline — strip browser styling so we can match the mockup. */ .akd-contact .akd-input { display: block; width: 100%; font-family: var(--akd-font-body); font-size: 1rem; color: var(--akd-color-text); background: transparent; border: none; border-radius: 0; box-shadow: none; box-sizing: border-box; padding: 0.5em 0; -webkit-appearance: none; appearance: none; } .akd-contact .akd-input--text { border-bottom: 1px solid var(--akd-color-text); } .akd-contact .akd-input--textarea { min-height: 11em; border: 1px solid var(--akd-color-text); padding: 0.85em 1em; resize: vertical; } .akd-contact .akd-input:focus { outline: none; border-color: var(--akd-color-accent); } /* CF7 wraps each control in a span; make sure it doesn't break our label * stacking. */ .akd-contact .wpcf7-form-control-wrap { display: block; } .akd-contact .akd-submit-row { margin-top: 1.75rem; } .akd-contact .akd-submit { display: block; width: 100%; background: var(--akd-color-accent); color: #ffffff; padding: 1.1em 2em; font-family: var(--akd-font-display); font-size: 0.875rem; letter-spacing: 0.14em; text-transform: uppercase; border: none; border-radius: 0; cursor: pointer; transition: background-color 180ms ease; -webkit-appearance: none; appearance: none; } .akd-contact .akd-submit:hover { background: #9a8a7c; } /* ---------- 8. Project detail pages + WP gallery override ---------- */ .akd-project { box-sizing: border-box; width: min(var(--akd-content-wide), calc(100vw - 3rem)); max-width: none; margin-top: clamp(1.25rem, 2vw, 2rem); margin-bottom: clamp(2rem, 5vw, 5rem); margin-left: 50%; transform: translateX(-50%); position: relative; padding: 0; } /* Project subpage header bar: title (Montserrat) at top-left, * "← Back to all projects" link at top-right, baseline-aligned. */ .akd-project__header { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); } .akd-project__title, .akd-project__header h1, .akd-project h1 { font-family: var(--akd-font-display); font-weight: 400; font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: 0.04em; margin: 0; text-align: left; } .akd-project__title small { font-size: 0.75em; font-weight: 400; color: var(--akd-color-text-muted); margin-left: 0.4em; } .akd-project__back { font-family: var(--akd-font-body); font-size: 0.95rem; letter-spacing: 0.02em; color: var(--akd-color-text); text-decoration: none; white-space: nowrap; transition: opacity 200ms ease; } .akd-project__back:hover { opacity: 0.55; } .akd-project__back .akd-arrow { display: inline-block; margin-right: 0.4em; transition: transform 200ms ease; } .akd-project__back:hover .akd-arrow { transform: translateX(-3px); } @media (max-width: 600px) { .akd-project__header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } } /* In-progress project: header stays at top, "Coming soon" centers in the * remaining space below it. */ .akd-project--in-progress { min-height: 50vh; } .akd-project--in-progress > p { text-align: center; padding: clamp(3rem, 8vw, 6rem) 0; color: var(--akd-color-text-muted); font-size: 1.05rem; letter-spacing: 0.04em; } /* WP [gallery] shortcode rebuild as a row-major masonry. CSS Grid with * 1px auto-rows + per-item span set by JS (see gallery-masonry.js) * gives true masonry: image 2 sits NEXT to image 1, image 3 starts a * new row but slots in tight beneath whichever of 1 or 2 is shorter, * with no fixed-row gaps. Image order is preserved (column-major * column-count layout would have read 1, 2, 3 down the left column * first, breaking Lauren's reading order). */ .akd-project .gallery, .akd-additional-gallery .gallery { display: grid !important; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 1px; column-gap: 30px; /* row-gap MUST be 0: with grid-auto-rows:1px any row-gap > 0 would * be inserted between every row line within a spanned item, ballooning * each item to thousands of px tall. The 30px row gutter is folded * into each item's span by the JS (span = ceil(height + 30)). */ row-gap: 0; margin: 0 0 30px !important; clear: both; width: 100%; align-items: start; } @media (max-width: 700px) { .akd-project .gallery, .akd-additional-gallery .gallery { grid-template-columns: 1fr; } } .akd-project .gallery br, .akd-additional-gallery .gallery br, .akd-project .gallery br[style*="clear"], .akd-additional-gallery .gallery br[style*="clear"] { display: none !important; } .akd-project .gallery-item, .akd-additional-gallery .gallery-item, .akd-project dl.gallery-item, .akd-additional-gallery dl.gallery-item { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; float: none !important; text-align: left; align-self: start; /* Hide each item until JS sets its grid-row span from the image's * natural aspect ratio. Without a correct span, items overflow * their grid area and overlap each other. */ visibility: hidden; } .akd-project .gallery-item[data-akd-spanned], .akd-project dl.gallery-item[data-akd-spanned], .akd-additional-gallery .gallery-item[data-akd-spanned], .akd-additional-gallery dl.gallery-item[data-akd-spanned] { visibility: visible; } /* Upstate NY (page 541): first gallery image spans both columns — for * the home-hero photo that opens the project. `grid-column: 1 / -1` * is the Grid equivalent of multi-column's `column-span: all`. */ body.page-id-541 .akd-project .gallery .gallery-item:first-child, body.page-id-541 .akd-project .gallery dl.gallery-item:first-child { grid-column: 1 / -1; } /* Print: bypass masonry (it relies on JS-set `grid-row-end` values * that are pixel-based; in print the units shift). Stack each photo * on its own row at full width. */ @media print { .akd-project .gallery, .akd-additional-gallery .gallery { display: block !important; } .akd-project .gallery-item, .akd-additional-gallery .gallery-item, .akd-project dl.gallery-item, .akd-additional-gallery dl.gallery-item { visibility: visible !important; grid-row: auto !important; display: block !important; width: 100% !important; margin-bottom: 30px !important; page-break-inside: avoid; break-inside: avoid; } } /* CSS-Media-Query-Level-5 fallback: when the user agent has scripting * disabled, JS won't set `data-akd-spanned`, so items would stay * hidden. Force them visible and switch the gallery back to a simple * 2-column flow. Browsers without `(scripting:none)` support ignore * this — those users are running JS anyway. */ @media (scripting: none) { .akd-project .gallery, .akd-additional-gallery .gallery { display: block !important; column-count: 2; column-gap: 30px; } .akd-project .gallery-item, .akd-additional-gallery .gallery-item, .akd-project dl.gallery-item, .akd-additional-gallery dl.gallery-item { visibility: visible !important; display: inline-block !important; width: 100% !important; margin: 0 0 30px !important; break-inside: avoid; } @media (max-width: 700px) { .akd-project .gallery, .akd-additional-gallery .gallery { column-count: 1; } } } /* WP/Divi default rule sets .gallery-item a { width: 90% } which * leaves a phantom 10% gap on the right of every gallery image. */ .akd-project .gallery-item a, .akd-additional-gallery .gallery-item a, .akd-project .gallery-caption, .akd-additional-gallery .gallery-caption, .akd-project dl.gallery-item dt a, .akd-additional-gallery dl.gallery-item dt a { width: 100% !important; display: block !important; } .akd-project .gallery-icon, .akd-additional-gallery .gallery-icon { margin: 0 !important; padding: 0 !important; border: none !important; } .akd-project .gallery-icon a, .akd-additional-gallery .gallery-icon a { display: block; overflow: hidden; } .akd-project .gallery-icon, .akd-additional-gallery .gallery-icon { background: linear-gradient(135deg, #ece4dc 0%, #f3efea 100%); } .akd-project .gallery-icon img, .akd-additional-gallery .gallery-icon img { display: block; width: 100% !important; height: auto !important; border: none !important; transition: transform 600ms ease, opacity 600ms ease; opacity: 0; } .akd-project .gallery-icon img.is-loaded, .akd-additional-gallery .gallery-icon img.is-loaded { opacity: 1; } .akd-project .gallery-icon a:hover img, .akd-additional-gallery .gallery-icon a:hover img { transform: scale(1.015); } /* Kill any opacity / filter overlay on gallery image hover (Divi/lightbox * plugins sometimes add a subtle fade — keep the photo solid). */ .akd-project .gallery a, .akd-project .gallery a:hover, .akd-project .gallery a img, .akd-project .gallery a:hover img, .akd-additional-gallery .gallery a, .akd-additional-gallery .gallery a:hover, .akd-additional-gallery .gallery a img, .akd-additional-gallery .gallery a:hover img { opacity: 1 !important; filter: none !important; } .akd-project .gallery a::before, .akd-project .gallery a::after, .akd-additional-gallery .gallery a::before, .akd-additional-gallery .gallery a::after { display: none !important; } .akd-project .gallery-caption, .akd-additional-gallery .gallery-caption, .akd-project .gallery-item .wp-caption-text, .akd-additional-gallery .gallery-item .wp-caption-text { display: none !important; } /* Old caption-shortcode galleries on legacy project pages: also lay out * as a 2-column grid so they sit alongside the new gallery cleanly. */ .akd-project [id^="attachment_"], .akd-project .wp-caption { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ---------- 9. Projects index 6-tile grid ---------- */ /* The Projects index page (id 9) is rendered through a Divi Theme Builder * template that wraps content in .et_pb_text_inner (max-width 1080px), so * a normal max-width on the grid won't escape that. Use a viewport-relative * "full-bleed" breakout so the grid can take up to 1700px regardless of * its parent's width. Same trick on project subpages via .container fix. */ body.page-id-9 .container, body.parent-pageid-9 .container { max-width: var(--akd-content-wide) !important; width: 100% !important; } .akd-projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 50px; row-gap: 50px; box-sizing: border-box; /* Viewport breakout — escape any constrained Divi parent. */ width: min(var(--akd-content-wide), calc(100vw - 3rem)); max-width: none; margin: clamp(3rem, 6vw, 6rem) calc(50% - 50vw + 1.5rem); margin-left: 50%; transform: translateX(-50%); margin-right: 0; position: relative; padding: 0; } @media (max-width: 1000px) { .akd-projects-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .akd-projects-grid { grid-template-columns: 1fr; column-gap: 0; row-gap: 30px; } } @media (max-width: 600px) { .akd-projects-grid { grid-template-columns: 1fr; } } /* Belt: hide any stray autop-injected empty

between tiles. */ .akd-projects-grid > p:empty, .akd-projects-grid > br { display: none !important; } /* ---------- 10. Mobile responsive refinements ---------- */ /* Catch-all section for narrow-viewport tweaks across the site. */ /* Mobile header: bigger logo, flush edges, larger hamburger tap target. * The site uses Divi Mad Menu plugin — actual class is .dvmm_logo (NOT * .dvmm_menu_logo). */ @media (max-width: 980px) { /* Logo: force the width on EVERY level (wrap, inner crop container, * SVG itself) so Divi's stock 200px image styling doesn't crop us. */ .dvmm_mad_menu .dvmm_logo, .dvmm_mad_menu .dvmm_logo_img, .dvmm_mad_menu img.dvmm_logo_img, .dvmm_mad_menu .dvmm_logo__wrap, .dvmm_mad_menu .dvmm_logo__wrap img, .dvmm_logo, .dvmm_logo_img, img.dvmm_logo_img, .dvmm_logo__wrap, .dvmm_logo__wrap img { width: 230px !important; min-width: 230px !important; max-width: 230px !important; height: auto !important; overflow: visible !important; } /* Flush logo to left edge. */ .dvmm_logo__wrap, .dvmm_content { padding-left: 0 !important; margin-left: 0 !important; } /* Flush hamburger to right edge with internal padding for tap area. */ .dvmm_mobile__menu, .dvmm_mobile_menu__wrap { margin-right: 0 !important; padding-right: 0 !important; } .dvmm_mobile_menu_toggle { margin-right: 0 !important; padding: 0 1rem !important; } .dvmm_mobile_menu_toggle_icon { font-size: 32px !important; width: auto !important; } /* Header outer container — flush */ .dvmm_mad_menu, .dvmm_menu_inner_container, .et-l--header .et_pb_row, .et-l--header .et_pb_section, .et-l--header .container { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: 100% !important; width: 100% !important; } } /* Mobile menu overlay styling is mostly handled inside Divi UI via the * Divi Mad Menu module settings. A few CSS-only fixes layered on top: */ @media (max-width: 980px) { /* Match desktop's typographic treatment — same family, weight, * uppercase + letter-spacing. Slightly larger than desktop (16px) * for tap-target legibility. Divi UI sets these on * `.dvmm_mad_menu_0_tb_header .dvmm_mobile__menu .dvmm_menu li a` * at Montserrat / 24px / no transform — overriding here. */ body .dvmm_mad_menu_0_tb_header .dvmm_mobile__menu .dvmm_menu li a, body .dvmm_mobile_menu_wrapper .dvmm_menu li a, body .dvmm_mobile_menu_wrapper .dvmm_link_text { font-family: var(--akd-font-body) !important; font-weight: 400 !important; font-size: 20px !important; letter-spacing: 1px !important; text-transform: uppercase !important; } /* No active-page dot inside the open mobile menu. */ .dvmm_mobile_menu_wrapper li > a::after, .dvmm_mobile_menu_wrapper li > a::before, .dvmm_mobile_menu_wrapper li.menu-item.current-menu-item > a::after, .dvmm_mobile_menu_wrapper li.menu-item.current_page_item > a::after, .dvmm_mobile_menu_wrapper li.menu-item.current-menu-ancestor > a::after, .dvmm_mobile_menu_wrapper a:hover::after, .dvmm_mobile_menu_wrapper .dvmm_link_text::after { display: none !important; opacity: 0 !important; content: none !important; } /* Top-align menu items with breathing room. These layout rules ONLY * apply when the menu is open — when closed, the wrapper falls back * to plugin defaults (offscreen via animation) so it doesn't push * layout containers. `display: block` sidesteps the dvmm plugin's * own flex centering on the inner