/* ============================================================ Foculuss – Főstíluslap ============================================================ */ /* ── Alap ── */ body { font-family: 'Jost', sans-serif; overflow-x: hidden; color: #1F2B48; } .serif { font-family: 'Playfair Display', serif; } /* ── Scroll progress bar ── */ #progress-bar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: #27B9B4; transform-origin: 0%; z-index: 9999; scale: 0 1; } /* ── Cursor glow ── */ #cursor-glow { position: fixed; width: 420px; height: 420px; pointer-events: none; z-index: 1; background: radial-gradient(circle, rgba(39,185,180,.09) 0%, transparent 65%); border-radius: 50%; transform: translate(-50%, -50%); will-change: left, top; left: -600px; top: -600px; } /* ── Noise overlay ── */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: .025; pointer-events: none; z-index: 9999; mix-blend-mode: overlay; } /* ── Hero ── */ .hero-gradient { background: linear-gradient(135deg, #f0fbfb 0%, #fff 100%); position: relative; } .blur-blob { position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(39,185,180,.12) 0%, transparent 70%); z-index: 0; pointer-events: none; will-change: transform; } .hexagon-pattern { background-image: url("data:image/svg+xml;utf8,"); background-size: 50px 50px; } /* ── Animációs előkészítő ── */ /* JS osztályt ad az -re — ha nem tölt be, minden látható marad */ html.js .reveal-load, html.js .nav-item, html.js .hero-el { opacity: 0; transform: translateY(20px); } html.js .motion-hide { opacity: 0; will-change: transform, opacity; } .word-split { overflow: hidden; display: inline-block; vertical-align: bottom; } .word-inner { display: inline-block; will-change: transform, opacity; } /* ── Glass card ── */ .glass-card { background: rgba(255,255,255,.8); backdrop-filter: blur(10px); border: 1px solid rgba(39,185,180,.1); position: relative; overflow: hidden; } .glass-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255,255,255,.5) 0%, transparent 55%); opacity: 0; transition: opacity .35s ease; pointer-events: none; } .glass-card:hover::after { opacity: 1; } /* ── Navigáció ── */ #main-nav .glass-card { overflow: visible; } .nav-item { position: relative; } .nav-item::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 1.5px; background: #27B9B4; transform: scaleX(0); transform-origin: right; transition: transform .25s cubic-bezier(.2,0,0,1); } .nav-item:hover::after { transform: scaleX(1); transform-origin: left; } /* ── Gradient hero szöveg ── */ .gradient-hero-text { background: linear-gradient(90deg, #27B9B4 0%, #2dd4bf 25%, #D4AF37 55%, #27B9B4 100%); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: shimmerGrad 5s linear infinite; } @keyframes shimmerGrad { to { background-position: 200% center; } } /* ── CTA glow ── */ @keyframes glow-pulse { 0%,100% { box-shadow: 0 0 24px rgba(39,185,180,.35), 0 8px 32px rgba(39,185,180,.2); } 50% { box-shadow: 0 0 44px rgba(39,185,180,.6), 0 8px 44px rgba(39,185,180,.35); } } .cta-glow { animation: glow-pulse 3s ease-in-out infinite; } /* ── Float animáció ── */ @keyframes float-updown { 0%,100% { transform: translateY(0px); } 50% { transform: translateY(-14px); } } .floating { animation: float-updown 5s ease-in-out infinite !important; } /* ── Marquee ── */ .marquee-wrapper { -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%); overflow: hidden; } .marquee-track { display: flex; width: max-content; animation: marquee-scroll 32s linear infinite; } .marquee-track:hover { animation-play-state: paused; } @keyframes marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ── Hullám elválasztók ── */ .wave-divider { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); } .wave-divider svg { position: relative; display: block; width: calc(100% + 1.3px); height: 60px; } .wave-divider .shape-fill { fill: #fff; } .wave-divider-top { position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; } .wave-divider-top svg { position: relative; display: block; width: calc(100% + 1.3px); height: 60px; } .wave-divider-top .shape-fill { fill: #f4fbfb; } /* ── Nyelvváltó ── */ .fcs-lang-btn { display: inline-block; padding: 4px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; letter-spacing: .05em; color: rgba(31,43,72,.4); text-decoration: none; transition: color .2s, background .2s; } .fcs-lang-btn:hover { color: #27B9B4; background: rgba(39,185,180,.08); } .fcs-lang-btn.active { color: #27B9B4; background: rgba(39,185,180,.12); } /* ── Kosár ikon ── */ .fcs-cart-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #1F2B48; transition: color .2s, background .2s; text-decoration: none; } .fcs-cart-btn:hover { color: #27B9B4; background: rgba(39,185,180,.08); } .fcs-cart-count { position: absolute; top: -4px; right: -4px; background: #27B9B4; color: #fff; border-radius: 50%; width: 18px; height: 18px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; } /* ── Lapozó ── */ .fcs-pagination { display: flex; gap: 8px; align-items: center; } .fcs-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 700; font-size: 14px; color: #1F2B48; text-decoration: none; transition: background .2s, color .2s; } .fcs-pagination .page-numbers:hover, .fcs-pagination .page-numbers.current { background: #27B9B4; color: #fff; } /* ── Prose (alap szöveges oldalakhoz) ── */ .prose p { margin-bottom: 1.2em; line-height: 1.75; } .prose h2 { font-size: 1.75em; font-weight: 700; margin: 1.5em 0 .75em; } .prose h3 { font-size: 1.35em; font-weight: 700; margin: 1.3em 0 .6em; } .prose ul { list-style: disc; padding-left: 1.5em; margin-bottom: 1em; } .prose ol { list-style: decimal; padding-left: 1.5em; margin-bottom: 1em; } .prose a { color: #27B9B4; text-decoration: underline; } .prose blockquote { border-left: 4px solid #27B9B4; padding-left: 1em; font-style: italic; color: rgba(31,43,72,.6); }