/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain: Avada
*/
/* ==========================================================================
Tullys — Sitewide Custom CSS
Add to Avada Child theme's style.css (after the header comment block)
========================================================================== */
/* --- Brand variables (navy only, per current Tullys brand rules) --- */
:root {
--navy: #2B3E7A;
--navy-dark: #1E2C58;
--rust: #A0392A;
--ink: #1B1F2A;
--paper: #FFFFFF;
--line: #D8DCE8;
--muted: #5B6172;
}
/* --- Sitewide: all H1s in brand navy --- */
div.post-content h1 {
color: var(--navy) !important;
}
/* --- Sitewide: a paragraph that is the only element in its container
is centered. Scoped to Avada's standard content wrappers so it doesn't
affect paragraphs sitting alongside other content in the same container. --- */
.fusion-text > p:only-child,
.fusion-column-wrapper > p:only-child {
text-align: center;
}
/* ==========================================================================
Tullys — Service Call Booking Form
========================================================================== */
.tullys-service-form-wrap {
max-width: 640px;
margin: 0 auto;
}
.tsf-card {
background: var(--paper);
border: 1px solid var(--line);
border-radius: 6px;
padding: 2.25rem;
box-shadow: 0 1px 3px rgba(27, 31, 42, 0.06);
}
.tsf-card h2 {
margin: 0 0 0.35rem;
font-size: 1.5rem;
font-weight: 700;
color: var(--navy-dark);
}
.tsf-card > p.tsf-intro {
margin: 0 0 1.75rem;
color: var(--muted);
font-size: 0.98rem;
line-height: 1.5;
}
.tsf-field {
margin-bottom: 1.25rem;
}
.tsf-field label {
display: block;
font-size: 0.92rem;
font-weight: 600;
margin-bottom: 0.4rem;
color: var(--ink);
}
.tsf-field .tsf-hint {
font-weight: 400;
color: var(--muted);
font-size: 0.85rem;
display: block;
margin-top: 0.3rem;
}
.tsf-field input[type="text"],
.tsf-field input[type="tel"],
.tsf-field input[type="email"],
.tsf-field select,
.tsf-field textarea,
.tsf-subfield input[type="text"] {
width: 100%;
box-sizing: border-box;
padding: 0.65rem 0.75rem;
border: 1px solid var(--line);
border-radius: 4px;
font-size: 0.98rem;
font-family: inherit;
color: var(--ink);
background: #FCFCFD;
}
.tsf-field input:focus,
.tsf-field select:focus,
.tsf-field textarea:focus,
.tsf-subfield input:focus {
outline: none;
border-color: var(--navy);
box-shadow: 0 0 0 3px rgba(43, 62, 122, 0.15);
}
.tsf-field textarea {
resize: vertical;
min-height: 110px;
}
.tsf-fieldset {
border: none;
padding: 0;
margin: 0 0 1.25rem;
min-width: 0;
}
.tsf-fieldset legend {
font-size: 0.92rem;
font-weight: 600;
margin-bottom: 0.6rem;
padding: 0;
color: var(--ink);
width: 100%;
}
.tsf-fieldset .tsf-subfield {
margin-bottom: 0.75rem;
}
.tsf-fieldset .tsf-subfield label {
font-size: 0.92rem;
font-weight: 600;
color: var(--ink);
margin-bottom: 0.4rem;
}
.tsf-row {
display: flex;
gap: 1rem;
}
.tsf-row .tsf-field,
.tsf-row .tsf-subfield {
flex: 1;
}
.tsf-upload {
border: 1.5px dashed var(--line);
border-radius: 4px;
padding: 1.25rem;
text-align: center;
background: #FCFCFD;
}
.tsf-upload input[type="file"] {
font-size: 0.9rem;
color: var(--muted);
}
.tsf-required {
color: var(--navy);
}
.tsf-submit {
margin-top: 0.5rem;
background: var(--navy);
color: #fff;
border: none;
border-radius: 4px;
padding: 0.85rem 1.75rem;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
width: 100%;
}
.tsf-submit:hover {
background: var(--navy-dark);
}
@media (max-width: 480px) {
.tsf-card {
padding: 1.5rem;
}
.tsf-row {
flex-direction: column;
gap: 0;
}
}
/* ==========================================================================
Tullys — Booking Confirmation ("Thank You") Page
NOTE: your original CSS styled , ,
and the * selector
directly — fine for a standalone HTML file, but sitewide it would have
overridden every page's body background, heading font, and paragraph
styling site-wide. Scoped everything below to .tullys-thankyou-page so
it only affects this one page. Image/logo block removed as requested;
the unused .check-badge/.mark rules (no matching element in your markup)
have also been dropped as dead code.
========================================================================== */
.tullys-thankyou-page,
.tullys-thankyou-page * {
box-sizing: border-box;
}
.tullys-thankyou-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 24px;
background: #F6F4EF;
color: var(--ink);
font-family: 'Inter', -apple-system, sans-serif;
line-height: 1.6;
}
.tullys-thankyou-page .panel {
max-width: 560px;
width: 100%;
background: #FFFFFF;
border: 1px solid #E1DED5;
border-radius: 4px;
padding: 56px 48px;
text-align: center;
}
.tullys-thankyou-page h1 {
font-family: 'Archivo', sans-serif;
font-weight: 700;
font-size: 30px;
line-height: 1.2;
margin: 0 0 4px;
/* Colour comes from the sitewide h1 rule above (navy, !important) */
}
.tullys-thankyou-page .rule {
width: 56px;
height: 3px;
background: var(--rust);
border: none;
margin: 18px auto 26px;
}
.tullys-thankyou-page p {
font-size: 16px;
color: var(--ink);
margin: 0 0 16px;
}
.tullys-thankyou-page .muted {
color: #5B6072;
font-size: 15px;
}
.tullys-thankyou-page .next-box {
margin-top: 32px;
padding: 20px 22px;
background: #F6F4EF;
border-left: 3px solid var(--navy);
border-radius: 0;
text-align: left;
}
.tullys-thankyou-page .next-box p {
margin: 0;
font-size: 15px;
color: var(--ink);
}
.tullys-thankyou-page .next-box strong {
color: var(--navy-dark);
}
.tullys-thankyou-page .footer-line {
margin-top: 36px;
padding-top: 24px;
border-top: 1px solid #E1DED5;
font-size: 14px;
color: #5B6072;
}
.tullys-thankyou-page .footer-line a {
color: var(--rust);
text-decoration: none;
font-weight: 500;
}
.tullys-thankyou-page .footer-line a:hover {
text-decoration: underline;
}
@media (max-width: 480px) {
.tullys-thankyou-page .panel {
padding: 40px 28px;
}
.tullys-thankyou-page h1 {
font-size: 25px;
}
}