/* ========================================================================== home.css — home page only. Split out of style.css so the other 28 pages do not carry it. Every selector below is scoped to body.home_n (set by $page_class in index.php:16), so it cannot match anywhere else. Loaded AFTER style.css in common/head.php — the cascade depends on that order, because this block used to sit at the end of style.css. ========================================================================== */ /* ========================================================================== Home page — Figma "Homepage design / Desktop Design" (node 1283:2329) The frame is 1512px wide: 72px side margins, 1368px of content. Everything below is scoped to body.home_n, so no other page changes. The rules above already carry most of the Figma values, but they step them down below 1560px and cap .container at 1230px below 1550px. At 1512px, the width the design is drawn at, the page therefore rendered one size smaller than Figma. Section 2 restores the design values from 1441px up. ========================================================================== */ /* --- 1. Tokens: colour, weight, tracking and leading, at every width ------ */ /* Two-tone headings are Rubik Medium + Rubik Light in Primary/Violet #5B0375 */ .home_n h2.home_n_heading{font-weight:500} .home_n h2.home_n_heading span{color:#5B0375} /* Neutrals/Off-White is #F4F4F4 */ .home_n .why_sec{background-color:#F4F4F4} /* Body copy: Inter 16 / 150% / -0.2px in Neutrals/Black-70 #555555 */ .home_n .serv_des p.home_n_text, .home_n .soft_serv_sec .full-content-column p.home_n_text, .home_n .flexible-sec .text-column p{line-height:150%;letter-spacing:-0.2px;color:#555555} .home_n .why_sec .wh_block p.home_n_text{line-height:150%} .home_n .why_sec .wh_block h3{line-height:110%} .home_n .soft_serv_sec .full-content-column h3{font-weight:500} /* Hero (1283:2892): supporting copy is Neutrals/Bk-30 at 80%, H1 Off-White, no shadow */ .home_n .home_vid_sec .banner-content p, .home_n .home_vid_sec .banner-desc p{line-height:150%;letter-spacing:-0.2px;color:#E0E0E0;opacity:.8} .home_n .home_vid_sec .banner-content h1{color:#F4F4F4;text-shadow:none} .home_n .hero_cta_btn{border-color:#F4F4F4} /* Cards band (1283:2923): description is Inter 16 / 140% / -0.2px at 80% */ .home_n .service-sec .full-content-column p{letter-spacing:-0.2px;opacity:.8} /* The testimonials band is styled once for every page, in style.css. */ /* --- 2. Layout at the design tier ----------------------------------------- */ @media (min-width:1441px){ /* Pill buttons are 45px tall in Figma (12px padding + 21px text, stroke inside). A CSS border adds to the box, so 11px padding + the 1px border gives 12. */ .home_n .hero_cta_btn, .home_n .serv_cta_btn, .home_n .solv_cta_btn, .home_n .home_new_btn{padding:11px 31px;line-height:21px} /* 16px label: 43px tall */ /* Hero (1283:2892): 788px heading column + 24px + 556px copy column, both sitting on the section's 80px bottom padding */ .home_n .home_vid_sec .container{column-gap:24px} .home_n .home_vid_sec .banner-content{flex:0 0 57.6%;width:57.6%;margin-top:0} .home_n .home_vid_sec .banner-desc{flex:1 1 0;width:auto;min-width:0} .home_n .home_vid_sec .banner-content p{font-size:16px;width:auto;margin:0 0 8px} .home_n .home_vid_sec .banner-content h1{font-size:64px;line-height:110%;width:auto;margin:0} .home_n .home_vid_sec .banner-desc p{margin:0 0 24px} /* The overlay shared the video's z-index and, coming first in the DOM, painted underneath it. Figma lays one gradient over the video: black at 70% fading out by 58% and back in by 89%. The copy (z-index 2, later in the DOM) stays on top. */ .home_n .home_vid_sec.video-banner:before{z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.7) 4.81%,rgba(0,0,0,0) 58.17%,rgba(0,0,0,.7) 88.94%)} /* Cards band (1283:2923): 48px top and bottom, no extra padding on the columns */ .home_n .service-sec .padd-10{padding-top:0;padding-bottom:0} /* About (1283:2330): 100px top and bottom; heading 495px, copy 664px flush right */ .home_n .soft_serv_sec{padding:100px 0} .home_n .serv_block{justify-content:space-between} .home_n .serv_block .serv_head{width:36.21%;padding-right:0} .home_n .serv_block .serv_des{width:48.54%} .home_n .serv_block h2.home_n_heading{margin:0} .home_n .serv_des p.home_n_text:last-of-type{margin-bottom:0} .home_n .serv_des .btn-group{margin-top:24px} .home_n .block_grid_sec{row-gap:36px} .home_n .soft_serv_sec .full-content-column p.home_n_text{margin-bottom:0} /* CTA band (1283:2374): 450px tall, 627px text column, 48px heading */ .home_n .solv_cta_sec{display:flex;align-items:center;min-height:450px;padding:100px 0} .home_n .solv_cta_sec .full-content{width:100%} /* !important only to beat bootstrap's .m-auto{margin:auto!important} on this element */ .home_n .solv_cta_sec .heading2{max-width:627px;margin-left:0!important;margin-right:auto} .home_n .solv_cta_sec h2{font-size:48px;line-height:110%;margin:0 0 8px} .home_n .solv_cta_sec p{line-height:150%;letter-spacing:-0.2px;color:#EFEFEF;opacity:.8;margin:0} .home_n .solv_cta_sec .cta-btn-inner{display:flex;margin-top:24px} /* Image + text rows (1283:2469, 1283:2383): both rows white and 752px tall at 1512; the 568px text column sits 120px from the outer edge, 68px from the image */ .home_n .flexible-sec .full-width{background:#fff} .home_n .flexible-sec .image-column{position:relative;aspect-ratio:756/752} .home_n .flexible-sec .image-column img.full-img{position:absolute;top:0;left:0;width:100%;height:100%} .home_n .flexible-sec .text-column{padding:64px 68px 64px 120px} .home_n .flexible-sec .reverse-mobile .text-column{padding:64px 120px 64px 68px} .home_n .flexible-sec .text-column h2.home_n_heading{margin:0 0 8px} .home_n .flexible-sec .text-column p{margin:0 0 1.2em} .home_n .flexible-sec .text-column p:last-of-type{margin-bottom:0} .home_n .flexible-sec .text-column h2.new-color{font-size:32px;line-height:110%;margin:0 0 32px} .home_n .flexible-sec .logo-flex{justify-content:center;align-items:center;margin-bottom:32px} /* Why us (1283:2478): 48px under the heading; card text inset 24px, 20px from the bottom */ .home_n .why_sec{padding:100px 0} .home_n .why_sec h2.home_n_heading{margin:0 0 48px} .home_n .why_sec .wh_block{padding:20px 24px} .home_n .why_sec .wh_block p.home_n_text{margin-bottom:0} } /* --- 3. Content width between 1441px and 1549px --------------------------- */ /* Above 1549px .container is already 1450px. In this band it was held at 1230px; Figma has 72px margins. .container carries a 12px gutter each side, so 100% - 120px puts the content exactly 72px from the edge. */ @media (min-width:1441px) and (max-width:1549px){ .home_n .container{width:calc(100% - 120px);max-width:1450px} } /* --- 4. Remaining Figma deltas ------------------------------------------- Found by diffing the rendered page against the decoded Figma frame at the 1512px width the design is drawn at. Everything else in Desktop Design (1283:2329) already measured exact, so these are the only four. */ /* Cards (component 1304:6310) carry an even 16px inset on all four sides. The card was built with 24px at the bottom. */ .home_n .service-sec .full-content-column{padding-bottom:16px} /* "Rectangle 1" stretches to the card's content width: 324 - 2x16 = 292px (191.9px tall at the image's own ratio). It was being laid out from its srcset candidate instead of the card, so it came out 256px. */ .home_n .service-sec .full-content-column img{width:100%} /* "Why Coding Sprint?" (text 1283:2336) is 1224px wide on a 144px margin -- the same 144px gutter as the tile grid under it, not the 1368px content width. It is centred, so this only shows up on the wrap width. */ .home_n .why_sec h2.home_n_heading{max-width:1224px;margin-left:auto;margin-right:auto} /* --- 5. Above the design width, hold the design ------------------------- The frame is drawn at 1512: .container is calc(100% - 120px) there, so the content edge is 72px in and sections are either 1368 wide (hero, header, service band, About Us, solution CTA, blogs, FAQ) or 1224 (Why Us, case studies, testimonials -- Figma gives those a 144px margin). Above 1549px .container was allowed to grow to 1450px while the sections that already carried a hard Figma width stayed at 1368/1224. At 1920 that left five different left edges on the page -- 239.5, 268.5, 340.5, 352.5 -- which is what reads as "out of the container". Since the design stops at 1512, the content stops with it and the extra width becomes outer margin; full-bleed things (the band images, section backgrounds) still fill. */ @media (min-width:1550px){ /* 1392 box = 1368 of content once .container's 12px gutter is taken off */ .home_n .container{max-width:1392px} /* "Flexible, Expert coders" / "The collaboration": the text column is 48px inside the content edge. .text-column is half of a 50/50 grid, so 100% is half the content width and min(90%,696px) is half the capped container; +12px is .container's gutter and +48px the design's own inset. */ .home_n .flexible-sec .text-column{padding-left:calc(100% - min(90%,696px) + 60px)} .home_n .flexible-sec .reverse-mobile .text-column{padding-right:calc(100% - min(90%,696px) + 60px)} } /* --- 6. Below the design width ------------------------------------------ Same three relationships, but .container is fluid here: it is 90% of the window capped at 1230px, and its own nested @media (max-width:1250px) takes it to 95%. Below 992px the band stops being a 50/50 grid, so 100% is no longer half the content width and these must not apply. There is no Figma frame at these widths, so the text column lines up with the content edge rather than also taking the design's extra 48px inset, which would squeeze the heading. */ @media (min-width:1251px) and (max-width:1440px){ .home_n .flexible-sec .text-column{padding-left:calc(100% - min(90%,615px) + 12px);padding-right:68px} .home_n .flexible-sec .reverse-mobile .text-column{padding-left:68px;padding-right:calc(100% - min(90%,615px) + 12px)} } @media (min-width:992px) and (max-width:1250px){ .home_n .flexible-sec .text-column{padding-left:calc(100% - min(95%,615px) + 12px);padding-right:68px} .home_n .flexible-sec .reverse-mobile .text-column{padding-left:68px;padding-right:calc(100% - min(95%,615px) + 12px)} } /* --- 10. Mobile --------------------------------------------------------- */ /* The About Us cards only get their box on :hover, which a touch screen never fires, so on small screens they were bare text on the page. Figma gives the card #FFFFFF with a 0 4px 16px #91004E @10% shadow (1283:2338); below the desktop breakpoint that becomes the resting state. */ @media (max-width:991px){ .home_n .soft_serv_sec .full-content-column{background:#FFFFFF;box-shadow:0 4px 16px #91004E1A} } /* --- 11. Mobile: flexible band + gutter --------------------------------- 1. Gutter. .container drops to padding:0 10px under 756px; the agreed mobile gutter is 15px, which .flexible-sec .text-column already used, so this brings every other section onto the same edge. 2. The band images never appeared. .image-column is height:100% and img.full-img is height:100%/width:100% -- once the row stacks there is no definite height to resolve against, so both collapse to 0. The image is also loading="lazy", so at 0x0 it was never even fetched (naturalWidth reported 0). Giving the column the design's own 756/752 box restores a real height, the image fills it, and the fetch fires. The first band also carries .hide-mobile, which hid it outright. 3. .mobile-center centres the copy; this band reads left aligned. */ @media (max-width:767px){ .home_n .container{padding-left:15px;padding-right:15px} } @media (max-width:991px){ .home_n .flexible-sec .image-column, .home_n .flexible-sec .image-column.hide-mobile{display:block;height:auto;aspect-ratio:756/752} .home_n .flexible-sec .image-column img.full-img{width:100%;height:100%;object-fit:cover} .home_n .flexible-sec .mobile-center, .home_n .flexible-sec .text-column, .home_n .flexible-sec .text-column h2, .home_n .flexible-sec .text-column p, .home_n .flexible-sec .text-column .logo-flex{text-align:left;justify-content:flex-start} } /* The reverse band is a column-reverse flex with align-items:center, so the image column is not stretched: with an aspect-ratio set its width came from its height and overflowed the page (444px inside 393px). Pin it to the full width and let the height follow. */ @media (max-width:991px){ .home_n .flexible-sec .image-column{width:100%;max-width:100%;align-self:stretch} } /* .why_sec holds its container 10px in, which put its content at 25px while every other section sat at 15px. */ @media (max-width:767px){ .home_n .why_sec{padding-left:0;padding-right:0} .home_n .why_sec > .container{padding-left:15px;padding-right:15px;margin-left:0;margin-right:0;width:100%} } /* Image above the copy in both bands on small screens. The two rows stack in opposite directions -- the first is DOM [text, image] in a column, the second is DOM [image, text] in a column-reverse -- so both ended up with the text on top. Normalising the direction and pulling .image-column forward puts the image first in each, whichever way the markup runs. */ @media (max-width:991px){ .home_n .flexible-sec .full-width{display:flex;flex-direction:column} .home_n .flexible-sec .full-width .image-column{order:-1} } /* --- 16. Service cards 768-1024: 2 x 2, image beside the copy ----------- col-md-3 keeps all four cards on one row through the tablet range, which squeezes each one to ~190px and leaves the copy in a narrow ribbon. Two per row, with the image moved alongside the text rather than above it. The card is IMG > H3 > P with no wrapper, so grid does the placement: the image takes column 1 and spans both rows, the heading and paragraph stack in column 2. No markup change. */ @media (min-width:768px) and (max-width:1024px){ .home_n .service-sec .row > [class*="col-"]{flex:0 0 50%;max-width:50%} .home_n .service-sec .full-content-column{ display:grid;grid-template-columns:38% 1fr;column-gap:16px;align-content:start} .home_n .service-sec .full-content-column img{ grid-column:1;grid-row:1 / span 2;width:100%;height:auto;margin:0;align-self:start} .home_n .service-sec .full-content-column h3{grid-column:2;grid-row:1;margin-top:0} .home_n .service-sec .full-content-column p{grid-column:2;grid-row:2;margin-bottom:0} }