/* ========================================================================== Tunji Idowu — Connect Ported from the approved export, not reinterpreted. Every number below is the export's own, resolved from its inline styles; where the export switches on a JavaScript media query, the same switch is written here as a media query at the same width. The export's two breakpoints are 900px and 1100px, and they do different things: below 900 fields stack, the card's drop is shallowest 900 - 1099 fields pair, page still one column 1100 and up page splits into invitation and card The form itself is WPForms'. This dresses WPForms' own modern markup in the approved design rather than replacing it, so validation, anti-spam, notification and confirmation all stay where they belong. Two layers do that dressing, in this order: 1. WPForms' own custom properties. Its modern markup is built on about fifty of them, and every value they carry — the button's blue, the 3px radii, the grey labels — is a default, not a decision. Setting them is how the plugin expects to be themed, and it reaches rules this file never names. 2. Structural rules for what the properties do not cover: the export's chip row, its 46px choice controls, its uppercase button. Layer 2 is written past WPForms' own selectors on purpose. Several of them are of the shape `div.wpforms-container-full .wpforms-field.wpforms-field- radio ul` — three classes and two elements — which outranks a three-class selector however carefully scoped. Naming the container class here is not decoration; it is the difference between a rule applying and not. Every colour here comes from the v2 token layer. This file was the last route stylesheet still reading the shell's older --ti-* aliases; it no longer reads any of them. ========================================================================== */ /* -------------------------------------------------------------------------- PAGE GROUND Astra puts .ast-plain-container on and paints its background at class specificity, which outranks a bare `body`. Both selectors are stated so the ground is the page's regardless of which container Astra resolves to. -------------------------------------------------------------------------- */ .ti-route-connect.ast-plain-container, body.ti-route-connect { background: var(--ti2-cn-ground); } .ti-route-connect .ti-main { background: var(--ti2-cn-ground); } /* Sienna has too little contrast against navy to read as a focus ring, so the two dark bands take the gold accent, as the header and footer already do. */ .ti-route-connect .ti-cn-open :focus-visible, .ti-route-connect .ti-cn-baami :focus-visible { outline-color: var(--ti2-gold); } /* -------------------------------------------------------------------------- 1. THE OPENING BAND -------------------------------------------------------------------------- */ .ti-route-connect .ti-cn-open { position: relative; background: var(--ti2-navy); } /* Decoration, and only decoration: a gold wash falling from the top left. It carries no meaning and no content, which is why it is a gradient on an empty span rather than an image. */ .ti-route-connect .ti-cn-open__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient( 120% 90% at 12% 0%, rgba(var(--ti2-gold-rgb), 0.16) 0%, rgba(var(--ti2-gold-rgb), 0) 58% ); } .ti-route-connect .ti-cn-open__grid { position: relative; max-width: var(--ti2-shell); margin: 0 auto; padding: clamp(28px, 3.6vw, 58px) var(--ti2-gutter) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(26px, 4vw, 80px); align-items: start; } @media (min-width: 1100px) { .ti-route-connect .ti-cn-open__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); } } /* -------------------------------------------------------------------------- 2. INVITATION -------------------------------------------------------------------------- */ .ti-route-connect .ti-cn-invite { min-width: 0; } .ti-route-connect .ti-cn-invite__eyebrow { margin: 0; font-family: var(--ti2-sans); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; font-weight: 600; color: var(--ti2-gold); } .ti-route-connect .ti-cn-invite__heading { margin: clamp(14px, 2vw, 26px) 0 0; max-width: 14ch; font-family: var(--ti2-serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(34px, 4.4vw, 66px); line-height: 1; letter-spacing: -.032em; color: var(--ti2-ivory); text-wrap: balance; } .ti-route-connect .ti-cn-invite__standfirst { margin: clamp(14px, 1.8vw, 24px) 0 0; max-width: 44ch; font-family: var(--ti2-sans); font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.68; font-weight: 300; color: var(--ti2-dune); } /* -------------------------------------------------------------------------- 3. DIRECT The other ways of reaching him, beside the form rather than below it. -------------------------------------------------------------------------- */ .ti-route-connect .ti-cn-direct { display: flex; flex-direction: column; margin-top: clamp(20px, 2.4vw, 34px); padding-top: clamp(14px, 1.6vw, 20px); padding-bottom: clamp(26px, 3.2vw, 56px); border-top: 1px solid rgba(var(--ti2-gold-rgb), 0.55); } .ti-route-connect .ti-cn-direct__label { margin: 0 0 clamp(10px, 1.2vw, 16px); font-family: var(--ti2-sans); font-size: 10px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; color: rgba(var(--ti2-dune-rgb), 0.72); } .ti-route-connect .ti-cn-direct__row { display: flex; flex-direction: column; gap: 6px; padding: clamp(13px, 1.5vw, 18px) 0; border-bottom: 1px solid rgba(var(--ti2-dune-rgb), 0.18); min-height: 52px; color: var(--ti2-ivory); transition: color 200ms var(--ti2-ease); } .ti-route-connect .ti-cn-direct__row:hover, .ti-route-connect .ti-cn-direct__row:focus-visible { color: var(--ti2-gold); } .ti-route-connect .ti-cn-direct__kicker { font-family: var(--ti2-sans); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--ti2-gold); } .ti-route-connect .ti-cn-direct__value { font-family: var(--ti2-serif); font-optical-sizing: auto; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.2; } /* An address is one long unbroken token; on a narrow screen it has to be allowed to break or it pushes the page sideways. */ .ti-route-connect .ti-cn-direct__value--email { word-break: break-word; } .ti-route-connect .ti-cn-direct__note { margin: clamp(14px, 1.6vw, 20px) 0 0; max-width: 40ch; font-family: var(--ti2-sans); font-size: 13.5px; line-height: 1.62; color: rgba(var(--ti2-dune-rgb), 0.82); } /* -------------------------------------------------------------------------- 4. THE FORM CARD The card hangs below the navy band. Its negative bottom margin shortens the grid row by exactly the overhang, and .ti-cn-drop catches it on the page ground beneath. Three depths, one per breakpoint, all the export's. -------------------------------------------------------------------------- */ .ti-route-connect .ti-cn-card { position: relative; z-index: 2; min-width: 0; margin-bottom: -36px; padding: clamp(20px, 2.2vw, 36px); background: var(--ti2-cn-card); border: 1px solid rgba(var(--ti2-gold-rgb), 0.34); box-shadow: 0 24px 58px rgba(6, 14, 24, 0.3); } .ti-route-connect .ti-cn-drop { height: 56px; background: var(--ti2-cn-ground); } @media (min-width: 900px) { .ti-route-connect .ti-cn-card { margin-bottom: -56px; } .ti-route-connect .ti-cn-drop { height: 78px; } } @media (min-width: 1100px) { .ti-route-connect .ti-cn-card { margin-bottom: -104px; } .ti-route-connect .ti-cn-drop { height: 132px; } } /* Once the message has been sent the card's heading is no longer true: the confirmation carries its own, and "Send a message" above "Your message has been received" reads as a contradiction. Without JavaScript the confirmation arrives with the page, so this rule is what removes it; connect.js does the same for the submission that never reloads. */ .ti-route-connect .ti-cn-card:has(.wpforms-confirmation-container-full) .ti-cn-card__heading, .ti-route-connect .ti-cn-card:has(.wpforms-confirmation-container) .ti-cn-card__heading { display: none; } .ti-route-connect .ti-cn-card__heading { margin: 0; font-family: var(--ti2-serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(20px, 1.9vw, 27px); line-height: 1.1; color: var(--ti2-navy); } /* -------------------------------------------------------------------------- 5. THE ERROR SUMMARY Empty and hidden until connect.js reports what WPForms rejected. -------------------------------------------------------------------------- */ .ti-route-connect .ti-form__summary { margin: clamp(12px, 1.4vw, 18px) 0 0; padding: 12px 14px; border: 1px solid var(--ti2-cn-error); background: rgba(138, 43, 43, 0.06); font-family: var(--ti2-sans); font-size: 13px; line-height: 1.55; color: var(--ti2-cn-error); } .ti-route-connect .ti-form__summary p { margin: 0; } /* -------------------------------------------------------------------------- 6. WPFORMS, DRESSED WPForms' modern markup, given the export's geometry. Its own stylesheet still loads and still owns behaviour; these rules sit above it on specificity, never on !important. -------------------------------------------------------------------------- */ .ti-route-connect .ti-cn-card .wpforms-container { margin: 0; /* Layer 1: the plugin's own theming surface, set to the approved system. */ --wpforms-field-background-color: var(--ti2-cn-field); --wpforms-field-text-color: var(--ti2-navy); --wpforms-field-border-color: rgba(var(--ti2-navy-rgb), 0.25); --wpforms-field-border-color-spare: rgba(var(--ti2-navy-rgb), 0.25); --wpforms-field-border-size: 1px; --wpforms-field-border-radius: 0; --wpforms-field-menu-color: var(--ti2-cn-field); --wpforms-field-size-input-height: 48px; --wpforms-field-size-font-size: 16px; --wpforms-field-size-line-height: 1.4; --wpforms-field-size-padding-h: 13px; --wpforms-label-color: var(--ti2-cn-muted); --wpforms-label-sublabel-color: var(--ti2-cn-muted); --wpforms-label-error-color: var(--ti2-cn-error); --wpforms-label-size-font-size: 10px; --wpforms-label-size-line-height: 1.4; --wpforms-label-size-sublabel-font-size: 12px; --wpforms-button-background-color: var(--ti2-navy); --wpforms-button-border-color: var(--ti2-navy); --wpforms-button-text-color: var(--ti2-ivory); --wpforms-button-border-radius: 0; --wpforms-button-border-size: 0; --wpforms-button-size-height: 52px; --wpforms-button-size-font-size: 12px; --wpforms-button-size-padding-h: 30px; --wpforms-button-size-margin-top: 0; --wpforms-container-padding: 0; --wpforms-container-border-style: none; --wpforms-container-border-radius: 0; --wpforms-page-break-color: var(--ti2-gold); } .ti-route-connect .ti-cn-card .wpforms-form { margin: 0; } /* WPForms resets form controls to the browser's own stack, which is the one place on the site where a system font would still show. */ .ti-route-connect .ti-cn-card div.wpforms-container-full input, .ti-route-connect .ti-cn-card div.wpforms-container-full textarea, .ti-route-connect .ti-cn-card div.wpforms-container-full select, .ti-route-connect .ti-cn-card div.wpforms-container-full button { font-family: var(--ti2-sans); } /* One grid for the whole field set. The reason, organisation and message rows span it; name and email pair inside it above 900px. That is the export's arrangement, expressed once rather than as four separate margins. */ .ti-route-connect .ti-cn-card div.wpforms-container-full .wpforms-field-container { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.4vw, 18px); margin-top: clamp(14px, 1.6vw, 20px); } @media (min-width: 900px) { .ti-route-connect .ti-cn-card div.wpforms-container-full .wpforms-field-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-reason, .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-org, .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-subject, .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-message { grid-column: 1 / -1; } } .ti-route-connect .ti-cn-card div.wpforms-container-full .wpforms-field { margin: 0; padding: 0; min-width: 0; } .ti-route-connect .ti-cn-card div.wpforms-container-full .wpforms-field-label, .ti-route-connect .ti-cn-card div.wpforms-container-full legend.wpforms-field-label { display: block; float: none; margin: 0 0 8px; padding: 0; font-family: var(--ti2-sans); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; line-height: 1.4; color: var(--ti2-cn-muted); } /* Organisation and Message sit a hair tighter to their controls in the export than Name and Email do. Stated rather than averaged. */ .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-org .wpforms-field-label, .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-subject .wpforms-field-label, .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-message .wpforms-field-label { margin-bottom: 7px; } .ti-route-connect .ti-cn-card .wpforms-required-label { color: var(--ti2-cn-error); } /* The design marks the one optional field rather than starring the other four. The word is also carried in the control's accessible name from PHP, so this is presentation and nothing depends on it. */ .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-optional > .wpforms-field-label::after { content: " (" var(--ti-optional-label, "optional") ")"; text-transform: none; letter-spacing: .02em; font-weight: 500; color: var(--ti2-cn-muted); } .ti-route-connect .ti-cn-card div.wpforms-container-full input[type="text"], .ti-route-connect .ti-cn-card div.wpforms-container-full input[type="email"] { width: 100%; max-width: none; min-height: 48px; padding: 0 13px; font-family: var(--ti2-sans); font-size: 16px; line-height: 1.4; color: var(--ti2-navy); background: var(--ti2-cn-field); border: 1px solid rgba(var(--ti2-navy-rgb), 0.25); border-radius: 0; box-shadow: none; outline-offset: 2px; } .ti-route-connect .ti-cn-card div.wpforms-container-full textarea { width: 100%; max-width: none; min-height: 104px; padding: 14px; font-family: var(--ti2-sans); font-size: 16px; line-height: 1.6; color: var(--ti2-navy); background: var(--ti2-cn-field); border: 1px solid rgba(var(--ti2-navy-rgb), 0.25); border-radius: 0; box-shadow: none; resize: vertical; outline-offset: 2px; } .ti-route-connect .ti-cn-card input::placeholder, .ti-route-connect .ti-cn-card textarea::placeholder { color: var(--ti2-cn-muted); } /* WPForms marks the control invalid and prints the message in a sibling label. Both carry .wpforms-error, so both are named explicitly. */ .ti-route-connect .ti-cn-card div.wpforms-container-full input.wpforms-error, .ti-route-connect .ti-cn-card div.wpforms-container-full textarea.wpforms-error { border-color: var(--ti2-cn-error); } .ti-route-connect .ti-cn-card div.wpforms-container-full label.wpforms-error, .ti-route-connect .ti-cn-card div.wpforms-container-full em.wpforms-error { display: block; margin: 8px 0 0; font-family: var(--ti2-sans); font-size: 12.5px; line-height: 1.5; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ti2-cn-error); } /* -- The three enquiry paths ---------------------------------------------- */ .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-reason fieldset { margin: 0; padding: 0; border: 0; min-width: 0; } /* Final gives each enquiry path a card with its own line of description, so the choices stack as full-width cards rather than wrapping as a row of chips: a sentence does not fit in a chip, and three cards side by side in the form's column would each be too narrow to read. */ .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-reason ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-reason li { position: relative; display: block; margin: 0; padding: 0; } /* The control is still there and still focusable — it is moved out of sight, not removed, so the keyboard and the screen reader both keep it. */ .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-reason input[type="radio"] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; margin: 0; opacity: 0; } /* WPForms styles this label as `div.wpforms-container-full input[type="radio"] + label`, and draws the control's dot on it. The chip is stated past that, through the same adjacency, so the rule that would otherwise win is the one being replaced rather than one being fought. */ .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-reason input[type="radio"] + label.wpforms-field-label-inline { display: grid; gap: 4px; align-content: center; width: 100%; min-height: 46px; padding: 11px 15px 12px; cursor: pointer; border: 1px solid rgba(var(--ti2-navy-rgb), 0.3); background: transparent; font-family: var(--ti2-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; line-height: 1.2; color: var(--ti2-navy); transition: background-color 200ms var(--ti2-ease), border-color 200ms var(--ti2-ease), color 200ms var(--ti2-ease); } .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-reason input[type="radio"]:checked + label.wpforms-field-label-inline { background: var(--ti2-navy); border-color: var(--ti2-navy); color: var(--ti2-ivory); } /* The title keeps the chip's register; the description reads as a sentence. */ .ti-route-connect .ti-cn-card .ti-f-reason .ti-form__choice-title { display: block; } .ti-route-connect .ti-cn-card .ti-f-reason .ti-form__choice-desc { display: block; font-size: 13.5px; line-height: 1.5; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--ti2-cn-muted); } .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-reason input[type="radio"]:checked + label .ti-form__choice-desc { color: rgba(var(--ti2-dune-rgb), 0.92); } /* The ring has to be drawn on the label, because the control it belongs to is the one pixel nobody can see. */ .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-reason input[type="radio"]:focus-visible + label.wpforms-field-label-inline { outline: 2px solid var(--ti2-gold-ink); outline-offset: 3px; border-color: var(--ti2-gold-ink); } .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-f-reason input[type="radio"] + label.wpforms-field-label-inline:hover { border-color: var(--ti2-gold-ink); } /* -- Submit, and the line under it ---------------------------------------- */ .ti-route-connect .ti-cn-card div.wpforms-container-full .wpforms-submit-container { margin: clamp(14px, 1.8vw, 22px) 0 0; padding: 0; } .ti-route-connect .ti-cn-card div.wpforms-container-full button.wpforms-submit { display: inline-flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 30px; border: 0; border-radius: 0; cursor: pointer; background: var(--ti2-navy); font-family: var(--ti2-sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ti2-ivory); transition: background-color 200ms var(--ti2-ease); } .ti-route-connect .ti-cn-card div.wpforms-container-full button.wpforms-submit:hover, .ti-route-connect .ti-cn-card div.wpforms-container-full button.wpforms-submit:focus-visible { background: var(--ti2-gold-ink); color: var(--ti2-ivory); } /* The arrow the export draws. Decoration: the button already says what it does, and this adds nothing a reader needs. */ .ti-route-connect .ti-cn-card div.wpforms-container-full button.wpforms-submit::after { content: "\2192"; font-size: 14px; letter-spacing: 0; } .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-form__privacy { margin: clamp(10px, 1.2vw, 14px) 0 0; max-width: 52ch; font-family: var(--ti2-sans); font-size: 12px; line-height: 1.55; color: var(--ti2-cn-muted); } .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-form__privacy a { color: var(--ti2-gold-ink); border-bottom: 1px solid rgba(var(--ti2-gold-rgb), 0.7); } .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-form__privacy a:hover, .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-form__privacy a:focus-visible { color: var(--ti2-navy); border-bottom-color: var(--ti2-navy); } /* -- Confirmation, and failure -------------------------------------------- */ .ti-route-connect .ti-cn-card div.wpforms-container-full .wpforms-confirmation-container, .ti-route-connect .ti-cn-card div.wpforms-confirmation-container-full { display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 1.8vw, 22px); min-height: clamp(300px, 34vw, 420px); margin: 0; padding: 0; border: 0; background: transparent; color: var(--ti2-slate); } .ti-route-connect .ti-cn-card .ti-form__sent-mark { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--ti2-gold); border-radius: 50%; font-size: 18px; color: var(--ti2-gold-ink); } .ti-route-connect .ti-cn-card .ti-form__sent-title { margin: 0; font-family: var(--ti2-serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.08; color: var(--ti2-navy); text-wrap: balance; } .ti-route-connect .ti-cn-card .ti-form__sent-body { margin: 0; max-width: 44ch; font-family: var(--ti2-sans); font-size: 15.5px; line-height: 1.7; color: var(--ti2-slate); } .ti-route-connect .ti-cn-card .ti-form__again, .ti-route-connect .ti-cn-card div.wpforms-container-full .ti-form__again { align-self: flex-start; display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 22px; background: none; border: 1px solid rgba(var(--ti2-navy-rgb), 0.3); cursor: pointer; font-family: var(--ti2-sans); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--ti2-navy); transition: border-color 200ms var(--ti2-ease), color 200ms var(--ti2-ease); } .ti-route-connect .ti-cn-card .ti-form__again:hover, .ti-route-connect .ti-cn-card .ti-form__again:focus-visible { border-color: var(--ti2-gold); color: var(--ti2-gold-ink); } .ti-route-connect .ti-cn-card .wpforms-error-container { margin: 0 0 clamp(12px, 1.4vw, 18px); padding: 12px 14px; border: 1px solid var(--ti2-cn-error); background: rgba(138, 43, 43, 0.06); color: var(--ti2-cn-error); } .ti-route-connect .ti-cn-card .ti-form__fail-title { margin: 0; font-family: var(--ti2-sans); font-size: 13px; font-weight: 600; line-height: 1.5; } .ti-route-connect .ti-cn-card .ti-form__fail-body { margin: 4px 0 0; font-family: var(--ti2-sans); font-size: 13px; line-height: 1.55; } /* -------------------------------------------------------------------------- 7. THE BAAMI BRIDGE Executive advisory does not enter the form. It gets its own band, its own sentence and a real external destination. -------------------------------------------------------------------------- */ .ti-route-connect .ti-cn-baami { background: var(--ti2-navy); border-top: 1px solid rgba(var(--ti2-gold-rgb), 0.28); padding: clamp(30px, 3.8vw, 62px) 0; } .ti-route-connect .ti-cn-baami__grid { max-width: var(--ti2-shell); margin: 0 auto; padding: 0 var(--ti2-gutter); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(20px, 3.4vw, 64px); align-items: center; } @media (min-width: 1100px) { .ti-route-connect .ti-cn-baami__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.5fr); } } .ti-route-connect .ti-cn-baami__copy { min-width: 0; } .ti-route-connect .ti-cn-baami__eyebrow { margin: 0; font-family: var(--ti2-sans); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 600; color: var(--ti2-gold); } .ti-route-connect .ti-cn-baami__heading { margin: clamp(12px, 1.6vw, 22px) 0 0; max-width: 22ch; font-family: var(--ti2-serif); font-optical-sizing: auto; font-weight: 400; font-size: clamp(26px, 3vw, 44px); line-height: 1.06; letter-spacing: -.02em; color: var(--ti2-ivory); text-wrap: balance; } .ti-route-connect .ti-cn-baami__body { margin: clamp(14px, 1.8vw, 24px) 0 0; max-width: 54ch; font-family: var(--ti2-sans); font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.74; font-weight: 400; color: var(--ti2-dune); } .ti-route-connect .ti-cn-baami__cta { justify-self: start; display: inline-flex; align-items: center; gap: 14px; min-height: 54px; padding: 0 28px; background: var(--ti2-gold); font-family: var(--ti2-sans); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.2; color: var(--ti2-navy); transition: background-color 200ms var(--ti2-ease); } .ti-route-connect .ti-cn-baami__cta:hover, .ti-route-connect .ti-cn-baami__cta:focus-visible { background: var(--ti2-ivory); color: var(--ti2-navy); }