/* ==========================================================================
Trademark Certification & Renewal — page-scoped premium enhancements
Presentation-only additions; reuses the theme's fonts, accent color and
button classes. Scoped under .tm-page so it never leaks into other pages.
========================================================================== */
.tm-page{
--tm-accent: #00bffe;
--tm-accent-dark: #009fd6;
--tm-heading: #222222;
--tm-text: #6f7377;
--tm-radius: 12px;
--tm-shadow: 0 10px 30px rgba(15, 23, 42, 0.07);
--tm-shadow-hover: 0 20px 40px rgba(15, 23, 42, 0.14);
--tm-border: #eef1f4;
}
/* ---- Page-title banner ----
Image-only banner (no heading/breadcrumb markup remains). Rendered as a
plain / (for SEO) instead of the theme's default
/ get the identical visual treatment via these tag-matched rules.
Purely additive: existing pages keep using h4/h3 and are unaffected.
========================================================================== */
.page-title .title h1{
font-size: 50px;
font-weight: 700;
line-height: 60px;
color: #ffffff;
text-transform: capitalize;
margin: 0;
}
.tm-page .image-content .sec-title-three h2{
position: relative;
font-size: 35px;
font-weight: 400;
color: #333333;
line-height: 26px;
padding-bottom: 25px;
margin-bottom: 25px;
display: inline-block;
}
.tm-page .image-content .sec-title-three h2:after{
position: absolute;
content: '';
left: 0;
bottom: 0px;
width: 64px;
height: 2px;
background-color: #00bffe;
}
/* ISO Registration sub-branch pages only (iso-90012015, iso-45001,
iso-13485, iso-22000, iso-27001, iso-14001, iso-registration-in-india —
marked with the .iso-subpage class on the section). Their "What is X" /
"Plans & Pricing" / "ISO Registration in India" section titles use
.sec-title-three h2 at the unchanged desktop size (35px font / 26px
line-height). On a narrow phone column the 2-3 word title wraps to two
lines, and since the line-height is smaller than the font-size those
wrapped lines overlap. This rule has the same specificity as the
unconditional ".tm-page ... h2" rule above, so it must stay AFTER it in
the file to win the cascade tie on mobile — placing it inside an earlier
media query (as a previous attempt did) let the later unconditional rule
win instead and silently no-op the fix. Scoped to .iso-subpage and to
this mobile media query only, so other tm-page pages and desktop are
unaffected. */
@media (max-width: 767px){
.iso-subpage .image-content .sec-title-three h2{
font-size: 26px;
line-height: 34px;
padding-bottom: 15px;
margin-bottom: 15px;
}
}
/* Clickable feature-card headings (internal cross-links between certification pages) */
.tm-feature-card strong a{
color: inherit;
}
.tm-feature-card strong a:hover{
color: var(--tm-accent-dark);
}
/* ---- Preferred Client Combos gallery ---- */
.tm-combo-grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin: 0;
padding: 0;
list-style: none;
}
.tm-combo-card{
display: block;
border-radius: var(--tm-radius);
overflow: hidden;
border: 1px solid var(--tm-border);
box-shadow: var(--tm-shadow);
transition: transform .3s ease, box-shadow .3s ease;
}
.tm-combo-card:hover{
transform: translateY(-5px);
box-shadow: var(--tm-shadow-hover);
}
.tm-combo-card img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
aspect-ratio: 4 / 3;
}
@media (max-width: 767px){
.tm-combo-grid{
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Get a Quote form - searchable "services" combobox
Replaces the plain (public/partials/quote_form.php) with a
button + panel so the fixed 36-item services list (from
public/data/quote-services.json - separate from public/data/services.json,
which still feeds the header search box over every page) doesn't dump
every option onto the page at once. Panel shows ~5 rows at a time
(.qf-combo-options max-height) with the rest reachable by scrolling, plus
a search field that filters them - see public/js/quote-form-select.js.
The toggle button reuses .form-control so it matches the old select's
exact size/border/font with no extra CSS needed for that part. Value/
option text wraps instead of truncating so long names (e.g. "Limited
Liability Partnership (LLP)") stay fully readable. ---- */
.qf-combo{
position: relative;
}
/* .contact-form-one .form-group button (style.css) - a generic reset meant
for the form's Submit button - outranks a single .qf-combo-toggle class on
specificity (2 classes + tag beats 1 class) and was forcing this toggle
back to display:block/float:right/padding:6px 50px, which pushed the
selected label outside the box instead of laying it out with the caret.
Matching its selector shape with one more class is enough to win cleanly
without !important. */
.contact-form-one .form-group .qf-combo-toggle{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
width: 100%;
min-width: 0;
height: auto;
min-height: 40px;
padding: 8px 15px;
float: none;
text-align: left;
cursor: pointer;
background-color: #ffffff;
appearance: none;
-webkit-appearance: none;
}
.qf-combo-toggle .qf-combo-value{
overflow: visible;
text-overflow: unset;
white-space: normal;
word-break: break-word;
line-height: 1.3;
color: #464a4c;
font-family: 'Lato', sans-serif;
}
.qf-combo-toggle .qf-combo-caret{
flex-shrink: 0;
font-size: 13px;
color: #868686;
transition: transform .2s ease;
}
.qf-combo.is-open .qf-combo-toggle{
border-color: #00bffe;
}
.qf-combo.is-open .qf-combo-caret{
transform: rotate(180deg);
}
.qf-combo-panel{
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
z-index: 40;
background: #ffffff;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: .25rem;
box-shadow: 0 16px 32px rgba(15, 23, 42, .16);
overflow: hidden;
}
.qf-combo-search{
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-bottom: 1px solid #eef1f4;
}
.qf-combo-search i{
color: #9aa3ab;
font-size: 13px;
flex-shrink: 0;
}
.qf-combo-search-input{
flex: 1;
min-width: 0;
border: none;
outline: none;
font-size: 14px;
font-family: 'Lato', sans-serif;
color: #333333;
background: none;
}
.qf-combo-options{
list-style: none;
margin: 0;
padding: 6px 0;
max-height: 235px;
overflow-y: auto;
}
.qf-combo-options li{
padding: 10px 14px;
font-size: 14.5px;
font-family: 'Lato', sans-serif;
color: #333333;
cursor: pointer;
white-space: normal;
word-break: break-word;
line-height: 1.3;
}
.qf-combo-options li:hover,
.qf-combo-options li.is-active{
background: rgba(0, 191, 254, .08);
}
.qf-combo-options li.is-selected{
background: rgba(0, 191, 254, .12);
color: #009fd6;
font-weight: 600;
}
.qf-combo-options li[hidden]{
display: none;
}
.qf-combo-empty{
padding: 18px 14px;
text-align: center;
font-size: 13px;
color: #868686;
font-family: 'Lato', sans-serif;
}
@media (max-width: 480px){
.qf-combo-options{
max-height: 190px;
}
}
/* ---- Get a Quote form - Comment textarea ----
Each page's own *-cta-panel rule (e.g. .tm-cta-panel .contact-form-one
.form-group input) only styles input/select, not textarea, so without
this the Comment field would fall through to style.css's plain
.contact-form-one .form-group textarea rule (color:#ffffff, 40px single
line height - invisible text, wrong size). One shared rule here instead
of touching every per-page CSS file's panel variant; the extra
.qf-comment class keeps its specificity safely above that base rule
regardless of stylesheet load order. */
.contact-form-one .form-group textarea.qf-comment{
position: relative;
display: block;
width: 100%;
min-height: 110px;
padding: 12px 16px;
color: var(--tm-heading, #222222);
background: #f8fafc;
border: 1px solid var(--tm-border, #eef1f4);
border-radius: 8px;
font-size: 15px;
font-family: 'Lato', sans-serif;
line-height: 1.6;
resize: vertical;
transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.contact-form-one .form-group textarea.qf-comment::placeholder{
color: #9aa0a6;
}
.contact-form-one .form-group textarea.qf-comment:focus{
background: #ffffff;
border-color: var(--tm-accent, #00bffe);
box-shadow: 0 0 0 3px rgba(0, 191, 254, .15);
outline: none;
}