/* ─────────────────────────────────────────────────────────────────────────────
TrailsIQ Theme — Frontend CSS
───────────────────────────────────────────────────────────────────────────── */
/* ── Variables ─────────────────────────────────────────────────────────────── */
:root {
--forest: #1a2e1a;
--pine: #2d4a2d;
--moss: #4a6741;
--sage: #7a9e6e;
--fern: #a8c49a;
--mist: #e8f0e5;
--earth: #8c6239;
--bark: #5c3f22;
--sand: #f2ead8;
--white: #ffffff;
--offwhite: #f9f7f3;
--ink: #1a1a18;
--mid: #4a4a45;
--light: #9a9a92;
--accent: #dd9b36;
--accentlt: #ef970c;
--radius: 6px;
--radiuslg: 12px;
--nav-h: 64px;
}
/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
/* ── Base typography ────────────────────────────────────────────────────────── */
body {
font-family: 'DM Sans', sans-serif;
background: var(--offwhite);
color: var(--ink);
line-height: 1.65;
font-size: 16px;
overflow-x: hidden;
}
/* Gutenberg block editor padding reset */
.entry-content > * { margin-block-start: 0; margin-block-end: 0; }
.tiq-container {
max-width: 1200px;
margin-inline: auto;
padding-inline: clamp(20px, 4vw, 48px);
}
/* ── Navigation ─────────────────────────────────────────────────────────────── */
.tiq-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 200;
background: var(--forest);
display: flex; align-items: center; justify-content: space-between;
padding: 0 clamp(16px, 4vw, 48px);
height: var(--nav-h);
transition: box-shadow 0.2s;
}
.tiq-nav.scrolled { box-shadow: 0 2px 20px rgba(0,0,0,0.3); }
/* ── WordPress admin bar compensation ───────────────────────────────────────── */
.admin-bar .tiq-nav { top: 32px; }
.admin-bar .nav-mobile-menu { top: calc(var(--nav-h) + 32px); }
@media screen and (max-width: 782px) {
.admin-bar .tiq-nav { top: 46px; }
.admin-bar .nav-mobile-menu { top: calc(var(--nav-h) + 46px); }
}
.nav-logo {
display: flex; align-items: center; gap: 10px;
text-decoration: none; color: var(--white);
flex-shrink: 0;
}
.nav-logo .custom-logo { width: 32px; height: 32px; object-fit: contain; }
.nav-logo-icon {
width: 34px; height: 34px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
}
.nav-logo-text {
font-family: 'DM Sans', sans-serif;
font-size: 18px; font-weight: 700; letter-spacing: -.025em; color: var(--white);
}
.nav-logo-text em {
font-style: normal; color: var(--accent);
}
.nav-links {
display: flex; align-items: center; gap: 28px;
list-style: none; margin-left: auto;
}
.nav-links a {
text-decoration: none; color: rgba(255,255,255,0.72);
font-size: 14px; font-weight: 400; letter-spacing: 0.02em;
transition: color 0.2s; white-space: nowrap;
}
.nav-links a:hover { color: var(--white); }
/* margin-left adds breathing room between the last menu link and
the "Get Started Free" button. Scales down on narrower viewports
so the layout doesn't blow out before the mobile breakpoint. */
.nav-cta {
display: flex;
align-items: center;
gap: 10px;
margin-left: clamp(20px, 3vw, 40px);
}
.btn-nav-ghost {
color: var(--white); text-decoration: none; font-size: 14px;
padding: 8px 16px; border-radius: var(--radius);
border: 1px solid rgba(255,255,255,0.25); transition: all 0.2s;
white-space: nowrap;
}
.btn-nav-ghost:hover { border-color: rgba(255,255,255,0.6); }
.btn-nav-solid {
background: var(--accent); color: var(--white); text-decoration: none;
font-size: 14px; font-weight: 500; padding: 9px 18px;
border-radius: var(--radius); transition: background 0.2s; white-space: nowrap;
}
.btn-nav-solid:hover { background: #aa7624; }
/* Hamburger */
.nav-hamburger {
display: none; flex-direction: column; justify-content: space-between;
width: 26px; height: 18px;
background: none; border: none; cursor: pointer; padding: 0;
margin-left: 8px;
}
.nav-hamburger span {
display: block; width: 100%; height: 2px;
background: var(--white); border-radius: 2px;
transition: transform 0.25s, opacity 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
/* Mobile menu overlay */
.nav-mobile-menu {
position: fixed; inset: var(--nav-h) 0 0 0; z-index: 199;
background: var(--forest);
transform: translateX(100%);
transition: transform 0.3s ease;
overflow-y: auto;
display: flex; flex-direction: column;
}
.nav-mobile-menu.open { transform: none; }
.nav-mobile-inner {
padding: 32px 24px;
display: flex; flex-direction: column; gap: 8px;
}
.nav-mobile-links { list-style: none; }
.nav-mobile-links li { border-bottom: 1px solid rgba(255,255,255,0.07); }
.nav-mobile-links a {
display: block; padding: 16px 0;
text-decoration: none; color: rgba(255,255,255,0.85);
font-size: 18px; font-weight: 400; letter-spacing: 0.02em;
transition: color 0.2s;
}
.nav-mobile-links a:hover { color: var(--white); }
.nav-mobile-cta { margin-top: 28px; text-align: center; }
/* ── Global button styles ───────────────────────────────────────────────────── */
.btn-primary {
background: var(--accent); color: var(--white);
text-decoration: none; font-size: 15px; font-weight: 500;
padding: 14px 28px; border-radius: var(--radius);
transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px;
border: none; cursor: pointer;
}
.btn-primary:hover { background: #aa7624; transform: translateY(-1px); }
.btn-ghost {
color: rgba(255,255,255,0.8); text-decoration: none;
font-size: 15px; padding: 14px 28px; border-radius: var(--radius);
border: 1px solid rgba(255,255,255,0.2);
transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px;
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.5); color: var(--white); }
.btn-full {
display: block; text-align: center; text-decoration: none;
padding: 13px 20px; border-radius: var(--radius);
font-size: 14px; font-weight: 500; transition: all 0.2s;
}
.btn-full-outline { border: 1px solid var(--forest); color: var(--forest); }
.btn-full-outline:hover { background: var(--forest); color: var(--white); }
.btn-full-solid { background: var(--accent); color: var(--white); border: none; }
.btn-full-solid:hover { background: #aa7624; }
.btn-full-forest { background: var(--white); color: var(--forest); border: none; }
.btn-full-forest:hover { background: var(--mist); }
/* ── Section utilities ──────────────────────────────────────────────────────── */
.section-label {
font-family: 'DM Mono', monospace;
font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase;
color: var(--moss); font-weight: 500; margin-bottom: 16px;
display: block;
}
.section-label.light { color: var(--fern); }
.section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(32px, 4.5vw, 56px);
line-height: 1.0; letter-spacing: 0.04em;
color: var(--forest); margin-bottom: 20px;
}
.section-title.light { color: var(--white); }
.section-body {
font-size: 17px; color: var(--mid); max-width: 540px;
line-height: 1.75; font-weight: 300;
}
.section-body.light { color: rgba(255,255,255,0.65); }
/* ── Page offset for fixed nav ──────────────────────────────────────────────── */
.site-main { padding-top: 0; }
/* ── Hero block ─────────────────────────────────────────────────────────────── */
.tiq-hero {
min-height: 100svh;
background: var(--forest);
display: flex; flex-direction: column;
justify-content: flex-end;
padding: calc(var(--nav-h) + 60px) clamp(20px, 5vw, 80px) clamp(48px, 7vw, 80px);
position: relative; overflow: hidden;
}
.hero-bg-pattern {
position: absolute; inset: 0; pointer-events: none;
background-image:
radial-gradient(ellipse 80% 60% at 70% 40%, rgba(74,103,65,0.35) 0%, transparent 70%),
repeating-linear-gradient(
-45deg, transparent, transparent 40px,
rgba(255,255,255,0.012) 40px, rgba(255,255,255,0.012) 41px
);
}
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgb(170 118 36 / 44%); border: 1px solid #aa7624;
color: var(--accentlt); border-radius: 99px;
font-size: 12px; font-weight: 500; letter-spacing: 0.08em;
padding: 5px 14px; margin-bottom: 28px;
text-transform: uppercase; width: fit-content;
position: relative; z-index: 1;
}
.hero-badge-dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--accentlt);
animation: tiq-pulse 2s infinite; flex-shrink: 0;
}
@keyframes tiq-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.tiq-hero h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(52px, 9vw, 124px);
font-weight: 600;
line-height: 0.92; letter-spacing: 0.03em;
color: var(--white); margin-bottom: 28px;
max-width: 800px; position: relative; z-index: 1;
}
.tiq-hero h1 em { font-style: normal; color: var(--sage); }
.hero-sub,
.entry-content .hero-sub {
font-size: clamp(15px, 2vw, 18px);
color: rgba(255,255,255,0.65);
max-width: 560px !important; line-height: 1.7; margin-bottom: 40px;
font-weight: 300; position: relative; z-index: 1;
}
.hero-actions {
display: flex; align-items: center; gap: 14px;
flex-wrap: wrap; position: relative; z-index: 1;
}
.hero-scroll-hint {
position: absolute; bottom: 28px; right: clamp(20px, 5vw, 48px);
display: flex; align-items: center; gap: 8px;
color: rgba(255,255,255,0.35); font-size: 11px;
letter-spacing: 0.1em; text-transform: uppercase;
}
.hero-scroll-line { width: 36px; height: 1px; background: rgba(255,255,255,0.2); }
/* Hero + phone variant ───────────────────────────────────────────────────── */
.tiq-hero--with-phone { justify-content: center; }
.tiq-hero--with-phone .hero-layout {
display: grid;
grid-template-columns: 1fr minmax(0, auto);
gap: clamp(32px, 5vw, 80px);
align-items: center;
width: 100%;
position: relative; z-index: 1;
}
.tiq-hero--with-phone .hero-layout[data-phone-pos="left"] {
grid-template-columns: minmax(0, auto) 1fr;
}
.tiq-hero--with-phone .hero-layout[data-phone-pos="left"] .hero-visual { order: 0; }
.tiq-hero--with-phone .hero-layout[data-phone-pos="left"] .hero-text { order: 1; }
.tiq-hero--with-phone .hero-text { min-width: 0; }
.tiq-hero--with-phone .hero-text h1 { max-width: 100%; }
.tiq-hero--with-phone .hero-visual {
display: flex;
justify-content: center;
align-items: center;
min-width: 0;
}
.tiq-hero--with-phone .hero-visual .tiq-smartphone-wrap {
padding: 0;
width: var(--tiq-phone-w);
flex-shrink: 0;
}
/* Group (main + second phone) inside the hero */
.tiq-hero--with-phone .hero-visual .tiq-smartphone-group {
padding: 0;
width: auto;
}
/* Tablet — shrink the phone (caps the user-configured size) */
@media (max-width: 1024px) {
.tiq-hero--with-phone .tiq-smartphone-wrap {
--tiq-phone-w: min(var(--tiq-phone-w-user, 300px), 260px);
}
.tiq-hero--with-phone .hero-visual .tiq-smartphone-group .tiq-smartphone-wrap {
--tiq-phone-w: min(var(--tiq-phone-w-user, 300px), 200px);
}
.tiq-hero--with-phone .hero-layout { gap: 40px; }
}
/* Mobile — stack vertically, text first, phone below */
@media (max-width: 768px) {
.tiq-hero--with-phone {
min-height: 0;
padding-top: calc(var(--nav-h) + 40px);
padding-bottom: 60px;
}
.tiq-hero--with-phone .hero-layout,
.tiq-hero--with-phone .hero-layout[data-phone-pos="left"] {
grid-template-columns: 1fr;
gap: 40px;
}
.tiq-hero--with-phone .hero-layout[data-phone-pos="left"] .hero-visual,
.tiq-hero--with-phone .hero-layout[data-phone-pos="left"] .hero-text { order: initial; }
.tiq-hero--with-phone .hero-visual { justify-content: center; }
.tiq-hero--with-phone .tiq-smartphone-wrap {
--tiq-phone-w: min(var(--tiq-phone-w-user, 300px), 240px);
}
.tiq-hero--with-phone .hero-visual .tiq-smartphone-group .tiq-smartphone-wrap {
--tiq-phone-w: min(var(--tiq-phone-w-user, 300px), 160px);
}
.tiq-hero--with-phone .hero-scroll-hint { display: none; }
}
/* Small phones — keep the mockup visible but compact */
@media (max-width: 480px) {
.tiq-hero--with-phone .tiq-smartphone-wrap {
--tiq-phone-w: min(var(--tiq-phone-w-user, 300px), 200px);
}
.tiq-hero--with-phone .hero-visual .tiq-smartphone-group .tiq-smartphone-wrap {
--tiq-phone-w: min(var(--tiq-phone-w-user, 300px), 130px);
}
}
/* ── Stats bar block ────────────────────────────────────────────────────────── */
.tiq-stats-bar {
background: var(--pine);
padding: 20px clamp(20px, 4vw, 48px);
display: grid;
grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stat-item {
display: flex; flex-direction: column; align-items: center;
padding: 16px 8px;
border-right: 1px solid rgba(255,255,255,0.1);
}
.stat-item:last-child { border-right: none; }
.stat-number {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(32px, 4vw, 44px); color: var(--white);
letter-spacing: 0.04em; line-height: 1;
}
.stat-label {
font-size: 11px; color: rgba(255,255,255,0.5);
letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px;
text-align: center;
}
/* ── Features grid block ────────────────────────────────────────────────────── */
.tiq-features-grid {
background: var(--forest);
padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
}
.features-header {
display: grid; grid-template-columns: 1fr 1fr;
gap: 40px; margin-bottom: 56px; align-items: end;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2px;
}
.feature-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 32px);
transition: background 0.25s; position: relative; overflow: hidden;
}
.feature-card::before {
content: ''; position: absolute; top: 0; left: 0;
width: 3px; height: 0; background: var(--accent); transition: height 0.3s;
}
.feature-card:hover { background: rgba(255,255,255,0.07); }
.feature-card:hover::before { height: 100%; }
.feature-icon {
width: 44px; height: 44px; background: rgba(200,98,42,0.15);
border-radius: var(--radius); display: flex; align-items: center;
justify-content: center; font-size: 20px; margin-bottom: 20px;
border: 1px solid rgba(200,98,42,0.25);
color: #d97a3c;
}
.feature-icon .tiq-icon-svg { width: 22px; height: 22px; display: block; }
.feature-title { font-size: 20px; font-weight: 500; color: var(--white); margin-bottom: 10px; }
.feature-desc,
.entry-content .feature-desc { font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.7; font-weight: 300; }
/* Optional per-feature CTA. Three styles drop into the dark
feature-card background:
- primary: filled brand orange, full pill button
- ghost: subtle outlined pill, brand orange on hover
- link: text + arrow, no chrome — useful when many cards
ship a CTA and you want them to read as quiet links
instead of competing buttons. */
.feature-button {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 18px;
padding: 9px 16px;
border-radius: 999px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
align-self: flex-start;
-webkit-tap-highlight-color: transparent;
}
.feature-button:hover { transform: translateY(-1px); }
.feature-button--primary {
background: #dd9c34;
color: #1a1a1a;
border: 1px solid #dd9c34;
}
.feature-button--primary:hover {
background: #c98a2c;
border-color: #c98a2c;
color: #1a1a1a;
}
.feature-button--ghost {
background: transparent;
color: rgba(255,255,255,0.85);
border: 1px solid rgba(255,255,255,0.18);
}
.feature-button--ghost:hover {
border-color: #dd9c34;
color: #dd9c34;
}
.feature-button--link {
padding: 0;
border-radius: 0;
background: transparent;
border: none;
color: #dd9c34;
font-weight: 600;
}
.feature-button--link:hover {
color: #f1b864;
}
.feature-button--link .feature-button-arrow {
transition: transform 0.18s;
}
.feature-button--link:hover .feature-button-arrow {
transform: translateX(3px);
}
/* Make the card a column so the button can sit at the bottom of
each cell aligned with its peers — keeps the grid visually
tidy when card text lengths differ. */
.feature-card { display: flex; flex-direction: column; }
.feature-card .feature-desc { flex: 1; }
/* ── Steps section (How it works) ───────────────────────────────────────────── */
.tiq-steps-section {
background: var(--sand);
padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
}
.steps-header { text-align: center; margin-bottom: 64px; }
.steps-header .section-body { margin-inline: auto; }
.steps-row {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0; position: relative;
}
.steps-row::before {
content: ''; position: absolute;
top: 31px; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(to right, transparent, var(--moss), var(--moss), transparent);
opacity: 0.35;
}
.step {
padding: 0 clamp(12px, 2vw, 24px);
display: flex; flex-direction: column; align-items: center; text-align: center;
}
.step-num {
width: 62px; height: 62px; border-radius: 50%;
background: var(--forest); color: var(--white);
font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 0.04em;
display: flex; align-items: center; justify-content: center;
margin-bottom: 24px; position: relative; z-index: 1;
border: 3px solid var(--sand); box-shadow: 0 0 0 1px var(--moss);
flex-shrink: 0;
}
.step-title { font-size: 15px; font-weight: 500; color: var(--forest); margin-bottom: 10px; }
.step-desc { font-size: 13px; color: var(--mid); line-height: 1.7; font-weight: 300; }
/* ── Pricing section ────────────────────────────────────────────────────────── */
.tiq-pricing-section {
background: var(--offwhite);
padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
}
.pricing-header { text-align: center; margin-bottom: 56px; }
.pricing-header .section-body { margin-inline: auto; }
.pricing-grid {
/* auto-fit on a 260px floor so the editor's "Add plan" / "Remove
plan" buttons can grow or shrink the tile count without us
hand-tuning grid-template-columns per count. 1 plan centers,
2 sit side-by-side, 3 fill the row, 4+ wrap. */
display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px; max-width: 1280px; margin-inline: auto;
}
.pricing-card {
background: var(--white); border: 1px solid rgba(0,0,0,0.08);
border-radius: var(--radiuslg); padding: clamp(24px, 3vw, 36px) clamp(20px, 2.5vw, 32px);
position: relative; transition: transform 0.2s, box-shadow 0.2s;
display: flex; flex-direction: column;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,0.08); }
.pricing-card.featured { background: var(--forest); border: 2px solid var(--moss); }
.pricing-popular {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: var(--accent); color: var(--white);
font-size: 11px; font-weight: 500; letter-spacing: 0.06em;
padding: 4px 14px; border-radius: 99px;
text-transform: uppercase; white-space: nowrap;
}
.pricing-tier {
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--moss); font-weight: 500; margin-bottom: 10px;
font-family: 'DM Mono', monospace;
}
.pricing-tier.light { color: var(--fern); }
.pricing-price {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(40px, 5vw, 52px); letter-spacing: 0.04em;
color: var(--forest); line-height: 1; margin-bottom: 4px;
}
.pricing-price.light { color: var(--white); }
.pricing-price span { font-size: 18px; vertical-align: top; margin-top: 6px; display: inline-block; }
.pricing-period { font-size: 13px; color: var(--light); margin-bottom: 20px; }
.pricing-period.light { color: rgba(255,255,255,0.45); }
.pricing-desc {
font-size: 14px; color: var(--mid); line-height: 1.65;
padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,0.06);
margin-bottom: 20px; font-weight: 300;
}
.pricing-desc.light { color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.1); }
.pricing-features {
list-style: none; display: flex; flex-direction: column; gap: 10px;
margin-bottom: 28px; flex: 1;
}
.pricing-features li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px; color: var(--mid);
}
.pricing-features.light li { color: rgba(255,255,255,0.7); }
.check {
width: 16px; height: 16px; border-radius: 50%;
background: var(--mist); display: flex; align-items: center; justify-content: center;
font-size: 9px; flex-shrink: 0; margin-top: 2px; color: var(--moss);
}
.check.light { background: rgba(255,255,255,0.12); color: var(--fern); }
/* ── Testimonials section ───────────────────────────────────────────────────── */
.tiq-testimonials-section {
background: var(--offwhite);
padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
}
.tiq-testimonials-section .testimonials-header {
max-width: 720px;
margin: 0 auto 48px;
text-align: center;
}
.tiq-testimonials-section .section-subtitle {
font-size: 16px; color: var(--mid); line-height: 1.6;
font-weight: 300; margin-top: 12px;
max-width: 560px; margin-left: auto; margin-right: auto;
}
/* Layout: column count is set by [data-cols] so the inspector
"Columns" select drives a single rule. 1 = single featured card
centred under the header; 2 + 3 = a normal grid.
Default is 3 columns so blocks saved before the layout picker
landed (no data-cols attribute) still render as a grid instead
of stacking. */
.testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
max-width: 1200px;
margin: 0 auto;
}
.testimonials-grid[data-cols="1"] { grid-template-columns: minmax(0, 720px); justify-content: center; }
.testimonials-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.testimonials-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
.testimonials-grid,
.testimonials-grid[data-cols="3"] { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
.testimonials-grid,
.testimonials-grid[data-cols="2"],
.testimonials-grid[data-cols="3"] { grid-template-columns: 1fr; }
}
/* Card */
.testimonial-card {
position: relative;
background: var(--white);
border: 1px solid rgba(0,0,0,0.06);
border-radius: var(--radiuslg);
padding: clamp(22px, 2.6vw, 32px) clamp(20px, 2.4vw, 30px);
transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
display: flex; flex-direction: column;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.testimonial-card:hover {
box-shadow: 0 12px 32px rgba(0,0,0,0.08);
transform: translateY(-2px);
}
/* Featured variant — adds the brand orange accent + a subtle wash
so an editor-flagged "best" testimonial reads as the hero card. */
.testimonial-card.is-featured {
border-color: rgba(221,156,53,0.45);
box-shadow: 0 8px 28px rgba(221,156,53,0.18);
background: linear-gradient(180deg, rgba(221,156,53,0.04) 0%, var(--white) 60%);
}
.testimonial-card.is-featured::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, #dd9c34 0%, #c98a2c 100%);
border-radius: var(--radiuslg) var(--radiuslg) 0 0;
}
/* Optional organisation logo at the top of the card. Caps height
so a very tall logo doesn't dominate the card. */
.testimonial-logo {
margin-bottom: 16px;
display: flex; align-items: center;
height: 28px;
}
.testimonial-logo img {
max-height: 28px; width: auto; max-width: 140px;
display: block;
opacity: 0.85;
object-fit: contain;
}
/* 5-star row. is-filled stars get the brand orange; the rest stay
muted so the row reads as "out of 5" at a glance. */
.testimonial-stars {
display: flex; gap: 3px;
margin-bottom: 14px;
font-size: 16px;
line-height: 1;
}
.testimonial-star {
color: #e5e7eb;
transition: color 0.15s;
}
.testimonial-star.is-filled { color: #dd9c34; }
/* Quote mark */
.testimonial-quote {
font-size: 38px;
color: var(--fern);
line-height: 0.7;
margin-bottom: 14px;
font-family: Georgia, serif;
user-select: none;
}
.testimonial-card.is-featured .testimonial-quote { color: #dd9c34; }
.testimonial-text {
font-size: 16px; color: var(--mid); line-height: 1.65;
font-weight: 300; margin-bottom: 24px; flex: 1;
}
.testimonials-grid[data-cols="1"] .testimonial-text {
font-size: 18px; line-height: 1.6;
}
/* Author row */
.testimonial-author { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.author-avatar {
width: 44px; height: 44px; border-radius: 50%;
background: var(--mist);
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 600; color: var(--pine);
flex-shrink: 0;
letter-spacing: 0.02em;
}
.author-avatar--photo {
object-fit: cover;
display: block;
background: transparent;
}
.testimonial-card.is-featured .author-avatar:not(.author-avatar--photo) {
background: rgba(221,156,53,0.15);
color: #b87b1a;
}
.author-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.author-role { font-size: 12px; color: var(--light); margin-top: 2px; line-height: 1.4; }
/* ── CTA section ────────────────────────────────────────────────────────────── */
.tiq-cta-section {
background: var(--forest);
padding: clamp(64px, 10vw, 120px) clamp(20px, 4vw, 48px);
text-align: center; position: relative; overflow: hidden;
}
.tiq-cta-section::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(74,103,65,0.4) 0%, transparent 70%);
pointer-events: none;
}
/* Heading is class-based so the operator-picked tag (H1–H4)
inherits the same look — the legacy h2 rule is kept as a
fallback for already-saved blocks that don't yet carry the
.cta-heading class. The variants below mirror the heading
block styles registered for core/heading (tiq-display,
tiq-eyebrow, tiq-light) so a CTA heading matches the rest
of the site by default. */
.tiq-cta-section .cta-heading,
.tiq-cta-section h2 {
position: relative; z-index: 1;
margin-bottom: 20px;
color: var(--white);
}
/* Display style — the original oversized Bebas Neue marquee.
Matches .wp-block-heading.is-style-tiq-display. */
.tiq-cta-section .cta-heading--display,
.tiq-cta-section h2 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(40px, 7vw, 88px);
letter-spacing: 0.04em;
line-height: 0.95;
font-weight: normal;
}
/* Regular style — quieter heading, matches the surrounding page
so a CTA used inline mid-article doesn't dominate. Uses DM Sans
to align with the rest of the body type. */
.tiq-cta-section .cta-heading--regular {
font-family: 'DM Sans', sans-serif;
font-size: clamp(28px, 4vw, 44px);
letter-spacing: -0.01em;
line-height: 1.15;
font-weight: 600;
}
/* Eyebrow style — DM Mono uppercase tag, brand-orange.
Matches .wp-block-heading.is-style-tiq-eyebrow. Useful when
the CTA heading is meant to read as a kicker / pre-heading
rather than the dominant line in the section. */
.tiq-cta-section .cta-heading--eyebrow {
font-family: 'DM Mono', monospace;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
line-height: 1.4;
margin-bottom: 14px;
}
/* Content width — caps the heading / subtitle / note so the text
doesn't sprawl across very wide screens. The Layout panel
writes data-width="narrow|medium|wide|full" onto the section.
Buttons (.cta-actions) keep their own natural sizing so a
wide button row stays readable even with narrow text. */
.tiq-cta-section[data-width="narrow"] .cta-heading,
.tiq-cta-section[data-width="narrow"] .cta-sub,
.tiq-cta-section[data-width="narrow"] .cta-note {
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.tiq-cta-section[data-width="medium"] .cta-heading,
.tiq-cta-section[data-width="medium"] .cta-sub,
.tiq-cta-section[data-width="medium"] .cta-note {
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.tiq-cta-section[data-width="wide"] .cta-heading,
.tiq-cta-section[data-width="wide"] .cta-sub,
.tiq-cta-section[data-width="wide"] .cta-note {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
/* Full = no cap on heading/note, but the subtitle keeps its
existing 480px reading-width so long subheads don't become
walls of text. */
.tiq-cta-section[data-width="full"] .cta-heading,
.tiq-cta-section[data-width="full"] .cta-note {
max-width: none;
}
.cta-sub,
.entry-content .cta-sub {
font-size: clamp(15px, 2vw, 18px); color: rgba(255,255,255,0.6);
max-width: 480px; margin: 0 auto 40px;
font-weight: 300; line-height: 1.7;
position: relative; z-index: 1;
}
.cta-actions {
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
position: relative; z-index: 1;
}
.cta-note,
.entry-content .cta-note {
font-size: 13px; color: rgba(255,255,255,0.35);
margin-top: 20px; position: relative; z-index: 1;
}
/* ── Pill tags ──────────────────────────────────────────────────────────────── */
.pill-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.pill {
background: var(--mist); color: var(--pine);
border-radius: 99px; font-size: 13px; font-weight: 500;
padding: 5px 14px;
}
/* ── Footer ─────────────────────────────────────────────────────────────────── */
.tiq-footer {
background: var(--ink);
padding: clamp(40px, 6vw, 64px) 0 clamp(24px, 4vw, 36px);
}
.footer-grid {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px; margin-bottom: 40px;
}
.footer-brand {}
.footer-logo { margin-bottom: 12px; }
.footer-tagline {
font-size: 13px; color: rgba(255,255,255,0.4);
line-height: 1.65; font-weight: 300; max-width: 240px;
}
/* Footer App Store + Google Play badges. Inherits the .tiq-store-badge
base, but overrides the height down from 44px to 32px so the row
sits comfortably under the tagline without dominating the column. */
.footer-store-badges {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.footer-store-badges .tiq-store-badge img {
height: 25px;
}
.footer-col h4 {
font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
color: rgba(255,255,255,0.35); margin-bottom: 18px;
font-family: 'DM Mono', monospace;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
text-decoration: none; font-size: 14px;
color: rgba(255,255,255,0.55); transition: color 0.2s;
}
.footer-links a:hover { color: var(--white); }
.footer-bottom {
border-top: 1px solid rgba(255,255,255,0.06);
padding-top: 24px;
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
}
.footer-copy { font-size: 13px; color: rgba(255,255,255,0.3); }
.footer-wp {
font-size: 13px; color: rgba(255,255,255,0.3);
display: flex; align-items: center; gap: 6px;
}
.wp-badge {
background: #dd9b36; color: var(--white);
font-size: 10px; padding: 2px 7px; border-radius: 3px; font-weight: 500;
}
/* ── Core block overrides ───────────────────────────────────────────────────── */
/* Allow full-width blocks to break out of the container */
.entry-content {
overflow: hidden;
}
/* Gutenberg paragraph / heading styles inside content */
.entry-content p {
font-size: 17px; color: var(--mid); line-height: 1.75;
max-width: 72ch;
}
.entry-content .tiq-hero p,
.entry-content .tiq-cta-section p { max-width: none; }
/* WP core button block */
.wp-block-button__link {
border-radius: var(--radius) !important;
font-family: 'DM Sans', sans-serif !important;
font-weight: 500 !important;
}
/* ── Responsive ──────────────────────────────────────────────────────────────── */
/* Tablet / small desktop */
@media (max-width: 960px) {
.features-header { grid-template-columns: 1fr; gap: 24px; }
.features-grid { grid-template-columns: repeat(2, 1fr); }
/* .pricing-grid handled by auto-fit minmax(260px, 1fr) — no override needed */
.footer-grid { grid-template-columns: 1fr 1fr; }
.steps-row { grid-template-columns: repeat(2, 1fr); gap: 48px; }
.steps-row::before { display: none; }
.testimonials-grid { grid-template-columns: repeat(2, 1fr); }
/* New sections */
.tiq-what-is,
.tiq-maintenance-section,
.tiq-wordpress-section { grid-template-columns: 1fr; }
.data-header { grid-template-columns: 1fr; }
.data-cards { grid-template-columns: 1fr 1fr; }
}
/* Mobile */
@media (max-width: 640px) {
/* Nav */
.nav-links { display: none; }
.btn-nav-ghost { display: none; }
.btn-nav-solid { display: none; }
.nav-hamburger { display: flex; }
/* Stats bar */
.tiq-stats-bar { display: none; }
/* Stats bar */
.tiq-stats-bar { grid-template-columns: 1fr 1fr; }
.stat-item:nth-child(2) { border-right: none; }
.stat-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.06); }
.stat-item:nth-child(4) { border-right: none; border-top: 1px solid rgba(255,255,255,0.06); }
/* Features */
.features-grid { grid-template-columns: 1fr; gap: 1px; }
/* Steps */
.steps-row { grid-template-columns: 1fr; gap: 36px; }
/* Pricing — auto-fit collapses to one column under 260px floor;
just tighten the max-width so a single tile doesn't sprawl. */
.pricing-grid { max-width: 400px; }
/* Testimonials */
.testimonials-grid { grid-template-columns: 1fr; }
/* Footer */
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
/* New sections */
.data-cards { grid-template-columns: 1fr; }
/* Hero */
.hero-scroll-hint { display: none; }
/* CTA */
.cta-actions { flex-direction: column; align-items: center; }
.cta-actions .btn-primary,
.cta-actions .btn-ghost {
text-align: center; justify-content: center;
align-self: stretch;
}
/* Per-button "Hide on mobile" toggle — keeps the button on
desktop, hides it under the mobile breakpoint so a busy
multi-CTA section can collapse cleanly on phones. */
.cta-actions .is-mobile-hidden { display: none !important; }
/* Hero actions */
.hero-actions { flex-direction: column; align-items: stretch; }
.hero-actions .btn-primary,
.hero-actions .btn-ghost { text-align: center; justify-content: center; }
/* Per-button "Hide on mobile" toggle in the hero block — keeps
the button on desktop, hides it under the mobile breakpoint
so a busy two-CTA hero can collapse to a single primary on
phones without removing the secondary CTA from desktop. */
.hero-actions .is-mobile-hidden { display: none !important; }
}
/* ── What is TrailsIQ ───────────────────────────────────────────────────────── */
.tiq-what-is {
background: var(--offwhite);
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px); align-items: center;
padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
}
.what-is-visual {
background: var(--forest);
border-radius: var(--radiuslg);
padding: 36px; min-height: clamp(260px, 40vw, 480px);
position: relative; overflow: hidden;
display: flex; flex-direction: column; justify-content: space-between;
}
.map-mockup {
position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(ellipse 60% 40% at 40% 50%, rgba(74,103,65,0.5) 0%, transparent 70%),
radial-gradient(ellipse 30% 30% at 70% 30%, rgba(200,98,42,0.2) 0%, transparent 60%);
}
.map-dot {
position: absolute; width: 10px; height: 10px; border-radius: 50%;
background: var(--accentlt); border: 2px solid rgba(255,255,255,0.6);
}
.map-dot.open { background: #6abf6a; }
.map-dot.closed { background: #e05555; }
.map-dot.caution { background: #e0aa44; }
.map-card {
position: absolute; bottom: 28px; left: 28px; right: 28px;
background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.14);
border-radius: var(--radius); padding: 14px 18px;
backdrop-filter: blur(12px);
display: flex; align-items: center; justify-content: space-between;
}
.map-card-label { font-size: 12px; color: rgba(255,255,255,0.5); }
.map-card-trail { font-size: 11px; color: rgba(255,255,255,0.35); margin-top: 2px; }
.map-card-status {
font-size: 13px; font-weight: 500; color: #6abf6a;
display: flex; align-items: center; gap: 6px;
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.trail-legend {
position: absolute; top: 28px; right: 28px;
background: rgba(0,0,0,0.45); border-radius: var(--radius);
padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
}
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 11px; color: rgba(255,255,255,0.7); }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
/* ── Maintenance section ────────────────────────────────────────────────────── */
.tiq-maintenance-section {
background: var(--offwhite);
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px); align-items: center;
padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
}
.maintenance-list { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.maint-item {
display: flex; align-items: flex-start; gap: 16px;
padding: 18px 22px; background: var(--white);
border-radius: var(--radius); border: 1px solid rgba(0,0,0,0.06);
transition: box-shadow 0.2s;
}
.maint-item:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.maint-icon {
width: 38px; height: 38px; flex-shrink: 0; background: var(--mist);
border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
font-size: 18px;
color: var(--moss);
}
.maint-icon .tiq-icon-svg { width: 20px; height: 20px; display: block; }
.maint-content h4 { font-size: 15px; font-weight: 500; color: var(--forest); margin-bottom: 4px; }
.maint-content p { font-size: 13px; color: var(--light); line-height: 1.6; }
.report-mockup {
background: var(--white); border-radius: var(--radiuslg);
border: 1px solid rgba(0,0,0,0.08); overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}
.report-header {
background: var(--forest); padding: 16px 22px;
display: flex; align-items: center; justify-content: space-between;
}
.report-title { color: var(--white); font-size: 14px; font-weight: 500; }
.report-badge { background: rgba(200,98,42,0.3); color: var(--accentlt); font-size: 11px; padding: 3px 10px; border-radius: 99px; }
.report-body { padding: 20px 22px; }
.issue-row {
display: flex; align-items: flex-start; gap: 12px;
padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,0.05);
}
.issue-row:last-child { border-bottom: none; }
.issue-severity { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.sev-high { background: #e05555; }
.sev-med { background: #e0aa44; }
.sev-low { background: #6abf6a; }
.issue-info { flex: 1; }
.issue-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.issue-meta { font-size: 11px; color: var(--light); margin-top: 2px; }
.issue-status { font-size: 11px; padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.status-new { background: #fff0f0; color: #c03030; }
.status-progress { background: #fffaee; color: #a07000; }
.status-done { background: #f0fff0; color: #2a802a; }
/* ── Data & Reports section ─────────────────────────────────────────────────── */
.tiq-data-section {
background: var(--pine);
padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
}
.data-header {
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px); margin-bottom: 56px; align-items: end;
}
.chart-mockup {
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radiuslg); padding: 28px;
display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
}
.chart-meta { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; }
.chart-metric { font-family: 'Bebas Neue', sans-serif; font-size: 32px; color: var(--white); letter-spacing: 0.04em; }
.chart-sub { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 4px; }
.chart-trend { font-size: 13px; font-weight: 500; color: #6abf6a; }
.chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; }
.chart-bar { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(to top, var(--moss), var(--sage)); opacity: 0.8; min-height: 4px; }
.chart-labels { display: flex; gap: 6px; margin-top: 6px; }
.chart-label { flex: 1; text-align: center; font-size: 10px; color: rgba(255,255,255,0.35); }
.data-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.data-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); padding: clamp(20px, 2.5vw, 28px) clamp(18px, 2.2vw, 24px); }
.data-card-num { font-family: 'Bebas Neue', sans-serif; font-size: 36px; color: var(--white); letter-spacing: 0.04em; line-height: 1; }
.data-card-label { font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 6px; line-height: 1.6; }
.data-card-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #6abf6a; margin-top: 8px; }
/* ── WordPress native section ───────────────────────────────────────────────── */
.tiq-wordpress-section {
background: var(--mist);
display: grid; grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px); align-items: center;
padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
}
.feature-bullets { display: flex; flex-direction: column; gap: 14px; margin-top: 32px; }
.feature-bullet { display: flex; align-items: flex-start; gap: 14px; }
.bullet-num {
width: 26px; height: 26px; border-radius: 50%;
background: var(--forest); color: var(--white);
font-size: 12px; font-weight: 500;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 1px;
}
.bullet-text h4 { font-size: 15px; font-weight: 500; color: var(--forest); margin-bottom: 3px; }
.bullet-text p { font-size: 13px; color: var(--mid); line-height: 1.6; font-weight: 300; }
.wp-mockup {
background: var(--white); border-radius: var(--radiuslg);
border: 1px solid rgba(0,0,0,0.07); overflow: hidden;
box-shadow: 0 8px 32px rgba(0,0,0,0.06);
}
.wp-topbar { background: #23282d; padding: 12px 18px; display: flex; align-items: center; gap: 12px; }
.wp-logo { color: #21759b; font-size: 18px; }
.wp-menu-item { color: rgba(255,255,255,0.6); font-size: 12px; padding: 4px 10px; border-radius: 3px; }
.wp-menu-item.active { background: rgba(255,255,255,0.1); color: var(--white); }
.wp-body { padding: 20px 22px; }
.wp-body-title { font-size: 13px; font-weight: 500; color: var(--ink); margin-bottom: 14px; }
.wp-plugin-card { border: 1px solid rgba(0,0,0,0.08); border-radius: var(--radius); padding: 16px; display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.wp-plugin-icon { width: 48px; height: 48px; border-radius: 6px; background: var(--forest); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.wp-plugin-logo { width: 100%; height: 100%; object-fit: contain; display: block; padding: 4px; }
.wp-plugin-name { font-size: 15px; font-weight: 500; color: var(--ink); }
.wp-plugin-meta { font-size: 12px; color: var(--light); margin-top: 3px; }
.wp-plugin-rating { display: flex; align-items: center; gap: 3px; margin-top: 5px; }
.wp-star { color: #f0aa00; font-size: 12px; }
.wp-plugin-desc { font-size: 12px; color: var(--mid); margin-top: 8px; line-height: 1.5; }
.wp-plugin-actions { display: flex; gap: 8px; margin-top: 10px; }
.wp-btn { font-size: 12px; padding: 6px 12px; border-radius: 3px; text-decoration: none; font-weight: 500; display: inline-block; }
.wp-btn-primary { background: #0085ba; color: var(--white); }
.wp-btn-outline { background: transparent; color: #0085ba; border: 1px solid #0085ba; }
.wp-compat-note { background: var(--mist); border-radius: var(--radius); padding: 12px 14px; font-size: 12px; color: var(--mid); line-height: 1.6; }
/* ── What is TrailsIQ — custom photo visual ─────────────────────────────────── */
.what-is-visual--photo { padding: 0; background: transparent; overflow: hidden; }
.what-is-photo { width: 100%; height: 100%; object-fit: cover; min-height: clamp(260px, 40vw, 480px); display: block; border-radius: var(--radiuslg); }
/* ═══════════════════════════════════════════════════════════════════════════
Gutenberg Block Styles — Group section backgrounds
Applied as .wp-block-group.is-style-tiq-*
═══════════════════════════════════════════════════════════════════════════ */
.wp-block-group.is-style-tiq-forest,
.wp-block-group.is-style-tiq-pine,
.wp-block-group.is-style-tiq-ink {
color: var(--white);
}
.wp-block-group.is-style-tiq-forest { background-color: var(--forest); }
.wp-block-group.is-style-tiq-pine { background-color: var(--pine); }
.wp-block-group.is-style-tiq-ink { background-color: var(--ink); }
.wp-block-group.is-style-tiq-mist { background-color: var(--mist); }
.wp-block-group.is-style-tiq-sand { background-color: var(--sand); }
.wp-block-group.is-style-tiq-offwhite{ background-color: var(--offwhite); }
/* Automatic section padding on styled groups */
.wp-block-group.is-style-tiq-forest,
.wp-block-group.is-style-tiq-pine,
.wp-block-group.is-style-tiq-ink,
.wp-block-group.is-style-tiq-mist,
.wp-block-group.is-style-tiq-sand,
.wp-block-group.is-style-tiq-offwhite {
padding-top: clamp(48px, 7vw, 80px);
padding-bottom: clamp(48px, 7vw, 80px);
padding-left: clamp(20px, 4vw, 48px);
padding-right: clamp(20px, 4vw, 48px);
}
/* Heading and paragraph color inheritance inside dark groups */
.wp-block-group.is-style-tiq-forest h1,
.wp-block-group.is-style-tiq-forest h2,
.wp-block-group.is-style-tiq-forest h3,
.wp-block-group.is-style-tiq-forest h4,
.wp-block-group.is-style-tiq-pine h1,
.wp-block-group.is-style-tiq-pine h2,
.wp-block-group.is-style-tiq-pine h3,
.wp-block-group.is-style-tiq-pine h4,
.wp-block-group.is-style-tiq-ink h1,
.wp-block-group.is-style-tiq-ink h2,
.wp-block-group.is-style-tiq-ink h3,
.wp-block-group.is-style-tiq-ink h4 { color: var(--white); }
.wp-block-group.is-style-tiq-forest p,
.wp-block-group.is-style-tiq-pine p,
.wp-block-group.is-style-tiq-ink p { color: rgba(255,255,255,0.65); }
/* Link color in dark groups */
.wp-block-group.is-style-tiq-forest a,
.wp-block-group.is-style-tiq-pine a,
.wp-block-group.is-style-tiq-ink a { color: var(--fern); }
/* ── Heading styles ──────────────────────────────────────────────────────────── */
.wp-block-heading.is-style-tiq-display {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(40px, 7vw, 88px);
line-height: 0.95;
letter-spacing: 0.04em;
}
.wp-block-heading.is-style-tiq-eyebrow {
font-family: 'DM Mono', monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
.wp-block-heading.is-style-tiq-light { color: var(--white); }
/* ── Button styles ──────────────────────────────────────────────────────────── */
.wp-block-button.is-style-tiq-primary .wp-block-button__link {
background: var(--accent) !important;
color: var(--white) !important;
border-color: var(--accent) !important;
border-radius: var(--radius) !important;
font-weight: 500;
letter-spacing: 0.02em;
transition: background 0.2s, transform 0.15s;
}
.wp-block-button.is-style-tiq-primary .wp-block-button__link:hover {
background: var(--accentlt) !important;
transform: translateY(-1px);
}
.wp-block-button.is-style-tiq-ghost .wp-block-button__link {
background: transparent !important;
color: var(--forest) !important;
border: 1.5px solid var(--forest) !important;
border-radius: var(--radius) !important;
font-weight: 500;
transition: all 0.2s;
}
.wp-block-button.is-style-tiq-ghost .wp-block-button__link:hover {
background: var(--forest) !important;
color: var(--white) !important;
}
.wp-block-button.is-style-tiq-ghost-light .wp-block-button__link {
background: transparent !important;
color: var(--white) !important;
border: 1.5px solid rgba(255,255,255,0.5) !important;
border-radius: var(--radius) !important;
font-weight: 500;
transition: all 0.2s;
}
.wp-block-button.is-style-tiq-ghost-light .wp-block-button__link:hover {
border-color: var(--white) !important;
background: rgba(255,255,255,0.1) !important;
}
.wp-block-button.is-style-tiq-forest .wp-block-button__link {
background: var(--forest) !important;
color: var(--white) !important;
border-color: var(--forest) !important;
border-radius: var(--radius) !important;
font-weight: 500;
transition: background 0.2s;
}
.wp-block-button.is-style-tiq-forest .wp-block-button__link:hover {
background: var(--pine) !important;
}
/* ── Paragraph styles ───────────────────────────────────────────────────────── */
.wp-block-paragraph.is-style-tiq-lead {
font-size: clamp(17px, 2vw, 20px);
font-weight: 300;
line-height: 1.8;
color: var(--mid);
max-width: 64ch;
}
.wp-block-paragraph.is-style-tiq-caption {
font-size: 12px;
color: var(--light);
font-weight: 300;
letter-spacing: 0.04em;
line-height: 1.6;
}
.wp-block-paragraph.is-style-tiq-light {
color: rgba(255,255,255,0.65);
}
/* Very small screens */
@media (max-width: 380px) {
.tiq-stats-bar { grid-template-columns: 1fr; }
.stat-item { border-right: none !important; border-top: 1px solid rgba(255,255,255,0.06); }
.stat-item:first-child { border-top: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
STP Blocks — Trail Organization Sections
All colors use CSS custom properties so they respond to Theme Colors admin.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Shared section helpers ─────────────────────────────────────────────────── */
.stp-section-tag {
font-family: 'DM Mono', monospace;
font-size: 11px; font-weight: 700; letter-spacing: 0.25em;
text-transform: uppercase; color: var(--accent);
margin-bottom: 10px; display: block;
}
.stp-section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(36px, 5.5vw, 60px);
color: var(--ink); line-height: 1; letter-spacing: 0.04em;
}
.stp-section-title.light { color: var(--white); }
.stp-section-desc {
font-size: 16px; color: var(--mid); max-width: 520px;
margin-top: 14px; line-height: 1.7; font-weight: 300;
}
.stp-section-desc.light { color: rgba(255,255,255,0.6); }
.stp-section-header { margin-bottom: 48px; }
.stp-section-header.left { border-left: 4px solid var(--accent); padding-left: 16px; }
.stp-section-header.center { text-align: center; }
.stp-section-header.center .stp-section-desc { margin-inline: auto; }
/* ── stp/hero ───────────────────────────────────────────────────────────────── */
.stp-hero {
position: relative; min-height: 100svh;
display: flex; flex-direction: column; align-items: center; justify-content: center;
overflow: hidden; background: var(--ink);
}
.stp-hero-bg {
position: absolute; inset: 0; z-index: 0;
background-size: cover; background-position: center; background-repeat: no-repeat;
}
.stp-hero-overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to bottom, rgba(0,0,0,.25) 0%, rgba(0,0,0,.05) 40%, rgba(26,26,26,.9) 100%);
}
.stp-hero-overlay::after {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0,0,0,.5) 0%, transparent 50%);
}
.stp-hero-content {
position: relative; z-index: 2; text-align: center;
padding: calc(var(--nav-h) + 40px) clamp(20px, 5vw, 80px) clamp(40px, 6vw, 80px);
}
.stp-hero-eyebrow {
font-family: 'DM Mono', monospace;
font-size: 12px; font-weight: 600; letter-spacing: 0.3em;
text-transform: uppercase; color: var(--accent);
margin-bottom: 20px;
display: flex; align-items: center; justify-content: center; gap: 14px;
}
.stp-hero-eyebrow::before,
.stp-hero-eyebrow::after { content: ''; display: block; width: 36px; height: 1px; background: var(--accent); }
.stp-hero h1 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(60px, 10vw, 128px);
line-height: 0.93; color: var(--white); letter-spacing: 0.03em;
margin-bottom: 20px;
}
.stp-hero h1 span { color: var(--accent); }
.stp-hero-sub {
font-size: clamp(16px, 2vw, 19px); font-weight: 300;
color: rgba(255,255,255,.85); max-width: 540px;
margin: 0 auto 36px; line-height: 1.6;
}
.stp-hero-actions {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
}
.stp-hero-scroll {
position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px;
color: rgba(255,255,255,.4);
font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.2em;
text-transform: uppercase; cursor: pointer;
}
.stp-scroll-arrow {
width: 24px; height: 24px;
border-right: 2px solid rgba(255,255,255,.35);
border-bottom: 2px solid rgba(255,255,255,.35);
transform: rotate(45deg);
animation: stp-bounce 1.8s infinite;
}
@keyframes stp-bounce {
0%, 100% { transform: rotate(45deg) translateY(0); }
50% { transform: rotate(45deg) translateY(6px); }
}
/* ── stp/stats-bar ──────────────────────────────────────────────────────────── */
/* Shares .tiq-stats-bar layout — adds variant modifier for accent numbers */
.stp-stats-bar {
background: var(--ink);
padding: 0 clamp(20px, 4vw, 48px);
display: grid; grid-template-columns: repeat(4, 1fr);
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.stp-stats-bar .stat-item { padding: 24px 8px; }
.stp-stats-bar .stat-number { color: var(--accent); }
.stp-stats-bar .stat-label { color: rgba(255,255,255,0.5); }
/* ── stp/conditions-band ────────────────────────────────────────────────────── */
.stp-conditions-band {
background: var(--white);
padding: 16px clamp(20px, 4vw, 48px);
display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
border-bottom: 1px solid rgba(0,0,0,0.07);
}
.stp-conditions-label {
font-family: 'DM Mono', monospace;
font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
text-transform: uppercase; color: rgba(0,0,0,0.4);
white-space: nowrap; flex-shrink: 0;
}
.stp-conditions-items {
display: flex; gap: 20px; flex-wrap: nowrap; flex: 1; justify-content: center;
}
.stp-cond-item { display: flex; align-items: center; gap: 10px; }
.stp-cond-dot {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.stp-cond-dot.open { background: #4caf50; box-shadow: 0 0 8px rgba(76,175,80,.5); }
.stp-cond-dot.caution { background: #f0a030; box-shadow: 0 0 8px rgba(240,160,48,.45); }
.stp-cond-dot.closed { background: #e05555; }
.stp-cond-name { font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.6); }
.stp-cond-status { font-size: 12px; color: rgba(0,0,0,0.45); margin-top: 1px; }
.stp-conditions-cta { margin-left: auto; flex-shrink: 0; }
.stp-conditions-cta a {
border: 1px solid rgba(0,0,0,0.2); color: rgba(0,0,0,0.55);
padding: 10px 22px; border-radius: var(--radius);
font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 600;
letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
white-space: nowrap; transition: background 0.2s, color 0.2s;
}
.stp-conditions-cta a:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
/* ── stp/plan-slider ────────────────────────────────────────────────────────── */
.stp-plan-section {
padding: clamp(60px, 8vw, 100px) 0;
background: var(--offwhite);
position: relative;
}
.stp-plan-header {
padding: 0 clamp(20px, 4vw, 48px);
margin-bottom: 48px; text-align: center;
}
/* Suppress all transitions during infinite-loop jump */
.stp-slider-track.is-jumping,
.stp-slider-track.is-jumping * {
transition: none !important;
}
/* Wrapper — clips horizontal overflow; overflow-x: clip keeps y-axis visible
so the taller walls (top:-24px) can bleed above/below without being cut. */
.stp-slider-wrap {
position: relative;
overflow-x: clip;
padding: 20px 0; /* room for scale(1.05) + box-shadow */
}
/* Solid walls — cards slide BEHIND these, matching the section background */
.stp-slider-wall {
position: absolute;
top: -24px;
height: calc(100% + 48px);
width: 8%; /* mobile default */
z-index: 10;
pointer-events: auto;
background: var(--offwhite);
}
.stp-slider-wall-left { left: 0; }
.stp-slider-wall-right { right: 0; }
/* Shadow on the inner edge of each wall, fading at top & bottom */
.stp-slider-wall::after {
content: "";
position: absolute;
top: 0;
height: 100%;
width: 16px;
background: linear-gradient(to var(--shadow-dir), rgba(0,0,0,0.18), transparent);
-webkit-mask: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
mask: linear-gradient(to bottom, transparent 0%, black 22%, black 78%, transparent 100%);
}
.stp-slider-wall-left::after { --shadow-dir: right; left: 100%; }
.stp-slider-wall-right::after { --shadow-dir: left; right: 100%; }
/* Track — padding creates space so the active (centered) card has side cards peeking */
.stp-slider-track {
display: flex;
align-items: flex-start;
padding: 0 8%; /* mobile: matches wall width */
transition: transform .6s cubic-bezier(.22,1,.36,1);
touch-action: pan-y;
}
/* Cards — inactive are scaled down and dimmed */
.stp-plan-card {
flex: 0 0 60%; /* mobile: 1 prominent card */
margin: 0 8px;
transform: scale(0.85);
opacity: 0.6;
transition: transform .5s ease, opacity .5s ease;
position: relative;
z-index: 1;
border-radius: var(--radiuslg);
background: var(--white);
box-shadow: 0 4px 10px rgba(0,0,0,0.14);
overflow: hidden;
}
.stp-plan-card.active {
transform: scale(1.03);
opacity: 1;
z-index: 2;
}
.stp-plan-card-img {
height: 240px;
position: relative;
overflow: hidden;
background: var(--forest) no-repeat center/cover;
transition: height .4s ease;
}
/* Active card shows less image, more body */
.stp-plan-card.active .stp-plan-card-img { height: 180px; }
.stp-plan-card-img-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.55) 100%);
}
.stp-plan-card-badge {
position: absolute; top: 14px; left: 14px;
background: var(--accent); color: var(--white);
font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
padding: 4px 10px; border-radius: 3px;
}
.stp-plan-card-body { padding: 20px 22px 24px; }
.stp-plan-card-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 24px; letter-spacing: 0.04em;
color: var(--ink); margin-bottom: 8px; line-height: 1.1;
}
/* Body content hidden on inactive cards */
.stp-plan-body-inner { display: none; }
.stp-plan-card.active .stp-plan-body-inner { display: block; }
.stp-plan-card-text { font-size: 13px; color: var(--mid); line-height: 1.65; font-weight: 300; margin-bottom: 16px; }
.stp-plan-card-link {
font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 700;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--accent); text-decoration: none;
display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s;
}
.stp-plan-card-link::after { content: '→'; }
.stp-plan-card-link:hover { color: var(--accentlt); }
.stp-slider-nav {
display: flex; justify-content: center; align-items: center;
gap: 16px; padding: 24px clamp(20px, 4vw, 48px) 0;
}
.stp-slider-btn {
width: 44px; height: 44px; border-radius: 50%;
border: 2px solid var(--ink); background: none; color: var(--ink);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: background .15s, border-color .15s, color .15s;
-webkit-appearance: none; appearance: none;
}
.stp-slider-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }
.stp-slider-btn svg { width: 18px; height: 18px; stroke: currentColor; }
.stp-slider-counter {
font-family: 'DM Mono', monospace; font-size: 14px;
letter-spacing: 0.08em; min-width: 48px; text-align: center; color: var(--mid);
}
/* ── Tablet (600px+): 2 cards ───────────────────────────────────────────────── */
@media (min-width: 600px) {
.stp-slider-track { padding: 0 14%; }
.stp-slider-wall { width: 10%; }
.stp-plan-card { flex: 0 0 46%; margin: 0 10px; }
.stp-plan-card.active { transform: scale(1.04); }
}
/* ── Desktop (960px+): 3 cards ──────────────────────────────────────────────── */
@media (min-width: 960px) {
.stp-slider-track { padding: 0 20%; }
.stp-slider-wall { width: 10%; }
.stp-plan-card { flex: 0 0 30%; margin: 0 10px; }
.stp-plan-card.active { transform: scale(1.05); }
}
/* ── stp/news-grid ──────────────────────────────────────────────────────────── */
.stp-news-section {
padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
background: var(--white);
}
.stp-news-grid {
display: grid; grid-template-columns: 2fr 1fr;
gap: 3px; margin-top: 48px;
}
.stp-news-card { position: relative; overflow: hidden; cursor: pointer; }
.stp-news-card-inner { position: relative; overflow: hidden; height: 100%; }
.stp-news-card.featured .news-card-img { min-height: 440px; }
.stp-news-card:not(.featured) .news-card-img { min-height: 210px; }
.stp-news-card .news-card-img {
width: 100%; height: 100%; display: block;
background: var(--ink) no-repeat center/cover;
transition: transform 0.5s;
}
.stp-news-card:hover .news-card-img { transform: scale(1.05); }
.stp-news-card-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.4) 25%, transparent 55%);
display: flex; flex-direction: column; justify-content: flex-end;
padding: clamp(16px, 2.5vw, 28px);
transition: background 0.3s;
}
.stp-news-card:hover .stp-news-card-overlay { background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.5) 50%, rgba(0,0,0,.1) 100%); }
.stp-news-card-cat { font-family: 'DM Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.stp-news-card-title { font-family: 'Bebas Neue', sans-serif; font-size: clamp(20px, 2.5vw, 32px); color: var(--white); letter-spacing: 0.04em; line-height: 1.1; margin-bottom: 8px; }
.stp-news-card.featured .stp-news-card-title { font-size: clamp(28px, 3.5vw, 44px); }
.stp-news-card-date { font-size: 12px; color: rgba(255,255,255,.45); font-weight: 300; }
.stp-news-card-excerpt { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.55; margin-top: 8px; max-height: 0; overflow: hidden; transition: max-height 0.4s; font-weight: 300; }
.stp-news-card:hover .stp-news-card-excerpt { max-height: 80px; }
.stp-news-grid-bottom {
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 3px; margin-top: 3px;
}
.stp-news-grid-bottom .stp-news-card .news-card-img { aspect-ratio: 4/3; min-height: unset !important; height: auto; }
.stp-news-footer { text-align: center; margin-top: 40px; }
/* ── stp/network-cta ────────────────────────────────────────────────────────── */
.stp-network-cta {
position: relative; overflow: hidden;
background: var(--ink);
padding: clamp(60px, 9vw, 100px) clamp(20px, 5vw, 60px);
text-align: center;
}
.stp-network-cta::before {
content: '';
position: absolute; inset: 0;
background-image: repeating-linear-gradient(
60deg,
rgba(var(--accent-rgb, 221,155,54), 0.04) 0px,
rgba(var(--accent-rgb, 221,155,54), 0.04) 1px,
transparent 1px, transparent 60px
);
pointer-events: none;
}
.stp-network-cta-content { position: relative; z-index: 1; }
.stp-network-cta h2 {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(40px, 7vw, 80px);
color: var(--white); letter-spacing: 0.04em; margin-bottom: 16px;
}
.stp-network-cta h2 span { color: var(--accent); }
.stp-network-cta p {
font-size: 17px; color: rgba(255,255,255,.6);
max-width: 500px; margin: 0 auto 36px; font-weight: 300; line-height: 1.65;
}
.stp-network-cards {
display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 40px;
}
.stp-network-card {
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.1);
border-radius: var(--radius); padding: 22px 28px;
text-align: center; min-width: 150px;
cursor: pointer; transition: background 0.2s, border-color 0.2s;
}
.stp-network-card:hover { background: rgba(255,255,255,.12); border-color: var(--accent); }
.stp-network-card-icon { font-size: 26px; margin-bottom: 10px; }
.stp-network-card-name { font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); margin-bottom: 4px; }
.stp-network-card-detail { font-size: 12px; color: rgba(255,255,255,.4); }
/* ── stp/events ─────────────────────────────────────────────────────────────── */
.stp-events-section {
padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
background: var(--offwhite);
}
.stp-events-list {
display: flex; flex-direction: column;
margin-top: 48px; border: 1px solid rgba(0,0,0,0.08);
border-radius: var(--radiuslg); overflow: hidden; background: var(--white);
}
.stp-event-item {
display: flex; align-items: center;
border-bottom: 1px solid rgba(0,0,0,0.05);
overflow: hidden; transition: background 0.15s; cursor: pointer;
}
.stp-event-item:last-child { border-bottom: none; }
.stp-event-item:hover { background: #fff9f5; }
.stp-event-date {
background: var(--accent); color: var(--white);
text-align: center; padding: 20px 24px; min-width: 88px; flex-shrink: 0;
}
.stp-event-month { font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.stp-event-day { font-family: 'Bebas Neue', sans-serif; font-size: 36px; line-height: 1; color: var(--white); }
.stp-event-info { padding: 18px 24px; flex: 1; }
.stp-event-name { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: var(--ink); letter-spacing: 0.03em; margin-bottom: 4px; }
.stp-event-meta { font-size: 13px; color: var(--mid); font-weight: 300; display: flex; gap: 14px; flex-wrap: wrap; }
.stp-event-tag { padding: 18px 24px; flex-shrink: 0; }
.stp-tag-pill {
background: rgba(0,0,0,0.04); color: var(--mid);
font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 700;
letter-spacing: 0.1em; text-transform: uppercase;
padding: 5px 12px; border-radius: 99px;
border: 1px solid rgba(0,0,0,0.08);
}
.stp-events-footer { text-align: center; margin-top: 36px; }
/* ── stp/sponsors ───────────────────────────────────────────────────────────── */
.stp-sponsors-section {
padding: clamp(40px, 6vw, 72px) clamp(20px, 4vw, 48px);
background: var(--mist);
}
.stp-sponsors-label {
font-family: 'DM Mono', monospace; font-size: 11px; font-weight: 700;
letter-spacing: 0.25em; text-transform: uppercase;
color: var(--light); text-align: center; margin-bottom: 32px;
}
.stp-sponsors-logos {
display: flex; justify-content: center; align-items: center;
gap: clamp(24px, 4vw, 56px); flex-wrap: wrap;
}
.stp-sponsor-logo {
font-family: 'Bebas Neue', sans-serif; font-size: 20px;
color: var(--light); letter-spacing: 0.08em;
transition: color 0.2s; cursor: pointer;
}
.stp-sponsor-logo:hover { color: var(--accent); }
/* ── Section dividers ───────────────────────────────────────────────────────── */
/* Any block that has a divider must be position:relative.
The JS filter adds this as an inline style, but we also cover it via class
for future-proofing and the editor preview. */
.section-divider,
.stp-section-divider { /* keep .stp-* for backwards-compat */
position: absolute;
bottom: 0; left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
pointer-events: none;
z-index: 2; /* sits above section background, below content */
}
.section-divider svg,
.stp-section-divider svg {
display: block;
width: 100%;
}
/* On narrow viewports, halve the SVG height to keep angles gentle */
@media (max-width: 768px) {
.section-divider svg,
.stp-section-divider svg {
height: 50% !important;
}
}
/* ── Responsive — ALL block overrides live here (after block definitions) so
the cascade is correct and these rules actually take effect.
─────────────────────────────────────────────────────────────────────────── */
/* ─── Tablet / small desktop (≤ 960px) ──────────────────────────────────── */
@media (max-width: 960px) {
/* STP news / stats */
.stp-news-grid { grid-template-columns: 1fr 1fr; }
.stp-news-grid-bottom { grid-template-columns: 1fr 1fr; }
.stp-stats-bar { grid-template-columns: 1fr 1fr; }
/* 2-col content blocks → single column.
These rules MUST live here (after the block CSS) or they get overridden. */
.tiq-what-is,
.tiq-maintenance-section,
.tiq-wordpress-section { grid-template-columns: 1fr; }
.data-header { grid-template-columns: 1fr; gap: 32px; }
.data-cards { grid-template-columns: 1fr 1fr; }
/* Maintenance: DOM order is visual first, text second.
Swap on mobile so the headline leads. */
.tiq-maintenance-section .report-mockup { order: 2; }
/* Gap / spacing tweaks */
.tiq-what-is { gap: 32px; }
.tiq-maintenance-section{ gap: 32px; }
.tiq-wordpress-section { gap: 32px; }
.stp-plan-header { margin-bottom: 36px; }
}
/* ─── Narrow tablet (≤ 768px) ───────────────────────────────────────────── */
@media (max-width: 768px) {
/* Conditions band */
.stp-conditions-band { flex-wrap: wrap; gap: 12px; }
.stp-conditions-items { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px 20px; }
.stp-conditions-cta { width: 100%; }
.stp-conditions-cta a { display: block; text-align: center; }
/* Events — compact date column */
.stp-event-date { padding: 16px 18px; min-width: 68px; }
.stp-event-day { font-size: 30px; }
/* Reduce tall visuals */
.what-is-visual { min-height: 320px; }
.what-is-photo { min-height: 320px; }
}
/* ─── Mobile (≤ 640px) ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
/* Hero actions */
.stp-hero-actions { flex-direction: column; align-items: center; }
/* News */
.stp-news-grid { grid-template-columns: 1fr; }
.stp-news-grid-bottom { display: none; }
/* Network area */
.stp-network-cards { display: grid; grid-template-columns: 1fr 1fr; }
.stp-network-card { min-width: unset; }
/* Events */
.stp-event-tag { display: none; }
.stp-event-meta { display: none; }
/* Stats borders */
.stp-stats-bar .stat-item:nth-child(2) { border-right: none; }
.stp-stats-bar .stat-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.1); border-top: 1px solid rgba(255,255,255,0.06); }
.stp-stats-bar .stat-item:nth-child(4) { border-right: none; border-top: 1px solid rgba(255,255,255,0.06); }
/* Visuals — reduce height on phones */
.what-is-visual { min-height: 260px; }
.what-is-photo { min-height: 260px; }
/* Data cards → single column on phones */
.data-cards { grid-template-columns: 1fr; }
/* Conditions — hide label, stack items */
.stp-conditions-label { display: none; }
.stp-conditions-items { grid-template-columns: 1fr; }
/* Plan slider header */
.stp-plan-header { margin-bottom: 24px; }
/* Sponsors — smaller gap */
.stp-sponsors-logos { gap: 20px 28px; }
.stp-sponsor-logo { font-size: 16px; }
/* Footer bottom → stacked */
.footer-bottom { flex-direction: column; text-align: center; }
}
/* ─── Small phones (≤ 480px) ────────────────────────────────────────────── */
@media (max-width: 480px) {
/* Both stats bars → single column */
.tiq-stats-bar { grid-template-columns: 1fr; }
.stp-stats-bar { grid-template-columns: 1fr; }
.tiq-stats-bar .stat-item,
.stp-stats-bar .stat-item {
border-right: none !important;
border-top: 1px solid rgba(255,255,255,0.06);
}
.tiq-stats-bar .stat-item:first-child,
.stp-stats-bar .stat-item:first-child { border-top: none; }
/* Conditions → fully single-column */
.stp-conditions-items { grid-template-columns: 1fr; }
/* Network cards → single column on tiny phones */
.stp-network-cards { grid-template-columns: 1fr; }
/* Reduce hero heading slightly */
.stp-hero h1 { font-size: 52px; }
/* Pricing: remove max-width constraint so cards fill screen */
.pricing-grid { max-width: none; }
}
/* ─── Smartphone Mockup — two-phone group ─────────────────────────────────── */
.tiq-smartphone-group {
display: flex;
align-items: flex-end;
justify-content: center;
gap: clamp(16px, 3vw, 40px);
padding: 20px 0;
width: 100%;
flex-wrap: wrap;
}
.tiq-smartphone-group[data-align="left"] { justify-content: flex-start; }
.tiq-smartphone-group[data-align="right"] { justify-content: flex-end; }
/* DOM order is [main, secondary]; row-reverse puts secondary first. */
.tiq-smartphone-group[data-second-pos="left"] { flex-direction: row-reverse; }
.tiq-smartphone-group .tiq-smartphone-wrap {
padding: 0;
width: var(--tiq-phone-w);
flex-shrink: 0;
}
/* Small screens — let phones shrink and still fit side-by-side */
@media (max-width: 640px) {
.tiq-smartphone-group {
gap: 12px;
}
.tiq-smartphone-group .tiq-smartphone-wrap {
--tiq-phone-w: min(var(--tiq-phone-w-user, 300px), 42vw);
}
}
/* ─── Smartphone Mockup Block ──────────────────────────────────────────────── */
/* All frame dimensions scale proportionally from --tiq-phone-w
(reference ratios taken from a 300×620 phone with 16px padding,
46px outer radius, 32px bezel radius). JS sets --tiq-phone-w-user
inline; the stylesheet derives --tiq-phone-w from it so media queries
can freely cap it without fighting inline styles. */
.tiq-smartphone-wrap {
--tiq-phone-w: var(--tiq-phone-w-user, 300px);
--tiq-pad: calc(var(--tiq-phone-w) * 16 / 300);
--tiq-rad: calc(var(--tiq-phone-w) * 46 / 300);
--tiq-brad: calc(var(--tiq-phone-w) * 32 / 300);
--phone-body: #1c1c24;
--phone-edge: #2e2e3e;
--phone-shine: #3a3a50;
--screen-bg: #000;
width: 100%;
display: flex;
justify-content: center;
padding: 20px 0;
}
.tiq-smartphone-wrap[data-align="left"] { justify-content: flex-start; }
.tiq-smartphone-wrap[data-align="right"] { justify-content: flex-end; }
.tiq-smartphone-wrap[data-frame="light"] {
--phone-body: #d6d6dc;
--phone-edge: #ececf0;
--phone-shine: #ffffff;
}
.tiq-smartphone {
position: relative;
width: 100%;
max-width: var(--tiq-phone-w);
aspect-ratio: 300 / 620;
background: linear-gradient(160deg,
var(--phone-shine) 0%,
var(--phone-edge) 30%,
var(--phone-body) 60%,
#141420 100%);
border-radius: var(--tiq-rad);
box-shadow:
0 0 0 1px rgba(255,255,255,0.07),
0 0 0 2px rgba(0,0,0,0.8),
inset 0 1px 0 rgba(255,255,255,0.12),
inset 0 -1px 0 rgba(0,0,0,0.5),
0 40px 80px rgba(0,0,0,0.7),
0 0 60px rgba(110,231,247,0.06);
padding: var(--tiq-pad);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.tiq-smartphone-wrap[data-frame="light"] .tiq-smartphone {
box-shadow:
0 0 0 1px rgba(0,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.6),
inset 0 -1px 0 rgba(0,0,0,0.1),
0 40px 80px rgba(0,0,0,0.25);
}
.tiq-smartphone:hover {
transform: translateY(-4px) rotate(-0.4deg);
}
/* Side buttons */
.tiq-smartphone__btn {
position: absolute;
background: linear-gradient(180deg, var(--phone-shine), var(--phone-edge));
}
.tiq-smartphone__btn--vol-up,
.tiq-smartphone__btn--vol-down {
left: calc(var(--tiq-phone-w) * -4 / 300);
width: calc(var(--tiq-phone-w) * 4 / 300);
height: calc(var(--tiq-phone-w) * 40 / 300);
border-radius: 2px 0 0 2px;
box-shadow: -1px 0 3px rgba(0,0,0,0.5);
}
.tiq-smartphone__btn--vol-up { top: calc(var(--tiq-phone-w) * 130 / 300); }
.tiq-smartphone__btn--vol-down { top: calc(var(--tiq-phone-w) * 185 / 300); }
.tiq-smartphone__btn--power {
right: calc(var(--tiq-phone-w) * -4 / 300);
top: calc(var(--tiq-phone-w) * 155 / 300);
width: calc(var(--tiq-phone-w) * 4 / 300);
height: calc(var(--tiq-phone-w) * 60 / 300);
border-radius: 0 2px 2px 0;
box-shadow: 1px 0 3px rgba(0,0,0,0.5);
}
/* Screen bezel */
.tiq-smartphone__bezel {
position: relative;
width: 100%;
height: 100%;
background: #0a0a0a;
border-radius: var(--tiq-brad);
overflow: hidden;
box-shadow: inset 0 0 20px rgba(0,0,0,0.8);
}
/* Top status bar — covers the top of the screen so images tuck behind it;
bottom edge sits at ~3/4 of the camera height so the island still notches
through visibly. */
.tiq-smartphone__topbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: calc(var(--tiq-phone-w) * 30 / 300);
background: #000;
z-index: 15;
pointer-events: none;
}
/* When the per-block "Hide status bar" toggle is on, drop the black bar
entirely and let the screen content fill the bezel from the top. The
dynamic island stays in place — that's a hardware feature, not a
software status bar. */
.tiq-smartphone-wrap[data-topbar="hidden"] .tiq-smartphone__topbar {
display: none;
}
.tiq-smartphone-wrap[data-topbar="hidden"] .tiq-smartphone__screen {
top: 0;
}
/* Dynamic island */
.tiq-smartphone__island {
position: absolute;
top: calc(var(--tiq-phone-w) * 12 / 300);
left: 50%;
transform: translateX(-50%);
width: calc(var(--tiq-phone-w) * 108 / 300);
height: calc(var(--tiq-phone-w) * 32 / 300);
background: #000;
border-radius: calc(var(--tiq-phone-w) * 20 / 300);
z-index: 20;
box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
display: flex;
align-items: center;
justify-content: center;
}
.tiq-smartphone__camera {
width: calc(var(--tiq-phone-w) * 10 / 300);
height: calc(var(--tiq-phone-w) * 10 / 300);
border-radius: 50%;
background: #111;
box-shadow: 0 0 0 1px rgba(255,255,255,0.08), inset 0 0 3px rgba(110,231,247,0.3);
}
/* Screen content — starts below the top status bar.
Top corners are square (flat under the bar); bottom corners get rounded
by the bezel's overflow:hidden clip so the phone silhouette is preserved. */
.tiq-smartphone__screen {
position: absolute;
top: calc(var(--tiq-phone-w) * 30 / 300);
right: 0;
bottom: 0;
left: 0;
background: var(--screen-bg);
overflow: hidden;
border-radius: 0;
}
.tiq-smartphone__media,
.tiq-smartphone__bg {
width: 100%;
height: 100%;
object-fit: contain;
object-position: top;
display: block;
border: 0;
background: var(--screen-bg);
}
.tiq-smartphone__placeholder {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(160deg,#0f0f1a 0%, #060610 100%);
color: rgba(255,255,255,0.55);
font-family: 'DM Mono', monospace;
font-size: 11px;
text-align: center;
padding: 16px;
}
.tiq-smartphone__placeholder span { font-size: 36px; }
/* Home bar */
.tiq-smartphone__home-bar {
position: absolute;
bottom: calc(var(--tiq-phone-w) * 8 / 300);
left: 50%;
transform: translateX(-50%);
width: calc(var(--tiq-phone-w) * 100 / 300);
height: calc(var(--tiq-phone-w) * 4 / 300);
background: rgba(255,255,255,0.25);
border-radius: 3px;
z-index: 20;
}
/* Glare overlay */
.tiq-smartphone__glare {
position: absolute;
top: calc(var(--tiq-phone-w) * 16 / 300);
left: calc(var(--tiq-phone-w) * 16 / 300);
right: 60%;
bottom: 50%;
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 100%);
border-radius: var(--tiq-brad) 8px 0 0;
pointer-events: none;
z-index: 30;
}
/* ── Trail Conditions feature block ─────────────────────────────────────────
Two-column pitch section for the AI-powered Trail Conditions feature.
Left side: sales copy + pill tags + icon bullet list + CTA.
Right side: decorative mockup of the live dashboard card. Offwhite
background like other light marketing sections. */
.tiq-trail-conditions {
background: var(--offwhite);
padding: clamp(60px, 8vw, 100px) clamp(20px, 4vw, 48px);
}
.tiq-trail-conditions__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.tiq-trail-conditions__content .pill-tags { margin: 18px 0 28px; }
.tiq-trail-conditions__cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 28px;
padding: 14px 26px;
background: var(--accentlt, #ef970c);
color: #fff;
font-size: 15px;
font-weight: 600;
text-decoration: none;
border-radius: 10px;
transition: background 0.2s, transform 0.2s;
}
.tiq-trail-conditions__cta:hover {
background: var(--accent, #dd9b36);
transform: translateY(-1px);
}
/* Feature bullet list — icon + title + desc */
.tiq-tc-features {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 18px;
}
.tiq-tc-feature {
display: flex;
align-items: flex-start;
gap: 14px;
}
.tiq-tc-feature__icon {
flex-shrink: 0;
width: 38px;
height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, var(--mist, #e8f0e5) 0%, #fff 100%);
color: var(--moss, #4a6741);
display: flex;
align-items: center;
justify-content: center;
}
.tiq-tc-feature__icon .tiq-icon-svg { width: 22px; height: 22px; display: block; }
.tiq-tc-feature__title {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--forest, #1a2e1a);
margin-bottom: 3px;
line-height: 1.35;
}
.tiq-tc-feature__desc {
display: block;
font-size: 13.5px;
color: var(--mid, #475569);
line-height: 1.55;
}
/* ── Decorative mockup of the live Trail Conditions card ──
Built entirely in CSS, no live data. Designed to feel like a real
screenshot of the dashboard at a glance. */
.tiq-trail-conditions__visual {
position: relative;
background: linear-gradient(160deg, var(--forest, #1a2e1a) 0%, var(--pine, #2d4a2d) 100%);
border-radius: var(--radiuslg, 18px);
padding: clamp(28px, 4vw, 48px);
min-height: 380px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.tiq-trail-conditions__visual::before {
/* Soft accent glow behind the card */
content: '';
position: absolute;
top: -40%; right: -30%;
width: 80%; height: 120%;
background: radial-gradient(ellipse at top right, rgba(239,151,12,0.22) 0%, transparent 60%);
pointer-events: none;
}
.tiq-tc-mockup {
position: relative;
width: 100%;
max-width: 420px;
background: #fff;
border-radius: 12px;
padding: 16px 18px 14px;
box-shadow: 0 20px 50px -15px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.05) inset;
font-family: inherit;
color: #1b2e1a;
}
.tiq-tc-mockup__head {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 8px;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.tiq-tc-mockup__dot {
width: 10px; height: 10px; border-radius: 50%;
background: #9ca3af;
flex-shrink: 0;
box-shadow: 0 0 0 3px rgba(156,163,175,0.15);
}
.tiq-tc-mockup__dot--open { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,0.15); }
.tiq-tc-mockup__dot--caution { background: #d97706; box-shadow: 0 0 0 3px rgba(217,119,6,0.18); }
.tiq-tc-mockup__dot--closed { background: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.18); }
.tiq-tc-mockup__name {
font-size: 13px; font-weight: 700; color: #1b2e1a;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
flex: 1;
}
.tiq-tc-mockup__meta { font-size: 10px; color: #6b7280; white-space: nowrap; }
.tiq-tc-mockup__summary {
font-size: 12px; color: #1b2e1a;
padding: 10px 0 8px;
line-height: 1.5;
}
.tiq-tc-mockup__summary strong { font-weight: 700; }
.tiq-tc-mockup__algo {
font-size: 11px; color: #6b7280;
margin-top: 4px; padding-top: 4px;
border-top: 1px dashed rgba(0,0,0,0.08);
line-height: 1.45;
}
.tiq-tc-mockup__algo strong { color: #1b2e1a; }
.tiq-tc-mockup__row {
display: flex; align-items: center; gap: 8px;
padding: 8px 0;
border-top: 1px solid rgba(0,0,0,0.04);
}
.tiq-tc-mockup__label {
font-size: 10px; font-weight: 700; color: #6b7280;
text-transform: uppercase; letter-spacing: 0.04em;
white-space: nowrap;
}
.tiq-tc-mockup__bar {
flex: 1; height: 6px; background: #e5e7eb; border-radius: 99px; overflow: hidden;
}
.tiq-tc-mockup__bar-fill {
height: 100%; width: 52%;
background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
border-radius: 99px;
}
.tiq-tc-mockup__val { font-size: 11px; font-weight: 600; color: #d97706; white-space: nowrap; }
.tiq-tc-mockup__forecast {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: 6px;
padding: 10px 0 2px;
border-top: 1px solid rgba(0,0,0,0.04);
}
.tiq-tc-mockup__day {
display: flex; flex-direction: column; align-items: center;
gap: 4px;
font-size: 10px;
}
.tiq-tc-mockup__day-name { font-weight: 600; color: #6b7280; }
.tiq-tc-mockup__day-icon { font-size: 14px; line-height: 1; }
.tiq-tc-mockup__day-dot { width: 7px; height: 7px; border-radius: 50%; }
.tiq-tc-mockup__chip {
position: absolute;
top: -10px; right: 14px;
background: linear-gradient(135deg, var(--accentlt, #ef970c) 0%, var(--accent, #dd9b36) 100%);
color: #fff;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 99px;
box-shadow: 0 6px 14px -4px rgba(221,155,54,0.55);
}
/* Responsive: stack the two columns below 900px */
@media (max-width: 900px) {
.tiq-trail-conditions__grid { grid-template-columns: 1fr; }
.tiq-trail-conditions__visual { min-height: 300px; padding: 28px 20px; }
.tiq-tc-mockup { max-width: 100%; }
}
/* ── Feature Showcase (customizable twin of Trail Conditions) ──────────────
Same layout, but the visual column is an InnerBlocks area rather than
the baked-in Trail Conditions mockup. Strips the forest gradient +
glow so whatever block the author drops in looks natural. All colours
are overrideable from the block inspector via inline style. */
.tiq-feature-showcase.tiq-trail-conditions { background: transparent; }
.tiq-feature-showcase .tiq-trail-conditions__visual {
background: transparent;
padding: 0;
min-height: 0;
overflow: visible;
}
.tiq-feature-showcase .tiq-trail-conditions__visual::before { display: none; }
/* WordPress wraps InnerBlocks children in an extra div; make that fill
the column on desktop so images / mockups stretch naturally. */
.tiq-feature-showcase .tiq-trail-conditions__visual > .block-editor-inner-blocks,
.tiq-feature-showcase .tiq-trail-conditions__visual > .block-editor-inner-blocks > .block-editor-block-list__layout,
.tiq-feature-showcase .tiq-trail-conditions__visual > div {
width: 100%;
}
/* Stack child blocks vertically inside the visual column — affects both
the frontend save output and the editor's block-list wrapper. Without
this, the editor's default flex row can collapse siblings side-by-side. */
.tiq-feature-showcase .tiq-trail-conditions__visual,
.tiq-feature-showcase .tiq-trail-conditions__visual > .block-editor-inner-blocks,
.tiq-feature-showcase .tiq-trail-conditions__visual > .block-editor-inner-blocks > .block-editor-block-list__layout {
display: flex;
flex-direction: column;
gap: 16px;
}
/* ── Field App maintenance mockup (read-only demo) ──────────────────────────
Static visual of the TrailsIQ field app's Maintenance screen for the
Smartphone block. Two hidden radio groups + label targeting drive all
interactions: filter chips toggle the visible markers AND list rows;
tapping a pin or list item slides its detail up, centres the map on
that pin, and dims the other pins. No JavaScript. */
.tiq-fa {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: #f6f6f3;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: #1b2e1a;
font-size: 11px;
line-height: 1.35;
-webkit-font-smoothing: antialiased;
}
.tiq-fa * { box-sizing: border-box; }
.tiq-fa__r { position: absolute; opacity: 0; pointer-events: none; }
/* ── Top app bar ── */
.tiq-fa__header {
flex-shrink: 0;
background: #1b2e1a;
color: #fff;
padding: 10px 12px 8px;
display: flex; align-items: center; justify-content: space-between;
padding-top: calc(10px + env(safe-area-inset-top, 0px));
z-index: 2;
}
.tiq-fa__brand { display: flex; align-items: center; gap: 7px; }
.tiq-fa__logo {
width: 26px; height: 26px;
display: flex; align-items: center; justify-content: center;
}
.tiq-fa__logo-svg { width: 100%; height: 100%; display: block; }
.tiq-fa__title { font-size: 13px; font-weight: 700; letter-spacing: 0.01em; color: #fff; }
.tiq-fa__title em { font-style: normal; color: #dd9b36; }
.tiq-fa__header-right { display: flex; align-items: center; gap: 6px; }
.tiq-fa__sync {
background: #dd9b36; color: #1b2e1a;
font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 99px;
}
.tiq-fa__menu {
width: 24px; height: 24px; border-radius: 5px;
background: rgba(255,255,255,0.12);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 3px; padding: 6px;
}
.tiq-fa__menu span { display: block; width: 12px; height: 1.5px; background: #fff; border-radius: 2px; }
/* ── Map area ── */
.tiq-fa__map {
position: relative;
flex: 0 0 40%;
overflow: hidden;
/* Fallback tone that matches the darker edge of the terrain gradient —
if a selected-item pan briefly exposes an edge pixel, it blends in
instead of showing a hard seam against the lighter SVG background. */
background: #aec4a1;
}
.tiq-fa__map-inner {
position: absolute;
inset: 0;
/* Base scale keeps the terrain + trails "zoomed in" so the map feels
like a real tile zoom level. Selected-item rules below add translate()
on top of this, panning the view to centre the chosen pin. */
transform: scale(1.5);
transform-origin: 50% 50%;
transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}
.tiq-fa__map-svg { width: 100%; height: 100%; display: block; }
.tiq-fa__pin {
position: absolute;
width: 24px; height: 30px;
transform: translate(-50%, -100%);
cursor: pointer;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
transition: opacity 0.3s, transform 0.3s;
}
.tiq-fa__pin-bg { display: block; width: 100%; height: 100%; }
.tiq-fa__pin-icon {
position: absolute;
top: 5px; left: 50%;
transform: translateX(-50%);
width: 13px; height: 13px;
color: #1b2e1a;
display: flex; align-items: center; justify-content: center;
}
.tiq-fa__pin-icon svg { width: 100%; height: 100%; display: block; }
.tiq-fa__pin--open { color: #3ad791; --pin-inner: #f6fff6; }
.tiq-fa__pin--progress { color: #2563eb; --pin-inner: #f4f7ff; }
.tiq-fa__pin--resolved { color: #9e9e9e; --pin-inner: #f3f4f6; }
.tiq-fa__pin--overdue { color: #dc2626; --pin-inner: #fee2e2; }
.tiq-fa__map-ctrl {
position: absolute;
left: 8px; bottom: 8px;
width: 24px; height: 24px;
background: #fff;
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0,0,0,0.15);
display: flex; align-items: center; justify-content: center;
z-index: 2;
}
/* ── Bottom sheet (filters + list, houses the detail overlays too) ── */
.tiq-fa__sheet {
flex: 1;
position: relative;
background: #fff;
display: flex; flex-direction: column;
overflow: hidden;
}
.tiq-fa__handle {
position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
width: 32px; height: 4px; border-radius: 99px;
background: #d1d5db;
box-shadow: 0 -1px 3px rgba(0,0,0,0.08);
z-index: 3;
}
/* ── Filter bar — circular icon chips, horizontally scrollable ── */
.tiq-fa__filters {
display: flex; gap: 6px;
padding: 10px 10px 8px;
overflow-x: auto; scrollbar-width: none;
flex-shrink: 0;
border-bottom: 1px solid #f3f4f6;
background: #fff;
}
.tiq-fa__filters::-webkit-scrollbar { display: none; }
.tiq-fa__filter {
flex-shrink: 0;
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px 3px 3px;
border-radius: 99px;
background: #f3f4f6;
color: #6b7280;
font-size: 10px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.tiq-fa__filter-icon {
width: 22px; height: 22px;
border-radius: 50%;
background: #fff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 0 0 1px rgba(0,0,0,0.06) inset;
color: #1b2e1a;
}
.tiq-fa__filter-icon svg { width: 14px; height: 14px; display: block; fill: currentColor; }
.tiq-fa__filter-label { padding-right: 1px; }
.tiq-fa__list {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 0 10px 12px;
}
.tiq-fa__list-item {
display: flex; align-items: flex-start; gap: 8px;
padding: 9px 6px;
border-top: 1px solid #f3f4f6;
cursor: pointer;
transition: background 0.15s;
}
.tiq-fa__list-item:first-child { border-top: none; }
.tiq-fa__list-item:hover,
.tiq-fa__list-item:active { background: #f9fafb; }
.tiq-fa__dot {
width: 8px; height: 8px; border-radius: 99px;
margin-top: 5px; flex-shrink: 0;
}
.tiq-fa__dot--critical { background: #dc2626; }
.tiq-fa__dot--high { background: #f97316; }
.tiq-fa__dot--medium { background: #eab308; }
.tiq-fa__dot--low { background: #22c55e; }
.tiq-fa__list-text { flex: 1; min-width: 0; }
.tiq-fa__list-title {
font-size: 11.5px; font-weight: 600; color: #1b2e1a;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
margin-bottom: 2px;
}
.tiq-fa__list-meta { display: flex; align-items: center; gap: 5px; }
.tiq-fa__chip {
display: inline-block;
padding: 1px 6px;
border-radius: 99px;
background: #e8f4e8;
color: #2d5a27;
font-size: 9px;
font-weight: 600;
text-transform: capitalize;
}
.tiq-fa__chip--priority { background: #fef3c7; color: #92400e; }
.tiq-fa__chip--critical { background: #fee2e2; color: #991b1b; }
.tiq-fa__chip--high { background: #ffedd5; color: #9a3412; }
.tiq-fa__chip--low { background: #dcfce7; color: #166534; }
.tiq-fa__list-trail {
font-size: 10px;
color: #6b7280;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tiq-fa__status {
flex-shrink: 0;
padding: 2px 7px;
border-radius: 99px;
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
align-self: center;
}
.tiq-fa__status--open { background: #dcfce7; color: #166534; }
.tiq-fa__status--progress { background: #dbeafe; color: #1e40af; }
.tiq-fa__status--resolved { background: #f3f4f6; color: #6b7280; }
/* ── FAB ── */
.tiq-fa__fab {
position: absolute;
right: 10px;
bottom: calc(10px + env(safe-area-inset-bottom, 0px));
width: 36px; height: 36px;
border-radius: 50%;
background: #1b2e1a;
color: #fff;
border: none;
box-shadow: 0 4px 12px rgba(27,46,26,0.45);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 6;
}
/* ── Slide-up detail sheet ─ lives INSIDE .tiq-fa__sheet so it stops at
the bottom edge of the map, leaving the map visible above. */
.tiq-fa__detail {
position: absolute;
inset: 0;
background: #fff;
display: flex; flex-direction: column;
transform: translateY(100%);
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 20;
pointer-events: none;
}
.tiq-fa__detail-head {
flex-shrink: 0;
background: #fff;
border-bottom: 1px solid #e5e7eb;
padding: 12px;
display: flex; align-items: center; gap: 8px;
}
.tiq-fa__detail-title {
flex: 1;
display: flex; align-items: center; gap: 8px;
font-size: 13px; font-weight: 700; color: #1b2e1a;
min-width: 0;
}
.tiq-fa__detail-title .tiq-fa__status { font-size: 8.5px; }
.tiq-fa__detail-close {
width: 26px; height: 26px;
border-radius: 50%;
background: #f3f4f6;
display: flex; align-items: center; justify-content: center;
font-size: 18px; font-weight: 300; color: #1b2e1a;
cursor: pointer;
line-height: 1;
}
.tiq-fa__detail-body {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 10px 12px 16px;
}
.tiq-fa__detail-meta {
display: flex; flex-wrap: wrap; gap: 4px;
margin-bottom: 10px;
}
.tiq-fa__detail-section { margin-bottom: 10px; }
.tiq-fa__detail-label {
font-size: 9px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
color: #9ca3af;
margin-bottom: 2px;
}
.tiq-fa__detail-value {
font-size: 11px;
color: #1b2e1a;
line-height: 1.5;
}
.tiq-fa__detail-photos {
display: flex; gap: 5px; margin-bottom: 10px;
}
.tiq-fa__photo {
width: 44px; height: 44px;
border-radius: 5px;
flex-shrink: 0;
}
.tiq-fa__detail-cta {
width: 100%;
padding: 10px;
background: #dd9b36;
color: #1b2e1a;
border: none;
border-radius: 7px;
font-size: 12px; font-weight: 700;
cursor: pointer;
margin-top: 6px;
}
/* ──────────────────────────────────────────────────────────────────────────
STATE RULES — drive everything off the two hidden radio groups.
Everything below uses "~" combinators so the selectors reach from the
radio inputs (early siblings) to the map / sheet (later siblings).
────────────────────────────────────────────────────────────────────────── */
/* Filter: when a type filter is checked, hide non-matching pins + rows. */
[id^="fa-fl-"][id$="-blowdown"]:checked ~ .tiq-fa__map .tiq-fa__pin:not([data-type="blowdown"]),
[id^="fa-fl-"][id$="-blowdown"]:checked ~ .tiq-fa__sheet .tiq-fa__list-item:not([data-type="blowdown"]),
[id^="fa-fl-"][id$="-erosion"]:checked ~ .tiq-fa__map .tiq-fa__pin:not([data-type="erosion"]),
[id^="fa-fl-"][id$="-erosion"]:checked ~ .tiq-fa__sheet .tiq-fa__list-item:not([data-type="erosion"]),
[id^="fa-fl-"][id$="-drainage"]:checked ~ .tiq-fa__map .tiq-fa__pin:not([data-type="drainage"]),
[id^="fa-fl-"][id$="-drainage"]:checked ~ .tiq-fa__sheet .tiq-fa__list-item:not([data-type="drainage"]),
[id^="fa-fl-"][id$="-signage"]:checked ~ .tiq-fa__map .tiq-fa__pin:not([data-type="signage"]),
[id^="fa-fl-"][id$="-signage"]:checked ~ .tiq-fa__sheet .tiq-fa__list-item:not([data-type="signage"]),
[id^="fa-fl-"][id$="-other"]:checked ~ .tiq-fa__map .tiq-fa__pin:not([data-type="other"]),
[id^="fa-fl-"][id$="-other"]:checked ~ .tiq-fa__sheet .tiq-fa__list-item:not([data-type="other"]) {
display: none;
}
/* Filter chip highlight — the chip whose radio is checked goes dark. */
[id^="fa-fl-"]:checked + * ~ .tiq-fa__sheet .tiq-fa__filter { /* default: none */ }
[id^="fa-fl-"][id$="-all"]:checked ~ .tiq-fa__sheet .tiq-fa__filters .tiq-fa__filter[data-key="all"],
[id^="fa-fl-"][id$="-blowdown"]:checked ~ .tiq-fa__sheet .tiq-fa__filters .tiq-fa__filter[data-key="blowdown"],
[id^="fa-fl-"][id$="-erosion"]:checked ~ .tiq-fa__sheet .tiq-fa__filters .tiq-fa__filter[data-key="erosion"],
[id^="fa-fl-"][id$="-drainage"]:checked ~ .tiq-fa__sheet .tiq-fa__filters .tiq-fa__filter[data-key="drainage"],
[id^="fa-fl-"][id$="-signage"]:checked ~ .tiq-fa__sheet .tiq-fa__filters .tiq-fa__filter[data-key="signage"],
[id^="fa-fl-"][id$="-other"]:checked ~ .tiq-fa__sheet .tiq-fa__filters .tiq-fa__filter[data-key="other"] {
background: #1b2e1a; color: #fff;
}
/* Detail panel — slide up when the matching item radio is checked.
Using [id*=...] instead of 5 separate rules, matching the suffix -N.
The "-new" case targets the dynamically-created user-submitted detail. */
[id*="fa-sel-"][id$="-1"]:checked ~ .tiq-fa__sheet .tiq-fa__detail[data-key="1"],
[id*="fa-sel-"][id$="-2"]:checked ~ .tiq-fa__sheet .tiq-fa__detail[data-key="2"],
[id*="fa-sel-"][id$="-3"]:checked ~ .tiq-fa__sheet .tiq-fa__detail[data-key="3"],
[id*="fa-sel-"][id$="-4"]:checked ~ .tiq-fa__sheet .tiq-fa__detail[data-key="4"],
[id*="fa-sel-"][id$="-5"]:checked ~ .tiq-fa__sheet .tiq-fa__detail[data-key="5"],
[id*="fa-sel-"][id$="-new"]:checked ~ .tiq-fa__sheet .tiq-fa__detail[data-key="new"] {
transform: translateY(0);
pointer-events: auto;
}
/* When any specific item is selected, hide non-matching pins on the map. */
[id*="fa-sel-"][id$="-1"]:checked ~ .tiq-fa__map .tiq-fa__pin:not([data-key="1"]),
[id*="fa-sel-"][id$="-2"]:checked ~ .tiq-fa__map .tiq-fa__pin:not([data-key="2"]),
[id*="fa-sel-"][id$="-3"]:checked ~ .tiq-fa__map .tiq-fa__pin:not([data-key="3"]),
[id*="fa-sel-"][id$="-4"]:checked ~ .tiq-fa__map .tiq-fa__pin:not([data-key="4"]),
[id*="fa-sel-"][id$="-5"]:checked ~ .tiq-fa__map .tiq-fa__pin:not([data-key="5"]),
[id*="fa-sel-"][id$="-new"]:checked ~ .tiq-fa__map .tiq-fa__pin:not([data-key="new"]) {
display: none;
}
/* And scale up the selected pin so it reads as the focal point. */
[id*="fa-sel-"][id$="-1"]:checked ~ .tiq-fa__map .tiq-fa__pin[data-key="1"],
[id*="fa-sel-"][id$="-2"]:checked ~ .tiq-fa__map .tiq-fa__pin[data-key="2"],
[id*="fa-sel-"][id$="-3"]:checked ~ .tiq-fa__map .tiq-fa__pin[data-key="3"],
[id*="fa-sel-"][id$="-4"]:checked ~ .tiq-fa__map .tiq-fa__pin[data-key="4"],
[id*="fa-sel-"][id$="-5"]:checked ~ .tiq-fa__map .tiq-fa__pin[data-key="5"],
[id*="fa-sel-"][id$="-new"]:checked ~ .tiq-fa__map .tiq-fa__pin[data-key="new"] {
transform: translate(-50%, -100%) scale(1.25);
z-index: 3;
}
/* Pan + keep-zoom: selected-item transforms inherit the base scale(1.5).
"-new" centres on the user location (30%, 73%) where the new pin lives. */
[id*="fa-sel-"][id$="-1"]:checked ~ .tiq-fa__map .tiq-fa__map-inner { transform: translate(13%, -13%) scale(1.5); }
[id*="fa-sel-"][id$="-2"]:checked ~ .tiq-fa__map .tiq-fa__map-inner { transform: translate(-10%, 17%) scale(1.5); }
[id*="fa-sel-"][id$="-3"]:checked ~ .tiq-fa__map .tiq-fa__map-inner { transform: translate(-17%, -13%) scale(1.5); }
[id*="fa-sel-"][id$="-4"]:checked ~ .tiq-fa__map .tiq-fa__map-inner { transform: translate(-27%, 4%) scale(1.5); }
[id*="fa-sel-"][id$="-5"]:checked ~ .tiq-fa__map .tiq-fa__map-inner { transform: translate( -7%, -25%) scale(1.5); }
[id*="fa-sel-"][id$="-new"]:checked ~ .tiq-fa__map .tiq-fa__map-inner { transform: translate( 20%, -23%) scale(1.5); }
/* ──────────────────────────────────────────────────────────────────────────
REPORT-ISSUE FLOW
Slide-up overlays: types picker → confirm location → details form →
new marker dropped on the map. States are toggled by the tiny JS in
/assets/js/fieldapp-mockup.js; everything below is pure CSS rendering.
────────────────────────────────────────────────────────────────────────── */
.tiq-fa__add {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 40;
}
.tiq-fa__add-screen {
position: absolute;
left: 0; right: 0;
top: 0; bottom: 0;
background: #fff;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.34s cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: auto;
overflow: hidden;
}
/* Show each screen when its step class is active on .tiq-fa */
.tiq-fa--step-types .tiq-fa__add-screen--types,
.tiq-fa--step-confirm .tiq-fa__add-screen--confirm,
.tiq-fa--step-form .tiq-fa__add-screen--form {
transform: translateY(0);
}
/* Confirm is a bottom sheet that only covers the lower half — the map
stays visible above it, so user can "see where they are". */
.tiq-fa__add-screen--confirm {
top: 55%;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
box-shadow: 0 -6px 24px rgba(0,0,0,0.18);
padding: 14px 16px 16px;
}
/* ── Shared header (types + form) ── */
.tiq-fa__add-head {
display: flex; align-items: center; gap: 8px;
padding: 12px 12px 8px;
padding-top: calc(12px + env(safe-area-inset-top, 0px));
border-bottom: 1px solid #f3f4f6;
}
.tiq-fa__add-title {
flex: 1;
margin: 0;
font-size: 14px;
font-weight: 700;
color: #1b2e1a;
text-align: center;
}
.tiq-fa__add-back {
width: 28px; height: 28px;
border: none; background: transparent;
font-size: 22px; line-height: 1;
color: #1b2e1a;
cursor: pointer;
padding: 0;
}
.tiq-fa__add-x {
width: 26px; height: 26px;
border-radius: 50%;
background: #f3f4f6;
color: #1b2e1a;
border: none;
font-size: 18px; line-height: 1; font-weight: 300;
cursor: pointer;
}
/* ── Types picker ── */
.tiq-fa__add-subtitle {
padding: 14px 16px 10px;
font-size: 11px; color: #6b7280;
text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
}
.tiq-fa__add-types {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 0 12px 16px;
}
.tiq-fa__add-type-btn {
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 8px;
padding: 16px 8px;
background: #fff;
border: 1.5px solid #e5e7eb;
border-radius: 12px;
color: #1b2e1a;
font-family: inherit;
cursor: pointer;
transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.tiq-fa__add-type-btn:hover { border-color: #1b2e1a; background: #f9fafb; }
.tiq-fa__add-type-btn:active { transform: scale(0.97); }
.tiq-fa__add-type-icon {
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
color: #1b2e1a;
}
.tiq-fa__add-type-icon svg { width: 100%; height: 100%; display: block; }
.tiq-fa__add-type-label {
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.03em;
}
/* ── Confirm sheet ── */
.tiq-fa__add-confirm-grip {
width: 32px; height: 4px; border-radius: 99px;
background: #d1d5db;
margin: -6px auto 10px;
}
.tiq-fa__add-confirm-type {
display: flex; align-items: center; gap: 10px;
margin-bottom: 6px;
}
.tiq-fa__add-confirm-icon {
display: none;
width: 40px; height: 40px;
border-radius: 50%;
background: #fef3c7;
color: #92400e;
align-items: center; justify-content: center;
flex-shrink: 0;
}
.tiq-fa__add-confirm-icon svg { width: 20px; height: 20px; display: block; }
.tiq-fa[data-selected-type="blowdown"] .tiq-fa__add-confirm-icon.tiq-fa__type-icon--blowdown,
.tiq-fa[data-selected-type="erosion"] .tiq-fa__add-confirm-icon.tiq-fa__type-icon--erosion,
.tiq-fa[data-selected-type="drainage"] .tiq-fa__add-confirm-icon.tiq-fa__type-icon--drainage,
.tiq-fa[data-selected-type="signage"] .tiq-fa__add-confirm-icon.tiq-fa__type-icon--signage,
.tiq-fa[data-selected-type="other"] .tiq-fa__add-confirm-icon.tiq-fa__type-icon--other {
display: flex;
}
.tiq-fa__add-confirm-text { min-width: 0; }
.tiq-fa__add-confirm-eyebrow {
font-size: 9px; color: #6b7280; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
}
.tiq-fa__add-confirm-heading {
font-size: 14px; font-weight: 700; color: #1b2e1a;
margin-top: 1px;
}
.tiq-fa__add-confirm-hint {
font-size: 11px; color: #6b7280; line-height: 1.45;
margin: 6px 0 14px;
}
/* ── Shared primary / ghost buttons ── */
.tiq-fa__add-btn {
display: block; width: 100%;
padding: 10px;
border: none; border-radius: 8px;
font-size: 12px; font-weight: 700;
cursor: pointer;
margin-top: 6px;
font-family: inherit;
transition: background 0.15s, transform 0.1s;
}
.tiq-fa__add-btn:active { transform: scale(0.98); }
.tiq-fa__add-btn--primary {
background: #dd9b36; color: #1b2e1a;
}
.tiq-fa__add-btn--primary:hover { background: #c98a28; }
.tiq-fa__add-btn--ghost {
background: transparent; color: #6b7280;
font-weight: 600;
}
/* ── Form ── */
.tiq-fa__add-form { padding: 14px 16px 20px; flex: 1; overflow-y: auto; }
.tiq-fa__add-label {
display: block;
font-size: 10px; font-weight: 700; color: #6b7280;
text-transform: uppercase; letter-spacing: 0.04em;
margin: 10px 0 4px;
}
.tiq-fa__add-label:first-child { margin-top: 0; }
.tiq-fa__add-input {
width: 100%;
padding: 9px 11px;
/* 16px keeps iOS Safari from auto-zooming when the input is focused.
Anything smaller triggers the "tap to edit" zoom animation. */
font-size: 16px;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: #fafafa;
color: #1b2e1a;
font-family: inherit;
resize: none;
}
.tiq-fa__add-textarea { min-height: 60px; }
.tiq-fa__add-photo-row {
display: flex; gap: 6px;
margin: 12px 0 16px;
}
.tiq-fa__add-photo {
width: 56px; height: 56px;
border-radius: 6px;
flex-shrink: 0;
}
.tiq-fa__add-photo--btn {
background: #f3f4f6;
color: #6b7280;
display: flex; align-items: center; justify-content: center;
border: 1.5px dashed #d1d5db;
}
/* While the "Confirm location" sheet is open, hide every real trail pin
so only the user's blue GPS dot (and any just-dropped new pin) is
visible — the intent is "drop a report at this spot". */
.tiq-fa--step-confirm .tiq-fa__pin:not(.tiq-fa__new-pin) {
display: none;
}
/* ── New marker on the map (post-submit) ──
Pin lives inside .tiq-fa__map-inner so its left/top % are relative
to the map (lands on the blue GPS dot at 30% / 73%) and so it
inherits the scale+translate transforms applied by item selection. */
.tiq-fa__new-pin { display: none; cursor: default; }
.tiq-fa--reported .tiq-fa__new-pin {
display: block;
animation: tiq-fa-new-pin-drop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
@keyframes tiq-fa-new-pin-drop {
0% { transform: translate(-50%, -280%); opacity: 0; }
55% { transform: translate(-50%, -92%); opacity: 1; }
80% { transform: translate(-50%, -104%); }
100% { transform: translate(-50%, -100%); }
}
/* Inside the new pin: show only the icon matching the reported type. */
.tiq-fa__new-pin .tiq-fa__pin-icon { display: none; }
.tiq-fa[data-reported-type="blowdown"] .tiq-fa__new-pin .tiq-fa__pin-icon.tiq-fa__type-icon--blowdown,
.tiq-fa[data-reported-type="erosion"] .tiq-fa__new-pin .tiq-fa__pin-icon.tiq-fa__type-icon--erosion,
.tiq-fa[data-reported-type="drainage"] .tiq-fa__new-pin .tiq-fa__pin-icon.tiq-fa__type-icon--drainage,
.tiq-fa[data-reported-type="signage"] .tiq-fa__new-pin .tiq-fa__pin-icon.tiq-fa__type-icon--signage,
.tiq-fa[data-reported-type="other"] .tiq-fa__new-pin .tiq-fa__pin-icon.tiq-fa__type-icon--other {
display: flex;
}
/* ── Content Page template ──────────────────────────────────────────
* Applied via page-content.php (Template Name: "Content Page") for
* prose pages: Use Cases, About, Privacy, Support. Default page.php
* keeps the landing-page behaviour where full-bleed trailsiq/*
* sections run edge-to-edge.
*
* What this gives you:
* • Top padding that clears the fixed nav so the title isn't
* hidden behind the header.
* • A centred reading column with proper side padding on every
* viewport (clamps so mobile gets 20px, desktop gets 32px).
* • Restored vertical rhythm between paragraphs, headings, lists
* — overrides the global `.entry-content > * { margin: 0 }`
* reset which is meant for stacking full-bleed sections.
*/
.is-content-page {
padding-top: calc(var(--nav-h) + 56px);
padding-bottom: 96px;
background: var(--offwhite);
min-height: 100vh;
}
.admin-bar .is-content-page { padding-top: calc(var(--nav-h) + 56px + 32px); }
.tiq-page-content {
max-width: 760px;
margin-inline: auto;
padding-inline: clamp(20px, 5vw, 32px);
text-align: left;
}
.tiq-page-content__header { margin-bottom: 32px; }
.tiq-page-content__title {
font-size: clamp(40px, 6vw, 64px);
line-height: 1.05;
margin: 0;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 0.04em;
color: var(--ink);
}
/* Restore natural rhythm INSIDE a content page. The global
.entry-content > * { margin: 0 } reset earlier in this file
targets every .entry-content; the higher-specificity selector
here overrides it for prose pages without affecting landing
layouts. */
.tiq-page-content .entry-content > * { margin-block: 24px 0; }
.tiq-page-content .entry-content > *:first-child { margin-block-start: 0; }
.tiq-page-content .entry-content > h2 { margin-block: 56px 12px; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.03em; color: var(--ink); }
.tiq-page-content .entry-content > h3 { margin-block: 40px 8px; font-family: 'Bebas Neue', sans-serif; color: var(--ink); }
.tiq-page-content .entry-content > .wp-block-separator {
margin-block: 56px;
border: 0;
height: 1px;
background: rgba(0,0,0,0.08);
}
.tiq-page-content .entry-content p {
font-size: 17px;
line-height: 1.75;
color: var(--mid, #4a4a48);
max-width: none;
}
.tiq-page-content .entry-content p.has-large-font-size {
font-size: 22px;
line-height: 1.55;
color: var(--ink);
font-weight: 400;
}
.tiq-page-content .entry-content ul,
.tiq-page-content .entry-content ol { padding-left: 1.4em; margin-block: 16px 0; }
.tiq-page-content .entry-content li {
margin-block: 10px 0;
font-size: 17px;
line-height: 1.65;
color: var(--mid, #4a4a48);
}
.tiq-page-content .entry-content li::marker { color: var(--moss); }
.tiq-page-content .entry-content li strong { color: var(--ink); font-weight: 600; }
.tiq-page-content .entry-content a:not([class*="btn"]) {
color: var(--moss);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.tiq-page-content .entry-content a:not([class*="btn"]):hover { color: var(--pine); text-decoration-thickness: 2px; }
/* Inline images get rounded corners so they sit nicely in the
reading column without a hard edge. Full-width images (alignwide
/ alignfull) keep their own behaviour. */
.tiq-page-content .entry-content img {
border-radius: var(--radius, 8px);
max-width: 100%;
height: auto;
}
/* ── Flexible Page template ─────────────────────────────────────────
* Applied via page-flex.php (Template Name: "Flexible Page"). Lets
* full-bleed trailsiq/* sections (hero, features-grid, cta,
* pricing, testimonials, trail-conditions, feature-showcase) run
* edge-to-edge while plain prose blocks (paragraph, heading, list,
* quote, separator, plain image) sit in the same 760px reading
* column the Content Page template uses.
*
* Title rendering is conditional on the _tiq_show_title meta —
* see page-flex.php and assets/js/page-meta.js. When shown, the
* title sits in the reading column with top padding to clear the
* fixed nav. When hidden, the page is responsible for clearing
* the nav itself (typically via a hero block's own padding).
*/
.tiq-page-flex__header {
padding: calc(var(--nav-h) + 56px) clamp(20px, 5vw, 32px) 0;
background: var(--offwhite);
}
.admin-bar .tiq-page-flex__header { padding-top: calc(var(--nav-h) + 56px + 32px); }
.tiq-page-flex__header-inner {
max-width: 760px;
margin-inline: auto;
}
.tiq-page-flex__title {
font-size: clamp(40px, 6vw, 64px);
line-height: 1.05;
margin: 0 0 32px;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 0.04em;
color: var(--ink);
}
/* Plain prose blocks → reading column. Listed explicitly so any
trailsiq/* full-bleed section keeps its own layout untouched. */
.tiq-page-flex .entry-content > p,
.tiq-page-flex .entry-content > h1,
.tiq-page-flex .entry-content > h2,
.tiq-page-flex .entry-content > h3,
.tiq-page-flex .entry-content > h4,
.tiq-page-flex .entry-content > h5,
.tiq-page-flex .entry-content > h6,
.tiq-page-flex .entry-content > ul,
.tiq-page-flex .entry-content > ol,
.tiq-page-flex .entry-content > .wp-block-quote,
.tiq-page-flex .entry-content > .wp-block-separator,
.tiq-page-flex .entry-content > .wp-block-image:not(.alignfull):not(.alignwide),
.tiq-page-flex .entry-content > .wp-block-columns:not(.alignfull):not(.alignwide),
.tiq-page-flex .entry-content > .wp-block-group:not(.alignfull):not(.alignwide):not([class*="is-style-tiq-"]) {
max-width: 760px;
margin-inline: auto;
padding-inline: clamp(20px, 5vw, 32px);
text-align: left;
}
/* Vertical rhythm + typography on the prose blocks. Higher
specificity than the global `.entry-content > * { margin: 0 }`
reset further up so prose breathes without breaking the
landing-page layout used by page.php. */
.tiq-page-flex .entry-content > p,
.tiq-page-flex .entry-content > ul,
.tiq-page-flex .entry-content > ol,
.tiq-page-flex .entry-content > .wp-block-quote,
.tiq-page-flex .entry-content > .wp-block-image:not(.alignfull):not(.alignwide) { margin-block: 24px auto; }
.tiq-page-flex .entry-content > h2 { margin-block: 56px auto 12px; font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.03em; color: var(--ink); }
.tiq-page-flex .entry-content > h3 { margin-block: 40px auto 8px; font-family: 'Bebas Neue', sans-serif; color: var(--ink); }
.tiq-page-flex .entry-content > .wp-block-separator { margin-block: 56px auto; border: 0; height: 1px; background: rgba(0,0,0,0.08); }
.tiq-page-flex .entry-content p {
font-size: 17px;
line-height: 1.75;
color: var(--mid, #4a4a48);
max-width: none;
}
.tiq-page-flex .entry-content p.has-large-font-size {
font-size: 22px;
line-height: 1.55;
color: var(--ink);
}
.tiq-page-flex .entry-content ul,
.tiq-page-flex .entry-content ol { padding-left: 1.4em; }
.tiq-page-flex .entry-content li { margin-block: 10px 0; font-size: 17px; line-height: 1.65; color: var(--mid, #4a4a48); }
.tiq-page-flex .entry-content li::marker { color: var(--moss); }
.tiq-page-flex .entry-content li strong { color: var(--ink); font-weight: 600; }
.tiq-page-flex .entry-content a:not([class*="btn"]) {
color: var(--moss);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.tiq-page-flex .entry-content a:not([class*="btn"]):hover { color: var(--pine); text-decoration-thickness: 2px; }
/* When the title is hidden via the toggle, the page expects the
first child block to handle clearing the fixed nav itself —
usually a hero with its own safe-area padding. Add a generous
top padding for the prose-only-with-title-hidden edge case so
text doesn't tuck under the header. Hero / full-bleed sections
can sit on top of this padding because their own backgrounds
extend; the offset is ~visually invisible behind dark sections. */
.is-flex-page > article:not(:has(.tiq-page-flex__header)) > .entry-content > *:first-child {
margin-top: 0;
}
.is-flex-page > article:not(:has(.tiq-page-flex__header)) > .entry-content > p:first-child,
.is-flex-page > article:not(:has(.tiq-page-flex__header)) > .entry-content > h1:first-child,
.is-flex-page > article:not(:has(.tiq-page-flex__header)) > .entry-content > h2:first-child,
.is-flex-page > article:not(:has(.tiq-page-flex__header)) > .entry-content > ul:first-child,
.is-flex-page > article:not(:has(.tiq-page-flex__header)) > .entry-content > ol:first-child {
padding-top: calc(var(--nav-h) + 32px);
}
/* ── Constrained group blocks INSIDE prose-only templates ──────────
* Only kicks in on Content Page (page-content.php) and Flexible
* Page (page-flex.php). When an author wraps a few paragraphs in a
* group with "Inner blocks use content width" turned on, snap the
* group to a 760px reading column with side padding so prose
* actually feels constrained on viewports under theme.json's
* 1200px contentSize. Default page.php (landing pages) is left
* alone — wrappers there typically aren't meant to be clamped.
*
* alignfull / alignwide children still break out via the standard
* 50%-50vw trick.
*/
.tiq-page-flex .entry-content > .wp-block-group.is-layout-constrained:not(.alignfull):not(.alignwide),
.tiq-page-content .entry-content > .wp-block-group.is-layout-constrained:not(.alignfull):not(.alignwide) {
max-width: 760px;
margin-inline: auto;
padding-inline: clamp(20px, 5vw, 32px);
}
.tiq-page-flex .entry-content > .wp-block-group.is-layout-constrained > .alignfull,
.tiq-page-content .entry-content > .wp-block-group.is-layout-constrained > .alignfull {
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
max-width: 100vw;
width: 100vw;
}
.tiq-page-flex .entry-content > .wp-block-group.is-layout-constrained > .alignwide,
.tiq-page-content .entry-content > .wp-block-group.is-layout-constrained > .alignwide {
margin-left: calc(50% - min(50%, 720px));
margin-right: calc(50% - min(50%, 720px));
max-width: 1440px;
}
.tiq-page-flex .entry-content > .wp-block-group.is-layout-constrained > p,
.tiq-page-flex .entry-content > .wp-block-group.is-layout-constrained > ul,
.tiq-page-flex .entry-content > .wp-block-group.is-layout-constrained > ol,
.tiq-page-flex .entry-content > .wp-block-group.is-layout-constrained > .wp-block-quote,
.tiq-page-flex .entry-content > .wp-block-group.is-layout-constrained > .wp-block-image:not(.alignfull):not(.alignwide),
.tiq-page-content .entry-content > .wp-block-group.is-layout-constrained > p,
.tiq-page-content .entry-content > .wp-block-group.is-layout-constrained > ul,
.tiq-page-content .entry-content > .wp-block-group.is-layout-constrained > ol,
.tiq-page-content .entry-content > .wp-block-group.is-layout-constrained > .wp-block-quote,
.tiq-page-content .entry-content > .wp-block-group.is-layout-constrained > .wp-block-image:not(.alignfull):not(.alignwide) {
margin-block: 24px 0;
}
.tiq-page-flex .entry-content > .wp-block-group.is-layout-constrained > h2,
.tiq-page-content .entry-content > .wp-block-group.is-layout-constrained > h2 {
margin-block: 56px 12px;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 0.03em;
}
.tiq-page-flex .entry-content > .wp-block-group.is-layout-constrained > h3,
.tiq-page-content .entry-content > .wp-block-group.is-layout-constrained > h3 {
margin-block: 40px 8px;
font-family: 'Bebas Neue', sans-serif;
}
.tiq-page-flex .entry-content > .wp-block-group.is-layout-constrained > .wp-block-separator,
.tiq-page-content .entry-content > .wp-block-group.is-layout-constrained > .wp-block-separator {
margin-block: 56px;
border: 0;
height: 1px;
background: rgba(0,0,0,0.08);
}
/* ── Force-break full-bleed trailsiq sections on the Flex template ───
* Belt-and-braces: regardless of any wrapping group / container with
* inherited width on the Flexible Page template, any known trailsiq
* full-bleed section (or anything explicitly tagged `alignfull`)
* breaks out to the viewport edges via the standard 50%-50vw trick.
* This covers the case where an author wrapped content in a
* constrained group AND dropped a hero inside — without this rule
* the hero would inherit the 760px clamp from the group.
*/
.tiq-page-flex .alignfull,
.tiq-page-flex .tiq-hero,
.tiq-page-flex .tiq-stats-bar,
.tiq-page-flex .tiq-features-grid,
.tiq-page-flex .tiq-cta-section,
.tiq-page-flex .tiq-pricing-section,
.tiq-page-flex .tiq-testimonials-section,
.tiq-page-flex .tiq-trail-conditions,
.tiq-page-flex .tiq-feature-showcase,
.tiq-page-flex .tiq-what-is,
.tiq-page-flex .tiq-maintenance-section,
.tiq-page-flex .tiq-data-reports,
.tiq-page-flex .tiq-wordpress-section {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
padding-left: 0;
padding-right: 0;
}
/* The breakout rule above zeros horizontal padding for all full-bleed
sections, but the CTA block manages its own side padding so restore it. */
.tiq-page-flex .tiq-cta-section {
padding-left: clamp(20px, 4vw, 48px);
padding-right: clamp(20px, 4vw, 48px);
}
/* Belt — clear .entry-content of any inherited width clamp on the
flex template so direct-children sections start from the viewport
edges naturally even before the rule above kicks in. */
.tiq-page-flex .entry-content {
max-width: none;
width: 100%;
padding-inline: 0;
margin-inline: 0;
}
/* Defeat the overflow:hidden on .entry-content (line 670) when on
the Flex page — that clip prevents the 50%-50vw break-out from
extending past the parent's left edge, which is exactly what
makes the section "stay narrow" instead of going viewport-wide.
The flex page doesn't need horizontal-scrollbar protection from
that rule because the break-out targets are already 100vw wide. */
.tiq-page-flex .entry-content { overflow: visible; }
.is-flex-page { overflow-x: hidden; }
/* ── Alignfull constrained groups on the Flex template ──────────────
* Pattern: author wraps a section in a wp-block-group, sets
* Align → Full width AND ticks "Inner blocks use content width."
* The group's background colour stretches edge-to-edge (the
* alignfull break-out from earlier handles that), and inner
* blocks clamp to the 760px reading column same as a regular
* paragraph would.
*
* Without this rule, alignfull constrained groups inherit WP's
* default contentSize (theme.json's 1200px) for inner blocks,
* which is far too wide for prose. Override to match the rest of
* the flex page's reading-column treatment.
*/
.tiq-page-flex .wp-block-group.alignfull.is-layout-constrained > *:not(.alignfull):not(.alignwide),
.tiq-page-flex .wp-block-group.alignfull.has-global-padding > *:not(.alignfull):not(.alignwide) {
max-width: 760px;
margin-inline: auto;
padding-inline: clamp(20px, 5vw, 32px);
box-sizing: border-box;
}
/* Vertical rhythm + typography inside an alignfull constrained
group — same shape the rest of the flex page uses so prose
reads consistently regardless of whether the section has a
background colour or not. */
.tiq-page-flex .wp-block-group.alignfull.is-layout-constrained > p,
.tiq-page-flex .wp-block-group.alignfull.is-layout-constrained > ul,
.tiq-page-flex .wp-block-group.alignfull.is-layout-constrained > ol,
.tiq-page-flex .wp-block-group.alignfull.is-layout-constrained > .wp-block-quote,
.tiq-page-flex .wp-block-group.alignfull.has-global-padding > p,
.tiq-page-flex .wp-block-group.alignfull.has-global-padding > ul,
.tiq-page-flex .wp-block-group.alignfull.has-global-padding > ol,
.tiq-page-flex .wp-block-group.alignfull.has-global-padding > .wp-block-quote {
margin-block: 24px auto;
}
.tiq-page-flex .wp-block-group.alignfull.is-layout-constrained > h2,
.tiq-page-flex .wp-block-group.alignfull.has-global-padding > h2 {
margin-block: 56px auto 12px;
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 0.03em;
}
.tiq-page-flex .wp-block-group.alignfull.is-layout-constrained > h3,
.tiq-page-flex .wp-block-group.alignfull.has-global-padding > h3 {
margin-block: 40px auto 8px;
font-family: 'Bebas Neue', sans-serif;
}
.tiq-page-flex .wp-block-group.alignfull p {
font-size: 17px;
line-height: 1.75;
max-width: none;
}
.tiq-page-flex .wp-block-group.alignfull li {
font-size: 17px;
line-height: 1.65;
margin-block: 10px 0;
}
.tiq-page-flex .wp-block-group.alignfull li::marker { color: var(--moss); }
/* Top / bottom breathing room when the group has a background
colour set — the editor lets the author tune this via the
spacing controls, but a sensible default keeps text from
butting against the coloured edge if they don't. */
.tiq-page-flex .wp-block-group.alignfull[style*="background"],
.tiq-page-flex .wp-block-group.alignfull[class*="has-background"] {
padding-block: clamp(56px, 8vw, 96px);
}
/* ─────────────────────────────────────────────────────────────────────────────
trailsiq/contact
Layout: header on top, FAQ + form side by side on desktop, stacked on mobile.
───────────────────────────────────────────────────────────────────────────── */
.tiq-contact-section {
padding: clamp(48px, 8vw, 96px) 24px;
max-width: 1200px;
margin: 0 auto;
}
.tiq-contact-section .contact-header {
text-align: center;
margin-bottom: clamp(32px, 4vw, 48px);
}
.tiq-contact-section .section-label {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #dd9b36;
margin-bottom: 12px;
}
.tiq-contact-section .section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(32px, 5vw, 48px);
line-height: 1.05;
margin: 0 0 12px;
color: #1b2e1a;
}
.tiq-contact-section .section-body {
font-size: 17px;
line-height: 1.55;
color: #4b5563;
max-width: 620px;
margin: 0 auto;
}
.tiq-contact-section .contact-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(32px, 5vw, 64px);
align-items: start;
}
@media (max-width: 880px) {
.tiq-contact-section .contact-grid { grid-template-columns: 1fr; }
}
.tiq-contact-section .contact-faq {
display: flex;
flex-direction: column;
gap: 10px;
}
.tiq-contact-section .faq-item {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 14px 18px;
transition: background 0.15s ease;
}
.tiq-contact-section .faq-item[open] {
background: #fff;
border-color: #d1d5db;
}
.tiq-contact-section .faq-item summary {
cursor: pointer;
list-style: none;
font-weight: 600;
font-size: 16px;
color: #1b2e1a;
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
}
.tiq-contact-section .faq-item summary::-webkit-details-marker { display: none; }
.tiq-contact-section .faq-item summary::after {
content: '+';
font-size: 22px;
font-weight: 400;
color: #dd9b36;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.tiq-contact-section .faq-item[open] summary::after { content: '−'; }
.tiq-contact-section .faq-item p {
margin: 12px 0 0;
color: #4b5563;
font-size: 15px;
line-height: 1.6;
}
.tiq-contact-section .contact-form {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: clamp(20px, 3vw, 32px);
display: flex;
flex-direction: column;
gap: 16px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.tiq-contact-section .contact-form-title {
font-size: 22px;
font-weight: 700;
color: #1b2e1a;
margin: 0;
}
.tiq-contact-section .contact-form-intro {
margin: -8px 0 0;
color: #4b5563;
font-size: 15px;
line-height: 1.5;
}
.tiq-contact-section .contact-form label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 13px;
font-weight: 500;
color: #374151;
}
.tiq-contact-section .contact-form input[type="text"],
.tiq-contact-section .contact-form input[type="email"],
.tiq-contact-section .contact-form textarea {
width: 100%;
padding: 11px 14px;
font: inherit;
font-size: 15px;
color: #111827;
background: #f9fafb;
border: 1px solid #d1d5db;
border-radius: 8px;
transition: border-color 0.15s ease, background 0.15s ease;
}
.tiq-contact-section .contact-form input[type="text"]:focus,
.tiq-contact-section .contact-form input[type="email"]:focus,
.tiq-contact-section .contact-form textarea:focus {
outline: none;
background: #fff;
border-color: #dd9b36;
}
.tiq-contact-section .contact-form textarea {
resize: vertical;
min-height: 120px;
}
/* Honeypot — visually hidden but still focusable for accessibility
tools that ignore tabindex=-1. Bots fill all inputs they parse,
so a non-empty value at submit time tells us it's not a human. */
.tiq-contact-section .contact-form .tiq-honeypot {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.tiq-contact-section .contact-form .cf-turnstile {
min-height: 65px;
}
.tiq-contact-section .contact-form .btn-primary {
align-self: flex-start;
background: #dd9b36;
color: #1b2e1a;
border: none;
border-radius: 10px;
padding: 12px 28px;
font-weight: 700;
font-size: 15px;
cursor: pointer;
transition: background 0.15s ease, transform 0.1s ease;
}
.tiq-contact-section .contact-form .btn-primary:hover { background: #c98a2c; }
.tiq-contact-section .contact-form .btn-primary:active { transform: translateY(1px); }
.tiq-contact-section .contact-success,
.tiq-contact-section .contact-error {
margin-bottom: 16px;
padding: 12px 16px;
border-radius: 10px;
font-size: 14px;
line-height: 1.45;
}
.tiq-contact-section .contact-success {
background: #ecfdf5;
color: #065f46;
border: 1px solid #a7f3d0;
}
.tiq-contact-section .contact-error {
background: #fef2f2;
color: #991b1b;
border: 1px solid #fecaca;
}
/* ─────────────────────────────────────────────────────────────────────────────
App-store badges
.tiq-store-badge: an ![]()
wrapper used inside the Hero block
when a button has its `store` dropdown set, AND inside the standalone
.tiq-store-row that renders trailsiq/app-store-buttons.
───────────────────────────────────────────────────────────────────────────── */
.tiq-store-badge {
display: inline-flex;
align-items: center;
line-height: 0;
border-radius: 6px;
transition: transform 0.15s ease, opacity 0.15s ease;
}
.tiq-store-badge:hover { transform: translateY(-1px); }
.tiq-store-badge:active { transform: translateY(0); opacity: 0.9; }
.tiq-store-badge:focus-visible {
outline: 2px solid #dd9c34;
outline-offset: 3px;
}
.tiq-store-badge img {
display: block;
height: 44px;
width: auto;
/* Prevents WordPress's wp-image-* width from leaking onto the
![]()
when an editor ever drops one into the inspector — keeps
all badges to the same height regardless of source SVG dims. */
max-width: none;
}
.tiq-store-badge.is-mobile-hidden {
/* Mirror the .btn-primary / .btn-ghost mobile-hide rule used by
the hero-actions text buttons so the toggle behaves the same
across both. */
}
@media (max-width: 640px) {
.tiq-store-badge.is-mobile-hidden { display: none !important; }
}
/* Standalone trailsiq/app-store-buttons block */
.tiq-store-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin: 24px 0;
}
.tiq-store-row .tiq-store-badges {
display: contents;
}
.tiq-store-row[data-align="center"] { justify-content: center; }
.tiq-store-row[data-align="right"] { justify-content: flex-end; }
.tiq-store-row[data-align="left"] { justify-content: flex-start; }
/* Hero block: when a hero button is rendered as a store badge,
the .hero-actions container stays the same flex row — but the
badge needs to sit centred against the same baseline as the
text buttons next to it. */
.hero-actions .tiq-store-badge {
margin: 0;
}
/* ─────────────────────────────────────────────────────────────────────────────
Smartphone block — buttons under the phone
.tiq-smartphone-with-actions wraps the phone frame (or .tiq-smartphone-group)
plus a .tiq-smartphone-actions row. Inherits the block's data-align so the
row lines up with the phone above it.
───────────────────────────────────────────────────────────────────────────── */
.tiq-smartphone-with-actions {
display: flex;
flex-direction: column;
align-items: center;
gap: 28px;
}
.tiq-smartphone-with-actions[data-align="left"] { align-items: flex-start; }
.tiq-smartphone-with-actions[data-align="right"] { align-items: flex-end; }
.tiq-smartphone-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.tiq-smartphone-with-actions[data-align="left"] .tiq-smartphone-actions { justify-content: flex-start; }
.tiq-smartphone-with-actions[data-align="right"] .tiq-smartphone-actions { justify-content: flex-end; }
.tiq-smartphone-actions .btn-primary,
.tiq-smartphone-actions .btn-ghost {
margin: 0;
}