OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Sync: enhance platform text styles and adjust layout for improved responsiveness

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 17:20:19 -05:00
parent dc89009cfa
commit 25da755378
1 changed files with 30 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
theme/assets/css/main.css
View File

@@ -115,6 +115,8 @@ body,
.pricing-card,
.contact-form-wrap,
.platform-visual,
.platform-text h3,
.platform-text p,
.form-group input,
.form-group textarea,
.form-group select { transition: background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition); }
@@ -1970,7 +1972,7 @@ p:last-child { margin-bottom: 0; }
.platform-row.reverse .platform-text { order: 2; }
.platform-row.reverse .platform-visual { order: 1; }
.platform-text h3 { font-size: 1.5rem; margin-bottom: 1rem; }
.platform-text h3 { font-size: 1.5rem; margin-bottom: 1rem; color: var(--color-heading); }
.platform-text p { color: var(--color-text-muted); }
.platform-visual {
@@ -2425,6 +2427,10 @@ p:last-child { margin-bottom: 0; }
overflow: visible;
position: relative;
font-size: inherit;
display: flex;
align-items: center;
justify-content: center;
align-self: center;
}
.ts-stage {
position: relative;
@@ -2433,6 +2439,9 @@ p:last-child { margin-bottom: 0; }
display: flex;
align-items: center;
justify-content: center;
/* Offset center leftward to account for the stick protruding on the right,
so the TV+stick combo appears visually centered in the column */
padding-right: 90px;
}
/* ── TV ── */
.ts-tv {
@@ -2442,8 +2451,8 @@ p:last-child { margin-bottom: 0; }
position: relative;
}
.ts-tv__body {
width: 320px;
height: 188px;
width: 400px;
height: 235px;
background: #111;
border: 4px solid #111;
border-radius: 6px 6px 4px 4px;
@@ -2789,7 +2798,7 @@ p:last-child { margin-bottom: 0; }
.ts-tv__feet {
display: flex;
justify-content: space-between;
width: 180px;
width: 224px;
}
.ts-tv__foot {
width: 12px;
@@ -2810,8 +2819,8 @@ p:last-child { margin-bottom: 0; }
z-index: 2;
}
.ts-stick__body {
width: 68px;
height: 26px;
width: 84px;
height: 32px;
background: linear-gradient(180deg, #f5f5f5, #e0e0e0);
border: 1px solid #ccc;
border-radius: 5px;
@@ -2849,8 +2858,8 @@ p:last-child { margin-bottom: 0; }
}
/* HDMI connector */
.ts-stick__connector {
width: 14px;
height: 10px;
width: 18px;
height: 14px;
background: linear-gradient(180deg, #888, #666);
border-radius: 0 2px 2px 0;
margin-left: -1px;
@@ -2862,8 +2871,8 @@ p:last-child { margin-bottom: 0; }
position: absolute;
left: 2px;
top: 2px;
width: 6px;
height: 6px;
width: 8px;
height: 8px;
background: #555;
border-radius: 1px;
}
@@ -2880,17 +2889,19 @@ p:last-child { margin-bottom: 0; }
}
/* Responsive scale-down */
@media (max-width: 900px) {
.ts-tv__body { width: 260px; height: 152px; }
.ts-tv__feet { width: 140px; }
.ts-stick__body { width: 56px; height: 22px; }
.ts-tv__body { width: 320px; height: 188px; }
.ts-tv__feet { width: 178px; }
.ts-stick__body { width: 68px; height: 26px; }
.ts-stage { padding-right: 72px; }
}
@media (max-width: 640px) {
.ts-tv__body { width: 200px; height: 118px; }
.ts-tv__feet { width: 110px; }
.ts-stick__body { width: 46px; height: 18px; }
.ts-stick__connector { width: 10px; height: 8px; }
.ts-stick__body::before { top: 4px; left: 6px; width: 20px; height: 8px; }
.ts-tv__body { width: 240px; height: 142px; }
.ts-tv__feet { width: 134px; }
.ts-stick__body { width: 52px; height: 20px; }
.ts-stick__connector { width: 12px; height: 10px; }
.ts-stick__body::before { top: 4px; left: 6px; width: 22px; height: 10px; }
.ts-stick__led { width: 3px; height: 3px; right: 5px; }
.ts-stage { padding-right: 56px; }
}
@media (prefers-reduced-motion: reduce) {
.ts-stage .ts-stick {
@@ -3659,7 +3670,7 @@ p:last-child { margin-bottom: 0; }
flex-direction: row;
align-items: center;
justify-content: center;
gap: 12px;
gap: 6px;
padding-bottom: 4px;
}