/* ===================================================================== NEW HOME, RHYTHM: one calm pass over all the sections ===================================================================== Every section was built from its own comp, so every one arrived with the same kit: eyebrow, a two-line headline with a red second line, floating art with a handwritten note, cards, and a strip of four facts underneath. Stacked eleven times on plain white that read as one long mixed scroll. This file, loaded last, gives the page a rhythm instead: - each section is a band with its own top and bottom space, and the bands alternate white / soft grey - secondary headlines are a step smaller, so the hero and the closing call to action are the loudest things on the page - the handwritten notes and their arrows stay only where they mean the most (the hero art and the CTA band), not in every section - the four-fact strips stay only under Why Choose Us and the client sectors row; the AI, How We Work and Who We Help strips are dropped The section order and which sections show live in page-new-hero.php. ===================================================================== */ .nh-page { --nh-band: #F6F6F7; } /* ---- the red, one step deeper ---- The owner first found the logo red (#E21F25) too dark, so the page used #EF4444; after seeing it with the black top he asked for it a little darker again. #DC2626 sits between the two. The tokens carry it to most places; the headline gradients and a few fills had the old red written in, so they are restated here. */ .nh-page { --nh-red: #DC2626; --nh-red-d: #C21F1F; --nh-red-t: #FBE7E7; } .nh-page .nw-title em { background-image: linear-gradient(95deg, #E8423F 0%, #DC2626 50%, #C21F1F 100%); } .nh-page .nx-cta__t em { color: #DC2626; } .nh-page .nh-chart__bars i:nth-child(n+6) { background: linear-gradient(180deg, #E8423F, #C21F1F); } .nh-page #nh-goal-g stop:first-child { stop-color: #EF5350; } .nh-page #nh-goal-g stop:last-child { stop-color: #C21F1F; } /* ---- bands ---- */ .nh > .nx { padding-top: clamp(64px, 5.4vw, 104px); padding-bottom: clamp(64px, 5.4vw, 104px); } .nh > .nx-wks, .nh > .nx-whos, .nh > .nx-cho { background: var(--nh-band); } .nh > .nx-faq + .nx-cta { padding-top: 0; } .nh > .nx-cta { padding-bottom: clamp(40px, 3vw, 60px); } /* ---- calmer secondary headlines ---- */ .nh > .nx .nw-title { font-size: clamp(30px, 3.05vw, 58px); } .nh > .nx .nw-sub { font-size: clamp(15.5px, 1.08vw, 19.5px); } /* ---- handwritten notes and their arrows, only in the hero and CTA ---- */ .nh > .nx .nx-hand, .nh > .nx .nx-off__lines, .nh > .nx .nx-how__lines, .nh > .nx .nx-sts__lines, .nh > .nx .nx-wks__scribble, .nh > .nx .nx-ais__scribble, .nh > .nx .nx-whos__scribble { display: none; } /* ---- fewer fact strips ---- */ .nh > .nx .nx-ais__strip, .nh > .nx .nx-how__strip, .nh > .nx .nx-whos__strip { display: none; } /* AI was a dark band for a while; the owner wanted it white again. It sits between Our Work (grey) and How We Work (white), so the two white bands share one gap instead of doubling it. */ .nh > .nx-ais + .nx-how { padding-top: 0; } /* ======================================================= MOTION, CALMER One reveal language for every section, the footer included: - blocks rise a little, sharpen out of a soft blur and settle, one after another (--i sets the order) - headlines open from the bottom like a curtain instead of fading - the eyebrow rule draws out from its dot, which then breathes gently - photos open the same way their headline did Hover moves (cards lifting, photos zooming) keep their own quick timing, with no reveal delay attached to them. All of it is off for visitors who ask for reduced motion. ===================================================================== */ .nh-js [data-nh-reveal] .nw-r { opacity: 0; transform: translate3d(0, 34px, 0) scale(.985); filter: blur(6px); transition: opacity .9s var(--nh-ease) calc(var(--i, 0) * 90ms + 80ms), transform 1.1s var(--nh-ease) calc(var(--i, 0) * 90ms + 80ms), filter .9s var(--nh-ease) calc(var(--i, 0) * 90ms + 80ms), translate .45s var(--nh-ease), box-shadow .45s var(--nh-ease), border-color .3s; } .nh-js [data-nh-reveal].is-in .nw-r { opacity: 1; transform: none; filter: none; } .nh-js [data-nh-reveal] .nw-title.nw-r { filter: none; transform: translate3d(0, 30px, 0); clip-path: inset(0 0 100% 0); transition: opacity .5s ease calc(var(--i, 0) * 90ms + 80ms), transform 1.15s var(--nh-ease) calc(var(--i, 0) * 90ms + 80ms), clip-path 1.15s var(--nh-ease) calc(var(--i, 0) * 90ms + 80ms); } .nh-js [data-nh-reveal].is-in .nw-title.nw-r { opacity: 1; transform: none; clip-path: inset(-20% -4% -30% -4%); } .nh-js [data-nh-reveal] .nw-eyebrow::after { transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--nh-ease) .45s; } .nh-js [data-nh-reveal].is-in .nw-eyebrow::after { transform: none; } .is-in .nw-eyebrow::before { animation: nh-breath 2.8s 1.2s ease-in-out infinite; } @keyframes nh-breath { 0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .35); } 50% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } } .nh-js [data-nh-reveal] .nx-wk__shot, .nh-js [data-nh-reveal] .nx-whoc__img, .nh-js [data-nh-reveal] .nx-hows__img, .nh-js [data-nh-reveal] .nx-how__photo { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--nh-ease) calc(var(--i, 0) * 90ms + 300ms); } .nh-js [data-nh-reveal].is-in .nx-wk__shot, .nh-js [data-nh-reveal].is-in .nx-whoc__img, .nh-js [data-nh-reveal].is-in .nx-hows__img, .nh-js [data-nh-reveal].is-in .nx-how__photo { clip-path: inset(-25%); } @media (prefers-reduced-motion: reduce) { .nh-js [data-nh-reveal] .nw-r, .nh-js [data-nh-reveal] .nw-title.nw-r { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; } .nh-js [data-nh-reveal] .nw-eyebrow::after { transform: none; transition: none; } .is-in .nw-eyebrow::before { animation: none; } .nh-js [data-nh-reveal] .nx-wk__shot, .nh-js [data-nh-reveal] .nx-whoc__img, .nh-js [data-nh-reveal] .nx-hows__img, .nh-js [data-nh-reveal] .nx-how__photo { clip-path: none; transition: none; } } /* ============================================================ BUTTONS Pill buttons, the owner's pick over the gradient-and-glow ones: fully round, solid logo red with no glow, and the arrow sitting in a white circle that turns to point up-right on hover. Secondary buttons are a plain outline. The active Services tab goes charcoal so the one red button in that block stays the thing to click. ===================================================================== */ .nh-page .nh-btn { border-radius: 999px; font-weight: 600; } .nh-page .nh-btn--go { background: var(--nh-red); box-shadow: none; padding-left: 1.7em; padding-right: .42em; gap: 1em; } .nh-page .nh-btn--go svg { box-sizing: content-box; width: 1em; padding: .66em; border-radius: 50%; background: #fff; color: var(--nh-red); transition: transform .35s var(--nh-ease); } .nh-page .nh-btn--go:hover { background: #B91C1C; transform: none; box-shadow: none; } .nh-page .nh-btn--go:hover svg { transform: rotate(-45deg); } /* section sheets that load later set their own padding (offer.css) */ .nh-page .nx-off__acts .nh-btn--go { padding-left: 1.7em; padding-right: .42em; } /* the FAQ's WhatsApp button has its icon before the words, so it mirrors the padding and the icon stays still (a :first-child test cannot tell, since text nodes do not count as children) */ .nh-page .nx-faq__cta .nh-btn--go { padding-left: .42em; padding-right: 1.7em; } .nh-page .nx-faq__cta .nh-btn--go:hover svg { transform: none; } .nh-page .nh-btn--ghost, .nh-page .nx-wks__all { background: transparent; box-shadow: none; border: 1.5px solid rgba(18, 21, 24, .16); } .nh-page .nh-btn--ghost:hover, .nh-page .nx-wks__all:hover { border-color: var(--nh-ink); transform: none; } .nh-page .nh-btn--ghost:hover svg { transform: none; } .nh-page .nx-off__tab { border-radius: 999px; } .nh-page .nx-off__tab.is-on { background: var(--nh-ink); box-shadow: none; } .nh-page .nx-off__tab.is-on svg { color: #FF6B6E; } @media (max-width: 560px) { /* the header button hides its arrow here, so it pads evenly */ .nh-page .nh-top__cta { padding: 0 16px; } } /* ======================================================= WHY CHOOSE US The logo sat on a black block, where its grey half (the base of the mark and "DOTTECH") all but disappeared. The block is now white with the same tilt, edge and red glow, so the colour logo reads in full. */ .nh-page .nx-cho__box { padding: 5cqw; background: linear-gradient(160deg, #FFFFFF 0%, #F5F5F7 100%); box-shadow: inset 0 1px 0 #fff, inset 0 -1.2cqw 2cqw rgba(18, 21, 24, .05), 0 2.2cqw 0 #E4E5E9, 0 2.6cqw 0 #D6D8DD, 0 5cqw 7cqw -2cqw rgba(239, 68, 68, .38), 0 0 0 1px rgba(18, 21, 24, .06); } /* ============================================================ DARK TOP The owner's black-and-red direction: the info strip, the top bar, the hero and the platforms strip sit on near-black with a soft red glow, then the page turns white from Services down. The logo gets a brightness lift on dark grounds (here and in the footer): its grey (#9E9E9E) rises to white while its red, already at full red, stays red, so no second logo file is needed. The mobile menu panel stays white for reading; only the bar itself goes dark. */ .nh-page .nh-info { background: #08090B; border-bottom: 1px solid rgba(255, 255, 255, .06); } .nh-page .nh-top { background: rgba(13, 14, 17, .96); border-bottom-color: rgba(255, 255, 255, .07); } .nh-page .nh-top.is-stuck { background: rgba(13, 14, 17, .9); box-shadow: 0 14px 34px -24px rgba(0, 0, 0, .75); } .nh-page .nh-logo img, .nh-page .nft__logo img { filter: brightness(1.65); } .nh-page .nh-find__btn { background: rgba(255, 255, 255, .08); color: #fff; } .nh-page .nh-find__btn:hover, .nh-page .nh-find.is-open .nh-find__btn { background: var(--nh-red); color: #fff; } .nh-page .nh-burger { background: transparent; border-color: rgba(255, 255, 255, .22); } .nh-page .nh-burger i { background: #fff; } @media (min-width: 1101px) { .nh-page .nh-nav__a { color: rgba(255, 255, 255, .84); } .nh-page .nh-nav__a:hover { color: #fff; } .nh-page .nh-nav__a.is-current { color: #F05252; } .nh-page .nh-dd.is-open > .nh-dd__btn { background: rgba(255, 255, 255, .08); color: #fff; } } .nh-page .nh-hero, .nh-page .nh-platforms { background-color: #0D0E11; } .nh-page .nh-hero { background-image: radial-gradient(48% 62% at 78% 42%, rgba(220, 38, 38, .22), transparent 64%), radial-gradient(34% 44% at 0% 0%, rgba(239, 68, 68, .1), transparent 70%); } .nh-page .nh-eyebrow { color: rgba(255, 255, 255, .7); } .nh-page .nh-eyebrow i { background: rgba(255, 255, 255, .45); } .nh-page .nh-eyebrow .nh-eyebrow__dot { background: var(--nh-red); } .nh-page .nh-title { color: #fff; } .nh-page .nh-title em, .nh-page .nh-title em .nh-grow { background-image: linear-gradient(95deg, #F05252 0%, #E23B3B 45%, #DC2626 100%); } .nh-page .nh-swash { color: rgba(239, 68, 68, .6); } .nh-page .nh-sub { color: rgba(255, 255, 255, .72); } .nh-page .nh-tags { color: rgba(255, 255, 255, .6); } .nh-page .nh-tags li:last-child { color: #fff; } .nh-page .nh-hero .nh-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .28); } .nh-page .nh-hero .nh-btn--ghost:hover { border-color: #fff; } .nh-page .nh-blob { background: radial-gradient(closest-side, rgba(239, 68, 68, .14) 0%, rgba(239, 68, 68, .05) 58%, rgba(239, 68, 68, 0) 100%); } .nh-page .nh-blob--edge { background: radial-gradient(closest-side, rgba(239, 68, 68, .1) 0%, rgba(239, 68, 68, 0) 100%); } .nh-page .nh-platforms__t { color: rgba(255, 255, 255, .5); } .nh-page .nh-platforms__t::after { background: rgba(255, 255, 255, .16); } .nh-page .nh-mark { background: rgba(255, 255, 255, .55); } .nh-page .nh-platforms li:hover .nh-mark { background: #fff; } .nh-page .nh-mark__txt { color: rgba(255, 255, 255, .55); } @media (max-width: 560px) { .nh-page .nh-tags li { background: rgba(255, 255, 255, .08); } }