/* ================================================================ Anuyog brand layer for the Bexon template. Load AFTER assets/css/main.css. Nothing here styles a component: it only redefines colour tokens, so all 26 tj- components inherit Anuyog's palette without main.css ever being edited. Two groups below, and the second one is not optional: 1. BASE PALETTE. main.css resolves most of its semantic --tj-color-* tokens through a --clr-* base layer, so redefining the base recolours everything downstream. 2. SEMANTIC TOKENS MAIN.CSS HARDCODES. Seven --tj-color-* tokens are literal hex in main.css rather than var(--clr-*), so group 1 cannot reach them. Between them they carry 442 usages, including --tj-color-theme-primary at 286 -- the single most-used brand token in the stylesheet. Four of them are still Bexon's original teal, never rethemed. Remove this group and the site goes back to blue buttons on teal borders. ================================================================ */ :root { /* -------------------------------------------------------------- 1. Base palette -------------------------------------------------------------- */ /* Brand blue. Was Bexon #1e5aa8. */ --clr-main: #2563eb; --clr-main-rgb: 37, 99, 235; /* Navy, used for headings and dark sections. Was #0b1c3a. */ --clr-accent: #0a1b3d; --clr-accent-rgb: 10, 27, 61; --clr-dark-blue: #0a1b3d; --clr-dark-blue-rgb: 10, 27, 61; /* Deepest navy, for the footer and dark overlays. Was #000531. */ --clr-semi-dark-blue: #060f28; --clr-semi-dark-blue-rgb: 6, 15, 40; /* Cyan, the accent against the blue. Was purple #4820a7. */ --clr-secondary: #22d3ee; --clr-secondary-rgb: 34, 211, 238; /* Page background. Was flat #f1f1f1, now carries a blue cast. */ --clr-grey: #f5f7fb; --clr-grey-rgb: 245, 247, 251; /* Body text. Was neutral #4d4d4d, now navy-tinted. */ --clr-dark-grey: #46556e; --clr-dark-grey-rgb: 70, 85, 110; /* Remaining neutrals, tinted to match so greys never read cold next to the navy. Not in the plan's table, but leaving them neutral is what makes a palette look assembled rather than designed. */ --clr-semi-dark: #8fa1be; --clr-semi-dark-rgb: 143, 161, 190; --clr-extra-dark-grey: #132550; --clr-extra-dark-grey-rgb: 19, 37, 80; /* -------------------------------------------------------------- 2. Semantic tokens main.css hardcodes -------------------------------------------------------------- */ /* 286 usages. Hardcoded #1e5aa8, so the base override above does not reach it. Every button, link hover, icon and underline in the template resolves through this one. */ --tj-color-theme-primary: var(--clr-main); /* 5 usages. Was #cee0e0, Bexon teal. Soft blue tint instead. */ --tj-color-theme-bg-2: #dfe7f3; /* 86 usages. Was #c9d1d1, Bexon teal. The default border on light sections: cards, inputs, dividers. */ --tj-color-border-1: #d6dfee; /* 32 usages. Was #313d3d, Bexon teal. The border on dark sections, so it sits just above the navy. */ --tj-color-border-2: #1c2d58; /* 29 usages. Was #67787a, Bexon teal-grey. Muted body copy. */ --tj-color-text-body-3: #5c7293; /* 3 and 1 usages. Both Bexon teal-greys. */ --tj-color-theme-dark-4: #5c7293; --tj-color-theme-dark-5: #6c7e9f; /* -------------------------------------------------------------- 3. Large-surface fill -------------------------------------------------------------- */ /* The template spends --tj-color-theme-primary on two very different jobs: 20px icon circles and 1290px panels. A blue tuned to work as a button is overwhelming as a wall, which is what made the counter band and the CTA read cheap. This is the colour for the big surfaces. Blue stays the accent you notice; navy carries the area. */ --anuyog-fill-strong: #0f2557; } /* ================================================================ Large surfaces Only the panels big enough for the primary to become the page's background rather than an accent. Everything else the template paints with --tj-color-theme-primary stays blue: buttons, links, icon circles, badges, bullets, small hover states. That is roughly 110 of the 122 background rules left untouched. ================================================================ */ .cta-area, .countup-wrap, .tj-marquee-section, .h5-maquee-inner, .pricing-box.active, .h10-pricing-box.active .pricing-header { background-color: var(--anuyog-fill-strong); } /* .tj-client-section-2 is deliberately NOT in that list. Anuyog's 15 client logos are dark marks on transparent ground, so they need a light surface. The logo wall belongs on .tj-client-section, and a dark client band would hide half the set. */ /* ================================================================ FAQ, open state The template floods the whole open item with one colour and turns the answer white on it. That buries the answer, which is the part people came to read. Split it: the question takes a navy band, the answer sits on a quiet ground in normal body colour. The band is a large surface, so it uses the strong fill for the same reason the CTA and the counter band do. .faq-title is a block button inside the item's side padding, so it is pulled out to the item edges to make a full-width band. The inset tracks the item's own padding, which the template narrows below 992px. ================================================================ */ .tj-faq.style-2 .accordion-item { --anuyog-faq-inset: 30px; } @media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) { .tj-faq.style-2 .accordion-item { --anuyog-faq-inset: 20px; } } .tj-faq.style-2 .accordion-item.active { background-color: var(--tj-color-theme-bg-2); overflow: hidden; } .tj-faq.style-2 .accordion-item.active .faq-title { background-color: var(--anuyog-fill-strong); color: var(--clr-white); /* The template sets width:100% on this button, and a negative margin only shifts it, so the band fell short on the right by both insets. A button shrink-wraps under width:auto, so the width is stated instead. */ display: block; width: calc(100% + var(--anuyog-faq-inset) * 2); margin-inline: calc(var(--anuyog-faq-inset) * -1); padding-inline: var(--anuyog-faq-inset) calc(var(--anuyog-faq-inset) + 44px); border-bottom: 0; } /* The toggle sits against the band's right edge by default, so it is brought back inside by the same inset. */ .tj-faq.style-2 .accordion-item.active .faq-title::after { inset-inline-end: var(--anuyog-faq-inset); color: var(--clr-white); border-color: rgba(255, 255, 255, 0.45); } /* Undo the template's white answer text: it is on light ground now. */ .tj-faq.style-2 .accordion-item.active .accordion-body, .tj-faq.style-2 .accordion-item.active .accordion-body p { color: var(--tj-color-text-body); } /* index-7's wrapper is one white card holding every row, so flooding the open row with a second tint broke the card into pieces. The navy band is the only thing that marks the open row now, and the answer sits on the same white as its neighbours. */ .tj-faq.style-2.h7-faq-wrapper .accordion-item.active { background-color: transparent; } .tj-faq.style-2 .accordion-item.active .accordion-body { margin-top: 0; padding-top: 20px; padding-bottom: 30px; border-top: 0; } /* main.css caps the answer at 585px, which is the measure index-7's own narrow FAQ column gives it. In our wider columns that cap stopped the text well short of the card's right edge and read as a stray gap. The card's own padding is the measure now. */ .tj-faq.style-2.h7-faq-wrapper .accordion-item .accordion-body { max-width: none; } /* main.css gives the open toggle a white disc with a dark glyph at .h7-faq-wrapper.style-2 .accordion-item.active .faq-title::after. The rule above was painting the glyph white as well, so the minus vanished into its own disc. */ .tj-faq.style-2.h7-faq-wrapper .accordion-item.active .faq-title::after { color: var(--anuyog-fill-strong); background-color: var(--clr-white); border-color: var(--clr-white); } /* Rows read as a list, so the divider stays between every pair rather than disappearing around the open one. */ .tj-faq.style-2.h7-faq-wrapper .accordion-item.active + .accordion-item { border-top: 1px dashed var(--tj-color-border-1); } .tj-faq.style-2.h7-faq-wrapper .accordion-item.active { border-radius: 0; } /* Whole-card hovers. A card flooding with bright blue on hover is the same problem in miniature, and it fires on every service grid. */ .choose-box:hover, .service-item.style-3:hover, .service-item.style-4:hover, .service-item.style-6:hover { background-color: var(--anuyog-fill-strong); } /* btn-dark is navy, so on a navy panel it disappears. Inside these fills the call to action takes the brand blue instead, which is what makes the blue read as the accent it now is. */ .cta-area .tj-primary-btn.btn-dark, .pricing-box.active .tj-primary-btn.btn-dark, .h10-pricing-box.active .tj-primary-btn.btn-dark { background-color: var(--clr-main); } /* ================================================================ Blog empty state The template has no component for "there is nothing here yet", because a demo always has posts. This is the one place the blog needs markup the template does not supply, so it is built from the same tokens as everything else and disappears the moment a real post card takes its place. ================================================================ */ .blog-empty { margin-top: 20px; } .blog-empty-inner { max-width: 620px; margin: 0 auto; padding: 64px 40px 68px; text-align: center; background-color: var(--tj-color-grey-1); border: 1px solid var(--tj-color-border-1); border-radius: 12px; } .blog-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 62px; margin-bottom: 26px; border-radius: 50%; font-size: 26px; color: var(--clr-white); background-color: var(--anuyog-fill-strong); } .blog-empty-inner .title { margin-bottom: 14px; } .blog-empty-inner p { margin-bottom: 30px; color: var(--tj-color-text-body); } @media (max-width: 575px) { .blog-empty-inner { padding: 44px 24px 48px; } } /* ================================================================ Team Two small additions the template has no component for. 1. An initials tile for people we have no photograph of. The alternative was a stock portrait of a stranger standing in for a real colleague, which is worse than an honest monogram. 2. A centred intro paragraph under a section heading. The template's sec-heading has no lead paragraph slot, and several pages want one. ================================================================ */ /* Matches main.css's own `.team-item .team-img .team-img-inner`, which sets a grey placeholder background and would otherwise outrank a two-class selector. */ .team-item .team-img .team-img-inner.is-initials { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; background-color: var(--anuyog-fill-strong); color: var(--clr-white); font-family: var(--tj-ff-heading); font-size: 46px; font-weight: var(--tj-fw-medium); letter-spacing: 0.02em; line-height: 1; user-select: none; } .team-content .team-focus { margin: 8px 0 0; font-size: 14px; color: var(--tj-color-text-body-3); } .team-intro { max-width: 660px; margin: 0 auto 46px; text-align: center; color: var(--tj-color-text-body); } /* ================================================================ Page header clearance The header is static and in flow, but ScrollSmoother lifts #smooth-content to the viewport top, so the page header starts underneath it. The template's own padding is tuned to Bexon's logo: 133px on desktop, dropping to 60px below 1200px. Anuyog's logo is taller, which puts the header at 107px below desktop against that 60px of padding, so the

was rendering behind it at both 768px and 414px. Measured, not guessed. ================================================================ */ @media (max-width: 1199px) { .tj-page-header { padding-top: 130px; } } /* ================================================================ Dark section headings .tj-service-section is a dark section: main.css paints it with --tj-color-theme-dark and whitens its .sub-title, but never its .sec-title, which stays at --tj-color-heading-primary. That is navy on navy, so the heading vanishes and only the coloured inside it survives. The template gets away with it because its own dark sections each carry a style-N modifier that whitens the title. Anything using the plain component does not. .service-3 and .service-4 are the transparent variants and are excluded, or they would get white text on a light ground. ================================================================ */ .tj-service-section:not(.service-3):not(.service-4) .sec-heading .sec-title { color: var(--clr-white); } /* ================================================================ Footer, dark variant footer-1 is the template's pale cyan footer. The partial uses footer-2, which main.css paints with --tj-color-theme-dark, but the template only recolours its link list for the dark ground. Titles, body copy and the copyright bar are still set for the light footer, so they need bringing over. ================================================================ */ /* main.css sets the pale gradient with the `background` shorthand on the base class, and .footer-2 only overrides background-color, so the gradient image survives underneath the navy. */ .tj-footer-section.footer-2 { background-image: none; } .tj-footer-section.footer-2 .footer-widget .title, .tj-footer-section.footer-2 .footer-widget h5 { color: var(--clr-white); } .tj-footer-section.footer-2 .footer-text p, .tj-footer-section.footer-2 .footer-widget ul li span { color: var(--tj-color-text-body-5); } .tj-footer-section.footer-2 .footer-widget ul li a:hover { color: var(--clr-white); } .tj-footer-section.footer-2 .tj-copyright-area { border-top: 1px solid var(--tj-color-border-2); margin-top: 60px; padding-top: 30px; } .tj-footer-section.footer-2 .copyright-text p, .tj-footer-section.footer-2 .footer-contact ul li a .text { color: var(--tj-color-text-body-5); } .tj-footer-section.footer-2 .footer-contact ul li a:hover .text { color: var(--clr-white); } /* ================================================================ Mega menu footer row The "See all services" button used to sit inside the last column, which made it read as one more item in that group. It now spans the full panel under all four columns. ================================================================ */ .mainmenu ul > li > .mega-menu-pages .mega-menu-foot, .mobile_menu ul > li > .mega-menu-pages .mega-menu-foot { display: flex; justify-content: center; padding: 26px 20px 6px; border-top: 1px solid var(--tj-color-border-1); margin: 10px 15px 0; } /* ================================================================ Header The header bar itself is deliberately NOT restyled here. The nav keeps its previous treatment from anuyog-theme.css: fixed, transparent over the hero, darkening to navy with a blur once .is-scrolled is set. Setting a background here would defeat that. Only the call to action is touched, because it was sized for a hero button rather than a nav item. ================================================================ */ .header-area .header-button .tj-primary-btn, .header-right-item .tj-primary-btn { font-size: 14px; padding: 4px 4px 4px 18px; gap: 8px; } .header-area .header-button .tj-primary-btn .btn-icon { width: 34px; height: 34px; font-size: 15px; } /* ================================================================ Services mega menu main.css sets the closed state as `transform: scaleY(0)` but never defines the open one anywhere in this build: there is no scaleY(1) against a mega-menu selector in the whole file. So the panel was collapsing the instant the pointer left the menu item, which is why it shut on the way down to it. This supplies the missing open state. focus-within keeps it usable from the keyboard, and pointer-events makes the panel itself hold the menu open, which is the part that was failing. ================================================================ */ .mainmenu ul > li > .mega-menu { pointer-events: none; } .mainmenu ul > li:hover > .mega-menu, .mainmenu ul > li:focus-within > .mega-menu { transform: scaleY(1) translateX(-50%); -webkit-transform: scaleY(1) translateX(-50%); opacity: 1; visibility: visible; pointer-events: auto; } /* The panel sits below the header, so the pointer crosses dead space on the way down to it and the hover is lost. This bridges that gap. It deliberately hangs off the panel, NOT off the menu anchor. The anchor's ::before is already the active item's 2px gradient underline in anuyog-theme.css, and borrowing it turned that underline into a 28px gradient block under Services on every service page. The panel is pointer-events:none until it opens, so the bridge is inert while the menu is closed and cannot trigger it by accident. */ .mainmenu ul > li > .mega-menu::before { content: ""; display: block; position: absolute; left: 0; right: 0; bottom: 100%; height: 30px; background: transparent; } .footer-address { margin: 18px 0 24px; font-style: normal; line-height: 1.7; color: var(--tj-color-text-body-5); } /* ================================================================ Service pages Built on the template's service-details layout: an editorial column with a sticky sidebar. Three things the template does not supply for it. ================================================================ */ /* The numbered blocks style .number, but not the wrapper the template's own markup puts around it. */ .service-details-item .service-number { margin-bottom: 10px; } .service-details-item .service-number .number { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; border-radius: 10px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); color: var(--clr-white); background-color: var(--anuyog-fill-strong); } .sidebar-price { font-family: var(--tj-ff-heading); font-size: 24px; font-weight: var(--tj-fw-sbold); color: var(--tj-color-heading-primary); margin-bottom: 10px; } .sidebar-price-note { font-size: 14px; line-height: 1.7; color: var(--tj-color-text-body-3); margin: 0; } /* Blocks carried over verbatim from the previous pages, because a structured render would have dropped copy. They still use the anuyog-* classes and need separating from the editorial flow. */ /* .anuyog-eyebrow is inline, so it sat on the same line as the heading that follows it. In the editorial column it is always a label above. It must stay a flex box: anuyog-theme.css centres the little gradient rule against the text with align-items, and switching this to `display: block` dropped that rule onto the text baseline. */ .post-details-wrapper .anuyog-eyebrow, .ladder-intro .anuyog-eyebrow, .ladder-process .anuyog-eyebrow { display: flex; align-items: center; width: fit-content; margin-bottom: 12px; } .post-details-wrapper .service-cta { margin-top: 40px; } /* ================================================================ Service page: facts strip and process The facts strip reuses the portfolio component (icon, label, value) as a horizontal band, which the template only ever uses as a vertical sidebar list. ================================================================ */ .service-glance { /* Flex, not grid: an auto-fit grid left a dead grey cell whenever the fact count did not divide by the column count, which it usually does not. Flex items stretch to fill their row instead, so three facts or four both fill the strip at any width. */ display: flex; flex-wrap: wrap; gap: 2px; margin: 34px 0 40px; border: 1px solid var(--tj-color-border-1); border-radius: 12px; overflow: hidden; background-color: var(--tj-color-border-1); } .service-glance .infos-item { flex: 1 1 165px; display: flex; align-items: center; gap: 14px; padding: 22px 20px; margin: 0; background-color: var(--clr-white); } .service-glance .project-icons { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 19px; color: var(--clr-white); background-color: var(--anuyog-fill-strong); } .service-glance .project-text span { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tj-color-text-body-3); margin-bottom: 3px; } .service-glance .project-text .title { margin: 0; font-size: 15px; line-height: 1.4; } /* The delivery steps use the template's own process component, whose .process-step is a 120px ghosted gradient numeral. That is the magazine device, and it is deliberately left alone here: an earlier pass shrank it to a 46px circle and broke it. Only the grid around it is set. */ .service-process { margin: 8px 0 44px; } .service-process .working-process-area { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } /* The column count follows the number of steps, so a run never leaves an orphan on its own row. Four steps as three-across put one card alone with a connector pointing into empty space. */ @media (min-width: 768px) { .service-process[data-steps="2"] .working-process-area, .service-process[data-steps="4"] .working-process-area { grid-template-columns: repeat(2, 1fr); } .service-process[data-steps="3"] .working-process-area, .service-process[data-steps="5"] .working-process-area, .service-process[data-steps="6"] .working-process-area { grid-template-columns: repeat(3, 1fr); } } /* The connector belongs between cards, never at the end of a row or of the run. Suppressed on whatever pseudo-element the template uses. */ .service-process .process-item:last-child::after, .service-process .process-item:last-child::before { display: none; } @media (min-width: 768px) { .service-process[data-steps="2"] .process-item:nth-child(2n)::after, .service-process[data-steps="4"] .process-item:nth-child(2n)::after, .service-process[data-steps="3"] .process-item:nth-child(3n)::after, .service-process[data-steps="5"] .process-item:nth-child(3n)::after, .service-process[data-steps="6"] .process-item:nth-child(3n)::after { display: none; } } /* Five steps leave a two-card final row; centring it stops it reading as an accident. */ @media (min-width: 768px) { .service-process[data-steps="5"] .process-item:nth-child(4) { grid-column: 1 / span 1; margin-inline-start: 50%; } } .service-process .process-item { max-width: none; } .post-details-wrapper .tj-post__navigation { margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--tj-color-border-1); } /* ================================================================ CTA over the footer .tj-cta-section lifts itself onto the footer with -195px, and the template's own footer reserves 195px of top padding for it. The dark footer-2 variant only reserves 100px, so the card was landing on top of the first row of footer links. ================================================================ */ body:has(.tj-cta-section) .tj-footer-section.footer-2 { padding-top: 260px; } /* ================================================================ Services ladder services.html is a growth path rather than a card grid: four stages in the order businesses meet them. The template has no component for a staged progression, so this is built from the same tokens as everything else. ================================================================ */ .ladder-lead { max-width: 720px; margin-top: 18px; color: var(--tj-color-text-body); } /* --- a stage ----------------------------------------------------- */ .ladder-stage { padding: 84px 0; } .ladder-stage--tint { background-color: var(--tj-color-grey-1); } .ladder-head { display: flex; gap: 26px; margin-bottom: 44px; } .ladder-num { flex: 0 0 auto; font-family: var(--tj-ff-heading); font-size: 64px; font-weight: var(--tj-fw-sbold); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--tj-color-border-1); } .ladder-symptom { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 10px; font-family: var(--tj-ff-heading); font-size: 19px; font-weight: var(--tj-fw-medium); color: var(--clr-main); } .ladder-detail { max-width: 680px; margin: 0; color: var(--tj-color-text-body); } /* Cards are links, so the whole card is the target. */ .ladder-card { display: block; height: 100%; color: inherit; } .ladder-card .desc { margin-bottom: 18px; } /* --- the handover to the next stage ------------------------------ */ .ladder-next { margin-top: 42px; padding: 22px 26px; border-inline-start: 3px solid var(--clr-main); border-radius: 0 12px 12px 0; background-color: rgba(var(--clr-main-rgb), .05); } .ladder-next-label { display: flex; align-items: center; gap: 9px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--clr-main); margin-bottom: 8px; } .ladder-next p { margin: 0; color: var(--tj-color-text-body); } @media (max-width: 575px) { .ladder-stage { padding: 60px 0; } .ladder-head { gap: 16px; } .ladder-num { font-size: 44px; } } /* ================================================================ Sticky sidebar .slidebar-stickiy carries only `will-change: transform` in main.css: the pinning is done by GSAP ScrollTrigger inside main.js, which the service pages do not load. So it is done natively here instead. The catch, already discovered on calculator/social-media-pricing: the site sets `overflow-x: hidden` on html and body, and an ancestor with overflow hidden silently disables position:sticky on everything inside it. `overflow-x: clip` prevents the same horizontal scroll without breaking sticky. ================================================================ */ html, body { overflow-x: clip; } @media (min-width: 992px) { /* The column has to stretch to the article's height, or there is no travel for the card to be pinned through. */ .slidebar-stickiy-container .row { align-items: stretch; } /* Any column carrying the class, not just the service sidebar: the founder page pins its portrait and fact card the same way. */ .slidebar-stickiy { position: sticky; /* Clears the fixed header, which is 107px below desktop. */ top: 124px; align-self: flex-start; } } /* ================================================================ Sidebar contact card The template's widget-feature-item is an advertising slot built around a product photograph, with a headline sized for one word. Without a photograph it was a bare dark rectangle, and the heading inherited the 48px h2 size and ran to six lines. ================================================================ */ .tj-sidebar-widget.widget-feature-item { padding: 0; border: 0; overflow: hidden; border-radius: 14px; } .widget-feature-item .feature-box { display: block; padding: 22px 22px 24px; background: linear-gradient(155deg, var(--anuyog-fill-strong) 0%, var(--clr-semi-dark-blue) 100%); position: relative; overflow: hidden; } .widget-feature-item .feature-box::before { content: ""; position: absolute; top: -45%; inset-inline-end: -35%; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--clr-main-rgb), .5), transparent 65%); pointer-events: none; } .widget-feature-item .feature-content { position: relative; z-index: 1; } .widget-feature-item .feature-kicker { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: rgba(255, 255, 255, .55); margin-bottom: 10px; } /* main.css sets this to 74px at .widget-feature-item .feature-box .feature-content .title, which is four classes. A three-class rule loses to it, which is why two earlier attempts at shrinking this card did nothing. Matched here deliberately. */ .widget-feature-item .feature-box .feature-content .title { font-size: 18px; line-height: 1.4; font-weight: var(--tj-fw-sbold); color: var(--clr-white); margin: 0 0 8px; } .widget-feature-item .feature-line { font-size: 13.5px; line-height: 1.6; color: rgba(255, 255, 255, .7); margin: 0 0 18px; } .widget-feature-item .feature-contact { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: 999px; font-weight: var(--tj-fw-sbold); font-size: 14.5px; color: var(--anuyog-fill-strong); background-color: var(--clr-white); transition: transform .25s ease; } .widget-feature-item .feature-contact:hover { transform: translateY(-2px); color: var(--anuyog-fill-strong); } .widget-feature-item .feature-contact i { font-size: 15px; } .widget-feature-item .feature-alt { display: block; margin-top: 14px; font-size: 13px; color: rgba(255, 255, 255, .62); text-decoration: underline; text-underline-offset: 3px; } .widget-feature-item .feature-alt:hover { color: var(--clr-white); } /* ================================================================ Booklet visuals The per-service diagram and the without/with table are lifted from the services booklet, where they were already drawn and written. ================================================================ */ .service-diagram { margin: 30px 0 40px; } .service-diagram-frame { padding: 20px; border: 1px solid var(--tj-color-border-1); border-radius: 14px; background-color: var(--clr-white); } .service-diagram-frame svg { display: block; width: 100%; height: auto; /* The booklet's SVGs asked for Inter, which the site never loads, so they rendered in whatever the browser calls sans-serif and every label came out wider than the box drawn for it. tools/fit-diagrams.py strips that request and fits the labels to this font, so it has to be stated here rather than left to inheritance. */ font-family: var(--tj-ff-body); } .service-diagram figcaption { margin-top: 14px; font-size: 14px; line-height: 1.6; color: var(--tj-color-text-body-3); text-align: center; } /* --- without / with --------------------------------------------- */ .service-compare { margin: 8px 0 44px; border: 1px solid var(--tj-color-border-1); border-radius: 14px; overflow: hidden; background-color: var(--clr-white); } .service-compare table { width: 100%; border-collapse: collapse; font-size: 15px; } .service-compare thead th { padding: 15px 18px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; text-align: start; color: var(--tj-color-text-body-3); background-color: var(--tj-color-grey-1); border-bottom: 1px solid var(--tj-color-border-1); } .service-compare tbody th { font-weight: var(--tj-fw-sbold); color: var(--tj-color-heading-primary); text-align: start; } .service-compare tbody th, .service-compare tbody td { padding: 16px 18px; border-bottom: 1px solid var(--tj-color-border-1); vertical-align: top; line-height: 1.5; } .service-compare tbody tr:last-child th, .service-compare tbody tr:last-child td { border-bottom: 0; } .service-compare td i { margin-inline-end: 8px; font-size: 13px; } .service-compare .is-without { color: var(--tj-color-text-body-3); } .service-compare .is-without i { color: #b3223a; } .service-compare .is-with { color: var(--tj-color-heading-primary); background-color: rgba(var(--clr-main-rgb), .04); } .service-compare .is-with i { color: #1a7f4b; } @media (max-width: 767px) { .service-compare table, .service-compare thead, .service-compare tbody, .service-compare tr, .service-compare th, .service-compare td { display: block; } .service-compare thead { display: none; } .service-compare tbody tr { border-bottom: 1px solid var(--tj-color-border-1); padding: 6px 0; } .service-compare tbody th, .service-compare tbody td { border-bottom: 0; padding: 8px 18px; } } /* Highlight tiles that follow a "what you get" list on some pages. */ .service-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 26px 0 40px; } .service-highlight { padding: 20px 20px 22px; border: 1px solid var(--tj-color-border-1); border-radius: 12px; background-color: var(--clr-white); } .service-highlight .title { font-size: 16px; margin-bottom: 8px; } .service-highlight .desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tj-color-text-body-3); } .block-intro { max-width: 660px; margin-bottom: 22px; } /* ================================================================ Services page: proof, first year, engagement models Three bands added under the ladder, all carrying booklet content: measured figures from delivered work, the shape a first year takes, and the three ways an engagement is structured. ================================================================ */ .proof-section { background-color: var(--anuyog-fill-strong); } .proof-section .sec-title, .proof-section .ladder-lead { color: var(--clr-white); } .proof-section .ladder-lead { color: rgba(255, 255, 255, .72); } .proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 46px; } .proof-card { padding: 26px 24px 28px; border: 1px solid var(--tj-color-border-2); border-radius: 14px; background-color: rgba(255, 255, 255, .04); } .proof-n { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--clr-secondary); margin-bottom: 12px; } .proof-figure { font-size: 24px; line-height: 1.25; color: var(--clr-white); margin: 0 0 10px; } .proof-note { margin: 0; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .68); } /* --- the first year ---------------------------------------------- */ .year-track { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 46px; position: relative; } .year-step { position: relative; padding: 24px 22px 26px; border: 1px solid var(--tj-color-border-1); border-radius: 12px; background-color: var(--clr-white); } /* The rule that turns five cards into one run. */ .year-step::before { content: ""; position: absolute; top: 0; inset-inline: 22px; height: 4px; border-radius: 0 0 3px 3px; background: linear-gradient(90deg, var(--clr-main), var(--clr-secondary)); } .year-when { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--clr-main); margin: 8px 0 6px; } .year-name { font-size: 18px; margin: 0 0 8px; } .year-what { margin: 0; font-size: 14px; line-height: 1.65; color: var(--tj-color-text-body-3); } /* --- engagement models ------------------------------------------- */ .models-section { background-color: var(--tj-color-grey-1); } .model-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 46px; } .model-card { padding: 28px 26px 30px; border: 1px solid var(--tj-color-border-1); border-radius: 14px; background-color: var(--clr-white); } .model-key { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; font-family: var(--tj-ff-heading); font-weight: var(--tj-fw-sbold); color: var(--clr-white); background-color: var(--anuyog-fill-strong); margin-bottom: 16px; } .model-name { font-size: 19px; margin: 0 0 10px; } .model-what { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--tj-color-text-body); } /* The article's closing call to action is centred, and is the only one on the page: the same button used to arrive a second time inside the "works well with" block, halfway up the article. */ .post-details-wrapper .service-cta { margin-top: 44px; text-align: center; } .post-details-wrapper .service-cta-note { margin: 16px 0 0; font-size: 15px; color: var(--tj-color-text-body-3); } /* ================================================================ Heading scale inside the article The native blocks use h3.sub-title at 32px; the blocks carried over verbatim use h2.sec-title, which is a page-section heading at 46px and a heavier weight. Side by side in one column they read as two different levels of the same thing. The carried-over ones are brought down to match. ================================================================ */ /* Every block in the article is now built here, so they all use h3.sub-title and there is nothing left to bring into line. */ /* ================================================================ Article blocks rebuilt from the booklet The typical-engagement narrative, the related-services row, the audience tiles and the stack. These used to be carried over as raw full-width section markup; they are components now, so they inherit the column's measure, heading scale and alignment for free. ================================================================ */ .service-story { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; margin: 8px 0 14px; border: 1px solid var(--tj-color-border-1); border-radius: 14px; overflow: hidden; background-color: var(--clr-white); } .service-story .story-column { padding: 26px 24px 28px; } .service-story .story-column + .story-column { border-inline-start: 1px solid var(--tj-color-border-1); } .service-story .story-title { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--clr-main); margin-bottom: 12px; } .service-story .story-body { margin: 0; font-size: 15px; line-height: 1.65; color: var(--tj-color-text-body); } .story-note { margin: 0 0 40px; font-size: 13.5px; font-style: italic; color: var(--tj-color-text-body-3); } @media (max-width: 575px) { .service-story .story-column + .story-column { border-inline-start: 0; border-top: 1px solid var(--tj-color-border-1); } } /* --- related services -------------------------------------------- */ .service-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 8px 0 40px; } .related-card { display: block; position: relative; padding: 22px 22px 46px; border: 1px solid var(--tj-color-border-1); border-inline-start: 3px solid var(--clr-main); border-radius: 12px; background-color: var(--clr-white); color: inherit; transition: transform .25s ease, border-color .25s ease; } .related-card:hover { transform: translateY(-3px); border-color: var(--clr-main); } .related-title { font-size: 16px; line-height: 1.4; margin-bottom: 8px; } .related-desc { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tj-color-text-body-3); } .related-go { position: absolute; inset-inline-start: 22px; bottom: 18px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 13px; color: var(--clr-white); background-color: var(--anuyog-fill-strong); } /* --- stack chips -------------------------------------------------- */ .service-stack { display: flex; flex-wrap: wrap; gap: 9px; margin: 8px 0 40px; } .tech-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border: 1px solid var(--tj-color-border-1); border-radius: 999px; font-size: 14px; font-weight: var(--tj-fw-medium); color: var(--tj-color-heading-primary); background-color: var(--clr-white); } .tech-chip i { font-size: 15px; color: var(--clr-main); } /* The mega menu's last column has no left border in main.css, because in the template's own Pages menu that slot holds a feature panel rather than a fourth list. Ours is a fourth list, so it needs the divider. */ .mainmenu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child, .mobile_menu ul > li > .mega-menu-pages .mega-menu-pages-single:last-child { border-inline-start: 1px solid var(--tj-color-border-1); padding-inline-start: 30px; } /* ================================================================ Full-bleed page header on mobile .section-gap-x insets a section by 12px each side and rounds its corners, which is the template's floating-card device. On a phone that leaves a white margin down both sides of the page header and its background image stops short of the screen edge. ================================================================ */ @media (max-width: 991px) { .tj-page-header.section-gap-x { margin-inline: 0; border-radius: 0; } } /* ================================================================ Mobile drawer density Each top-level row was 52px tall, so the six of them plus the logo block pushed an opened submenu below the fold on a phone: you had to scroll before any of the thing you just opened appeared. Tightening the rows and the header block brings it into view. ================================================================ */ @media (max-width: 991px) { .hamburger-area .hamburger_wrapper { padding: 22px 18px; } .hamburger-area .hamburger_top { margin-bottom: 6px; } .hamburger-area .hamburger_logo img { max-height: 38px; width: auto; } .hamburger-area .mobile_menu > ul > li > a { padding: 10px 4px; font-size: 15px; } /* The submenu opens right under its parent rather than after a gap. The lower padding clears the "See all services" pill from the next menu item, which it was otherwise touching. */ .hamburger-area .mobile_menu .sub-menu { padding-block: 0 10px; } .anuyog-mm-mobile li.anuyog-mm-mhead { margin: 2px 0; padding-bottom: 5px; } .anuyog-mm-mobile > li > a { padding: 6px 0; } } /* ================================================================ SCROLL REVEALS The template animates headings with GSAP SplitText and images with a ScrollTrigger zoom. The service pages do not carry GSAP, so the same two effects run on an IntersectionObserver in anuyog-effects.js, at the template's timings. Every rule here is gated on a class the script adds, so a page whose script never ran shows plain, fully visible content instead of blank space. ================================================================ */ .title-anim.ta-ready .ta-w { display: inline-block; overflow: hidden; vertical-align: top; /* Descenders would be clipped by the overflow without this. */ padding-bottom: 0.12em; margin-bottom: -0.12em; } .title-anim.ta-ready .ta-i { display: inline-block; transform: translateY(105%); opacity: 0; transition: transform .85s cubic-bezier(.16, 1, .3, 1), opacity .7s ease; transition-delay: calc(var(--d, 0) * 42ms); } .title-anim.ta-ready.is-in .ta-i { transform: none; opacity: 1; } .zoom-on-scroll { overflow: hidden; } .zoom-on-scroll.zoom-ready img { transform: scale(1.14); transition: transform 1.8s cubic-bezier(.16, 1, .3, 1); will-change: transform; } .zoom-on-scroll.zoom-ready.is-in img { transform: none; } /* A block marked data-stagger hands its children an index, so cards arrive in sequence rather than all at once. */ [data-stagger].stagger-ready > * { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .9s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--d, 0) * 90ms); } [data-stagger].stagger-ready.is-in > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .title-anim.ta-ready .ta-i, .zoom-on-scroll.zoom-ready img, [data-stagger].stagger-ready > * { transform: none; opacity: 1; transition: none; } } /* ================================================================ HOMEPAGE ================================================================ */ /* Clients are named real people and we have no photographs of them. The template's testimonial card expects an author image; initials stand in rather than a stock face, which would be a stranger's photograph presented as the client's. */ .testimonial-item .author-initials { flex: 0 0 auto; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--anuyog-fill-strong); color: var(--clr-white); font-family: var(--tj-ff-heading); font-size: 17px; font-weight: 700; letter-spacing: .02em; } .testimonial-item .author-inner { display: flex; align-items: center; gap: 14px; } .h7-about .about-desc { color: var(--tj-color-text-body-3); line-height: 1.8; margin-bottom: 16px; } .h7-about-banner img { width: 100%; height: auto; display: block; border-radius: 16px; } .about-btn-area-2 { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; } .h7-faq .faq-more { margin: 24px 0 0; font-size: 15px; color: var(--tj-color-text-body-3); } /* main.css stacks this at .h7-faq .sec-heading.style-7 .number, which is four classes: a three-class rule loses to it and the icon sat on its own line above the number. */ .h7-faq .sec-heading.style-7 .number, .h7-faq .sec-heading .number { display: inline-flex; flex-direction: row; align-items: center; gap: 12px; margin-top: 24px; font-weight: 600; color: var(--tj-color-heading-primary); } .h7-faq .sec-heading.style-7 .number .call-icon { margin-bottom: 0; height: 44px; width: 44px; font-size: 17px; } .h7-cta .cta-content .desc { margin: 14px 0 0; max-width: 560px; } .h7-cta .cta-btn { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 26px; } .home-popular { margin-top: 54px; } .home-popular-title { margin: 0 0 20px; font-family: var(--tj-ff-heading); font-size: 20px; font-weight: 600; color: var(--tj-color-heading-primary); } /* main.css colours every span inside a section heading as the accent (.sec-heading .sec-title span). The reveal script wraps each word of a title-anim heading in its own span, so the accent landed on the whole heading. The wrappers take the heading's colour; the one span the markup marks keeps the accent. */ .sec-heading .sec-title .ta-w, .sec-heading .sec-title .ta-i, /* style-2 sets `.sec-heading.style-2 .sec-title span`, which outranks a three-class selector, so the word wrappers have to be matched at the same weight or the whole heading takes the two-tone grey. */ .sec-heading.style-2 .sec-title .ta-w, .sec-heading.style-2 .sec-title .ta-i { color: inherit; } /* Family cards sit in a bootstrap row, so they stretch to the row height only if the card itself fills its column. */ .service-item.style-4 { height: 100%; } /* --------------------------------------------------------------- Sections that sit on the template's dark ground The site's heading colour is navy, which disappears on them. One marker class rather than a rule per section, because three of the template's components paint their own dark background. --------------------------------------------------------------- */ .anuyog-on-dark .sec-title, .anuyog-on-dark .sec-title .ta-w, .anuyog-on-dark .sec-title .ta-i, .anuyog-on-dark .cta-content .title, .anuyog-on-dark .team-content .title, .anuyog-on-dark .team-content .title a { color: var(--clr-white); } .anuyog-on-dark .sec-title span:not(.ta-w):not(.ta-i), .anuyog-on-dark .cta-content .title span:not(.ta-w):not(.ta-i) { color: var(--anuyog-sky); } .anuyog-on-dark .sec-heading .sub-title { color: var(--anuyog-sky); border-color: rgba(255, 255, 255, 0.18); } .anuyog-on-dark .team-content .designation, .anuyog-on-dark .cta-content .desc { color: rgba(255, 255, 255, 0.72); } /* --------------------------------------------------------------- index-7 heading treatment, in our palette .sec-heading.style-2 sets the highlighted part of a title to body grey; that is the template's two-tone look and it reads as washed out next to our blue accent. The pill eyebrow and the rest of the treatment are kept. --------------------------------------------------------------- */ .sec-heading.style-2 .sec-title span:not(.ta-w):not(.ta-i) { color: var(--anuyog-primary); } .anuyog-on-dark .sec-heading.style-2 .sec-title span:not(.ta-w):not(.ta-i) { color: var(--anuyog-sky); } .anuyog-on-dark .sec-heading.style-2 .sub-title { background-color: rgba(255, 255, 255, 0.08); color: var(--clr-white); } /* --------------------------------------------------------------- Homepage section rhythm index-7 alternates its grounds; a page of near-white sections is what made this one read flat. --------------------------------------------------------------- */ /* The template's coloured sections are rounded slabs inset from the page edge, not full-bleed bands. That inset and radius is most of why the template reads as designed and a flat band reads as a document. */ .anuyog-tint { background-color: var(--anuyog-surface-alt, #eef2f8); border-radius: 12px; position: relative; z-index: 1; overflow: hidden; } /* The logo wall lives inside the "by the numbers" band: the numbers say how many clients, the logos say who. */ .anuyog-clients { margin-top: 54px; padding-top: 38px; border-top: 1px solid var(--tj-color-border-1); } .anuyog-clients-lead { margin: 0 0 26px; text-align: center; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--tj-color-text-body-3); } .anuyog-clients .client-slider { overflow: hidden; } /* The wall is a continuous drift, so the timing function has to be linear or each loop visibly stutters at its ends. */ .anuyog-clients .swiper-wrapper { transition-timing-function: linear !important; } /* The logos are one shared canvas size but the marks inside them are not all the same proportion. Sizing the img directly let a tall one push past the slide, and the slider clips: the box is fixed and the mark is contained inside it instead. */ .anuyog-clients .client-item { height: 84px; } .anuyog-clients .client-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .anuyog-clients .client-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: .9; transition: opacity .3s ease; } .anuyog-clients .client-logo img:hover { opacity: 1; } .h7-service .section-desc-wrapper .desc { margin-bottom: 22px; color: var(--tj-color-text-body-3); line-height: 1.7; } /* .h7-team paints its own dark ground. Two dark sections back to back (team then testimonials) read as one long slab, so the team sits on the light ground and the testimonials keep the dark one. */ .anuyog-team-light { background-color: var(--clr-white) !important; background-image: none !important; } /* main.css sets the team heading white at .h7-team .sec-heading.style-2 .sec-title, which is four classes; a two-class rule loses to it. */ .anuyog-team-light .sec-heading.style-2 .sec-title, .anuyog-team-light .sec-heading.style-2 .sec-title .ta-w, .anuyog-team-light .sec-heading.style-2 .sec-title .ta-i, .anuyog-team-light .team-content .title, .anuyog-team-light .team-content .title a { color: var(--tj-color-heading-primary); } .anuyog-team-light .sec-heading.style-2 .sec-title span:not(.ta-w):not(.ta-i) { color: var(--anuyog-primary); } .anuyog-team-light .sec-heading.style-2 .sub-title { color: var(--tj-color-heading-primary); background-color: var(--clr-white); } .anuyog-team-light .team-content .designation { color: var(--tj-color-text-body-3); } .anuyog-team-light .team-img img { border-radius: 12px; } /* .tj-about-section carries the template's tinted ground, which put the about and why bands next to each other as one block. */ /* Card text inside a dark slab. The heading rules above covered section titles only, so the cards themselves were still dark on navy. */ .anuyog-on-dark .h7-about-card .title, .anuyog-on-dark .service-item .title, .anuyog-on-dark .service-item .title a { color: var(--clr-white); } .anuyog-on-dark .h7-about-card .desc, .anuyog-on-dark .service-item .desc { color: rgba(255, 255, 255, 0.72); } .anuyog-on-dark .h7-about-card .h7-about-card-icon { color: var(--anuyog-sky); background-color: rgba(255, 255, 255, 0.08); } /* The template pads the counter's inner block by 90px so a numeral can sit under a taller card. Ours are short, so that reads as a dead gap. */ .anuyog-funfact .countup-item.style-2 .count-inner { padding-top: 26px; } /* The logo files carry a white ground. Blending it away is not available here: Swiper transforms the wrapper, which opens a stacking context, and a blend mode only reaches the backdrop inside its own context. So the white becomes deliberate instead, a card per logo on the tinted band. */ .anuyog-clients .client-logo { background-color: var(--clr-white); border: 1px solid var(--tj-color-border-1); border-radius: 10px; padding: 12px 18px; } /* ================================================================ HERO Own layout, the template's decorations. main.css's .h7-hero-* rules stagger a three-word display title and our h1 carries the keyword phrase instead, so the layout is ours and the rotating badge, star block and blur shapes are the template's. ================================================================ */ .anuyog-hero7 { position: relative; z-index: 1; overflow: hidden; padding: 150px 0 96px; background-color: var(--anuyog-navy); } .anuyog-hero7-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .5; z-index: -2; } .anuyog-hero7-shape { position: absolute; z-index: -1; pointer-events: none; } .anuyog-hero7-shape.shape-1 { top: -12%; left: -8%; width: 46%; } .anuyog-hero7-shape.shape-2 { bottom: -20%; right: -6%; width: 42%; } .anuyog-hero7-shape img { width: 100%; height: auto; opacity: .75; } .anuyog-hero7-grid { display: grid; gap: 44px; align-items: center; } .anuyog-hero7-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--anuyog-sky); } .anuyog-hero7-title { margin: 0; font-family: var(--tj-ff-display); font-weight: 700; font-size: clamp(34px, 3.9vw, 56px); line-height: 1.1; color: var(--clr-white); } .anuyog-hero7-title span:not(.ta-w):not(.ta-i) { color: var(--anuyog-sky); } .anuyog-hero7-title .ta-w, .anuyog-hero7-title .ta-i { color: inherit; } .anuyog-hero7-desc { max-width: 580px; margin: 24px 0 0; font-size: 17px; line-height: 1.75; color: rgba(255, 255, 255, 0.78); } .anuyog-hero7-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 32px; } .anuyog-hero7-proof { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; margin-top: 38px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.14); } .anuyog-hero7-proof .proof-text { display: block; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--clr-white); } .anuyog-hero7-proof .proof-stats { display: flex; gap: 28px; } .anuyog-hero7-proof .stat { display: flex; flex-direction: column; } .anuyog-hero7-proof .n { font-family: var(--tj-ff-display); font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--clr-white); } .anuyog-hero7-proof .l { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .anuyog-hero7-media { position: relative; } .anuyog-hero7-banner { border-radius: 18px; overflow: hidden; box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9); } .anuyog-hero7-banner img { width: 100%; height: auto; display: block; } /* The template keeps this clear of the content and drops the frosted circle behind it; over the photo that circle read as a grey smudge. */ /* The badge is the template's: a white ring of text with a bare outlined arrow through it, rotated so it points up and out. No filled chip behind the arrow -- that was mine and it is what made it read as a button stuck on the photo. It hangs off the hero section itself, in its lower right corner, which is where the template puts it. */ .anuyog-hero7 .circle-text-wrap { position: absolute; width: 150px; height: 150px; right: 64px; bottom: 54px; background-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-radius: 0; overflow: visible; z-index: 3; } .anuyog-hero7 .circle-text-wrap .circle-text { width: 150px; height: 150px; background-size: contain; background-repeat: no-repeat; } .anuyog-hero7 .circle-text-wrap .circle-icon { width: auto; height: auto; background-color: transparent; color: var(--clr-white); font-size: 54px; line-height: 1; transform: translate(-50%, -50%) rotate(-135deg); } /* The photograph behind it is mid-tone in places, so a soft darkening under the badge keeps the white readable without showing an edge. */ .anuyog-hero7 .circle-text-wrap::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, rgba(10, 27, 61, .55) 0%, rgba(10, 27, 61, 0) 70%); z-index: -1; } /* The rotating word in the headline. */ .anuyog-hero7-title .swap { display: inline-block; min-width: 6ch; color: var(--anuyog-sky); transition: opacity .32s ease, transform .32s cubic-bezier(.16, 1, .3, 1); } @media (min-width: 992px) { .anuyog-hero7-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 60px; } } @media (max-width: 991px) { .anuyog-hero7 { padding: 120px 0 80px; } .anuyog-hero7 .circle-text-wrap { display: none; } } /* ---- work ---- */ .anuyog-work { position: relative; z-index: 1; overflow: hidden; } .anuyog-work .work-lead { margin: 0; color: var(--tj-color-text-body-3); line-height: 1.75; } .work-card { display: block; height: 100%; border-radius: 16px; overflow: hidden; background-color: var(--clr-white); border: 1px solid var(--tj-color-border-1); text-decoration: none; transition: transform .35s ease, box-shadow .35s ease; } .work-card:hover { transform: translateY(-6px); box-shadow: 0 26px 54px -30px rgba(10, 27, 61, .5); } .work-img { aspect-ratio: 16 / 10; overflow: hidden; } .work-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .work-body { position: relative; padding: 26px 28px 30px; } .work-sector { display: inline-block; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--anuyog-primary); } .work-title { margin: 0 0 10px; font-size: 22px; font-weight: 600; color: var(--tj-color-heading-primary); } .work-desc { margin: 0; padding-right: 46px; font-size: 15px; line-height: 1.7; color: var(--tj-color-text-body-3); } .work-go { position: absolute; right: 28px; bottom: 30px; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--clr-white); background-color: var(--anuyog-fill-strong); transition: background-color .3s ease; } .work-card:hover .work-go { background-color: var(--anuyog-primary); } /* --------------------------------------------------------------- About bento --------------------------------------------------------------- */ .about-bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .about-bento-img { grid-column: 1 / -1; border-radius: 16px; overflow: hidden; } .about-bento-img img { width: 100%; height: auto; display: block; } .about-bento-stat { padding: 22px 24px; border-radius: 14px; background-color: var(--anuyog-surface-alt, #eef2f8); border: 1px solid var(--tj-color-border-1); } .about-bento-stat .n { display: block; font-family: var(--tj-ff-display); font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--tj-color-heading-primary); } .about-bento-stat .l { display: block; margin-top: 4px; font-size: 13px; color: var(--tj-color-text-body-3); } /* Sits at the top of the text column so its top edge lines up with the photograph opposite, which is why the row is aligned to the start rather than centred. */ .about-call-lead { margin-bottom: 30px; } .tj-about-section .row.align-items-center { align-items: flex-start !important; } .about-bento-call { grid-column: 1 / -1; padding: 26px 28px; border-radius: 14px; background-color: var(--anuyog-fill-strong); color: var(--clr-white); } .about-bento-call p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.86); } .about-bento-call .text-btn, .about-bento-call .text-btn .btn-text span { color: var(--clr-white); } /* --------------------------------------------------------------- Six reasons --------------------------------------------------------------- */ .why-lead { max-width: 700px; margin: 18px auto 0; line-height: 1.75; color: rgba(255, 255, 255, 0.75); } .reason-card { height: 100%; padding: 30px 28px; border-radius: 14px; background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); } .reason-icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; border-radius: 50%; font-size: 19px; color: var(--anuyog-sky); background-color: rgba(255, 255, 255, 0.08); } .reason-title { margin: 0 0 10px; font-size: 19px; font-weight: 600; color: var(--clr-white); } .reason-desc { margin: 0; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); } /* --------------------------------------------------------------- Motion The template's feel comes as much from how long things take and how they ease as from what moves. Anchor jumps glide, and the pieces that respond to a pointer settle rather than snap. --------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .work-card, .reason-card, .service-item.h7-service-item, .related-card, .tj-primary-btn { transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s cubic-bezier(.16, 1, .3, 1), background-color .35s ease, border-color .35s ease; } .work-card:hover { transform: translateY(-6px); } .reason-card, .service-item.h7-service-item { will-change: transform; } .reason-card:hover { transform: translateY(-4px); background-color: rgba(255, 255, 255, 0.08); } .service-item.h7-service-item:hover { transform: translateX(6px); } /* --------------------------------------------------------------- Icon optical sizing The bexon glyphs are drawn to different densities: measured on a 70px em, tji-window covers 72% of its box and tji-worldwide 38%. Set at one size they look mismatched even though every circle is identical, so the heavier ones are set smaller. Scale is sqrt(target / measured) against a 45% target. --------------------------------------------------------------- */ .service-icon .tji-window { font-size: .80em; } .service-icon .tji-organize { font-size: .90em; } .service-icon .tji-budget { font-size: .99em; } .service-icon .tji-manage { font-size: 1.01em; } .service-icon .tji-excellence { font-size: 1.06em; } .service-icon .tji-worldwide { font-size: 1.08em; } /* --------------------------------------------------------------- Marquee band The one large accent fill on the page. The template runs its outlined words across a solid block of brand colour, and that band is a big part of why its page has colour at all. --------------------------------------------------------------- */ .anuyog-marquee-band { padding: 0; margin: 0 0 0; } /* Edge to edge, with no radius. Inset inside a rounded slab the words were cut off against its corners, which read as clipping rather than as a line of text travelling past. */ .anuyog-marquee-band .marquee-wrapper { padding: 20px 0; overflow: hidden; /* A flat block of the accent was loud and cheap. Running deep navy through the brand blue into cyan gives the band somewhere to travel, and it picks up the hero above it. */ background-image: linear-gradient(100deg, var(--anuyog-navy) 0%, var(--anuyog-primary-deep) 38%, var(--anuyog-primary) 68%, var(--anuyog-cyan) 118%); } .anuyog-marquee-band .marquee-slider .swiper-wrapper { transition-timing-function: linear !important; } .anuyog-marquee-band .marquee-item { display: flex; align-items: center; gap: 26px; width: auto; padding-right: 26px; } .anuyog-marquee-band .marquee-text { margin: 0; font-family: var(--tj-ff-display); font-size: clamp(26px, 2.9vw, 42px); font-weight: 700; line-height: 1.1; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.2px rgba(255, 255, 255, 0.9); } .anuyog-marquee-band .marquee-img { flex: 0 0 auto; width: 132px; height: 46px; border-radius: 8px; overflow: hidden; } .anuyog-marquee-band .marquee-img img { width: 100%; height: 100%; object-fit: cover; display: block; } /* --------------------------------------------------------------- Mission and vision --------------------------------------------------------------- */ .anuyog-mv { background-color: var(--anuyog-surface-alt, #eef2f8); border-radius: 12px; position: relative; z-index: 1; } .anuyog-mv .mv-title { margin: 0; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.16; } .anuyog-mv .mv-lead { margin: 22px 0 0; max-width: 62ch; font-size: 17px; line-height: 1.8; color: var(--tj-color-text-body-3); } .anuyog-mv .mv-cards { margin-top: 40px; } .anuyog-mv .mv-icon { width: 62px; height: 62px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; border-radius: 50%; font-size: 26px; color: var(--anuyog-primary); background-color: var(--clr-white); } .anuyog-mv .mv-name { margin: 0 0 10px; font-size: 21px; font-weight: 600; color: var(--tj-color-heading-primary); } .anuyog-mv .mv-desc { margin: 0; font-size: 15px; line-height: 1.75; color: var(--tj-color-text-body-3); } .anuyog-mv .mv-btn { margin-top: 34px; } /* ================================================================ PROJECTS The template stacks these panels with GSAP. position: sticky does the same thing natively and keeps scrolling smooth, so each card pins in turn and the next scrolls over it. The heading column pins alongside, as it does in the template. ================================================================ */ .anuyog-projects { background-color: var(--anuyog-navy); border-radius: 12px; position: relative; z-index: 1; /* clip, not hidden. overflow: hidden makes this a scroll container and position: sticky inside it stops working entirely, which is why the panels were not pinning at all. clip contains the shape without creating that container. */ overflow-x: clip; overflow-y: visible; } .anuyog-projects .project-lead { margin: 20px 0 28px; line-height: 1.75; color: rgba(255, 255, 255, 0.72); } .h7-project-wrapper { display: flex; flex-direction: column; gap: 28px; } /* A pinned card is covered by the next one, so it needs to be opaque and to sit above the one before it. */ .h7-project-wrapper .project-item:nth-child(1) { z-index: 1; } .h7-project-wrapper .project-item:nth-child(2) { z-index: 2; } .h7-project-wrapper .project-item:nth-child(3) { z-index: 3; } .h7-project-wrapper .project-item:nth-child(4) { z-index: 4; } .h7-project-wrapper .project-item { border-radius: 16px; overflow: hidden; background-color: #10254e; border: 1px solid rgba(255, 255, 255, 0.1); } /* A fixed height, not an aspect ratio. ScrollTrigger sets an explicit width when it pins, and a wider card made a 16/9 image grow until it filled the whole card and pushed the title and text out through overflow: hidden. Height fixed, the picture crops instead. */ .h7-project-wrapper .project-img { height: 420px; overflow: hidden; } .h7-project-wrapper .project-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); } .h7-project-wrapper .project-item:hover .project-img img { transform: scale(1.06); } .h7-project-wrapper .project-content { padding: 26px 30px 30px; } .h7-project-wrapper .project-text { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; } .h7-project-wrapper .title { margin: 0 0 6px; font-size: 24px; font-weight: 600; } .h7-project-wrapper .title a { color: var(--clr-white); } .h7-project-wrapper .title a:hover { color: var(--anuyog-sky); } .h7-project-wrapper .categories { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--anuyog-sky); } .h7-project-wrapper .project-desc { margin: 12px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, 0.72); } .h7-project-wrapper .tji-icon-btn { flex: 0 0 auto; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--anuyog-navy); background-color: var(--clr-white); transition: background-color .35s ease, transform .35s cubic-bezier(.16, 1, .3, 1); } .h7-project-wrapper .project-item:hover .tji-icon-btn { background-color: var(--anuyog-sky); transform: translate(3px, -3px); } /* The stack itself, as a no-script fallback: .has-smoother turns these off, so this only applies when the smoother never started. */ @media (min-width: 992px) { .anuyog-project-head { position: sticky; top: 100px; } /* Every panel pins at the same offset, so each one covers the last rather than fanning below it. That is what the template does: it pins all of them at top-=50 with pinSpacing off. */ .h7-project-wrapper .project-item { position: sticky; top: 100px; } } /* Below the two-column width the cards arrive one at a time instead of stacking; sticky here would leave the same band of empty ground the pin did. */ @media (max-width: 991.98px) { .has-project-reveal .h7-project-wrapper .project-item { opacity: 0; transform: translateY(34px); transition: opacity .8s cubic-bezier(.22, .61, .36, 1), transform .9s cubic-bezier(.22, .61, .36, 1); } .has-project-reveal .h7-project-wrapper .project-item.is-in { opacity: 1; transform: none; } .has-project-reveal .h7-project-wrapper .project-item .project-img img { transform: scale(1.06); transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); } .has-project-reveal .h7-project-wrapper .project-item.is-in .project-img img { transform: none; } } @media (prefers-reduced-motion: reduce) { .anuyog-project-head, .h7-project-wrapper .project-item { position: static; } } /* --------------------------------------------------------------- Testimonial cards, equal height Swiper sizes each slide to its own content, so quotes of different lengths gave cards from 299px to 403px in the same row. --------------------------------------------------------------- */ .testimonial-slider .swiper-wrapper { align-items: stretch; } .testimonial-slider .swiper-slide { height: auto; } .testimonial-slider .testimonial-item { height: 100%; display: flex; flex-direction: column; } .testimonial-slider .testimonial-item .desc { flex: 1 1 auto; } /* main.css sets .h7-about .sec-heading.style-7 to a 100px bottom margin, which suits a heading standing above a grid of cards. Here the paragraph belongs to the heading and reads as orphaned that far below it. The title's own 35px would collapse through and set the gap on its own, so it goes too. */ .h7-about .sec-heading.style-7 { margin-bottom: 24px; } .h7-about .sec-heading.style-7 .sec-title { margin-bottom: 0; } /* The homepage CTA is the service pages' panel, plus a line of copy and the phone number beside the button. */ .tj-cta-section .cta-content .desc { margin: 18px 0 0; max-width: 46ch; font-size: 16px; line-height: 1.75; color: rgba(255, 255, 255, 0.78); } .tj-cta-section .cta-btn { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; margin-top: 30px; } .tj-cta-section .cta-phone { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; } .tj-cta-section .cta-phone-icon { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 17px; color: var(--clr-white); border: 1px solid rgba(255, 255, 255, 0.32); transition: background-color .35s ease, border-color .35s ease; } .tj-cta-section .cta-phone:hover .cta-phone-icon { background-color: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.55); } .tj-cta-section .cta-phone-label { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .tj-cta-section .cta-phone-num { display: block; font-family: var(--tj-ff-heading); font-size: 17px; font-weight: 600; color: var(--clr-white); } /* The image column must not set the panel's height. team-handshake is square, and left to its own aspect it made the homepage CTA half as tall again as the one on the service pages. The content column sets the height; the picture crops to it. */ /* The picture must not contribute height. team-handshake is square, so at 648px wide it wanted 648px tall and the text column stretched to match, making this panel half as tall again as the service pages'. Taking the image out of flow lets the copy set the height and the picture crop to it. */ .tj-cta-section .cta-img { align-self: stretch; position: relative; overflow: hidden; } .tj-cta-section .cta-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* main.css caps .sec-heading at 550px but leaves its margins at 0, so a centred heading had centred text inside a block still sitting against the left edge of the container. */ /* main.css caps .sec-heading at 550px and, inside .tj-service-section, pins both inline margins to 0 at three classes. So a centred heading had centred text inside a block still sitting hard against the left of its container. */ .sec-heading.sec-heading-centered, .tj-service-section .sec-heading.sec-heading-centered, .tj-funfact-section .sec-heading.sec-heading-centered, .h7-team .sec-heading.sec-heading-centered, .tj-testimonial-section .sec-heading.sec-heading-centered { margin-inline: auto; max-width: 720px; } /* The stack lead belongs under its heading at the same left edge, not in a second column bottom-aligned against it. */ /* .sec-heading centres itself with auto inline margins, so a max-width on it pushed the block right inside its column and the chips below started 36px to its left. */ .stack-heading { max-width: 760px; margin-inline: 0; } .stack-lead { margin: 18px 0 0; font-size: 16px; line-height: 1.75; color: var(--tj-color-text-body-3); } /* --------------------------------------------------------------- Plain dropdowns drop where the mega menu does The services mega menu escapes its li (which is static) and anchors to the header, landing on the header's bottom edge. A plain sub-menu anchors to its own li and landed 25px higher, so Company opened at a different level from Services. The gap it now clears would break the hover, so the bridge covers it. --------------------------------------------------------------- */ @media (min-width: 992px) { .mainmenu > ul > li.has-dropdown > .sub-menu:not(.mega-menu) { top: calc(100% + 25px); } .mainmenu > ul > li.has-dropdown > .sub-menu:not(.mega-menu)::before { content: ""; position: absolute; left: 0; right: 0; top: -25px; height: 25px; } } /* --------------------------------------------------------------- With the smoother running, sticky is pinned by ScrollTrigger instead. The class is set by anuyog-effects.js only once ScrollSmoother has actually started, so if GSAP is missing or throws, these rules never apply and the CSS sticky stays in charge. --------------------------------------------------------------- */ .has-smoother .slidebar-stickiy, .has-smoother .anuyog-project-head, .has-smoother .h7-project-wrapper .project-item { position: static; top: auto; } /* --------------------------------------------------------------- Footer texture The same two corner patterns the template's footer carries, and that our own sections already use. main.css blends them with mix-blend-mode: difference, which is built for its light footer and turns to noise on our navy, so they are simply faint here. --------------------------------------------------------------- */ .tj-footer-section.footer-2 { position: relative; z-index: 1; overflow: hidden; } .tj-footer-section.footer-2 .bg-shape-1, .tj-footer-section.footer-2 .bg-shape-2 { mix-blend-mode: normal; opacity: .35; max-width: 440px; } .tj-footer-section.footer-2 .bg-shape-1 img, .tj-footer-section.footer-2 .bg-shape-2 img { width: 100%; height: auto; display: block; } /* Services page: the same rounded, inset slab the homepage uses for its tinted bands. */ .anuyog-slab-tint { background-color: var(--anuyog-surface-alt, #eef2f8); border-radius: 12px; position: relative; z-index: 1; overflow-x: clip; } /* The proof cards were always drawn for a dark ground: white text on a 4% white fill. This band is that ground, and it gives the services page the one dark break the homepage has. */ .anuyog-slab-dark { background-color: var(--anuyog-navy); border-radius: 12px; position: relative; z-index: 1; overflow-x: clip; } /* ================================================================ GROWTH PATH The four stages are milestones on one route, not four sections. A visible spine runs the length of the section, each stage is a large numbered node on it, and between stages the spine carries an arrow and the line that says what takes a business onward. The first version drew all of this too faintly to register as a path at all. ================================================================ */ .growth-path { position: relative; z-index: 1; } .growth-track { position: relative; } /* The track is laid faint; .growth-progress is the same line in full colour, drawn down it as the reader scrolls. */ .growth-track::before { content: ""; position: absolute; top: 34px; bottom: 40px; left: 31px; width: 4px; border-radius: 4px; background-color: rgba(37, 99, 235, .16); } .growth-progress { position: absolute; top: 34px; bottom: 40px; left: 31px; width: 4px; border-radius: 4px; transform-origin: top center; background: linear-gradient(180deg, var(--anuyog-primary) 0%, var(--anuyog-sky) 100%); } /* Only armed once the script takes over, so with no JS the line is simply drawn in full rather than sitting at zero. */ .has-track-anim .growth-progress { transform: scaleY(0); } /* A node ahead of the reader waits in outline; reaching it fills it. */ .has-track-anim .growth-node { background-color: var(--clr-white); color: var(--anuyog-primary); box-shadow: 0 0 0 4px rgba(37, 99, 235, .22), 0 0 0 8px var(--clr-white); transition: background-color .5s ease, color .5s ease, box-shadow .5s ease, transform .5s cubic-bezier(.16, 1, .3, 1); } .has-track-anim .growth-node.is-reached { background-color: var(--anuyog-primary); color: var(--clr-white); transform: scale(1.06); box-shadow: 0 0 0 8px var(--clr-white), 0 0 0 15px rgba(37, 99, 235, .18); } @media (prefers-reduced-motion: reduce) { .has-track-anim .growth-progress { transform: none; } .has-track-anim .growth-node { background-color: var(--anuyog-primary); color: var(--clr-white); } } .growth-step { position: relative; padding-left: 104px; padding-bottom: 76px; } .growth-step:last-child { padding-bottom: 0; } .growth-node { position: absolute; left: 0; top: 0; width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--anuyog-primary); color: var(--clr-white); font-family: var(--tj-ff-heading); font-size: 20px; font-weight: 700; /* A white ring lifts the node off the spine, and the halo marks it as a stop on the route rather than a bullet beside it. */ box-shadow: 0 0 0 8px var(--clr-white), 0 0 0 15px rgba(37, 99, 235, .14); } .growth-head { margin-bottom: 24px; } .growth-head .sec-title { margin: 0 0 12px; } .growth-symptom { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; font-size: 17px; font-weight: 600; color: var(--anuyog-primary); } .growth-detail { margin: 0; max-width: 62ch; line-height: 1.8; color: var(--tj-color-text-body-3); } .growth-photo { margin: 0 0 28px; border-radius: 16px; overflow: hidden; aspect-ratio: 21 / 7; } .growth-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* The connector. It sits on the spine, below the stage, and points at the next node. */ .growth-next { position: relative; margin: 34px 0 0 -104px; padding: 22px 26px 22px 104px; min-height: 76px; } .growth-next-arrow { position: absolute; left: 12px; top: 12px; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 17px; color: var(--anuyog-primary); background-color: var(--clr-white); box-shadow: 0 0 0 6px var(--clr-white); } .growth-next-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--anuyog-primary); } .growth-next p { margin: 0; max-width: 60ch; line-height: 1.75; color: var(--tj-color-text-body-3); } @media (max-width: 767px) { .growth-track::before { left: 21px; } .growth-step { padding-left: 62px; padding-bottom: 54px; } .growth-node { width: 46px; height: 46px; font-size: 15px; box-shadow: 0 0 0 6px var(--clr-white), 0 0 0 11px rgba(37, 99, 235, .14); } .growth-photo { aspect-ratio: 16 / 9; } .growth-next { margin-left: -62px; padding-left: 62px; } .growth-next-arrow { left: 6px; width: 34px; height: 34px; font-size: 14px; } } /* ================================================================ ROUTE MAP The overview of the same journey the spine draws further down: four stops on one line, read left to right. It was four plain boxes with a small arrow between them, which is a weak first thing to meet on the page. ================================================================ */ .route-map { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 46px; } /* The line the stops sit on, running behind the nodes. */ .route-map::before { content: ""; position: absolute; top: 33px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--anuyog-primary) 0%, var(--anuyog-primary) 72%, rgba(37, 99, 235, .25) 100%); } .route-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 18px; text-decoration: none; } .route-node { width: 66px; height: 66px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 24px; color: var(--clr-white); background-color: var(--anuyog-primary); box-shadow: 0 0 0 8px var(--anuyog-surface-alt, #eef2f8); transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s ease; } .route-step:hover .route-node { transform: translateY(-5px); box-shadow: 0 0 0 8px var(--anuyog-surface-alt, #eef2f8), 0 16px 30px -14px rgba(37, 99, 235, .75); } .route-num { margin-top: 20px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--anuyog-primary); } .route-name { margin-top: 6px; font-family: var(--tj-ff-heading); font-size: 21px; font-weight: 600; color: var(--tj-color-heading-primary); } .route-symptom { margin-top: 10px; max-width: 30ch; font-size: 14px; line-height: 1.65; color: var(--tj-color-text-body-3); } .route-count { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--anuyog-primary); } .route-count i { transition: transform .4s cubic-bezier(.16, 1, .3, 1); } .route-step:hover .route-count i { transform: translateX(4px); } @media (max-width: 991px) { .route-map { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; } .route-map::before { display: none; } } @media (max-width: 575px) { .route-map { grid-template-columns: minmax(0, 1fr); } } /* ================================================================ ABOUT PAGE ================================================================ */ .tj-about-section-2 .about-img { border-radius: 16px; overflow: hidden; } .tj-about-section-2 .about-img img { width: 100%; height: auto; display: block; } .about-fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 18px; } .about-fact { padding: 20px 22px; border-radius: 14px; background-color: var(--anuyog-surface-alt, #eef2f8); border: 1px solid var(--tj-color-border-1); } .about-fact .n { display: block; font-family: var(--tj-ff-display); font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--tj-color-heading-primary); } .about-fact .l { display: block; margin-top: 4px; font-size: 13px; color: var(--tj-color-text-body-3); } /* The history heading and the timeline are one block, so the heading sits close to the first date rather than a full section apart. */ .tj-history { padding-bottom: 0; } .tj-history .desc p { line-height: 1.8; color: var(--tj-color-text-body-3); } .tj-history .desc p + p { margin-top: 14px; } /* ---- the world map ---- */ .anuyog-world { background-color: var(--anuyog-navy); border-radius: 12px; position: relative; z-index: 1; overflow-x: clip; } .anuyog-world .world-lead { max-width: 660px; margin: 18px auto 0; line-height: 1.75; color: rgba(255, 255, 255, 0.75); } .anuyog-world-map { position: relative; margin-top: 50px; } .anuyog-world-img { width: 100%; height: auto; display: block; opacity: .55; } /* The pin needs a box of its own. As a bare inline span its height was zero, so a label placed at bottom: 100% landed on top of the dot instead of above it. */ .anuyog-world-pin { position: absolute; width: 14px; height: 14px; transform: translate(-50%, -50%); } .anuyog-world-pin .pin-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background-color: var(--anuyog-sky); box-shadow: 0 0 0 4px rgba(96, 165, 250, .28); } .anuyog-world-pin.pin-home .pin-dot { width: 16px; height: 16px; background-color: var(--clr-white); box-shadow: 0 0 0 6px rgba(255, 255, 255, .22); } /* anuyog-theme sets top on this same selector, so without resetting it the label has both top and bottom and the top wins, which dropped every label back on to its dot. */ .anuyog-world-pin .pin-label { position: absolute; left: 50%; top: auto; bottom: calc(100% + 9px); transform: translateX(-50%); white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--clr-white); background-color: rgba(10, 27, 61, .82); border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; padding: 4px 10px; } /* Pins near the right edge label leftwards so the badge stays on the map. */ .anuyog-world-pin .pin-label.pin-label-right { left: auto; right: 50%; transform: translateX(50%); } /* Two pins close together would stack their labels on each other, so the lower one hangs its label beneath instead. */ .anuyog-world-pin .pin-label.pin-label-below { bottom: auto; top: calc(100% + 9px); } @media (max-width: 767px) { .anuyog-world-pin .pin-label { display: none; } .anuyog-world-pin.pin-home .pin-label { display: block; } } /* ---- founder quote ---- */ .founder-quote { margin: 34px 0 0; padding: 34px 38px; border-radius: 16px; background-color: var(--anuyog-surface-alt, #eef2f8); border-left: 3px solid var(--anuyog-primary); } .founder-quote p { margin: 0 0 16px; font-size: 17px; line-height: 1.85; color: var(--tj-color-text-body-3); } .founder-quote footer { display: flex; align-items: center; gap: 14px; margin-top: 22px; } .founder-quote footer img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; } .founder-quote footer span { display: flex; flex-direction: column; font-size: 14px; color: var(--tj-color-text-body-3); } .founder-quote footer strong { font-family: var(--tj-ff-heading); font-size: 16px; color: var(--tj-color-heading-primary); } /* --------------------------------------------------------------- About page: the template's history timeline, made to work with text-only cards history.html gets its rhythm from two photographs in every card, which makes each row about 420px tall. Ours are text only and come out at ~150px, and at that height the template's 48px date, hung at inset-inline-end: -200px, reaches back across the centre line and lands on top of the card next to it. That is the overlap and the clipped "EARLY 2023" in the review screenshot. --------------------------------------------------------------- */ .tj-history-area .timeline-inner { padding-top: 26px; padding-bottom: 26px; } /* The date now sits in the empty half, anchored to the centre line and growing away from it, so it can never reach the card. */ @media (min-width: 768px) { .tj-history-area .timeline-inner .date { font-size: 30px; letter-spacing: 0; white-space: nowrap; color: var(--anuyog-primary); top: calc(50% - 18px); } .tj-history-area .timeline-inner:nth-child(odd) .date { inset-inline-start: calc(100% + 42px); inset-inline-end: auto; text-align: left; } .tj-history-area .timeline-inner:nth-child(even) .date { inset-inline-end: calc(100% + 42px); inset-inline-start: auto; text-align: right; } } @media (max-width: 767.98px) { .tj-history-area .timeline-inner { padding-top: 0; padding-bottom: 0; } .tj-history-area .timeline-inner .date { color: var(--anuyog-primary); } /* The template stacks the rail at 40px and the card indents its own number by another 40. On a 390px screen that leaves the copy about 230px of column, so both are pulled in. */ .tj-history-area .timeline-inner:nth-child(odd), .tj-history-area .timeline-inner:nth-child(even) { padding-inline-start: 26px; } .tj-history-area .timeline-inner .content .top { padding-inline-start: 34px; } .tj-history-area .timeline-inner:nth-child(odd) .date, .tj-history-area .timeline-inner:nth-child(even) .date { inset-inline-start: 26px; } } /* The card is white on a white page in the template. Ours needs an edge to read as a card at all. */ .tj-history-area .timeline-inner .content { border: 1px solid var(--anuyog-border, #e3e9f2); box-shadow: 0 10px 30px rgba(10, 27, 61, .05); transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; } .tj-history-area .timeline-inner .content:hover { border-color: var(--anuyog-primary); box-shadow: 0 16px 40px rgba(10, 27, 61, .1); transform: translateY(-3px); } .tj-history-area .timeline-inner .content .top span { color: var(--anuyog-primary); font-weight: 700; } .tj-history-area .timeline-inner .content .top p { line-height: 1.75; } /* The template's row carries two photographs at their natural size. Ours come from three different sources at three aspect ratios, so the pair is cropped to one shared box. */ .tj-history-area .timeline-inner .content .bottom { margin-top: 24px; } .tj-history-area .timeline-inner .content .bottom img { display: block; width: 100%; height: 132px; object-fit: cover; border-radius: 10px; } @media (max-width: 575px) { .tj-history-area .timeline-inner .content .bottom { margin-top: 18px; gap: 12px; } .tj-history-area .timeline-inner .content .bottom img { height: 92px; } } /* The connector dot is a grey ring in the template; on our palette it should read as the same accent as the number. */ .tj-history-area .timeline-inner::after { border-color: var(--anuyog-primary); } /* A short rule from the dot to the card, so the two are visibly joined. */ @media (min-width: 768px) { .tj-history-area .timeline-inner .content::after { content: ""; position: absolute; top: 50%; width: 74px; height: 1px; background-color: var(--anuyog-border, #e3e9f2); } .tj-history-area .timeline-inner:nth-child(odd) .content::after { inset-inline-start: 100%; } .tj-history-area .timeline-inner:nth-child(even) .content::after { inset-inline-end: 100%; } } @media only screen and (min-width: 992px) and (max-width: 1199px) { .tj-history-area .timeline-inner .content::after { width: 44px; } } @media only screen and (min-width: 768px) and (max-width: 991px) { .tj-history-area .timeline-inner .date { font-size: 24px; } .tj-history-area .timeline-inner:nth-child(odd) .date { inset-inline-start: calc(100% + 24px); } .tj-history-area .timeline-inner:nth-child(even) .date { inset-inline-end: calc(100% + 24px); } .tj-history-area .timeline-inner .content::after { width: 24px; } } /* --------------------------------------------------------------- The timeline, drawn as the reader goes down it Same idea as the services journey track, which is the shape the client liked: a rail that fills to wherever the reader has got, a glowing head at its tip, and a node that lights as the head reaches it. The rows arrive earlier, on the observer, because tying them to the head as well left a tall row sitting empty until its middle crossed the screen. Everything is behind .has-timeline-anim, so a page whose script never ran shows the rows in full. --------------------------------------------------------------- */ .tj-history-area .timeline-progress { position: absolute; top: 0; inset-inline-start: 50%; margin-inline-start: -1.5px; width: 3px; height: 100%; border-radius: 3px; background: linear-gradient(180deg, var(--anuyog-sky) 0%, var(--anuyog-primary) 100%); box-shadow: 0 0 14px rgba(37, 99, 235, .38); transform-origin: top center; pointer-events: none; z-index: 1; /* The rail is moved from one node to the next in a single step, so the travel between them is the transition rather than the scroll. */ transition: transform .7s cubic-bezier(.22, .61, .36, 1); } /* Painting order along the centre line: the faint track is .timeline::after with no z-index of its own, the drawn line goes over it, and the rows and their nodes go over both. Without this the dashed track painted on top of the drawn line and the whole rail read as dashes. */ .tj-history-area .timeline-inner { z-index: 2; } .has-timeline-anim .tj-history-area .timeline-progress { transform: scaleY(0); } /* Once the line is being drawn, the track behind it is the same rule in a fraction of the colour rather than the template's dashes. */ .has-timeline-anim .tj-history-area .timeline::after { border-inline-end: 3px solid rgba(37, 99, 235, .13); margin-inline-start: -1.5px; } @media (max-width: 767.98px) { .tj-history-area .timeline-progress { inset-inline-start: 10px; } } /* A node ahead of the line waits as an outline; the head reaching it fills it and lights it. */ .has-timeline-anim .tj-history-area .timeline-inner::after { background-color: var(--clr-white); border-color: rgba(37, 99, 235, .28); transform: scale(.8); box-shadow: 0 0 0 4px var(--clr-white); transition: background-color .55s ease, border-color .55s ease, box-shadow .55s ease, transform .7s cubic-bezier(.16, 1, .3, 1); } .has-timeline-anim .tj-history-area .timeline-inner.is-lit::after { background-color: var(--anuyog-primary); border-color: var(--clr-white); transform: scale(1.06); box-shadow: 0 0 0 6px var(--clr-white), 0 0 0 12px rgba(37, 99, 235, .16), 0 0 20px rgba(37, 99, 235, .6); } /* One ring travelling outward as the node lights, mirroring the dot's own placement on each side and again when the rows stack. */ .has-timeline-anim .tj-history-area .timeline-inner::before { content: ""; position: absolute; width: 16px; height: 16px; top: calc(50% - 8px); inset-inline-end: -8px; border-radius: 50%; border: 2px solid var(--anuyog-primary); opacity: 0; z-index: 1; pointer-events: none; } .has-timeline-anim .tj-history-area .timeline-inner:nth-child(even)::before { inset-inline-end: auto; inset-inline-start: -8px; } .has-timeline-anim .tj-history-area .timeline-inner.is-lit::before { animation: anuyog-node-ping 1.8s cubic-bezier(.16, 1, .3, 1) .05s 2; } @keyframes anuyog-node-ping { 0% { transform: scale(1); opacity: .5; } 70% { opacity: 0; } 100% { transform: scale(2.8); opacity: 0; } } /* The row itself. A long horizontal slide against a vertical scroll is what read as a lurch, so the travel is mostly upward with only a hint of the side it belongs to, over a slower curve. */ .has-timeline-anim .tj-history-area .timeline-inner .content, .has-timeline-anim .tj-history-area .timeline-inner .date { opacity: 0; transition: opacity 1s cubic-bezier(.22, .61, .36, 1), transform 1.1s cubic-bezier(.22, .61, .36, 1); } .has-timeline-anim .tj-history-area .timeline-inner .date { transition-delay: .16s; } .has-timeline-anim .tj-history-area .timeline-inner:nth-child(odd) .content { transform: translate(-14px, 26px); } .has-timeline-anim .tj-history-area .timeline-inner:nth-child(even) .content { transform: translate(14px, 26px); } .has-timeline-anim .tj-history-area .timeline-inner:nth-child(odd) .date { transform: translate(12px, 18px); } .has-timeline-anim .tj-history-area .timeline-inner:nth-child(even) .date { transform: translate(-12px, 18px); } @media (max-width: 767.98px) { .has-timeline-anim .tj-history-area .timeline-inner::before, .has-timeline-anim .tj-history-area .timeline-inner:nth-child(even)::before { inset-inline-end: auto; inset-inline-start: 1px; top: -38px; } .has-timeline-anim .tj-history-area .timeline-inner:nth-child(odd) .content, .has-timeline-anim .tj-history-area .timeline-inner:nth-child(even) .content, .has-timeline-anim .tj-history-area .timeline-inner:nth-child(odd) .date, .has-timeline-anim .tj-history-area .timeline-inner:nth-child(even) .date { transform: translateY(22px); } } .has-timeline-anim .tj-history-area .timeline-inner.is-in .content, .has-timeline-anim .tj-history-area .timeline-inner.is-in .date { opacity: 1; transform: none; } /* The photographs settle a beat after the card they sit in. */ .has-timeline-anim .tj-history-area .timeline-inner .content .bottom img { opacity: 0; transform: translateY(14px); transition: opacity .9s cubic-bezier(.22, .61, .36, 1), transform 1.1s cubic-bezier(.22, .61, .36, 1); } .has-timeline-anim .tj-history-area .timeline-inner.is-in .content .bottom img { opacity: 1; transform: none; } .has-timeline-anim .tj-history-area .timeline-inner.is-in .content .bottom img:first-child { transition-delay: .3s; } .has-timeline-anim .tj-history-area .timeline-inner.is-in .content .bottom img:last-child { transition-delay: .42s; } @media (prefers-reduced-motion: reduce) { .has-timeline-anim .tj-history-area .timeline-progress { transform: none; transition: none; } .has-timeline-anim .tj-history-area .timeline-inner::before { animation: none; } .has-timeline-anim .tj-history-area .timeline-inner .content, .has-timeline-anim .tj-history-area .timeline-inner .date, .has-timeline-anim .tj-history-area .timeline-inner .content .bottom img { opacity: 1; transform: none; transition: none; } } /* ---- about page: the "how we work" cards ---- */ .tj-choose-section .sec-heading-wrap .sub-title { margin-bottom: 14px; } .tj-choose-section .choose-box { border: 1px solid var(--anuyog-border, #e3e9f2); } .tj-choose-section .choose-box .title { font-size: 22px; line-height: 1.3; } .tj-choose-section .choose-box .desc { line-height: 1.8; } /* main.css sizes the choose icon at 88px, which is right for the three wide cards and far too heavy for the four narrow credential cards. */ .anuyog-cred .choose-box .choose-icon { font-size: 46px; max-width: 46px; margin-bottom: 22px; } .anuyog-cred .choose-box { border: 1px solid var(--anuyog-border, #e3e9f2); background-color: var(--anuyog-surface-alt, #eef2f8); } /* main.css turns the icon, title and copy white on hover because the card is meant to flood with colour underneath them. This rule set the card's resting ground at the same weight as that hover rule, so the ground stayed light and the text went white on it. The card floods, the way the "how we work" cards above it do. */ .anuyog-cred .choose-box:hover { background-color: var(--anuyog-fill-strong); border-color: var(--anuyog-fill-strong); } .anuyog-cred .choose-box .title { font-size: 20px; margin-bottom: 12px; } .anuyog-cred .choose-box .desc { font-size: 15px; line-height: 1.7; } /* ---- about page: the client band, standing on its own ---- */ /* The client marks are PNGs on white. On the page's off-white ground each one reads as a white tile, so the band carries white itself. */ .anuyog-clientband { background-color: var(--clr-white); } /* On the homepage the wall hangs under the counters, so it borrows their rule as a divider. Standing alone it needs its own top and bottom. */ .anuyog-clients.anuyog-clients-plain { margin-top: 0; padding-top: 46px; padding-bottom: 46px; border-top: 1px solid var(--tj-color-border-1); border-bottom: 1px solid var(--tj-color-border-1); } /* ---- about page: the testimonial panel ---- */ /* The template hangs a notched tab off the photograph, and the notch is painted with a hard-coded #ecf0f0 that only matches the template's own page ground. Dropping the notch and floating the rating card is the same shape without the colour clash. */ .tj-testimonial-section-2 .testimonial-img-area .box-area { background: transparent; padding: 0; inset-inline-end: 18px; bottom: 18px; max-width: 210px; } .tj-testimonial-section-2 .testimonial-img-area .box-area::before, .tj-testimonial-section-2 .testimonial-img-area .box-area::after { display: none; } .tj-testimonial-section-2 .rating-box { background-color: var(--anuyog-primary); padding: 20px 22px 22px; } .tj-testimonial-section-2 .rating-box .title { font-size: 48px; margin-bottom: 14px; } .tj-testimonial-section-2 .rating-box .rating-text { font-size: 13px; display: block; } .tj-testimonial-section-2 .testimonial-img { min-height: 520px; } /* main.css sets .testimonial-slider-2 and its item to height:100%. Nothing in that chain has a height of its own, so on our page every slide collapsed to zero and the whole column came out blank. The bootstrap column is already stretched to the row, so the height only has to be carried down from the wrapper. */ .tj-testimonial-section-2 .testimonial-wrapper { height: 100%; display: flex; } .tj-testimonial-section-2 .testimonial-slider-2 { width: 100%; min-height: 520px; } .tj-testimonial-section-2 .testimonial-slider-2 .swiper-slide { height: auto; } .tj-testimonial-section-2 .testimonial-img .sec-heading { width: 76%; } .tj-testimonial-section-2 .testimonial-img .sec-heading .sec-title, .tj-testimonial-section-2 .testimonial-img .sec-heading .sec-title .ta-w, .tj-testimonial-section-2 .testimonial-img .sec-heading .sec-title .ta-i { color: var(--clr-white); } .tj-testimonial-section-2 .testimonial-img .sec-heading .sec-title span:not(.ta-w):not(.ta-i) { color: var(--anuyog-sky); } .tj-testimonial-section-2 .testimonial-img::after { background: linear-gradient(180deg, rgba(10, 27, 61, .72) 0%, rgba(10, 27, 61, .3) 55%, rgba(10, 27, 61, .55) 100%); opacity: 1; } /* The template's slide leads with the quote and closes with the author; ours has no client photographs, so the initials disc stands in. */ .testimonial-slider-2 .testimonial-item { display: flex; flex-direction: column; border: 1px solid var(--anuyog-border, #e3e9f2); } .testimonial-slider-2 .testimonial-item .desc { flex: 1 1 auto; } .testimonial-slider-2 .testimonial-item .testimonial-author .author-inner { display: flex; align-items: center; gap: 14px; } .testimonial-slider-2 .testimonial-item .author-initials { width: 56px; height: 56px; font-size: 18px; } .testimonial-slider-2 .testimonial-item .testimonial-author .designation { font-size: 13px; color: var(--tj-color-text-body-3); } .testimonial-slider-2 .testimonial-item .star-ratings { margin-bottom: 26px; } .testimonial-slider-2 .testimonial-item .testimonial-author { padding-top: 24px; border-top: 1px solid var(--anuyog-border, #e3e9f2); } @media (max-width: 991.98px) { .tj-testimonial-section-2 .testimonial-img { min-height: 360px; } .tj-testimonial-section-2 .testimonial-slider-2 { min-height: 0; } .tj-testimonial-section-2 .testimonial-wrapper { height: auto; } } /* --------------------------------------------------------------- FAQ page Thirty-nine questions in five groups is a reference, not a panel of marketing copy, so it uses the service pages' own layout: the article column with the sticky rail beside it. A single photograph sitting next to that much text was decoration with nothing to say. --------------------------------------------------------------- */ .anuyog-faq-page .faq-group + .faq-group { margin-top: 56px; } .anuyog-faq-page .faq-group { scroll-margin-top: 120px; } .faq-group-head { margin-bottom: 22px; } .faq-group-head .sec-title { font-size: 28px; line-height: 1.3; margin: 14px 0 0; } /* The rail's group list carries a count, so the length of each section is visible before you open it. */ .anuyog-faq-page .service-categories li a { display: flex; align-items: center; gap: 10px; } .faq-count { margin-inline-start: auto; min-width: 26px; height: 22px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; border-radius: 40px; background-color: var(--anuyog-surface-alt, #eef2f8); font-size: 12px; font-weight: 700; color: var(--anuyog-primary); } .anuyog-faq-page .service-categories li a.active .faq-count, .anuyog-faq-page .service-categories li a:hover .faq-count { background-color: rgba(255, 255, 255, .2); color: var(--clr-white); } .faq-shorts { list-style: none; margin: 0; padding: 0; } .faq-shorts li { display: flex; gap: 10px; font-size: 14px; line-height: 1.7; color: var(--tj-color-text-body-3); } .faq-shorts li + li { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--tj-color-border-1); } .faq-shorts li i { flex: 0 0 auto; margin-top: 4px; font-size: 13px; color: var(--anuyog-primary); } .faq-shorts strong { color: var(--tj-color-heading-primary); } @media (max-width: 991.98px) { .anuyog-faq-page .faq-group + .faq-group { margin-top: 40px; } .faq-group-head .sec-title { font-size: 24px; } } /* --------------------------------------------------------------- Contact page The template's four info cards and its split form-and-map row. --------------------------------------------------------------- */ .tj-contact-area .contact-item.style-2 { height: 100%; border: 1px solid var(--anuyog-border, #e3e9f2); border-radius: 12px; background-color: var(--clr-white); padding: 34px 28px; transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; } .tj-contact-area .contact-item.style-2:hover { border-color: var(--anuyog-primary); box-shadow: 0 16px 40px rgba(10, 27, 61, .09); transform: translateY(-3px); } .tj-contact-area .contact-item.style-2 p, .tj-contact-area .contact-item.style-2 .contact-list li a { line-height: 1.7; word-break: break-word; } .anuyog-contact .contact-form { margin-inline-end: 0; border: 1px solid var(--anuyog-border, #e3e9f2); box-shadow: 0 18px 48px rgba(10, 27, 61, .06); } .anuyog-contact .contact-form .title { margin-bottom: 12px; font-size: 28px; line-height: 1.3; } .anuyog-contact .contact-lead { margin-bottom: 34px; line-height: 1.8; color: var(--tj-color-text-body-3); } /* The honeypot has to stay in the form and out of sight, and out of the tab order with it. */ .contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .anuyog-contact .submit-btn { margin-top: 6px; } .anuyog-contact .cf-turnstile { margin-bottom: 24px; } .contact-promises { list-style: none; margin: 30px 0 0; padding: 26px 0 0; border-top: 1px dashed var(--tj-color-border-1); } .contact-promises li { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--tj-color-text-body-3); } .contact-promises li + li { margin-top: 12px; } .contact-promises li i { color: var(--anuyog-primary); font-size: 14px; } /* The map is a panel rather than a bare frame: the address and the link out sit under it on the same card. */ .anuyog-contact .map-area { display: flex; flex-direction: column; border: 1px solid var(--anuyog-border, #e3e9f2); background-color: var(--clr-white); } .anuyog-contact .map-area iframe { flex: 1 1 auto; border: 0; min-height: 420px; } .anuyog-contact .map-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; padding: 20px 24px; border-top: 1px solid var(--anuyog-border, #e3e9f2); font-size: 14px; line-height: 1.7; color: var(--tj-color-text-body-3); } .anuyog-contact .map-foot strong { display: block; color: var(--tj-color-heading-primary); } @media (max-width: 991.98px) { .anuyog-contact .map-area { margin-top: 0; } .anuyog-contact .map-area iframe { min-height: 320px; } } @media (max-width: 575px) { .anuyog-contact .contact-form { padding: 34px 22px; } .anuyog-contact .contact-form .title { font-size: 23px; } } /* --------------------------------------------------------------- Team page --------------------------------------------------------------- */ /* Every portrait is square at source, but the cards were sizing to the image's own box and coming out at different heights, so the grid went ragged wherever an initials tile sat next to a photograph. */ .team-item .team-img .team-img-inner { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; } .team-item .team-img .team-img-inner img { width: 100%; height: 100%; object-fit: cover; display: block; } .team-item .team-img .team-img-inner.is-initials { aspect-ratio: 1 / 1; background: linear-gradient(150deg, var(--anuyog-fill-strong) 0%, var(--anuyog-primary) 100%); } /* The on-dark card rules paint .service-item text white, because on the homepage those cards sit transparently on the slab. style-4 is a white card, so on a dark band it needs a dark treatment of its own or the copy disappears into its own background. */ .anuyog-on-dark .service-item.style-4 { background-color: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px; padding: 32px 26px 34px; } .anuyog-on-dark .service-item.style-4 .service-icon { width: 62px; height: 62px; font-size: 30px; /* the template leaves 95px here for a much taller editorial card */ margin-bottom: 26px; background: rgba(96, 165, 250, .18); } .anuyog-on-dark .service-item.style-4 .service-icon i { color: var(--anuyog-sky); } .anuyog-on-dark .service-item.style-4:hover { background-color: var(--anuyog-primary); border-color: var(--anuyog-primary); } .anuyog-on-dark .service-item.style-4:hover .service-icon { background: rgba(255, 255, 255, .16); } .anuyog-on-dark .service-item.style-4:hover .service-icon i { color: var(--clr-white); } .anuyog-on-dark .service-item.style-4 .title { max-width: 100%; font-size: 20px; margin-bottom: 10px; } .anuyog-on-dark .service-item.style-4 .desc { line-height: 1.75; } /* --------------------------------------------------------------- Careers page --------------------------------------------------------------- */ .careers-perks { list-style: none; margin: 26px 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .careers-perks li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 40px; border: 1px solid var(--anuyog-border, #e3e9f2); background-color: var(--anuyog-surface-alt, #eef2f8); font-size: 14px; font-weight: 500; color: var(--tj-color-heading-primary); } .careers-perks li i { color: var(--anuyog-primary); font-size: 15px; } .careers-lead { max-width: 640px; margin: 18px auto 0; line-height: 1.8; color: var(--tj-color-text-body-3); } /* The template's job card leaves 60px above its footer for a salary line we do not publish; ours carries a description there instead. */ .tj-careers { height: 100%; display: flex; flex-direction: column; border-color: var(--anuyog-border, #e3e9f2); transition: box-shadow .3s ease, transform .3s ease, border-color .3s ease; } .tj-careers:hover { border-color: var(--anuyog-primary); box-shadow: 0 18px 44px rgba(10, 27, 61, .1); transform: translateY(-3px); } .tj-careers-icon { width: 62px; height: 62px; font-size: 28px; background-color: var(--anuyog-surface-alt, #eef2f8); } .tj-careers .mb-30 { margin-bottom: 24px; } .tj-careers-title { font-size: 21px; line-height: 1.35; } .tj-careers-desc { margin: 12px 0 0; font-size: 15px; line-height: 1.75; color: var(--tj-color-text-body-3); } .tj-careers-bottom { margin-top: auto; padding-top: 26px; } .tj-careers-bottom .location { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--tj-color-text-body-3); } .tj-careers-bottom .location i { color: var(--anuyog-primary); } .tj-careers:hover .tj-careers-icon { background-color: var(--anuyog-primary); } .tj-careers:hover .tj-careers-icon i { color: var(--clr-white); } /* --------------------------------------------------------------- Legal pages The template's own terms-and-conditions-wrapper carries the heading and list rhythm; this is the contents rail beside it and the ground the pair sit on. The rail's links used to be scoped as ".col-lg-4 ul li a" in a page-level