:root{ --jk-ink: #0b1638; --jk-ink-strong: #08122f; --jk-ink-soft: #243a70; --jk-ink-muted: #4f6392; --jk-active-gray: #8f96aa; --jk-color-dur: .32s; --jk-color-ease: cubic-bezier(.22,.61,.36,1); } /* Global luxe navy text tone */ html, body, h1, h2, h3, h4, h5, h6, p, a, button, li, small, strong, em, label, blockquote, figcaption, .caption, .media-caption, .jk-title, .jk-sub, .jk-loc, .jk-kicker, .jk-now-label, .jk-now-title, .jk-index button, .jk-m2-menu-list a, .jk-m2-menu-heading, .jk-m2-brand-text, .jk-m2-brand-email, .jk-intro-main-name, .jk-intro-main-role{ color: var(--jk-ink); transition: color var(--jk-color-dur) var(--jk-color-ease), opacity var(--jk-color-dur) var(--jk-color-ease); } /* Secondary hierarchy */ .jk-sub, .jk-loc, .jk-kicker, .jk-now-label, .jk-email, .jk-index button, .jk-m2-brand-email, .jk-intro-main-role{ color: var(--jk-ink-muted); } /* Strong hierarchy */ .jk-title, .jk-now-title, .jk-index button.is-active, .jk-m2-menu-heading, .jk-m2-brand-text, .jk-intro-main-name{ color: var(--jk-ink-strong); } /* Menu links */ .jk-m2-menu-list a{ color: var(--jk-ink-soft); } .jk-m2-menu-list a:hover, .jk-m2-menu-list a:focus-visible{ color: var(--jk-ink-strong); } .jk-m2-menu-list a.is-current{ color: var(--jk-active-gray); } @media (prefers-reduced-motion: reduce){ html, body, h1, h2, h3, h4, h5, h6, p, a, button, li, small, strong, em, label, blockquote, figcaption, .caption, .media-caption, .jk-title, .jk-sub, .jk-loc, .jk-kicker, .jk-now-label, .jk-now-title, .jk-index button, .jk-m2-menu-list a, .jk-m2-menu-heading, .jk-m2-brand-text, .jk-m2-brand-email, .jk-intro-main-name, .jk-intro-main-role{ transition: none !important; } } .jk-runway-dot { /* ... muut sun asetukset ... */ --jk-dot-x: -9999px; transform: translateX(var(--jk-dot-x)); } :root{ --runway-dot: 8px; /* nykyinen koko */ --runway-dot-home: 4px; /* pienempi brand-versio */ } .jk-runway-dot{ width: var(--runway-dot); height: var(--runway-dot); } /* Kun ollaan JEESI KALOMBO -kohdassa → pienempi dot */ .jk-runway-dot.is-brand{ width: var(--runway-dot-home); height: var(--runway-dot-home); } :root { --runway-dot: 8px; --runway-line-h: 2px; --runway-gap: 8px; --runway-line-alpha: .14; } /* NAV – runway viiva + dot */ .jk-nav { position: relative; display: flex; gap: clamp(16px, 3vw, 44px); } /* sun olemassaolevat .jk-nav a -tyylit voi jäädä ennalleen */ .jk-runway-line { position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--runway-gap)); height: var(--runway-line-h); background: #222; opacity: var(--runway-line-alpha); pointer-events: none; } /* DOT – keskellä baselinea, ei linkkitekstin päällä */ .jk-runway-dot { position: absolute; bottom: calc( -1 * var(--runway-gap) - (var(--runway-dot) / 2 - var(--runway-line-h) / 2) ); width: var(--runway-dot); height: var(--runway-dot); border-radius: 50%; background: #111; pointer-events: none; z-index: 1; --jk-dot-x: -9999px; transform: translateX(var(--jk-dot-x)); transition: transform .25s cubic-bezier(.8,0,.3,1), opacity .35s ease, background-color .35s ease; } /* Scrollissa pehmeämpi */ body:not(.is-scrolled) .jk-runway-dot { opacity: 1; background-color: #111; } body.is-scrolled .jk-runway-dot { opacity: .22; background-color: #666; } /* HOME ghost-linkki jos käytät */ .jk-nav a[data-nav-home] { display: block; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; } /* Mobiilissa runway pois */ @media (max-width: 900px) { .jk-nav .jk-runway-line, .jk-nav .jk-runway-dot { display: none; } } /* ============================== JK PAGE ENTER – MOBILE TWEAK ============================== */ @media (max-width: 900px){ /* Koko sivu: kevyt fade + liike alas → ylös, ei bluria */ body.jk-page-anim .page-content{ position: relative; opacity: 0; transform: translateY(14px); filter: none; will-change: opacity, transform; transition: opacity .40s cubic-bezier(.22,1,.36,1), transform .40s cubic-bezier(.22,1,.36,1); } body.jk-page-anim.jk-page-in .page-content{ opacity: 1; transform: translateY(0); } /* Poistetaan desktopin sheen-wipe mobiilista, ettei tule turhaa kerrosta pienen ruudun päälle */ body.jk-page-anim .page-content::before{ content: none !important; } /* Ei staggeria mobiilissa → snappimpi ja vähemmän villiä */ body.jk-page-anim .page-content > *{ opacity: 1 !important; transform: none !important; transition: none !important; } } /* Motion-herkille: edelleen kaikki pois (päteee myös mobiilissa) */ @media (prefers-reduced-motion: reduce){ body.jk-page-anim .page-content, body.jk-page-anim .page-content::before, body.jk-page-anim .page-content > *{ transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } } /* ============================== JK PAGE ENTER – AGENCY VERSION ============================== */ /* Perus setup kun animaatio on käytössä */ body.jk-page-anim .page-content{ position: relative; will-change: opacity, transform, filter; transition: opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1), filter .55s cubic-bezier(.22,1,.36,1); } /* Alkuasento ennen jk-page-in -luokkaa: – hieman alempana – pieni scale – kevyt blur + hitunen desat → “film look” */ body.jk-page-anim:not(.jk-page-in) .page-content{ opacity: 0; transform: translateY(18px) scale(.985); filter: blur(4px) saturate(.94); } /* Kun jk-page-in päällä → setlaantuu paikalleen */ body.jk-page-anim.jk-page-in .page-content{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0) saturate(1); } /* --- Light wipe overlay (sheen) --- */ body.jk-page-anim .page-content::before{ content:""; position: fixed; inset: 0; pointer-events: none; z-index: 10; background: linear-gradient( to bottom, rgba(255,255,255,.82) 0%, rgba(255,255,255,.76) 30%, rgba(255,255,255,.0) 85% ); transform: translateY(0); opacity: 1; transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .55s cubic-bezier(.22,1,.36,1); } /* Kun sivu “on paikalla” → wipe liukuu ylös ja katoaa */ body.jk-page-anim.jk-page-in .page-content::before{ transform: translateY(-26%); opacity: 0; } /* --- Stagger ekalle 3–4 elementille --- */ body.jk-page-anim .page-content > *{ opacity: 0; transform: translateY(10px); transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1); } /* Kun jk-page-in → nosta esiin pienen viiveen kanssa */ body.jk-page-anim.jk-page-in .page-content > *{ opacity: 1; transform: translateY(0); } /* 1. elementti: pieni viive */ body.jk-page-anim.jk-page-in .page-content > *:nth-child(1){ transition-delay: .05s; } /* 2. */ body.jk-page-anim.jk-page-in .page-content > *:nth-child(2){ transition-delay: .11s; } /* 3. */ body.jk-page-anim.jk-page-in .page-content > *:nth-child(3){ transition-delay: .17s; } /* 4. (varalla jos ekana on tyhjä blokki tms.) */ body.jk-page-anim.jk-page-in .page-content > *:nth-child(4){ transition-delay: .21s; } /* Jos sivulla on tosi tiheä grid ja et halua staggeria kaikkialle, voit overridea yksittäisille konttereille: .no-stagger > * { opacity:1 !important; transform:none !important; } */ /* Motion-herkille: kaikki kikkailu pois */ @media (prefers-reduced-motion: reduce){ body.jk-page-anim .page-content, body.jk-page-anim .page-content::before, body.jk-page-anim .page-content > *{ transition: none !important; opacity: 1 !important; transform: none !important; filter: none !important; } } /* ========================================================= JK INTRO + RUNWAY FINE TUNE V2 - Same structure and hooks as V1 - More variable pacing, softer asymmetry, more alive runway - Layer after intro universal + runway/header CSS ========================================================= */ :root { --jk-ft-page-rise: 10px; --jk-ft-page-ease: cubic-bezier(.22, 1, .36, 1); --jk-ft-page-ease-soft: cubic-bezier(.18, .88, .24, 1); --jk-ft-page-scale-start: .995; --jk-ft-page-blur-start: 2.4px; --jk-ft-runway-live-opacity: .90; --jk-ft-runway-rest-opacity: .16; --jk-ft-runway-scrolled-opacity: .05; --jk-ft-dot-scrolled-scale: .64; --jk-ft-dot-scrolled-y: -1px; --jk-ft-runway-rest-scale: .14; --jk-ft-runway-scrolled-scale: .972; } /* ========================================================= PAGE TRANSITION + INTRO GATING ========================================================= */ body.jk-page-anim.jk-page-in .page-content::before { transform: translateY(-26%); opacity: 0; } /* Keep the same 4-item structure, but vary the motion per item. */ body.jk-page-anim .page-content > :nth-child(-n + 4) { --jk-ft-item-rise: var(--jk-ft-page-rise); --jk-ft-item-dur: .46s; --jk-ft-item-delay: 0s; --jk-ft-item-scale: var(--jk-ft-page-scale-start); --jk-ft-item-blur: var(--jk-ft-page-blur-start); --jk-ft-item-ease: var(--jk-ft-page-ease); opacity: 0; transform-origin: 50% 50%; transform: translateY(var(--jk-ft-item-rise)) scale(var(--jk-ft-item-scale)); filter: blur(var(--jk-ft-item-blur)); transition: opacity var(--jk-ft-item-dur) var(--jk-ft-item-ease), transform var(--jk-ft-item-dur) var(--jk-ft-item-ease), filter var(--jk-ft-item-dur) var(--jk-ft-item-ease); will-change: opacity, transform, filter; } body.jk-page-anim .page-content > :nth-child(1) { --jk-ft-item-rise: 5px; --jk-ft-item-dur: .38s; --jk-ft-item-delay: .02s; --jk-ft-item-scale: .998; --jk-ft-item-blur: .9px; transform-origin: 48% 40%; } body.jk-page-anim .page-content > :nth-child(2) { --jk-ft-item-rise: 8px; --jk-ft-item-dur: .45s; --jk-ft-item-delay: .06s; --jk-ft-item-scale: .996; --jk-ft-item-blur: 1.4px; --jk-ft-item-ease: var(--jk-ft-page-ease-soft); transform-origin: 46% 52%; } body.jk-page-anim .page-content > :nth-child(3) { --jk-ft-item-rise: 12px; --jk-ft-item-dur: .53s; --jk-ft-item-delay: .11s; --jk-ft-item-scale: .994; --jk-ft-item-blur: 2.1px; transform-origin: 54% 62%; } body.jk-page-anim .page-content > :nth-child(4) { --jk-ft-item-rise: 16px; --jk-ft-item-dur: .61s; --jk-ft-item-delay: .16s; --jk-ft-item-scale: .991; --jk-ft-item-blur: 2.9px; --jk-ft-item-ease: var(--jk-ft-page-ease-soft); transform-origin: 50% 72%; } body.jk-page-anim.jk-page-in .page-content > :nth-child(-n + 4) { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); transition-delay: var(--jk-ft-item-delay); } body.jk-intro-active.jk-page-anim .page-content > :nth-child(-n + 4) { opacity: 0 !important; transform: translateY(var(--jk-ft-item-rise)) scale(var(--jk-ft-item-scale)) !important; filter: blur(var(--jk-ft-item-blur)) !important; transition: none !important; } /* ========================================================= INTRO - DOT LOCK + TYPOGRAPHY ========================================================= */ .jk-intro-main.is-locking .jk-intro-main-dot { --jk-ft-lock-tx: calc(var(--jk-intro-park-left, 50vw) - 50%); --jk-ft-lock-ty: calc(var(--jk-intro-park-top, 54px) - 50%); left: 0; top: 0; width: 8px; height: 8px; border-radius: 999px; box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); transition: transform .42s var(--jk-ft-page-ease), width .22s ease, height .22s ease, box-shadow .26s ease; transform: translate(var(--jk-ft-lock-tx), var(--jk-ft-lock-ty)) scale(.46); animation: jkIntroDotDock .44s cubic-bezier(.20, .82, .22, 1) both; } .jk-intro-main.is-locking .jk-intro-main-dot::after { opacity: 0; transform: scale(.72); } .jk-intro-main-name, .jk-intro-main-role { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transform: translateZ(0); } .jk-intro-main-name { letter-spacing: .232em; } .jk-intro-main-role { letter-spacing: .152em; } @keyframes jkIntroDotDock { 0% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); transform: translate(var(--jk-ft-lock-tx), var(--jk-ft-lock-ty)) scale(.54); } 64% { box-shadow: 0 0 0 3px rgba(17, 17, 17, .04); transform: translate(var(--jk-ft-lock-tx), var(--jk-ft-lock-ty)) scale(.44); } 100% { box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); transform: translate(var(--jk-ft-lock-tx), var(--jk-ft-lock-ty)) scale(.46); } } /* ========================================================= HEADER BRIDGE - ORB -> RUNWAY -> BRAND ========================================================= */ .jk-nav { position: relative; } .jk-runway-line { bottom: calc(-1 * var(--runway-gap, 8px)); height: var(--runway-line-h, 1px); background: linear-gradient( 90deg, rgba(17, 17, 17, 0) 0%, rgba(17, 17, 17, .58) 12%, rgba(17, 17, 17, .98) 48%, rgba(17, 17, 17, .72) 100% ); background-size: 112% 100%; background-position: 0 0; transform-origin: center left; transform: scaleX(var(--jk-ft-runway-rest-scale)) translateZ(0); opacity: 0; filter: drop-shadow(0 0 0 rgba(17, 17, 17, 0)); transition: transform .44s var(--jk-ft-page-ease), opacity .35s ease, filter .35s ease, background-position .55s ease; will-change: transform, opacity, filter; } body.jk-orb-docking .jk-runway-line { animation: jkRunwayLineGrow .94s var(--jk-ft-page-ease) forwards; animation-delay: .12s; } body.jk-page-in:not(.jk-intro-active):not(.jk-orb-docking) .jk-runway-line { animation: jkRunwayLineGrow .94s var(--jk-ft-page-ease) forwards; animation-delay: .38s; } .jk-runway-dot { transition: transform .45s var(--jk-ft-page-ease), opacity .35s ease, background-color .35s ease, width .22s ease, height .22s ease, box-shadow .32s ease; will-change: transform, opacity, box-shadow; } body.jk-orb-docking .jk-runway-dot { animation: jkRunwayDotSettle .86s var(--jk-ft-page-ease) forwards; animation-delay: .18s; } body.jk-page-in:not(.jk-intro-active):not(.jk-orb-docking):not(.jk-orb-scrolled):not(.is-scrolled) .jk-runway-dot { animation: jkRunwayDotSettle .86s var(--jk-ft-page-ease) forwards; animation-delay: .46s; } body.jk-orb-docking [data-home-brand] { transform-origin: center left; animation: jkBrandWake .68s var(--jk-ft-page-ease) forwards; animation-delay: .10s; } body.jk-page-in:not(.jk-intro-active):not(.jk-orb-docking) [data-home-brand] { transform-origin: center left; animation: jkBrandWake .68s var(--jk-ft-page-ease) forwards; animation-delay: .43s; } @keyframes jkRunwayLineGrow { 0% { transform: scaleX(var(--jk-ft-runway-rest-scale)) translateZ(0); opacity: 0; filter: drop-shadow(0 0 0 rgba(17, 17, 17, 0)); background-position: -10px 0; } 42% { opacity: .74; } 76% { transform: scaleX(1.018) translateZ(0); filter: drop-shadow(0 0 5px rgba(17, 17, 17, .07)); background-position: 0 0; } 100% { transform: scaleX(1) translateZ(0); opacity: var(--jk-ft-runway-live-opacity); filter: drop-shadow(0 0 0 rgba(17, 17, 17, 0)); background-position: 0 0; } } @keyframes jkBrandWake { 0% { opacity: .68; transform: translateX(-3px) translateY(5px) scale(.987); filter: blur(1px); } 56% { opacity: 1; transform: translateX(0) translateY(-1px) scale(1.002); filter: blur(0); } 100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes jkRunwayDotSettle { 0% { opacity: 0; box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); transform: translateX(var(--jk-dot-x, -9999px)) translateY(4px) translateZ(0) scale(.72); } 54% { opacity: 1; box-shadow: 0 0 0 4px rgba(17, 17, 17, .04); transform: translateX(var(--jk-dot-x, -9999px)) translateY(-1px) translateZ(0) scale(1.1); } 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); transform: translateX(var(--jk-dot-x, -9999px)) translateY(0) translateZ(0) scale(1); } } /* ========================================================= ORB SCROLL REACT ========================================================= */ body:not(.jk-orb-scrolled):not(.is-scrolled) .jk-runway-dot { opacity: 1; box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); transform: translateX(var(--jk-dot-x, -9999px)) translateZ(0) scale(1); } body.jk-orb-scrolled .jk-runway-dot, body.is-scrolled .jk-runway-dot { opacity: var(--jk-ft-runway-scrolled-opacity); box-shadow: 0 0 0 0 rgba(17, 17, 17, 0); transform: translateX(var(--jk-dot-x, -9999px)) translateY(var(--jk-ft-dot-scrolled-y)) translateZ(0) scale(var(--jk-ft-dot-scrolled-scale)); } body:not(.jk-orb-scrolled):not(.is-scrolled) .jk-runway-line { opacity: var(--jk-ft-runway-live-opacity); transform: scaleX(1) translateZ(0); filter: blur(0); } body.jk-orb-scrolled .jk-runway-line, body.is-scrolled .jk-runway-line { opacity: calc(var(--jk-ft-runway-rest-opacity) + .07); transform: scaleX(var(--jk-ft-runway-scrolled-scale)) translateZ(0); filter: blur(.18px); } /* ========================================================= HEADER SEPARATOR ========================================================= */ @media (max-width: 900px) { .jk-header { border-bottom-color: rgba(0, 0, 0, .10); box-shadow: 0 .5px 0 rgba(0, 0, 0, .16); } } @media (prefers-reduced-motion: reduce) { body.jk-page-anim .page-content, body.jk-page-anim .page-content::before, body.jk-page-anim .page-content > :nth-child(-n + 4), .jk-runway-line, .jk-runway-dot, .jk-intro-main-dot, .jk-intro-main-name, .jk-intro-main-role, [data-home-brand] { transition: none !important; animation: none !important; opacity: 1 !important; filter: none !important; box-shadow: none !important; } body.jk-page-anim .page-content > :nth-child(-n + 4), .jk-intro-main-name, .jk-intro-main-role, [data-home-brand] { transform: none !important; } .jk-runway-line { transform: scaleX(1) translateZ(0) !important; } .jk-runway-dot { transform: translateX(var(--jk-dot-x, -9999px)) translateZ(0) !important; } .jk-intro-main-dot, .jk-intro-main.is-locking .jk-intro-main-dot { transform: translate( calc(var(--jk-intro-park-left, 50vw) - 50%), calc(var(--jk-intro-park-top, 54px) - 50%) ) !important; } } /* ===== CUSTOM CURSOR – CORE ===== */ /* Desktop: piilota default-kursori kun custom aktivoituu */ @media (pointer: fine) { body.has-custom-cursor { cursor: none; } } .custom-cursor { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); opacity: 0; mix-blend-mode: normal; transition: opacity 0.25s ease-out; } .custom-cursor--visible { opacity: 1; } .custom-cursor--hidden { opacity: 0; } /* DOT + RING */ .custom-cursor__inner, .custom-cursor__outer { position: absolute; left: 50%; top: 50%; border-radius: 999px; transform: translate(-50%, -50%) scale(1); transition: transform 0.18s ease-out, opacity 0.18s ease-out, border-color 0.18s ease-out, background-color 0.18s ease-out, width 0.18s ease-out, height 0.18s ease-out; } /* pieni musta dot */ .custom-cursor__inner { width: 6px; height: 6px; background: #000; } /* ohut rengas */ .custom-cursor__outer { width: 26px; height: 26px; border: 1px solid rgba(0, 0, 0, 0.45); background: transparent; } /* label (VIEW MORE) */ .custom-cursor__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; white-space: nowrap; opacity: 0; transition: opacity 0.2s ease-out; pointer-events: none; color: #ffffff; } /* ===== VIEW MORE – DEFAULT (muilla sivuilla, jos joskus käytät) ===== */ .custom-cursor--viewmore { mix-blend-mode: difference; } .custom-cursor--viewmore .custom-cursor__inner { transform: translate(-50%, -50%) scale(0.8); background: #fff; } .custom-cursor--viewmore .custom-cursor__outer { width: 62px; height: 62px; border-width: 1px; border-color: #fff; } .custom-cursor--viewmore .custom-cursor__label { opacity: 1; } /* ===== VIEW MORE – OVERVIEW: pienempi bubble & teksti ===== */ .cursor-page-overview .custom-cursor--viewmore .custom-cursor__outer { width: 46px; height: 46px; } .cursor-page-overview .custom-cursor--viewmore .custom-cursor__label { font-size: 8px; letter-spacing: 0.16em; } /* ===== HEADER-MINIMAL: piilota ring headerin päällä ===== */ .custom-cursor--minimal .custom-cursor__outer { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } .custom-cursor--minimal .custom-cursor__inner { transform: translate(-50%, -50%) scale(0.9); } /* Klikin fiilis */ .custom-cursor--down .custom-cursor__inner { transform: translate(-50%, -50%) scale(0.6); } .custom-cursor--down .custom-cursor__outer { transform: translate(-50%, -50%) scale(0.92); } /* ===== PARANNUKSET VIEW MORE -TILAAN (LISÄTTY JÄLKIKÄTEEN) ===== */ /* Tehdään VIEW MORE -bubblesta vähän terävämpi ja luettavampi */ .custom-cursor--viewmore .custom-cursor__outer { /* säilyy sun koot, mutta lisätään kevyt halo */ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 16px rgba(0, 0, 0, 0.4); } .custom-cursor--viewmore .custom-cursor__label { /* lisää kontrastia tummien kuvien päällä */ text-shadow: 0 0 4px rgba(0, 0, 0, 0.7), 0 0 8px rgba(0, 0, 0, 0.6); } /* Pieni "hengähdys" kun VIEW MORE aktivoituu */ .custom-cursor--viewmore .custom-cursor__inner, .custom-cursor--viewmore .custom-cursor__outer { transition: transform 0.22s cubic-bezier(.22,1,.36,1), opacity 0.22s ease-out, border-color 0.22s ease-out, background-color 0.22s ease-out, width 0.22s ease-out, height 0.22s ease-out; } /* Isommilla näytöillä bubble vähän pienempi ettei tunnu överiltä */ @media (min-width: 1400px) { .custom-cursor--viewmore .custom-cursor__outer { width: 54px; height: 54px; } } /* Pienemmillä deskruuduilla vähän kompaktimpi, että ei peitä koko kuvaa */ @media (max-width: 1100px) and (pointer: fine) { .custom-cursor--viewmore .custom-cursor__outer { width: 50px; height: 50px; } } /* Pieni performance-tweak: selain osaa optimoida paremmin */ .custom-cursor, .custom-cursor__inner, .custom-cursor__outer { will-change: transform, opacity; } /* Motion-herkät – otetaan animaatiot pois nätisti */ @media (prefers-reduced-motion: reduce) { .custom-cursor, .custom-cursor__inner, .custom-cursor__outer, .custom-cursor__label { transition: none !important; } } /* Mobiili / kosketus: ei näytetä ollenkaan */ @media (pointer: coarse) { .custom-cursor { display: none !important; } } /* ========= CUSTOM CURSOR – GLOBAL ========= */ /* Desktop: piilota default-kursori kun custom aktivoitu */ @media (pointer: fine) { body.has-custom-cursor { cursor: none; } } /* Perus cursor-wrapper */ .custom-cursor { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); opacity: 1; mix-blend-mode: normal; transition: opacity 0.25s ease-out; } .custom-cursor--hidden { opacity: 0; } /* Dot + ring */ .custom-cursor__inner, .custom-cursor__outer { position: absolute; left: 50%; top: 50%; border-radius: 999px; transform: translate(-50%, -50%) scale(1); transition: transform 0.18s ease-out, opacity 0.18s ease-out, border-color 0.18s ease-out, background-color 0.18s ease-out, width 0.18s ease-out, height 0.18s ease-out; } /* pieni musta dot */ .custom-cursor__inner { width: 6px; height: 6px; background: #000; } /* ohut rengas ympärillä */ .custom-cursor__outer { width: 26px; height: 26px; border: 1px solid rgba(0, 0, 0, 0.45); background: transparent; } /* VIEW MORE -teksti (default piilossa) */ .custom-cursor__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease-out; pointer-events: none; } /* Kuvan päällä: CTA-tila – negatiivinen fiilis + isompi ympyrä + teksti */ .custom-cursor--image { mix-blend-mode: difference; } .custom-cursor--image .custom-cursor__inner { transform: translate(-50%, -50%) scale(0.8); background: #fff; } .custom-cursor--image .custom-cursor__outer { width: 60px; height: 60px; border-width: 1px; border-color: #fff; } .custom-cursor--image .custom-cursor__label { opacity: 1; } /* Klikki down -tatsi */ .custom-cursor--down .custom-cursor__inner { transform: translate(-50%, -50%) scale(0.6); } .custom-cursor--down .custom-cursor__outer { transform: translate(-50%, -50%) scale(0.92); } /* Kosketuslaitteet: älä näytä custom-kurssoria */ @media (pointer: coarse) { .custom-cursor { display: none !important; } } /* ===================================================================== TÄSTÄ ALASPÄIN: HEADER + CURSOR + RUNWAY + OVERLAY SIIVOTTUNA ===================================================================== */ /* Näytä vain toinen header kerrallaan (globaalisti) */ @media (min-width: 900px){ [id="Header mobile"]{ display:none !important; } } @media (max-width: 899px){ [id="Header desktop"]{ display:none !important; } } /* ========================================================= DESKTOP-ONLY KIKKAILUT (>= 901px) ========================================================= */ @media (min-width: 901px){ /* --- Otsikon feikki-bold pois --- */ .site-title, .site-title *{ font-weight: 600 !important; font-variation-settings: "wght" 600 !important; font-synthesis: none !important; text-shadow: none !important; -webkit-text-stroke: 0 !important; } .site-title::before, .site-title::after{ content:none !important; } [id="Header desktop"] .site-title + .site-title, [id="Header mobile"] .site-title + .site-title{ display:none !important; } /* --- Custom cursor vain desktopille --- */ body.hide-cursor{ cursor: none; } .jk-cursor{ position: fixed; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: #111; pointer-events: none; z-index: 2147483647; transform: translate(-50%, -50%) scale(1); transition: transform 0.15s cubic-bezier(.8,0,.3,1), opacity 0.25s ease; opacity: 0.95; mix-blend-mode: difference; } .jk-cursor.fade{ opacity: 0; transform: translate(-50%, -50%) scale(0.7); } /* --- TEMP: tappaa scroll-progress-dot kokonaan --- */ #jk-progressbar, #jk-progressbar *{ display:none !important; visibility:hidden !important; } /* --- Header / runway desktopille --- */ :root{ --runway-dot: 8px; --runway-line-h: 2px; --runway-gap: 6px; --runway-line-alpha:.14; /* brand-thicc */ --brand-wght: 900; --brand-track: .10em; --brand-stroke: .45px; --brand-shadow: .35px; /* layerit */ --z-header: 2147483647; --z-intro: 2147483646; } /* Runway naville (site-header tai jk-header) */ .site-header nav, .jk-header .jk-nav{ position: relative; z-index: 3; padding-inline: 0; } .jk-runway-line{ position:absolute; left:0; right:0; bottom: calc(0px - var(--runway-gap)); height: var(--runway-line-h); background: currentColor; opacity: var(--runway-line-alpha); pointer-events:none; z-index:0; } .jk-runway-dot{ position:absolute; left:0; bottom: calc(0px - var(--runway-gap) - (var(--runway-dot)/2 - var(--runway-line-h)/2)); width: var(--runway-dot); height: var(--runway-dot); background: currentColor; border-radius:50%; transform: translateX(-9999px); transition: transform .25s ease; pointer-events:none; z-index:1; } .site-header nav a, .jk-header .jk-nav a{ text-decoration:none; color:inherit; text-transform:uppercase; letter-spacing:.08em; font-weight:500; background-image:linear-gradient(currentColor,currentColor); background-size:0% 1px; background-position:50% 100%; background-repeat:no-repeat; transition: background-size .22s ease, transform .18s ease; } .site-header nav a:hover, .jk-header .jk-nav a:hover{ background-size:100% 1px; transform:translateY(-1px); } .site-header nav a.is-active, .jk-header .jk-nav a.is-active{ background-size:100% 1px; font-weight:600; } /* Header safe zone + theme-brand piiloon */ .site-header, .jk-header{ position: sticky; top:0; z-index: var(--z-header) !important; pointer-events:auto !important; } .site-header .site-title, .site-header .site-title a{ display:none !important; } /* Intro aina headerin alla, mutta ei blokkaa klikkejä */ #jk-intro{ z-index: var(--z-intro) !important; pointer-events:none !important; } /* Brand-thicc desktop-brandille */ .site-header .site-title a, .jk-header .jk-brand{ font-weight: var(--brand-wght) !important; letter-spacing: var(--brand-track) !important; text-transform: uppercase; font-synthesis-weight: auto; font-optical-sizing: auto; } @supports (font-variation-settings: normal){ .site-header .site-title a, .jk-header .jk-brand{ font-variation-settings: "wght" var(--brand-wght); } } @supports (-webkit-text-stroke: 1px black){ .site-header .site-title a, .jk-header .jk-brand{ -webkit-text-stroke: var(--brand-stroke) currentColor; } } @supports not (-webkit-text-stroke: 1px black){ .site-header .site-title a, .jk-header .jk-brand{ text-shadow: 0 0 0 currentColor, 0 var(--brand-shadow) 0 currentColor, 0 -var(--brand-shadow) 0 currentColor, var(--brand-shadow) 0 0 currentColor, -var(--brand-shadow) 0 0 currentColor; } } .site-header .site-title a:hover, .jk-header .jk-brand:hover{ letter-spacing: calc(var(--brand-track) - .01em); transform: translateY(-1px); transition: letter-spacing .2s ease, transform .2s ease; } } /* ========================================================= TÄSTÄ ALASPÄIN: MUU TYyLI (SAMA KUIN ENNEN) ========================================================= */ /* GRID: 5 per rivi */ .work-grid{ display:grid !important; grid-template-columns:repeat(5, minmax(0,1fr)); gap:28px; } .work-grid > *, .work-grid .gallery__item, .work-grid figure, .work-grid a{ position:relative; display:block; aspect-ratio:4/5; overflow:hidden; border-radius:0 !important; } .work-grid img, .work-grid video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; border-radius:0 !important; box-shadow:none !important; } .work-grid .span-2x2{ grid-column:span 2; aspect-ratio:4/5; } /* Automaattinen rytmi */ .work-grid.auto > *:nth-child(6n + 3){ grid-column:span 2; aspect-ratio:4/5; } /* Rivejä vähemmäksi pienillä ruuduilla */ @media (max-width:1200px){ .work-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); } } @media (max-width:900px){ .work-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); } } @media (max-width:640px){ .work-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } } @media (max-width:420px){ .work-grid{ grid-template-columns:1fr; } } .page-layout{ max-width: 100%; padding: 0.0rem; align-items: flex-start; } .page-content{ padding: 0.0rem; border-width: 0.0rem; border-color: rgba(255, 255, 255, 0.85); border-style: solid; border-radius: 0.0rem; text-align: left; background-color: #ffffff; box-shadow: 0rem 0rem 0rem 0rem rgba(0, 0, 0, 0.25); } media-item::part(media){ border-width: 0.0rem; border-color: rgba(0, 0, 0, 0.85); border-style: solid; border-radius: 0.0rem; padding: 0.0rem; } media-item{ --scroll-animation-mode: transition;6; --scroll-animation: scrollTransitionBlurIn-3; --scroll-animation-timing: cubic-bezier(.4,0,.2,1); --scroll-animation-transition-duration: 1200ms; } .mobile media-item { --scroll-animation: scrollTransitionBlurIn-2; --scroll-animation-timing: cubic-bezier(.4,0,.2,1); --scroll-animation-mode: transition; } bodycopy{ font-size: 0.60rem; line-height: 1.85; letter-spacing: -0.072em; } .mobile bodycopy{ font-size: 1rem; } bodycopy a{ text-decoration: underline; } .quick-view{ margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: 0; width: 100%; height: 100%; --quick-view-backdrop-filter: blur(0.41rem); padding: 3.0rem; } .quick-view .caption{ text-align: left; } .button-4{ --text-style: "button 4"; font-size: 0.50rem; line-height: 1.35; color: #000000; display: inline-block; border-color: rgba(0, 0, 0, 0.85); border-style: solid; border-radius: 999rem; padding-top: 0.6rem; padding-right: 1.4rem; padding-bottom: 0.6rem; padding-left: 1.3rem; border-width: 0.2rem; } .mobile .button-4{ font-size: 1.00rem; } .button-4 a{ color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-4 a.active{ color: rgba(0, 0, 0, 0.85); text-decoration: none; } .button-1 { --text-style: "button 1"; font-size: 0.60rem; line-height: 1.85; letter-spacing: -0.072em; color: rgb(255, 255, 255); background: #027aff; display: inline-block; border-color: rgba(0, 0, 0, 0.1); border-style: solid; border-width: 0.1rem; border-radius: 0.6rem; padding-top: 0.6rem; padding-right: 1.2rem; padding-bottom: 0.6rem; padding-left: 1.2rem; filter: drop-shadow(0rem 0.5rem 0.6rem rgba(0, 0, 0, 0.15)); will-change: filter; } .mobile .button-1 { font-size: 1rem; } .button-1 a { color: #ffffff; text-decoration: none; } .button-1 a.active { color: #ffffff; text-decoration: none; } .button-1 a:hover { } .page{ justify-content: center; background-color: #ffffff; } html{ --mobile-scale: 0.8; --mobile-padding-offset: 0.2; } .mobile [id] .page-layout{ max-width: 100%; padding: 0; } .mobile [id] .page-content{ border: 0; border-radius: 0; } .mobile .content{ border: 0; margin: 0; } /* ===== JK Overlay (sama kuin ennen) ===== */ :root{ --ov-bg: rgba(255,255,255,.85); --ov-blur: 8px; --ov-maxw: min(86vw, 1200px); --ov-maxh: 86vh; --ov-pad: clamp(12px, 2vw, 24px); --ov-z: 2147483646; } .jk-overlay{ position: fixed; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; z-index: var(--ov-z); transition: opacity .25s ease; } .jk-overlay.is-open{ opacity: 1; pointer-events: auto; } .jk-overlay__backdrop{ position: absolute; inset: 0; background: var(--ov-bg); backdrop-filter: blur(var(--ov-blur)); } .jk-overlay__stage{ position: relative; max-width: var(--ov-maxw); width: auto; padding: var(--ov-pad); background: transparent; } .jk-overlay__figure{ margin: 0; display: grid; gap: 10px; justify-items: center; } .jk-overlay__media{ display: block; max-width: 100%; max-height: var(--ov-maxh); width: auto; height: auto; object-fit: contain; box-shadow: none; } .jk-overlay__caption{ font: inherit; color: #000; text-align: center; max-width: 70ch; opacity: .75; } .jk-overlay__close{ position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; line-height: 36px; border: 0; border-radius: 999px; background: rgba(0,0,0,.7); color: #fff; font-size: 18px; cursor: pointer; } /* taustalle filtteri */ body{ --colorfilter-color: rgb(49,35,184); --colorfilter-color-opacity: 0; --colorfilter-mix: difference; --colorfilter-grayscale: 0.52; } .content { border-width: 0.0rem; border-color: rgba(0,0,0,.85); border-style: solid; } @keyframes scrollAnimationFadeInOut-3 { 0% { opacity: 0; } 30% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } } @keyframes scrollAnimationFadeInOut-2 { 0% { opacity: 0; } 20% { opacity: 1; } 82.5% { opacity: 1; } 100% { opacity: 0; } }

CASE STUDY

CREDITS

PROJECT INFO