/*
* DTS Theme — shared components (Phase 1 foundation)
*
* Cross-page building blocks for the daddar.io visual redesign. Loaded via
* includes/head.tpl AFTER custom.css, so these rules win same-specificity
* ties against custom.css's existing base/legacy rules — safe to use for
* targeted overrides, not just additive new classes.
*
* Constraint: all visuals here are code-only (gradients, borders, inline
* SVG hooks) — no image files. See the redesign plan for context.
*
* Phase 2 agents: do not edit this file. Add page-specific CSS to your own
* css/pages/
*
* "..."
*
* JR
*
* Jordan Rivera
* Rivera Design Co.
*
*
*
*
*
* yoursite.com
*
*
...page content mockup...
*
*
* bash
*
*
$ ...
*
*
* ────────────────────────────────────────────────────────────────────── */
.dts-trust-strip {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--dts-space-6);
padding: var(--dts-space-5) 0;
border-top: 1px solid var(--dts-border-on-dark);
margin-top: var(--dts-space-6);
}
.dts-trust-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--dts-font-size-sm);
color: var(--dts-text-on-dark-muted);
}
.dts-trust-item i {
font-size: 1.1em;
color: var(--dts-blue-400);
}
/* ── Skeleton / loading state ─────────────────────────────────────────────
* Usage: Managed WordPress
* Works on light sections; add .dts-eyebrow-chip--on-dark inside heroes.
* ────────────────────────────────────────────────────────────────────── */
.dts-eyebrow-chip {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--dts-font-size-xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dts-blue-700);
background: rgba(74, 144, 217, 0.12);
border: 1px solid rgba(74, 144, 217, 0.25);
border-radius: var(--dts-radius-pill);
padding: 5px 14px;
margin-bottom: var(--dts-space-4);
}
.dts-eyebrow-chip--on-dark {
color: #aad4ff;
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
}
/* ── Gradient text accent ────────────────────────────────────────────────
* key phrase inside hero titles.
* ────────────────────────────────────────────────────────────────────── */
.dts-text-gradient {
background: var(--dts-gradient-accent);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: var(--dts-blue-400); /* fallback */
}
/* ── Glass card (for dark sections) ──────────────────────────────────────
* ...
on .dts-section--dark / heroes.
* ────────────────────────────────────────────────────────────────────── */
.dts-glass-card {
background: var(--dts-glass-bg);
border: 1px solid var(--dts-glass-border);
border-radius: var(--dts-radius-lg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}
/* ── Card hover polish (site-wide upgrade of existing cards) ─────────────
* Applies to the shared card classes already used across pages — richer
* lift, accent border sweep, and icon pop on hover.
* ────────────────────────────────────────────────────────────────────── */
.dts-feature-card,
.dts-service-card,
.dts-testimonial-card {
position: relative;
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.25s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.25s ease;
}
.dts-feature-card:hover,
.dts-service-card:hover {
transform: translateY(-4px);
box-shadow: var(--dts-shadow-lg);
border-color: rgba(74, 144, 217, 0.45);
}
.dts-feature-card::after,
.dts-service-card::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 3px;
border-radius: var(--dts-radius-lg) var(--dts-radius-lg) 0 0;
background: var(--dts-gradient-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.dts-feature-card:hover::after,
.dts-service-card:hover::after {
transform: scaleX(1);
}
.dts-feature-card .dts-feature-icon {
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.dts-feature-card:hover .dts-feature-icon {
transform: scale(1.08) translateY(-2px);
}
/* ── Button polish ───────────────────────────────────────────────────────
* Primary buttons get a subtle lift + brighter hover; light hero buttons
* get a soft glow. Applies to existing markup, no changes needed.
* ────────────────────────────────────────────────────────────────────── */
.btn-primary,
.dts-cta-strip .btn-light,
.dts-page-hero .btn-light {
transition: transform 0.18s ease, box-shadow 0.18s ease,
background-color 0.18s ease, color 0.18s ease;
}
.btn-primary:hover,
.dts-cta-strip .btn-light:hover,
.dts-page-hero .btn-light:hover {
transform: translateY(-1px);
box-shadow: var(--dts-shadow-md);
}
.btn-primary:active,
.dts-cta-strip .btn-light:active,
.dts-page-hero .btn-light:active {
transform: translateY(0);
}
/* ── Section divider (soft wave between light sections) ──────────────────
*
* ────────────────────────────────────────────────────────────────────── */
.dts-section-divider {
height: 64px;
background:
radial-gradient(ellipse 60% 100% at 50% 0%, var(--dts-bg-alt) 0%, transparent 70%);
}
/* ── Stat number pop ─────────────────────────────────────────────────────
* Big stat values get the accent gradient for extra punch.
* ────────────────────────────────────────────────────────────────────── */
.dts-home-stat-value {
background: linear-gradient(180deg, #ffffff 30%, #a8cdf0 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ── Mobile base polish (site-wide) ──────────────────────────────────── */
@media (max-width: 767px) {
/* Comfier tap targets on primary actions */
.dts-page-hero-actions .btn,
.dts-cta-strip .btn {
padding-top: 13px;
padding-bottom: 13px;
min-width: 200px;
}
/* Tables scroll instead of squish */
.dts-compare-table-wrap,
.table-responsive {
-webkit-overflow-scrolling: touch;
}
/* Tighter hero rhythm on small screens */
.dts-page-hero-title {
font-size: clamp(1.8rem, 8vw, 2.4rem);
}
.dts-marketing-section-title {
font-size: clamp(1.5rem, 6.5vw, 1.9rem);
}
}