/* ════════════════════════════════════════════════════════════════════
TD Service — Site-wide Mobile + Tablet polish (additive overlay).
Only kicks in below 1024px. Doesn't override desktop layouts.
Loaded site-wide via .
════════════════════════════════════════════════════════════════════ */
/* ── TOUCH: enforce 44px minimum tap target everywhere ── */
@media (hover:none) and (pointer:coarse) {
button, .btn, .btn-gold, .ad-card, a.stat-card, a.pcard,
input[type=button], input[type=submit], select {
min-height: 44px;
}
/* form fields ≥16px so iOS doesn't zoom on focus */
input[type=text], input[type=email], input[type=tel],
input[type=number], input[type=password], input[type=date],
input[type=search], textarea, select {
font-size: 16px !important;
}
}
/* ════ TABLET + PHONE (≤1024px) ════ */
@media (max-width: 1024px) {
/* Generic dash/container fluid widths */
.dash, .shell, .container, .wrap, main, .main {
max-width: 100% !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
}
/* Wide tables → horizontal scroll instead of breaking layout */
table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
max-width: 100%;
}
/* But preserve admin tables that are already mobile-styled */
.table-stack, .table-stack table { display: table; white-space: normal; }
/* Stats grids collapse */
.stats-row { grid-template-columns: repeat(2,1fr) !important; }
/* Long horizontal flexes wrap */
nav, .nav, .header-bar, .topbar {
flex-wrap: wrap !important;
}
/* Booking/inventory rows that use rigid grid columns */
.bk-row, .inv-row {
grid-template-columns: 1fr !important;
gap: .35rem !important;
}
.bk-row .bk-cell, .inv-row > * {
border-bottom: 1px dashed rgba(201,168,76,.1);
padding-bottom: .35rem;
}
.bk-row .bk-cell:last-child, .inv-row > *:last-child {
border-bottom: none;
}
/* Two-column admin layouts → stack */
.two-col, .split, .row-2col {
grid-template-columns: 1fr !important;
}
/* Admin home tile grids stay responsive */
.ad-grid {
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}
}
/* ════ PHONE-ONLY (≤640px) ════ */
@media (max-width: 640px) {
/* Comfortable phone reading baseline (Trent 2026-05-17 readability pass) */
body { font-size: 17px; }
/* Nav links wrap and shrink */
nav, .nav { padding: .5rem 1rem !important; }
nav .nav-right, .nav-right { gap: .4rem !important; }
nav .nav-badge { font-size: .65rem !important; padding: .2rem .5rem !important; }
/* Headings stay legible on phone — bigger than before for readability */
h1 { font-size: 1.9rem !important; line-height: 1.2 !important; }
h2 { font-size: 1.45rem !important; line-height: 1.25 !important; }
h3 { font-size: 1.2rem !important; line-height: 1.3 !important; }
p, li, label, td, th { font-size: 1rem !important; line-height: 1.55 !important; }
/* Tighten hero + section vertical padding so pages don't scroll forever */
header.hero, .hero, .page-hero { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
section { padding-top: 1.75rem !important; padding-bottom: 1.75rem !important; }
/* Forms full width */
form input, form select, form textarea {
width: 100% !important;
}
/* Buttons stack rather than overflow */
.btn-row, .btn-group {
flex-wrap: wrap !important;
gap: .5rem !important;
}
/* Stats single-column for breathing room on tiny screens */
.stats-row { grid-template-columns: 1fr !important; }
/* Admin pulse/dashboard grids */
.ad-grid { grid-template-columns: 1fr !important; }
.ad-card { padding: 1rem !important; }
/* Modals/sheets fit screen */
.modal, .sheet, .drawer {
max-width: 100vw !important;
width: 100% !important;
border-radius: 0 !important;
}
/* Hide bulky desktop-only chrome on phones, but only when class is set */
.desktop-only { display: none !important; }
}
/* ════ TINY PHONE (≤380px) ════ */
@media (max-width: 380px) {
body { font-size: 15px; }
h1 { font-size: 1.65rem !important; }
h2 { font-size: 1.3rem !important; }
.ad-card-title { font-size: 1rem !important; }
.ad-card-desc { font-size: .82rem !important; }
}
/* ════ Make all media respect their container ════ */
img, video, iframe, svg {
max-width: 100%;
height: auto;
}
/* ════ Smooth scroll for in-page anchors ════ */
html { scroll-behavior: smooth; }
/* ════ Coming-soon splash: hide the countdown timer site-wide.
The "Welcome" card stays — just no DAYS / HOURS / MINS / SECS row. ════ */
.cs-timer { display: none !important; }
/* ════════════════════════════════════════════════════════════════════
ADMIN CARDS — pin a solid base under translucent gradients so the
background photo doesn't bleed through. Loaded site-wide; this is a
desktop AND mobile issue so no media query. The card's existing
gradient background-image still renders on top (tint visible at top
left), but the bottom layer is now solid #0f1428.
════════════════════════════════════════════════════════════════════ */
.ad-card,
.ad-card.cat-money, .ad-card.cat-tax, .ad-card.cat-people,
.ad-card.cat-program, .ad-card.cat-ops, .ad-card.cat-danger {
background-color: #0f1428 !important;
}
/* ════════════════════════════════════════════════════════════════════
TD SWEEPSTAKES BANNER (site-wide top banner) — mobile/tablet polish.
The banner uses inline desktop styles. These overrides only kick in
on narrow viewports — additive, scoped, deletes nothing.
════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
#tdSweepBannerTop { padding: .9rem 1rem !important; }
#tdSweepBannerTop > div > div { flex-wrap: wrap !important; }
}
@media (max-width: 640px) {
#tdSweepBannerTop { padding: .75rem .85rem !important; }
/* Row 1 (title chip + CTA): stack vertically, CTA becomes full-width tap target */
#tdSweepBannerTop > div > div:nth-of-type(1) {
flex-direction: column !important;
align-items: stretch !important;
gap: .55rem !important;
margin-bottom: .9rem !important;
}
/* Inner title + "Coming Soon" chip block: stack so the chip never overlaps
the title text and the next row of stats can't cover the chip. */
#tdSweepBannerTop > div > div:nth-of-type(1) > div:first-child {
flex-direction: column !important;
align-items: flex-start !important;
gap: .4rem !important;
}
#tdSweepBannerTop a[href*="sweepstakes.html"] {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
text-align: center !important;
padding: .7rem 1rem !important;
min-height: 44px !important;
line-height: 1.2 !important;
}
/* Row 2 (stats line: 1 free / +1 with purchase / max 2 / FREE TO ENTER): stack */
#tdSweepBannerTop > div > div:nth-of-type(2) {
flex-direction: column !important;
align-items: flex-start !important;
gap: .4rem !important;
font-size: .72rem !important;
margin-bottom: .6rem !important;
}
/* Row 3 (Total Entries + odometer + "Up to $200"): stack, drop right-push */
#tdSweepBannerTop > div > div:nth-of-type(3) {
flex-direction: column !important;
align-items: flex-start !important;
gap: .5rem !important;
}
#tdSweepBannerTop > div > div:nth-of-type(3) > div[style*="margin-left:auto"] {
margin-left: 0 !important;
white-space: normal !important;
}
#tdSwOdoT { transform: scale(.92); transform-origin: left center; }
}
/* ════ Tiny phones (≤380px): shrink banner headline so it doesn't overflow ════ */
@media (max-width: 380px) {
#tdSweepBannerTop > div > div:nth-of-type(1) > div span:first-child {
font-size: .65rem !important;
letter-spacing: .15em !important;
}
#tdSweepBannerTop > div > div:nth-of-type(3) > div:first-child {
white-space: normal !important;
}
}
/* ════════════════════════════════════════════════════════════════════
LAYER 1 · GLOBAL POLISH (desktop + mobile)
"Neat and beautiful" pass — additive only, no structure changes.
════════════════════════════════════════════════════════════════════ */
/* Typography rhythm — slight letter-spacing on body for that "polished" feel.
Doesn't touch headings (which already set their own letter-spacing). */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Long words / IDs / URLs don't blow out container width on phone */
p, li, td, th, .desc, .blurb, .clip-caption, code, pre,
.ad-card-desc, .stat-card .l, dl, dd {
overflow-wrap: anywhere;
word-break: break-word;
}
/* Smooth + lift on buttons + cards — interactive feedback that says "this is tappable" */
button:not([disabled]), .btn, .btn-gold, .btn-primary, .btn-copy, .btn-watch,
.btn-danger, .btn-ghost, .ad-card, a.stat-card, a.pcard, .biz-mode-btn,
.svc-cat-card, .svc-quote, .svc-scrap-link, .slot-btn, .req-btn, .btn-sub,
.copy-btn, .tmpl-btn {
transition: transform .15s ease, box-shadow .2s ease, background-color .18s ease, color .18s ease, border-color .18s ease, opacity .15s ease;
}
@media (hover: hover) {
button:not([disabled]):hover, .btn:hover, .btn-gold:hover, .btn-primary:hover,
.ad-card:hover, a.stat-card:hover, .biz-mode-btn:hover,
.svc-cat-card:hover {
transform: translateY(-1px);
}
.ad-card:hover, a.stat-card:hover, .biz-mode-btn:hover, .svc-cat-card:hover {
box-shadow: 0 6px 20px rgba(0,0,0,.25), 0 2px 6px rgba(85,133,245,.12);
}
}
button:not([disabled]):active, .btn:active, .ad-card:active,
.biz-mode-btn:active { transform: translateY(0) scale(.985); }
/* Keyboard accessibility — visible focus ring instead of the default browser one */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, .ad-card:focus-visible, .btn:focus-visible, .slot-btn:focus-visible {
outline: 2px solid rgba(85,133,245,.75);
outline-offset: 2px;
border-radius: 5px;
}
/* No browser focus ring on mouse-only clicks (only show for keyboard) */
:focus:not(:focus-visible) { outline: none; }
/* Sticky nav gets that polished frosted-glass look */
nav, .nav, header.topbar, #adSidebar, .bk-tools, .ad-toolbar {
-webkit-backdrop-filter: saturate(160%) blur(10px);
backdrop-filter: saturate(160%) blur(10px);
}
/* Subtle scrollbar styling — Firefox + WebKit */
* { scrollbar-width: thin; scrollbar-color: rgba(168,85,247,.35) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: rgba(168,85,247,.35);
border-radius: 6px;
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(168,85,247,.6); background-clip: padding-box; }
/* Selection color matches brand */
::selection { background: rgba(201,168,76,.32); color: #fff; }
::-moz-selection { background: rgba(201,168,76,.32); color: #fff; }
/* Tap feedback on phones — quick darken on press for native-app feel */
@media (hover:none) and (pointer:coarse) {
a, button, .btn, .ad-card, .stat-card, .biz-mode-btn, .svc-cat-card,
.slot-btn, .req-btn, .copy-btn {
-webkit-tap-highlight-color: rgba(85,133,245,.18);
}
}
/* ════════════════════════════════════════════════════════════════════
LAYER 2 · STRONGER MOBILE CATCHES
Catches inline-styled sections that don't follow class conventions.
════════════════════════════════════════════════════════════════════ */
/* Phone-only enhancements (≤640px) */
@media (max-width: 640px) {
/* Any inline-style button/link with a background-fill gets the 44px tap target.
Catches the dozens of one-off `style="background:var(--gold);..."` CTAs. */
a[style*="background:var(--gold)"],
a[style*="background: var(--gold)"],
button[style*="background:var(--gold)"] {
min-height: 44px;
display: inline-flex !important;
align-items: center;
line-height: 1.2;
}
/* Hero titles on phone — sized for readability (not shrunk) */
.page-title, .hero h1, .admin-hero-logo, .hero-title {
font-size: clamp(1.85rem, 8vw, 2.5rem) !important;
line-height: 1.15 !important;
}
/* Hero subtitle / sub copy — kept legible */
.page-sub, .hero-sub, .admin-hero-sub { font-size: 1.02rem !important; line-height: 1.5 !important; }
/* Any flex row using inline `display:flex;gap:1rem` etc. — let it wrap */
body div[style*="display:flex"]:not(.no-wrap-mobile),
body div[style*="display: flex"]:not(.no-wrap-mobile) {
flex-wrap: wrap;
}
/* Cards lose excessive inline padding on phone (helps cramped layouts breathe) */
.svc-card, .svc-cat-card, .clip, .preview-card, .partner, .bk-card,
.stat-card, .kpi {
padding: .9rem 1rem !important;
}
/* Calendar / date pickers fit phone width */
.cal-wrap, .calendar, .booking-calendar { font-size: .85rem; }
/* Code blocks + URL strings get a sane size */
code, pre { font-size: .78rem; }
/* Footers reduce padding */
footer { padding: 1.2rem .9rem !important; }
}
/* Modal / sheet / drawer: never taller than screen, allow internal scroll */
.modal, .sheet, .drawer, .dialog, [role="dialog"], .lightbox {
max-height: 92vh;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* ════════════════════════════════════════════════════════════════════
LAYER 3 · ADMIN-SPECIFIC PHONE POLISH
════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* Admin shell sidebar: it auto-collapses below 900 (per admin-sidebar.php).
Ensure the hamburger toggle is visible + sized for thumbs. */
#adSbToggle {
min-width: 44px !important;
min-height: 44px !important;
font-size: 1.4rem !important;
}
/* Dashboard stat row → 2-col on tablet, 1-col on phone */
.dh-stats, .dh-row { grid-template-columns: repeat(2, 1fr) !important; }
/* Quick action grid wraps */
.dh-quick { display: grid !important; grid-template-columns: repeat(2,1fr); gap: .55rem; }
/* Banking chart shrinks but stays legible */
.bk-chart svg.ch-svg { height: 220px !important; }
.bk-chart .ch-kpis { grid-template-columns: 1fr 1fr; }
.bk-chart .ch-kpis .val { font-size: 1.15rem !important; }
}
@media (max-width: 640px) {
/* Admin dashboard one-column for breathing room */
.dh-stats, .dh-row, .dh-quick { grid-template-columns: 1fr !important; }
/* Banking chart KPIs stack on tiny screens */
.bk-chart .ch-kpis { grid-template-columns: 1fr !important; }
.bk-chart svg.ch-svg { height: 190px !important; }
.bk-chart { padding: .9rem 1rem !important; }
/* The right-pane menu list in admin hero — full-width tap rows */
.rpt-link, .rpt-menu a { padding: .7rem 1rem !important; min-height: 44px; }
/* Admin shell: account cards (banking) full-width */
.bk-grid { grid-template-columns: 1fr !important; }
/* Form actions inside admin pages stack */
.pr-actions, .clip-actions, .share-row, .ch-toggle { flex-wrap: wrap; }
.share-row button { flex: 1 1 calc(50% - .4rem); }
/* Big modal/edit details opened inside admin should fit */
details[open] form, details[open] .form-grid {
grid-template-columns: 1fr !important;
}
/* The 4-button quick-action row in admin tools (banking ledger top tools) */
.bk-tools { flex-wrap: wrap; gap: .55rem; }
.bk-tools button { flex: 1 1 calc(50% - .55rem); min-height: 44px; }
}
/* ════════════════════════════════════════════════════════════════════
LAYER 4 · IMAGES + MEDIA — already covered above (img/video/iframe max-width:100%).
This block adds object-fit fallbacks for hero/background images that use
inline `style="background-image:..."` so they crop nicely instead of stretching.
════════════════════════════════════════════════════════════════════ */
[style*="background-image"]:not(.no-bg-cover) {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Reduced-motion users get no transforms / transitions */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ════════════════════════════════════════════════════════════════════
LAYER 5 · NAV-ALWAYS-VISIBLE GUARDS (2026-05-17)
Trent reported the nav sometimes disappears on phone. Force the
canonical fixed top bar to stay on every page, on top of every
overlay, on every viewport. Additive — overrides nothing else.
════════════════════════════════════════════════════════════════════ */
nav#main-nav {
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important;
z-index: 9999 !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
}
/* Reserve scroll-margin so anchor jumps don't slide under the fixed nav */
:target { scroll-margin-top: 80px; }
/* Mobile menu overlay sits just under nav (which is 9999).
FIX (2026-05-17): When the menu has more items than fit on screen,
justify-content:center pushes the TOP items (Home, Services, About)
ABOVE the scroll area where they can't be reached. Force flex-start
+ scroll + top padding so all items are reachable. This overrides
both td-nav.css canonical AND any page-level inline .mob-nav CSS. */
.mob-nav {
z-index: 9998 !important;
justify-content: flex-start !important;
align-items: stretch !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
padding: 1.5rem 1rem 3rem !important;
gap: 1.4rem !important;
}
.mob-nav .mob-link, .mob-nav > a {
text-align: center;
width: 100%;
display: flex !important;
align-items: center;
justify-content: center;
}
/* ════════════════════════════════════════════════════════════════════
LAYER 6 · TIGHTER PHONE CARDS so pages don't scroll forever (2026-05-17)
Cuts excessive gaps + padding on the most-repeated grid patterns.
Layout stays identical — just less air between rows.
════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
/* Generic grids/flex columns get tighter gaps */
.grid, .stats, .stats-row, .features, .feat,
.cards, .card-grid, .cat-grid, .svc-grid, .price-grid {
gap: .65rem !important;
}
/* Most card paddings collapse one notch */
.card, .feat-card, .feature-card, .svc-card, .price-card,
.cat-card, .stat-card, .trust-tile, .milestone, .milestone-card,
.promise-item, .stress-card, .svc-ov-card {
padding: .9rem 1rem !important;
}
/* Section margin-bottom trimmed so consecutive sections feel closer */
section + section { margin-top: 0 !important; }
/* Big bottom gaps on cta blocks trimmed */
.cta, .cta-inner { padding: 1.5rem 1rem !important; }
}
/* ════════════════════════════════════════════════════════════════════
LAYER 7 · ADMIN PHONE POLISH (2026-05-17)
Bigger admin body text + always-visible sidebar toggle.
════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
/* Admin sidebar toggle: gold-ringed so the user always sees how to
open the menu, no matter which admin page they're on. */
#adSbToggle, .ad-menu-btn, #adMenuBtn {
background: rgba(201,168,76,.10) !important;
border: 1px solid rgba(201,168,76,.55) !important;
border-radius: 6px !important;
color: #c9a84c !important;
min-width: 44px !important;
min-height: 44px !important;
font-size: 1.5rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
z-index: 9999 !important;
}
}
@media (max-width: 640px) {
/* Admin body slightly larger so dashboard text isn't tiny on phone.
Scoped to admin-only pages (those that contain an .ad-card or #adSidebar)
so public phone body (17px) isn't clobbered. */
body:has(#adSidebar), body:has(.ad-card), body:has(.ad-grid) { font-size: 16px; }
/* Admin card titles get a small bump */
.ad-card-title { font-size: 1.05rem !important; line-height: 1.3 !important; }
.ad-card-desc { font-size: .88rem !important; line-height: 1.45 !important; }
}
/* ════════════════════════════════════════════════════════════════════
LAYER 8 · SHARE CAPTION on mobile (2026-05-17 v3)
share-button.js hides #tdShareCaption on phones (≤767px). Trent
wants the tagline text visible above the share pill on phone so
visitors know what the button is for. Override the JS rule and
make the caption see-through so it sits over the page without
blocking content.
Higher specificity (body prefix) so it beats the JS-injected