/*
TechTrend Component Library
============================
Built on top of tokens.css. This file does NOT re-implement the site's existing
layout-utility system (.container/.row/.column/.gap-N/.pad-t-N/.pad-b-N/.sm-.../.md-...)
or the header/hamburger/main-nav/footer chrome CSS - those already work correctly,
already live in assets/theme/techtrend/style.css, and the
mobile-nav/hamburger JS (main.js) does plain querySelector() against those exact
class names, so re-declaring them here would just risk specificity fights for zero
benefit. Phase 2 pages keep loading that stylesheet alongside this one.
What lives here: components that were either unformalized (real markup existed,
scattered across pages, but no reusable class) or dead/unused (declared once,
never referenced) in the source site - buttons, badges, blog cards, prose
typography, forms, pagination. Every visual value (padding, radius, color) is
taken from the real tt-rendered output (see design-system.html for the
extraction notes on each), not invented.
*/
/* ---------------------------------------------------------------
Content typography - the site's actual `.content` scale (theme
style.css), token-ified. This is the canonical type ramp for any
hand-authored (non-tt-widget) prose block.
---------------------------------------------------------------- */
.content {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.content * { margin: 0; padding: 0; color: var(--color-text); }
.content.on-dark p, .content.on-dark h1, .content.on-dark h2,
.content.on-dark h4, .content.on-dark h6, .content.on-dark li { color: var(--color-white); }
.content.center { text-align: center; }
.content h1 {
font-family: var(--font-heading);
font-weight: var(--text-h1-weight);
color: var(--color-primary);
font-size: var(--text-h1-size);
line-height: var(--text-h1-line);
}
.content h2 {
font-family: var(--font-heading);
font-weight: var(--text-h2-weight);
color: var(--color-primary);
font-size: var(--text-h2-size);
line-height: var(--text-h2-line);
}
.content h3 {
font-family: var(--font-body);
font-weight: var(--text-h3-weight);
color: var(--color-accent);
font-size: var(--text-h3-size);
line-height: var(--text-h3-line);
text-transform: uppercase;
}
.content h4 {
font-family: var(--font-heading);
font-weight: var(--text-h4-weight);
color: var(--color-primary);
font-size: var(--text-h4-size);
line-height: var(--text-h4-line);
}
.content h6 {
font-family: var(--font-body);
font-weight: var(--text-h6-weight);
color: var(--color-primary);
font-size: var(--text-h6-size);
line-height: var(--text-h6-line);
}
.content p, .content li {
font-family: var(--font-body);
color: var(--color-text);
font-size: var(--text-body-size);
line-height: var(--text-body-line);
max-width: 910px;
}
.content p.light, .content li.light { font-weight: 300; }
.content ul {
display: flex; flex-direction: column; gap: var(--space-14);
margin: 0; padding: 0; list-style-type: none;
}
.content ul.arrows li {
background-image: url("../images/content/arrow.svg");
background-position: left 2px; background-repeat: no-repeat;
padding-left: var(--space-24);
}
/* ---------------------------------------------------------------
Prose - article body copy. Wraps raw WYSIWYG output (the pattern
used by every blog article's .single-blog-content /
tt-widget-theme-post-content). The source site styles this
with one bare rule (p { font-size:16px; color:var(--c-primary) })
with no heading/list treatment at all - this formalizes it into a
complete, readable type system for migrated + newly authored posts
without changing how existing pixel-matched pages look.
---------------------------------------------------------------- */
.prose { font-family: var(--font-body); color: var(--color-text); font-size: var(--text-body-size); line-height: var(--text-body-line); }
.prose > * + * { margin-top: var(--space-24); }
.prose h2 {
font-family: var(--font-heading); font-weight: 400; color: var(--color-primary);
font-size: var(--text-h2-size); line-height: var(--text-h2-line); margin-top: var(--space-48);
}
.prose h3 {
font-family: var(--font-heading); font-weight: 400; color: var(--color-primary);
font-size: var(--text-h4-size); line-height: var(--text-h4-line); margin-top: var(--space-32);
}
.prose strong { font-weight: 700; color: var(--color-primary); }
.prose a { color: var(--color-accent); text-decoration: none; }
.prose ul, .prose ol { padding-left: var(--space-24); display: flex; flex-direction: column; gap: var(--space-8); }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
/* ---------------------------------------------------------------
Buttons - two real variants found across the site (no third
"outline" variant exists in any rendered page). Formalized from
the live .tt-button CSS output: pill radius, 16px/64px
padding on the solid form, transparent/icon-fill on the link form.
---------------------------------------------------------------- */
.btn {
display: inline-flex; align-items: center; gap: var(--space-8);
font-family: var(--font-body);
font-size: var(--text-h3-size); font-weight: var(--text-h3-weight);
text-transform: uppercase; line-height: var(--text-h3-line);
border: none; cursor: pointer; text-decoration: none;
transition: background-color var(--transition-fast), color var(--transition-fast), opacity var(--transition-fast);
}
.btn-solid {
background-color: var(--color-accent);
color: var(--color-primary);
border-radius: var(--radius-btn);
padding: 16px 64px;
}
.btn-solid:hover { opacity: 0.85; }
.btn-link {
background-color: transparent;
color: var(--color-secondary);
padding: 0;
}
.btn-link:hover { opacity: 0.6; }
.btn-link svg { fill: currentColor; width: 12px; height: 18px; }
.btn-outline {
background-color: transparent;
color: var(--color-primary);
border: 1px solid var(--color-primary);
border-radius: var(--radius-btn);
padding: 15px 63px; /* -1px to offset the added border vs. .btn-solid */
}
.btn-outline:hover { background-color: var(--color-primary); color: var(--color-white); }
/* ---------------------------------------------------------------
Badge / eyebrow label - the recurring small-caps accent-colored
label pattern (`.content h3`) reused as a standalone element for
category tags on blog cards and article headers.
---------------------------------------------------------------- */
/* a.badge (element+class), not just .badge: .tt-kit a is also (element+class)
specificity and explicitly sets font-size/weight/family on every anchor
site-wide, so a bare .badge class alone loses that tie. Matching it here and
relying on components.css loading after the kit stylesheet settles it in our favor. */
.badge, a.badge {
display: inline-block;
font-family: var(--font-body);
font-size: var(--text-h3-size);
font-weight: var(--text-h3-weight);
line-height: var(--text-h3-line);
text-transform: uppercase;
color: var(--color-accent);
text-decoration: none;
}
.badge:hover { opacity: 0.75; }
/* ---------------------------------------------------------------
Blog card - formalizes the recurring thumbnail/badge/title pattern
from blog.html's post loop into clean, reusable markup:
![]()
Category
Matches the source exactly - no excerpt/author/date exist on the
real blog listing cards, only thumbnail + category + title.
---------------------------------------------------------------- */
.blog-card { display: flex; flex-direction: column; gap: var(--space-4); }
.blog-card__thumb { display: block; }
.blog-card__thumb img { width: 100%; height: auto; display: block; }
/* h3.blog-card__title (element+class, not just .blog-card__title) is intentional:
tt's Global Kit ships a bare `.tt-kit- h3` default that ties this
selector's specificity exactly - a lone class loses that tie. Matching it here and
relying on components.css loading after the kit stylesheet settles the tie in our favor. */
h3.blog-card__title { margin: 0; font-family: var(--font-heading); font-weight: 400; color: var(--color-primary); font-size: 28px; line-height: 36px; text-transform: none; }
/* .tt-kit a forces font-family/font-size/font-weight/line-height on every anchor
site-wide (a base link reset), which otherwise wins over inheriting the h3's
heading styles - an explicit declaration always beats inheritance regardless of
selector specificity. Restore inheritance for all four so the title link renders
at the heading's size/font, matching source (a size-only miss here still wraps
article titles to fewer/more lines than production, throwing off card height). */
.blog-card__title a { font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit; text-decoration: none; }
.blog-card__title a:hover { color: var(--color-secondary); }
/* Blog-card category badge is purple, not the base .badge cyan - verified against
techtrend.us (article-header eyebrows are cyan, blog-listing card tags are purple). */
.blog-card__badge, a.blog-card__badge { color: var(--color-secondary); }
/* ---------------------------------------------------------------
Icon list / checklist - already a real, reusable tt pattern
(tt-icon-list-item) site-wide; given a plain-class
equivalent here for use in rebuilt/non-tt markup.
---------------------------------------------------------------- */
.icon-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-14); }
.icon-list__item { display: flex; align-items: center; gap: var(--space-8); }
.icon-list__item svg { flex-shrink: 0; fill: var(--color-accent); width: 17px; height: 12px; }
.icon-list__item span { font-family: var(--font-body); font-size: var(--text-body-size); color: var(--color-text); }
/* ---------------------------------------------------------------
Pagination - matches the real blog.html markup 1:1
(nav.tt-pagination > a/span.page-numbers), token-ified.
Deliberately plain (no pill/button chrome) - this mirrors the live
production site's own unstyled pagination exactly (verified against
techtrend.us/blog/), not a design gap to "improve" on.
---------------------------------------------------------------- */
.pagination { display: block; text-align: center; }
.pagination .page-numbers {
display: inline; font-family: var(--font-body); text-decoration: none;
}
.pagination .page-numbers.current { font-size: 28px; color: var(--color-text); margin: 0 5px 0 0; }
.pagination a.page-numbers { font-size: 18px; color: #cc3366; margin: 0 5px; }
/* ---------------------------------------------------------------
Forms - matches the real tt Forms field structure
(tt-field-group / tt-field / tt-field-textual)
from contact-us.html, token-ified, given clean equivalent classes
for non-tt form rebuilds (e.g. the ASP.NET Core contact form).
---------------------------------------------------------------- */
.form-row { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.form-field { display: flex; flex-direction: column; gap: var(--space-8); flex: 1 1 100%; }
.form-field--half { flex-basis: calc(50% - var(--space-16) / 2); }
.form-label { font-family: var(--font-body); font-size: var(--text-small-size); font-weight: 600; color: var(--color-primary); }
.form-label .required { color: var(--color-danger); }
.form-input, .form-textarea {
font-family: var(--font-body); font-size: var(--text-small-size); color: var(--color-text);
border: 1px solid var(--color-text-muted); border-radius: var(--radius-sm);
padding: var(--space-14) var(--space-16); background: var(--color-white);
}
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--color-secondary); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-checkbox-group { display: flex; flex-direction: column; gap: var(--space-8); }
.form-checkbox { display: flex; align-items: flex-start; gap: var(--space-8); font-family: var(--font-body); font-size: var(--text-small-size); color: var(--color-text); }
.form-checkbox input { margin-top: 4px; }
.form-checkbox a { color: var(--color-secondary); }
/* Media query note: breakpoints below intentionally repeat the literal px values
from --bp-sm/--bp-md/--bp-lg (custom properties can't be used inside @media). */
@media only screen and (max-width: 640px) {
.form-field--half { flex-basis: 100%; }
}
.blog-card__badges { display:flex; flex-wrap:wrap; gap:4px; align-items:center; color: var(--color-accent); font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); text-transform: uppercase; }
/* ---------------------------------------------------------------
.tt-boxed horizontal padding - on the source WordPress site this
was a global "wpcode-css-snippet" (a site-wide custom-CSS
injection, present on essentially every page) fixing a gap in the
Elementor theme's own .tt-boxed rule, which never sets padding
itself. It never got carried into any of the tt-*.css extracts,
so every .tt-boxed section (blog grid, careers, contact, home,
every marketing page) rendered edge-to-edge instead of with the
48px/24px side padding the real site has. Restored verbatim here
so it applies globally again, loaded after tt-frontend.css's own
(padding-less) .tt-boxed rule so it wins the cascade. */
.tt-boxed { padding-left: 48px; padding-right: 48px; }
@media only screen and (max-width: 767px) {
.tt-boxed { padding-left: 24px; padding-right: 24px; }
}