/* ======================================================================
BOOK A FREE CONSULTATION — presentation only.
This block is the component's ONE source of truth. It replaces the
previous inline styles rather than layering over them, and the
separate tbtk-consultation-redesign.css override sheet has been
deleted along with its , so there is no old-rule / override /
!important stack left behind.
Scoping: .tk-consult-card and #home-consultation-form exist only in
this partial, which is only included by the homepage. Nothing here can
reach the other views that happen to use .bookconsul/.consultantform.
intl-tel-input: its own stylesheet ships scoped to
"body .gform_wrapper .gfield", so outside Gravity Forms the widget got
none of it — that is why the country list rendered full-width in the
page flow. The library's real CSS is now supplied by
assets/css/tbtk-intl-tel-input-base.css; the rules below only theme
it. No positioning is re-implemented here.
Colours are the site's existing tokens: --primary-color #0073FC /
--primary-color-dark #005BC7, the rgb(32,37,42)->rgb(25,29,33)
surface, #0A0D0F / #626B75 light ink. No green is used for UI.
====================================================================== */
.home-consultation-honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
}
/* ---- The card ------------------------------------------------------ */
/* Deeper, cooler ground than the page's flat #0B0B0B, with a very faint
blue atmosphere for depth. Under 6% alpha — measurable, not visible as
colour. Dark mode only; the light rule below clears both.
Written as `section.` to match the weight of the legacy
`main .bgplaingrey { background-color: #0b0b0b }`, which is (0,1,1) and
otherwise wins over a single class. */
section.tk-consult-section {
background-color: #090B0C;
background-image: radial-gradient(120% 70% at 50% 100%, rgba(0, 115, 252, 0.05), rgba(0, 115, 252, 0) 60%);
}
.tk-consult-card {
position: relative;
padding: clamp(26px, 3.6vw, 54px) clamp(20px, 3.2vw, 50px);
border: 1px solid rgba(255, 255, 255, 0.07);
border-radius: 24px;
/* card surface in the #101315-#121517 family, cooler and darker than
before while staying clearly lifted off the ground */
background: linear-gradient(#141719, #101315);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 32px rgba(0, 0, 0, 0.45);
}
/* The legacy sheet paints the card on the row itself
(.bookconsul .row.gy-4.align-items-center { background:#171717;
border-radius:20px; margin:0 16px; box-shadow:... }). That surface now
belongs to .tk-consult-card, so the row is flattened here rather than
left to paint a second box inside the first. The card also owns the
radius, which is why the row no longer needs overflow:hidden — that is
what would clip the phone dropdown. */
.tk-consult-card .row.gy-4.align-items-center {
margin: 0;
padding: 0;
overflow: visible;
border-radius: 0;
background: 0 0;
box-shadow: none;
}
/* This theme never defines .visually-hidden (it only ships FontAwesome's
.sr-only), so these labels were painting above every field. The labels
stay in the markup for accessibility and are hidden properly. */
#home-consultation-form label.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.tk-consult-card .consultantform {
width: 100%;
padding: 0;
border: 0;
border-radius: 0;
background: 0 0;
box-shadow: none;
}
.tk-consult-card .consultantform .main-title,
.tk-consult-card .consultantform h2.main-title {
max-width: 16ch; /* holds "BOOK A FREE / CONSULTATION" on two lines */
margin: 0 0 26px;
color: #F3F5F7;
font-size: clamp(30px, 3.9vw, 54px);
font-weight: 800;
line-height: 1.03;
letter-spacing: -0.02em;
}
.tk-consult-art {
width: 100%;
max-width: 340px;
height: auto;
}
/* ---- Fields -------------------------------------------------------- */
.home-consultation-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 14px;
}
/* :not(.iti__search-input) matters — the plugin's country search box is
an inside this wrapper, and without the exclusion it inherited
the field styling and rendered as a stray pill under the phone box. */
#home-consultation-form .home-consultation-field input:not(.iti__search-input),
#home-consultation-form .home-consultation-field select {
width: 100%;
min-height: 54px;
padding: 0 18px;
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 10px;
background: #FFFFFF;
color: #14161A;
font-size: 15.5px;
line-height: 1.2;
outline: none;
/* border-color is deliberately NOT transitioned: Chromium does not
re-resolve a transitioned property when a live theme toggle
changes which rule matches, so the field kept the previous
theme's border until the next reload. Only the focus ring
animates. */
transition: box-shadow 0.18s ease;
}
#home-consultation-form .home-consultation-field input::placeholder {
color: #7A828B;
opacity: 1;
}
#home-consultation-form .home-consultation-field input:not(.iti__search-input):focus,
#home-consultation-form .home-consultation-field select:focus {
border-color: var(--primary-color, #0073FC);
box-shadow: 0 0 0 3px rgba(0, 115, 252, 0.18);
}
#home-consultation-form .home-consultation-field select {
appearance: none;
-webkit-appearance: none;
padding-right: 38px;
color: #14161A;
background-image:
linear-gradient(45deg, transparent 50%, #6B7480 50%),
linear-gradient(135deg, #6B7480 50%, transparent 50%);
background-position: calc(100% - 21px) 25px, calc(100% - 16px) 25px;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
#home-consultation-form .home-consultation-field.has-error input:not(.iti__search-input),
#home-consultation-form .home-consultation-field.has-error select {
border-color: #FF6262;
}
.tk-consult-card .home-consultation-error {
display: block;
margin: 5px 4px 0;
color: #FF8585;
font-size: 12px;
}
/* ---- Submit -------------------------------------------------------- */
#home-consultation-form .home-consultation-submit {
width: 100%;
min-height: 54px;
margin-top: 18px;
padding: 0 24px;
border: 0;
border-radius: 10px;
background: linear-gradient(var(--primary-color, #0073FC), var(--primary-color-dark, #005BC7));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 12px rgba(0, 115, 252, 0.26);
font-size: 17px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
/* The label stays readable in every state — this is the exact failure
that made the review CTAs invisible, so it is pinned explicitly. */
#home-consultation-form .home-consultation-submit,
#home-consultation-form .home-consultation-submit:hover,
#home-consultation-form .home-consultation-submit:focus,
#home-consultation-form .home-consultation-submit:active,
#home-consultation-form .home-consultation-submit * {
color: #FFFFFF;
-webkit-text-fill-color: #FFFFFF;
}
#home-consultation-form .home-consultation-submit:hover {
background: linear-gradient(var(--primary-color-light, #66ACFF), var(--primary-color, #0073FC));
transform: translateY(-1px);
}
#home-consultation-form .home-consultation-submit:disabled {
cursor: wait;
opacity: .7;
transform: none;
}
.tk-consult-card .home-consultation-feedback {
display: none;
margin-bottom: 16px;
padding: 12px 16px;
border-radius: 12px;
color: #F3F5F7;
font-weight: 600;
}
.tk-consult-card .home-consultation-feedback.is-visible {
display: block;
}
.tk-consult-card .home-consultation-feedback.is-success {
border: 1px solid rgba(57, 207, 132, .55);
background: rgba(57, 207, 132, .14);
}
.tk-consult-card .home-consultation-feedback.is-error {
border: 1px solid rgba(255, 98, 98, .55);
background: rgba(255, 98, 98, .14);
}
/* ---- Phone control ------------------------------------------------- */
/* Theming only. Positioning, show/hide and the mobile fullscreen popup
are the library's own, restored by tbtk-intl-tel-input-base.css. */
#home-consultation-form .home-consultation-field .iti {
display: block;
width: 100%;
--iti-spacer-horizontal: 12px;
--iti-arrow-color: #6B7480;
--iti-dialcode-color: #6B7480;
--iti-hover-color: rgba(0, 115, 252, 0.10);
}
#home-consultation-form .iti__selected-country {
border-radius: 10px 0 0 10px;
color: #14161A;
}
#home-consultation-form .iti__dropdown-content {
z-index: 1200;
/* No width here on purpose: the library writes an inline width onto
this element to match the phone field (its fixDropdownWidth
behaviour), which outranks any stylesheet. max-width is still
honoured, so it only acts as a viewport guard. */
max-width: calc(100vw - 32px);
margin-top: 6px;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.12);
border-radius: 12px;
background: #FFFFFF;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
#home-consultation-form .iti__country-list {
max-height: 300px;
padding: 4px;
overflow-y: auto;
}
#home-consultation-form .iti__search-input {
height: 42px;
padding: 0 14px;
border: 0;
border-bottom: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 0;
background: #F6F8FA;
color: #14161A;
font-size: 14px;
outline: none;
}
#home-consultation-form .iti__country {
border-radius: 8px;
color: #14161A;
font-size: 14px;
}
#home-consultation-form .iti__country:hover,
#home-consultation-form .iti__country.iti__highlight {
background-color: rgba(0, 115, 252, 0.12);
}
/* ---- Light theme --------------------------------------------------- */
/* The controls stay light in both themes (as in the reference), so only
the card, the heading and the borders change. */
/* #F3F6F8 is the light ground already used by every other redesigned
homepage section (hero, services, packages, process, trending,
reviews, Trustpilot). Without this the consultation band stayed black
between two light sections. */
html[data-tk-theme="light"] .tk-consult-section {
background-color: #F3F6F8;
/* clears the dark-mode blue atmosphere — a background-color alone
would leave the radial-gradient painting over the light ground */
background-image: none;
}
html[data-tk-theme="light"] .tk-consult-card {
border-color: rgba(15, 23, 42, 0.08);
background: linear-gradient(#FFFFFF, #F7F9FB);
box-shadow: inset 0 1px 0 #FFFFFF, 0 10px 30px rgba(15, 23, 42, 0.08);
}
html[data-tk-theme="light"] .tk-consult-card .consultantform .main-title,
html[data-tk-theme="light"] .tk-consult-card .consultantform h2.main-title,
html[data-tk-theme="light"] .tk-consult-card .home-consultation-feedback {
color: #0A0D0F;
}
html[data-tk-theme="light"] #home-consultation-form .home-consultation-field input:not(.iti__search-input),
html[data-tk-theme="light"] #home-consultation-form .home-consultation-field select {
border-color: rgba(15, 23, 42, 0.16);
background: #FFFFFF;
}
html[data-tk-theme="light"] .tk-consult-card .home-consultation-error {
color: #D63B3B;
}
/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 991px) {
.tk-consult-card .consultantform .main-title,
.tk-consult-card .consultantform h2.main-title {
max-width: 100%;
font-size: clamp(28px, 5vw, 40px);
}
/* Between 768 and 991 the form still shares the card with the
artwork (col-md-6), so a two-up grid inside it left ~138px per
field. One column from here down. */
.home-consultation-grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 767px) {
.tk-consult-card {
padding: 24px 18px 26px;
border-radius: 20px;
}
.tk-consult-card .consultantform {
padding: 0;
border-radius: 0;
}
.tk-consult-card .consultantform .main-title,
.tk-consult-card .consultantform h2.main-title {
margin: 0 0 18px;
font-size: clamp(26px, 7vw, 34px);
}
#home-consultation-form .iti__dropdown-content {
max-width: calc(100vw - 24px);
}
}