@charset "UTF-8"; /* ========================================================================== TWSS_styles_003.css — www.toptronicwebsites.com (part 3 of 3) Generated/Updated on: 2026-09-16T12:10:00+10:00 Build Number: 002 Version Number: (set manually by Jacques) © Copyright 1990-2026 Toptronic® Ltd, all rights reserved; no part of this document may be reproduced, modified or stored in a retrieval system, or transmitted in any form or by any means, electronic, mechanical, photocopying, recording or otherwise, without the prior written permission of Toptronic Limited. For copyright inquiries: jacques@toptronic.com Continuation from TWSS_styles_002.css WHAT IS IT The last part of the stylesheet: the big page sections (hero, dashboard mock, the demo band), the small movements that make the site feel alive, the RIGHT-TO-LEFT rules that Arabic needs, and the printing rules. WHY THE RIGHT-TO-LEFT PART MATTERS Arabic is read from the right. We never write "left" or "right" in this stylesheet: we write "start" and "end" (margin-inline-start, text-align: start, inset-inline-start). The browser then mirrors the whole layout by itself when is set — which our translation engine does the moment an Arabic visitor arrives. The only things that need a manual flip are the little CSS-drawn arrows, because a drawn arrow does not know which way the text runs. HOW THE MOVEMENT WORKS Elements marked class "reveal" start slightly transparent and 14 pixels low. A small script watches for them to scroll into view and adds class "is-in", which fades and lifts them. If JavaScript is off, nothing is ever hidden — see the ".js" guard, added by one line in each page's head. Nobody ever sees a blank page because a script failed. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE HERO (the first screen of every page) -------------------------------------------------------------------------- */ .hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(56px, 7vw, 96px) clamp(56px, 7vw, 92px); background: var(--grad-ink); } /* MEASURED, session 0093: with the old 160px top padding plus a hero drawing given 44% of the width, the home page's first button sat 194px BELOW the fold on a 1920x824 screen - a sales page whose first screen asks for nothing. The padding is smaller, the text column is wider, and the drawing is shorter. */ #hero { padding-block-start: clamp(40px, 5vw, 76px); } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bloom-a); } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--bloom-b); } .hero__title { color: var(--text-dk); margin-top: var(--sp-4); } .hero__sub { font: 400 var(--fs-lead)/1.6 var(--font-text); color: var(--muted-dk); margin-top: var(--sp-4); max-width: 62ch; } /* Two paragraphs in a hero (work and packages) must read as two voices, not as one block with no separator (audit finding 3.22). */ .hero__sub + .hero__sub { font-size: 1rem; margin-top: var(--sp-4); opacity: .92; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--sp-6); } .hero--page { padding-block: clamp(48px, 6vw, 80px); } .hero__inner { position: relative; } @media (min-width: 900px) { .hero__inner { display: grid; grid-template-columns: 1.18fr .82fr; gap: clamp(28px, 3.4vw, 56px); align-items: center; } } .hero__stats { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 44px); margin-top: clamp(32px, 4vw, 48px); padding-top: var(--sp-6); border-top: 1px solid rgba(244, 246, 250, .10); } .stat { min-width: 120px; } .stat__num { display: block; font: 700 var(--fs-stat)/1 var(--font-display); color: var(--text-dk); font-variant-numeric: tabular-nums; unicode-bidi: isolate; } .stat__num::before { content: ""; display: block; width: 24px; height: 2px; margin-bottom: 14px; background: var(--signal); } .stat__label { display: block; margin-top: 6px; font: 500 .8125rem/1.5 var(--font-text); color: var(--muted-dk); } /* The hero illustration: an isometric lattice drawn with SVG lines (no image file, no filter, no blur — it stays sharp on every screen and weighs bytes). */ .hero__art { position: relative; aspect-ratio: 5/4; min-height: 280px; max-height: 400px; } .hero__art::before { content: ""; position: absolute; inset: -12%; background: var(--bloom-a); } .hero__art::after { content: ""; position: absolute; inset: -12%; background: var(--bloom-b); } .hero__art svg { position: relative; width: 100%; height: 100%; } /* On a narrow screen the width must come from the column, never from a minimum height: aspect-ratio would turn a minimum HEIGHT into a width wider than the phone, and the drawing would be cut off at the sides. */ @media (max-width: 899px) { .hero__art { aspect-ratio: 16/9; min-height: 0; } } /* -------------------------------------------------------------------------- 2. THE DASHBOARD MOCK (the "not a web page, a business solution" section) This is a drawing made of HTML, not a picture of somebody else's software. The twelve bars in the chart are given their heights inline in the markup. -------------------------------------------------------------------------- */ .shot__body { display: grid; gap: var(--sp-6); } .shot__body .card__list { display: flex; align-items: flex-end; gap: 6px; height: 140px; list-style: none; padding: 0; margin-top: var(--sp-5); } .shot__body .card__list span[style] { display: block; flex: 0 0 calc((100% - 66px) / 12); min-width: 4px; background: linear-gradient(180deg, rgba(122, 150, 255, .95), rgba(37, 71, 208, .35)); border-radius: 4px 4px 2px 2px; } .shot__body .stat__num::before { display: none; } .shot__body .stat { min-width: 0; } .shot__body .stat__num { font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--text); } .sec--ink .shot__body .stat__num { color: var(--text-dk); } .shot__body .stat__label { font-size: var(--fs-micro); } .shot__body .card { padding: 20px; } .shot__body .table th, .shot__body .table td { padding: 9px 10px; font-size: .8125rem; } .shot__body .card__title { font-size: .9375rem; } /* Inside the drawn dashboard the two lower panels STACK at every width. The mock sits in a column about 450px wide whatever the screen size (the content column caps at 1180px), so side by side left the chart 175px wide with 9px bars. Stacked, the chart gets the full ~420px and reads as a chart. */ .shot__body .grid--2 { grid-template-columns: 1fr; } /* -------------------------------------------------------------------------- 3. SMALL SECTION HELPERS -------------------------------------------------------------------------- */ .grid--2 .card + .card { margin-top: 0; } /* These bullets are the text column's list. The rules are written with the id so they beat the generic .card__list, and then RE-OVERRIDDEN for the drawn dashboard, whose chart is also a .card__list and must stay a row of bars (audit finding 3.2: without the override the chart became a vertical list). */ #system .card__list { margin-top: var(--sp-6); display: grid; gap: 12px; max-width: 62ch; } #system .card__list li { font-size: var(--fs-body); color: var(--muted-dk); } #system .card__list li::before { border-color: var(--teal); top: .55em; } #system .shot__body .card__list { display: flex; align-items: flex-end; gap: 6px; height: 140px; max-width: none; margin-top: var(--sp-5); } #proof .stat__num, #proof .stat, #proof .stat__label { color: var(--text); } #proof .stat { min-width: 150px; } #packages .plan__price { font-size: clamp(1.75rem, 3.2vw, 2.5rem); } /* On the home page the plans sit on a DARK band, and ".sec--ink .plan" is a more specific selector than ".plan--featured", so the recommended package looked exactly like the other two (audit finding 3.6). This puts the emphasis back. */ #packages .plan--featured { background: var(--ink); border-color: rgba(122, 150, 255, .42); box-shadow: var(--glow-d); } #packages .plan--featured .plan__name { color: var(--text-dk); } #work .shot + .shot { margin-top: 0; } .band + .site-footer { border-top: 0; } /* A link to #services must not put the heading underneath the sticky header. */ .sec, .hero, .band { scroll-margin-top: calc(var(--header-h) + 16px); } /* -------------------------------------------------------------------------- 4. THE SMALL MOVEMENTS -------------------------------------------------------------------------- */ .js .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms); } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } .marquee__track { animation: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* -------------------------------------------------------------------------- 5. RIGHT-TO-LEFT (Arabic) The layout mirrors itself because everything above uses start/end. Below, only the drawn arrows are flipped, the domain strip runs the other way, and letter-spacing is switched off — Arabic letters JOIN each other and extra spacing breaks the joins, which reads as a spelling error to an Arabic speaker. The same switch-off helps Chinese, where tracking looks broken. -------------------------------------------------------------------------- */ html[lang="ar"] body { --font-display: "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", system-ui, sans-serif; --font-text: "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", system-ui, sans-serif; line-height: 1.9; } html[lang^="zh"] body { --font-display: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif; --font-text: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", system-ui, sans-serif; line-height: 1.85; } html[lang="ar"] *, html[lang^="zh"] * { letter-spacing: normal !important; } [dir="rtl"] .card__cta::after, [dir="rtl"] .shot__link::after { transform: translateY(-2px) rotate(135deg); } [dir="rtl"] .lang::after { transform: rotate(135deg); } [dir="rtl"] .marquee__track { animation-direction: reverse; } [dir="rtl"] .step { padding-inline-start: 72px; padding-inline-end: 0; } [dir="rtl"] .faq__q { padding: 20px 0 20px 44px; } /* -------------------------------------------------------------------------- 6. PRINTING One clean page of content per sheet: the navigation, the moving strip and the call-to-action band are removed, and every link prints the address it points to, because a printed page cannot be clicked. -------------------------------------------------------------------------- */ @media print { .site-header, .site-footer, .band, .marquee, .hero__art, .nav-toggle, .lang { display: none !important; } .sec, .hero, .sec--ink, .sec--tint { background: #fff !important; color: #000 !important; padding-block: 16px; } .sec--ink .h2, .sec--ink .p, .sec--ink .lead, .hero__title, .hero__sub { color: #000 !important; } .hero { padding-block: 24px; } .card, .plan, .shot__frame { box-shadow: none; border-color: #999; break-inside: avoid; } .plan--featured { transform: none; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #444; } .faq__a { display: block; } } /* End of TWSS_styles_003.css — the stylesheet is complete. */