/* Start custom CSS for html, class: .elementor-element-7246779 *//* =========================================================
THINK CITY EDUCATION SOCIETY
CONTACT STUDIO EXPERIENCE v3.0
Page ID: 4708
Uses:
TC-contact1.png
TC-contact2.png
TC-contact3.png
IMPORTANT:
Place the HTML widget inside ONE root-level,
full-width Elementor container.
Parent:
Width: 100%
Content width: Full Width
Padding: 0
Gap: 0
========================================================= */
/* =========================================================
1. FOUNDATION
========================================================= */
body.page-id-4708 {
overflow-x: clip;
}
body.page-id-4708 .tc-contact-studio {
--tcs-ink: #111a14;
--tcs-ink-soft: #27352b;
--tcs-copy: #35433a;
--tcs-muted: #5b695f;
--tcs-green-950: #18361e;
--tcs-green-900: #244b2a;
--tcs-green-850: #2d5832;
--tcs-green-800: #37693b;
--tcs-green-700: #4d7f3f;
--tcs-green-600: #669a48;
--tcs-green-500: #84b74f;
--tcs-green-400: #a2cb73;
--tcs-green-300: #bddb96;
--tcs-green-200: #d9eac9;
--tcs-green-150: #e5f0d9;
--tcs-green-100: #eef6e7;
--tcs-green-050: #f7faf3;
--tcs-white: #ffffff;
--tcs-paper: #fffefa;
--tcs-daylight: #fcfcf8;
--tcs-line: rgba(36, 75, 42, 0.15);
--tcs-line-soft: rgba(36, 75, 42, 0.08);
--tcs-line-strong: rgba(36, 75, 42, 0.27);
--tcs-shadow-sm:
0 14px 34px rgba(20, 38, 24, 0.065),
0 4px 10px rgba(20, 38, 24, 0.028);
--tcs-shadow-md:
0 28px 66px rgba(20, 38, 24, 0.095),
0 8px 19px rgba(20, 38, 24, 0.045);
--tcs-shadow-lg:
0 48px 110px rgba(20, 38, 24, 0.16),
0 14px 32px rgba(20, 38, 24, 0.065);
--tcs-radius-sm: 14px;
--tcs-radius-md: 20px;
--tcs-radius-lg: 30px;
--tcs-radius-xl: 42px;
--tcs-radius-pill: 999px;
--tcs-content: 1580px;
--tcs-gutter: clamp(24px, 5vw, 88px);
--tcs-section: clamp(100px, 9vw, 160px);
background: var(--tcs-white);
color: var(--tcs-copy);
font-family:
Inter,
"Helvetica Neue",
Helvetica,
Arial,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 19px;
line-height: 1.76;
margin: 0 !important;
max-width: none !important;
overflow: hidden;
position: relative;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
width: 100% !important;
}
body.page-id-4708 .tc-contact-studio,
body.page-id-4708 .tc-contact-studio *,
body.page-id-4708 .tc-contact-studio *::before,
body.page-id-4708 .tc-contact-studio *::after {
box-sizing: border-box;
}
/* =========================================================
2. TYPE
========================================================= */
.tc-contact-studio p,
.tc-contact-studio li,
.tc-contact-studio address {
color: var(--tcs-copy);
font-size:
clamp(19px, 0.18vw + 18px, 21px) !important;
letter-spacing: -0.004em;
line-height: 1.74 !important;
}
.tc-contact-studio p {
margin: 0 0 1.35em;
max-width: 70ch;
text-wrap: pretty;
}
.tc-contact-studio p:last-child {
margin-bottom: 0;
}
.tc-contact-studio address {
font-style: normal;
}
.tc-contact-studio h1,
.tc-contact-studio h2,
.tc-contact-studio h3 {
color: var(--tcs-ink);
font-family:
Montserrat,
Inter,
"Helvetica Neue",
Helvetica,
Arial,
sans-serif;
text-wrap: balance;
}
.tc-contact-studio h1 {
font-size:
clamp(4.5rem, 7vw, 8.7rem);
font-weight: 790;
letter-spacing: -0.078em;
line-height: 0.88;
margin: 0;
max-width: 7.5ch;
}
.tc-contact-studio h2 {
font-size:
clamp(2.8rem, 4.8vw, 5.6rem);
font-weight: 770;
letter-spacing: -0.06em;
line-height: 0.97;
margin: 0;
}
.tc-contact-studio h3 {
font-size:
clamp(1.55rem, 1.8vw, 2.15rem);
font-weight: 750;
letter-spacing: -0.041em;
line-height: 1.09;
margin: 0;
}
.tc-contact-studio a {
text-underline-offset: 0.18em;
}
.tc-contact-studio :focus-visible {
border-radius: 7px;
outline:
4px solid
rgba(132, 183, 79, 0.61);
outline-offset: 4px;
}
/* =========================================================
3. WRAPPER
========================================================= */
.tc-contact-studio__wrap {
margin-inline: auto;
max-width: var(--tcs-content);
padding-inline: var(--tcs-gutter);
position: relative;
width: 100%;
}
/* =========================================================
4. EYEBROW
========================================================= */
.tc-contact-studio__eyebrow {
align-items: center;
color: var(--tcs-green-800) !important;
display: inline-flex;
font-size:
clamp(15px, 0.18vw + 14px, 17px) !important;
font-weight: 840;
gap: 12px;
letter-spacing: 0.1em;
line-height: 1.45 !important;
margin: 0 0 28px !important;
text-transform: uppercase;
}
.tc-contact-studio__eyebrow::before {
background: var(--tcs-green-500);
border-radius: 50%;
box-shadow:
0 0 0 8px
rgba(132, 183, 79, 0.14);
content: "";
flex: 0 0 10px;
height: 10px;
width: 10px;
}
/* =========================================================
5. HERO
========================================================= */
.tc-contact-studio__hero {
min-height:
clamp(760px, 82svh, 930px);
overflow: hidden;
padding:
clamp(60px, 6vw, 94px)
0
clamp(90px, 8vw, 140px);
position: relative;
width: 100%;
}
/* image */
.tc-contact-studio__hero-media {
inset: 0;
position: absolute;
}
.tc-contact-studio__hero-media img {
height: 100%;
object-fit: cover;
object-position: center right;
width: 100%;
}
/* intelligent readability fade */
.tc-contact-studio__hero-scrim {
background:
linear-gradient(
90deg,
rgba(255,255,255,0.99) 0%,
rgba(255,255,255,0.97) 27%,
rgba(255,255,255,0.84) 43%,
rgba(255,255,255,0.38) 61%,
rgba(255,255,255,0.04) 82%
),
linear-gradient(
180deg,
rgba(255,255,255,0.18),
rgba(238,246,231,0.18)
);
inset: 0;
position: absolute;
z-index: 1;
}
/* top civic rule */
.tc-contact-studio__hero::before {
background:
linear-gradient(
90deg,
var(--tcs-green-900),
var(--tcs-green-500),
var(--tcs-green-300)
);
content: "";
height: 7px;
inset:
0
0
auto;
position: absolute;
z-index: 5;
}
/* =========================================================
6. HERO META
========================================================= */
.tc-contact-studio__meta {
align-items: center;
border-bottom:
1px solid
rgba(36,75,42,0.17);
color: var(--tcs-green-850);
display: flex;
flex-wrap: wrap;
font-size: 13px;
font-weight: 790;
gap: 12px 27px;
letter-spacing: 0.08em;
margin-bottom:
clamp(68px, 7vw, 112px);
padding-bottom: 20px;
position: relative;
text-transform: uppercase;
z-index: 2;
}
.tc-contact-studio__meta
span:not(:last-child)::after {
color: var(--tcs-green-500);
content: "•";
margin-left: 27px;
}
/* =========================================================
7. HERO GRID
========================================================= */
.tc-contact-studio__hero-grid {
align-items: center;
display: grid;
gap:
clamp(70px, 8vw, 140px);
grid-template-columns:
minmax(0, 1.05fr)
minmax(430px, 0.75fr);
position: relative;
z-index: 2;
}
.tc-contact-studio__hero-copy {
max-width: 790px;
min-width: 0;
}
.tc-contact-studio__hero-copy h1 {
margin-bottom:
clamp(36px, 3vw, 48px);
}
.tc-contact-studio__lead {
color: var(--tcs-ink-soft) !important;
font-size:
clamp(22px, 0.68vw + 19px, 29px) !important;
font-weight: 440;
letter-spacing: -0.019em;
line-height: 1.59 !important;
max-width: 58ch !important;
}
/* =========================================================
8. HERO ACTIONS
========================================================= */
.tc-contact-studio__actions {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 40px;
}
.tc-contact-studio__button {
align-items: center;
border:
1px solid
transparent;
border-radius:
var(--tcs-radius-pill);
display: inline-flex;
font-size: 18px;
font-weight: 810;
gap: 11px;
justify-content: center;
line-height: 1.25;
min-height: 64px;
padding:
18px
31px;
text-decoration: none !important;
transition:
background-color 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease,
color 180ms ease,
transform 180ms ease;
}
.tc-contact-studio__button svg {
fill: none;
height: 21px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
width: 21px;
}
.tc-contact-studio__button--primary {
background:
var(--tcs-green-800);
box-shadow:
0 17px 36px
rgba(55,105,59,0.22);
color:
var(--tcs-white) !important;
}
.tc-contact-studio__button--primary:hover,
.tc-contact-studio__button--primary:focus-visible {
background:
var(--tcs-green-950);
color:
var(--tcs-white) !important;
transform:
translateY(-2px);
}
.tc-contact-studio__button--secondary {
background:
rgba(255,255,255,0.86);
border-color:
var(--tcs-line-strong);
color:
var(--tcs-ink) !important;
}
.tc-contact-studio__button--secondary:hover,
.tc-contact-studio__button--secondary:focus-visible {
background:
var(--tcs-green-100);
color:
var(--tcs-green-950) !important;
transform:
translateY(-2px);
}
.tc-contact-studio__microcopy {
color:
var(--tcs-muted) !important;
font-size: 16px !important;
font-weight: 620;
line-height: 1.55 !important;
margin-top: 19px !important;
}
/* =========================================================
9. CONTACT FOLIO
========================================================= */
.tc-contact-studio__folio {
align-self: center;
backdrop-filter:
blur(18px);
-webkit-backdrop-filter:
blur(18px);
background:
rgba(255,255,252,0.93);
border:
1px solid
rgba(36,75,42,0.17);
border-radius:
clamp(28px, 2.7vw, 42px);
box-shadow:
var(--tcs-shadow-lg);
justify-self: end;
max-width: 555px;
min-width: 0;
overflow: hidden;
padding:
clamp(40px, 4vw, 60px);
position: relative;
width: 100%;
}
.tc-contact-studio__folio::before {
background:
linear-gradient(
90deg,
var(--tcs-green-900),
var(--tcs-green-500),
var(--tcs-green-300)
);
content: "";
height: 6px;
inset:
0
0
auto;
position: absolute;
}
.tc-contact-studio__folio-meta {
align-items: center;
color: var(--tcs-muted);
display: flex;
font-size: 12px;
font-weight: 760;
justify-content: space-between;
letter-spacing: 0.08em;
margin-bottom: 47px;
text-transform: uppercase;
}
.tc-contact-studio__folio-eyebrow {
color:
var(--tcs-green-700) !important;
font-size: 14px !important;
font-weight: 840;
letter-spacing: 0.1em;
line-height: 1.45 !important;
margin-bottom: 13px !important;
text-transform: uppercase;
}
.tc-contact-studio__folio h2 {
font-size:
clamp(2.25rem, 2.7vw, 3.45rem);
letter-spacing: -0.052em;
line-height: 1;
margin-bottom: 39px;
}
/* =========================================================
10. CONTACT DETAILS
========================================================= */
.tc-contact-studio__detail {
align-items: flex-start;
border-top:
1px solid
var(--tcs-line);
display: grid;
gap: 18px;
grid-template-columns:
55px
minmax(0,1fr);
padding:
29px
0;
}
.tc-contact-studio__detail-icon {
align-items: center;
background:
var(--tcs-green-100);
border:
1px solid
rgba(77,127,63,0.14);
border-radius: 16px;
color:
var(--tcs-green-800);
display: flex;
height: 53px;
justify-content: center;
width: 53px;
}
.tc-contact-studio__detail-icon svg {
fill: none;
height: 24px;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
width: 24px;
}
.tc-contact-studio__detail-label {
color:
var(--tcs-green-700);
display: block;
font-size: 12px;
font-weight: 850;
letter-spacing: 0.12em;
margin-bottom: 6px;
text-transform: uppercase;
}
.tc-contact-studio__detail-value {
color:
var(--tcs-ink) !important;
display: block;
font-size:
clamp(18px, 0.3vw + 17px, 21px) !important;
font-weight: 750;
line-height: 1.5 !important;
overflow-wrap: anywhere;
text-decoration: none !important;
}
a.tc-contact-studio__detail-value:hover {
color:
var(--tcs-green-700) !important;
text-decoration: underline !important;
}
.tc-contact-studio__detail p {
color:
var(--tcs-muted) !important;
font-size: 16px !important;
line-height: 1.55 !important;
margin:
8px
0
0 !important;
}
.tc-contact-studio__folio-footer {
align-items: center;
background:
linear-gradient(
130deg,
#f3f8ed,
#fafcf7
);
border:
1px solid
var(--tcs-line);
border-radius: 17px;
display: flex;
gap: 13px;
margin-top: 10px;
padding:
17px
18px;
}
.tc-contact-studio__status {
background:
var(--tcs-green-500);
border-radius: 50%;
box-shadow:
0 0 0 6px
rgba(132,183,79,0.13);
flex: 0 0 8px;
height: 8px;
width: 8px;
}
.tc-contact-studio__folio-footer p {
color:
var(--tcs-ink-soft) !important;
font-size: 15px !important;
font-weight: 640;
line-height: 1.5 !important;
margin: 0 !important;
}
/* =========================================================
11. GENERAL SECTION
========================================================= */
.tc-contact-studio__section {
padding:
var(--tcs-section)
0;
position: relative;
}
/* =========================================================
12. SECTION HEADING
========================================================= */
.tc-contact-studio__heading {
align-items: start;
display: grid;
gap:
clamp(28px, 4vw, 60px);
grid-template-columns:
72px
minmax(0, 1fr);
margin-bottom:
clamp(58px, 7vw, 96px);
max-width: 1120px;
}
.tc-contact-studio__section-number {
color:
var(--tcs-green-600);
display: block;
font-family:
Montserrat,
Inter,
sans-serif;
font-size: 15px;
font-weight: 850;
letter-spacing: 0.15em;
padding-top: 7px;
}
.tc-contact-studio__heading h2 {
max-width: 13ch;
}
.tc-contact-studio__heading-copy {
color:
var(--tcs-muted) !important;
font-size:
clamp(20px, 0.42vw + 18px, 24px) !important;
line-height: 1.65 !important;
margin-top: 29px !important;
max-width: 770px !important;
}
/* =========================================================
13. INQUIRIES
========================================================= */
.tc-contact-studio__inquiries {
background:
linear-gradient(
180deg,
#ffffff,
#fbfcf8
);
border-top:
1px solid
var(--tcs-line-soft);
}
.tc-contact-studio__inquiry-layout {
align-items: stretch;
display: grid;
gap:
clamp(32px, 4vw, 64px);
grid-template-columns:
minmax(320px, 0.68fr)
minmax(0, 1.32fr);
}
/* =========================================================
14. PORTRAIT GRAPHIC
========================================================= */
.tc-contact-studio__portrait {
border-radius:
clamp(26px, 2.5vw, 38px);
box-shadow:
var(--tcs-shadow-md);
margin: 0;
min-height: 680px;
overflow: hidden;
position: relative;
}
.tc-contact-studio__portrait img {
height: 100%;
object-fit: cover;
width: 100%;
}
.tc-contact-studio__portrait::after {
background:
linear-gradient(
to top,
rgba(24,54,30,0.82),
transparent 45%
);
content: "";
inset: 0;
pointer-events: none;
position: absolute;
}
.tc-contact-studio__portrait figcaption {
bottom: 0;
color: white;
left: 0;
padding:
clamp(28px, 3vw, 44px);
position: absolute;
right: 0;
z-index: 2;
}
.tc-contact-studio__portrait figcaption span {
display: block;
font-size: 13px;
font-weight: 840;
letter-spacing: 0.13em;
margin-bottom: 10px;
text-transform: uppercase;
}
.tc-contact-studio__portrait figcaption strong {
display: block;
font-family:
Montserrat,
Inter,
sans-serif;
font-size:
clamp(1.55rem, 2vw, 2.3rem);
font-weight: 720;
letter-spacing: -0.035em;
line-height: 1.13;
max-width: 14ch;
}
/* =========================================================
15. INQUIRY CARDS
========================================================= */
.tc-contact-studio__card-grid {
display: grid;
gap:
clamp(20px, 2vw, 30px);
grid-template-columns:
repeat(2, minmax(0,1fr));
}
.tc-contact-studio__card {
background:
linear-gradient(
150deg,
#ffffff,
var(--tcs-green-050)
);
border:
1px solid
var(--tcs-line);
border-radius:
clamp(23px, 2vw, 31px);
box-shadow:
0 7px 22px
rgba(20,38,24,0.045);
display: flex;
flex-direction: column;
min-height: 325px;
padding:
clamp(32px, 3vw, 46px);
position: relative;
transition:
border-color 220ms ease,
box-shadow 220ms ease,
transform 220ms ease;
}
.tc-contact-studio__card::before {
background:
linear-gradient(
90deg,
var(--tcs-green-850),
var(--tcs-green-500)
);
content: "";
height: 5px;
inset:
0
0
auto;
position: absolute;
}
.tc-contact-studio__card-number {
color:
var(--tcs-green-600);
display: block;
font-size: 13px;
font-weight: 850;
letter-spacing: 0.15em;
margin-bottom:
clamp(44px, 4vw, 66px);
}
.tc-contact-studio__card h3 {
margin-bottom: 20px;
max-width: 13ch;
}
.tc-contact-studio__card p {
color:
var(--tcs-copy) !important;
font-size: 18px !important;
line-height: 1.7 !important;
}
.tc-contact-studio__card:hover {
border-color:
rgba(77,127,63,0.34);
box-shadow:
var(--tcs-shadow-md);
transform:
translateY(-6px);
}
/* =========================================================
16. TEXT LINKS
========================================================= */
.tc-contact-studio__text-link {
align-items: center;
color:
var(--tcs-green-800) !important;
display: inline-flex;
font-size: 18px;
font-weight: 810;
gap: 8px;
line-height: 1.45;
margin-top: auto;
padding-top: 16px;
text-decoration: none !important;
}
.tc-contact-studio__text-link::after {
content: "→";
font-size: 1.15em;
transition:
transform 180ms ease;
}
.tc-contact-studio__text-link:hover {
color:
var(--tcs-green-950) !important;
text-decoration: underline !important;
}
.tc-contact-studio__text-link:hover::after {
transform:
translateX(4px);
}
/* =========================================================
17. EXPLORE
========================================================= */
.tc-contact-studio__explore {
background:
radial-gradient(
circle at 90% 5%,
rgba(132,183,79,0.15),
transparent 27%
),
linear-gradient(
145deg,
#f4f8ee,
#ffffff
);
border-top:
1px solid
var(--tcs-line-soft);
}
.tc-contact-studio__explore-grid {
align-items: center;
display: grid;
gap:
clamp(70px, 8vw, 130px);
grid-template-columns:
minmax(0,0.82fr)
minmax(500px,1.18fr);
}
.tc-contact-studio__explore-copy h2 {
margin-bottom: 28px;
max-width: 10ch;
}
.tc-contact-studio__explore-copy p:last-child {
color:
var(--tcs-muted) !important;
max-width: 52ch;
}
/* =========================================================
18. RESOURCE LIST
========================================================= */
.tc-contact-studio__resource-list {
border-top:
1px solid
var(--tcs-line);
}
.tc-contact-studio__resource-list a {
align-items: center;
border-bottom:
1px solid
var(--tcs-line);
color:
var(--tcs-ink) !important;
display: grid;
gap: 20px;
grid-template-columns:
46px
minmax(0,1fr)
50px;
min-height: 112px;
padding:
21px
4px;
text-decoration: none !important;
transition:
color 180ms ease,
padding-left 180ms ease;
}
.tc-contact-studio__resource-number {
color:
var(--tcs-green-600);
font-size: 13px;
font-weight: 850;
letter-spacing: 0.13em;
}
.tc-contact-studio__resource-title {
font-family:
Montserrat,
Inter,
sans-serif;
font-size:
clamp(1.45rem, 2vw, 2rem);
font-weight: 720;
letter-spacing: -0.035em;
line-height: 1.15;
}
.tc-contact-studio__resource-arrow {
align-items: center;
background:
var(--tcs-green-150);
border-radius: 50%;
color:
var(--tcs-green-850);
display: flex;
font-size: 1.15rem;
height: 48px;
justify-content: center;
transition:
background-color 180ms ease,
color 180ms ease,
transform 180ms ease;
width: 48px;
}
.tc-contact-studio__resource-list a:hover {
color:
var(--tcs-green-950) !important;
padding-left: 10px;
}
.tc-contact-studio__resource-list a:hover
.tc-contact-studio__resource-arrow {
background:
var(--tcs-green-850);
color:
var(--tcs-white);
transform:
translate(2px,-2px);
}
/* =========================================================
19. FINAL CINEMATIC PANEL
========================================================= */
.tc-contact-studio__final {
min-height:
clamp(520px, 54vw, 680px);
overflow: hidden;
padding:
clamp(100px, 9vw, 150px)
0;
position: relative;
width: 100%;
}
.tc-contact-studio__final-media {
inset: 0;
position: absolute;
}
.tc-contact-studio__final-media img {
height: 100%;
object-fit: cover;
object-position: center;
width: 100%;
}
.tc-contact-studio__final-overlay {
background:
linear-gradient(
90deg,
rgba(18,48,25,0.97) 0%,
rgba(24,54,30,0.93) 36%,
rgba(24,54,30,0.76) 64%,
rgba(24,54,30,0.46) 100%
),
linear-gradient(
180deg,
rgba(0,0,0,0.05),
rgba(0,0,0,0.18)
);
inset: 0;
position: absolute;
z-index: 1;
}
.tc-contact-studio__final-inner {
max-width: 880px;
position: relative;
z-index: 2;
}
.tc-contact-studio__final-number {
color:
var(--tcs-green-300);
display: block;
font-size: 13px;
font-weight: 840;
letter-spacing: 0.13em;
margin-bottom: 28px;
text-transform: uppercase;
}
.tc-contact-studio__final h2 {
color:
var(--tcs-white);
font-size:
clamp(3rem, 5.4vw, 6.1rem);
max-width: 10ch;
}
.tc-contact-studio__final p {
color:
rgba(255,255,255,0.82) !important;
font-size:
clamp(20px, 0.52vw + 18px, 25px) !important;
line-height: 1.64 !important;
margin-top: 30px !important;
max-width: 650px !important;
}
/* large final email */
.tc-contact-studio__final-email {
align-items: center;
border-bottom:
1px solid
rgba(255,255,255,0.38);
color:
var(--tcs-white) !important;
display: flex;
font-family:
Montserrat,
Inter,
sans-serif;
font-size:
clamp(1.5rem, 2.4vw, 2.55rem);
font-weight: 700;
gap: 30px;
justify-content: space-between;
letter-spacing: -0.04em;
margin-top:
clamp(45px,5vw,66px);
max-width: 720px;
padding-bottom: 21px;
text-decoration: none !important;
}
.tc-contact-studio__final-arrow {
align-items: center;
background:
var(--tcs-white);
border-radius: 50%;
color:
var(--tcs-green-950);
display: flex;
flex: 0 0 56px;
height: 56px;
justify-content: center;
transition:
background-color 180ms ease,
transform 180ms ease;
width: 56px;
}
.tc-contact-studio__final-email:hover {
color:
var(--tcs-green-200) !important;
}
.tc-contact-studio__final-email:hover
.tc-contact-studio__final-arrow {
background:
var(--tcs-green-200);
transform:
translateX(5px);
}
/* =========================================================
20. MEDIUM DESKTOP
========================================================= */
@media (max-width: 1280px) {
.tc-contact-studio__hero-grid {
gap: 60px;
grid-template-columns:
minmax(0,1fr)
minmax(380px,0.78fr);
}
.tc-contact-studio__inquiry-layout {
grid-template-columns:
minmax(300px,0.62fr)
minmax(0,1.38fr);
}
}
/* =========================================================
21. TABLET
========================================================= */
@media (max-width: 1000px) {
.tc-contact-studio__hero {
min-height: 0;
}
.tc-contact-studio__hero-scrim {
background:
linear-gradient(
180deg,
rgba(255,255,255,0.97) 0%,
rgba(255,255,255,0.92) 50%,
rgba(244,249,238,0.76) 100%
);
}
.tc-contact-studio__hero-grid {
grid-template-columns: 1fr;
}
.tc-contact-studio__folio {
justify-self: start;
max-width: 680px;
}
.tc-contact-studio__inquiry-layout {
grid-template-columns: 1fr;
}
.tc-contact-studio__portrait {
min-height: 620px;
}
.tc-contact-studio__explore-grid {
grid-template-columns: 1fr;
}
}
/* =========================================================
22. MOBILE
========================================================= */
@media (max-width: 767px) {
.tc-contact-studio {
--tcs-gutter: 21px;
--tcs-section: 84px;
font-size: 18px;
}
.tc-contact-studio p,
.tc-contact-studio li,
.tc-contact-studio address {
font-size: 18px !important;
line-height: 1.72 !important;
}
.tc-contact-studio h1 {
font-size:
clamp(3.25rem,15vw,4.7rem);
line-height: 0.92;
}
.tc-contact-studio h2 {
font-size:
clamp(2.4rem,11vw,3.7rem);
line-height: 0.99;
}
.tc-contact-studio__hero {
padding:
48px
0
82px;
}
.tc-contact-studio__hero-media img {
object-position:
65% center;
}
.tc-contact-studio__meta {
align-items: flex-start;
flex-direction: column;
gap: 6px;
margin-bottom: 55px;
}
.tc-contact-studio__meta
span::after {
display: none;
}
.tc-contact-studio__lead {
font-size: 21px !important;
}
.tc-contact-studio__actions {
align-items: stretch;
flex-direction: column;
}
.tc-contact-studio__button {
width: 100%;
}
.tc-contact-studio__folio {
border-radius: 27px;
padding:
38px
24px;
}
.tc-contact-studio__folio-meta {
margin-bottom: 40px;
}
.tc-contact-studio__detail {
gap: 14px;
grid-template-columns:
48px
minmax(0,1fr);
}
.tc-contact-studio__detail-icon {
border-radius: 14px;
height: 47px;
width: 47px;
}
.tc-contact-studio__heading {
display: block;
}
.tc-contact-studio__section-number {
margin-bottom: 24px;
}
.tc-contact-studio__portrait {
min-height: 520px;
}
.tc-contact-studio__card-grid {
grid-template-columns: 1fr;
}
.tc-contact-studio__card {
min-height: 0;
padding:
36px
26px;
}
.tc-contact-studio__resource-list a {
gap: 13px;
grid-template-columns:
32px
minmax(0,1fr)
44px;
min-height: 95px;
}
.tc-contact-studio__resource-title {
font-size: 1.35rem;
}
.tc-contact-studio__resource-arrow {
height: 43px;
width: 43px;
}
.tc-contact-studio__final {
min-height: 590px;
}
.tc-contact-studio__final-media img {
object-position:
67% center;
}
.tc-contact-studio__final-email {
font-size:
clamp(1.2rem,5.8vw,1.65rem);
gap: 15px;
}
.tc-contact-studio__final-arrow {
flex-basis: 49px;
height: 49px;
width: 49px;
}
}
/* =========================================================
23. SMALL MOBILE
========================================================= */
@media (max-width: 420px) {
.tc-contact-studio {
--tcs-gutter: 18px;
}
.tc-contact-studio__folio-meta {
align-items: flex-start;
flex-direction: column;
gap: 5px;
}
.tc-contact-studio__final-email {
overflow-wrap: anywhere;
}
}
/* =========================================================
24. REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.tc-contact-studio *,
.tc-contact-studio *::before,
.tc-contact-studio *::after {
scroll-behavior: auto !important;
transition-duration:
0.01ms !important;
}
.tc-contact-studio__card:hover,
.tc-contact-studio__button:hover {
transform: none !important;
}
}
/* =========================================================
25. HIGH CONTRAST
========================================================= */
@media (prefers-contrast: more) {
.tc-contact-studio {
--tcs-copy: #202b23;
--tcs-muted: #39463d;
--tcs-line:
rgba(17,26,20,0.42);
}
.tc-contact-studio__folio,
.tc-contact-studio__card {
border-width: 2px;
}
}
/* =========================================================
THINK CITY EDUCATION SOCIETY
CONTACT STUDIO POLISH PASS v3.1
Add AFTER Contact Studio Experience v3.0
Focus:
- Correct theme font-colour overrides
- Improve readability / WCAG-minded contrast
- Increase section padding
- Strengthen editorial hierarchy
- Improve resource navigation
- Refine final image panel
========================================================= */
/* =========================================================
1. FORCE RELIABLE INNER PAGE GUTTERS
========================================================= */
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__wrap {
box-sizing: border-box !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 1580px !important;
padding-left:
clamp(32px, 5vw, 88px) !important;
padding-right:
clamp(32px, 5vw, 88px) !important;
width: 100% !important;
}
/* =========================================================
2. GENERAL READING COLOUR IMPROVEMENT
========================================================= */
body.page-id-4708
.tc-contact-studio {
--tcs-ink: #101b13;
--tcs-ink-soft: #26372b;
--tcs-copy: #34433a;
--tcs-muted: #536159;
}
body.page-id-4708
.tc-contact-studio p {
color: var(--tcs-copy) !important;
}
body.page-id-4708
.tc-contact-studio h1,
body.page-id-4708
.tc-contact-studio h2,
body.page-id-4708
.tc-contact-studio h3 {
color: var(--tcs-ink) !important;
}
/* =========================================================
3. SECTION BREATHING ROOM
========================================================= */
body.page-id-4708
.tc-contact-studio__section {
padding-top:
clamp(110px, 9vw, 165px) !important;
padding-bottom:
clamp(110px, 9vw, 165px) !important;
}
/* =========================================================
4. EXPLORE SECTION — MORE MAGAZINE-LIKE
========================================================= */
body.page-id-4708
.tc-contact-studio__explore {
background:
radial-gradient(
circle at 92% 8%,
rgba(132, 183, 79, 0.13),
transparent 31%
),
linear-gradient(
145deg,
#f3f8ed 0%,
#fbfcf8 55%,
#ffffff 100%
) !important;
border-top:
1px solid rgba(36, 75, 42, 0.1);
}
body.page-id-4708
.tc-contact-studio__explore-grid {
align-items: start;
gap:
clamp(72px, 8vw, 138px);
grid-template-columns:
minmax(340px, 0.8fr)
minmax(520px, 1.2fr);
}
/* Editorial section number */
body.page-id-4708
.tc-contact-studio__explore
.tc-contact-studio__section-number {
color: #4d7f3f !important;
font-size: 14px !important;
font-weight: 850 !important;
margin-bottom: 20px;
opacity: 1;
}
/* Eyebrow */
body.page-id-4708
.tc-contact-studio__explore
.tc-contact-studio__eyebrow {
color: #315f35 !important;
font-size: 16px !important;
letter-spacing: 0.085em;
margin-bottom: 27px !important;
}
/* Heading */
body.page-id-4708
.tc-contact-studio__explore h2 {
color: #111a14 !important;
font-size:
clamp(3rem, 4.6vw, 5.5rem) !important;
font-weight: 780 !important;
letter-spacing: -0.058em !important;
line-height: 0.96 !important;
margin-bottom: 33px !important;
max-width: 10ch;
}
/* Intro paragraph */
body.page-id-4708
.tc-contact-studio__explore-copy > p:last-child {
color: #45544a !important;
font-size:
clamp(19px, 0.35vw + 18px, 22px) !important;
line-height: 1.7 !important;
max-width: 48ch;
}
/* =========================================================
5. RESOURCE NAVIGATION
========================================================= */
body.page-id-4708
.tc-contact-studio__resource-list {
border-top:
1px solid rgba(36, 75, 42, 0.18);
margin-top: 2px;
}
body.page-id-4708
.tc-contact-studio__resource-list a {
align-items: center;
border-bottom:
1px solid rgba(36, 75, 42, 0.16);
color: #162219 !important;
gap: 24px;
grid-template-columns:
46px
minmax(0, 1fr)
54px;
min-height: 108px;
padding:
24px
8px !important;
transition:
background-color 180ms ease,
color 180ms ease,
padding-left 180ms ease;
}
body.page-id-4708
.tc-contact-studio__resource-number {
color: #557e45 !important;
font-size: 14px !important;
font-weight: 850 !important;
letter-spacing: 0.12em;
}
body.page-id-4708
.tc-contact-studio__resource-title {
color: #162219 !important;
font-size:
clamp(1.35rem, 1.6vw, 1.8rem) !important;
font-weight: 760 !important;
letter-spacing: -0.028em;
line-height: 1.2;
}
/*
The current arrow is visually disappearing.
Give it a deliberate editorial button treatment.
*/
body.page-id-4708
.tc-contact-studio__resource-arrow {
align-items: center;
background: #e7f0dd !important;
border:
1px solid rgba(77, 127, 63, 0.14);
border-radius: 50%;
color: #315f35 !important;
display: flex;
font-size: 20px !important;
height: 50px;
justify-content: center;
line-height: 1;
opacity: 1 !important;
width: 50px;
}
body.page-id-4708
.tc-contact-studio__resource-list a:hover,
body.page-id-4708
.tc-contact-studio__resource-list a:focus-visible {
background:
rgba(255, 255, 255, 0.68);
color:
#18361e !important;
padding-left:
18px !important;
}
body.page-id-4708
.tc-contact-studio__resource-list a:hover
.tc-contact-studio__resource-arrow,
body.page-id-4708
.tc-contact-studio__resource-list a:focus-visible
.tc-contact-studio__resource-arrow {
background:
#315f35 !important;
color:
#ffffff !important;
transform:
translate(2px, -2px);
}
/* =========================================================
6. FINAL IMAGE PANEL
PRIMARY READABILITY REPAIR
========================================================= */
body.page-id-4708
.tc-contact-studio__final {
min-height:
clamp(600px, 48vw, 760px);
padding-top:
clamp(115px, 9vw, 165px) !important;
padding-bottom:
clamp(115px, 9vw, 165px) !important;
}
/*
Retain the city and leaves but give the text a
reliable contrast field.
*/
body.page-id-4708
.tc-contact-studio__final-overlay {
background:
linear-gradient(
90deg,
rgba(17, 48, 24, 0.97) 0%,
rgba(19, 54, 27, 0.94) 30%,
rgba(21, 58, 29, 0.84) 49%,
rgba(25, 61, 31, 0.61) 70%,
rgba(24, 54, 30, 0.29) 100%
),
linear-gradient(
180deg,
rgba(8, 20, 11, 0.05),
rgba(8, 20, 11, 0.19)
) !important;
}
/* =========================================================
7. FINAL TEXT — OVERRIDE THEGEM
========================================================= */
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
.tc-contact-studio__final-number {
color: #c9e4ae !important;
font-size: 14px !important;
font-weight: 850 !important;
letter-spacing: 0.12em;
line-height: 1.45 !important;
margin-bottom: 30px;
opacity: 1 !important;
text-transform: uppercase;
}
/*
THIS is the main screenshot problem.
TheGem is currently turning this headline dark.
*/
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final h2,
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
#tc-contact-final-title {
color: #ffffff !important;
font-size:
clamp(3.6rem, 5.6vw, 6.6rem) !important;
font-weight: 770 !important;
letter-spacing: -0.062em !important;
line-height: 0.96 !important;
margin: 0 !important;
max-width: 10.5ch;
text-shadow:
0 2px 18px rgba(0, 0, 0, 0.14);
}
/* Supporting copy */
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final p {
color:
rgba(255, 255, 255, 0.91) !important;
font-size:
clamp(20px, 0.45vw + 18px, 24px) !important;
font-weight: 430;
line-height: 1.68 !important;
margin-top: 36px !important;
max-width: 650px !important;
text-shadow:
0 1px 8px rgba(0, 0, 0, 0.08);
}
/* =========================================================
8. FINAL EMAIL ACTION
========================================================= */
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final-email {
border-bottom:
1px solid rgba(255, 255, 255, 0.45) !important;
color: #ffffff !important;
font-size:
clamp(1.65rem, 2.35vw, 2.65rem) !important;
font-weight: 720 !important;
margin-top:
clamp(48px, 5vw, 72px);
max-width: 760px;
padding-bottom: 24px;
}
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final-email span:first-child {
color: #ffffff !important;
}
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final-arrow {
background: #ffffff !important;
color: #18361e !important;
font-size: 24px;
height: 58px;
width: 58px;
}
/* =========================================================
9. INQUIRY CARD LEGIBILITY
========================================================= */
body.page-id-4708
.tc-contact-studio__card {
background:
linear-gradient(
150deg,
#ffffff 0%,
#f7faf3 100%
);
padding:
clamp(36px, 3vw, 50px) !important;
}
body.page-id-4708
.tc-contact-studio__card-number {
color: #517d43 !important;
font-size: 14px !important;
}
body.page-id-4708
.tc-contact-studio__card h3 {
color: #132017 !important;
font-size:
clamp(1.65rem, 1.7vw, 2.1rem) !important;
line-height: 1.11 !important;
}
body.page-id-4708
.tc-contact-studio__card p {
color: #415047 !important;
font-size:
clamp(18px, 0.12vw + 18px, 20px) !important;
line-height: 1.72 !important;
}
body.page-id-4708
.tc-contact-studio__text-link {
color: #315f35 !important;
font-size: 18px !important;
font-weight: 820 !important;
}
/* =========================================================
10. PORTRAIT CAPTION READABILITY
========================================================= */
body.page-id-4708
.tc-contact-studio__portrait::after {
background:
linear-gradient(
to top,
rgba(15, 42, 21, 0.94) 0%,
rgba(15, 42, 21, 0.66) 25%,
rgba(15, 42, 21, 0.12) 55%,
transparent 75%
) !important;
}
body.page-id-4708
.tc-contact-studio__portrait figcaption {
padding:
clamp(32px, 3.2vw, 50px) !important;
}
body.page-id-4708
.tc-contact-studio__portrait figcaption span {
color: #d7ebc3 !important;
}
body.page-id-4708
.tc-contact-studio__portrait figcaption strong {
color: #ffffff !important;
text-shadow:
0 2px 12px rgba(0, 0, 0, 0.16);
}
/* =========================================================
11. TABLET
========================================================= */
@media (max-width: 1000px) {
body.page-id-4708
.tc-contact-studio__explore-grid {
gap: 65px;
grid-template-columns: 1fr;
}
body.page-id-4708
.tc-contact-studio__explore-copy {
max-width: 780px;
}
body.page-id-4708
.tc-contact-studio__resource-list {
max-width: 900px;
}
body.page-id-4708
.tc-contact-studio__final-inner {
max-width: 760px;
}
}
/* =========================================================
12. MOBILE
========================================================= */
@media (max-width: 767px) {
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__wrap {
padding-left: 22px !important;
padding-right: 22px !important;
}
body.page-id-4708
.tc-contact-studio__section {
padding-top: 88px !important;
padding-bottom: 88px !important;
}
body.page-id-4708
.tc-contact-studio__explore h2 {
font-size:
clamp(2.7rem, 12vw, 4rem) !important;
}
body.page-id-4708
.tc-contact-studio__resource-list a {
gap: 14px;
grid-template-columns:
32px
minmax(0, 1fr)
46px;
min-height: 92px;
padding:
20px
3px !important;
}
body.page-id-4708
.tc-contact-studio__resource-title {
font-size: 1.3rem !important;
}
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final h2 {
font-size:
clamp(3rem, 13vw, 4.5rem) !important;
max-width: 9ch;
}
body.page-id-4708
.tc-contact-studio__final-overlay {
background:
linear-gradient(
90deg,
rgba(17, 48, 24, 0.95),
rgba(17, 48, 24, 0.82)
) !important;
}
body.page-id-4708
.tc-contact-studio__final-email {
font-size:
clamp(1.25rem, 5.5vw, 1.6rem) !important;
}
}
/* =========================================================
THINK CITY CONTACT
FINAL PANEL — BULLETPROOF LEGIBILITY FIX v3.2
Must be LAST in stylesheet.
Repairs TheGem heading / link colour overrides.
========================================================= */
/* =========================================================
1. FINAL PANEL BASE
========================================================= */
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final {
color: #ffffff !important;
position: relative;
}
/*
Give the text area its own guaranteed padding.
This protects us even if the parent wrapper is modified
by Elementor or TheGem.
*/
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
.tc-contact-studio__final-inner {
box-sizing: border-box !important;
margin: 0 !important;
max-width: 900px !important;
padding:
24px
clamp(36px, 5vw, 88px)
28px !important;
position: relative !important;
z-index: 10 !important;
}
/* =========================================================
2. STRONGER BACKGROUND CONTRAST FIELD
========================================================= */
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final-overlay {
background:
linear-gradient(
90deg,
rgba(12, 40, 19, 0.985) 0%,
rgba(15, 47, 22, 0.97) 30%,
rgba(18, 52, 25, 0.88) 52%,
rgba(20, 56, 28, 0.63) 72%,
rgba(20, 53, 27, 0.26) 100%
),
linear-gradient(
180deg,
rgba(8, 22, 11, 0.10),
rgba(8, 22, 11, 0.22)
) !important;
opacity: 1 !important;
z-index: 1 !important;
}
/* =========================================================
3. REMOVE THEGEM TEXT EFFECTS
========================================================= */
/*
The important part.
Some theme heading systems use:
- -webkit-text-fill-color
- background-clip
- opacity
- filters
- gradient text
We explicitly neutralize all of them.
*/
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final h2,
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final h2 span,
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
#tc-contact-final-title,
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
#tc-contact-final-title span {
background: none !important;
background-clip: border-box !important;
-webkit-background-clip: border-box !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
filter: none !important;
mix-blend-mode: normal !important;
opacity: 1 !important;
text-shadow:
0 2px 18px rgba(0, 0, 0, 0.18) !important;
}
/* =========================================================
4. MAIN HEADLINE
========================================================= */
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
#tc-contact-final-title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
font-family:
Montserrat,
Inter,
"Helvetica Neue",
Arial,
sans-serif !important;
font-size:
clamp(3.5rem, 5.4vw, 6.4rem) !important;
font-weight: 780 !important;
letter-spacing: -0.062em !important;
line-height: 0.96 !important;
margin:
0 !important;
max-width: 10ch !important;
opacity: 1 !important;
}
/* =========================================================
5. SMALL SECTION LABEL
========================================================= */
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
.tc-contact-studio__final-number {
background: none !important;
color: #cce7b4 !important;
-webkit-text-fill-color: #cce7b4 !important;
display: block !important;
font-size: 14px !important;
font-weight: 850 !important;
letter-spacing: 0.12em !important;
line-height: 1.45 !important;
margin-bottom: 32px !important;
opacity: 1 !important;
text-transform: uppercase;
}
/* =========================================================
6. BODY COPY
========================================================= */
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
.tc-contact-studio__final-inner > p {
background: none !important;
color: rgba(255, 255, 255, 0.94) !important;
-webkit-text-fill-color:
rgba(255, 255, 255, 0.94) !important;
font-size:
clamp(20px, 0.4vw + 18px, 24px) !important;
font-weight: 440 !important;
line-height: 1.68 !important;
margin:
36px
0
0 !important;
max-width: 650px !important;
opacity: 1 !important;
}
/* =========================================================
7. EMAIL LINK
========================================================= */
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
.tc-contact-studio__final-email {
align-items: center !important;
background: none !important;
border-bottom:
1px solid
rgba(255, 255, 255, 0.52) !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
display: flex !important;
font-size:
clamp(1.55rem, 2.3vw, 2.55rem) !important;
font-weight: 720 !important;
gap: 28px !important;
justify-content: space-between !important;
letter-spacing: -0.035em !important;
line-height: 1.2 !important;
margin-top:
clamp(50px, 5vw, 72px) !important;
max-width: 760px !important;
opacity: 1 !important;
padding:
0
0
24px !important;
text-decoration: none !important;
}
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
.tc-contact-studio__final-email
span:first-child {
background: none !important;
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
opacity: 1 !important;
}
/* =========================================================
8. EMAIL ARROW
========================================================= */
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
.tc-contact-studio__final-arrow {
align-items: center !important;
background: #ffffff !important;
border-radius: 50% !important;
color: #18361e !important;
-webkit-text-fill-color: #18361e !important;
display: flex !important;
flex:
0
0
58px !important;
font-size: 24px !important;
height: 58px !important;
justify-content: center !important;
opacity: 1 !important;
width: 58px !important;
}
/* Hover */
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
.tc-contact-studio__final-email:hover {
color: #d9eac9 !important;
-webkit-text-fill-color: #d9eac9 !important;
}
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
.tc-contact-studio__final-email:hover
span:first-child {
color: #d9eac9 !important;
-webkit-text-fill-color: #d9eac9 !important;
}
/* =========================================================
9. LAST-RESORT THEME PROTECTION
========================================================= */
/*
Applies only to textual descendants of the final panel.
This deliberately outranks theme typography rules.
*/
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
.tc-contact-studio__final-inner
:not(.tc-contact-studio__final-arrow) {
opacity: 1 !important;
}
/* =========================================================
10. MOBILE
========================================================= */
@media (max-width: 767px) {
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
.tc-contact-studio__final-inner {
padding:
15px
22px
25px !important;
}
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
#tc-contact-final-title {
font-size:
clamp(3rem, 13vw, 4.5rem) !important;
max-width: 9ch !important;
}
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final-overlay {
background:
linear-gradient(
90deg,
rgba(12, 40, 19, 0.98) 0%,
rgba(14, 45, 21, 0.93) 62%,
rgba(17, 49, 23, 0.72) 100%
) !important;
}
body.page-id-4708
.tc-contact-studio
.tc-contact-studio__final
.tc-contact-studio__final-email {
font-size:
clamp(1.2rem, 5.7vw, 1.6rem) !important;
gap: 16px !important;
}
}
/* =========================================================
THINK CITY CONTACT
ROOT TOKEN REPAIR v3.3
Fixes WordPress preview/body-class mismatch.
========================================================= */
.tc-contact-studio {
/* Core text */
--tcs-ink: #111a14;
--tcs-ink-soft: #27352b;
--tcs-copy: #35433a;
--tcs-muted: #536159;
/* Greens */
--tcs-green-950: #18361e;
--tcs-green-900: #244b2a;
--tcs-green-850: #2d5832;
--tcs-green-800: #37693b;
--tcs-green-700: #4d7f3f;
--tcs-green-600: #669a48;
--tcs-green-500: #84b74f;
--tcs-green-400: #a2cb73;
--tcs-green-300: #bddb96;
--tcs-green-200: #d9eac9;
--tcs-green-150: #e5f0d9;
--tcs-green-100: #eef6e7;
--tcs-green-050: #f7faf3;
/* Surfaces */
--tcs-white: #ffffff;
--tcs-paper: #fffefa;
--tcs-daylight: #fcfcf8;
/* Lines */
--tcs-line: rgba(36, 75, 42, 0.15);
--tcs-line-soft: rgba(36, 75, 42, 0.08);
--tcs-line-strong: rgba(36, 75, 42, 0.27);
/* Shadows */
--tcs-shadow-sm:
0 14px 34px rgba(20, 38, 24, 0.065),
0 4px 10px rgba(20, 38, 24, 0.028);
--tcs-shadow-md:
0 28px 66px rgba(20, 38, 24, 0.095),
0 8px 19px rgba(20, 38, 24, 0.045);
--tcs-shadow-lg:
0 48px 110px rgba(20, 38, 24, 0.16),
0 14px 32px rgba(20, 38, 24, 0.065);
/* Radius */
--tcs-radius-sm: 14px;
--tcs-radius-md: 20px;
--tcs-radius-lg: 30px;
--tcs-radius-xl: 42px;
--tcs-radius-pill: 999px;
/* Layout */
--tcs-content: 1580px;
--tcs-gutter: clamp(32px, 5vw, 88px);
--tcs-section: clamp(100px, 9vw, 160px);
color: var(--tcs-copy);
font-family:
Inter,
"Helvetica Neue",
Helvetica,
Arial,
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 19px;
line-height: 1.76;
margin: 0 !important;
max-width: none !important;
width: 100% !important;
}
/* Ensure the layout variables resolve */
.tc-contact-studio__wrap {
margin-inline: auto !important;
max-width:
var(--tcs-content) !important;
padding-left:
var(--tcs-gutter) !important;
padding-right:
var(--tcs-gutter) !important;
width: 100% !important;
}
/* =========================================================
FINAL PANEL COLOUR CONFIRMATION
========================================================= */
.tc-contact-studio__final-number {
color: var(--tcs-green-300) !important;
-webkit-text-fill-color: var(--tcs-green-300) !important;
opacity: 1 !important;
}
.tc-contact-studio__final h2,
.tc-contact-studio__final #tc-contact-final-title {
color: var(--tcs-white) !important;
-webkit-text-fill-color: var(--tcs-white) !important;
opacity: 1 !important;
}
.tc-contact-studio__final p {
color: rgba(255, 255, 255, 0.92) !important;
-webkit-text-fill-color: rgba(255, 255, 255, 0.92) !important;
opacity: 1 !important;
}
.tc-contact-studio__final-email,
.tc-contact-studio__final-email span:first-child {
color: var(--tcs-white) !important;
-webkit-text-fill-color: var(--tcs-white) !important;
opacity: 1 !important;
}
.tc-contact-studio__final-arrow {
background: var(--tcs-white) !important;
color: var(--tcs-green-950) !important;
-webkit-text-fill-color: var(--tcs-green-950) !important;
}
/* =========================================================
THINK CITY EDUCATION SOCIETY
CONTACT PAGE
FULL-WIDTH VIEWPORT PATCH v3.4
Purpose:
- Break Contact Studio out of TheGem's boxed container
- Make all page surfaces edge-to-edge
- Preserve controlled editorial content width
- Improve large-screen hero composition
IMPORTANT:
Add LAST in the Contact stylesheet.
========================================================= */
/* =========================================================
1. BREAK THE COMPLETE PAGE OUT TO VIEWPORT WIDTH
========================================================= */
.tc-contact-studio {
margin-left:
calc(50% - 50vw) !important;
margin-right:
calc(50% - 50vw) !important;
max-width:
none !important;
width:
100vw !important;
}
/* Every major surface now spans the complete viewport */
.tc-contact-studio > section,
.tc-contact-studio > aside {
max-width:
none !important;
width:
100% !important;
}
/* =========================================================
2. PRESERVE THE PREMIUM EDITORIAL GRID
========================================================= */
.tc-contact-studio
.tc-contact-studio__wrap {
margin-left:
auto !important;
margin-right:
auto !important;
max-width:
1580px !important;
padding-left:
clamp(32px, 5vw, 88px) !important;
padding-right:
clamp(32px, 5vw, 88px) !important;
width:
100% !important;
}
/* =========================================================
3. REMOVE HTML-WIDGET WIDTH RESTRICTIONS
========================================================= */
.elementor-widget-html
.tc-contact-studio {
max-width:
none !important;
}
/* =========================================================
4. HERO — USE THE NEW HORIZONTAL SPACE
========================================================= */
@media (min-width: 1200px) {
.tc-contact-studio__hero {
min-height:
clamp(800px, 82svh, 960px);
}
.tc-contact-studio__hero-grid {
gap:
clamp(90px, 8vw, 155px);
grid-template-columns:
minmax(0, 1.08fr)
minmax(470px, 0.82fr);
}
.tc-contact-studio__hero-copy {
max-width:
860px;
}
.tc-contact-studio__folio {
max-width:
585px;
}
}
/* =========================================================
5. IMPROVE HERO IMAGE COVERAGE
========================================================= */
.tc-contact-studio__hero-media {
height: 100%;
width: 100%;
}
.tc-contact-studio__hero-media img {
height: 100%;
max-width:
none !important;
object-fit:
cover;
object-position:
center right;
width: 100%;
}
/* =========================================================
6. INQUIRY / EXPLORE / FINAL SECTIONS
CONFIRM EDGE-TO-EDGE SURFACES
========================================================= */
.tc-contact-studio__inquiries,
.tc-contact-studio__explore,
.tc-contact-studio__final {
margin-left:
0 !important;
margin-right:
0 !important;
max-width:
none !important;
width:
100% !important;
}
/* =========================================================
7. CINEMATIC FINAL IMAGE
========================================================= */
.tc-contact-studio__final-media {
height: 100%;
width: 100%;
}
.tc-contact-studio__final-media img {
height: 100%;
max-width:
none !important;
object-fit:
cover;
object-position:
center;
width: 100%;
}
/* =========================================================
8. LARGE DESKTOP
========================================================= */
@media (min-width: 1700px) {
.tc-contact-studio {
--tcs-content:
1640px;
}
.tc-contact-studio
.tc-contact-studio__wrap {
max-width:
1640px !important;
}
.tc-contact-studio__hero-grid {
gap:
clamp(110px, 8vw, 175px);
grid-template-columns:
minmax(0, 1.1fr)
minmax(500px, 0.8fr);
}
.tc-contact-studio__folio {
max-width:
600px;
}
}
/* =========================================================
9. MOBILE SAFETY
========================================================= */
@media (max-width: 767px) {
.tc-contact-studio
.tc-contact-studio__wrap {
padding-left:
21px !important;
padding-right:
21px !important;
}
.tc-contact-studio__hero-media img {
object-position:
65% center;
}
.tc-contact-studio__final-media img {
object-position:
67% center;
}
}/* End custom CSS */