.kr-scene { perspective: 1200px; width: 300px; margin: 32px auto; } .kr-card { width: 300px; transform-style: preserve-3d; animation: krFlipIn 1s ease-out both; } .kr-card img { width: 100%; display: block; border-radius: 16px; } .kr-dl { display: block; text-align: center; margin-top: 10px; padding: 10px 14px; font-size: 13px; border-radius: 10px; text-decoration: none; color: var(--color-text-primary); background: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.15); } @keyframes krFlipIn { 0% { opacity: 0; transform: rotateY(-100deg) scale(.96); } 60% { opacity: 1; transform: rotateY(8deg) scale(1); } 100% { transform: rotateY(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .kr-card { animation: none; } } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Theme tokens ───────────────────────────────────────────────── Light is the default palette (no attribute needed) so the site works before JS runs. [data-theme="dark"] on swaps every value below; the toggle button just flips that attribute. */ :root { --ember: #ff6b1a; --cta-from: #c8630a; --cta-to: #ff6b1a; --stack-gap: clamp(12px, 2.3vh, 24px); --stack-gap-sm: clamp(8px, 1.4vh, 14px); --bg-page: #eef1f6; --text-primary: #16223c; --text-secondary: rgba(22,34,60,0.82); --text-muted: rgba(22,34,60,0.62); --eyebrow: #b5560a; --title-gradient: linear-gradient(168deg,#16223c 0%,#1d3260 20%,#2f5190 42%,#4d72b0 58%,#c8630a 80%,#ff6b1a 100%); --title-glow: drop-shadow(0 2px 30px rgba(90,130,210,0.22)) drop-shadow(0 0 40px rgba(220,110,30,0.18)); --panel-bg: rgba(255,255,255,0.68); --panel-border: rgba(200,99,10,0.30); --panel-border-strong: rgba(200,99,10,0.65); --panel-shadow: 0 18px 40px rgba(30,50,90,0.12); --ground-glow: linear-gradient(to top, rgba(238,241,246,0.95) 0%, rgba(238,241,246,0.55) 32%, transparent 100%); --castle-filter: brightness(0.98) contrast(1.05) saturate(0.94) hue-rotate(0deg); --castle-blend: normal; --castle-tint: radial-gradient(ellipse 90% 70% at 65% 50%, rgba(255,255,255,0.30) 0%, transparent 72%), linear-gradient(180deg, rgba(255,250,240,0.18) 0%, transparent 55%); --sky-bg: radial-gradient(ellipse 120% 60% at 70% 0%, #dce8fb 0%, transparent 55%), radial-gradient(ellipse 90% 60% at 20% 10%, #eef3fc 0%, transparent 60%), linear-gradient(175deg, #eef2f8 0%, #eef1f6 55%, #ecf1f9 100%); --sky-decor-display: none; --topbar-bg: rgba(255,255,255,0.86); --topbar-border: rgba(200,99,10,0.22); --topbar-back-bg: rgba(20,60,130,0.06); --topbar-back-bg-hover: rgba(20,60,130,0.14); --topbar-back-border: rgba(20,60,130,0.20); --topbar-back-border-hover: rgba(20,60,130,0.38); --topbar-back-color: rgba(22,40,70,0.78); --logo-filter: invert(1) brightness(0.35); --logo-opacity: 0.72; --viuhka-filter: brightness(0.94) contrast(1.03) saturate(0.96) drop-shadow(0 22px 40px rgba(30,40,60,0.28)); --viuhka-filter-hover: brightness(1.03) contrast(1.02) saturate(1.02) drop-shadow(0 34px 60px rgba(30,40,60,0.32)) drop-shadow(0 0 26px rgba(255,140,60,0.30)); } :root[data-theme="dark"] { --bg-page: #0b1120; --text-primary: #e8f0ff; --text-secondary: rgba(190,215,255,0.86); --text-muted: rgba(190,215,255,0.66); --eyebrow: rgba(255,140,60,0.92); --title-gradient: linear-gradient(168deg,#fff 0%,#dce8ff 16%,#b8d0fa 38%,#8fb4ea 56%,#c87040 76%,#e85c1a 100%); --title-glow: drop-shadow(0 2px 40px rgba(40,90,200,0.55)) drop-shadow(0 0 60px rgba(200,90,20,0.25)); --panel-bg: rgba(6,14,38,0.62); --panel-border: rgba(200,99,10,0.32); --panel-border-strong: rgba(200,99,10,0.70); --panel-shadow: 0 18px 40px rgba(0,0,0,0.35); --ground-glow: linear-gradient(to top, rgba(6,14,32,0.82) 0%, rgba(8,18,40,0.35) 35%, transparent 100%); --castle-filter: brightness(0.56) contrast(1.16) saturate(0.62) hue-rotate(205deg); --castle-blend: luminosity; --castle-tint: radial-gradient(ellipse 90% 70% at 65% 50%, rgba(10,25,60,0.18) 0%, transparent 72%), linear-gradient(180deg, rgba(8,18,45,0.12) 0%, transparent 55%); --sky-bg: radial-gradient(ellipse 130% 65% at 72% 0%, #122d5e 0%, transparent 55%), radial-gradient(ellipse 80% 50% at 18% 8%, #0f1d3a 0%, transparent 60%), radial-gradient(ellipse 100% 80% at 50% 100%, #0c1422 0%, transparent 70%), linear-gradient(175deg, #0d1628 0%, #0b1120 55%, #0b1525 100%); --sky-decor-display: block; --topbar-bg: rgba(8,16,36,0.92); --topbar-border: rgba(20,60,130,0.22); --topbar-back-bg: rgba(20,60,130,0.18); --topbar-back-bg-hover: rgba(20,60,130,0.32); --topbar-back-border: rgba(40,100,220,0.25); --topbar-back-border-hover: rgba(40,100,220,0.50); --topbar-back-color: rgba(180,210,255,0.80); --logo-filter: none; --logo-opacity: 0.82; --viuhka-filter: brightness(0.74) contrast(1.04) saturate(0.78) hue-rotate(8deg) drop-shadow(0 22px 40px rgba(0,0,0,0.55)); --viuhka-filter-hover: brightness(0.96) contrast(1.04) saturate(0.92) drop-shadow(0 34px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 26px rgba(255,107,26,0.35)); } /* FIX: 100vh doesn't track the real visible area on mobile browsers (the address bar showing/hiding changes what "100vh" means mid-session). vh stays as the fallback; dvh overrides it in browsers that support it, tracking the *actual* visible viewport. */ html, body { height: 100%; height: 100dvh; width: 100%; overflow: hidden; background: var(--bg-page); color: var(--text-primary); font-family: "Crimson Pro", Georgia, serif; transition: background-color .4s ease, color .4s ease; } .sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--sky-bg); transition: background .4s ease; } .stars { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; display: var(--sky-decor-display); } .stars::before, .stars::after { content: ""; position: absolute; inset: 0; } .stars::before { background-image: radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.9) 0%, transparent 100%), radial-gradient(1px 1px at 22% 8%, rgba(255,255,255,0.7) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 35% 5%, rgba(255,255,255,0.8) 0%, transparent 100%), radial-gradient(1px 1px at 48% 12%, rgba(255,255,255,0.6) 0%, transparent 100%), radial-gradient(1px 1px at 60% 3%, rgba(255,255,255,0.9) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 72% 9%, rgba(255,255,255,0.7) 0%, transparent 100%), radial-gradient(1px 1px at 83% 6%, rgba(255,255,255,0.8) 0%, transparent 100%), radial-gradient(1px 1px at 91% 18%, rgba(255,255,255,0.6) 0%, transparent 100%), radial-gradient(1px 1px at 5% 28%, rgba(255,255,255,0.5) 0%, transparent 100%), radial-gradient(1px 1px at 17% 22%, rgba(255,255,255,0.8) 0%, transparent 100%), radial-gradient(1px 1px at 28% 30%, rgba(255,255,255,0.6) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 42% 20%, rgba(255,255,255,0.9) 0%, transparent 100%), radial-gradient(1px 1px at 55% 26%, rgba(255,255,255,0.5) 0%, transparent 100%), radial-gradient(1px 1px at 67% 14%, rgba(255,255,255,0.7) 0%, transparent 100%), radial-gradient(1px 1px at 78% 24%, rgba(255,255,255,0.8) 0%, transparent 100%), radial-gradient(2px 2px at 50% 2%, rgba(200,220,255,1.0) 0%, transparent 100%), radial-gradient(2px 2px at 32% 1%, rgba(180,210,255,0.9) 0%, transparent 100%), radial-gradient(2px 2px at 75% 4%, rgba(200,220,255,0.8) 0%, transparent 100%); } .stars::after { background-image: radial-gradient(1px 1px at 8% 40%, rgba(255,255,255,0.4) 0%, transparent 100%), radial-gradient(1px 1px at 19% 35%, rgba(255,255,255,0.6) 0%, transparent 100%), radial-gradient(1px 1px at 31% 42%, rgba(255,255,255,0.5) 0%, transparent 100%), radial-gradient(1px 1px at 44% 38%, rgba(255,255,255,0.7) 0%, transparent 100%), radial-gradient(1px 1px at 57% 33%, rgba(255,255,255,0.4) 0%, transparent 100%), radial-gradient(1px 1px at 69% 41%, rgba(255,255,255,0.6) 0%, transparent 100%), radial-gradient(1px 1px at 82% 36%, rgba(255,255,255,0.5) 0%, transparent 100%), radial-gradient(1px 1px at 93% 44%, rgba(255,255,255,0.7) 0%, transparent 100%), radial-gradient(1px 1px at 13% 50%, rgba(255,255,255,0.3) 0%, transparent 100%), radial-gradient(1px 1px at 26% 48%, rgba(255,255,255,0.5) 0%, transparent 100%); opacity: 0.7; } .clouds { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; display: var(--sky-decor-display); } .cloud { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.22; } .cloud-1 { width: 600px; height: 200px; top: 8%; left: -10%; background: radial-gradient(ellipse, #0f2a5c 0%, transparent 70%); animation: driftCloud 40s ease-in-out infinite alternate; } .cloud-2 { width: 400px; height: 150px; top: 20%; right: -5%; background: radial-gradient(ellipse, #0a1e40 0%, transparent 70%); animation: driftCloud 55s ease-in-out infinite alternate-reverse; } .cloud-3 { width: 700px; height: 180px; top: 5%; left: 15%; background: radial-gradient(ellipse, #0d2450 0%, transparent 70%); animation: driftCloud 48s ease-in-out infinite alternate; animation-delay: -20s; } @keyframes driftCloud { 0% { transform: translateX(0) translateY(0); } 100% { transform: translateX(30px) translateY(10px); } } .aurora { position: fixed; top: 0; left: 0; right: 0; height: 45vh; height: 45dvh; z-index: 2; pointer-events: none; display: var(--sky-decor-display); background: radial-gradient(ellipse 80% 40% at 60% 0%, rgba(20,60,130,0.35) 0%, transparent 70%), radial-gradient(ellipse 50% 30% at 30% 5%, rgba(10,40,100,0.20) 0%, transparent 60%); animation: auroraShift 8s ease-in-out infinite alternate; } @keyframes auroraShift { 0% { opacity:.6; transform:scaleX(1); } 100% { opacity:1; transform:scaleX(1.05); } } /* Castle photo */ .castle-photo-wrap { position: fixed; right: 0; bottom: 0; width: min(80vw, 900px); height: 100vh; height: 100dvh; z-index: 3; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.04) 8%, rgba(0,0,0,0.45) 22%, black 44%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 5%, black 22%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,0.04) 8%, rgba(0,0,0,0.45) 22%, black 44%), linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 5%, black 22%); mask-composite: intersect; } .castle-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 68% 18%; filter: var(--castle-filter); mix-blend-mode: var(--castle-blend); transition: filter .4s ease; } .castle-photo-tint { position: absolute; inset: 0; background: var(--castle-tint); transition: background .4s ease; } .ground-glow { position: fixed; bottom: 0; left: 0; right: 0; height: 40vh; height: 40dvh; z-index: 4; pointer-events: none; background: var(--ground-glow); transition: background .4s ease; } .fog { display: none; } /* Landing */ /* FIX: overflow-y:auto (+ touch scrolling / overscroll containment) is now set unconditionally here instead of only inside the max-width:768px / max-height:520px media queries below. #landing is a vertically-centred fixed box, so any viewport where the title + ingress + CTA stack is taller than the available height would clip content top/bottom with no way to reach it. This costs nothing when content already fits (no visible scrollbar interaction) and closes the gap between the two breakpoints (tablets, small laptop windows, zoomed browsers). */ #landing { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; justify-content: center; /* FIX: plain "center" on a flex container clips whatever overflows above the viewport with no way to scroll to it (scrollTop can't go negative). "safe center" falls back to top-alignment once content no longer fits, so the eyebrow/title stay reachable on short windows. Unsupported browsers just ignore this line and keep the plain "center" above. */ justify-content: safe center; /* Sized off min(vw, vh) so a wide-but-short window shrinks this padding instead of holding it at the vw-driven max regardless of available height (see the vh-aware sizing note on .hero-title below — same reasoning applies everywhere in this hero stack). */ padding: clamp(14px, min(3.5vw, 4vh), 64px); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); } #landing.hidden { opacity: 0; transform: translateY(-18px); pointer-events: none; } /* Branded location label above the title */ .hero-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--stack-gap-sm); font-family: "Cinzel", serif; font-weight: 600; font-size: clamp(10px, min(1vw, 1.3vh), 12px); letter-spacing: .22em; text-transform: uppercase; color: var(--eyebrow); animation: fadeSlideUp 1s cubic-bezier(.16,1,.3,1) .1s both; } .hero-eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1.5px; border-radius: 2px; background: rgba(200, 99, 10, 0.65); } .hero-title { font-family: "Cinzel","Palatino Linotype",serif; font-weight:900; /* FIX: was clamp(46px,9.5vw,100px) — sized off viewport WIDTH only. On a wide-but-short browser window (a resized desktop/laptop tab, not a phone) vw stays large so the title held near its max size no matter how little vertical room there was, forcing the CTA button below the fold. min(vw, vh) makes it shrink whenever either dimension is tight, so it scales with the window instead of just its width. */ font-size: clamp(28px, min(6vw, 8.2vh), 72px); line-height:.93; letter-spacing:-.01em; text-transform:uppercase; color:transparent; background: var(--title-gradient); -webkit-background-clip:text; background-clip:text; filter: var(--title-glow); max-width:520px; animation: fadeSlideUp 1s cubic-bezier(.16,1,.3,1) .25s both; } .hero-sub { font-family:"Crimson Pro",serif; font-weight:300; font-style:italic; font-size:clamp(16px,2.2vw,22px); color:var(--text-secondary); line-height:1.55; max-width:360px; margin-top:clamp(14px,2.5vh,24px); animation: fadeSlideUp 1s cubic-bezier(.16,1,.3,1) .4s both; } .cta-btn { display:inline-flex; align-items:center; gap:12px; margin-top: var(--stack-gap); padding: clamp(10px, min(1.8vw, 2vh), 24px) clamp(24px, 4vw, 48px); align-self:flex-start; max-width:100%; background:linear-gradient(135deg,var(--cta-from) 0%,var(--cta-to) 100%); border:none; border-radius:14px; font-family:"Cinzel",serif; font-weight:600; font-size:clamp(13px, min(1.7vw, 2.1vh), 19px); letter-spacing:.06em; color:#fff; cursor:pointer; min-width:280px; justify-content:center; position:relative; overflow:hidden; box-shadow:0 4px 28px rgba(200,99,10,.48),0 1px 0 rgba(255,255,255,.15) inset,0 -1px 0 rgba(0,0,0,.2) inset; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; animation: fadeSlideUp 1s cubic-bezier(.16,1,.3,1) .55s both; } .cta-btn::before { content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 60%); } .cta-btn:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 40px rgba(200,99,10,.65),0 1px 0 rgba(255,255,255,.15) inset; filter:brightness(1.1); } .cta-btn:active { transform:translateY(0) scale(.99); } .cta-arrow { width:20px; height:20px; transition:transform .18s ease; } .cta-btn:hover .cta-arrow { transform:translateX(4px); } /* Chat section */ #chat-section { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column; opacity:0; transform:translateY(30px); pointer-events:none; transition:opacity .7s cubic-bezier(.4,0,.2,1) .1s,transform .7s cubic-bezier(.4,0,.2,1) .1s; } #chat-section.visible { opacity:1; transform:translateY(0); pointer-events:all; } .chat-topbar { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:var(--topbar-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--topbar-border); z-index:1; transition: background-color .3s ease, border-color .3s ease; } .topbar-brand { display:flex; align-items:center; gap:10px; } .topbar-logo { width:28px; height:28px; } .topbar-name { font-family:"Cinzel",serif; font-weight:600; font-size:14px; letter-spacing:.08em; color:var(--text-primary); } .topbar-back { display:flex; align-items:center; gap:6px; background:var(--topbar-back-bg); border:1px solid var(--topbar-back-border); border-radius:100px; padding:10px 16px 10px 12px; font-family:"Crimson Pro",serif; font-size:13px; letter-spacing:.05em; color:var(--topbar-back-color); cursor:pointer; min-height:44px; transition:background .15s,border-color .15s; } .topbar-back:hover { background:var(--topbar-back-bg-hover); border-color:var(--topbar-back-border-hover); } .topbar-back svg { width:14px; height:14px; } .chat-widget-wrap { flex:1; min-height:0; position:relative; overflow:hidden; } .chat-widget-wrap n8nchatui-inpage { width:100%!important; height:100%!important; display:block; } .haavi-input-locked { opacity:.35!important; cursor:not-allowed!important; pointer-events:none!important; user-select:none!important; } .haavi-send-locked { opacity:.35!important; cursor:not-allowed!important; pointer-events:none!important; } /* ── Theme toggle ─────────────────────────────────────────────── */ .theme-toggle { position: fixed; top: clamp(18px, 3vh, 28px); right: clamp(18px, 3vw, 32px); z-index: 15; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--topbar-back-bg); border: 1px solid var(--topbar-back-border); color: var(--topbar-back-color); cursor: pointer; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background .15s ease, border-color .15s ease, transform .15s ease, opacity .45s ease, visibility .45s; animation: fadeSlideUp 1s cubic-bezier(.16,1,.3,1) .3s both; } .theme-toggle:hover { transform: translateY(-1px); background: var(--topbar-back-bg-hover); border-color: var(--topbar-back-border-hover); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .theme-icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .theme-icon-moon { display: block; } #landing.hidden ~ .theme-toggle { opacity: 0; visibility: hidden; pointer-events: none; } @media (max-width: 480px) { .theme-toggle { width: 40px; height: 40px; top: 14px; right: 14px; } .theme-toggle svg { width: 17px; height: 17px; } } /* ── Ingress text ─────────────────────────────────────────────── */ .ingress { margin-top: var(--stack-gap); max-width: 540px; padding: clamp(10px, min(1.7vw, 2vh), 22px) clamp(16px, min(2.6vw, 3vh), 26px); background: var(--panel-bg); border: 1px solid var(--panel-border); border-left: 3px solid var(--panel-border-strong); border-radius: 0 12px 12px 0; box-shadow: var(--panel-shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; animation: fadeSlideUp 1s cubic-bezier(.16,1,.3,1) 0.4s both; } .ingress p { font-family: 'Crimson Pro', serif; font-weight: 300; font-size: clamp(18px, min(1.9vw, 2.7vh), 24px); line-height: 1.4; color: var(--text-secondary); margin: 0; } .ingress p + p { margin-top: clamp(6px, min(1vw, 1.4vh), 12px); } .ingress .ingress-closing { margin-top: clamp(8px, min(1.4vw, 1.8vh), 16px); padding-top: clamp(6px, min(1.2vw, 1.6vh), 14px); border-top: 1px solid var(--panel-border); font-style: italic; color: var(--text-muted); font-size: clamp(16px, min(1.7vw, 2.6vh), 21px); } @media (max-width: 480px) { .ingress { max-width: 100%; padding: 16px 18px; } .hero-eyebrow { font-size: 10px; } } @keyframes fadeSlideUp { from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);} } @media(max-width:480px){ #landing{padding:32px 22px;} .hero-title{font-size:clamp(38px,13vw,52px);} .castle-photo-wrap{width:100vw;} } /* ── Viuhka (card fan) ──────────────────────────────────────────── */ .viuhka-scene { position: fixed; right: 2%; top: 50%; transform: translateY(-50%); z-index: 11; width: clamp(260px, 36vw, 520px); perspective: 1400px; pointer-events: none; transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); } #landing.hidden ~ .viuhka-scene { opacity: 0; transform: translateY(calc(-50% + 24px)); pointer-events: none; } #landing.hidden ~ .viuhka-scene .viuhka { pointer-events: none; } .viuhka-scene::after { /* ember glow that wakes on hover */ content: ""; position: absolute; inset: 8% 10%; background: radial-gradient(ellipse at 50% 55%, rgba(255,107,26,0.32) 0%, rgba(200,99,10,0.12) 38%, transparent 70%); filter: blur(40px); opacity: 0; transition: opacity .5s ease; z-index: -1; } .viuhka { display: block; width: 100%; height: auto; pointer-events: auto; border-radius: 14px; transform-style: preserve-3d; will-change: transform; transform: rotateZ(2deg) rotateY(-4deg); filter: var(--viuhka-filter); transition: transform .55s cubic-bezier(.16,1,.3,1), filter .55s ease; animation: viuhkaFloat 7s ease-in-out infinite; } /* (blue multiply wash removed — was rendering as a boxy film over the cards) */ .viuhka:hover { transform: rotateZ(-1deg) rotateY(10deg) rotateX(6deg) scale(1.05) translateY(-12px); filter: var(--viuhka-filter-hover); animation-play-state: paused; cursor: pointer; } .viuhka-scene:hover::after { opacity: 1; } /* keyboard focus mirrors the hover lift, plus a clear focus ring */ .viuhka:focus-visible { outline: 3px solid rgba(255,150,60,.95); outline-offset: 6px; transform: rotateZ(-1deg) rotateY(10deg) rotateX(6deg) scale(1.05) translateY(-12px); filter: var(--viuhka-filter-hover); animation-play-state: paused; } .viuhka-scene:has(.viuhka:focus-visible)::after { opacity: 1; } /* hint label that appears under the cards on hover / focus */ .viuhka-hint { position: absolute; left: 50%; top: 100%; transform: translate(-50%, -2px); white-space: nowrap; pointer-events: none; font-family: "Cinzel", serif; font-weight: 600; font-size: clamp(12px, 1vw, 14px); letter-spacing: .08em; color: #ffd9b8; text-shadow: 0 2px 12px rgba(0,0,0,.65); opacity: 0; transition: opacity .35s ease, transform .35s ease; } .viuhka-scene:hover .viuhka-hint, .viuhka-scene:has(.viuhka:focus-visible) .viuhka-hint { opacity: 1; transform: translate(-50%, 6px); } @keyframes viuhkaFloat { 0%,100% { transform: rotateZ(2deg) rotateY(-4deg) translateY(0); } 50% { transform: rotateZ(2deg) rotateY(-4deg) translateY(-10px); } } @media (prefers-reduced-motion: reduce) { .viuhka { animation: none; } } /* tuck it away when it would collide with the text column */ @media (max-width: 1024px) { .viuhka-scene { display: none; } } /* ── Partner logo bar (footer) ──────────────────────────────────── */ .partner-bar { position: fixed; right: 0; bottom: 0; z-index: 12; display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: clamp(16px, 2vw, 32px); padding: clamp(12px, 1.8vh, 20px) clamp(20px, 3vw, 40px); pointer-events: none; opacity: 0; transform: translateY(8px); animation: fadeSlideUp 1s cubic-bezier(.16,1,.3,1) .9s both; transition: opacity .45s ease, transform .45s ease, visibility .45s; } .partner-bar img { height: clamp(20px, 2.4vw, 30px); width: auto; display: block; opacity: var(--logo-opacity); filter: var(--logo-filter) drop-shadow(0 1px 6px rgba(0,0,0,0.25)); transition: opacity .2s ease, filter .3s ease; -webkit-user-drag: none; user-select: none; } .partner-bar img:hover { opacity: 1; } /* Hide the partner bar while the chat is open so it never sits under the widget */ #chat-section.visible ~ .partner-bar { opacity: 0; transform: translateY(8px); visibility: hidden; pointer-events: none; } @media (max-width: 560px) { .partner-bar { gap: 18px; padding: 10px 14px; } .partner-bar img { height: 18px; } } /* Don't let the bar crowd very short screens */ @media (max-height: 520px) { .partner-bar { display: none; } } /* ─────────────────────────────────────────────────────────── Mobile / small-screen layout fix The landing column (hero title + long ingress + CTA) is taller than a phone viewport. body has overflow:hidden, and #landing now always has overflow-y:auto set above — these queries just handle the *reflow* (type size, padding, stacking) for narrow / short viewports; scrolling itself is unconditional now, not gated behind these breakpoints. */ @media (max-width: 768px) { #landing { justify-content: flex-start; padding: clamp(20px, 5vh, 40px) 20px calc(env(safe-area-inset-bottom, 0px) + 72px); } .hero-title { font-size: clamp(40px, 12vw, 58px); } .ingress { margin-top: 18px; padding: 14px 16px; max-width: 100%; } .ingress p { font-size: 16px; line-height: 1.6; } .ingress p + p { margin-top: 10px; } .ingress .ingress-closing { font-size: 15px; } .cta-btn { align-self: stretch; width: 100%; min-width: 0; margin-top: 20px; padding: 18px 22px; font-size: 15px; } } /* Landscape phones (short height): footer is already hidden above — make sure the landing still reflows sensibly so the CTA is comfortably reachable. */ @media (max-height: 520px) { #landing { justify-content: flex-start; padding-bottom: 24px; } }