/* Theme Name: Michael Hanrahan Photography Version: 0.4.0 Requires at least: 6.6 Requires PHP: 8.1 Text Domain: mh-photography */ *{box-sizing:border-box}html,body{margin:0;background:#0b0b0b;color:#fff;font-family:Arial,sans-serif}button{font:inherit} .site-banner{position:fixed;inset:0 0 auto;height:82px;z-index:120;display:grid;grid-template-columns:1fr minmax(220px,42vw) 1fr;align-items:center;padding:0 34px;color:#fff;transition:background .3s,color .3s}.brand{display:inline-flex;align-items:center;gap:10px;width:max-content;color:inherit;text-decoration:none}.brand-mark{width:42px;height:42px;flex:0 0 42px;background:currentColor;mask:url('assets/mh-only-black.svg') center/contain no-repeat;-webkit-mask:url('assets/mh-only-black.svg') center/contain no-repeat}.brand-lockup{display:flex;flex-direction:column;gap:3px}.brand-name{font:600 13px/1.05 Georgia,serif;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}.brand-discipline{font:9px/1 Arial,sans-serif;letter-spacing:.28em;text-transform:uppercase;opacity:.75}.draft{display:inline-block;margin-left:2px;padding:3px 6px;border:1px solid currentColor;font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.75}.site-section-title{text-align:center;font-size:clamp(20px,2vw,30px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.nav{display:flex;gap:25px;font-size:14px;justify-self:end}.nav a,.nav span{color:inherit;text-decoration:none} .home{min-height:100vh;position:relative;overflow:hidden}.hero-layer{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.025);transition:opacity 1.55s cubic-bezier(.4,0,.2,1),transform 2.4s ease}.hero-layer.is-visible{opacity:1;transform:scale(1)}.shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.77),rgba(0,0,0,.12) 68%,rgba(0,0,0,.38))}.shell{position:relative;min-height:100vh}.hint{position:absolute;right:44px;bottom:34px;font-size:13px;opacity:.75} .menu-toggle{position:fixed;left:0;top:58vh;transform:translateY(-50%);z-index:170;display:flex;align-items:center;gap:7px;border:1px solid rgba(23,23,21,.18);border-radius:0 24px 24px 0;background:#f3f1ec;color:#171715;padding:13px 17px 13px 12px;font:700 11px/1 Arial;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.menu-toggle-arrow{font-size:16px;line-height:.7}.menu-closed .menu-toggle{flex-direction:row-reverse}.menu-closed .menu-toggle-arrow{transform:rotate(180deg)} .menu-backdrop{display:block;position:fixed;inset:82px 0 0;z-index:128;border:0;background:rgba(8,8,8,.5);opacity:1;transition:opacity .38s;cursor:default}.menu-closed .menu-backdrop{opacity:0;pointer-events:none}.menu-panel{position:fixed;inset:82px auto 0 0;width:min(500px,46vw);z-index:140;background:rgba(12,12,12,.84);backdrop-filter:blur(8px);transform:translateX(0);transition:transform .5s cubic-bezier(.22,1,.36,1);overflow:auto}.menu-closed .menu-panel{transform:translateX(-101%);pointer-events:none}.menu-inner{width:100%;padding:clamp(54px,12vh,116px) 44px 44px 94px}.menu-back{display:block;border:0;background:none;color:#fff;padding:0 0 14px;cursor:pointer;font-size:15px}.menu-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.17em;opacity:.72;min-height:16px}.menu-heading{font-size:clamp(38px,4.5vw,66px);line-height:.98;font-weight:500;margin:12px 0 30px;min-height:1.05em}.menu-items{display:flex;flex-direction:column;align-items:flex-start;transition:opacity .16s,transform .22s}.menu-items.is-changing{opacity:0;transform:translateX(14px)}.menu-item{border:0;background:none;color:#fff;padding:6px 0;font-size:clamp(22px,2.2vw,30px);cursor:pointer;opacity:.63;text-align:left;transition:opacity .25s,transform .25s}.menu-item:is(:hover,:focus-visible,.active){opacity:1;transform:translateX(9px)}.menu-item:after{content:' ��';opacity:0;transition:opacity .25s}.menu-item:is(:hover,:focus-visible,.active):after{opacity:1}.menu-item.is-muted{cursor:default;opacity:.35}.menu-item.is-muted:after{display:none} .gallery{display:none;min-height:100vh;background:#f3f1ec;color:#171715;padding:96px 42px 70px}.gallery.show{display:block}.gallery-open{height:auto!important;overflow-y:auto!important;background:#f3f1ec}.gallery-open .site-banner{background:#f3f1ec;color:#171715}.gallery-open .home{display:none}.grid{columns:3 280px;column-gap:14px;padding-top:14px}.tile{width:100%;display:block;margin:0 0 14px;break-inside:avoid;background:#ddd;cursor:zoom-in}.tile.reveal-pending{opacity:0;transform:translate(var(--reveal-x,0),52px) scale(.95);filter:blur(.35px)}.tile.revealed{opacity:1;transform:none;filter:none;transition:opacity 1.5s cubic-bezier(.16,1,.3,1),transform 1.75s cubic-bezier(.16,1,.3,1);transition-delay:var(--reveal-delay,0s)} .viewer{display:none;position:fixed;inset:0;z-index:200;background:rgba(6,6,6,.97);align-items:center;justify-content:center;padding:48px 90px}.viewer.show{display:flex;animation:viewerBack .35s ease-out both}.viewer-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);align-items:center;gap:32px;max-width:1380px;width:100%;height:calc(100vh - 96px)}.viewer.show .viewer-stage{animation:viewerStage .82s cubic-bezier(.22,.75,.2,1) both}.viewer-img{max-width:100%;max-height:calc(100vh - 96px);object-fit:contain;justify-self:center}.viewer.show .viewer-img{animation:viewerImage 1.05s cubic-bezier(.16,.8,.22,1) both}.viewer-info{color:#f4f2ed;align-self:end;padding:0 0 32px}.viewer-label{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#aaa}.viewer-title{font-size:30px;font-weight:500;margin:10px 0 8px}.viewer-location{font-size:15px;color:#c8c5bd;margin-bottom:24px}.viewer-story{font:18px/1.55 Georgia,serif;color:#dedbd4}.viewer button{position:absolute;border:0;background:rgba(0,0,0,.28);color:#fff;cursor:pointer;padding:15px;font-size:25px}.viewer-close{top:18px;right:22px;z-index:80}.viewer-prev,.viewer-next{position:fixed!important;top:50%!important;transform:translateY(-50%);z-index:80;width:52px;height:90px}.viewer-prev{left:8px}.viewer-next{right:8px}.viewer-count{position:absolute;right:30px;bottom:20px;font-size:14px;color:#aaa} .phone-row{display:grid;grid-template-columns:minmax(180px,1fr) minmax(160px,1fr);gap:10px}.contact-form select{background:#1c1c1c;border:1px solid #555;color:#fff;padding:13px;font:16px Arial}.phone-help{font-size:12px;letter-spacing:0;text-transform:none;color:#bbb}@keyframes viewerBack{from{opacity:0}to{opacity:1}}@keyframes viewerStage{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}@keyframes viewerImage{from{opacity:0;transform:translateY(26px) scale(.965)}to{opacity:1;transform:none}} @media(max-width:750px){.site-banner{height:74px;padding:0 15px;grid-template-columns:1fr auto}.site-section-title{position:absolute;top:47px;left:15px;right:15px;font-size:15px}.site-banner .nav{gap:10px}.site-banner .nav a,.site-banner .nav span{font-size:11px}.site-banner .brand{font-size:11px}.draft{font-size:9px;margin-left:5px;padding:3px 5px}.nav span{display:none}.menu-toggle{top:50dvh}.menu-backdrop{inset:74px 0 0}.menu-panel{inset:74px 0 0;width:100%;background:rgba(12,12,12,.91);backdrop-filter:blur(6px)}.menu-inner{padding:clamp(70px,14vh,122px) 26px 36px 90px}.menu-heading{font-size:clamp(42px,13vw,62px);margin-bottom:25px}.menu-item{font-size:clamp(25px,7vw,34px);padding:7px 0}.hint{right:20px;bottom:20px}.gallery{padding:86px 12px 44px}.grid{columns:2 145px;column-gap:8px;padding-top:4px}.tile{margin-bottom:8px}.viewer{padding:74px 16px 24px;overflow:auto;align-items:flex-start}.viewer-stage{display:block;height:auto;padding:0 32px}.viewer-img{max-height:62vh;display:block;margin:auto}.viewer-info{padding:24px 4px 45px}.viewer-title{font-size:25px}.viewer-prev,.viewer-next{width:46px;height:96px}.viewer-prev{left:0}.viewer-next{right:0}.phone-row{grid-template-columns:1fr}} @media(prefers-reduced-motion:reduce){.hero-layer,.menu-panel,.menu-backdrop,.menu-items,.tile.revealed,.viewer.show,.viewer-stage,.viewer-img{transition:none!important;animation:none!important}} .menu-inner{padding-left:130px}.menu-back[hidden]{display:none}@media(max-width:750px){.menu-inner{padding-left:110px;padding-right:22px}} .menu-closed .menu-toggle-arrow{transform:none} .menu-item:after{display:none}.menu-item.has-submenu:after{display:inline} .menu-inner{padding-top:calc(58vh - 112px)} @media(min-width:751px){.menu-heading{font-size:clamp(30px,2.7vw,38px);line-height:1.02;margin:8px 0 14px;height:3.08em;overflow:hidden}.menu-item{font-size:clamp(18px,1.65vw,23px);padding:4px 0}} @media(max-width:750px){.menu-inner{padding-top:calc(50dvh - 104px)}} .menu-heading{opacity:1;transform:translateY(0);transition:opacity .34s ease,transform .42s cubic-bezier(.22,1,.36,1)} .menu-heading.is-changing{opacity:0;transform:translateY(7px)} .menu-item{width:100%;transform:none!important;text-indent:0;transition:opacity .25s,text-indent .25s} .menu-item:is(:hover,:focus-visible,.active){text-indent:9px} @media(max-width:750px){.brand{gap:7px}.brand-mark{width:32px;height:32px;flex-basis:32px}.brand-name{font-size:10px;letter-spacing:.12em}.brand-discipline{font-size:7px}.draft{font-size:7px;margin-left:0;padding:2px 4px}} .brand-mark{mask-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjAiIGhlaWdodD0iMjIwIiB2aWV3Qm94PSIwIDAgMjYwIDIyMCIgY29sb3I9ImJsYWNrIiBmaWxsPSJibGFjayI+PHRpdGxlPk1pY2hhZWwgSGFucmFoYW4gUGhvdG9ncmFwaHk8L3RpdGxlPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ2LjUgNjApIj48cGF0aCBkPSJNMCAwSDIyTDU3IDc3TDg2IDBIMTA4VjEuNUMxMDAgMS41IDk5IDMgOTkgMTBWOTBDOTkgOTcgMTAwIDk4LjUgMTA4IDk4LjVWMTAwSDc1Vjk4LjVDODMgOTguNSA4NSA5NyA4NSA5MFYyMC42NUw1Mi45NCAxMDBINDdMMTUgMTdWODVDMTUgOTYgMTYgOTguNSAyMyA5OC41VjEwMEgwVjk4LjVDNiA5OC41IDcgOTYgNyA4NVYxMkM3IDQgNiAxLjUgMCAxLjVaIi8+PHBhdGggZD0iTTc1IDBIMTA4VjEuNUMxMDEgMS41IDk5IDMgOTkgMTBWNTFIMTQzVjEwQzE0MyAzIDE0MSAxLjUgMTM0IDEuNVYwSDE2N1YxLjVDMTU5IDEuNSAxNTcgMyAxNTcgMTBWOTBDMTU3IDk3IDE1OSA5OC41IDE2NyA5OC41VjEwMEgxMzRWOTguNUMxNDEgOTguNSAxNDMgOTcgMTQzIDkwVjU0SDk5VjkwQzk5IDk3IDEwMSA5OC41IDEwOCA5OC41VjEwMEg3NVY5OC41QzgzIDk4LjUgODUgOTcgODUgOTBWMTBDODUgMyA4MyAxLjUgNzUgMS41WiIvPjwvZz48cGF0aCBkPSJNMjIgNzZWMjBIMjM4Vjc2TTIyIDE0NFYyMDBIMjM4VjE0NCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMi41Ii8+PC9zdmc+Cg==');-webkit-mask-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNjAiIGhlaWdodD0iMjIwIiB2aWV3Qm94PSIwIDAgMjYwIDIyMCIgY29sb3I9ImJsYWNrIiBmaWxsPSJibGFjayI+PHRpdGxlPk1pY2hhZWwgSGFucmFoYW4gUGhvdG9ncmFwaHk8L3RpdGxlPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ2LjUgNjApIj48cGF0aCBkPSJNMCAwSDIyTDU3IDc3TDg2IDBIMTA4VjEuNUMxMDAgMS41IDk5IDMgOTkgMTBWOTBDOTkgOTcgMTAwIDk4LjUgMTA4IDk4LjVWMTAwSDc1Vjk4LjVDODMgOTguNSA4NSA5NyA4NSA5MFYyMC42NUw1Mi45NCAxMDBINDdMMTUgMTdWODVDMTUgOTYgMTYgOTguNSAyMyA5OC41VjEwMEgwVjk4LjVDNiA5OC41IDcgOTYgNyA4NVYxMkM3IDQgNiAxLjUgMCAxLjVaIi8+PHBhdGggZD0iTTc1IDBIMTA4VjEuNUMxMDEgMS41IDk5IDMgOTkgMTBWNTFIMTQzVjEwQzE0MyAzIDE0MSAxLjUgMTM0IDEuNVYwSDE2N1YxLjVDMTU5IDEuNSAxNTcgMyAxNTcgMTBWOTBDMTU3IDk3IDE1OSA5OC41IDE2NyA5OC41VjEwMEgxMzRWOTguNUMxNDEgOTguNSAxNDMgOTcgMTQzIDkwVjU0SDk5VjkwQzk5IDk3IDEwMSA5OC41IDEwOCA5OC41VjEwMEg3NVY5OC41QzgzIDk4LjUgODUgOTcgODUgOTBWMTBDODUgMyA4MyAxLjUgNzUgMS41WiIvPjwvZz48cGF0aCBkPSJNMjIgNzZWMjBIMjM4Vjc2TTIyIDE0NFYyMDBIMjM4VjE0NCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMi41Ii8+PC9zdmc+Cg==')} .site-section-title{font-family:Georgia,'Times New Roman',serif;font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(15px,1.35vw,21px)} /* Mobile pull-to-refresh: keep the root page as the vertical gesture owner. */ @media(max-width:750px){html,body{overscroll-behavior-y:auto!important}body.menu-closed,.menu-closed .home{overflow-x:hidden!important;overflow-y:visible!important;touch-action:pan-y!important}} /* Three-row mobile banner: brand, navigation, section title. */ @media(max-width:750px){.site-banner{height:128px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:7px 12px;background:rgba(10,10,10,.5)}.site-banner .brand{height:48px;margin:0 auto;justify-content:center}.site-banner .nav{display:flex!important;justify-content:center;justify-self:auto;gap:20px;height:30px;align-items:center;width:100%}.site-banner .nav a{font-size:11px}.site-banner .nav span{display:none}.site-section-title{position:static;width:100%;height:36px;line-height:36px;font-size:13px;text-align:center}.menu-backdrop{inset:128px 0 0}.menu-panel{inset:128px 0 0}.gallery{padding-top:140px}} /* Palette test: crisp white surfaces and softened charcoal navigation */ html, body, .gallery, .gallery-open { background: #ffffff; } .gallery-open .site-banner { background: #ffffff; } .menu-panel { background: rgba(24, 24, 24, 0.96); } .menu-backdrop { background: rgba(8, 8, 8, 0.42); } body .menu-panel { background: rgba(56, 56, 56, 0.96) !important; } body .menu-panel { background: rgba(82, 82, 82, 0.78) !important; backdrop-filter: blur(12px) saturate(0.8); -webkit-backdrop-filter: blur(12px) saturate(0.8); } /* Extreme light/translucent comparison */ body .menu-panel { background: rgba(250, 250, 250, 0.56) !important; color: #151515 !important; backdrop-filter: blur(16px) saturate(0.72); -webkit-backdrop-filter: blur(16px) saturate(0.72); } body .menu-panel .menu-back, body .menu-panel .menu-kicker, body .menu-panel .menu-heading, body .menu-panel .menu-item { color: #151515 !important; } body .menu-toggle { background: #ffffff !important; color: #151515 !important; border-color: rgba(21, 21, 21, 0.18) !important; } /* Luminous glass comparison */ body .menu-panel { background: rgba(255, 255, 255, 0.38) !important; backdrop-filter: blur(18px) brightness(1.8) saturate(0.55); -webkit-backdrop-filter: blur(18px) brightness(1.8) saturate(0.55); } /* Extreme near-clear white glass comparison */ body .menu-panel { background: rgba(255,255,255,.16) !important; backdrop-filter: blur(10px) brightness(2.35) saturate(.35) !important; -webkit-backdrop-filter: blur(10px) brightness(2.35) saturate(.35) !important; border-right-color: rgba(255,255,255,.65) !important; } /* Brighter white glass while retaining strong transparency */ body .menu-panel { background: rgba(255,255,255,.28) !important; backdrop-filter: blur(10px) brightness(3) saturate(.25) !important; -webkit-backdrop-filter: blur(10px) brightness(3) saturate(.25) !important; } /* High-contrast ink for the light menu */ body .menu-panel, body .menu-panel .menu-back, body .menu-panel .menu-kicker, body .menu-panel .menu-heading, body .menu-panel .menu-item, body .menu-panel .menu-item::after { color: #050505 !important; } body .menu-panel .menu-item, body .menu-panel .menu-back { opacity: 1 !important; } /* Cinematic menu-to-gallery handoff */ .gallery.show { animation: gallery-arrival 1.15s cubic-bezier(.22,.72,.18,1) both; transform-origin: 50% 0; } @keyframes gallery-arrival { 0% { opacity: 0; transform: translateY(26px) scale(.992); clip-path: inset(0 0 18% 0); } 45% { opacity: .72; } 100% { opacity: 1; transform: translateY(0) scale(1); clip-path: inset(0); } } @media (prefers-reduced-motion: reduce) { .gallery.show { animation: gallery-arrival-reduced .28s ease-out both; } @keyframes gallery-arrival-reduced { from { opacity: 0; } to { opacity: 1; } } } /* Crossfade the open menu into a selected gallery */ body.gallery-open.menu-closed .menu-panel { transform: translateX(-108%) !important; opacity: 0 !important; transition: transform 1.05s cubic-bezier(.32,.02,.16,1), opacity .82s ease .12s !important; } body.gallery-open.menu-closed .menu-backdrop { opacity: 0 !important; transition: opacity .9s ease !important; } body.gallery-open .gallery.show { animation-delay: .1s; } @media (prefers-reduced-motion: reduce) { body.gallery-open.menu-closed .menu-panel, body.gallery-open.menu-closed .menu-backdrop { transition-duration: .2s !important; } } /* Mobile menu and gallery handoff refinement */ @media (max-width: 767px) { body .menu-panel { box-sizing: border-box; width: min(88vw, 23rem) !important; padding-right: clamp(1.25rem, 6vw, 2rem) !important; overflow-x: hidden !important; } body .menu-panel .menu-heading { box-sizing: border-box; width: 100% !important; max-width: 100% !important; padding-right: .2em !important; font-size: clamp(2rem, 10.5vw, 3.25rem) !important; line-height: .98 !important; overflow-wrap: anywhere; } body.gallery-open.menu-closed .menu-panel { transition: transform .82s cubic-bezier(.4,0,.16,1), opacity .68s ease !important; } body.gallery-open.menu-closed .menu-backdrop { transition: opacity .72s ease !important; } body.gallery-open .gallery.show { animation: mobile-gallery-arrival 1s cubic-bezier(.22,.72,.18,1) .14s both !important; } @keyframes mobile-gallery-arrival { 0% { opacity: 0; transform: translateX(18px) scale(.994); } 45% { opacity: .55; } 100% { opacity: 1; transform: translateX(0) scale(1); } } } /* Keep long mobile menu headings on one line */ @media (max-width: 767px) { body .menu-panel .menu-heading { white-space: nowrap !important; overflow-wrap: normal !important; word-break: normal !important; font-size: clamp(1.8rem, 8.6vw, 2.75rem) !important; letter-spacing: -.025em; } } /* Mobile menu row spacing and submenu-arrow clearance */ @media (max-width: 767px) { body .menu-panel { width: 100vw !important; max-width: none !important; } body .menu-panel .menu-heading { margin-bottom: 16px !important; } body .menu-panel .menu-items { gap: 0 !important; } body .menu-panel .menu-item { max-width: calc(100vw - 7rem) !important; } } /* Shared menu element reset for every page */ body .menu-panel .menu-item, body .menu-panel a.menu-item, body .menu-panel button.menu-item, body .menu-panel .menu-back { color: #050505 !important; text-decoration: none !important; text-decoration-line: none !important; border: 0; box-shadow: none; } body .menu-panel a.menu-item:visited { color: #050505 !important; } /* Shared page content layout */ .simple-page{min-height:100vh;padding-top:82px;background:#fff;color:#181818;font-family:Arial,sans-serif;overflow-x:hidden}.page-shell{display:block}.page-copy{max-width:820px;margin:0 auto;padding:48px 28px 64px}.page-hero{width:100%;height:min(42vh,430px);min-height:280px;margin:0 0 36px;background:center/cover no-repeat}.page-content{width:100%;overflow-wrap:anywhere}.page-content h1{font:500 clamp(42px,6vw,72px)/1 Georgia,serif;margin:0 0 28px}.page-content form,.contact-form,.contact-form>*{width:100%;min-width:0;max-width:100%}.contact-form input,.contact-form textarea,.contact-form select{display:block;width:100%!important;min-width:0!important;max-width:100%!important}.contact-form textarea{resize:vertical}.page-menu-preview{position:fixed;inset:82px 0 0;z-index:126;background:center/cover no-repeat;opacity:0;transform:scale(1.02);transition:opacity 1.05s ease,transform 1.5s ease;pointer-events:none}.page-menu-preview.show{opacity:1;transform:scale(1)}.simple-page .site-banner{background:#fff;color:#171717;border-bottom:1px solid rgba(0,0,0,.08)}@media(max-width:750px){.simple-page{padding-top:128px}.page-copy{padding:34px 20px 48px}.page-hero{height:34vh;min-height:210px;margin-bottom:26px}.page-content h1{font-size:44px}.contact-form .phone-row,.contact-form [class*=phone]{grid-template-columns:minmax(0,1fr)!important}.page-menu-preview{inset:128px 0 0}} /* Contact form refinement */ .contact-form{max-width:620px;margin-right:auto} .contact-form .phone-row{display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr);gap:12px;align-items:stretch} .contact-form select{appearance:auto;background:#fff!important;color:#181818!important;border:1px solid #c9c9c9!important;border-radius:4px;padding:12px!important} .contact-form .hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important} @media(max-width:750px){.contact-form .phone-row{grid-template-columns:minmax(120px,42%) minmax(0,1fr)!important;gap:8px}} /* Contact form vertical rhythm */ .contact-form{display:grid;gap:22px} .contact-form>label{display:block;margin:0} .contact-form .phone-help{display:block;margin-top:8px;line-height:1.45;color:#666} .contact-form textarea{min-height:240px} .contact-form .cf-turnstile{margin:4px 0 8px} .contact-form>button[type=submit]{width:max-content;min-width:150px;margin-top:2px;padding:13px 22px} @media(max-width:750px){.contact-form{gap:19px}.contact-form textarea{min-height:220px}} /* Match Name and Email fields to phone controls */ .contact-form input[type="text"]:not(.hp input), .contact-form input[type="email"] { min-height: 48px !important; padding: 12px !important; border: 1px solid #c9c9c9 !important; border-radius: 4px; font: 16px Arial, sans-serif; } /* One consistent size for all visible single-line Contact fields */ .contact-form input:not([type="hidden"]):not(.hp), .contact-form select { min-height: 48px !important; padding: 12px !important; border: 1px solid #c9c9c9 !important; border-radius: 4px; font: 16px Arial, sans-serif; } /* Bright white translucent menu surface */ body .menu-panel { background: rgba(255, 255, 255, 0.84) !important; backdrop-filter: blur(14px) brightness(1.18) saturate(0.55) !important; -webkit-backdrop-filter: blur(14px) brightness(1.18) saturate(0.55) !important; border-right: 1px solid rgba(255, 255, 255, 0.92); } /* Encoding-safe submenu arrows */ body .menu-panel .menu-item.has-submenu::after { content: ' \2192' !important; display: inline !important; } /* Photography landing category tiles */ .photography-categories{background:#fff;color:#111;padding:clamp(64px,8vw,112px) clamp(20px,4vw,64px) 80px} .category-tiles-heading{max-width:1500px;margin:0 auto 34px} .category-tiles-heading span{font-size:12px;letter-spacing:.22em;text-transform:uppercase} .category-tiles-heading h1{font:400 clamp(38px,5vw,72px)/1 Georgia,serif;margin:10px 0 0} .category-tiles-grid{max-width:1500px;margin:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .category-card{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#ddd;color:#fff;text-decoration:none} .category-card img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1),filter .6s} .category-card:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.68))} .category-card span{position:absolute;left:22px;right:22px;bottom:20px;z-index:1;font:400 clamp(22px,2.4vw,38px)/1 Georgia,serif;letter-spacing:.03em} .category-card:hover img,.category-card:focus-visible img{transform:scale(1.045);filter:brightness(1.08)} .gallery-open .photography-categories{display:none} @media(max-width:750px){.photography-categories{padding:52px 12px 44px}.category-tiles-heading{margin-bottom:22px}.category-tiles-heading h1{font-size:40px;line-height:1.16}.category-tiles-grid{grid-template-columns:1fr 1fr;gap:8px}.category-card{aspect-ratio:4/5}.category-card span{left:12px;right:12px;bottom:12px;font-size:22px}} /* Keep the mobile Photography landing title below the three-row fixed banner. */ @media(max-width:750px){ .photography-categories{ padding-top:24px; scroll-margin-top:128px; } } /* Home remains a normal scrolling page: hero first, category tiles below. */ body:not(.simple-page):not(.gallery-open){height:auto!important;overflow-y:auto!important} .photography-categories{scroll-margin-top:82px} @media(max-width:750px){.photography-categories{scroll-margin-top:128px}} /* A short quote occupies the open space above the shared navigation, without moving its rows. */ .menu-quote{position:absolute;top:calc(29vh - 56px);transform:translateY(-50%);left:130px;right:44px;max-height:155px;overflow:hidden;margin:0;color:#111;pointer-events:none} .menu-quote blockquote{margin:0;font:italic 18px/1.35 Georgia,serif} .menu-quote figcaption{margin-top:9px;font:700 10px/1.3 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase} @media(max-width:750px){.menu-quote{top:calc(25dvh - 52px);left:110px;right:22px;max-height:128px}.menu-quote blockquote{font-size:14px;line-height:1.32}.menu-quote figcaption{font-size:9px;margin-top:6px}} @media(max-height:620px){.menu-quote{display:none}} /* Print enquiries in the open photograph viewer */ .viewer-enquiry{display:inline-block;margin-top:24px;padding-bottom:5px;border-bottom:1px solid rgba(255,255,255,.55);color:#fff;font:700 12px/1.5 Arial,sans-serif;letter-spacing:.08em;text-decoration:none;text-transform:uppercase;transition:border-color .2s,opacity .2s}.viewer-enquiry:hover,.viewer-enquiry:focus-visible{border-color:#fff;opacity:.75}@media(max-width:750px){.viewer-enquiry{margin-top:20px;font-size:11px}} /* Shared copyright footer */ .site-copyright{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;padding:28px 20px;background:#fff;color:#242424;border-top:1px solid #e8e8e8;text-align:center;font:12px/1.5 Arial,sans-serif}.site-copyright a{color:inherit;text-underline-offset:3px}.site-copyright a:hover,.site-copyright a:focus-visible{color:#666} /* Clip the mobile hero without creating a nested scrolling container. */ @media (max-width: 900px), (pointer: coarse) { body.home:not(.gallery-open) #home.home { overflow: clip !important; touch-action: pan-y pinch-zoom !important; } } /* Collection pages hide the banner's section title: reserve only its two visible rows. */ @media (max-width: 750px) { body:not(.home):has(#photography-categories) .site-banner { height: 92px !important; } body:not(.home):has(#photography-categories) .mh-gallery-navigation { scroll-margin-top: 110px !important; } body:not(.home) #photography-categories { scroll-margin-top: 92px !important; } body:not(.home):has(#photography-categories) .menu-panel, body:not(.home):has(#photography-categories) .menu-backdrop { top: 92px !important; } } #gallery .mh-randomise { display: inline-block; margin: 10px 0 0; padding: 5px 8px; border: 0; background: transparent; color: #666; font: 12px/1.4 Arial, sans-serif; text-transform: none; letter-spacing: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } #gallery .mh-randomise:hover { color: #111; } #gallery .mh-randomise:focus-visible { outline: 2px solid #555; outline-offset: 3px; } /* Compact gallery introductions; retain clearance below the fixed banner. */ /* Empty banner titles must not reserve a third mobile row. */ @media(max-width:750px){ .site-banner:has(.site-section-title:empty){height:92px!important} .site-banner .site-section-title:empty{display:none!important} body:has(.site-banner .site-section-title:empty) .menu-panel, body:has(.site-banner .site-section-title:empty) .menu-backdrop{top:92px!important} } body:not(.home) #photography-categories .mh-gallery-navigation{margin-bottom:6px!important} #gallery.gallery { padding-top: 88px !important; } #gallery > .mh-photo-gallery-heading { padding-top: 0 !important; padding-bottom: 12px !important; } #gallery .mh-photo-gallery-heading .mh-gallery-navigation { margin-bottom: 4px !important; } #gallery .mh-photo-gallery-heading h1 { margin-top: 4px !important; } body:not(.home) #photography-categories { padding-top: 8px !important; } @media (max-width: 750px) { #gallery.gallery, body:not(.home):has(#photography-categories) #gallery { padding-top: 98px !important; } } /* Keep the mobile menu concise; the section label supplies context. */ @media (max-width: 750px) { #menu-panel #menu-heading { display: none !important; } #menu-panel .menu-item { font-size: 23px !important; line-height: 1.25; } } /* Submenu arrows must not create empty wrapped lines on mobile. */ @media(max-width:750px){ #menu-panel .menu-item.has-submenu{position:relative;} #menu-panel .menu-item.has-submenu::after{position:absolute;right:-18px;top:7px;white-space:nowrap;} } .site-banner:has(.site-section-title:empty){grid-template-columns:1fr auto}.site-banner .site-section-title:empty{display:none}@media(max-width:750px){.site-banner .nav{gap:clamp(2px,calc((100vw - 310px)/5),12px)!important}.site-banner .nav a{font-size:12px!important;white-space:nowrap}} /* Readable shared banner branding and navigation, without increasing its height. */ @media(min-width:751px){.site-banner .nav{gap:clamp(10px,1.6vw,24px)}.site-banner .nav a{font-size:17px!important;white-space:nowrap}.site-banner .brand-name{font-size:22px!important}.site-banner .brand-discipline{font-size:12px!important}.site-banner .brand-mark{width:48px;height:48px;flex-basis:48px}} @media(min-width:751px) and (max-width:1050px){.site-banner .nav a{font-size:14px!important}.site-banner .brand-name{font-size:16px!important}} @media(max-width:750px){.site-banner .brand-name{font-size:14px!important}.site-banner .brand-discipline{font-size:9px!important}.site-banner .brand-mark{width:36px;height:36px;flex-basis:36px}} #gallery.gallery { padding-top: 88px !important; } #gallery > .mh-photo-gallery-heading { padding-top: 0 !important; padding-bottom: 12px !important; } #gallery .mh-photo-gallery-heading .mh-gallery-navigation { margin-bottom: 4px !important; } #gallery .mh-photo-gallery-heading h1 { margin-top: 4px !important; } body:not(.home) #photography-categories { padding-top: 8px !important; } @media (max-width: 750px) { #gallery.gallery, body:not(.home):has(#photography-categories) #gallery { padding-top: 98px !important; } } /* Keep the mobile menu concise; the section label supplies context. */ @media (max-width: 750px) { #menu-panel #menu-heading { display: none !important; } #menu-panel .menu-item { font-size: 23px !important; line-height: 1.25; } } /* Submenu arrows must not create empty wrapped lines on mobile. */ @media(max-width:750px){ #menu-panel .menu-item.has-submenu{position:relative;} #menu-panel .menu-item.has-submenu::after{position:absolute;right:-18px;top:7px;white-space:nowrap;} } /* Tablet viewer: large image above details, without changing fullscreen. */ @media(min-width:751px) and (max-width:1100px){ #viewer:not(.mh-photo-fullscreen){padding:80px 56px 32px;overflow:auto;align-items:flex-start} #viewer:not(.mh-photo-fullscreen) .viewer-stage{display:block;height:auto;max-width:900px;padding:0} #viewer:not(.mh-photo-fullscreen) #viewer-img{display:block;width:auto;height:auto;max-width:100%;max-height:68vh;margin:0 auto} #viewer:not(.mh-photo-fullscreen) .viewer-info{max-width:760px;margin:0 auto;padding:28px 4px 40px} } body.admin-bar #viewer:not(:fullscreen) .viewer-close{top:50px;position:fixed} @media(max-width:782px){body.admin-bar #viewer:not(:fullscreen) .viewer-close{top:64px}} /* Matching viewer action buttons */ #viewer .viewer-info .viewer-enquiry,#viewer .viewer-info .mh-social-download{width:295px;max-width:100%;box-sizing:border-box;text-align:center} #viewer .viewer-info .mh-social-download{transition:background .2s,border-color .2s;letter-spacing:.03em} #viewer .viewer-info .mh-social-download:hover{background:rgba(255,255,255,.1);border-color:#fff;opacity:1} #viewer .viewer-info .mh-social-download:focus-visible{background:rgba(255,255,255,.1);outline:2px solid #fff;outline-offset:4px} @media(max-width:750px){#viewer .viewer-info .viewer-enquiry,#viewer .viewer-info .mh-social-download{width:100%}} /* Current section heading, without reserved empty lines. */ #menu-panel #menu-heading{height:auto;min-height:0;overflow:visible;line-height:1.12;margin-bottom:14px} @media(max-width:750px){#menu-panel #menu-heading{display:block!important;font-size:26px!important;line-height:1.15!important;white-space:normal!important;overflow-wrap:break-word!important;margin:8px 0 14px!important}} /* Keep About available in the compact mobile header. */ @media(max-width:750px){body .site-banner .nav a[href$="/about/"]{display:inline-block!important}body .site-banner .nav{gap:clamp(11px,3.5vw,16px)!important}} /* MH automatic dark theme. Append to style.css; light/print styles are unchanged. * Source-reviewed against original style.css SHA-256 8c9845329db9b2cbf4940dbce0f68e3345e1d19f1298ac95a2220fd9505e5e91. * Color-only overrides: no image filters, viewer rules, layout, or JavaScript. */ @media screen and (prefers-color-scheme: dark) { :root { color-scheme: dark; background-color: var(--mh-dark-bg); --mh-dark-bg: #121513; --mh-dark-panel: #1c211e; --mh-dark-field: #161a18; --mh-dark-hover: #2a332d; --mh-dark-text: #f1f2ee; --mh-dark-muted: #b6c0b8; --mh-dark-line: #46524a; --mh-dark-control-line: #7a8a7d; --mh-dark-accent: #b9d5bd; --mh-dark-accent-text: #142019; --mh-dark-error: #ffb4a8; } body.wp-theme-mh-photography-theme-clean-v032, body .photography-categories, body .gallery, body .site-copyright { background-color: var(--mh-dark-bg); color: var(--mh-dark-text); border-color: var(--mh-dark-line); } /* Keep the transparent, white-on-photograph hero header unchanged. * The scrolled-home rule must override its existing inline