/* FIN / Sculptural identity. Page-local composition and readable fallbacks. */ :root{--svc-bg:#070b0a;--svc-ink:#eff4ef;--svc-muted:#a0afa7;--svc-line:rgba(188,222,205,.13);--svc-gold:#69e8ad;--svc-gold-light:#b4f4d6;--svc-panel:#111b17;--svc-panel2:#17221d} .svc-page-bg{background:radial-gradient(ellipse at 78% 34%,#10271e 0,transparent 46%),#070b0a} .svc-nav{padding:26px 4.5vw} .svc-nav-pills{justify-content:space-between;max-width:1400px;margin:auto} .svc-nav-pill-brand{background:none;border-color:transparent;padding-left:0} .svc-nav-pill{height:46px} .svc-nav-brand-word{letter-spacing:.12em;font-size:13px} .svc-nav-mobile-panel{left:auto;right:0;transform:none} .svc-nav-mini[open] .svc-nav-mobile-panel{animation:none} .svc-hero{min-height:790px;min-height:min(920px,100svh);padding:170px 0 80px;display:flex;align-items:center;box-sizing:border-box} .svc-hero .container{width:91%;max-width:1400px;margin:auto;padding:0} .svc-hero .container::before{display:none} .svc-eyebrow{font-size:11px;letter-spacing:.2em;margin-bottom:30px;color:#abc6b7} .svc-h1{font-size:clamp(72px,7.6vw,118px);font-weight:500;letter-spacing:-.075em;line-height:.95;margin-bottom:30px;max-width:56%} .svc-h1 span:last-child{color:#8febbc} .svc-hero-sub{font-size:16px;line-height:1.75;max-width:370px;color:#a9b8af;margin-bottom:28px} .svc-search{max-width:440px;border-radius:12px;border:1px solid rgba(166,218,191,.23);background:rgba(14,26,20,.88);box-shadow:0 12px 45px #0003;backdrop-filter:blur(20px)} .svc-search:focus-within{border-color:#79e8b0;box-shadow:0 0 0 3px #79e8b012} .svc-search input{font-size:13px;min-width:0} .svc-search-clear[hidden]{display:none} .svc-hero-canvas{transition:opacity .7s ease} /* The hero canvas normally sits at z-index:0 (services.css), BEHIND .svc-main-wrap's z-index:1 — deliberately, so the FIN ribbon reads as a dimmed backdrop through the catalogue rather than fighting card text. But a category morph target (the Reforma pillars etc.) needs to actually read clearly at the moment it forms next to its own card, the same way the old per-card badge canvas did by sitting above this layer entirely (z-index:2). sculpture.js toggles this class on/off around that moment only — the hero ribbon itself still renders dimmed the rest of the time. */ .svc-hero-canvas.svc-morph-lifted{z-index:5} .svc-stats{position:relative;z-index:1;background:rgba(7,11,10,.8);border-top:1px solid var(--svc-line);border-bottom:1px solid var(--svc-line);backdrop-filter:blur(18px);padding:32px 0} .svc-stats-row{max-width:1400px;width:91%;gap:32px} .svc-stat-tile{background:none;border:0;border-radius:0;box-shadow:none;padding:0 24px;border-left:1px solid var(--svc-line)} .svc-stat-n{font-weight:400;letter-spacing:-.06em;color:#e6f5ec} .svc-stat-label{color:#8fa89a;font-size:11px;letter-spacing:.05em} .svc-main-wrap{position:relative;z-index:1;background:linear-gradient(#070b0afa,#070b0ac9);padding-top:70px} .svc-section-head{padding-bottom:25px} .svc-section-label{font-size:clamp(24px,3vw,40px);font-weight:450;letter-spacing:-.04em;text-transform:none;color:#edf3ee} .svc-section-badge{background:none;color:#8fab9a;border-color:var(--svc-line)} .svc-cat-card{border-color:var(--svc-line);background:transparent;border-radius:0;transition:background .35s, border-color .35s,transform .35s} .svc-cat-card:hover{background:linear-gradient(90deg,#7aecab0d,transparent);border-color:#73dca663;transform:translateX(4px)} .svc-cat-title{font-weight:450;letter-spacing:-.035em} .svc-cat-index{color:#6b8c7b} .svc-cat-cta{color:#a2d7b9} .svc-foot{position:relative;z-index:1;background:#080f0be8;padding-top:64px} .svc-foot-logo .svc-brand-word{background:none;color:#d5eddf;letter-spacing:.15em;font-size:12px} @media(min-width:980px){.svc-hero:after{content:'SOARES / FIN';position:absolute;right:8%;bottom:44px;font:10px var(--svc-num);letter-spacing:.32em;color:#638d76}} @media(max-width:979px) and (min-width:701px){.svc-h1{font-size:80px}.svc-hero{min-height:820px}.svc-hero-sub,.svc-search{max-width:350px}} @media(max-width:700px){ .svc-nav{padding:18px 22px}.svc-nav-pill-brand{padding-right:4px}.svc-nav-brand-word{font-size:11px} .svc-hero{display:block;padding:115px 0 420px;min-height:0} .svc-hero .container{width:calc(100% - 44px)} .svc-eyebrow{margin-bottom:22px;font-size:10px} .svc-h1{font-size:clamp(61px,15vw,90px);max-width:100%;margin-bottom:24px;line-height:.96} .svc-hero-sub{max-width:340px;font-size:14px;line-height:1.7;margin-bottom:22px} .svc-search{max-width:none;width:100%}.svc-search input{font-size:12px} .svc-stats{padding:24px 0}.svc-stats-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:calc(100% - 32px)} .svc-stat-tile{padding:0 10px}.svc-stat-n{font-size:29px}.svc-stat-label{font-size:9px;line-height:1.6} .svc-main-wrap{padding-top:40px}.svc-cat-title{font-size:25px}.svc-cat-card{min-height:115px} } /* Keep the requested services near the search field when browsing. */ body.svc-browsing .svc-hero{min-height:0;padding:125px 0 36px;display:block} body.svc-browsing .svc-h1{font-size:42px;display:flex;flex-direction:row;flex-wrap:wrap;gap:0 .22em;max-width:100%;margin-bottom:24px;letter-spacing:-.055em} body.svc-browsing .svc-eyebrow{margin-bottom:18px} body.svc-browsing .svc-hero-sub,body.svc-browsing .svc-stats,body.svc-browsing .svc-hero:after{display:none} body.svc-browsing .svc-main-wrap{padding-top:12px} @media(max-width:700px){body.svc-browsing .svc-hero{padding:105px 0 28px}body.svc-browsing .svc-h1{font-size:32px}} @media(prefers-reduced-motion:reduce){.svc-hero-canvas,.svc-cat-card{transition:none}} /* Financial-product direction: composed, data-led, and intentionally spare. */ :root{--svc-bg:#080d0f;--svc-ink:#f1f5f4;--svc-muted:#a3b0b0;--svc-line:rgba(188,211,211,.14);--svc-gold:#49d39a;--svc-gold-light:#b6f4dc;--svc-panel:#10191b;--svc-panel2:#152124} .svc-page-bg{background:radial-gradient(ellipse 60% 55% at 78% 24%,rgba(29,83,73,.25),transparent 74%),linear-gradient(135deg,#080d0f,#070c0d)} .svc-page-bg::after{content:"";position:absolute;inset:0;opacity:.28;background-image:linear-gradient(rgba(171,217,208,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(171,217,208,.035) 1px,transparent 1px);background-size:58px 58px;mask-image:linear-gradient(to bottom,#000,transparent 70%)} .svc-nav{padding:20px 4.5vw;border-bottom:1px solid rgba(190,218,213,.1);background:linear-gradient(to bottom,rgba(8,13,15,.72),transparent)} .svc-nav-pill{height:40px;border-radius:9px;background:rgba(16,25,27,.66);border-color:rgba(190,218,213,.16);box-shadow:none} .svc-nav-pill-brand{background:transparent;border-color:transparent}.svc-nav-brand-word{font-size:11px;letter-spacing:.17em} .svc-hero{min-height:min(840px,100svh);padding-top:150px}.svc-eyebrow{font-size:10px;letter-spacing:.24em;color:#91aaa5;margin-bottom:24px} .svc-h1{font-size:clamp(60px,6.3vw,98px);font-weight:520;letter-spacing:-.065em;line-height:.94;max-width:50%;margin-bottom:28px}.svc-h1 span:last-child{color:#79deb1} .svc-hero-sub{font-size:15px;line-height:1.7;max-width:400px;color:#b0bbbb}.svc-search{height:54px;border-radius:10px;background:rgba(15,25,27,.76);border-color:rgba(186,222,215,.2);box-shadow:none}.svc-search:focus-within{border-color:#76dfb1;box-shadow:0 0 0 3px rgba(73,211,154,.1)} .svc-fin-status{width:min(440px,100%);display:flex;justify-content:space-between;gap:18px;margin-top:16px;color:#8ea09f;font:10px var(--svc-num);letter-spacing:.08em;text-transform:uppercase}.svc-fin-status span{display:inline-flex;align-items:center;gap:7px}.svc-fin-status i{font-size:7px;color:#54dca1;filter:drop-shadow(0 0 5px #54dca1)} .svc-stats{background:rgba(10,16,18,.84);border-color:rgba(190,218,213,.13);backdrop-filter:blur(24px)}.svc-stats-row{gap:0}.svc-stat-tile{padding:4px 28px;border-left:1px solid rgba(190,218,213,.13)}.svc-stat-tile:first-child{border-left:0}.svc-stat-n{font-family:var(--svc-num);font-size:34px;letter-spacing:-.08em}.svc-stat-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase} .svc-main-wrap{background:linear-gradient(rgba(8,13,15,.95),rgba(8,13,15,.985));padding-top:76px}.svc-section-label{font-size:clamp(25px,2.7vw,37px);font-weight:500;letter-spacing:-.045em}.svc-section-badge{font:10px var(--svc-num);letter-spacing:.1em;text-transform:uppercase;padding:7px 9px;border-radius:6px} .svc-cat-grid{gap:10px}.svc-cat-card{min-height:116px;padding:22px 24px;border:1px solid rgba(190,218,213,.14);border-radius:12px;background:rgba(15,25,27,.42)}.svc-cat-card:hover{transform:translateY(-2px);border-color:rgba(104,225,173,.52);background:linear-gradient(135deg,rgba(40,117,91,.16),rgba(15,25,27,.58))}.svc-cat-title{font-weight:550}.svc-cat-count{font-family:var(--svc-num);font-size:11px;letter-spacing:.06em}.svc-cat-index{font-family:var(--svc-num);font-size:11px}.svc-cat-cta{font:11px var(--svc-num);letter-spacing:.08em;text-transform:uppercase} .svc-service-row{border-color:rgba(190,218,213,.14)}.svc-btn{border-radius:8px;font-family:var(--svc-num);font-size:11px;letter-spacing:.03em}.svc-foot{background:#080d0f}.svc-foot-logo .svc-brand-word{letter-spacing:.18em} @media(max-width:700px){.svc-nav{padding:16px 22px}.svc-hero{padding-top:108px}.svc-h1{font-size:clamp(54px,14vw,76px);max-width:100%}.svc-fin-status{font-size:8px;gap:8px}.svc-stat-tile{padding:0 10px}.svc-stat-n{font-size:27px}.svc-cat-card{border-radius:10px;min-height:108px;padding:19px 16px}.svc-main-wrap{padding-top:44px}} /* ---- Ambient continuity pass — the sculpture is meant to be the page's backdrop everywhere, not just behind the hero. The catalogue and footer above paint a near-opaque panel over the whole fixed canvas, which is why the S reads as confined to one section. The first version of this fix still used enough opacity + blur that the S washed out to a barely-there smudge here — legibility already comes from each .svc-cat-card's own background (below), not from this wrapper, so it can stay much lighter. */ .svc-main-wrap{background:linear-gradient(rgba(8,13,15,.38),rgba(8,13,15,.58));backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)} .svc-foot{background:rgba(8,13,15,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)} /* ---- Minimal-nav pass — a single centered "+" (still the same
menu toggle, just icon-only now) instead of a brand pill + "Menu" label, with the language switcher moved from the hidden mobile panel into a pill on the left so it's reachable without opening the menu. Grid instead of flex: with only two real children (lang, "+"), an empty 1fr third column is enough to keep the "+" mathematically centered regardless of how wide the language pill is — no spacer element needed. The header itself goes fixed so it survives scrolling instead of living only over the hero. */ .svc-nav{position:fixed;top:0;left:0;right:0;z-index:40;border-bottom:0;background:none} /* A 1fr/auto/1fr grid only truly centers the middle column when both outer columns are equally empty — with a real flag pill sitting in the left one, its min-content width was winning space off the empty right column, so the "+" landed right-of-centre instead of centred. Grouping both as one flex pair and centering the PAIR (not each in its own track) is what "ao lado do +, centrado" actually means anyway. */ .svc-nav-pills{display:flex;justify-content:center;align-items:center;gap:10px} .svc-nav-menu-label,.svc-eyebrow,.svc-fin-status,.svc-stats{display:none} /* Hero no longer needs to reserve room for the two rows just hidden above — letting it size to its remaining content (still just the headline + subtitle) is what actually moves everything up, rather than a padding number to tune by hand. */ .svc-hero{min-height:0;padding-bottom:60px} @media(max-width:700px){.svc-hero{padding:96px 0 340px}} /* A whiter, more present subtitle than the muted grey it had — the ask was specifically for more contrast here, not just brighter overall — and bigger, matching the bigger headline below. */ .svc-hero-sub{color:#eef5f1;font-size:23px;max-width:600px;line-height:1.5} @media(max-width:700px){.svc-hero-sub{font-size:19px;max-width:460px}} /* ---- Flag-only language button — the shared switcher (i18n.php, used site-wide) always renders " ▾" in its trigger button; that markup isn't ours to change from one page, so the name/arrow are hidden here with font-size:0 instead — the flag stays visible because it's an with real width/height attributes, unaffected by font-size. The dropdown itself (.ddmenu) is a sibling of the button, not a descendant, so it keeps its own normal font-size and still spells names out in full. */ /* The shared component also carries `.dd{width:100%}` (built for a full-width mobile menu row) that was never neutralised here — the outer .dd div was stretching wider than the 46px button inside it, and that extra box (its own hover/border styling from the shared stylesheet) showing through past the button's edge is the "second button behind it" effect. Pinning the wrapper to the button's exact size removes the extra box outright rather than trying to hide whatever was drawing in it. */ /* Couldn't pin down which shared rule was still leaking through on real phones (no !important and no obvious mobile-only override found in assets/styles-v2.css) — forcing every box-model property that could plausibly be the source, on both the wrapper and the button, rather than keep guessing at the one exact property. */ .svc-nav-lang .dd.lang-switcher{ position:relative !important;width:46px !important;height:46px !important; display:inline-block !important;margin:0 !important;padding:0 !important; border:0 !important;background:none !important;box-shadow:none !important; } .svc-nav-lang .dd.lang-switcher>button[data-ddbtn]{ all:unset;box-sizing:border-box;cursor:pointer;font-size:0; display:flex !important;align-items:center;justify-content:center; width:46px !important;height:46px !important;margin:0 !important;padding:0 !important; border-radius:14px; background:linear-gradient(155deg,rgba(255,255,255,.24),rgba(255,255,255,.03) 45%,rgba(255,255,255,.1)) !important; border:1px solid rgba(255,255,255,.3) !important; box-shadow:0 4px 0 0 rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.4) !important; transition:transform .06s ease,box-shadow .06s ease; } .svc-nav-lang .dd.lang-switcher>button[data-ddbtn]:active{ transform:translateY(4px); box-shadow:0 1px 0 0 rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35); } .svc-nav-lang .dd.lang-switcher>button[data-ddbtn] img.flag-ico{margin:0 !important} /* The pill wrapper itself no longer needs its own glass treatment now that the button inside carries it — kept only as a plain flex slot. Found the real cause of the persistent "second button": an original glass-pill rule for .svc-nav-lang itself, from before the button carried its own styling, was still sitting further down this same file and winning the cascade (same selector, later source order) over this reset — deleted outright rather than just reset again. !important here too, since that was clearly not a safe assumption to skip twice. */ .svc-nav-lang{ background:none !important;border:0 !important;box-shadow:none !important; padding:0 !important;margin:0 !important;height:46px !important;width:46px !important; display:inline-flex !important; } /* ---- "+" panel — a proper glass menu (gradient + inset highlight, softer link rows with a real hover/press response) instead of a flat dark list. */ .svc-nav-mobile-panel{ background:linear-gradient(160deg,rgba(28,42,35,.97),rgba(13,20,17,.98)); border:1px solid rgba(255,255,255,.14); box-shadow:0 24px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.07); padding:10px;gap:3px; } .svc-nav-mobile-panel a{ border-radius:11px;padding:13px 16px;font-size:15px;font-weight:650; transition:background .15s ease,color .15s ease,transform .08s ease; } .svc-nav-mobile-panel a:hover{background:rgba(255,255,255,.08);color:#fff} .svc-nav-mobile-panel a:active{transform:scale(.97)} .svc-nav-mobile-panel a.btn.dark{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)} .svc-nav-mobile-panel a.btn.primary{ background:linear-gradient(135deg,#8ff0c4,#49d39a);color:#06231a;font-weight:800; box-shadow:0 8px 20px rgba(73,211,154,.35); } .svc-nav-mobile-panel a.btn.primary:hover{background:linear-gradient(135deg,#a6f4d3,#5fe0ac)} /* ---- Both dropdowns floating properly, centred under their own button — neither was built for a small pill sitting alone in the middle of the bar. ---- */ /* Leftover from when the "+" button lived at the far right edge: right- aligning its panel to the trigger made sense there, but now that the button is centred, the same rule leaves the panel hugging one side instead of centred under it. */ .svc-nav-mobile-panel{left:50%;right:auto;transform:translateX(-50%)} /* The shared language dropdown (assets/styles-v2.css) is built as an in-flow, full-width mobile accordion (`position:static;width:100%`) for the site's normal hamburger menu — inside our small centred pill that just means it expands to whatever container width it can claim and pushes into the page rather than floating as a card. Rebuilt here as a proper floating dropdown matching the "+" panel's own treatment, `!important` because it's fighting a foreign stylesheet's assumptions, not our own cascade. */ .svc-nav-lang .dd.lang-switcher .ddmenu{ position:absolute !important;width:auto !important;margin:0 !important;box-shadow:none !important; left:50%;right:auto;top:56px;transform:translateX(-50%); min-width:220px;max-width:min(88vw,320px); background:var(--svc-panel2);border:1px solid var(--svc-line);border-radius:14px; box-shadow:0 24px 60px rgba(0,0,0,.55) !important;padding:8px;z-index:45; } @media(prefers-reduced-motion:no-preference){ .svc-nav-lang .dd.lang-switcher.open .ddmenu{animation:svcNavPanelIn .22s var(--svc-spring)} } /* ---- Tactile glass "+" — a physical button, not a flat icon tile: a glass gradient + inset highlight for the "mirror" read, and a solid bottom edge that the button visibly loses on press (box-shadow shrinks, button translates down by the edge height) so pressing it reads as a real push rather than just a colour change. */ .svc-nav-pill-menu{ width:46px;height:46px;padding:0;justify-content:center;border-radius:14px; background:linear-gradient(155deg,rgba(255,255,255,.24),rgba(255,255,255,.03) 45%,rgba(255,255,255,.1)); border:1px solid rgba(255,255,255,.3); box-shadow:0 4px 0 0 rgba(0,0,0,.5),0 8px 20px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.4); transition:transform .06s ease,box-shadow .06s ease; } .svc-nav-pill-menu:active{ transform:translateY(4px); box-shadow:0 1px 0 0 rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.35); } /* ---- Headline: bigger still, and each line arrives from a different direction in slow motion — top, bottom, side — rather than all three sharing one straight-up fade. Overrides the shared .reveal keyframe by selector specificity (this is more specific than the base .reveal / .delay-N rules), so services.css itself is untouched. */ .svc-h1{font-size:clamp(88px,10.8vw,184px);max-width:66%} @media(max-width:700px){.svc-h1{font-size:clamp(76px,23vw,136px);max-width:100%}} /* Bigger still, matching the headline: "O que precisa hoje?" + the "10 áreas" badge next to it. */ .svc-section-label{font-size:clamp(32px,3.8vw,50px)} .svc-section-badge{font-size:13px;padding:8px 12px} @media(max-width:700px){.svc-section-label{font-size:clamp(28px,8vw,38px)}} /* Slower and later: each word now takes 2.2s (was 1.35s) and the whole sequence starts after a beat (.4s) so the page background is visibly there first, then the words arrive one at a time, well before the sculpture starts materializing (gated separately, in sculpture.js). */ @media(prefers-reduced-motion:no-preference){ .svc-h1 span.reveal{opacity:0;animation-duration:2.2s;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:forwards;animation-iteration-count:1;} .svc-h1 span.reveal:nth-child(1){animation-name:svcWordTop;animation-delay:.4s} .svc-h1 span.reveal:nth-child(2){animation-name:svcWordBottom;animation-delay:.85s} .svc-h1 span.reveal:nth-child(3){animation-name:svcWordSide;animation-delay:1.3s} } @keyframes svcWordTop{from{opacity:0;filter:blur(10px);transform:translate(-4vw,-18vh) rotate(-4deg)}to{opacity:1;filter:blur(0);transform:none}} @keyframes svcWordBottom{from{opacity:0;filter:blur(10px);transform:translateY(18vh) scale(.88)}to{opacity:1;filter:blur(0);transform:none}} @keyframes svcWordSide{from{opacity:0;filter:blur(10px);transform:translate(11vw,5vh) rotate(5deg)}to{opacity:1;filter:blur(0);transform:none}} /* Background fades in first, before any of the above — "aparece primeiro o fundo, depois entra o título". */ @media(prefers-reduced-motion:no-preference){ .svc-page-bg{opacity:0;animation:svcBgIn 1s ease forwards} } @keyframes svcBgIn{from{opacity:0}to{opacity:1}} /* Smooths the per-reading jumps from the gyroscope handler in sculpture.js (device orientation fires far more often than a person can perceive discretely) into a gentle sway instead of a jitter. */ @media(prefers-reduced-motion:no-preference){.svc-page-bg{transition:transform .15s ease-out}} /* Hero-to-catalogue gap was mostly the room the sculpture used to need below the (now-hidden) search bar and stats — with those gone and the S anchored from the hero's top rather than its height, that reserved space is no longer needed. */ .svc-hero{padding-bottom:24px} .svc-main-wrap{padding-top:20px} @media(max-width:700px){.svc-hero{padding:96px 0 32px}.svc-main-wrap{padding-top:12px}} /* ---- Glassmorphism cards — frosted rather than tinted-dark, so the S reads through them softly instead of the cards reading as opaque tiles. */ .svc-cat-card{ background:linear-gradient(135deg,rgba(255,255,255,.1),rgba(255,255,255,.02)); backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%); border:1px solid rgba(255,255,255,.16); box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.1); } .svc-cat-card:hover{ background:linear-gradient(135deg,rgba(130,255,195,.16),rgba(255,255,255,.04)); border-color:rgba(120,225,173,.55); } /* ---- Cards slide in from alternating sides as you scroll to them, and slide back out the same way scrolling back up past them — the JS side of this (services.js) now toggles .is-visible both ways for cards specifically, instead of the site-wide reveal-scroll's normal one-time add. Slower than the generic reveal (1.3s vs .7s) per the "de forma lenta" ask. */ @media(prefers-reduced-motion:no-preference){ /* Blur cut from 5px to 2.5px — at 5px, cards waiting to come into focus read as a loading glitch or a stuck motion blur rather than deliberate depth-of-field. The in-focus (.is-visible) state was already blur:0, i.e. already "absurdamente nítido" — untouched. */ .svc-cat-card.reveal-scroll{ transform:translateX(-70px) scale(.97);filter:blur(2.5px); transition:opacity 1.3s cubic-bezier(.16,1,.3,1),transform 1.3s cubic-bezier(.16,1,.3,1),filter 1.3s ease; } .svc-cat-card.reveal-scroll:nth-child(even){transform:translateX(70px) scale(.97)} .svc-cat-card.reveal-scroll.is-visible{transform:none;filter:blur(0)} } /* The catalogue header ("O que precisa hoje?") is the first thing under the now-tighter hero — the S should read clearly through it, more than the general in-catalogue floor already set below. */ .svc-section-head{position:relative;z-index:1} /* ---- Story order — background, then headline, then the S forming (all timed above), and only THEN the rest: subtitle, the section header, and the first row of category cards. Everything used to reveal within the first second regardless of that sequence — the subtitle in particular was still using services.css's generic ".delay-3" (.34s), finishing before the headline had even started its second word. Cards from the second row on keep their normal scroll-triggered timing (small nth-child delays already set in services.css) — only the first row, which can land inside the initial viewport now that the hero is short, needed a real-time gate too, or it would reveal instantly on load same as everything else used to. */ .svc-hero-sub.reveal{animation-delay:3.3s;animation-duration:1s} @media(prefers-reduced-motion:no-preference){ .svc-section-head{opacity:0;transform:translateY(16px);animation:svcSectionHeadIn .9s cubic-bezier(.16,1,.3,1) forwards;animation-delay:4.4s} /* A per-card multi-second transition-delay (the previous approach) broke under a fast scroll: a card could enter AND leave the viewport before its own delay had even elapsed, so the bidirectional observer (in services.js) removed .is-visible again before it ever got to animate in — it would then sit invisible indefinitely. The section header finishes at 5.3s (4.4s delay + .9s); instead of gating each card's own transition, .svc-cat-grid gets one one-time "cards-ready" class at 5.3s (services.js) that this rule uses to force every card invisible regardless of its own is-visible state until then. The observer keeps tracking is-visible correctly the whole time, so whichever cards are actually in view the moment the gate lifts just appear immediately — and normal scroll-driven show/hide (both directions) works from then on with only a small, snappy per-card stagger. */ .svc-cat-grid:not(.cards-ready) .svc-cat-card.reveal-scroll.is-visible{opacity:0 !important} .svc-cat-grid .reveal-scroll:nth-child(2){transition-delay:.08s} .svc-cat-grid .reveal-scroll:nth-child(3){transition-delay:.16s} .svc-cat-grid .reveal-scroll:nth-child(4){transition-delay:.24s} .svc-cat-grid .reveal-scroll:nth-child(5){transition-delay:.32s} .svc-cat-grid .reveal-scroll:nth-child(6){transition-delay:.4s} .svc-cat-grid .reveal-scroll:nth-child(7){transition-delay:.08s} .svc-cat-grid .reveal-scroll:nth-child(8){transition-delay:.16s} .svc-cat-grid .reveal-scroll:nth-child(9){transition-delay:.24s} .svc-cat-grid .reveal-scroll:nth-child(10){transition-delay:.32s} } @keyframes svcSectionHeadIn{to{opacity:1;transform:none}} /* ---- The S should read clearly right where the catalogue begins, not just be legible — a further step down from the already-lightened .svc-main-wrap above, plus a brighter settled floor in sculpture.js. */ /* Dropping this layer's own backdrop-filter (kept until now) — stacking it with every .svc-cat-card's own blur(18px) right on top of it is the likely cause of the white/grey band that flashes in during scroll on Android Chrome (a known class of bug: overlapping backdrop-filter layers compositing incorrectly mid-scroll on some mobile GPUs). The cards' own blur already carries the glass look; this layer only ever needed to be a plain translucent tint. */ .svc-main-wrap{background:linear-gradient(rgba(8,13,15,.14),rgba(8,13,15,.34));backdrop-filter:none;-webkit-backdrop-filter:none} /* ---- Hero CTA — the headline had no obvious next step. A bold primary action (scrolls to the category grid) plus a quieter secondary link, both pointing at the same place; there's no quiz/recommendation engine behind this, just a clear on-ramp into the catalogue that already exists below. */ .svc-hero-cta{display:flex;align-items:center;gap:18px;margin:26px 0 30px;flex-wrap:wrap} .svc-hero-cta-primary{ display:inline-flex;align-items:center;height:52px;padding:0 26px;border-radius:14px; font-weight:800;font-size:15.5px;color:#06231a; background:linear-gradient(135deg,#8ff0c4,#49d39a); box-shadow:0 4px 0 0 rgba(0,60,35,.5),0 14px 30px rgba(73,211,154,.35); transition:transform .06s ease,box-shadow .06s ease; } .svc-hero-cta-primary:active{transform:translateY(4px);box-shadow:0 1px 0 0 rgba(0,60,35,.5),0 4px 10px rgba(73,211,154,.25)} .svc-hero-cta-secondary{ font-size:14.5px;font-weight:650;color:var(--svc-muted); display:inline-flex;align-items:center;gap:8px;transition:color .15s ease; } .svc-hero-cta-secondary:hover{color:var(--svc-ink)} .svc-hero-cta-secondary i{font-size:12px;transition:transform .2s ease} .svc-hero-cta-secondary:hover i{transform:translateY(3px)} @media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} /* ---- Header shrinks slightly once you've actually scrolled — added width/height on top of the existing !important pins, so it needs the same weight to win; .svc-nav-scrolled is toggled by the small inline script after the nav markup in index.php. */ .svc-nav-pill-menu,.svc-nav-lang,.svc-nav-lang .dd.lang-switcher,.svc-nav-lang .dd.lang-switcher>button[data-ddbtn]{ transition:width .25s ease,height .25s ease,transform .06s ease,box-shadow .06s ease; } .svc-nav.svc-nav-scrolled .svc-nav-pill-menu{width:38px !important;height:38px !important} .svc-nav.svc-nav-scrolled .svc-nav-lang{width:38px !important;height:38px !important} .svc-nav.svc-nav-scrolled .svc-nav-lang .dd.lang-switcher{width:38px !important;height:38px !important} .svc-nav.svc-nav-scrolled .svc-nav-lang .dd.lang-switcher>button[data-ddbtn]{width:38px !important;height:38px !important} /* ---- Darker, cleaner backdrop — the ask was roughly "90% black, 6% deep green atmosphere, 4% particles" instead of a busy starfield. The particle count itself was cut hard in sculpture.js; this dims the two ambient CSS layers (radial glow + grid) so the S is the only thing that visibly stands out against near-black rather than competing with a lit-up sky. */ .svc-page-bg{background:radial-gradient(ellipse 60% 55% at 78% 24%,rgba(29,83,73,.15),transparent 74%),linear-gradient(135deg,#060908,#050706)} .svc-page-bg::after{opacity:.14} /* ---- Search moved from the (now decluttered) hero to right above the catalogue — "isso seria ouro numa página com tantos serviços". Same input/JS wiring as before (services.js), just relocated and restyled to sit naturally above the grid instead of centred in the hero. */ .svc-search{ max-width:none;width:100%;margin:22px 0 26px;height:56px;padding:0 20px; background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02)); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,.16);border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.28); } .svc-search input{font-size:15.5px} .svc-search:focus-within{border-color:rgba(120,225,173,.55);box-shadow:0 0 0 3px rgba(73,211,154,.14)} /* Smaller and subtler than the old standalone badge, now that it also carries the total service count. */ .svc-section-badge{font-size:11.5px;font-weight:550;color:var(--svc-muted);opacity:.85} /* ---- Cards, take two: shorter, livelier, with a real hover/press response instead of just a border-colour change — a rotating gradient ring traces the edge, the title nudges over, and a one-line preview (built from real service names, not invented copy) drops in. Already a