/* * ShareRing Contact. * * Consumes the scene kit and house style. The flow — one scene, one screen — * comes from .srk-flow in scene-kit.css; the chevron and the page metrics from * assets/js/scene-flow.js. * * The bulk of this file is one job: making the page's real Elementor Pro form * legible on a dark ground. The form is deliberately NOT rebuilt (see * inc/elementor-widget.php), so it arrives with Elementor's own markup and * Elementor's own Global Kit styling, which is designed for a white canvas. * Restyling it is the price of keeping a working form, and it is the right * trade. */ /* --------------------------------------------------------------------------- The accent fallback ------------------------------------------------------------------------ */ /* * On :root, never on the body class. The journey engine writes * --srk-accent-live inline on , and a declaration on a BODY class beats * it for the whole subtree and silently kills the journey. Enqueued only for * templates/company-contact.php, so :root reaches no other page. */ :root { --srk-accent-live: #4D8AFF; } /* --------------------------------------------------------------------------- Beat shapes ------------------------------------------------------------------------ */ .srct-page .srct-centre { text-align: center; } .srct-page .srct-centre p { margin-inline: auto; } .srct-page .srct-centre-actions { justify-content: center; } .srct-page .srct-centre .srct-closer-lockup { margin-inline: auto; } .srct-page .srct-narrow { max-width: 760px; margin-inline: 0; } .srct-page .srct-hero h1 { /* * THE REFERENCE HERO SCALE. Rohan, 2026-09-02, item 1.4: "The KYC page hero * is the reference ... Bring every other page hero to that scale", and at * 2.10b and 2.11 he named the two pages that were visibly oversized. * * Measured at 1440 before this: KYC and every industry page 60px, every * product page 62px, and FOUR pages at 93.6px. --srk-display-l is * clamp(44px, 6.5vw, 96px), so at 1440 it lands 56 per cent above the * reference, which is what "too large" looked like. * * The product pages had already made this move (see the note beside * .srm-hero h1); these four were left behind. --srk-display-m is * clamp(32px, 4.6vw, 62px), which is 62px at 1440, within 3 per cent of the * KYC reference and an existing token rather than a new number. */ font-size: var(--srk-display-m); } .srct-page .srk-scene h2 { font-size: var(--srk-display-m); margin-bottom: 0.5em; } .srct-page .srct-closer-lockup { display: block; width: min(320px, 60%); height: auto; margin: 0 0 clamp(24px, 4vh, 44px); } /* The hero's right column is text, not a device, so it does not want the kit's narrow phone-width column. */ @media (min-width: 900px) { .srct-page .srct-hero .srk-scene-split { grid-template-columns: 1fr minmax(0, 380px); align-items: center; } } /* --------------------------------------------------------------------------- Visit us / email us ------------------------------------------------------------------------ */ .srct-page .srct-reach { margin: 0; display: grid; gap: clamp(20px, 3vh, 32px); } .srct-page .srct-reach-item { padding-top: clamp(14px, 2vh, 20px); border-top: 1px solid var(--srh-hairline); } .srct-page .srct-reach dt { color: var(--srk-accent-live, var(--srh-accent)); font-size: var(--srk-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.5em; } .srct-page .srct-reach dd { margin: 0; } .srct-page .srct-reach dd a { color: var(--srh-pale); font-size: clamp(18px, 1.6vw, 23px); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--srh-hairline); padding-bottom: 2px; } .srct-page .srct-reach dd a:hover, .srct-page .srct-reach dd a:focus-visible { border-bottom-color: var(--srk-accent-live, var(--srh-accent)); } /* --------------------------------------------------------------------------- The offices ------------------------------------------------------------------------ */ .srct-page .srct-locations { list-style: none; margin: clamp(28px, 4.5vh, 52px) 0 0; padding: 0; display: grid; gap: clamp(24px, 3.4vw, 44px); } @media (min-width: 860px) { .srct-page .srct-locations { grid-template-columns: repeat(3, 1fr); } } .srct-page .srct-location { margin: 0; padding-top: clamp(16px, 2.2vh, 22px); border-top: 1px solid var(--srh-hairline); } .srct-page .srct-location h3 { font-size: clamp(19px, 1.6vw, 24px); color: var(--srh-pale); line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 0.5em; } .srct-page .srct-location p { margin: 0; color: var(--srh-ink-soft); max-width: 46ch; } /* --------------------------------------------------------------------------- The Elementor form, on a dark ground ------------------------------------------------------------------------ */ /* * EVERY SELECTOR HERE IS (0,3,0) OR HIGHER, ON PURPOSE. * * Elementor's Global Kit styles inputs and buttons at (0,1,1) — the pattern * `.elementor-kit-5 input`, `.elementor-kit-5 button` — and this project has * already lost two builds to that arithmetic: once to the kit beating a page * rule, and once to the page-navigation chevrons rendering as solid blue * Elementor buttons because their selector had dropped to (0,1,0). * * `.srct-page .srct-form ` is (0,2,1) and wins on class count. Where a * rule targets an Elementor class as well it goes higher again. Nothing here * uses !important, because it does not need to. */ .srct-page .srct-form { margin-top: clamp(28px, 4.5vh, 48px); } /* Elementor lays the form out in its own column grid. Let it. */ .srct-page .srct-form .elementor-field-group { margin-bottom: clamp(16px, 2.4vh, 22px); } .srct-page .srct-form label, .srct-page .srct-form .elementor-field-label { color: var(--srh-ink); font-size: var(--srk-body); font-weight: 600; margin-bottom: 0.4em; display: block; } /* * (0,4,0), and the arithmetic is the whole point. * * The obvious selector — .srct-page .srct-form input[type="text"] — is (0,3,1): * two classes, one attribute, one element. Elementor's Global Kit styles the * same field with * * .elementor-kit-5 input:not([type="button"]):not([type="submit"]) * * which is ALSO (0,3,1): one class, two attributes inside :not(), one element. * An exact tie, decided by source order, and the kit's stylesheet is enqueued * after this one. So the kit won, and every single-line field rendered white * on a #061626 ground. * * The tell was that the TEXTAREA looked right while the inputs did not: there * the same pair is .srct-page .srct-form textarea (0,2,1) against * .elementor-kit-5 textarea (0,1,1), which this file wins. One rule, two * different outcomes, purely on specificity. * * Going through Elementor's own structural classes gives four classes and no * element, (0,4,0), which beats (0,3,1) on the class column before the element * column is ever consulted. It is also more honest about what is being styled: * an Elementor form field, not any input that happens to be here. * * Read off CSS.getMatchedStylesForNode rather than worked out by eye, after * two wrong guesses. */ .srct-page .srct-form .elementor-field-group .elementor-field-textual, .srct-page .srct-form .elementor-field-group textarea.elementor-field, .srct-page .srct-form .elementor-field-group select.elementor-field { width: 100%; padding: 14px 16px; background: var(--srh-surface); border: 1px solid var(--srh-hairline); border-radius: 12px; color: var(--srh-pale); font-family: inherit; font-size: var(--srk-body); line-height: 1.5; /* Elementor's kit sets its own box model on inputs; state ours. */ box-sizing: border-box; } .srct-page .srct-form .elementor-field-group textarea.elementor-field { min-height: 150px; resize: vertical; } /* * The placeholder is the only label these fields have — Elementor renders this * form with placeholders and no visible