diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index b514e9e..a573a87 100644 --- a/theme/assets/css/main.css +++ b/theme/assets/css/main.css @@ -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; }