/* 77 Media · theme v1 (7 Sep 2026). White page, Apple-style: big bold type, colour on the cards, nothing translucent. Loads LAST on every page that links it (index, portfolio, faq), so equal-specificity rules here win. */ @font-face{font-family:'Fredoka';font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/fredoka-var.woff2) format('woff2')} :root{ --tl1:#F4F1FB;--tl2:#E8E2F6; /* lilac */ --ts1:#EFF5FC;--ts2:#DDEAF7; /* sky */ --tm1:#EFF8F2;--tm2:#DCEFE2; /* mint */ --tp1:#FBF2EC;--tp2:#F5E2D5; /* peach */ --ty1:#FBF7E9;--ty2:#F3EBCC; /* lemon */ --tr1:#FBF0F4;--tr2:#F4DEE6; /* rose */ --grey:#F5F5F7;--grey-2:#E9E9EE;--hair:rgba(10,1,28,.08); --r-card:28px; --font-round:'Fredoka',var(--font-sans); } /* ---------- 1 · white page: the purple sky, clouds and blobs are gone ---------- */ html,body{background:#fff} .skyzone,.flowzone,.hero--v5,.section,.trusted{background:#fff} .skyzone::before{background:#fff} .sky,.flowbg,.skyfade,.flowfade,.hero__panel-glow,.glow{display:none !important} .section.work,.deep .section.work{background:#fff;color:var(--text)} /* ---------- 2 · type: bigger, bolder, tighter; the accent word is round and colourful ---------- */ .h1{font-weight:800;letter-spacing:-.045em} .h2{font-size:clamp(34px,5.4vw,70px);font-weight:800;letter-spacing:-.045em;line-height:1.02;text-wrap:balance} .section-head .h2{margin:16px 0 18px} .lede{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:#4E5255} .serif,.hero--v5 .serif{font-family:var(--font-sans);font-style:normal;font-weight:800;letter-spacing:inherit; background:linear-gradient(95deg,#6B36D4 0%,#C24BD9 48%,#FF6E45 100%);-webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent;padding-inline:.02em .06em} .eyebrow{color:#6B36D4} .eyebrow::before{background:#824EEB} /* ---------- 3 · buttons, badges, nav: solid and sharp ---------- */ .btn{border-radius:999px;font-weight:700} .btn--ghost,.hero--v5 .btn--ghost{background:var(--grey);border-color:transparent;color:#0A011C;-webkit-backdrop-filter:none;backdrop-filter:none} .btn--ghost:hover,.hero--v5 .btn--ghost:hover{background:var(--grey-2)} .badge{background:var(--grey);border-color:transparent;color:#3B3B45;-webkit-backdrop-filter:none;backdrop-filter:none} .nav.is-scrolled .nav__inner{background:rgba(255,255,255,.98);border:1px solid var(--grey-2);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 10px 30px rgba(10,1,28,.08)} .navmail{background:var(--grey);border:1px solid transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none} .navmail:hover{background:var(--grey-2)} .chip{background:rgba(255,255,255,.75);border:0;border-radius:999px;padding:6px 12px;font-size:12.5px;font-weight:700;color:#0A011C} /* ---------- 3e · phone pass, 7 Sep 2026 ---------- The workspace stat tiles are ~48px wide on a 390px screen and .tile__v is nowrap with an ellipsis, so a value like "2.4x ROAS" rendered as "2.4x ...". Let it wrap instead: all three tiles are in one grid row, so they grow together and stay level. */ @media (max-width:767px){ .tile__v{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15} .tile__l{line-height:1.2} /* the three hero pills were 11px; 12px is the smallest this site uses elsewhere */ .hero--v5 .badge{font-size:12px} } /* ---------- 3d · opening animation, recoloured for the white theme (Nitin 7 Sep) ---------- The preloader still carried the old purple-and-pink sky: a #E7DEF9 to #FFFFFF gradient with dusty-pink and lilac blobs. Everything else on the site went white in theme v1, so the intro was the last screen showing the retired palette. It is a white ground now with four soft washes taken straight from the two headline gradients: purple to magenta to coral ("marketing") and blue to teal ("business"). Same motion, current colours. */ .preload{background:#fff} .pb1{background:radial-gradient(circle at 35% 35%,rgba(107,54,212,.22),transparent 68%)} .pb2{background:radial-gradient(circle at 60% 40%,rgba(194,75,217,.18),transparent 70%)} .pb3{background:radial-gradient(circle at 50% 50%,rgba(29,143,240,.17),transparent 70%)} .pb4{background:radial-gradient(circle at 40% 60%,rgba(255,110,69,.16),transparent 70%)} .preload__markwrap{filter:drop-shadow(0 10px 24px rgba(10,1,28,.14))} /* ---------- 3c · contrast fixes found by the all-pages audit, 7 Sep 2026 ---------- Each one was measured, not guessed. */ /* --text-subtle #6E7278 on the grey card (#F5F5F7) was 4.44:1, just under AA. Darkened at the token, so every use of it improves: 5.22 on grey, 5.69 on white. */ :root{--text-subtle:#63676D} /* The footer's link colour beat .btn's own white on the filled WhatsApp button (lavender on purple, 2.98:1). The anchor selector puts white back. */ .footer a.btn,.footer a.btn .btn__label{color:#fff} /* Step numbers on the six service pages were --lavender on white at 1.82:1. --purple-deep is 6.77 and matches the eyebrow numerals elsewhere. */ .prob i{color:var(--purple-deep)} /* ---------- 3b · nav hover: a purple glow, not a dotted underline and a bar (Nitin 7 Sep) ---------- site.css put a dotted underline on :hover and the head sheet drew a 2px purple bar with .nav__link::after. Both are switched off here and replaced with a soft purple pill and glow. The active link keeps a quieter version of the same pill so nothing draws a line. */ .nav__link{transition:color var(--t-mid) var(--ease-out),background-color var(--t-mid) var(--ease-out),box-shadow var(--t-mid) var(--ease-out)} .nav__link::after{display:none} .nav__link:hover,.nav__link:focus-visible{ text-decoration:none; color:var(--purple-deep); background:rgba(130,78,235,.09); box-shadow:0 0 0 1px rgba(130,78,235,.13),0 4px 14px rgba(130,78,235,.26),0 0 22px rgba(130,78,235,.18)} .nav__link.is-active{color:var(--purple-deep);background:rgba(130,78,235,.07);box-shadow:none} .nav__link.is-active:hover{background:rgba(130,78,235,.12);box-shadow:0 0 0 1px rgba(130,78,235,.16),0 4px 14px rgba(130,78,235,.28),0 0 22px rgba(130,78,235,.2)} .nav.is-dark .nav__link:hover,.nav.is-dark .nav__link:focus-visible{ color:#fff;background:rgba(202,183,239,.16); box-shadow:0 0 0 1px rgba(202,183,239,.22),0 4px 16px rgba(130,78,235,.45),0 0 24px rgba(130,78,235,.3)} /* the drawer keeps its tint, but loses any underline for the same reason */ .drawer__link:hover{text-decoration:none;box-shadow:0 0 18px rgba(130,78,235,.18)} /* ---------- 4 · hero: bigger words, a smaller screen, the colour ribbon behind (v6, 7 Sep 2026: a pre-rendered video of the tube, our own render from the reference's measured path, width, colour and timing; the five canvas versions before it were removed on Nitin's word) ---------- */ .hero--v5{overflow:hidden;min-height:94vh;min-height:94svh;display:flex;flex-direction:column;justify-content:center;padding-top:clamp(72px,8vh,104px);padding-bottom:clamp(8px,2vh,24px)} .hero--v5 .hero__inner{width:100%} .skyzone .section.why{padding-top:clamp(8px,1.5vw,20px)} /* The ribbon layer runs from the top of the skyzone down to just above the Why cards. --ribbon-h is written by setRibbonZone() in the page script; the value here is the no-JS fallback. Three parts, and each one is load-bearing: .ribbonzone an opaque white plate. The hero used to paint its own white and hid anything underneath it, so the hero is transparent now and the white lives here instead. .ribbonzone__tube clips the scaled video and carries the bottom fade. The fade has to sit on this box, not on the video: the video is transformed, so a mask on it would be scaled out of view. The white plate stays unmasked, so nothing bleeds through where the tube fades out. .hero__ribbons the video itself, zoomed. On the tube's WEIGHT (Nitin 7 Sep): the design finalized in v6.2 had scale(1.3) inside the hero, whose box matched the video's aspect, so cover added nothing and the effective zoom was 1.30. This taller layer makes cover add 1.153 on its own, so the same 1.3 transform is really 1.50, and 1.6 and 1.75 took it to 1.85 and 2.02 - the tube ended up 1.55x heavier than the finalized design and stopped matching the reference. scale(1.13) x 1.153 = 1.30, which is the finalized weight on the taller layer. Change the transform, never the layer height, if the weight needs to move again. */ .ribbonzone{position:absolute;left:0;top:0;width:100%;height:var(--ribbon-h,116vh);z-index:0;pointer-events:none;background:#fff} .ribbonzone__tube{position:absolute;inset:0;overflow:hidden;overflow:clip; -webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,rgba(0,0,0,.5) 87%,transparent 100%); mask-image:linear-gradient(180deg,#000 0,#000 70%,rgba(0,0,0,.5) 87%,transparent 100%)} .hero__ribbons{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;pointer-events:none;background:transparent;transform:scale(1.13);transform-origin:50% 50%} .skyzone .hero--v5{background:transparent} @media (prefers-reduced-motion:reduce){.ribbonzone{display:none}.skyzone .hero--v5{background:#fff}} @media (max-width:767px){.hero__ribbons{transform:none}} /* The Why heading now sits over the ribbon, so it needs its own layer above it. */ .skyzone .section.why>.wrap{position:relative;z-index:6} .hero--v5 .hero__inner{position:relative;z-index:6} /* 9 Sep 2026: line-height .94 was set when the coloured words were Fredoka, which has short ascenders and descenders and sat comfortably inside a line box tighter than 1. Those words are Plus Jakarta Sans 800 now (Nitin's call), which is taller on both, and at .94 the descender of one line ran into the cap-height of the next. 1.08 clears it and keeps the stacked look. */ .hero--v5 .hero__h1{font-size:clamp(38px,10vw,60px);line-height:1.08;letter-spacing:-.045em} /* Pills and buttons centre on the HEADLINE, not on the grid column (Nitin 7 Sep). .hero__copy is a flex column with align-items:flex-start, so it used to stretch to the whole column (745px at 1440) while the longest headline line is only 585px. The pills centred in the column read 80px right of the text, and the buttons sat hard left. width:fit-content shrinks the column to its widest child, which IS the longest headline line, so "centre" now means centre of the text. max-width:100% keeps it from overflowing when the lines wrap on a phone. */ /* The h1 has to be a flex column for the line above to work. As a block, its max-content width came out as all four headline lines laid END TO END (2053px at 1440), so fit-content on .hero__copy just took the whole column and nothing moved. As a flex column its max-content is the widest single line (585px), which is the number we want. Rendering is identical: h1 height and line height both unchanged, measured. */ .hero--v5 .hero__h1{display:flex;flex-direction:column;align-items:flex-start} .hero--v5 .hero__copy{width:-webkit-fit-content;width:fit-content;max-width:100%} .hero--v5 .hero__badges{margin:0 0 14px;justify-content:center;align-self:stretch} /* Pills and buttons centre on the copy at every width, phones included (Nitin 7 Sep). The gap above the buttons and the space under them are his "padding after the text and the button". */ .hero--v5 .hero__cta{margin-top:clamp(26px,3.2vw,40px);padding-bottom:clamp(18px,2.4vw,30px);align-self:stretch;justify-content:center} .hero__line{white-space:normal} /* 9 Sep 2026 (Nitin): "Run your" is good and "marketing" is bad — the coloured words were Fredoka, which is round and reads soft next to the Plus Jakarta headline they sit inside. Same family, same weight and same size as the words around them now; only the colour differs, which is the whole point of the highlight. The 1.2em/1.12em bumps went with them: they existed to make Fredoka hold its own against a larger face, and against its own face they oversize it. */ .hl{font-family:var(--font-sans);font-weight:800;letter-spacing:inherit;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-inline:.02em .05em} .hl--a{font-size:1em;background-image:linear-gradient(95deg,#6B36D4 0%,#C24BD9 45%,#FF6E45 100%)} .hl--b{font-size:1em;background-image:linear-gradient(95deg,#1D8FF0 0%,#22C4A0 100%)} .hero__right{gap:0} .hero__panel .pane{min-height:360px;padding:26px 16px 28px} .hero--v5 .hero__cta .btn{min-height:46px;padding:0 22px;font-size:15px} @media (min-width:768px){ .hero__line{white-space:nowrap} .hero--v5 .hero__h1{font-size:clamp(48px,7.4vw,72px)} } @media (min-width:1024px){ .hero--v5 .hero__inner{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(12px,1.6vw,24px)} .hero--v5 .hero__h1{font-size:clamp(52px,5.9vw,84px)} .hero__right{justify-self:start;width:100%;max-width:560px} .hero__panel{margin-top:0} } @media (min-width:1400px){ .hero--v5 .hero__h1{font-size:clamp(76px,6.4vw,96px)} } /* ---------- 5 · why: four colour cards ---------- */ .why-card{border:0;border-radius:var(--r-card);padding:22px 22px 20px;box-shadow:none} .why-grid .why-card:nth-child(1){background:linear-gradient(160deg,var(--tl1),var(--tl2))} .why-grid .why-card:nth-child(2){background:linear-gradient(160deg,var(--ts1),var(--ts2))} .why-grid .why-card:nth-child(3){background:linear-gradient(160deg,var(--tm1),var(--tm2))} .why-grid .why-card:nth-child(4){background:linear-gradient(160deg,var(--tp1),var(--tp2))} .why-card:hover{box-shadow:0 30px 60px rgba(10,1,28,.10);border-color:transparent} .why-card__panel{background:rgba(255,255,255,.82);border:0;border-radius:18px;-webkit-backdrop-filter:none;backdrop-filter:none} .why-card__tag{background:#fff;border:0} .why-card__t{font-size:19px;letter-spacing:-.03em} .why-card__d{color:#3B3B45} .why-card__emoji{filter:drop-shadow(0 12px 18px rgba(10,1,28,.16))} @media (max-width:640px){.why-card{padding:16px 12px 14px;border-radius:22px}.why-card__panel{padding:14px 12px 13px}} /* ---------- 6 · services stack: one colour per service ---------- */ .sstk__wrap{border:0;box-shadow:0 30px 80px rgba(10,1,28,.08)} .sstk__card[data-svc="ads"] .sstk__wrap{background:linear-gradient(160deg,var(--ts1),var(--ts2))} .sstk__card[data-svc="social"] .sstk__wrap{background:linear-gradient(160deg,var(--tr1),var(--tr2))} .sstk__card[data-svc="email"] .sstk__wrap{background:linear-gradient(160deg,var(--ty1),var(--ty2))} .sstk__card[data-svc="content"] .sstk__wrap{background:linear-gradient(160deg,var(--tp1),var(--tp2))} .sstk__card[data-svc="seo"] .sstk__wrap{background:linear-gradient(160deg,var(--tm1),var(--tm2))} .sstk__card[data-svc="web"] .sstk__wrap{background:linear-gradient(160deg,var(--tl1),var(--tl2))} .sstk .svc__t{font-size:clamp(28px,2.8vw,40px);letter-spacing:-.04em} .sstk .svc__tag,.svc__tag{background:rgba(255,255,255,.85);color:#0A011C} .sstk .svc__d,.sstk .svc__do li{color:#3B3B45} .sstk .svc__stats{border-top-color:rgba(10,1,28,.12)} .sstk__link{color:#0A011C} /* ---------- 7 · team, how it works ---------- */ .tcard{border:0} .approach .section-head{margin-bottom:clamp(28px,4vw,56px)} .fsh-root{margin-top:clamp(-80px,-7vw,-20px)} /* ---------- 8 · pricing: the offer in lemon, the three plans in mint, lilac, peach ---------- */ .audit{background:linear-gradient(120deg,var(--ty1),var(--ty2));border:0;box-shadow:none;border-radius:var(--r-card)} .audit__tag{background:#0A011C} .pcard{border:0;border-radius:var(--r-card);box-shadow:none} .pcards .pcard:nth-child(1){background:linear-gradient(175deg,var(--tm1),#fff 62%)} .pcards .pcard--popular{background:linear-gradient(175deg,var(--tl1),#fff 62%);box-shadow:inset 0 0 0 2px #824EEB,0 30px 60px rgba(107,54,212,.14)} .pcards .pcard:nth-child(3){background:linear-gradient(175deg,var(--tp1),#fff 62%)} .pcard:hover{box-shadow:0 30px 60px rgba(10,1,28,.10)} .pcards .pcard--popular:hover{box-shadow:inset 0 0 0 2px #824EEB,0 34px 70px rgba(107,54,212,.18)} .pcard__name{font-size:26px;letter-spacing:-.04em} .pcard__amt{font-size:clamp(40px,4.4vw,52px);letter-spacing:-.05em} .pcard__specs,.pcard--popular .pcard__specs{border-top-color:rgba(10,1,28,.10)} .pricing__honest{border:0;background:var(--grey)} /* ---------- 9 · testimonials, contact ---------- */ .tst__badge{border:0;background:var(--grey)} .tst__stat{border:0} .tst__stats .tst__stat:nth-child(1){background:linear-gradient(160deg,var(--tl1),var(--tl2))} .tst__stats .tst__stat:nth-child(2){background:linear-gradient(160deg,var(--ts1),var(--ts2))} .tst__stats .tst__stat:nth-child(3){background:linear-gradient(160deg,var(--tm1),var(--tm2))} .tst__stats .tst__stat:nth-child(4){background:linear-gradient(160deg,var(--tp1),var(--tp2))} .tst__card{border:0;box-shadow:0 20px 50px rgba(10,1,28,.08)} .form{border:0;border-radius:var(--r-card);box-shadow:0 30px 70px rgba(10,1,28,.10)} .field input,.field select,.field textarea{background:var(--grey);border-color:transparent} .form__ok{border:0} .cta__direct{border-top-color:var(--grey-2)} /* ---------- 10 · desktop section index: gone before the footer ---------- */ .sindex.is-off{opacity:0 !important;pointer-events:none} /* ---------- 11 · portfolio page ---------- */ .svcpage .wrap{max-width:1180px} .svcp__h1{font-size:clamp(40px,6vw,76px);font-weight:800;letter-spacing:-.05em;line-height:.98} .svcp__lede{font-size:clamp(17px,1.5vw,21px);line-height:1.55;max-width:64ch} .svcp__h2{font-size:clamp(30px,4.2vw,56px);font-weight:800;letter-spacing:-.045em;line-height:1.04;margin-top:clamp(64px,8vw,110px);text-wrap:balance} .numbers{margin-top:clamp(48px,6vw,84px)} .numbers .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase} .numbers .eyebrow::before{content:"";width:22px;height:1.5px;border-radius:2px;background:#824EEB} .numbers .svcp__h2{margin-top:14px} .cases{margin-top:clamp(28px,3.5vw,44px);display:grid;gap:20px;grid-template-columns:1fr} @media (min-width:700px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}} .case{position:relative;display:flex;flex-direction:column;padding:30px 30px 28px;border:0;border-radius:var(--r-card);overflow:hidden; transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1)} .cases .case:nth-child(1){background:linear-gradient(160deg,var(--ts1),var(--ts2))} .cases .case:nth-child(2){background:linear-gradient(160deg,var(--tm1),var(--tm2))} .cases .case:nth-child(3){background:linear-gradient(160deg,var(--tp1),var(--tp2))} .cases .case:nth-child(4){background:linear-gradient(160deg,var(--tr1),var(--tr2))} @media (hover:hover){.case:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(10,1,28,.10)}} .case__tag{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:rgba(10,1,28,.58)} .case__ring{position:relative;width:140px;height:140px;margin-top:20px} .case__ring svg{width:100%;height:100%;transform:rotate(-90deg);display:block} .ring-bg{fill:none;stroke:rgba(255,255,255,.75);stroke-width:10} .ring-fg{fill:none;stroke-width:10;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:326.7;transition:stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1) .35s} .case.is-in .ring-fg{stroke-dashoffset:calc(326.7 * (1 - var(--p,70) / 100))} .case__num{position:absolute;inset:0;display:grid;place-content:center;text-align:center} .case__num b{font-size:30px;font-weight:800;letter-spacing:-.045em;color:#0A011C;line-height:1} .case__num small{font-size:10px;font-weight:800;letter-spacing:.1em;color:rgba(10,1,28,.58);text-transform:uppercase;margin-top:4px} .case__t{margin-top:18px;font-size:clamp(22px,2vw,28px);font-weight:800;letter-spacing:-.035em;line-height:1.15;color:#0A011C} .case__tlink{color:inherit;text-decoration:none} .case__d{margin-top:12px;font-size:15.5px;line-height:1.65;color:#3B3B45;flex:1} .case__meta{margin-top:22px;padding-top:0;border-top:0;display:flex;flex-wrap:wrap;gap:8px} .case__cover{position:absolute;inset:0;z-index:2} .folio-grid{margin-top:clamp(28px,3.5vw,44px);gap:20px} @media (min-width:700px){.folio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .fcard{border:0;border-radius:var(--r-card);box-shadow:none;background:var(--grey)} .fcard:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(10,1,28,.10)} .fcard__art{border-bottom:0;background:transparent} .fcard__body{padding:22px 24px 26px} .fcard__n{font-size:22px;letter-spacing:-.035em} .fcard__d{color:#3B3B45} .fcard__chip{border:0} .svcp__cta{margin-top:clamp(40px,5vw,64px)} /* ---------- 12 · FAQ page ---------- */ .faq__wrap{display:grid;gap:clamp(32px,5vw,72px);grid-template-columns:1fr;align-items:start;margin-top:clamp(36px,5vw,64px)} @media (min-width:900px){.faq__wrap{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}} .faq__aside{padding:clamp(24px,3vw,34px);border-radius:var(--r-card);background:linear-gradient(160deg,var(--tl1),var(--tl2))} .faq__aside .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase} .faq__aside .eyebrow::before{content:"";width:22px;height:1.5px;border-radius:2px;background:#824EEB} .faq__aside .h3{margin:14px 0 0;font-size:clamp(22px,2.2vw,28px);font-weight:800;letter-spacing:-.035em;line-height:1.15;color:#0A011C} .faq__aside p{margin:10px 0 0;font-size:15px;line-height:1.6;color:#3B3B45} .faq__contact{margin-top:20px;display:flex;flex-wrap:wrap;gap:10px;align-items:center} .faq__contact .btn--ghost{background:rgba(255,255,255,.85)} .faq__row{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#3B3B45;width:100%;margin-top:8px} .faq__list{border-top:1px solid var(--grey-2)} .faq__item{border-bottom:1px solid var(--grey-2)} .faq__q{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:24px 4px;min-height:44px;background:transparent;border:0;text-align:left;cursor:pointer;font:inherit;font-size:clamp(17px,1.8vw,20px);font-weight:700;letter-spacing:-.025em;color:#0A011C;transition:color .25s} .faq__q:hover{color:#6B36D4} .faq__ico{flex:none;width:32px;height:32px;border-radius:50%;margin-top:-2px;display:grid;place-items:center;position:relative;background:var(--grey);transition:background-color .3s,transform .3s} .faq__ico::before,.faq__ico::after{content:"";position:absolute;background:#0A011C;border-radius:2px;transition:transform .3s,background-color .3s} .faq__ico::before{width:12px;height:2px} .faq__ico::after{width:2px;height:12px} .faq__q[aria-expanded="true"] .faq__ico{background:#824EEB;transform:rotate(90deg)} .faq__q[aria-expanded="true"] .faq__ico::before,.faq__q[aria-expanded="true"] .faq__ico::after{background:#fff} .faq__q[aria-expanded="true"] .faq__ico::after{transform:scaleY(0)} .faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 380ms cubic-bezier(.22,1,.36,1)} .faq__q[aria-expanded="true"] + .faq__a{grid-template-rows:1fr} .faq__a > div{overflow:hidden} .faq__a p{margin:0;padding:0 48px 26px 4px;font-size:16px;line-height:1.7;color:#3B3B45;opacity:0;transition:opacity .3s} .faq__q[aria-expanded="true"] + .faq__a p{opacity:1} /* ---------- 13 · services stack, the right-hand card (7 Sep 2026, Nitin, second pass): the workspace pane stays, with its wave, name, figures, three stat tiles and pill; only the left sidebar is hidden. The published card's three infographic tiles sit inside the pane under the figures (fanned as on hover), and section 12's subtle effect runs as a white overlay on the wave. Everything is sized up so the pane fills the card. Tile CSS below is the published page's, verbatim. ---------- */ .sstk__media{padding:14px 14px 14px 0} .sstk__media .shell__main{padding:10px} .sstk__media .pane{padding:26px 22px 24px} .sstk__media .pane__center{max-width:540px} .sstk__media .pane__avatar{width:42px;height:42px;font-size:16px} .sstk__media .pane__name{font-size:19px;margin-top:12px} .sstk__media .pane__meta{font-size:13.5px} .sstk__media .sstk__deck{position:relative;width:100%;height:calc(150px * var(--dk,1.1) + 22px);margin:12px 0 0} .sstk__media .sstk__deck .svc__deck{position:absolute;left:50%;top:10px;width:232px;height:150px;margin:0;transform:translateX(-50%) scale(var(--dk,1.1));transform-origin:top center} /* the deck rests folded (the published card's pose) and fans open .5s after its card comes into view, as the published card does on hover; hover fans it a little wider; it folds again when the card leaves */ .sstk__deck .svc__tile{left:0;top:0;margin-left:0;transition:transform .7s cubic-bezier(.22,1,.36,1),box-shadow .5s ease} .sstk__deck .svc__tile--3{transform:rotate(6deg) translate(16px,5px);box-shadow:0 8px 20px rgba(10,1,28,.14)} .sstk__deck .svc__tile--2{transform:rotate(-5deg) translate(-16px,3px);box-shadow:0 9px 22px rgba(10,1,28,.16)} .sstk__deck .svc__tile--1{transform:rotate(-1deg);box-shadow:0 14px 30px rgba(10,1,28,.2)} .sstk__deck.is-fanned .svc__tile--3{transform:rotate(11deg) translate(48px,-4px);box-shadow:0 16px 32px rgba(10,1,28,.2)} .sstk__deck.is-fanned .svc__tile--2{transform:rotate(-10deg) translate(-48px,-3px);box-shadow:0 16px 32px rgba(10,1,28,.2)} .sstk__deck.is-fanned .svc__tile--1{transform:translateY(-8px) scale(1.03);box-shadow:0 22px 40px rgba(10,1,28,.24)} @media (hover:hover){ .sstk__card:hover .sstk__deck.is-fanned .svc__tile--3{transform:rotate(13deg) translate(58px,-8px)} .sstk__card:hover .sstk__deck.is-fanned .svc__tile--2{transform:rotate(-12deg) translate(-58px,-6px)} .sstk__card:hover .sstk__deck.is-fanned .svc__tile--1{transform:translateY(-12px) scale(1.05)} } .sstk__media .pane__tiles{gap:10px;margin-top:14px;max-width:540px} .sstk__media .tile{padding:10px 9px 9px} .sstk__media .tile__l{font-size:9.5px;letter-spacing:.06em} .sstk__media .tile__v{font-size:14px} .sstk__media .tile__ring b{font-size:15px;letter-spacing:-.02em} .sstk__media .tile__ring small{font-size:9.5px} .sstk__media .tile--ring{gap:8px} .sstk__media .tile--ring svg{width:40px;height:40px} .sstk__media .tile__logos{gap:6px} .sstk__media .tile__logos span{width:24px;height:24px;border-radius:7px} .sstk__media .tile__logos svg{width:14px;height:14px} .sstk__media .tile__bars{height:26px} .sstk__media .pane__pill{height:44px;font-size:14px;margin-top:14px;max-width:540px} .sstk__fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:.9;display:block} .sstk__panel{display:none} @media (max-width:767px){.sstk__media{height:auto;padding:12px 12px 0}.sstk__media .pane{padding:22px 14px 20px}} @media (prefers-reduced-motion:reduce){.sstk__deck .svc__tile{transition:none}} .svc__deck{position:relative;height:188px;width:100%;margin:0 0 10px} .svc__tile{position:absolute;left:50%;top:16px;margin-left:-116px;width:232px;height:150px;border-radius:13px;overflow:hidden;background:#fff;border:1px solid var(--border);transform-origin:center bottom;transition:transform .6s var(--ease-out),box-shadow .45s var(--ease-out);will-change:transform} .svc__tile--3{z-index:1;transform:rotate(6deg) translate(16px,5px);box-shadow:0 8px 20px rgba(10,1,28,.10)} .svc__tile--2{z-index:2;transform:rotate(-5deg) translate(-16px,3px);box-shadow:0 9px 22px rgba(10,1,28,.12)} .svc__tile--1{z-index:3;transform:rotate(-1deg);box-shadow:0 14px 30px rgba(10,1,28,.16)} .mk{width:100%;height:100%;display:flex;flex-direction:column;background:#fff;font-size:10px;line-height:1} .mk *{box-sizing:border-box} .mk__hd{display:flex;align-items:center;gap:5px;padding:7px 8px;flex:none} .mk__av{width:15px;height:15px;border-radius:50%;flex:none;background:linear-gradient(140deg,var(--purple),var(--purple-deep))} .mk__nm{height:5px;width:50px;border-radius:3px;background:#d6d0e4;flex:none} .mk__nm.sm{width:32px} .mk__nm.wide{width:64px} .mk__more{margin-left:auto;color:#b7b0c6;font-weight:900;letter-spacing:.5px} .mk__img{flex:1;position:relative;background:linear-gradient(135deg,#9463EE,#6B36D4)} .mk__ft{display:flex;align-items:center;gap:6px;padding:6px 8px;flex:none} .mk__ln{height:5px;border-radius:3px;background:#e4dfee} .mk__ic{width:13px;height:13px;color:#8f88a3;flex:none} .mk__chip{font-size:7px;font-weight:900;letter-spacing:.06em;color:#fff;background:var(--purple);padding:2px 5px;border-radius:4px} .mk__btn{font-size:8px;font-weight:800;color:#fff;background:linear-gradient(140deg,var(--purple),var(--purple-deep));padding:4px 9px;border-radius:999px;flex:none} .mk__big{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-weight:900;font-size:26px;letter-spacing:-.03em;text-shadow:0 2px 6px rgba(0,0,0,.18)} .mk__play{position:absolute;inset:0;margin:auto;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;box-shadow:0 4px 12px rgba(0,0,0,.2)} .mk__play svg{width:14px;height:14px;color:var(--purple-deep);margin-left:2px} .mk__dur{position:absolute;right:7px;bottom:7px;font-size:8px;font-weight:800;color:#fff;background:rgba(10,1,28,.55);padding:2px 5px;border-radius:4px} .mk__sq{width:14px;height:14px;border-radius:4px;flex:none;background:linear-gradient(140deg,var(--purple),var(--purple-deep))} .mk__body{flex:1;padding:8px;display:flex;flex-direction:column;gap:5px} .mk__pin{color:#fff} .mk__stars{display:flex;gap:1.5px;color:var(--gold);align-items:center} .mk__stars small{color:#8f88a3;font-weight:800;font-size:8px;margin-left:3px} .mk__img--warm{background:linear-gradient(135deg,#F7C56B,#EC8A46)} .mk__img--pink{background:linear-gradient(135deg,#F58BC0,#C247A0)} .mk__img--blue{background:linear-gradient(135deg,#6FA8F2,#3E6AD4)} .mk__img--green{background:linear-gradient(150deg,#84C98F,#3E8E52)} .mk--soft .mk__img{opacity:.9} .mk--soft .mk__ft .mk__ln{background:#e9e4f1} .mk__hd--browser{gap:4px;border-bottom:1px solid #efeaf6} .mk__dot{width:7px;height:7px;border-radius:50%;flex:none} .mk__dot--r{background:#FF5F57} .mk__dot--y{background:#FEBC2E} .mk__dot--g{background:#28C840} .mk__url{flex:1;height:9px;border-radius:5px;background:#F0ECF8;margin:0 4px} .mk__chip--seo{background:#1f9d57} .mk__webhero{flex:1;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:10px 12px;background:linear-gradient(135deg,#9463EE,#6B36D4)} .mk__cta2{margin-top:3px;align-self:flex-start;font-size:8px;font-weight:800;color:var(--purple-deep);background:#fff;padding:3px 8px;border-radius:999px} .mk__spark{width:56px;height:16px;flex:none} .mk__stat{margin-left:auto;font-size:8.5px;font-weight:900;color:#1f9d57;white-space:nowrap} .mk__likes{display:inline-flex;align-items:center;gap:3px;font-size:8.5px;font-weight:800;color:#8f88a3} .mk__likes svg{width:10px;height:10px;color:#E1306C} .mk__plats{position:absolute;left:6px;bottom:6px;display:flex;gap:3px;z-index:2} .mk__plats2{margin-left:auto;display:flex;gap:3px} .mk__plats svg,.mk__plats2 svg{width:16px;height:16px;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.22);display:block} .mk__av--ig{background:linear-gradient(135deg,#FEDA75,#FA7E1E 35%,#D62976 65%,#962FBF)!important} /* ================================================================ FOOTER v2 · every page · added 8 Sep 2026 (Nitin) ---------------------------------------------------------------- Until today only the homepage had this footer. It lived in site.css, and site.css is the one sheet the other 22 pages never load, so the service, portfolio, FAQ, legal and 404 pages carried either an older footer or a 238-byte stub. It is here, in theme.css, because theme.css is the ONE sheet every page loads. Everything below is scoped under .footer--v2 and is deliberately self-contained: the legal pages and 404 have almost no CSS of their own, so the footer cannot borrow .btn, .soc or .logo from a page sheet that may not exist. Scoping also means it cannot leak onto anything else. ================================================================ */ .footer--v2{position:relative;background:#0A011C;color:#CCC5E0;border-top:1px solid rgba(255,255,255,.08);padding:clamp(44px,6vw,80px) 0 26px;overflow:hidden} .footer--v2 .wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:20px} .footer--v2 *{box-sizing:border-box} .footer--v2 .footer__head{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:clamp(34px,4vw,56px)} .footer--v2 .footer__headr{display:flex;align-items:center;gap:18px} .footer--v2 .footer__loc{font-size:13px;color:#8F86A6} .footer--v2 .footer__social{display:flex;gap:10px;margin:0} .footer--v2 .logo{display:inline-flex;align-items:center;gap:11px;padding:6px;border-radius:10px;flex:none} .footer--v2 .logo__img{height:34px;width:auto;display:block} .footer--v2 .soc{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);border-radius:12px;color:#B6AEC6;text-decoration:none; transition:background-color .16s,color .16s,border-color .16s,transform .16s} .footer--v2 .soc svg{display:block} @media (hover:hover) and (pointer:fine){ .footer--v2 .soc:hover{background:#824EEB;border-color:#824EEB;color:#fff;transform:translateY(-2px)}} .footer--v2 .footer__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px} .footer--v2 .footer__ct{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#B999FF;font-weight:700;margin:0 0 16px} .footer--v2 .footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .footer--v2 .footer__col a{color:#CCC5E0;text-decoration:none;font-size:15px;transition:color .25s} .footer--v2 .footer__col a:hover{color:#fff;text-decoration:underline dotted;text-underline-offset:.3em} .footer--v2 .footer__addr{font-style:normal;font-size:15px;line-height:1.5;color:#CCC5E0;margin:0 0 14px} .footer--v2 .footer__btns{display:flex;flex-wrap:wrap;gap:8px} /* Buttons are written out in full rather than inheriting .btn: privacy, terms, accessibility and 404 have no button styles at all. */ .footer--v2 .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 20px; border-radius:999px;font-size:14px;font-weight:700;letter-spacing:-.01em;text-decoration:none;cursor:pointer; background:#824EEB;color:#fff;border:1px solid transparent;transition:background-color .18s,border-color .18s,transform .2s} .footer--v2 .btn:hover{background:#9061EF} .footer--v2 .btn--onDark{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.26);color:#fff} .footer--v2 .btn--onDark:hover{background:rgba(255,255,255,.18)} .footer--v2 .btn__label{white-space:nowrap} .footer--v2 .btn svg{flex:none} .footer--v2 .nl__form{display:flex;gap:8px;flex-wrap:wrap;margin:0} .footer--v2 .nl__input{flex:1 1 170px;min-height:44px;padding:0 16px;border-radius:10px; background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.16);color:#fff;font-size:15px; transition:border-color .22s,background-color .22s} .footer--v2 .nl__input::placeholder{color:#8F86A6} .footer--v2 .nl__input:focus{outline:none;border-color:#9E76F2;background:rgba(255,255,255,.10)} .footer--v2 .nl__btn{flex:none} .footer--v2 .nl__ok{margin-top:14px;font-size:14px;font-weight:700;color:#CAB7EF} .footer--v2 .footer__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .footer--v2 .footer__nlnote{font-size:12.5px;line-height:1.5;color:#8F86A6;margin:12px 0 0} .footer--v2 .footer__mark{margin-top:clamp(44px,7vw,96px);font-size:clamp(78px,19.2vw,282px);font-weight:800; letter-spacing:-.055em;line-height:.82;text-align:left;color:transparent; -webkit-text-stroke:1.5px rgba(158,118,242,.9);white-space:nowrap;overflow:hidden;user-select:none; -webkit-mask-image:linear-gradient(180deg,#000 25%,rgba(0,0,0,.12) 100%); mask-image:linear-gradient(180deg,#000 25%,rgba(0,0,0,.12) 100%)} .footer--v2 .footer__bot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px; border-top:1px solid rgba(255,255,255,.08);padding-top:22px;margin-top:26px;font-size:13px;color:#8F86A6} .footer--v2 .footer__legal{display:flex;gap:18px;flex-wrap:wrap} .footer--v2 .footer__legal a{color:#CCC5E0;text-decoration:underline dotted;text-underline-offset:.3em;font-size:13px} /* "Designed and built by 77 Media" — Nitin, 8 Sep: it links to the page that sells exactly that, so the site is its own advert for the service. */ .footer--v2 .footer__by{color:#CCC5E0;font-weight:700;text-decoration:underline dotted;text-underline-offset:.3em} .footer--v2 .footer__by:hover{color:#fff} @media (min-width:900px){.footer--v2 .footer__grid{grid-template-columns:1fr 1fr 1.1fr 1.5fr;gap:40px 32px}} @media (max-width:640px){ .footer--v2 .footer__head{flex-direction:column;align-items:flex-start} .footer--v2 .footer__mark{-webkit-text-stroke-width:1px}} /* ================================================================ ANCHOR LANDINGS · added 8 Sep 2026 The nav is sticky and 82px tall at the bottom edge, and the target sections had scroll-margin-top:0 — so #pricing landed with the heading tucked under the bar. Measured, not guessed. ================================================================ */ #services,#team,#approach,#pricing,#contact,#packages,#process,#start{scroll-margin-top:100px} /* ================================================================ SERVICE CARDS · whole card clickable (Nitin, 8 Sep 2026) Only the H3 and the "Full service page" link were clickable, and both already point at the same service page. So the second one is stretched over the whole card rather than a new link being added: one destination, one link in the accessibility tree, no nesting of a block inside an anchor. ================================================================ */ /* NOTE, 8 Sep 2026: this used to say .sstk__card{position:relative} and it broke the sticky card stack on the homepage at every width, because site.css sets position:sticky here and theme.css loads last. Do not reintroduce it. The hit overlay does not need it: position:sticky is already a containing block for an absolutely positioned child. */ /* A real anchor laid over the card, appended as the LAST child of .sstk__wrap. The first attempt used .sstk__link::after with inset:0. It covered the copy column on every card and the media panel on only two of the six, because the mockup decks inside the media panel build their own stacking contexts and a pseudo-element buried in .sstk__copy could not reliably out-rank them. A sibling element in the same stacking context as the media, painted last, always wins. It is aria-hidden and not focusable: the visible title link and "Full service page" link, which point at the same page, are what the keyboard and a screen reader use. */ .sstk__hit{position:absolute;inset:0;z-index:30;display:block;border-radius:inherit;text-indent:-9999px;overflow:hidden} @media (hover:hover) and (pointer:fine){ .sstk__card:hover{cursor:pointer} .sstk__card:hover .sstk__link{text-decoration:underline;text-underline-offset:3px}} /* ================================================================ PRICING · the website-build teaser under the free audit (Nitin, 8 Sep 2026) ================================================================ */ .wbanner{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px; margin:22px 0 30px;padding:22px 26px;border-radius:24px; background:linear-gradient(112deg,#F4F1FB 0%,#EFF5FC 46%,#FBF2EC 100%); border:1px solid rgba(130,78,235,.16);text-decoration:none;color:#0A011C; transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s cubic-bezier(.22,1,.36,1)} @media (hover:hover) and (pointer:fine){ .wbanner:hover{transform:translateY(-2px);box-shadow:0 16px 40px rgba(130,78,235,.16)} .wbanner:hover .wbanner__go{background:#6B36D4}} .wbanner__tag{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:#fff;background:#0A011C;padding:5px 11px;border-radius:6px} .wbanner__body{flex:1 1 300px;min-width:220px} .wbanner__t{display:block;font-size:clamp(18px,2.1vw,23px);font-weight:800;letter-spacing:-.03em;line-height:1.25} .wbanner__t b{color:#6B36D4} .wbanner__d{display:block;margin-top:6px;font-size:14px;line-height:1.55;color:#4E5255} .wbanner__go{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 20px; border-radius:999px;background:#824EEB;color:#fff;font-size:14.5px;font-weight:700; transition:background-color .18s} @media (max-width:600px){.wbanner{padding:20px}.wbanner__go{width:100%;justify-content:center}} /* ================================================================ SKIP LINK on the four pages that carry no site stylesheet privacy, terms, accessibility and 404 all ship