@charset "UTF-8"; /* ========================================================================== Orasoft — site.css Single stylesheet. No build step, no framework. Layout uses CSS *logical properties* everywhere (margin-inline-start, padding-inline, inset-inline, border-inline-start …) and never left/right. That is what lets the Urdu toggle flip and have the whole site mirror correctly with zero extra CSS. Sections 01 Reset & base 02 Design tokens (light / dark) 03 Typography 04 Layout primitives 05 Buttons & links 06 Header & navigation 07 Hero 08 Sections, cards, lists 09 Forms 10 Footer 11 Motion & reveal 12 Urdu / RTL 13 Print ========================================================================== */ /* ========================================================================== 01 Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: 6rem; /* clears the sticky header on anchor jumps */ } body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; } ul[class], ol[class] { padding: 0; list-style: none; } img, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; } a { color: inherit; } :target { scroll-margin-block-start: 6rem; } /* ========================================================================== 02 Design tokens -------------------------------------------------------------------------- Red is the only chromatic colour in the system. It is reserved for headings, rules and the single primary button — never for body copy. Both themes clear WCAG AA: #D32027 on #FFFFFF ~5.4:1 #FF4A52 on #0B0B0D ~6.5:1 ========================================================================== */ :root { /* Surfaces & ink */ --bg: #FFFFFF; --surface: #F7F7F8; --surface-2: #EFEFF1; --text: #16161A; --muted: #5C5C66; --rule: #E4E4E8; --rule-strong: #C9C9D1; /* Brand */ --red: #D32027; --red-hover: #B01319; --red-soft: rgba(211, 32, 39, 0.08); --red-line: rgba(211, 32, 39, 0.38); /* Logo colours, taken from the Orasoft mark. These belong to the logo only — the rest of the site stays on --red. */ --brand-blue: #0089CF; --brand-orange: #F9A600; --brand-flame: #F0330A; /* Inverted block (dark band inside a light page) */ --invert-bg: #16161A; --invert-text: #FFFFFF; --invert-muted: #A0A0AB; --invert-rule: rgba(255, 255, 255, 0.14); /* Elevation */ --shadow-sm: 0 1px 2px rgba(16, 16, 22, 0.05); --shadow-md: 0 4px 20px -6px rgba(16, 16, 22, 0.14); --shadow-lg: 0 24px 60px -20px rgba(16, 16, 22, 0.22); /* Type */ --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", "Segoe UI", serif; /* Rhythm */ --wrap: 1200px; --gutter: clamp(1.25rem, 5vw, 3rem); --section-y: clamp(4rem, 9vw, 7.5rem); --radius: 4px; /* deliberately tight — soft pills read as template */ --radius-lg: 8px; /* Motion */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.5s; color-scheme: light; } [data-theme="dark"] { --bg: #0B0B0D; --surface: #141417; --surface-2: #1C1C21; --text: #EDEDF0; --muted: #9A9AA5; --rule: #26262C; --rule-strong: #3A3A44; --red: #FF4A52; --red-hover: #FF6B71; --red-soft: rgba(255, 74, 82, 0.12); --red-line: rgba(255, 74, 82, 0.34); /* The brand blue is too dark to read on a near-black background, so the wordmark lifts to a lighter tint of the same hue in dark mode. */ --brand-blue: #3EAEE8; --invert-bg: #F7F7F8; --invert-text: #0B0B0D; --invert-muted: #5C5C66; --invert-rule: rgba(0, 0, 0, 0.14); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 4px 20px -6px rgba(0, 0, 0, 0.6); --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, 0.8); color-scheme: dark; } /* ========================================================================== 03 Typography ========================================================================== */ body { background: var(--bg); color: var(--text); font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.7; font-weight: 400; letter-spacing: -0.005em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color 0.3s var(--ease), color 0.3s var(--ease); } h1, h2, h3, h4 { font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; color: var(--red); } /* Capped at 4.5rem rather than something larger: the hero headline carries a rotating word on its own line, and the longest word has to fit the column at every width. hero.js shrinks the word further if it ever cannot. */ .display { font-size: clamp(2.4rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.045em; } h1 { font-size: clamp(2.25rem, 5.2vw, 3.75rem); } h2 { font-size: clamp(1.75rem, 3.6vw, 2.75rem); } h3 { font-size: clamp(1.15rem, 1.6vw, 1.375rem); letter-spacing: -0.02em; } h4 { font-size: 1rem; letter-spacing: -0.01em; } p { text-wrap: pretty; } /* Small uppercase label that opens most sections */ .eyebrow { display: flex; align-items: center; gap: 0.75rem; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-block-end: 1.25rem; } .eyebrow::before { content: ""; inline-size: 1.75rem; block-size: 2px; background: var(--red); flex: none; } .eyebrow--plain::before { display: none; } /* Section counter, e.g. 01 / 02 / 03 */ .tag-num { font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600; color: var(--red); letter-spacing: 0.08em; } .lede { font-size: clamp(1.0625rem, 1.5vw, 1.25rem); line-height: 1.65; color: var(--muted); max-inline-size: 62ch; } .muted { color: var(--muted); } .measure { max-inline-size: 66ch; } .measure-narrow { max-inline-size: 46ch; } strong, b { font-weight: 700; color: var(--text); } ::selection { background: var(--red); color: #fff; } /* ========================================================================== 04 Layout primitives ========================================================================== */ .wrap { inline-size: 100%; max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(3rem, 6vw, 5rem); } .section--surface { background: var(--surface); } .section--ruled { border-block-start: 1px solid var(--rule); } .stack > * + * { margin-block-start: 1rem; } .stack-sm > * + * { margin-block-start: 0.5rem; } .stack-lg > * + * { margin-block-start: 2rem; } .grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); } /* Grid and flex items default to min-width:auto, which lets wide content (long words, tables, code) push a track past its share of the row. */ .grid > *, .split > *, .hero-inner > * { min-inline-size: 0; } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } /* Editorial split: heading column + content column */ .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (min-width: 62rem) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .split--sticky > :first-child { position: sticky; inset-block-start: 7rem; } } .section-head { margin-block-end: clamp(2.5rem, 5vw, 4rem); } .section-head .lede { margin-block-start: 1.25rem; } .hr { block-size: 1px; background: var(--rule); border: 0; margin-block: clamp(2.5rem, 5vw, 4rem); } .center { text-align: center; } .center .lede, .center .measure { margin-inline: auto; } /* Inline icon sprite — definitions parked at the top of . Inlined rather than fetched so icons never flash in or 404. */ .sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; } /* Skip link */ .skip { position: absolute; inset-inline-start: 0.5rem; inset-block-start: -100px; z-index: 200; background: var(--red); color: #fff; padding: 0.75rem 1.25rem; font-weight: 700; border-radius: var(--radius); transition: inset-block-start 0.2s var(--ease); } .skip:focus { inset-block-start: 0.5rem; } /* ========================================================================== 05 Buttons & links ========================================================================== */ .btn { --btn-bg: var(--red); --btn-fg: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.9rem 1.6rem; background: var(--btn-bg); color: var(--btn-fg); font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; border-radius: var(--radius); cursor: pointer; white-space: nowrap; transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s var(--ease); } .btn:hover { --btn-bg: var(--red-hover); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn:active { transform: translateY(0); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--text); border: 1px solid var(--rule-strong); } .btn--ghost:hover { --btn-bg: transparent; --btn-fg: var(--red); border-color: var(--red); box-shadow: none; } .btn--wa { --btn-bg: #1FA855; --btn-fg: #fff; } .btn--wa:hover { --btn-bg: #178a45; } .btn--lg { padding: 1.05rem 2rem; font-size: 1rem; } .btn--full { inline-size: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; align-items: center; } /* Text link with a red rule that grows on hover */ .link { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--red); font-weight: 700; font-size: 0.9375rem; text-decoration: none; padding-block-end: 2px; background-image: linear-gradient(var(--red), var(--red)); background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size 0.35s var(--ease); } .link:hover { background-size: 100% 1.5px; } /* Arrow glyph inside links/buttons — mirrored under RTL */ .ico-arrow { inline-size: 1em; block-size: 1em; flex: none; transition: transform 0.25s var(--ease); } .link:hover .ico-arrow, .btn:hover .ico-arrow { transform: translateX(3px); } /* Focus: one consistent, clearly visible ring everywhere */ :focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; } :focus:not(:focus-visible) { outline: none; } /* ========================================================================== 06 Header & navigation ========================================================================== */ .site-header { position: sticky; inset-block-start: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-block-end: 1px solid transparent; transition: border-color 0.3s var(--ease), background-color 0.3s var(--ease); } .site-header.is-stuck { border-block-end-color: var(--rule); } .nav { display: flex; align-items: center; gap: 1.5rem; block-size: 4.5rem; } /* Logo — the Orasoft mark inlined as SVG beside the wordmark, so it stays crisp at any size and needs no image request. The mark keeps its own brand colours in both themes; only the wordmark shifts for contrast. */ .logo { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; flex: none; } .logo-mark { inline-size: 2rem; block-size: 2rem; flex: none; } .logo-word { font-size: 1.2rem; font-weight: 800; letter-spacing: 0.01em; line-height: 1; color: var(--brand-blue); } /* Stacked lockup in the footer, matching the printed logo */ .footer-brand .logo { gap: 0.7rem; } .footer-brand .logo-mark { inline-size: 2.5rem; block-size: 2.5rem; } .footer-brand .logo-word { font-size: 1.4rem; } .brand-tag { margin-block-start: 0.5rem; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; color: var(--muted); } .nav-links { display: flex; align-items: center; gap: 0.25rem; margin-inline-start: auto; } .nav-links a { position: relative; padding: 0.5rem 0.875rem; font-size: 0.9375rem; font-weight: 600; color: var(--muted); text-decoration: none; border-radius: var(--radius); transition: color 0.2s var(--ease); } .nav-links a:hover { color: var(--text); } .nav-links a[aria-current="page"] { color: var(--text); } .nav-links a[aria-current="page"]::after { content: ""; position: absolute; inset-block-end: 0.15rem; inset-inline: 0.875rem; block-size: 2px; background: var(--red); } .nav-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; } /* Icon buttons: theme + language */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.375rem; block-size: 2.375rem; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--muted); cursor: pointer; transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease); } .icon-btn:hover { color: var(--red); border-color: var(--red); } .icon-btn svg { inline-size: 1.125rem; block-size: 1.125rem; } .lang-btn { inline-size: auto; padding-inline: 0.75rem; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; gap: 0.35rem; } /* Sun shows in light mode, moon in dark — only ever one visible */ .icon-sun { display: none; } [data-theme="dark"] .icon-sun { display: block; } [data-theme="dark"] .icon-moon { display: none; } .nav-cta { display: none; } .nav-toggle { display: none; } @media (min-width: 60rem) { .nav-cta { display: inline-flex; } /* The quote button inside the drawer is for small screens only */ .nav-links .btn { display: none; } } @media (max-width: 59.999rem) { /* IMPORTANT: no backdrop-filter at this breakpoint. An ancestor with backdrop-filter (or filter/transform) becomes the containing block for its position:fixed descendants — which would make the drawer below resolve its insets against this 4.5rem-tall header instead of the viewport, collapsing it to zero height behind the page. A solid background is also cheaper to composite while scrolling. */ .site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.375rem; block-size: 2.375rem; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--text); cursor: pointer; } .nav-toggle svg { inline-size: 1.25rem; block-size: 1.25rem; } .nav-toggle .ico-close { display: none; } .nav-toggle[aria-expanded="true"] .ico-close { display: block; } .nav-toggle[aria-expanded="true"] .ico-menu { display: none; } .nav-links { position: fixed; inset-block-start: 4.5rem; inset-inline: 0; inset-block-end: 0; z-index: 99; /* above the floating WhatsApp button (90) */ flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 1rem var(--gutter) 2rem; background: var(--bg); border-block-start: 1px solid var(--rule); overflow-y: auto; overscroll-behavior: contain; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s; } .nav-links.is-open { opacity: 1; visibility: visible; transform: none; } .nav-links a { padding: 1rem 0; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); border-block-end: 1px solid var(--rule); border-radius: 0; } .nav-links a[aria-current="page"] { color: var(--red); } .nav-links a[aria-current="page"]::after { display: none; } .nav-links .btn { margin-block-start: 1.5rem; border-block-end: 0; color: #fff; justify-content: center; } body.nav-open { overflow: hidden; } } /* ========================================================================== 07 Hero -------------------------------------------------------------------------- Layered: drawing SVG signal lines behind, headline with a rotating word, and a floating "live" product card. All motion is opt-out via prefers-reduced-motion (see section 11). ========================================================================== */ .hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(4rem, 9vw, 7rem); border-block-end: 1px solid var(--rule); } /* Faint grid — gives the page a drafting-table feel rather than a gradient */ .hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px), linear-gradient(to bottom, var(--rule) 1px, transparent 1px); background-size: 5.5rem 5.5rem; opacity: 0.5; -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%); mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%); pointer-events: none; } .hero-lines { position: absolute; inset-block-start: -10%; inset-inline-end: -12%; inline-size: min(58rem, 92%); block-size: auto; pointer-events: none; opacity: 0.85; z-index: 0; } .hero-lines path { stroke: var(--red-line); } .hero-lines circle { fill: var(--red); } /* The travelling dash chased along each wire by hero.js. --len is set in JS from path.getTotalLength(), which CSS cannot compute on its own. */ .hero-lines path[data-pulse] { stroke: var(--red); stroke-linecap: round; } @keyframes dash-travel { from { stroke-dashoffset: var(--len, 0); } to { stroke-dashoffset: 0; } } .hero-inner { position: relative; z-index: 1; display: grid; /* minmax(0, 1fr) rather than the default `auto`: an auto-sized grid track adopts its content's min-content width, so one long unbreakable headline word would widen the whole column and push the layout off-screen. */ grid-template-columns: minmax(0, 1fr); gap: clamp(3rem, 6vw, 4.5rem); align-items: center; } @media (min-width: 64rem) { /* The copy column is deliberately the wider one — the headline needs the room more than the product card does. */ .hero-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } } .hero-badge { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.85rem 0.4rem 0.55rem; background: var(--red-soft); border: 1px solid var(--red-line); border-radius: 100px; font-size: 0.8125rem; font-weight: 700; color: var(--red); margin-block-end: 1.75rem; } .hero-badge .dot { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--red); flex: none; animation: pulse 2.4s var(--ease) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } } /* The rotating word sits on its own line in its own inline box, so swapping the word never reflows the rest of the headline. max-inline-size is a hard stop; hero.js scales the word down before it ever gets there. */ .rotator { position: relative; display: inline-block; vertical-align: bottom; min-inline-size: 1ch; max-inline-size: 100%; color: var(--red); white-space: nowrap; transition: min-inline-size 0.45s var(--ease); } .rotator-word { display: inline-block; will-change: transform, opacity; } .rotator-word.is-out { animation: word-out 0.32s var(--ease) forwards; } .rotator-word.is-in { animation: word-in 0.42s var(--ease) backwards; } @keyframes word-out { to { transform: translateY(-0.5em) rotateX(35deg); opacity: 0; } } @keyframes word-in { from { transform: translateY(0.55em) rotateX(-35deg); opacity: 0; } } /* Red rule that re-draws under the rotating word on each change */ .rotator-rule { position: absolute; inset-block-end: 0.02em; inset-inline-start: 0; block-size: 0.075em; min-block-size: 3px; background: var(--red); transform-origin: inline-start; animation: rule-draw 0.55s var(--ease); } @keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } } .hero-copy .lede { margin-block-start: 1.75rem; } .hero-copy .btn-row { margin-block-start: 2.5rem; } .hero-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin-block-start: 2.75rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--rule); font-size: 0.875rem; color: var(--muted); } .hero-meta span { display: inline-flex; align-items: center; gap: 0.5rem; } .hero-meta svg { inline-size: 1rem; block-size: 1rem; color: var(--red); flex: none; } /* --- Hero product card ---------------------------------------------------- */ .hero-visual { position: relative; perspective: 1400px; } .hero-card { position: relative; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; will-change: transform; transition: transform 0.4s var(--ease); } .hero-card-bar { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-block-end: 1px solid var(--rule); background: var(--surface); } .hero-card-bar i { inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--rule-strong); } .hero-card-bar i:first-child { background: var(--red); } .hero-card-bar em { margin-inline-start: auto; font-style: normal; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); } .hero-card-body { padding: 1.25rem; } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-block-end: 1.25rem; } .stat { padding: 0.875rem; background: var(--surface); border-radius: var(--radius); border-inline-start: 2px solid var(--red); } .stat dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-block-end: 0.35rem; } .stat dd { margin: 0; font-size: clamp(1.05rem, 2.4vw, 1.375rem); font-weight: 800; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: tabular-nums; } /* Simple bar chart drawn with divs — no chart library */ .spark { display: flex; align-items: flex-end; gap: 0.3rem; block-size: 4.5rem; padding: 0.5rem 0; margin-block-end: 1.25rem; } .spark i { flex: 1; background: var(--surface-2); border-radius: 2px 2px 0 0; block-size: var(--h, 30%); transform-origin: bottom; animation: bar-rise 0.7s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 60ms); } .spark i:nth-last-child(-n + 3) { background: var(--red); } @keyframes bar-rise { from { transform: scaleY(0); } } /* WhatsApp bubbles that type in on a loop */ .chat { border-block-start: 1px solid var(--rule); padding-block-start: 1rem; display: flex; flex-direction: column; gap: 0.5rem; min-block-size: 6.5rem; } .bubble { max-inline-size: 85%; padding: 0.55rem 0.8rem; border-radius: 10px; font-size: 0.8125rem; line-height: 1.5; background: var(--surface-2); color: var(--text); opacity: 0; transform: translateY(6px); } .bubble.is-shown { animation: bubble-in 0.4s var(--ease) forwards; } .bubble--out { margin-inline-start: auto; background: #1FA855; color: #fff; } .bubble time { display: block; margin-block-start: 0.2rem; font-size: 0.625rem; opacity: 0.7; } @keyframes bubble-in { to { opacity: 1; transform: none; } } .typing { display: inline-flex; gap: 0.2rem; align-items: center; padding: 0.6rem 0.8rem; background: var(--surface-2); border-radius: 10px; align-self: flex-start; } .typing i { inline-size: 0.3rem; block-size: 0.3rem; border-radius: 50%; background: var(--muted); animation: typing 1.2s infinite; } .typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; } @keyframes typing { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } } /* Floating caption chip clipped to the card's corner */ .hero-chip { position: absolute; inset-block-end: -0.9rem; inset-inline-start: -0.9rem; display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; background: var(--invert-bg); color: var(--invert-text); border-radius: var(--radius); font-size: 0.8125rem; font-weight: 700; box-shadow: var(--shadow-md); white-space: nowrap; } .hero-chip svg { inline-size: 1rem; block-size: 1rem; color: var(--red); flex: none; } @media (max-width: 30rem) { .hero-chip { display: none; } } /* Layers the pointer-parallax script nudges */ .parallax { transition: transform 0.35s var(--ease); } /* ========================================================================== 08 Sections, cards, lists ========================================================================== */ /* --- Service / feature card ---------------------------------------------- */ .card { position: relative; display: flex; flex-direction: column; padding: clamp(1.5rem, 3vw, 2rem); background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } /* Red rule that wipes across the top edge on hover */ .card::after { content: ""; position: absolute; inset-block-start: -1px; inset-inline: -1px; block-size: 2px; background: var(--red); transform: scaleX(0); transform-origin: inline-start; transition: transform 0.4s var(--ease); } .card:hover::after { transform: scaleX(1); } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--rule-strong); } .card-icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 2.75rem; block-size: 2.75rem; border-radius: var(--radius); background: var(--red-soft); color: var(--red); margin-block-end: 1.25rem; flex: none; } .card-icon svg { inline-size: 1.375rem; block-size: 1.375rem; } .card h3 { margin-block-end: 0.75rem; } .card p { color: var(--muted); font-size: 0.9375rem; } .card .link { margin-block-start: auto; padding-block-start: 1.25rem; } .card--surface { background: var(--surface); border-color: transparent; } .card--flat:hover { transform: none; box-shadow: none; } .card--flat::after { display: none; } /* --- Numbered editorial row (process, services list) ---------------------- */ .rows { border-block-start: 1px solid var(--rule); } .row { display: grid; gap: 0.75rem 2rem; padding-block: clamp(1.75rem, 3.5vw, 2.5rem); border-block-end: 1px solid var(--rule); align-items: start; } @media (min-width: 48rem) { .row { grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 1.35fr); } } .row-num { font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600; color: var(--red); padding-block-start: 0.35rem; } .row h3 { margin: 0; } .row p { color: var(--muted); margin: 0; } .row-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 1rem; } .row-list li { font-size: 0.8125rem; font-weight: 600; color: var(--muted); padding: 0.25rem 0.65rem; background: var(--surface); border-radius: 100px; } /* --- Checkmark feature list ---------------------------------------------- */ .checks { display: grid; gap: 0.75rem; } .checks li { position: relative; padding-inline-start: 1.9rem; font-size: 0.9375rem; color: var(--muted); line-height: 1.6; } .checks li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.5em; inline-size: 0.85rem; block-size: 0.5rem; border-inline-start: 2px solid var(--red); border-block-end: 2px solid var(--red); transform: rotate(-45deg); } /* Under RTL the tick would point the wrong way — mirror it back */ [dir="rtl"] .checks li::before { transform: rotate(-45deg) scaleX(1); } .checks--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); } /* --- Inverted band -------------------------------------------------------- */ .band { background: var(--invert-bg); color: var(--invert-text); } .band h2, .band h3 { color: var(--invert-text); } .band .lede, .band p { color: var(--invert-muted); } .band .eyebrow { color: var(--invert-muted); } .band .hr { background: var(--invert-rule); } .band .btn--ghost { --btn-fg: var(--invert-text); border-color: var(--invert-rule); } .band .btn--ghost:hover { --btn-fg: var(--red); border-color: var(--red); } /* Stat strip inside the band */ .figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: 1px; background: var(--invert-rule); border: 1px solid var(--invert-rule); border-radius: var(--radius); overflow: hidden; } .figures > div { background: var(--invert-bg); padding: clamp(1.25rem, 3vw, 2rem); } .figures dt { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--invert-muted); margin-block-end: 0.5rem; } .figures dd { margin: 0; font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.04em; color: var(--red); line-height: 1; font-variant-numeric: tabular-nums; } /* --- Case study card ------------------------------------------------------ */ .case { display: flex; flex-direction: column; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); } .case:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--rule-strong); } .case-top { padding: 1.5rem; background: var(--surface); border-block-end: 1px solid var(--rule); display: flex; align-items: center; gap: 1rem; } .case-top .card-icon { margin: 0; background: var(--bg); } .case-sector { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); } .case-top h3 { margin-block-start: 0.15rem; font-size: 1.0625rem; } .case-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; flex: 1; } .case-body > p { color: var(--muted); font-size: 0.9375rem; margin: 0; } .case-result { margin-block-start: auto; padding-block-start: 1.25rem; border-block-start: 1px solid var(--rule); font-size: 0.875rem; color: var(--muted); } .case-result b { color: var(--red); display: block; font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; margin-block-end: 0.35rem; } /* --- Spec table ----------------------------------------------------------- */ .table-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); -webkit-overflow-scrolling: touch; } table { inline-size: 100%; border-collapse: collapse; font-size: 0.9375rem; min-inline-size: 32rem; } th, td { padding: 0.9rem 1.1rem; text-align: start; border-block-end: 1px solid var(--rule); vertical-align: top; } thead th { background: var(--surface); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } tbody tr:last-child td { border-block-end: 0; } tbody th { font-weight: 700; color: var(--text); white-space: nowrap; } td { color: var(--muted); } /* --- Product block -------------------------------------------------------- */ .product { display: grid; gap: clamp(1.75rem, 4vw, 3rem); padding-block: clamp(2.5rem, 5vw, 4rem); border-block-end: 1px solid var(--rule); align-items: start; } .product:last-child { border-block-end: 0; } @media (min-width: 60rem) { .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); } } .product-badge { display: inline-block; padding: 0.2rem 0.6rem; background: var(--red-soft); color: var(--red); border-radius: 100px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-block-end: 1rem; } /* --- Accordion (FAQ) ------------------------------------------------------ */ .faq { border-block-start: 1px solid var(--rule); } .faq details { border-block-end: 1px solid var(--rule); } .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.35rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; cursor: pointer; list-style: none; color: var(--text); transition: color 0.2s var(--ease); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--red); } .faq summary::after { content: ""; flex: none; inline-size: 0.65rem; block-size: 0.65rem; border-inline-end: 2px solid var(--red); border-block-end: 2px solid var(--red); transform: rotate(45deg) translate(-0.15rem, -0.15rem); transition: transform 0.3s var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg) translate(-0.15rem, -0.15rem); } .faq details > div { padding-block-end: 1.5rem; color: var(--muted); max-inline-size: 68ch; font-size: 0.9375rem; } /* --- Contact / info tiles ------------------------------------------------- */ .info-list { display: grid; gap: 1.5rem; } .info { display: flex; gap: 1rem; align-items: flex-start; } .info .card-icon { margin: 0; inline-size: 2.5rem; block-size: 2.5rem; } .info dt { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-block-end: 0.2rem; } .info dd { margin: 0; font-weight: 700; letter-spacing: -0.015em; } .info dd a { text-decoration: none; } .info dd a:hover { color: var(--red); } .info dd small { display: block; font-weight: 400; font-size: 0.875rem; color: var(--muted); margin-block-start: 0.15rem; } /* --- Map ------------------------------------------------------------------ */ .map { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--surface); aspect-ratio: 16 / 10; } .map iframe { inline-size: 100%; block-size: 100%; border: 0; display: block; } /* Dark mode: soften the very bright default map tiles */ [data-theme="dark"] .map iframe { filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.9); } /* --- CTA panel ------------------------------------------------------------ */ .cta-panel { position: relative; overflow: hidden; padding: clamp(2.5rem, 6vw, 4.5rem); background: var(--invert-bg); color: var(--invert-text); border-radius: var(--radius-lg); text-align: center; } .cta-panel h2 { color: var(--invert-text); } .cta-panel p { color: var(--invert-muted); margin-inline: auto; } .cta-panel .btn-row { justify-content: center; margin-block-start: 2rem; } .cta-panel::before { content: ""; position: absolute; inset-block-start: 0; inset-inline: 0; block-size: 3px; background: var(--red); } /* --- Page header (inner pages) -------------------------------------------- */ .page-head { position: relative; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem); border-block-end: 1px solid var(--rule); overflow: hidden; } .page-head::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px), linear-gradient(to bottom, var(--rule) 1px, transparent 1px); background-size: 5.5rem 5.5rem; opacity: 0.45; -webkit-mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 10%, transparent 75%); mask-image: radial-gradient(ellipse 70% 100% at 50% 0%, #000 10%, transparent 75%); pointer-events: none; } .page-head > .wrap { position: relative; z-index: 1; } .crumbs { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--muted); margin-block-end: 1.5rem; flex-wrap: wrap; } .crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--red); } .crumbs span[aria-hidden] { color: var(--rule-strong); } /* ========================================================================== 09 Forms ========================================================================== */ .form { display: grid; gap: 1.15rem; } .field { display: grid; gap: 0.45rem; } .field label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; color: var(--text); } .field label .req { color: var(--red); } .field input, .field textarea, .field select { inline-size: 100%; padding: 0.8rem 0.95rem; background: var(--bg); color: var(--text); border: 1px solid var(--rule-strong); border-radius: var(--radius); font-size: 0.9375rem; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .field textarea { resize: vertical; min-block-size: 8rem; line-height: 1.6; } .field select { appearance: none; /* Chevron drawn as a background image; positioned with a logical inset so it moves to the left edge automatically under RTL. */ background-image: linear-gradient(45deg, transparent 49%, currentColor 50%, currentColor 60%, transparent 61%), linear-gradient(-45deg, transparent 49%, currentColor 50%, currentColor 60%, transparent 61%); background-size: 0.5rem 0.5rem; background-repeat: no-repeat; background-position: right 1.1rem center, right 0.75rem center; padding-inline-end: 2.5rem; } [dir="rtl"] .field select { background-position: left 0.75rem center, left 1.1rem center; padding-inline-end: 0.95rem; padding-inline-start: 2.5rem; } .field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); } .field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.7; } .field-row { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); } .field-hint { font-size: 0.8125rem; color: var(--muted); } .field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--red); } .field-error { font-size: 0.8125rem; font-weight: 600; color: var(--red); min-block-size: 0; } /* Honeypot — off-screen, hidden from AT, but still fillable by naive bots */ .hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .form-status { padding: 1rem 1.15rem; border-radius: var(--radius); font-size: 0.9375rem; font-weight: 600; border-inline-start: 3px solid; } .form-status[data-state="error"] { background: var(--red-soft); border-color: var(--red); color: var(--red); } .form-status[data-state="success"] { background: rgba(31, 168, 85, 0.1); border-color: #1FA855; color: #157f3f; } [data-theme="dark"] .form-status[data-state="success"] { color: #4ADE80; } .form-status[hidden] { display: none; } .form-sent { display: grid; gap: 1.25rem; justify-items: start; } .form-sent[hidden] { display: none; } .btn[aria-busy="true"] { opacity: 0.65; pointer-events: none; } .spinner { inline-size: 1rem; block-size: 1rem; border: 2px solid currentColor; border-block-start-color: transparent; border-radius: 50%; animation: spin 0.7s linear infinite; flex: none; } .spinner[hidden] { display: none; } @keyframes spin { to { transform: rotate(360deg); } } /* ========================================================================== 10 Footer ========================================================================== */ .site-footer { background: var(--surface); border-block-start: 1px solid var(--rule); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; } .footer-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); padding-block-end: 2.5rem; border-block-end: 1px solid var(--rule); } .footer-brand { max-inline-size: 26rem; } .footer-brand p { color: var(--muted); font-size: 0.9375rem; margin-block-start: 1rem; } @media (min-width: 62rem) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.2fr; } } .footer-col h4 { color: var(--text); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-block-end: 1.15rem; } .footer-col ul { display: grid; gap: 0.6rem; } .footer-col a { font-size: 0.9375rem; color: var(--muted); text-decoration: none; transition: color 0.2s var(--ease); } .footer-col a:hover { color: var(--red); } .footer-bottom { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; padding-block-start: 1.75rem; font-size: 0.8125rem; color: var(--muted); } .footer-bottom p { margin: 0; } .footer-bottom a { color: var(--muted); text-decoration: none; } .footer-bottom a:hover { color: var(--red); } /* Floating WhatsApp button */ .wa-float { position: fixed; inset-block-end: 1.25rem; inset-inline-end: 1.25rem; z-index: 90; display: inline-flex; align-items: center; justify-content: center; inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%; background: #1FA855; color: #fff; box-shadow: var(--shadow-lg); transition: transform 0.25s var(--ease), background-color 0.2s var(--ease); } .wa-float:hover { transform: scale(1.08); background: #178a45; } .wa-float svg { inline-size: 1.6rem; block-size: 1.6rem; } @media print { .wa-float { display: none; } } /* ========================================================================== 11 Motion & reveal ========================================================================== */ [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); transition-delay: var(--reveal-delay, 0ms); } [data-reveal].is-revealed { opacity: 1; transform: none; } /* Without JS nothing should ever stay invisible */ .no-js [data-reveal] { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- Reduced motion: strip every animation and transition to a static frame. The hero still reads correctly — the rotating word simply holds on one value, the rule is drawn, the bars are at full height, bubbles visible. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-reveal] { opacity: 1; transform: none; } .hero-card, .parallax { transform: none !important; } .bubble { opacity: 1; transform: none; } .typing { display: none; } .hero-badge .dot { animation: none; } } /* ========================================================================== 12 Urdu / RTL -------------------------------------------------------------------------- Because the layout is written in logical properties, mirroring is almost free. What is left is the Nastaliq face (which needs far more leading than a Latin face) and the handful of glyphs that must flip. ========================================================================== */ [lang="ur"] body, [lang="ur"] .lede, [lang="ur"] p, [lang="ur"] li, [lang="ur"] label, [lang="ur"] .btn, [lang="ur"] .nav-links a, [lang="ur"] input, [lang="ur"] textarea, [lang="ur"] select { font-family: var(--font-urdu); line-height: 2.15; letter-spacing: 0; } [lang="ur"] h1, [lang="ur"] h2, [lang="ur"] h3, [lang="ur"] h4, [lang="ur"] .display { font-family: var(--font-urdu); line-height: 1.9; letter-spacing: 0; font-weight: 700; /* Nastaliq at Latin display sizes overflows its line box badly */ font-size: clamp(1.5rem, 3.4vw, 2.5rem); } /* Nastaliq stacks its glyphs diagonally, so a heading needs far more leading than the Latin equivalent or the descenders of one line collide with the line beneath it. */ [lang="ur"] .display { font-size: clamp(1.85rem, 5vw, 3.5rem); line-height: 1.95; } [lang="ur"] h1 { font-size: clamp(1.7rem, 4vw, 2.85rem); } [lang="ur"] h3 { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.8; } /* The rotating word's underline is drawn against a Latin baseline. Nastaliq descends well below that, so the rule would strike through the word. */ [lang="ur"] .rotator-rule { display: none; } /* Nastaliq descenders need room, otherwise they clip against the next line */ [lang="ur"] .eyebrow, [lang="ur"] .tag-num, [lang="ur"] thead th, [lang="ur"] .footer-col h4, [lang="ur"] .info dt, [lang="ur"] .stat dt, [lang="ur"] .figures dt, [lang="ur"] .case-sector, [lang="ur"] .product-badge { letter-spacing: 0; text-transform: none; line-height: 1.9; } /* Numbers, phone, email and the wordmark stay Latin & LTR in both languages */ [lang="ur"] .logo, [lang="ur"] .figures dd, [lang="ur"] .stat dd, [lang="ur"] .row-num, [lang="ur"] .hero-card-bar em, [lang="ur"] .ltr { font-family: var(--font-sans); line-height: 1.4; } .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* Mirror the arrow glyphs; the tick in .checks is symmetric enough to leave */ [dir="rtl"] .ico-arrow { transform: scaleX(-1); } [dir="rtl"] .link:hover .ico-arrow, [dir="rtl"] .btn:hover .ico-arrow { transform: scaleX(-1) translateX(3px); } /* The hero SVG bleeds off the trailing edge; flip it so it still bleeds off the trailing edge in RTL rather than colliding with the headline. */ [dir="rtl"] .hero-lines { transform: scaleX(-1); } [dir="rtl"] .rotator-rule { transform-origin: right; } [dir="rtl"] .card::after, [dir="rtl"] .rotator-rule { transform-origin: right; } [dir="rtl"] .faq summary::after { transform: rotate(45deg) translate(-0.15rem, -0.15rem); } /* ========================================================================== 13 Print ========================================================================== */ @media print { .site-header, .site-footer, .wa-float, .hero-lines, .nav-toggle { display: none; } body { background: #fff; color: #000; } h1, h2, h3 { color: #000; } a { text-decoration: underline; } .card, .case, .table-scroll { break-inside: avoid; } }