/* ========================================================================== Contact page - /contact/ ========================================================================== Loaded only on that page (see mm-contact.php). Presentation only: the copy, the form and its recipient are untouched. NO ELEMENT IDs, ANYWHERE. Every block below is found from the page's own structure instead: hero = the top-level container holding the

row = the top-level container holding the form map = the top-level container holding the map widget `.elementor-element-` is generated per site, so a rule keyed on one matches nothing on dev - that is the Point F incident, and it is the single most repeated mistake in this project's history. `:has()` makes the structural version as short as the fragile one. SPECIFICITY. Elementor emits a container's own settings as custom properties at `.elementor-225 .elementor-element.elementor-element-`, which is (0,3,0). Every rule here that overrides one is written `.mm-contact-page .e-con.e-flex.e-parent:has(...)` - four classes plus the :has() argument - so it wins outright rather than tying and being decided by enqueue order. AND IT SETS ELEMENTOR'S VARIABLES, not the properties they feed. Never the `flex` shorthand and never a bare `min-height`: Elementor ships `.e-con.e-flex{flex:var(--flex-grow) var(--flex-shrink) var(--flex-basis)}` at (0,2,0), and feeding the variables means the values still read correctly in the editor and stay adjustable there. TYPOGRAPHY: no font-family anywhere, on purpose - Astra sets Lato site-wide, so inheriting guarantees it by construction. Weights 400 and 700 only; this site loads Lato in 100/400/700 and asking for 300 snaps to Thin. ========================================================================== */ body.mm-contact-page { --mm-c-ink: #000000; --mm-c-body: rgba( 0, 0, 0, 0.64 ); --mm-c-muted: rgba( 0, 0, 0, 0.45 ); --mm-c-rule: #e2ded6; /* the hairline the rest of the site uses */ --mm-c-cream: #f5f1e8; --mm-c-field: rgba( 0, 0, 0, 0.16 ); --mm-c-radius: 12px; --mm-c-measure: 1140px; --mm-c-side: clamp( 24px, 5vw, 48px ); } /* -------------------------------------------------------------------------- The hero band -------------------------------------------------------------------------- */ /* * It was 60vh AND 150px of padding top and bottom inside it, which do not * overlap - they add. On a laptop that is a 540px band holding one word, and * on a tall window it just kept growing. A campaign photograph deserves room; * a page title does not need this much of it. * * clamp() ties the band to the viewport without letting it run away at either * end, and the inner padding comes down to match so it is the band, not the * padding, that sets the height. */ /* * THE HEIGHT IS THE PAGE'S OWN SETTING - deliberately not overridden. * * This band is Elementor's `min_height` (60vh desktop / 40vh tablet / 30vh * mobile), and About Us carries the identical setting on an identical * container. The two pages are the site's only photographic title bands, so * they should behave the same way, and the way to guarantee that is to not * touch it here. * * The route not taken, and why: the background is `background-size: cover`, * which crops, so giving the band the photograph's own ratio makes it show the * whole picture uncropped. It was built that way and it was wrong for this * artwork - at 1920 wide the band became 839px tall, a third of it empty * gradient, to preserve detail nobody was missing. Both frames sit inside the * 60vh crop already. * * What IS overridden below is the inner padding: 150px top and bottom on top * of 60vh, which do not overlap but add, so the padding rather than the band * was setting the height on any window shorter than about 800px. */ .mm-contact-page .e-con.e-flex.e-parent:has( > .e-con-inner h1 ) > .e-con-inner > .e-con { --padding-top: 56px; --padding-bottom: 56px; } /* * NO SCRIM, NO FADE OVER THE PHOTOGRAPH. About Us - the site's only other * photographic title band - shows its artwork plain, and these two should * match. * * There was a 90px white gradient here, fading the band into the section * below so the two did not meet on a hard horizontal edge. It is a reasonable * thing to want and it is not what this site does: it veiled the bottom fifth * of the artwork, which on this banner is the lower half of both frames. If a * hard edge ever needs softening, soften it on the SECTION below rather than * by painting over the picture. */ .mm-contact-page .e-con.e-flex.e-parent:has( > .e-con-inner h1 ) h1.elementor-heading-title { letter-spacing: -0.02em; line-height: 1.05; } /* -------------------------------------------------------------------------- The two-column row -------------------------------------------------------------------------- */ /* * Brought in to the measure the rest of the site uses. It was running to 1300px * of content while the gallery wall and the models grid sit at ~1100, so the * contact page was the one page whose content was wider than everything else. */ .mm-contact-page .e-con.e-flex.e-parent:has( .srfm-form ) { --content-width: var( --mm-c-measure ); --padding-top: 104px; --padding-bottom: 104px; --padding-left: var( --mm-c-side ); --padding-right: var( --mm-c-side ); --align-items: flex-start; } /* * BOTH COLUMNS START ON THE SAME LINE. * * They already did as boxes - the mismatch was inside them. The left column's * content was centred in a box stretched to the form's height, so "Get in * touch" sat ~120px below the first field and the two halves read as unrelated. */ .mm-contact-page .e-con.e-flex.e-parent:has( .srfm-form ) > .e-con-inner > .e-con { --justify-content: flex-start; --padding-top: 0px; } /* * WHICH COLUMN IS WHICH, by content rather than by position - the form's * column is the one with the form in it. `:first-child` would have worked * today and broken silently the first time somebody swapped the two halves in * Elementor. */ .mm-contact-page .e-con.e-flex.e-parent:has( .srfm-form ) > .e-con-inner > .e-con:not(:has( .srfm-form )) { --padding-right: 72px; } /* * THE CARD IS THE COLUMN, NOT THE FORM. * * Worth knowing before touching this: the white panel is the Elementor * container's own background and box-shadow, set in the editor, and SureForms' * .srfm-form-container sits inside it with no styling of its own. Styling the * form container instead - the obvious reading - produced two nested cards, * one inside the other, 50px apart. * * The shadow it carried was 0 40px 60px rgba(0,0,0,.15): heavy enough to read * as a smudge under the card rather than lift. A hairline does the work and * the shadow only has to hint. * * THE PANEL IS WHITE, AND ITS EDGE IS WHAT SEPARATES IT. Not a tint on the * card, and not a tint on the section - both were tried, and the page reads * better with neither: white ground, white panel, a hairline and the faintest * lift. A 1px rule does the work that * `0 40px 60px rgba(0,0,0,.15)` was failing to do. * * A consequence worth knowing before changing it back: SureForms paints its * fields `background-color: hsl(from var(--srfm-color-input-background) h s * l/.05) !important`, forcing 5% alpha whatever the variable holds. On a WHITE * panel that is exactly right - the fields come out a faint grey and read as * insets. On a tinted panel they become a slightly darker tint of it and the * form loses its edges, and the only way out is an `!important` of your own. * Keeping the panel white means not needing one. */ .mm-contact-page .e-con.e-flex.e-parent:has( .srfm-form ) > .e-con-inner > .e-con:has( .srfm-form ) { --padding-top: 38px; --padding-right: 38px; --padding-bottom: 38px; --padding-left: 38px; background-color: #ffffff; border: 1px solid var( --mm-c-rule ); border-radius: var( --mm-c-radius ); box-shadow: 0 14px 34px rgba( 0, 0, 0, 0.055 ); } /* ---- left: heading, standfirst, details ---- */ .mm-contact-page .e-con:has( .srfm-form ) .elementor-widget-heading h3.elementor-heading-title { margin: 0 0 14px; font-size: 40px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: var( --mm-c-ink ); } .mm-contact-page .e-con:has( .srfm-form ) .elementor-widget-text-editor { font-size: 17px; line-height: 1.7; color: var( --mm-c-body ); } /* The standfirst is wrapped in in the content. It is a lede, not an emphasis, and at 17px bold it shouted over the heading above it. */ .mm-contact-page .e-con:has( .srfm-form ) .elementor-widget-text-editor strong { font-weight: 400; } .mm-contact-page .e-con:has( .srfm-form ) .elementor-widget-text-editor p { margin: 0 0 8px; max-width: 42ch; } /* * The contact details, as a real list with rules between the rows rather than * two lines adrift in white space. */ .mm-contact-page .elementor-widget-icon-list .elementor-icon-list-items { margin-top: 34px; border-top: 1px solid var( --mm-c-rule ); } .mm-contact-page .elementor-widget-icon-list .elementor-icon-list-item { align-items: center; gap: 14px; padding: 18px 2px; border-bottom: 1px solid var( --mm-c-rule ); font-size: 16px; line-height: 1.5; color: var( --mm-c-body ); } /* * One of these rows is a link and the other is not, and Elementor nests them * differently: in the linked row the is the flex parent of the icon and * the text, in the plain row the
  • is. So the 14px gap set on the
  • * reached only one of them, and the two labels started 14px apart while their * icons lined up - just enough to look like a rendering fault rather than a * choice. The gap is set on whichever element is actually the flex parent. */ .mm-contact-page .elementor-widget-icon-list .elementor-icon-list-item > a { display: flex; align-items: center; gap: 14px; width: 100%; } .mm-contact-page .elementor-widget-icon-list .elementor-icon-list-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; /* Cream on the white ground. It was briefly white-on-cream, when the section was tinted instead of the panel - a disc the same colour as what it sits on is simply not there. */ background: var( --mm-c-cream ); } .mm-contact-page .elementor-widget-icon-list .elementor-icon-list-icon i, .mm-contact-page .elementor-widget-icon-list .elementor-icon-list-icon svg { font-size: 15px; width: 15px; height: 15px; color: var( --mm-c-ink ); fill: var( --mm-c-ink ); } /* * One of these rows is a link and the other is plain text, so one arrived * permanently underlined and the other did not - the pair read as a mistake. * Both are quiet at rest; the one that IS a link says so on hover. * * Every state pinned: Astra colours a:visited from its global palette, which * is what turned the Our Gallery CONTINUE button black-on-black once a visitor * had been to the target. */ .mm-contact-page .elementor-widget-icon-list .elementor-icon-list-text, .mm-contact-page .elementor-widget-icon-list a, .mm-contact-page .elementor-widget-icon-list a:link, .mm-contact-page .elementor-widget-icon-list a:visited, .mm-contact-page .elementor-widget-icon-list a:hover, .mm-contact-page .elementor-widget-icon-list a:focus { color: var( --mm-c-body ); text-decoration: none; } .mm-contact-page .elementor-widget-icon-list a:hover, .mm-contact-page .elementor-widget-icon-list a:focus { color: var( --mm-c-ink ); text-decoration: underline; text-underline-offset: 3px; } .mm-contact-page .elementor-widget-icon-list a:focus-visible { outline: 2px solid var( --mm-c-ink ); outline-offset: 3px; } /* -------------------------------------------------------------------------- The form -------------------------------------------------------------------------- */ /* * SureForms' own markup, restyled from the outside - none of its structure, * its fields or its recipient settings are touched. * * It was a white card on a white page held apart only by a large soft shadow, * which reads as a rendering artefact rather than a panel. A hairline and the * cream ground the rest of the site uses make it a deliberate object. */ /* Flattened: the column above is the panel now. */ .mm-contact-page .srfm-form-container { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; } .mm-contact-page .srfm-block-label, .mm-contact-page .srfm-form label { margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var( --mm-c-muted ); } .mm-contact-page .srfm-required { color: var( --mm-c-ink ); } /* * Qualified with SureForms' own container, so these actually win. Its base * rules are written `.srfm-form-container .srfm-form .srfm-input-common` and a * plain `.mm-contact-page .srfm-form input` loses to them - which is why the * first version of this file changed nothing at all about the fields. * * Their colours are deliberately left alone: the fields are near-white on a * white card, which is exactly right once the section around it is tinted. */ /* * The field padding is set through SURE FORMS' OWN VARIABLE, not as a property. * * Its rule is * .srfm-form-container .srfm-form .srfm-block:not(.srfm-number-block) * .srfm-input-common { padding: var(--srfm-input-field-padding) } * at (0,5,0) - four classes and a :not() - which beats anything this file can * reasonably write, and the first version of this rule lost silently and left * the fields at 10px/12px. Feeding the variable wins by construction and keeps * the plugin's own mechanism intact, exactly as feeding Elementor's --flex-* * variables does elsewhere in this project. */ .mm-contact-page .srfm-form-container { --srfm-input-field-padding: 13px 16px; } .mm-contact-page .srfm-form-container .srfm-form .srfm-input-common { line-height: 1.5; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .mm-contact-page .srfm-form-container .srfm-form textarea.srfm-input-common { min-height: 150px; resize: vertical; } /* * A visible focus ring on a form is not decoration - it is how a keyboard user * knows where they are. :focus, not :focus-visible: a text field is exactly * the case where a mouse user also needs to see which box they are typing in. */ .mm-contact-page .srfm-form-container .srfm-form .srfm-input-common:focus { outline: none; border-color: var( --mm-c-ink ); box-shadow: 0 0 0 3px rgba( 0, 0, 0, 0.08 ); } .mm-contact-page .srfm-form ::placeholder { color: var( --mm-c-muted ); opacity: 1; } /* The site's button is a black pill - the FAQ's support panel and the Our Gallery collection pages both use it, and this was a 6px-radius rectangle. */ .mm-contact-page .srfm-submit-wrap { margin-top: 6px; } .mm-contact-page .srfm-form .srfm-button, .mm-contact-page .srfm-form button[type="submit"] { padding: 15px 38px; border: 0; border-radius: 999px; background: var( --mm-c-ink ); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; transition: opacity 0.2s ease; } .mm-contact-page .srfm-form .srfm-button, .mm-contact-page .srfm-form .srfm-button:hover, .mm-contact-page .srfm-form .srfm-button:focus, .mm-contact-page .srfm-form button[type="submit"], .mm-contact-page .srfm-form button[type="submit"]:hover, .mm-contact-page .srfm-form button[type="submit"]:focus { color: #ffffff; } .mm-contact-page .srfm-form .srfm-button:hover, .mm-contact-page .srfm-form button[type="submit"]:hover { opacity: 0.82; } .mm-contact-page .srfm-form .srfm-button:focus-visible, .mm-contact-page .srfm-form button[type="submit"]:focus-visible { outline: 2px solid var( --mm-c-ink ); outline-offset: 3px; } /* -------------------------------------------------------------------------- The map -------------------------------------------------------------------------- */ /* * Left full-bleed, which is right for a map, but it met the section above it * on a hard edge with nothing to say it had started. */ .mm-contact-page .e-con.e-flex.e-parent:has( .elementor-widget-google_maps ) { border-top: 1px solid var( --mm-c-rule ); } .mm-contact-page .elementor-widget-google_maps iframe { display: block; filter: saturate( 0.85 ); } /* -------------------------------------------------------------------------- Breakpoints - 1024 / 767, the two the rest of this site uses -------------------------------------------------------------------------- */ @media ( max-width: 1024px ) { .mm-contact-page .e-con.e-flex.e-parent:has( .srfm-form ) { --padding-top: 72px; --padding-bottom: 72px; } .mm-contact-page .e-con.e-flex.e-parent:has( .srfm-form ) > .e-con-inner > .e-con:not(:has( .srfm-form )) { --padding-right: 40px; } .mm-contact-page .e-con:has( .srfm-form ) .elementor-widget-heading h3.elementor-heading-title { font-size: 33px; } } @media ( max-width: 767px ) { body.mm-contact-page { --mm-c-side: clamp( 24px, 6vw, 32px ); } /* * 150px of padding against a 30vh band is what made the phone hero 300px * of mostly-empty pink: the padding, not the band, was setting the height. */ .mm-contact-page .e-con.e-flex.e-parent:has( > .e-con-inner h1 ) > .e-con-inner > .e-con { --padding-top: 28px; --padding-bottom: 28px; } .mm-contact-page .e-con.e-flex.e-parent:has( .srfm-form ) { --padding-top: 48px; --padding-bottom: 48px; } /* The columns stack, so the right-hand gutter that separated them is now just a dent in the left edge of the text. */ .mm-contact-page .e-con.e-flex.e-parent:has( .srfm-form ) > .e-con-inner > .e-con:not(:has( .srfm-form )) { --padding-right: 0px; --padding-bottom: 40px; } .mm-contact-page .e-con:has( .srfm-form ) .elementor-widget-heading h3.elementor-heading-title { font-size: 28px; } .mm-contact-page .e-con:has( .srfm-form ) .elementor-widget-text-editor { font-size: 15px; } .mm-contact-page .e-con.e-flex.e-parent:has( .srfm-form ) > .e-con-inner > .e-con:has( .srfm-form ) { --padding-top: 24px; --padding-right: 20px; --padding-bottom: 24px; --padding-left: 20px; } .mm-contact-page .srfm-form .srfm-button, .mm-contact-page .srfm-form button[type="submit"] { width: 100%; } /* * The page is centre-aligned on mobile by its own Elementor settings, and * for a heading and a standfirst that is right. For this list it is not: a * centred icon+label pair sits at a different x on every row, because the * labels are different lengths, so the icons stop forming a column and the * rows read as unaligned rather than centred. The rules around them already * give the list its own edges, so left-aligning inside those edges looks * deliberate. The heading and standfirst above are left as authored. */ .mm-contact-page .elementor-widget.elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item, .mm-contact-page .elementor-widget.elementor-widget-icon-list .elementor-icon-list-items .elementor-icon-list-item > a { /* (0,5,0). Elementor's own mobile-alignment rule for this widget is (0,4,0) - `.elementor-225 .elementor-element.elementor-element- .elementor-icon-list-item` - so a three-class selector loses to it and a four-class one only ties, which enqueue order then decides. */ justify-content: flex-start; text-align: left; } .mm-contact-page .elementor-widget-google_maps iframe { height: 320px; } }