/* Advanced Tree Service – Estimates Page WordPress Styles */
.ats-wrapper * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.ats-wrapper {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333333;
}
/* Navigation */
.ats-navbar {
background: linear-gradient(135deg, #2d5a27, #4a7c43);
padding: 1rem 0;
width: 100%;
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
.ats-nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.ats-logo {
display: flex;
align-items: center;
gap: 0.5rem;
}
.ats-logo h1 {
color: #ffffff;
font-size: 1.5rem;
font-weight: 700;
}
.ats-nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.ats-nav-links a {
color: #ffffff;
text-decoration: none;
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 5px;
}
.ats-nav-links a:hover,
.ats-nav-links a.active {
background-color: rgba(255,255,255,0.2);
}
.ats-mobile-menu {
display: none;
font-size: 1.5rem;
color: #ffffff;
cursor: pointer;
}
/* Page Header */
.ats-page-header {
background: linear-gradient(135deg, #2d5a27, #4a7c43);
padding: 4rem 2rem;
text-align: center;
color: #ffffff;
}
.ats-page-header h1 {
font-size: 3rem;
margin-bottom: 0.5rem;
color: #ffffff;
}
.ats-page-header p {
font-size: 1.2rem;
opacity: 0.9;
}
/* Estimates Layout */
.ats-estimates-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
align-items: start;
}
/* Form Styles */
.ats-compact-form {
background: #ffffff;
padding: 1.5rem;
border-radius: 15px;
box-shadow: 0 5px 25px rgba(0,0,0,0.1);
}
.ats-compact-form h2 {
color: #2d5a27;
font-size: 1.4rem;
margin-bottom: 1rem;
text-align: center;
}
.ats-form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.ats-form-row-3 {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 0.75rem;
}
.ats-form-group {
margin-bottom: 0.75rem;
}
.ats-form-group label {
display: block;
font-size: 0.85rem;
margin-bottom: 0.25rem;
color: #333;
font-weight: 500;
}
.ats-form-group input,
.ats-form-group select,
.ats-form-group textarea {
width: 100%;
padding: 0.6rem 0.75rem;
font-size: 0.9rem;
border: 2px solid #ddd;
border-radius: 8px;
}
.ats-form-group input:focus,
.ats-form-group select:focus,
.ats-form-group textarea:focus {
outline: none;
border-color: #2d5a27;
}
.ats-form-group textarea {
min-height: 80px;
resize: vertical;
}
.ats-char-counter {
font-size: 0.75rem;
color: #888;
text-align: right;
margin-top: 0.25rem;
}
/* Calendar Styles */
.ats-calendar-toggle {
background: linear-gradient(135deg, #2d5a27, #4a7c43);
color: white;
padding: 0.75rem 1rem;
border: none;
border-radius: 8px;
cursor: pointer;
width: 100%;
font-size: 0.95rem;
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 0.5rem;
}
.ats-calendar-popout {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
background: #f4f4f4;
border-radius: 0 0 10px 10px;
}
.ats-calendar-popout.open {
max-height: 550px;
padding: 0.75rem;
margin-bottom: 0.5rem;
}
.ats-calendar-container {
background: white;
border-radius: 8px;
padding: 0.5rem;
}
.ats-calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.ats-calendar-header h4 {
color: #2d5a27;
font-size: 0.95rem;
}
.ats-calendar-nav-btn {
background: #2d5a27;
color: white;
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
}
.ats-calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 3px;
}
.ats-calendar-day-header {
text-align: center;
font-weight: 600;
color: #333;
padding: 0.25rem;
font-size: 0.75rem;
}
.ats-calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
font-weight: 500;
font-size: 0.8rem;
background: #fff;
padding: 0.4rem;
}
.ats-calendar-day:hover:not(.disabled):not(.empty) {
background: #4a7c43;
color: white;
}
.ats-calendar-day.selected {
background: #2d5a27;
color: white;
}
.ats-calendar-day.disabled {
color: #ccc;
cursor: not-allowed;
background: transparent;
}
.ats-calendar-day.empty {
background: transparent;
cursor: default;
}
.ats-selected-dates {
margin-top: 0.75rem;
}
.ats-selected-date-item {
display: flex;
align-items: center;
gap: 0.5rem;
background: white;
padding: 0.5rem;
border-radius: 10px;
border: 2px solid #2d5a27;
margin-bottom: 0.5rem;
font-size: 0.85rem;
}
.ats-selected-date-item .date {
font-weight: 600;
color: #2d5a27;
min-width: 120px;
font-size: 0.8rem;
}
.ats-selected-date-item select {
flex: 1;
padding: 0.3rem;
font-size: 0.8rem;
border: 1px solid #ddd;
border-radius: 5px;
}
.ats-selected-date-item .remove-date {
background: #dc3545;
color: white;
border: none;
width: 24px;
height: 24px;
border-radius: 50%;
cursor: pointer;
font-size: 1rem;
}
/* Service Area Sidebar */
.ats-service-area-sidebar h3 {
color: #2d5a27;
font-size: 1.3rem;
margin-bottom: 1rem;
text-align: center;
}
.ats-cities-served {
background: white;
border-radius: 10px;
padding: 1rem;
margin-bottom: 1rem;
font-size: 0.8rem;
color: #666;
line-height: 1.8;
}
.ats-deposit-notice {
background: linear-gradient(135deg, #fff8e7, #fff3d6);
border: 2px solid #f0c14b;
border-radius: 10px;
padding: 1rem;
font-size: 0.85rem;
}
.ats-deposit-notice h4 {
color: #8a6d3b;
font-size: 0.95rem;
margin-bottom: 0.5rem;
}
.ats-deposit-notice p {
color: #6b5a3e;
margin-bottom: 0.5rem;
line-height: 1.5;
}
/* Button */
.ats-btn {
display: inline-block;
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
cursor: pointer;
border: none;
font-size: 1rem;
background-color: #6b9b37;
color: #ffffff;
}
.ats-btn:hover {
background-color: #C4893B;
}
/* Footer */
.ats-footer {
background: linear-gradient(135deg, #6B4423, #4A2F17);
color: #ffffff;
padding: 3rem 2rem 1rem;
}
.ats-footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.ats-footer-section h3 {
color: #D4944A;
margin-bottom: 1rem;
}
.ats-footer-section p,
.ats-footer-section a {
color: rgba(255,255,255,0.8);
text-decoration: none;
line-height: 2;
}
.ats-footer-contact-item {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.ats-footer-bottom {
max-width: 1200px;
margin: 2rem auto 0;
padding-top: 1.5rem;
border-top: 1px solid rgba(255,255,255,0.1);
text-align: center;
color: rgba(255,255,255,0.6);
}
/* Responsive */
@media (max-width: 968px) {
.ats-estimates-layout {
grid-template-columns: 1fr;
}
.ats-form-row, .ats-form-row-3 {
grid-template-columns: 1fr;
}
.ats-mobile-menu {
display: block;
}
.ats-nav-links {
display: none;
}
.ats-nav-links.active {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #2d5a27;
padding: 1rem;
}
}
@keyframes fadeOut {
from { opacity: 1; transform: translateX(-50%); }
to { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
📋 Estimate Request Form
Type of Service *
Select a service…
Tree Trimming
Tree Removal
Stump Grinding
Yard and Landscaping
Multiple Services
Other
Select 3-5 dates that work for you.
0 of 3-5 dates selected
// Mobile menu toggle
document.getElementById(‘atsMobileMenu’).addEventListener(‘click’, function() {
document.getElementById(‘atsNavLinks’).classList.toggle(‘active’);
});
// Character counter
document.getElementById(‘atsDescription’).addEventListener(‘input’, function() {
var count = this.value.length;
document.getElementById(‘atsCharCounter’).textContent = count + ‘ / 1000 characters’;
});
// Calendar toggle
document.getElementById(‘atsCalendarToggle’).addEventListener(‘click’, function() {
var popout = document.getElementById(‘atsCalendarPopout’);
var icon = document.getElementById(‘atsToggleIcon’);
popout.classList.toggle(‘open’);
icon.textContent = popout.classList.contains(‘open’) ? ‘▲’ : ‘▼’;
});
// Calendar functionality
(function() {
var currentDate = new Date();
var currentMonth = currentDate.getMonth();
var currentYear = currentDate.getFullYear();
var selectedDates = [];
var minDates = 3;
var maxDates = 5;
var months = [‘January’, ‘February’, ‘March’, ‘April’, ‘May’, ‘June’, ‘July’, ‘August’, ‘September’, ‘October’, ‘November’, ‘December’];
var days = [‘Sun’, ‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’];
var timeSlots = [
{ value: ‘morning-early’, label: ‘7:00 AM – 9:00 AM’ },
{ value: ‘morning-late’, label: ‘9:00 AM – 11:00 AM’ },
{ value: ‘noon’, label: ’11:00 AM – 1:00 PM’ },
{ value: ‘afternoon-early’, label: ‘1:00 PM – 3:00 PM’ },
{ value: ‘afternoon-late’, label: ‘3:00 PM – 5:00 PM’ }
];
function renderCalendar() {
var grid = document.getElementById(‘atsCalendarGrid’);
var monthLabel = document.getElementById(‘atsCalendarMonth’);
monthLabel.textContent = months[currentMonth] + ‘ ‘ + currentYear;
grid.innerHTML = ”;
days.forEach(function(day) {
var header = document.createElement(‘div’);
header.className = ‘ats-calendar-day-header’;
header.textContent = day;
grid.appendChild(header);
});
var firstDay = new Date(currentYear, currentMonth, 1).getDay();
var daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();
var today = new Date();
today.setHours(0, 0, 0, 0);
for (var i = 0; i < firstDay; i++) {
var empty = document.createElement('div');
empty.className = 'ats-calendar-day empty';
grid.appendChild(empty);
}
for (var day = 1; day <= daysInMonth; day++) {
var dayEl = document.createElement('div');
dayEl.className = 'ats-calendar-day';
dayEl.textContent = day;
var dateObj = new Date(currentYear, currentMonth, day);
var dateString = formatDateString(dateObj);
var isPast = dateObj -1) {
selectedDates.splice(index, 1);
} else {
if (selectedDates.length >= maxDates) {
alert(‘You can only select up to ‘ + maxDates + ‘ dates.’);
return;
}
selectedDates.push({ date: dateString, time: timeSlots[0].value });
}
selectedDates.sort(function(a, b) { return new Date(a.date) – new Date(b.date); });
renderCalendar();
updateSelectedDatesList();
updateDateCount();
}
function updateSelectedDatesList() {
var container = document.getElementById(‘atsSelectedDatesContainer’);
var list = document.getElementById(‘atsSelectedDatesList’);
if (selectedDates.length === 0) {
container.style.display = ‘none’;
return;
}
container.style.display = ‘block’;
list.innerHTML = ”;
selectedDates.forEach(function(dateInfo, index) {
var item = document.createElement(‘div’);
item.className = ‘ats-selected-date-item’;
var dateSpan = document.createElement(‘span’);
dateSpan.className = ‘date’;
dateSpan.textContent = formatDisplayDate(dateInfo.date);
var select = document.createElement(‘select’);
timeSlots.forEach(function(slot) {
var option = document.createElement(‘option’);
option.value = slot.value;
option.textContent = slot.label;
if (slot.value === dateInfo.time) option.selected = true;
select.appendChild(option);
});
select.addEventListener(‘change’, function(e) {
selectedDates[index].time = e.target.value;
});
var removeBtn = document.createElement(‘button’);
removeBtn.type = ‘button’;
removeBtn.className = ‘remove-date’;
removeBtn.textContent = ‘×’;
removeBtn.addEventListener(‘click’, function() {
selectedDates.splice(index, 1);
renderCalendar();
updateSelectedDatesList();
updateDateCount();
});
item.appendChild(dateSpan);
item.appendChild(select);
item.appendChild(removeBtn);
list.appendChild(item);
});
}
function updateDateCount() {
var count = selectedDates.length;
var el = document.getElementById(‘atsDateCount’);
var msg = ”;
if (count === 0) {
msg = ‘0 of 3-5 dates selected’;
el.style.color = ‘#666’;
} else if (count < minDates) {
msg = count + ' of 3-5 dates selected (select at least ' + (minDates – count) + ' more)';
el.style.color = '#e67e22';
} else {
msg = count + ' of 3-5 dates selected ✓';
el.style.color = '#27ae60';
}
el.textContent = msg;
}
document.getElementById('atsPrevMonth').addEventListener('click', function() {
currentMonth–;
if (currentMonth 11) { currentMonth = 0; currentYear++; }
renderCalendar();
});
document.getElementById(‘atsEstimateForm’).addEventListener(‘submit’, function(e) {
if (selectedDates.length < minDates) {
e.preventDefault();
alert('Please select at least ' + minDates + ' preferred dates.');
return;
}
var formatted = selectedDates.map(function(d) {
var timeLabel = timeSlots.find(function(t) { return t.value === d.time; }).label;
return formatDisplayDate(d.date) + ' (' + timeLabel + ')';
}).join(' | ');
document.getElementById('atsPreferredDatesInput').value = formatted;
document.getElementById('atsSubmitBtn').textContent = 'Submitting…';
document.getElementById('atsSubmitBtn').disabled = true;
});
renderCalendar();
})();
Advanced Tree Service 