/* ===================================================================== v6 — WARM DARK THEME (v4's exact juanmora layout, re-skinned warm) Only the colour tokens are flipped; every section keeps the original layout. Plus v5's stylish hero (refined labels + elastic kinetic name). Loaded LAST so it wins the cascade. ===================================================================== */ :root{ --_color---bg-warm:#0c0a08 !important; --_color---bg-grey:#100d0b !important; --_color---bg-cold:#15131a !important; --_color---grey:#b6ada5 !important; /* warm grey text/headlines */ --_color---orange1:#ffbc95 !important; /* PEACH kept (not aqua) */ --_color---orange2:#f99e76 !important; --_color---blue:#5b74ff !important; } html, body, .body, .body.work{ background-color:#0c0a08 !important; } .top-glow{ box-shadow: inset 0 2px 44px rgba(255,178,134,0.30), inset 0 2px 170px 12px rgba(255,114,67,0.20) !important; } ::selection{ background:#ffbc95 !important; color:#23150d !important; } .orange-intro{ background-color:#0c0a08 !important; } .grow-line{ background-color:#ffbc95 !important; } .main-cta-wrapper .heading-cta, .main-cta-wrapper .heading-cta.main, .main-cta-wrapper .body-copy-cta, .main-cta-wrapper .email-cta{ color:#23150d !important; } /* ---- neutralise the source author's photos / project media -> warm placeholders ---- */ .mask-img-service{ background:radial-gradient(70% 70% at 30% 25%,rgba(255,158,118,0.16),transparent 70%), radial-gradient(60% 60% at 80% 80%,rgba(91,116,255,0.12),transparent 72%), #15131a !important; overflow:hidden; } .mask-img-service .img-service{ opacity:0 !important; } .video-cont-p2, .code-video, .video-cont-footer, .video-embed{ background:linear-gradient(160deg,#1d1813,#0c0a08) !important; } .video-cont-p2 video, .video-cont-footer video, .video-embed video{ opacity:0 !important; } .light-jm-img{ opacity:0 !important; } /* original keeps the light backdrop hidden at rest; the dark backdrop + silhouette are shown (full photo, like the original "Good design takes time" section) */ .webflow-frame, .framer-frame, .tag-webflow, .tag-framer{ opacity:0 !important; } .image-4{ display:none !important; } /* keep big headings legible on warm dark */ .heading, .click-scroll-text, .service-headline, .service-h2, .h2-headline-step1-1, .h2-headline-step1-2, .h2-headline-step1-3, .h2-benefit-1, .h2-benefit-2, .he-bulltet, .name-footer, .body-footer, .tag-text, .body-copy, .nav-name-jm{ color:var(--_color---grey); } /* ===================================================================== V6 HERO — v5's stylish hero: refined labels + elastic kinetic name ===================================================================== */ /* Horizontal-overflow clip + position:sticky fix in one. The original used `.body{overflow-x:hidden}`, but `overflow-x:hidden` forces `overflow-y:auto`, turning into a scroll container — which BREAKS the `position:sticky` pin on the "Good design takes time" section (it scrolls past instead of pinning; step 2 never reveals; blank gap below). `overflow-x:clip` clips the same horizontal overflow (kills the sideways "skew") but does NOT make body a scroll container, so the sticky pin works again and the native scroll cross-fade can run. */ .body{ overflow-x:clip !important; } .wrapper-hero.v6hero{ position:relative; min-height:100svh !important; display:flex !important; flex-direction:column !important; justify-content:space-between !important; align-items:stretch !important; padding:clamp(96px,14vh,150px) 0 clamp(28px,5vh,56px) !important; overflow:hidden !important; background:#0c0a08 !important; } .v6hero__bg{ position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(55% 50% at 50% 36%,rgba(255,158,118,0.22),transparent 70%), radial-gradient(45% 45% at 82% 84%,rgba(91,116,255,0.16),transparent 72%), linear-gradient(160deg,#1a1511,#0c0a08 70%); } .v6wrap{ position:relative; z-index:2; width:100%; max-width:1600px; margin-inline:auto; padding-inline:clamp(20px,4vw,72px); } .v6hero__top{ display:flex; justify-content:space-between; align-items:center; gap:24px; } .v6hero__role{ font-family:Goga,Arial,sans-serif; font-weight:450; font-size:clamp(1.17rem,1.5625vw,1.25rem); color:#ffbc95; line-height:1.155; letter-spacing:-0.02em; } .v6hero__avail{ text-align:right; font-family:Goga,Arial,sans-serif; font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase; color:#857d75; max-width:18ch; } .v6hero__namewrap{ position:relative; z-index:2; } .nm-hello-clip{ position:absolute; left:clamp(20px,4vw,72px); bottom:calc(100% + 2px); overflow:hidden; z-index:1; pointer-events:none; transition:opacity .35s ease; } .nm-hello-clip.is-gone{ opacity:0; } .nm-hello{ margin:0; font-family:Caveat,cursive; font-weight:400; color:#ffbc95; font-size:96px; line-height:1.02; transform:translateY(115%); animation:nmHelloRise .8s cubic-bezier(.22,.9,.3,1) .45s forwards; } @keyframes nmHelloRise{ to{ transform:translateY(0); } } @media (prefers-reduced-motion:reduce){ .nm-hello{ transform:none; animation:none; } } .v6hero__devices svg{ width:.82em; height:.82em; vertical-align:-.08em; display:inline-block; } .v6hero__sub{ margin-top:clamp(14px,2.5vh,26px); text-align:right; font-family:Goga,Arial,sans-serif; font-weight:1000; font-size:clamp(2rem,2.8vw,2.6rem); color:#ffbc95; transform:translateY(-100%); } .nm-name{ font-family:Goga,Arial,sans-serif; font-weight:600; color:#ffbc95; width:100%; height:auto; white-space:nowrap; overflow:visible; position:relative; z-index:2; line-height:.92; letter-spacing:0; font-size:80px; } .nm-name .L{ display:inline-block; vertical-align:baseline; } .nm-name .L .g{ display:inline-block; transform-origin:left center; will-change:transform; } .nm-thumb{ position:relative; display:inline-block; vertical-align:middle; width:1.84em; height:.92em; margin:0 .16em; border-radius:.06em; overflow:hidden; box-shadow:0 .12em .34em rgba(0,0,0,.55); transform:translateY(-.04em); background:linear-gradient(150deg,#2a201a,#15110d); } .nm-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 90ms steps(1,end); } .nm-thumb img.on{ opacity:1; } @media (prefers-reduced-motion:reduce){ .nm-name .L .g{ transform:none !important; } } /* v12: "digital" pill flows inline in the intro headline (old build overlaid an absolute pill tuned to the previous copy). Same classes keep the curious-click hover/click animation. */ .click-scroll-text .cont-click{position:relative;display:inline-flex;flex-flow:column;justify-content:center;align-items:center;top:auto;left:auto;width:auto;height:auto;padding:.1vw 2vw .5vw;margin:0 .3vw;vertical-align:middle;border-radius:100vw} .click-scroll-text .click{position:static;margin:0;font-size:inherit} .click-scroll-text{font-size:6.667vw} /* 96px @ 1440w */ @media (min-width:992px){.click-scroll-height .wrapper-cont-50{width:63.4vw}} /* = widest headline line, so the ink block sits visually centred; same line breaks (each line + next glued chunk > 63.4vw) */ @media (min-width:992px){.wrapper-icons .ll-scroll{transform:translate(-7.1vw,6.8vw)}} /* ribbon strands' start anchored on the "n" of "adoption" (measured at final lottie frame) */ .click-scroll-text .cont-hover-click{width:100%;height:100%;top:100%;left:0} /* AR & Gen AI work item: source fixed height (27vw) is shorter than our text -> content spilled under the next section. Size to content instead. */ .service-wrapper.webflow{ height:auto; min-height:27vw; padding-top:2vw; padding-bottom:6vw; } /* v12 — Case Studies index: editorial numbered rows (deliberately text-led, distinct from the image-heavy work list above) */ #case-studies{ padding:clamp(48px,7vw,110px) 0 clamp(64px,9vw,130px); } .csx-wrap{ width:100%; max-width:1600px; margin-inline:auto; padding-inline:clamp(20px,4vw,72px); } .csx-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:clamp(20px,3vw,40px); } .csx-count{ font-family:Goga,Arial,sans-serif; font-weight:600; font-size:.8rem; letter-spacing:.08em; color:#857d75; } .csx-list{ margin:0; padding:0; list-style:none; } .csx-row{ display:grid; grid-template-columns:3.2rem 1fr auto 2.4rem; gap:clamp(16px,2.5vw,40px); align-items:center; padding:clamp(22px,3vw,38px) 0; border-top:1px solid rgba(244,236,226,.12); text-decoration:none; } .csx-list li:last-child .csx-row{ border-bottom:1px solid rgba(244,236,226,.12); } .csx-n{ font-family:Goga,Arial,sans-serif; font-weight:600; font-size:.85rem; letter-spacing:.08em; color:#f99e76; transition:color .3s ease; } .csx-body{ display:flex; flex-direction:column; gap:10px; min-width:0; } .csx-title{ font-family:Goga,Arial,sans-serif; font-weight:600; font-size:clamp(1.8rem,3.4vw,3.2rem); line-height:1; letter-spacing:-.1vw; color:#f4ece2; transition:color .3s ease, transform .35s cubic-bezier(.22,.9,.3,1); } .csx-desc{ font-family:Goga,Arial,sans-serif; font-weight:600; font-size:.9rem; letter-spacing:.03rem; color:#857d75; } .csx-meta{ font-family:Goga,Arial,sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#857d75; text-align:right; white-space:nowrap; } .csx-arrow{ display:flex; justify-content:flex-end; color:#857d75; transition:color .3s ease, transform .35s cubic-bezier(.22,.9,.3,1); } .csx-arrow svg{ width:1.5rem; height:1.5rem; } .csx-row:hover .csx-title{ color:#ffbc95; transform:translateX(.4vw); } .csx-row:hover .csx-n, .csx-row:hover .csx-arrow{ color:#ffbc95; } .csx-row:hover .csx-arrow{ transform:translate(4px,-4px); } @media (max-width:767px){ .csx-row{ grid-template-columns:2.2rem 1fr 1.8rem; } .csx-meta{ display:none; } .csx-title{ font-size:1.6rem; } } /* v12 iteration — Case Studies as a sticky climbing-card stack: each wide card scrolls up and pins over the previous (pure CSS position:sticky; per-card top offset leaves the earlier cards' top edges peeking) */ .csk-stack{ margin:0; padding:0 0 clamp(56px,9vh,120px); list-style:none; } .csk-stack > li{ perspective:1400px; position:sticky; top:calc(clamp(84px,10vh,120px) + var(--i)*16px); } .csk-stack > li + li{ margin-top:clamp(28px,5vh,56px); } .csk-card{ transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(calc(1 - var(--cov,0)*.045)); transform-origin:50% 50%; } .csk-stack > li.is-covered > .csk-card{ transform-origin:50% 0; } .csk-card > *{ opacity:var(--dim,1); transition:opacity .35s ease; } .csk-card{ display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(24px,4vw,64px); align-items:center; min-height:min(70vh,620px); padding:clamp(26px,3.6vw,56px); border-radius:clamp(20px,2.2vw,30px); border:1px solid rgba(244,236,226,.10); background:rgba(244,236,226,calc(.04 + var(--glow,0)*.06)); -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px); text-decoration:none; box-shadow:0 -22px 70px rgba(0,0,0,.5), 0 18px 50px rgba(0,0,0,.35); transition:transform .4s cubic-bezier(.22,.9,.3,1), opacity .35s ease; } .csk-info{ display:flex; flex-direction:column; align-items:flex-start; gap:clamp(14px,2.2vh,24px); min-width:0; } .csk-chip{ font-family:Goga,Arial,sans-serif; font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#ffbc95; } .csk-title{ margin:0; font-family:Goga,Arial,sans-serif; font-weight:600; font-size:clamp(2rem,3.6vw,3.4rem); line-height:1; letter-spacing:-.1vw; color:#f4ece2; } .csk-desc{ margin:0; font-family:Goga,Arial,sans-serif; font-weight:600; font-size:.95rem; line-height:155%; letter-spacing:.02rem; color:#b6ada5; max-width:44ch; } .csk-tags{ margin:0; padding:8px 14px; list-style:none; display:inline-flex; flex-wrap:wrap; align-items:center; gap:12px; background:rgba(12,10,8,.45); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-radius:10px; } .csk-tags li{ font-family:Goga,Arial,sans-serif; font-weight:600; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#9a9188; display:inline-flex; align-items:center; gap:12px; } .csk-tags li + li::before{ content:""; width:4px; height:4px; border-radius:50%; background:#9a9188; flex:none; } .csk-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:clamp(6px,1.2vh,14px); padding:10px 20px; border-radius:999px; background:#ffbc95; font-family:Goga,Arial,sans-serif; font-weight:600; font-size:.9rem; color:#191310; transition:background .3s ease; } .csk-cta:hover{ background:#f99e76; } .csk-cta:hover svg{ transform:translateX(25%); } .csk-cta svg{ width:1.45rem; height:1rem; transform:translateX(calc(var(--glow,0)*4px)); transition:transform .3s cubic-bezier(.22,.9,.3,1); } .csk-media{ align-self:stretch; border-radius:clamp(12px,1.4vw,18px); overflow:hidden; border:1px solid rgba(244,236,226,.08); background:linear-gradient(150deg,#221a14,#100d0b); } .csk-media image-slot{ display:block; width:100%; height:100%; } /* Optional ghosted background echo of a card's own image: same picture as a low-opacity, darkened, slightly-frosted layer behind the content — masked so it's strongest on the right and fades out leftward, keeping the text clear. Sits above the glass fill (so its frost/glow still read) and below content. */ .csk-card.has-bg{ position:relative; overflow:hidden; } .csk-card.has-bg > *{ position:relative; z-index:1; } .csk-card.has-bg::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit; background-image:linear-gradient(0deg, rgba(12,10,8,.28), rgba(12,10,8,.28)), var(--csk-bg); background-size:cover; background-position:right center; background-repeat:no-repeat; opacity:calc(.38 * var(--dim,1)); filter:blur(1px) brightness(.96) saturate(1.08); -webkit-mask-image:linear-gradient(to left, #000 0%, #000 55%, rgba(0,0,0,.5) 78%, transparent 96%); mask-image:linear-gradient(to left, #000 0%, #000 55%, rgba(0,0,0,.5) 78%, transparent 96%); } @media (max-width:767px){ .csk-card{ grid-template-columns:1fr; min-height:0; gap:20px; } .csk-media{ order:-1; aspect-ratio:16/10; align-self:auto; } .csk-title{ font-size:1.7rem; } .csk-stack > li{ top:calc(72px + var(--i)*10px); } } /* [HIDDEN-BY-KEYWORD: JM-PORTRAIT] The About/benefits portrait images plus a few other elements the user chose to hide, all restored by the keyword JM-PORTRAIT. `.kw-hidden` is the shared opt-in hook (add it to any element to hide under this keyword). To restore everything: delete this rule block, remove the `.kw-hidden` classes, AND bump the warm-theme.css ?v= pin. */ .dark-jm-img, .light-jm-img, .jm-siluete-img, .kw-hidden{ display:none !important; } /* Central intro statement between the floating-shapes section and #work: a slim, centred Goga column that reveals (fade + rise) as it scrolls into view. Scroll-linked via animation-timeline:view() — no JS, so it can't disturb the Lenis/GSAP setup. Where view() is unsupported it settles fully visible. */ .intro-blurb{ display:flex; align-items:center; justify-content:center; padding:clamp(96px,17vh,210px) 24px; } .intro-blurb-text{ margin:0; max-width:32ch; text-align:center; font-family:Goga,Arial,sans-serif; font-weight:500; font-size:clamp(1.05rem,1.45vw,1.45rem); line-height:1.6; letter-spacing:.005em; color:#b6ada5; text-wrap:balance; opacity:0; transform:translateY(26px); animation:introBlurbIn linear both; animation-timeline:view(); animation-range:entry 6% cover 42%; } @keyframes introBlurbIn{ to{ opacity:1; transform:none; } } @media (prefers-reduced-motion:reduce){ .intro-blurb-text{ opacity:1; transform:none; animation:none; } } /* The CWAP-row title now holds “Agentic AI-Assisted Workflows” — its words are too wide to pair two-per-line at the base 5vw, so it wrapped to 3 rows. Nudge this ONE title down a step (desktop only) so it lands in exactly 2 rows. */ @media (min-width:768px){ li.service-wrapper.webflow .service-h2{ font-size:4vw; } }