/* Melinda Major Studio — bespoke lean theme (1:1 design replica of melindamajor.com) */ @font-face{font-family:'Edensor';src:url('fonts/edensor.woff2?v=hu') format('woff2'),url('fonts/edensor.otf?v=hu') format('opentype');font-weight:400;font-display:swap} @font-face{font-family:'Lato';src:url('fonts/lato-300.ttf') format('truetype');font-weight:300;font-display:swap} @font-face{font-family:'Lato';src:url('fonts/lato-400.ttf') format('truetype');font-weight:400;font-display:swap} @font-face{font-family:'Lato';src:url('fonts/lato-700.ttf') format('truetype');font-weight:700;font-display:swap} @font-face{font-family:'Roboto';src:url('fonts/roboto-latin.woff2') format('woff2');font-weight:100 900;font-display:swap} :root{ --cream:#f7f5ef; --cream2:#f1ede4; --ink:#3e4939; --body:#726f68; --green:#41573f; --green-d:#374a36; --olive:#6f7d5e; --gold:#b3a06d; --line:#e4ded2; --teal:#12a789; --maxw:1140px; --pad:clamp(20px,5vw,80px); --disp:'Edensor',Georgia,serif; --sans:'Roboto','Lato',system-ui,-apple-system,Segoe UI,sans-serif; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--sans);font-size:15px;font-weight:400;color:var(--ink);background:var(--cream);line-height:1.6667;-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)} /* ---------- header / nav ---------- */ .site-head{position:absolute;top:0;left:0;right:0;z-index:40;padding:22px 0} .site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:none;padding:0 50px} .brand img{height:56px;width:auto;max-width:150px;object-fit:contain} .brand.home img{filter:brightness(0) invert(1)} .nav{display:flex;align-items:center;gap:34px;flex:1;justify-content:center} .nav a{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase} .nav a.active{border-bottom:1.5px solid currentColor;padding-bottom:3px} .nav-auth{display:flex;gap:26px} .nav-auth a{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;text-underline-offset:5px} .burger{display:none;background:none;border:0;font-size:26px;cursor:pointer;color:inherit} /* home = white nav over dark hero; inner = dark nav over cream */ body.home .site-head{color:#fff} body.inner .site-head{color:var(--ink)} /* Szabi eredeti-match: inner nav-menupontok FEKETE + 13px (home marad feher a sotet hero felett) */ body.inner .site-head .nav a{color:#000;font-size:13px} /* ---------- hero (inner pages): big title overlapping full-width image ---------- */ .page-hero{position:relative;padding-top:120px} .page-hero h1{font-family:var(--disp);font-weight:400;color:var(--olive);text-align:center; font-size:clamp(64px,14vw,190px);line-height:.9;letter-spacing:.02em;position:relative;z-index:2; margin-bottom:-.18em;text-transform:uppercase} .page-hero .hero-img{width:100%;height:clamp(280px,44vw,560px);object-fit:cover} .page-hero--title-only{padding-bottom:40px} .page-hero--title-only h1{margin-bottom:0} /* ---------- home hero (slider word over full-bleed image) ---------- */ .home-hero{position:relative;height:100vh;min-height:620px;max-height:900px;overflow:hidden} .home-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .home-hero .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.05) 40%,rgba(0,0,0,.15))} .home-hero .word{position:absolute;left:var(--pad);bottom:16vh;z-index:3;color:#fff; font-family:var(--disp);font-weight:400;font-size:clamp(56px,13vw,180px);line-height:.9;letter-spacing:.03em;text-transform:uppercase;text-shadow:0 2px 30px rgba(0,0,0,.25)} /* ---------- lotus divider ---------- */ .lotus{display:block;margin:64px auto 34px;width:46px;opacity:.85} /* ---------- section intro heading ---------- */ .intro{max-width:950px;margin:0 auto;text-align:center;padding:0 var(--pad)} .intro h2{font-weight:700;font-size:clamp(19px,2.4vw,26px);letter-spacing:.05em;text-transform:uppercase;line-height:1.45;color:var(--ink)} .eyebrow{font-family:var(--disp);font-size:clamp(30px,4vw,46px);color:var(--olive);text-align:center;text-transform:uppercase;letter-spacing:.03em;line-height:1} /* ---------- generic sections ---------- */ section{position:relative} .pad{padding:clamp(64px,8vw,100px) 0} .pad-sm{padding:clamp(36px,5vw,64px) 0} .center{text-align:center} .lead{color:var(--body);font-size:16px;max-width:720px;margin:18px auto 0} h3.block{font-weight:700;font-size:clamp(18px,2.2vw,24px);letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;color:var(--ink)} /* video-szekcio fejlec (home + videotar KOZOS, DRY): olivas display-font. .block.vidsec-title (spec 0-0-2-0) felulirja a h3.block-ot; a letter-spacing+margin-bottom a h3.block-bol marad (mint a korabbi home-inline). Szabi 2026-10-13: a videotar video-sav fejleec = home. */ .block.vidsec-title{font-family:var(--disp);font-weight:400;font-size:clamp(26px,3.4vw,40px);text-transform:uppercase;color:var(--olive)} /* feature icons row (4 cols) */ .feat{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1000px;margin:44px auto 0} .feat .col{text-align:center} .feat .ic{display:block;width:46px;height:46px;margin:0 auto 16px} .feat .ic svg{width:46px;height:46px;stroke:var(--gold);fill:none;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round} .feat h4{font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px} .feat p{font-size:13px;color:var(--body);line-height:1.6} /* buttons */ .btn{display:inline-block;background:#3e4939;color:#fff;font-weight:700;font-size:12.5px;letter-spacing:.12em; text-transform:uppercase;padding:14px 52px;border-radius:15px 0;transition:.25s;border:1px solid transparent;cursor:pointer} /* filled CTA hover -> OUTLINE (source: filled:hover bg transparent + #3e4939 text/border) */ .btn:hover{background:transparent;color:var(--ink);border-color:var(--ink)} .btn-outline{background:transparent;color:var(--green);border:1px solid var(--green)} .btn-outline:hover{background:var(--green);color:#fff} .btn-row{display:flex;gap:16px;flex-wrap:wrap} .btn-row.center{justify-content:center} /* checklist */ .checks{list-style:none;display:flex;flex-direction:column;gap:11px} .checks li{position:relative;padding-left:26px;color:var(--body);font-size:15px} .checks li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--olive);font-weight:700} /* two-column media/text */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center} .split.narrow{grid-template-columns:1fr 1.15fr} .split img{width:100%;height:100%;object-fit:cover;border-radius:2px} .imgfit{width:100%;object-fit:cover;border-radius:2px} /* image carousel strip (static row) */ .strip{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:center} .strip img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px} .strip .tall{aspect-ratio:3/4} /* products */ .products{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1050px;margin:40px auto 0} .product{text-align:center} .product .pimg{width:210px;height:210px;border-radius:50%;object-fit:cover;margin:0 auto 22px} .product h4{font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px} .product .price{color:var(--body);font-size:14px} /* contact form */ .cform{max-width:820px;margin:34px auto 0} .cform .grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px} .cform input,.cform textarea{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent; padding:12px 2px;font-family:inherit;font-size:14px;color:var(--ink);margin-bottom:14px} .cform textarea{min-height:120px;resize:vertical} .cform input:focus,.cform textarea:focus{outline:0;border-bottom-color:var(--olive)} /* full-width gallery strip (bottom of pages) */ .gallery{display:grid;grid-template-columns:repeat(6,1fr);gap:0} .gallery img{width:100%;aspect-ratio:1/1;object-fit:cover} /* marquee */ .marquee{overflow:hidden;white-space:nowrap;padding:40px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .marquee .track{display:inline-block;animation:marq 30s linear infinite;font-family:var(--disp); font-size:clamp(34px,5vw,58px);text-transform:uppercase;color:var(--ink);letter-spacing:.04em} .marquee .track span{margin:0 24px;color:var(--olive)} @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ---------- schedule table (programok) ---------- */ .timetable{max-width:1050px;margin:34px auto 0;border-collapse:collapse;width:100%;font-size:13px} .timetable th,.timetable td{border:1px solid var(--line);padding:14px 10px;text-align:center;vertical-align:middle} .timetable thead th{background:var(--cream2);font-weight:700;letter-spacing:.05em} .timetable .slot{color:var(--body)} .timetable .cls strong{display:block;font-weight:700;letter-spacing:.05em;margin-bottom:2px} .timetable .cls span{font-size:12px;color:var(--body)} .tt-book{display:inline-block;background:var(--teal);color:#fff;font-size:12px;padding:6px 16px;border-radius:2px;margin-top:8px} /* video gallery (videotar) */ .videobox{max-width:820px;margin:30px auto 0;aspect-ratio:16/9;background:#eceae3;display:flex;align-items:center;justify-content:center;border-radius:2px} .videobox .play{width:64px;height:64px;border-radius:50%;border:2px solid #b8b4aa;display:flex;align-items:center;justify-content:center} .videobox .play::after{content:"";border-left:16px solid #b8b4aa;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px} .vgal{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:44px} .vgal figure{position:relative;overflow:hidden;border-radius:2px} .vgal img{width:100%;aspect-ratio:4/3;object-fit:cover} .vgal .play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.8);display:flex;align-items:center;justify-content:center} .vgal .play::after{content:"";border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px} /* contact studios row */ .studios{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:1050px;margin:60px auto 0;text-align:center} .studios h4{font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px} .studios p{color:var(--body);font-size:14px;line-height:1.9} .contact-gallery{display:grid;grid-template-columns:repeat(4,auto);gap:18px;grid-template-rows:auto auto;justify-content:center;margin-top:70px} /* ---------- footer ---------- */ .site-foot{background:var(--cream);border-top:1px solid var(--line);padding-top:70px} .foot-cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;align-items:center;max-width:1050px;margin:0 auto;padding-bottom:60px} .foot-sig img{width:200px} .foot-col h4{font-family:var(--sans);font-size:15px;font-weight:700;text-transform:uppercase;color:var(--ink);margin-bottom:18px;letter-spacing:.08em} .foot-col a,.foot-col p{display:block;color:var(--body);font-size:14px;line-height:2} .foot-bottom{border-top:1px solid var(--line);padding:34px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap} .foot-word{font-family:var(--disp);font-size:clamp(30px,5vw,58px);color:#cfc9bc;text-transform:uppercase;letter-spacing:.03em;line-height:.9} .foot-copy{color:var(--body);font-size:12.5px;text-align:right} .foot-copy a{text-decoration:underline;text-underline-offset:3px} /* ---------- responsive ---------- */ @media(max-width:960px){ .nav,.nav-auth{display:none} .burger{display:block} .site-head .wrap{justify-content:space-between} .feat{grid-template-columns:repeat(2,1fr);gap:34px 20px} .split{grid-template-columns:1fr;gap:26px} .split.rev .media{order:-1} .products{grid-template-columns:1fr;gap:44px;max-width:340px} .strip{grid-template-columns:1fr} .vgal{grid-template-columns:1fr} .gallery{grid-template-columns:repeat(3,1fr)} .studios{grid-template-columns:repeat(2,1fr);gap:40px 20px} .contact-gallery{grid-template-columns:repeat(2,auto)} .foot-cols{grid-template-columns:1fr;text-align:center;gap:34px;justify-items:center} .cform .grid2{grid-template-columns:1fr} .home-hero .word{bottom:12vh} .timetable{font-size:12px} .timetable th,.timetable td{padding:9px 5px} } @media(max-width:520px){ .gallery{grid-template-columns:repeat(2,1fr)} .page-hero h1{font-size:clamp(48px,17vw,90px)} } /* mobile drawer */ .drawer{position:fixed;inset:0;z-index:60;background:var(--cream);transform:translateY(-100%);transition:.35s;padding:80px var(--pad) 40px;display:flex;flex-direction:column;gap:18px} .drawer.open{transform:translateY(0)} .drawer a{font-size:16px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .drawer .close{position:absolute;top:24px;right:var(--pad);font-size:30px;background:none;border:0;cursor:pointer} /* ===== MELINDA mod.kor #1 refinements (1:1 az eredetivel) ===== */ /* hero side arrows (auto + manual) */ .home-hero .hero-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;background:none;border:0;color:#fff;font-size:clamp(42px,5vw,66px);line-height:1;cursor:pointer;opacity:.7;transition:opacity .2s;padding:8px 14px;font-family:var(--disp)} .home-hero .hero-nav:hover{opacity:1} .home-hero .hero-nav.prev{left:clamp(6px,2vw,30px)} .home-hero .hero-nav.next{right:clamp(6px,2vw,30px)} /* 2-image stacked composition (Ahol a mozgas) */ .stack{position:relative;padding:0 0 40px 40px;min-height:clamp(400px,46vw,620px)} .stack img{border-radius:2px;object-fit:cover;box-shadow:0 20px 50px -24px rgba(0,0,0,.35)} .stack .stack-front{position:relative;z-index:2;width:72%;margin-left:auto;aspect-ratio:3/4;display:block} .stack .stack-back{position:absolute;left:0;bottom:0;z-index:1;width:54%;aspect-ratio:3/4} /* asterisk bullets + 2-column list */ .checks.aster li::before{content:"\2733";color:var(--gold);font-size:13px;top:1px} .checks.two{display:grid;grid-template-columns:1fr 1fr;gap:12px 30px} /* home video carousel (center-mode: active centered + peek neighbours + dots) */ .vidcar{position:relative} .vidcar-view{overflow:hidden} .vidcar-track{display:flex;gap:24px;transition:transform .5s cubic-bezier(.4,0,.2,1);will-change:transform} .vidcar .vslide{position:relative;flex:0 0 58%;max-width:58%;overflow:hidden;border-radius:2px;opacity:.5;transition:opacity .45s} .vidcar .vslide.active{opacity:1} .vidcar .vslide img{width:100%;aspect-ratio:16/10;object-fit:cover} .vidcar .vslide .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center} .vidcar .vslide .play::after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px} .vidcar-dots{display:flex;justify-content:center;gap:13px;margin-top:28px} .vcdot{width:11px;height:11px;transform:rotate(45deg);background:none;border:1px solid var(--olive);cursor:pointer;padding:0;transition:background .2s} .vcdot.on{background:var(--olive)} @media(max-width:960px){ .stack{padding-bottom:30px;min-height:auto} .vidcar .vslide{flex-basis:84%;max-width:84%} .checks.two{grid-template-columns:1fr} } /* modszer sub-heading (uppercase sans bold, mint az eredeti) */ .subhead{font-weight:700;font-size:clamp(16px,1.9vw,20px);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);margin:0 0 16px;line-height:1.3} /* ---- reusable infinite carousel (.mcar) -- matches qodef swiper: slidesPerView + loop + autoplay ---- */ .mcar{position:relative;overflow:hidden} .mcar-track{display:flex;will-change:transform} .mcar-slide{position:relative;flex:0 0 auto;box-sizing:border-box} .mcar-slide img{width:100%;display:block;object-fit:cover} /* video-gallery flavour (2-up, 16:10 thumbs + play overlay) */ .mcar.vcar .mcar-slide img{aspect-ratio:16/10;border-radius:2px} .mcar.vcar .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center} .mcar.vcar .play::after{content:"";border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:4px} /* image-gallery flavour (5-up square) */ .mcar.gcar .mcar-slide img{aspect-ratio:1/1;border-radius:2px} /* pagination dots (diamond) */ .mcar-dots{display:flex;justify-content:center;gap:13px;margin-top:28px} .mcar-dots button{width:11px;height:11px;transform:rotate(45deg);background:none;border:1px solid var(--olive);cursor:pointer;padding:0;transition:background .2s} .mcar-dots button.on{background:var(--olive)} /* ===== ROUND-2 home effects/layout (v2-source parity) ===== */ /* B1 hero: full-fold + Ken Burns slow zoom on slides */ .home-hero{max-height:none} /* Ken Burns: zoom-OUT (starts zoomed-in, recedes) -- matches original direction */ @keyframes mm-kenburns{from{transform:scale(1.12)}to{transform:scale(1)}} .home-hero img.slide{animation:mm-kenburns 16s ease-out infinite alternate;transform-origin:center;transition:opacity 1.2s ease} /* hero nav dots (rev bullets) */ .home-hero .hero-dots{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:5;display:flex;gap:14px} .home-hero .hero-dots button{width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.45);border:1px solid rgba(255,255,255,.9);cursor:pointer;padding:0;transition:background .25s,transform .25s} .home-hero .hero-dots button.on{background:#fff;transform:scale(1.15)} /* B3 features: bigger icons+text, less compressed */ .feat{gap:clamp(40px,5vw,96px);max-width:1140px;margin-top:60px} .feat .ic{display:flex;align-items:flex-end;justify-content:center;height:62px;width:auto;margin:0 auto 20px} .feat .ic svg{height:56px;width:auto;max-width:76px;stroke-width:1} .feat h4{font-size:16px;letter-spacing:.09em;margin-bottom:10px} .feat p{font-size:14px;line-height:1.7} /* B4 A-módszerem display: wider box (2 lines, not 5) */ .intro.wide{max-width:1200px} .intro.wide h2{font-size:clamp(20px,2.6vw,30px);line-height:1.4} /* B2 lotus above headings (FESZESEBB + A-módszerem): match v2 (~53px) */ .lotus{width:52px;margin:0 auto 30px} /* B7 GLOBAL image hover-zoom (all content images) */ .media,.mcar-slide,.stack img{overflow:hidden} /* DEFAULT zoomed-IN (1.06), HOVER zooms-OUT to 1.0 (Szabi round-3 #6). NB: v2-source forditva (default 1.01->hover 1.04); hades a Szabi-leirt viselkedest kerte. */ /* #5 FINAL-v2 (Szabi pontositas): a 'fade in' valojaban HOVER-RECEDE, NEM scroll-entrance. Content-kepek default scale 1.0 -> hover scale .96 (hatra ugrik/kicsinyedik, a zoom-in ELLENTETE), .35s. Scale 1.0 default -> ellipszis NEM vagott. Videok (vcar) = mm-vidpop (nem recede), home-hero kulon. */ .media img,.imgfit,.stack img,.gallery img,.mcar.gcar .mcar-slide img{transition:transform .35s ease} .media img:hover,.imgfit:hover,.stack img:hover,.gallery img:hover,.mcar.gcar .mcar-slide:hover img{transform:scale(.96)} /* scroll-fade entrance CSAK a subpage hero-banneren (10452; Szabi dont a hero-entrance pontos tipusrol) */ .js-anim .page-hero .hero-banner{opacity:0;transition:opacity 1.2s ease} .page-hero .hero-banner.in{opacity:1} /* B5 video carousel: fill full bar + play hover-grow + active grow */ .home-vidfull{width:100%} .mcar.vcar .play{transition:transform .35s ease,background .25s ease} .mcar.vcar .mcar-slide:hover .play{transform:scale(1.18);background:rgba(255,255,255,.55)} /* center-mode: non-active dimmed + smaller, active full (matches centeredSlides/centered-custom) */ .mcar.vcar .mcar-slide{transition:transform .5s ease,opacity .5s ease;opacity:.4;transform:scale(.84)} .mcar.vcar .mcar-slide.on{opacity:1;transform:scale(1);z-index:2;animation:mm-vidpop .55s cubic-bezier(.2,.7,.3,1)} /* #3 center-magnify: enlarge/overshoot pop amikor a video kozepre er */ @keyframes mm-vidpop{0%{transform:scale(.86)}55%{transform:scale(1.05)}100%{transform:scale(1)}} /* B6 bottom gallery: full-bleed + bigger squares */ .home-galfull{width:100vw;margin-left:calc(50% - 50vw);max-width:none} .home-galfull .mcar-slide img{aspect-ratio:1/1} /* ===== font-split: theme-chrome (nav/footer) = Lato (TRUE 1:1); content stays Roboto ===== */ .site-head,.site-head .nav a,.site-head .nav-auth a,.site-head .brand, .site-foot,.foot-col h4,.foot-col a,.foot-col p,.foot-copy,.foot-copy a{ font-family:'Lato','system-ui',-apple-system,'Segoe UI',sans-serif; } /* ===== ROUND-3 exact values (Szabi measured the original) ===== */ /* #1 'A modszerem' display -> EXACTLY 2 lines: wider box + smaller font */ .intro.wide{max-width:1340px;padding-left:24px;padding-right:24px} .intro.wide h2{font-size:21px;line-height:1.45;letter-spacing:.03em} /* #2 feature title 19px / lh 26px; #3 exact spacing: icon->title 20px, title->subtext 10px, subtext 15px/25px */ .feat .ic{margin-bottom:0} .feat h4{font-size:19px;line-height:26px;margin:20px 0 0} .feat p{font-size:15px;line-height:25px;margin:10px 0 0} /* #4+5 video section: 574px high, full-width (1440), center video fills */ .home-vidfull{width:100vw;margin-left:calc(50% - 50vw);max-width:none} /* video 574px: a slide-IMG definialja a magassagot, a .mcar AUTO-height (NEM fix 574) -> a dots-sav (track ALATT) belefer az overflow:hidden-be, nem klippelodik (round-3 dots-regresszio fix). A base .mcar{overflow:hidden} klippeli a horizontalis center-mode peek-et, de a dots vertikalisan belul vannak. */ .mcar.vcar .mcar-slide img{height:574px;aspect-ratio:auto;object-fit:cover} .mcar.vcar .mcar-dots{margin-top:28px;position:relative;z-index:3} /* ===== ROUND-4: hero slide-word in-animation (source: slider fade-dominant -> fade + rise) ===== */ /* hero word: SLIDE-IN FROM LEFT (Szabi round-6 #1) */ @keyframes mm-heroword{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}} .home-hero .word.anim{animation:mm-heroword .8s cubic-bezier(.25,.1,.25,1) both} /* ===== ROUND-5 MODSZER sub-page (Szabi measured exact) ===== */ /* #1 modszer title: LEFT-aligned at content-left (~170px, 1100-container), lower top (titleTop ~222) */ .page-hero--left{padding-top:222px;padding-bottom:30px} .page-hero--left h1{text-align:left;max-width:1244px;margin:0 auto;padding:0 var(--pad)} /* subpage hero-banner: full-width 575px bg-cover; title (titleTop 222 a --left-bol) alja enyhen rálog a banner tetejere */ .page-hero--banner{padding-bottom:0;padding-top:97px} /* title-bleed (Szabi arany-pontositas 2026-10-08): a cim ALSO 1/3-a logjon a bannerre, a felso 2/3 a kremen. A negativ bottom-margin huzza fel a bannert; -.36em (~71px @ h1~197px) -> banner-top ~327 (modszer capture 1440), ~33% a kepen. (Korabban -.72em volt ~68% atfedessel.) z-index:2 -> a betuk a kepen ulnek. */ /* subpage-cim eredeti-match (Szabi 2026-10-08): letter-spacing normal + sotetebb var(--ink) #3e4939 + font-size 200 (eredeti) + title-bleed -.72em (az eredeti arany valodi Edensor-glyph-nel; a woff2 font-fix utan nincs Georgia-fallback torzitas). Csak a 4 banner-aloldalra; kesobbi azonos-specificitas -> felulirja a .page-hero h1 bazist. */ .page-hero--banner h1{position:relative;z-index:2;margin-bottom:-.31em;letter-spacing:normal;color:var(--ink);font-size:clamp(64px,14vw,200px);text-align:left;max-width:none;padding-left:12vw;padding-right:48px} .page-hero--banner .hero-banner{width:100vw;margin-left:calc(50% - 50vw);height:575px;background-size:cover;background-position:center;background-repeat:no-repeat} @media(max-width:760px){.page-hero--banner{padding-top:120px}.page-hero--banner .hero-banner{height:clamp(280px,56vw,575px)}} /* #4 textual-button (nav-auth) hover: sliding-underline wipe (exact source cubic-bezier .31,.29,.05,.96) */ .nav-auth a{position:relative;overflow:hidden;text-decoration:none;padding-bottom:3px} .nav-auth a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform-origin:right;transition:transform .32s cubic-bezier(.31,.29,.05,.96)} .nav-auth a:hover::after{transform:translateX(100%)} /* ===== Szabi mobil-batch 2026-10-13 (CSAK mobil media-query; desktop + left-anchor cim-fix ERINTETLEN) ===== */ @media(max-width:760px){ /* HEADER mobil (Szabi 2026-10-13, FELULIRJA a fixed-cream-et): ATLATSZO overlay a hero FELETT (hero fullscreen, header ala) -> scroll-switch cream-re gorgeteskor (olvashatosag). Home teton feher szoveg+logo a sotet-fatyolos hero felett; scroll utan cream+sotet. */ .site-head{position:fixed;background:transparent;box-shadow:none;transition:background .3s ease,box-shadow .3s ease} .site-head.hs-solid{background:var(--cream);box-shadow:0 2px 12px rgba(24,34,38,.07)} .site-head.hs-solid .nav a,.site-head.hs-solid .nav-auth a,.site-head.hs-solid .brand,.site-head.hs-solid .burger{color:var(--ink)} body.home .site-head.hs-solid .brand img{filter:none} /* FOOLDAL hero mobil FULL-SCREEN: 100LVH (large viewport = toolbar-rejtett/legnagyobb) a betoltes-kori kitoltéshez. FLOTTA-LECKE (ios-viewport-fill-dvh-not-svh): a 100dvh iOS Safarin BETOLTESKOR megbizhatatlan (ugral a toolbar miatt, Szabi rest lat); a 100svh tul kicsi (toolbar-eltunesekor res alul). Az lvh a bevalt fill-bazis: a hero mindig a max-viewportra meretez -> betoltéskor azonnal kitolt, SOSE res, nincs load-jump (statikus). Trade-off: toolbar-latszaskor a hero also resze kisse a hajtas ala eshet -- de a 'kitolt' prioritas teljesul. Grow-only JS itt NEM kell (lvh eleve a max, vv.height<=lvh). Fallback: lvh-t nem tamogato bongeszo a 100vh-ra esik. CSAK home-hero, desktop erintetlen. Valos iOS = Szabi device a donto (headless nem reprodukal). */ .home-hero{height:100vh;height:100lvh} /* BANNER-CIM mobil: content-padding + KISEBB font (a min-64px a leghosszabb cimet -PROGRAMOK/VIDEOTAR- 375-on tulcsordulasba vitte -> oldal-szintu h-scroll). clamp(38,12vw,64): 375->45px, 390->47px, elfer; 760-ig vw-aranyosan no. */ .page-hero--banner h1{padding-left:var(--pad);padding-right:var(--pad);font-size:clamp(38px,12vw,64px)} } @media(max-width:600px){ /* 4 ikon-feature mobilban EGYMAS ALA (1 oszlop) + full-width (nincs ures jobb-sav) */ .feat{grid-template-columns:1fr} } /* ===== videotar paywall (membership-gating, Szabi 2026-10-13; ADDITIV, uj osztalyok) ===== */ .vt-paywall-wrap{margin-top:34px;display:flex;justify-content:center;padding:0 var(--pad)} .vt-paywall{max-width:560px;width:100%;text-align:center;background:linear-gradient(180deg,#fcf9f0,#f6f0e2);border:1px solid rgba(111,125,94,.22);border-radius:4px;padding:clamp(36px,5vw,60px) clamp(24px,4vw,48px);box-shadow:0 24px 60px -34px rgba(24,34,38,.28)} .vt-paywall .lotus{margin:0 auto 18px;width:44px;opacity:.9} .vt-paywall-eyebrow{font-family:'Lato','system-ui',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--olive);margin-bottom:14px} .vt-paywall-title{font-family:var(--disp);font-weight:400;font-size:clamp(26px,3.4vw,36px);color:var(--ink);text-transform:uppercase;letter-spacing:.02em;margin-bottom:14px;line-height:1.15} .vt-paywall-lead{font-size:15px;line-height:1.7;color:var(--body);margin:0 auto 22px;max-width:420px} .vt-paywall-price{font-family:var(--disp);font-size:clamp(22px,3vw,30px);color:var(--ink);margin-bottom:24px} .vt-paywall-price .woocommerce-Price-amount{font-weight:400} .vt-paywall-btn{display:inline-block} .vt-paywall-login{margin-top:18px;font-size:13px;color:var(--body)} .vt-paywall-login a{color:var(--olive);text-decoration:underline;text-underline-offset:3px} /* member video embed (fazis 2 Bunny) */ .vt-video{position:relative;width:100%;max-width:1000px;margin:34px auto 0;aspect-ratio:16/9;background:#000;border-radius:2px;overflow:hidden} .vt-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* WC/template-nelkuli oldalak (index.php): az elso .pad szekcio kerulje el a 100px mobil headert (Szabi 2026-10-13 account-batch; hero-oldalak ERINTETLENEK -- ott a .page-hero az elso szekcio) */ @media(max-width:760px){section.pad:first-of-type{padding-top:116px}} /* videotar member-grid -> profi kartyak (Szabi review 2026-10-14; CSAK megjelenes, a token-embed logika valtozatlan) */ .vt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(22px,2.6vw,38px);max-width:1120px;margin:40px auto 0;padding:0 var(--pad)} .vt-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(62,73,57,.1);border-radius:6px;overflow:hidden;box-shadow:0 14px 34px -24px rgba(24,34,38,.3);transition:transform .25s ease,box-shadow .25s ease} .vt-card:hover{transform:translateY(-3px);box-shadow:0 24px 46px -24px rgba(24,34,38,.4)} .vt-card .vt-video{margin:0;max-width:none;border-radius:0;aspect-ratio:16/9} .vt-card-meta{padding:14px 18px 16px;border-top:1px solid rgba(62,73,57,.07);text-align:left} .vt-card-title{font-family:var(--disp);font-size:18px;color:var(--ink);line-height:1.25;margin-bottom:8px} .vt-card-metarow{display:flex;align-items:center;justify-content:space-between;gap:12px} .vt-card-tag{font-family:'Lato','system-ui',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);font-weight:700} .vt-card-dur{font-family:'Lato','system-ui',sans-serif;font-size:12px;letter-spacing:.04em;color:var(--body)} /* videotar szuro (filter-library, Szabi 2026-10-14) */ .vt-filter{display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:center;align-items:center;max-width:1120px;margin:30px auto 0;padding:0 var(--pad)} .vt-fgroup{display:flex;flex-wrap:wrap;align-items:center;gap:8px} .vt-flabel{font-family:'Lato','system-ui',sans-serif;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive);font-weight:700;margin-right:4px} .vt-fbtn{font-family:'Lato','system-ui',sans-serif;font-size:12px;letter-spacing:.04em;color:var(--body);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 16px;cursor:pointer;transition:background .2s,border-color .2s,color .2s} .vt-fbtn:hover{border-color:var(--olive);color:var(--ink)} .vt-fbtn.is-on{background:#3e4939;border-color:#3e4939;color:#fff} .vt-fclear{font-family:'Lato','system-ui',sans-serif;font-size:12px;letter-spacing:.04em;color:var(--olive);background:transparent;border:none;cursor:pointer;text-decoration:underline;text-underline-offset:3px;padding:7px 4px} .vt-fclear:hover{color:var(--ink)} .vt-fclear[hidden]{display:none} .vt-car-wrap{position:relative} .vt-filter+.vt-car-wrap .vt-car{margin-top:20px} .vt-filter+.vt-grid{margin-top:24px} .vt-fchips{display:flex;flex-wrap:wrap;gap:8px} .vt-teaser{display:block;cursor:pointer} .vt-empty{text-align:center;color:var(--body);margin:30px auto;font-size:15px} /* videotar CAROUSEL (increment 1: 3-up center + facade-load; a .mcar.vcar center-dimminget orokli) */ .vt-car{position:relative;width:100vw;max-width:100vw;left:50%;transform:translateX(-50%);margin:40px 0 0;padding:0} .vt-car .vt-slide-cap{padding:16px clamp(16px,3vw,40px) 0} .vt-slide-media{position:relative;aspect-ratio:16/9;border-radius:4px;overflow:hidden;background:#000} .mcar.vcar.vt-car .mcar-slide img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;object-fit:cover} .vt-slide-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* TAG-grid card media (facade play, token-vedett) */ .vt-card-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000} .vt-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .vt-card-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .vt-card-media .play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.85);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s,background .25s} .vt-card-media .play::after{content:"";border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:3px} .vt-card:hover .vt-card-media .play{transform:scale(1.12);background:rgba(255,255,255,.5)} .vt-slide-cap{padding:14px 2px 0;text-align:left} .vt-slide-title{display:block;font-family:var(--disp);font-size:clamp(18px,1.6vw,22px);color:var(--ink);line-height:1.2;margin-bottom:7px} .vt-slide-meta{display:flex;align-items:center;justify-content:space-between;gap:12px} .vt-car .mcar-dots{margin-top:26px} @media(max-width:760px){.vt-grid{grid-template-columns:1fr;gap:18px}} /* Mobil szuro-layout (Szabi #12307 @390): kategoria-cimke felul, chipek alatta egymas mellett */ @media(max-width:620px){.vt-filter{flex-direction:column;align-items:flex-start;gap:16px;padding:0 var(--pad)}.vt-fgroup{flex-direction:column;align-items:flex-start;gap:8px;width:100%}.vt-flabel{margin-right:0}} /* === Videotar intenzitas-jelzo (Kimelo