/*
Theme Name: Toucreek Divi Child
Theme URI: https://toucreek.com
Description: Custom Divi child theme for Toucreek Technology. Design system: Outfit/Inter typography, cyan #00D9FF accent on navy #0A1628. Built to match the original Toucreek design 1:1.
Author: Unique Web Designer
Author URI: https://uniquewebdesigner.com
Template: Divi
Version: 1.0.0
*/
/* =====================================================================
TOUCREEK DESIGN SYSTEM — global tokens & base typography
Section-level styling lives inside each page's Code module (self-scoped),
the same pattern as the careers section. These globals keep fonts,
colors, links and Divi buttons consistent site-wide.
===================================================================== */
:root{
--tc-accent: #00D9FF;
--tc-navy: #0A1628;
--tc-heading: #1E293B;
--tc-muted: #64748B;
--tc-body: #444444;
--tc-bg: #F8FAFC;
--tc-border: #E2E8F0;
--tc-card: #FFFFFF;
--tc-badge-green-fg:#0F6E56; --tc-badge-green-bg:#E1F5EE; --tc-badge-green-bd:#9FE1CB;
--tc-badge-blue-fg:#185FA5; --tc-badge-blue-bg:#E6F1FB; --tc-badge-blue-bd:#B5D4F4;
}
/* Base typography ---------------------------------------------------- */
body,
.et_pb_row,
.et_pb_text,
p, li, span, a, input, textarea, select, button{
font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
body{ color:var(--tc-body); }
h1,h2,h3,h4,h5,h6,
.et_pb_module h1,.et_pb_module h2,.et_pb_module h3,.et_pb_module h4,
.et_pb_module h5,.et_pb_module h6{
font-family:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
color:var(--tc-heading);
letter-spacing:-0.01em;
}
/* White headings ONLY in dark areas — footer, page banners, and the home
hero. Content headings (e.g. service block titles on white) stay dark.
[class*="-banner-wrapper"] catches every page banner (ps / cu / ndi / cms). */
.et-l--footer h1, .et-l--footer h2, .et-l--footer h3,
.et-l--footer h4, .et-l--footer h5, .et-l--footer h6,
.tc-footer-heading,
[class*="-banner-wrapper"] h1, [class*="-banner-wrapper"] h2,
[class*="-banner-wrapper"] h3, [class*="-banner-wrapper"] h4,
[class*="-banner-wrapper"] h5, [class*="-banner-wrapper"] h6,
.tc-hero-v2-wrapper h1, .tc-hero-v2-wrapper h2, .tc-hero-v2-wrapper h3,
.tc-hero-v2-wrapper h4, .tc-hero-v2-wrapper h5, .tc-hero-v2-wrapper h6,
.tc-hero-v2-title {
color:#ffffff !important;
}
/* Links -------------------------------------------------------------- */
a{ color:var(--tc-accent); transition:opacity .2s ease; }
a:hover{ opacity:.85; }
/* Divi default button → Toucreek cyan pill ------------------------- */
.et_pb_button,
.et_pb_button.et_pb_button{
font-family:'Inter',sans-serif !important;
font-weight:600 !important;
color:var(--tc-navy) !important;
background:var(--tc-accent) !important;
border:none !important;
border-radius:10px !important;
padding:14px 28px !important;
transition:opacity .2s, transform .2s !important;
}
.et_pb_button:hover{
opacity:.9 !important;
transform:translateY(-2px);
padding:14px 28px !important;
}
.et_pb_button:after,.et_pb_button:before{ display:none !important; }
/* Utility helpers usable from Code modules --------------------------- */
.tc-eyebrow{
display:inline-block;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--tc-accent);
background:rgba(0,217,255,.08);border:1px solid rgba(0,217,255,.2);
border-radius:20px;padding:5px 16px;
}
.tc-section{ padding:100px 20px; }
@media (max-width:768px){ .tc-section{ padding:60px 16px; } }
/* Smooth in-page anchor scrolling (Apply Now / Get Started) ---------- */
html{ scroll-behavior:smooth; }
/* =====================================================================
PORTED FROM ORIGINAL SITE (theme-agnostic — works in Divi as-is)
===================================================================== */
/* Content paragraph spacing / wrapping */
.et_pb_text p, .entry-content p{ word-wrap:break-word; }
/* Generic CF7 field width safety */
.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"]{ direction:ltr; width:100% !important; }
/* ── CF7 Careers Application form — full fix (scoped to #application-form,
identical behavior to the original site). Keep the careers form section's
wrapper ID = "application-form". ── */
#application-form .wpcf7 span.wpcf7-list-item,
#application-form .wpcf7 .wpcf7-radio span.wpcf7-list-item,
#application-form .wpcf7 .wpcf7-checkbox span.wpcf7-list-item{
display:block !important; float:none !important; margin:0 !important;
padding:6px 0 !important; width:100% !important; list-style:none !important;
}
#application-form .wpcf7 span.wpcf7-list-item label,
#application-form .wpcf7 .wpcf7-radio span.wpcf7-list-item label,
#application-form .wpcf7 .wpcf7-checkbox span.wpcf7-list-item label{
display:flex !important; flex-direction:row !important; align-items:center !important;
gap:10px !important; font-size:14px !important; font-weight:400 !important;
color:#1E293B !important; cursor:pointer !important; line-height:1.4 !important;
margin:0 !important; padding:0 !important; width:100% !important; float:none !important;
}
#application-form .wpcf7 span.wpcf7-list-item input[type="radio"],
#application-form .wpcf7 span.wpcf7-list-item input[type="checkbox"]{
display:inline-block !important; position:static !important; float:none !important;
width:16px !important; height:16px !important; min-width:16px !important; max-width:16px !important;
margin:0 !important; padding:0 !important; flex-shrink:0 !important;
accent-color:var(--tc-accent) !important; cursor:pointer !important; vertical-align:middle !important;
}
#application-form .wpcf7 .wpcf7-radio,
#application-form .wpcf7 .wpcf7-checkbox{ display:block !important; margin-top:8px !important; }
#application-form .wpcf7 input[type="text"],
#application-form .wpcf7 input[type="email"],
#application-form .wpcf7 select,
#application-form .wpcf7 textarea{
display:block !important; width:100% !important; box-sizing:border-box !important;
padding:10px 14px !important; margin-top:6px !important; border:1.5px solid var(--tc-border) !important;
border-radius:8px !important; font-size:14px !important; line-height:1.5 !important;
color:#1E293B !important; background:#fff !important;
}
#application-form .wpcf7 label{
display:block !important; font-size:14px !important; font-weight:600 !important;
color:#1E293B !important; margin-bottom:4px !important; line-height:1.4 !important;
}
#application-form .wpcf7 .wpcf7-form-control-wrap{ display:block !important; width:100% !important; margin-top:4px !important; }
#application-form .wpcf7 input[type="file"]{
display:block !important; width:100% !important; margin-top:6px !important;
font-size:14px !important; color:var(--tc-muted) !important; padding:8px 0 !important;
}
#application-form .wpcf7 input[type="submit"]{
display:inline-block !important; margin-top:16px !important; padding:14px 36px !important;
background:var(--tc-accent) !important; color:var(--tc-navy) !important; font-size:14px !important;
font-weight:700 !important; border:none !important; border-radius:10px !important; cursor:pointer !important;
}
#application-form .wpcf7 input[type="submit"]:hover{ opacity:.88 !important; }
#application-form .wpcf7 p{ margin-bottom:20px !important; }
#application-form .wpcf7 .wpcf7-not-valid-tip{ color:#e53e3e !important; font-size:12px !important; margin-top:4px !important; display:block !important; }
/* =====================================================================
HEADER + FOOTER — DIVI equivalents of the original Inspiro behavior
(original selectors were Inspiro-only; these target Divi markup)
Home @ top: transparent header. Scrolled / inner pages: solid black.
Logo 140px top -> 62px scrolled. Footer solid black.
NOTE: enable Divi's Transparent Header (per-page/Theme Options) on the
Home page for the transparent-at-top effect to sit over the hero.
===================================================================== */
:root{ --tc-header-bg:#000; --tc-logo-top:140px; --tc-logo-scrolled:62px; }
/* Logo sizing (Divi logo = #logo) */
#logo{ max-height:var(--tc-logo-top) !important; width:auto; transition:max-height .25s ease-in-out; }
#main-header.et-fixed-header #logo{ max-height:var(--tc-logo-scrolled) !important; }
/* Home page, at top of scroll: transparent header, no shadow */
body.home #main-header:not(.et-fixed-header),
body.home #main-header:not(.et-fixed-header) #et-top-navigation{
background:transparent !important; box-shadow:none !important;
}
/* Scrolled state (any page) OR every inner page: solid black + shadow */
#main-header.et-fixed-header,
body:not(.home) #main-header{
background:var(--tc-header-bg) !important;
box-shadow:0 2px 12px rgba(0,0,0,.12) !important;
}
/* Nav link contrast on the dark header */
#main-header #top-menu > li > a,
#main-header .et_mobile_menu a{ color:#fff; }
#main-header #top-menu > li > a:hover{ color:var(--tc-accent); }
/* Footer — solid black, matching the original */
#main-footer{ background:var(--tc-header-bg) !important; color:#c9c9c9; }
#main-footer h1,#main-footer h2,#main-footer h3,#main-footer h4,
#main-footer p,#main-footer span,#main-footer li{ color:#c9c9c9; }
#main-footer a{ color:#fff; }
#main-footer a:hover{ color:var(--tc-accent); }
#main-footer .fwidget img{ max-height:90px; width:auto; } /* footer logo */
#footer-bottom{ background:#000 !important; }
#footer-bottom #footer-info,#footer-bottom .et-social-icons a{ color:#c9c9c9; }
@media (max-width:640px){
#main-footer .footer-widget{ text-align:center; }
}
/* ============================================================
TOUCREEK — SITE-WIDE FIXES
Paste into: WP Admin > Divi > Theme Options > General >
Custom CSS (applies to ALL pages at once)
Fixes:
1. Bullet/number markers showing on header & footer menu
2. Contact + Careers CF7 forms unstyled ("not loading styles")
3. Black form text that should read as light on the design
Brand tokens: accent #00D9FF | navy #0A1628 | text #1E293B
muted #64748B | border #E2E8F0 | light-bg #F8FAFC
============================================================ */
/* ---------- 1. REMOVE LIST MARKERS FROM NAV/FOOTER ----------
Divi forces list-style-type on directly, which beats the
list-style:none we set on the . Re-assert it on the - . */
.tc-site-header ul,
.tc-site-header li,
.tc-menu, .tc-menu li,
.tc-submenu, .tc-submenu li,
.tc-nav ul, .tc-nav li,
.tc-footer-links, .tc-footer-links li,
.tc-footer-social, .tc-footer-social li,
footer .tc-footer-inner ul,
footer .tc-footer-inner li {
list-style: none !important;
list-style-type: none !important;
list-style-position: outside !important;
padding-left: 0 !important;
margin-left: 0 !important;
background-image: none !important; /* kill any Divi bullet image */
}
.tc-site-header li::marker,
.tc-menu li::marker,
.tc-submenu li::marker,
.tc-footer-links li::marker,
.tc-footer-social li::marker,
footer .tc-footer-inner li::marker {
content: "" !important;
}
.tc-site-header li::before,
.tc-footer-links li::before {
content: none !important;
}
/* Neutralize Divi's global disc rule
(#left-area ul, .entry-content ul, .et-l--body ul, .et-l--footer ul,
.et-l--header ul { list-style-type:disc; padding:0 0 23px 1em }) across
ALL our custom layout areas — header, footer, and every code module. */
.et-l--header ul, .et-l--header ol, .et-l--header li,
.et-l--footer ul, .et-l--footer ol, .et-l--footer li,
.et-l--body .et_pb_code ul, .et-l--body .et_pb_code ol, .et-l--body .et_pb_code li,
.et-l--body .et_pb_fullwidth_code ul, .et-l--body .et_pb_fullwidth_code ol, .et-l--body .et_pb_fullwidth_code li,
#left-area .et_pb_code ul, #left-area .et_pb_code li {
list-style: none !important;
list-style-type: none !important;
list-style-position: outside !important;
padding-left: 0 !important;
background-image: none !important;
}
.et-l--header li::marker, .et-l--footer li::marker,
.et-l--body .et_pb_code li::marker,
.et-l--body .et_pb_fullwidth_code li::marker { content: "" !important; }
/* ============================================================
2 + 3. CONTACT-FORM-7 STYLING (Contact + Careers pages)
The form lives in a Divi Text module with no styling, so it
renders as raw inputs with black labels. Turn it into a clean
white "card" that matches the brand and reads correctly on
ANY section background.
============================================================ */
/* Card wrapper around the whole form */
.wpcf7 {
background: #FFFFFF;
border: 1px solid #E2E8F0;
border-radius: 20px;
padding: 40px 36px;
box-shadow: 0 10px 40px rgba(10,22,40,0.06);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
@media (max-width: 600px) { .wpcf7 { padding: 28px 22px; } }
/* Spacing between fields */
.wpcf7-form p { margin: 0 0 20px !important; }
.wpcf7-form p:last-of-type { margin-bottom: 0 !important; }
/* Field labels — dark, readable (fixes the "black/unstyled" look) */
.wpcf7-form label {
display: block;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #0A1628 !important;
margin-bottom: 0;
}
/* Inputs, textarea, selects */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form textarea,
.wpcf7-form select {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
margin-top: 8px;
padding: 14px 16px;
font-family: inherit;
font-size: 15px;
color: #1E293B !important;
background: #F8FAFC !important;
border: 2px solid #E2E8F0 !important;
border-radius: 12px !important;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
-webkit-appearance: none;
appearance: none;
}
.wpcf7-form textarea { min-height: 140px; resize: vertical; }
/* Placeholder */
.wpcf7-form ::placeholder { color: #94A3B8; opacity: 1; }
/* Focus state — cyan ring */
.wpcf7-form input:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
outline: none;
border-color: #00D9FF !important;
background: #FFFFFF !important;
box-shadow: 0 0 0 4px rgba(0,217,255,0.15) !important;
}
/* Custom caret for the select dropdown */
.wpcf7-form select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
padding-right: 44px !important;
}
/* Submit button — blue (cyan) fill, blue glow on hover */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"] {
display: inline-block;
margin-top: 6px;
padding: 15px 40px;
font-family: inherit;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.02em;
color: #0A1628 !important;
background: #00D9FF !important;
border: 2px solid #00D9FF !important;
border-radius: 12px !important;
cursor: pointer;
transition: all .25s ease;
-webkit-appearance: none;
appearance: none;
}
.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover {
color: #0A1628 !important;
background: #00D9FF !important;
border-color: #00D9FF !important;
transform: translateY(-2px);
box-shadow: 0 0 0 4px rgba(0,217,255,0.25), 0 12px 34px rgba(0,217,255,0.55) !important;
}
/* CF7 messages / validation */
.wpcf7-form .wpcf7-not-valid-tip {
color: #DC2626; font-size: 13px; font-weight: 600; margin-top: 6px;
}
.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid,
.wpcf7-form select.wpcf7-not-valid { border-color: #DC2626 !important; }
.wpcf7 .wpcf7-response-output {
margin: 22px 0 0 !important;
border-radius: 10px;
border-width: 2px !important;
padding: 14px 18px !important;
font-size: 14px;
}
.wpcf7 form.sent .wpcf7-response-output {
border-color: #16A34A !important; color: #166534; background: #F0FDF4;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output {
border-color: #DC2626 !important; color: #991B1B; background: #FEF2F2;
}
/* If the form sits inside a Divi light-bg text module, keep our colors */
.et_pb_bg_layout_light .wpcf7-form label { color: #0A1628 !important; }
.et_pb_text .wpcf7-form input,
.et_pb_text .wpcf7-form textarea,
.et_pb_text .wpcf7-form select { color: #1E293B !important; }
/* ============================================================
3b. GENERAL WHITE-TEXT SAFETY on dark sections
Ensures anything meant to be light inside our dark (navy)
blocks never inherits Divi's default dark text color.
============================================================ */
.tc-cu-left-wrapper .tc-cu-contact-card-value { color: #00D9FF !important; }
.tc-cu-left-wrapper .tc-cu-contact-card-label { color: rgba(255,255,255,0.55) !important; }