/* ========================================================================== Festék-Center – fő stíluslap -------------------------------------------------------------------------- Tartalom: 1. Változók (színek, betűk, sarkok) – itt állítod át egy helyen 2. Alapok (oldal, betűk, akadálymentesség) 3. Gombok 4. Fejléc: infósáv, rögzített kategóriasor, lenyíló menü, kereső 5. Mobilmenü 6. Főoldal: hero + pigmentes kártyák 7. Főoldali blokkok (kategóriák, termékek, partnerek, rólunk) 8. Lábléc 9. Egyszerű oldalak (tartalék sablonok) 10. Nagy kijelzők (iMac) 11. Mobil- és tabletnézet ========================================================================== */ /* 1. VÁLTOZÓK ============================================================== */ :root{ /* Márkaszínek (Design System) */ --purple-500:#7367F0; /* gombok, logó */ --purple-700:#5B4BD6; --heading-purple:#3A2D8C; /* kártyacímek alapszíne */ --ink:#1F2430; /* fő szövegszín */ --body-text:#4E5664; /* alszöveg */ --muted-text:#5F6878; /* akadálymentes kontraszt (fehéren 5,6:1) */ --border:#D0D5DD; --bar-gray:#3A3F4A; /* infósáv és lábléc */ --card-bg:#FFFFFF; --ghost-bg:rgba(115,103,240,0.08); /* A hero-átmenet: csíkok, kiemelt szavak, aktív menüpont */ --grad-hero:linear-gradient(90deg,#3D7BE8,#7367F0,#AD41E8,#E515CF,#C41262); --grad-border:linear-gradient(120deg, rgba(61,123,232,.38), rgba(115,103,240,.38), rgba(173,65,232,.38), rgba(229,21,207,.38), rgba(196,18,98,.38)); /* Betűk */ --font-head:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-body:'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Méretek */ --radius-btn:10px; --radius-card:28px; --wrap:clamp(1160px, 76vw, 1560px); /* a tartalom szélessége: nagy kijelzőn (pl. iMac) szélesebb */ --strip:6px; /* a színátmenetes csíkok vastagsága */ --hdr-h:116px; /* a rögzített fejléc magassága (a JS pontosítja) */ /* Stúdióháttér a kártyákon */ --studio-hi:rgba(255,255,255,0.95); --studio-lo:rgba(31,36,48,0.075); color-scheme:light; } /* 2. ALAPOK ================================================================ */ *,*::before,*::after{box-sizing:border-box;} html{-webkit-text-size-adjust:100%;} html, body{ /* A stúdióháttér az egész oldalon fut (fentről fehér, lefelé halványan szürkül). */ background: radial-gradient(1100px 720px at 70% 470px, #FFFFFF 0%, rgba(255,255,255,0) 72%), radial-gradient(1600px 1100px at 50% 55%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 70%), linear-gradient(180deg, #FFFFFF 0px, #F8F8F9 700px, #F1F1F3 60%, #ECECEF 100%); background-color:#F1F1F3; } body{ margin:0; color:var(--ink); font-family:var(--font-head); line-height:1.5; overflow-x:hidden; } h1,h2,h3{font-family:var(--font-head); font-weight:800;} img{max-width:100%; height:auto;} a{color:var(--purple-700);} ul{margin:0; padding:0; list-style:none;} .screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } .skip-link:focus{ position:fixed !important; left:12px; top:12px; z-index:1000; width:auto; height:auto; clip:auto; padding:12px 18px; border-radius:var(--radius-btn); background:#fff; color:var(--ink); box-shadow:0 8px 24px rgba(0,0,0,.2); font-weight:700; } :focus-visible{outline:3px solid var(--purple-500); outline-offset:3px;} .site-main{display:block;} div.page{ /* div: a WordPress a -ra is „page” osztályt tesz */ max-width:var(--wrap); margin:0 auto; padding:0 20px 72px; display:flex; flex-direction:column; gap:56px; } /* 3. GOMBOK ================================================================ */ .cta{ position:relative; isolation:isolate; overflow:hidden; display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:var(--radius-btn); border:none; font-family:var(--font-head); font-weight:800; font-size:1rem; line-height:1.2; color:#fff; text-decoration:none; background:linear-gradient(135deg, var(--purple-500), var(--purple-700)); box-shadow:0 10px 24px -10px rgba(115,103,240,0.6); cursor:pointer; transition:transform .2s ease, box-shadow .25s ease, color .25s ease; } /* rámutatáskor a lila átfolyik bíborba, mint a pigment */ .cta::before{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(135deg, #9B34D8, #C41262); opacity:0; transition:opacity .25s ease; } .cta:hover::before{opacity:1;} .cta:hover{color:#fff; transform:translateY(-1px); box-shadow:0 14px 28px -12px rgba(196,18,98,0.55);} .cta:active{transform:translateY(0);} .cta.ghost{color:var(--purple-700); background:var(--ghost-bg); box-shadow:none;} .cta.ghost::before{background:var(--purple-700);} .cta.ghost:hover{color:#fff; box-shadow:0 10px 22px -12px rgba(91,75,214,0.6);} .cta.loading{opacity:.7; pointer-events:none;} .cta.added::after{content:'✓'; margin-left:4px;} a.added_to_cart{display:none;} /* a WooCommerce „Kosár megtekintése” linkje helyett a számláló jelez */ .icon-btn{ display:inline-flex; align-items:center; justify-content:center; position:relative; width:44px; height:44px; padding:0; border:0; border-radius:12px; background:transparent; color:var(--ink); cursor:pointer; text-decoration:none; } .icon-btn:hover{background:rgba(115,103,240,.1);} .icon-btn svg{width:28px; height:28px; display:block;} /* 4. FEJLÉC ================================================================ */ .gstrip{height:var(--strip); background:var(--grad-hero);} /* 4a. sötét infósáv – a rögzített fejléc része, mindig látszik */ .site-info{background:var(--bar-gray); color:#fff; font-size:15px; font-weight:500;} .site-info .in{max-width:calc(var(--wrap) + 80px); margin:0 auto; padding:0 40px; min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:12px;} .site-info .contact{margin:0; font-weight:600; display:flex; gap:8px; align-items:center; white-space:nowrap;} .site-info a{color:#fff; text-decoration:none;} .site-info a:hover{text-decoration:underline;} .site-info .links{display:flex; gap:18px;} /* 4b. rögzített menüsáv */ .site-header{ position:sticky; top:var(--wp-admin--admin-bar--height, 0px); z-index:100; transition:transform .25s ease; } .site-nav{ position:relative; background:linear-gradient(180deg,#FFFFFF 0%,#EFEDF9 100%); /* stúdió-átmenet */ } .site-nav .in{max-width:calc(var(--wrap) + 120px); margin:0 auto; padding:0 28px; min-height:104px; display:flex; align-items:center; gap:14px; transition:min-height .25s ease;} .brand{display:block; flex-shrink:0;} .site-logo{height:64px; width:auto; display:block; transition:height .25s ease;} .menu-toggle{display:none;} /* kategóriasor */ .ncats{flex:1; align-self:stretch; display:flex;} .ncats > ul{flex:1; display:flex; justify-content:center; gap:0;} .ncat-item{position:relative; display:flex;} .ncat{ position:relative; min-width:88px; max-width:150px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; /* felülre igazítva: az ikonok és a nevek első sora egy vonalban */ text-align:center; font-size:13px; font-weight:600; line-height:1.3; color:var(--ink); text-decoration:none; padding:14px 5px 18px; border-radius:12px; transition:background-color .2s ease; } .ncat > svg{width:26px; height:26px; color:var(--c); flex-shrink:0; transition:width .25s, height .25s, opacity .2s;} .ncat .lbl{min-height:2.6em; display:flex; align-items:center; justify-content:center;} /* két sornyi hely: az egysoros nevek (Vakolatok, Építőanyagok, Akciók) függőlegesen középen */ .ncat .nw{white-space:nowrap;} .ncat .chev{width:11px; height:11px; display:inline-block; vertical-align:-1px; margin-left:3px; color:var(--muted-text);} .ncat.sale{color:#C41262; font-weight:700;} .ncat::after{ content:''; position:absolute; left:26px; right:26px; bottom:6px; height:3px; border-radius:3px; background:var(--grad-hero); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; } /* rámutatás, és az aktuális kategória: a saját színében felderül, alatta a színátmenetes vonal */ .ncat-item:hover > .ncat, .ncat-item:focus-within > .ncat, .ncat.on{background:color-mix(in srgb, var(--c) 8%, transparent);} .ncat-item:hover > .ncat::after, .ncat-item:focus-within > .ncat::after, .ncat.on::after{transform:scaleX(1);} /* lenyíló alkategória-lista */ .ncat-drop{ position:absolute; left:50%; top:100%; z-index:5; min-width:250px; padding:14px 8px 10px; background:#fff; border:1px solid #E7E4F5; border-radius:14px; box-shadow:0 22px 44px -22px rgba(58,45,140,.45); opacity:0; visibility:hidden; transform:translate(-50%, 6px); transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s; } .ncat-item:hover > .ncat-drop, .ncat-item:focus-within > .ncat-drop, .ncat-item.open > .ncat-drop{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition-delay:0s; } .ncat-drop a{ display:block; padding:8px 12px; border-radius:8px; color:var(--ink); text-decoration:none; font-family:var(--font-body); font-size:.95rem; font-weight:500; } .ncat-drop li a::before{content:'›'; color:var(--c); font-weight:700; margin-right:8px;} .ncat-drop a:hover{background:color-mix(in srgb, var(--c) 9%, #fff);} .ncat-drop .all{margin-top:6px; border-top:1px solid #F0EEF7; border-radius:0 0 8px 8px; color:var(--purple-700); font-weight:700; padding-top:10px;} /* ikonok (fiók, keresés, kosár) */ .nicons{display:flex; gap:0; flex-shrink:0; align-items:center; margin-left:auto;} .nicons .badge{ position:absolute; top:0; right:-2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--purple-500); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; } .nicons .badge[hidden]{display:none;} /* rámutatáskor felirat az ikon alatt (Belépés, Keresés, Kosár) – csak egérrel használt eszközön */ @media (hover:hover){ .nicons [data-tip]::after{ content:attr(data-tip); position:absolute; top:calc(100% + 8px); left:50%; z-index:120; transform:translate(-50%, -4px); opacity:0; pointer-events:none; white-space:nowrap; padding:6px 10px; border-radius:8px; background:var(--bar-gray); color:#fff; font-family:var(--font-body); font-size:.82rem; font-weight:500; line-height:1.2; box-shadow:0 8px 18px -10px rgba(31,36,48,.6); transition:opacity .15s ease, transform .15s ease; } .nicons [data-tip]::before{ content:''; position:absolute; top:calc(100% + 3px); left:50%; z-index:120; width:10px; height:10px; background:var(--bar-gray); transform:translate(-50%, -4px) rotate(45deg); opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; } .nicons [data-tip]:hover::after, .nicons [data-tip]:focus-visible::after{opacity:1; transform:translate(-50%, 0);} .nicons [data-tip]:hover::before, .nicons [data-tip]:focus-visible::before{opacity:1; transform:translate(-50%, 0) rotate(45deg);} .nicons .search-toggle[aria-expanded="true"]::after, .nicons .search-toggle[aria-expanded="true"]::before{display:none;} } /* görgetés után: összehúzott menüsáv – az ikonok eltűnnek, a nevek maradnak (a hosszabbak két sorban, mert egy sorban nem férne el mind a hét) */ .site-header.is-compact .site-nav .in{min-height:64px;} .site-header.is-compact .site-logo{height:46px;} .site-header.is-compact .ncat{padding:8px 7px 12px; gap:0;} .site-header.is-compact .ncat > svg{width:0; height:0; opacity:0;} .site-header.is-compact .ncat::after{bottom:4px;} /* fejlécbe nyíló kereső (a nagyító ikonra) */ .header-search{padding:0 20px 16px;} .header-search .sbar{box-shadow:0 14px 30px -20px rgba(58,45,140,.5);} /* 4c. a nagy kereső a fejléc alatt */ .site-search{position:relative; z-index:2; max-width:var(--wrap); margin:0 auto; padding:28px 20px 0;} /* főoldal: a pigmentrobbanás végéig a kereső a fejléc alá tapad (header.js: .is-pinned) */ .site-search.is-pinned{position:sticky; top:calc(var(--wp-admin--admin-bar--height, 0px) + var(--hdr-h)); z-index:90;} .sbar{ max-width:880px; margin:0 auto; height:62px; border-radius:999px; background:#FFFFFF; border:1px solid var(--border); box-shadow:0 10px 30px -22px rgba(58,45,140,.45); display:flex; align-items:center; gap:14px; padding:0 8px 0 24px; } .sbar:focus-within{border-color:var(--purple-500); box-shadow:0 0 0 3px rgba(115,103,240,.5), 0 10px 30px -22px rgba(58,45,140,.45);} .sbar > svg{width:20px; height:20px; color:var(--muted-text); flex-shrink:0;} .sbar input[type="search"]{ flex:1; min-width:0; height:100%; border:0; background:transparent; outline:none; font-family:var(--font-body); font-size:16px; color:var(--ink); } .sbar input::placeholder{color:var(--muted-text); opacity:1;} .sbar input::-webkit-search-cancel-button{-webkit-appearance:none;} .sbar button{ width:46px; height:46px; border-radius:50%; border:0; cursor:pointer; flex-shrink:0; background:linear-gradient(135deg, var(--purple-500), var(--purple-700)); color:#fff; display:flex; align-items:center; justify-content:center; } .sbar button:hover{background:linear-gradient(135deg, #9B34D8, #C41262);} .sbar button svg{width:20px; height:20px;} /* élő keresés: a találatok legördülője (live-search.js) */ .sbar{position:relative;} .site-search:focus-within{z-index:95;} .ls-box{ position:absolute; top:calc(100% + 8px); left:0; right:0; z-index:120; background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:0 24px 50px -24px rgba(31,36,48,.45); padding:8px; max-height:min(70vh, 520px); overflow-y:auto; text-align:left; } .ls-box[hidden]{display:none;} .ls-list{list-style:none; margin:0; padding:0;} .ls-head{padding:10px 12px 4px; font:800 .75rem/1.2 var(--font-head); letter-spacing:.06em; text-transform:uppercase; color:var(--muted-text);} .ls-none{padding:14px 12px; color:var(--body-text);} .ls-opt a{display:flex; align-items:center; gap:12px; padding:8px 12px; border-radius:12px; color:var(--ink); text-decoration:none; min-height:44px;} .ls-opt a.is-active, .ls-opt a:hover{background:var(--ghost-bg);} .ls-opt a.is-active{box-shadow:inset 0 0 0 2px var(--purple-500);} .ls-thumb{--c:var(--purple-500); position:relative; width:44px; height:44px; flex-shrink:0; border-radius:10px; overflow:hidden; background:color-mix(in srgb, var(--c) 18%, #fff);} .ls-thumb img{width:100%; height:100%; object-fit:cover; display:block;} .ls-tx{display:flex; flex-direction:column; min-width:0; flex:1;} .ls-name{font-weight:600; line-height:1.3; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;} .ls-cat .ls-name{flex:1;} .ls-meta{font-size:.85rem; color:var(--muted-text);} .ls-price{font-weight:700; color:var(--heading-purple); white-space:nowrap; margin-left:auto;} .ls-all{display:flex; align-items:center; min-height:44px; margin-top:4px; padding:8px 12px; border-top:1px solid var(--border); color:var(--purple-700); font-weight:700; text-decoration:none;} .ls-all[hidden]{display:none;} .ls-all:hover{text-decoration:underline;} .sbar.ls-loading > svg{animation:fcPulse 1s ease-in-out infinite;} @keyframes fcPulse{50%{opacity:.35;}} @media (prefers-reduced-motion: reduce){.sbar.ls-loading > svg{animation:none;}} @media (max-width:600px){ .ls-box{left:-8px; right:-8px; border-radius:16px; max-height:60vh;} .ls-opt a{gap:10px; padding:8px;} .ls-price{font-size:.9rem;} } /* 5. MOBILMENÜ ============================================================= */ .mobile-menu{position:fixed; inset:0; z-index:300;} .mobile-menu[hidden]{display:none;} .mm-backdrop{position:absolute; inset:0; background:rgba(31,36,48,.45); animation:fcFade .2s ease;} .mm-panel{ position:absolute; left:0; top:0; bottom:0; width:min(88vw, 380px); background:#fff; overflow-y:auto; padding:0 0 28px; box-shadow:20px 0 40px -20px rgba(0,0,0,.35); animation:fcSlide .25s ease; } .mm-head{display:flex; align-items:center; justify-content:space-between; padding:12px 12px 12px 18px; border-bottom:var(--strip) solid transparent; border-image:var(--grad-hero) 1;} .mm-head .site-logo{height:36px;} .mm-cats{padding:8px 10px;} .mm-row{display:flex; align-items:center;} .mm-row a{flex:1; display:flex; align-items:center; gap:12px; padding:12px 8px; color:var(--ink); text-decoration:none; font-weight:700; font-size:.98rem;} .mm-row a svg{width:24px; height:24px; color:var(--c); flex-shrink:0;} .mm-row a.sale{color:#C41262;} .mm-exp{width:44px; height:44px; border:0; background:transparent; border-radius:10px; color:var(--muted-text); cursor:pointer; display:flex; align-items:center; justify-content:center;} .mm-exp svg{width:18px; height:18px; transition:transform .2s ease;} .mm-exp[aria-expanded="true"] svg{transform:rotate(180deg);} .mm-sub{padding:0 8px 8px 44px;} .mm-sub a{display:block; padding:8px 0; color:var(--body-text); text-decoration:none; font-family:var(--font-body);} .mm-sub .mm-suball a{color:var(--purple-700); font-weight:700;} .mm-all .mm-row a{color:var(--purple-700);} .mm-social{display:flex; align-items:center; gap:10px; margin:12px 18px 0; padding:10px 12px; border-radius:12px; background:#F0F5FF; color:#1464D8; font-weight:700; text-decoration:none;} .mm-social svg{width:22px; height:22px;} .mm-social .fbmark{width:26px; height:26px;} .mm-info{margin:8px 18px 0; padding-top:14px; border-top:1px solid #ECEAF5;} .mm-info .links{display:flex; flex-direction:column;} .mm-info a{display:block; padding:9px 0; color:var(--ink); text-decoration:none; font-family:var(--font-body); font-weight:500;} .mm-call{margin:16px 18px 0; display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--radius-btn); background:var(--ghost-bg); color:var(--purple-700); font-weight:800; text-decoration:none;} .mm-call svg{width:20px; height:20px;} body.menu-open{overflow:hidden;} @keyframes fcFade{from{opacity:0;}to{opacity:1;}} @keyframes fcSlide{from{transform:translateX(-100%);}to{transform:none;}} /* 6. HERO ÉS PIGMENTES KÁRTYÁK ============================================= */ .fx-card{ position:relative; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; } .fx-canvas{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0;} .fx-inner{position:relative; z-index:1;} /* a hero teljes szélességű, keret nélkül; görgetés közben „odaragad”, amíg a pigment kitör */ .hero-pin{position:relative; margin-inline:calc(50% - 50vw);} .hero-pin .hero{position:sticky; top:var(--pin-top, 24px); display:flex; align-items:center;} .hero-pin .hero > .fx-inner{flex:1;} .hero.fx-card{border:none; border-radius:0; background:transparent; overflow:visible;} /* a hero vászna felfelé a kereső mögé, a kategóriasor aljáig nyúlik (--bleed: pigment.js) */ .hero .fx-canvas{top:calc(-1 * var(--bleed, 0px)); height:calc(100% + var(--bleed, 0px)); -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 28px); mask-image:linear-gradient(180deg, transparent 0, #000 28px);} .hero .fx-inner{max-width:var(--wrap); margin:0 auto; padding:24px 20px 28px; display:flex; align-items:center; gap:48px;} .hero-content{flex:1 1 400px; min-width:0; animation:fcFromLeft 1.2s cubic-bezier(.22,.8,.3,1) .15s both;} /* a szöveg balról úszik be (a vödrök jobbról – azt a pigment.js rajzolja) */ @keyframes fcFromLeft{from{opacity:0; transform:translateX(-150px);}to{opacity:1; transform:none;}} .eyebrow{ display:inline-block; margin:0 0 16px; font-weight:800; font-size:1.05rem; letter-spacing:.12em; text-transform:uppercase; color:var(--purple-500); } .hero-title{ margin:0 0 18px; font-size:clamp(2.3rem, 4.6vw, 3.5rem); line-height:1.12; text-wrap:balance; background:var(--grad-hero); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-stroke:0.6px rgba(31,36,48,0.28); paint-order:stroke fill; } .hero-body{margin:0 0 30px; max-width:48ch; font-family:var(--font-body); font-size:1.3rem; line-height:1.65; color:var(--body-text);} .logo-anchor{flex:1 1 440px; width:100%; max-width:min(560px, calc(100svh - 360px)); aspect-ratio:1/1;} /* alacsony képernyőn kisebb, hogy a fejléc és a kereső alatt kiférjen */ .logo-anchor noscript img{display:block; width:100%; margin-top:12%;} /* tartalmi kártyák: stúdióháttér + finom színátmenetes keret (38%) */ .section{ --hx:76%; --h-base:var(--heading-purple); --h-grad:var(--grad-hero); border:1px solid transparent; background: radial-gradient(52% 75% at var(--hx) 45%, var(--studio-hi) 0%, rgba(255,255,255,0) 72%) padding-box, linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 55%, var(--studio-lo) 100%) padding-box, linear-gradient(var(--card-bg), var(--card-bg)) padding-box, var(--grad-border) border-box; } .section[data-origin^="0.2"], .section[data-origin^="0.0"]{--hx:24%;} .section[data-grad="cyan"]{--h-grad:linear-gradient(90deg, #7367F0, #0B8FA0);} .section .fx-inner{padding:56px clamp(20px, 4vw, 56px) 60px;} .section h2{margin:0 0 10px; font-size:1.7rem; line-height:1.2; text-wrap:balance; color:var(--h-base);} .section.plain h2{font-size:1.5rem;} /* a főoldalon minden blokk címe akkora, mint a „Kéményt keresel?” */ body.home .section h2{font-size:clamp(1.8rem, 2.6vw, 2.3rem);} /* kártyacímek: mély lila alap, egy kulcsszó színátmenettel */ .section h2 .hl{background:var(--h-grad); -webkit-background-clip:text; background-clip:text; color:transparent;} .section p{margin:0 0 30px; font-family:var(--font-body); color:var(--body-text); max-width:52ch; line-height:1.75; font-size:1.1rem;} .split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:32px; align-items:center;} .split-space{min-height:240px;} .sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:22px;} .sec-head h2{margin:0;} .sec-head .sub{margin:6px 0 0;} .sec-head > a{font-family:var(--font-body); color:var(--purple-700); font-weight:500; text-decoration:none; white-space:nowrap;} .sec-head > a:hover{text-decoration:underline;} /* 7. FŐOLDALI BLOKKOK ====================================================== */ /* 7a. bizalmi sor: három színes kártya (a vödrök színeiben), nagy sorszámmal, ecsetvonással */ .trust{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; margin:0; padding:0; list-style:none; counter-reset:trust;} .trust li{ counter-increment:trust; position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:30px 28px 42px; border-radius:24px; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c) 16%, transparent) 0%, transparent 60%), linear-gradient(165deg, #FFFFFF 0%, color-mix(in srgb, var(--c) 5%, #FFFFFF) 100%); border:1px solid color-mix(in srgb, var(--c) 20%, #FFFFFF); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 18px 40px -28px color-mix(in srgb, var(--c) 55%, transparent); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease; } /* nagy, halvány sorszám a jobb felső sarokban */ .trust li::before{ content:"0" counter(trust); position:absolute; z-index:-1; top:-2px; right:16px; font-family:var(--font-head); font-weight:800; font-size:6.4rem; line-height:1; letter-spacing:-.04em; color:color-mix(in srgb, var(--c) 11%, transparent); transition:transform .5s ease, color .35s ease; } /* ecsetvonás alul: rámutatásra végigfut */ .trust li::after{ content:""; position:absolute; left:28px; bottom:18px; height:5px; width:54px; border-radius:6px; background:linear-gradient(90deg, var(--c), color-mix(in srgb, var(--c) 45%, #FFFFFF)); transition:width .45s cubic-bezier(.2,.8,.2,1); } .trust li:hover{transform:translateY(-6px); border-color:color-mix(in srgb, var(--c) 38%, #FFFFFF); box-shadow:0 1px 0 rgba(255,255,255,.9) inset, 0 28px 50px -26px color-mix(in srgb, var(--c) 70%, transparent);} .trust li:hover::before{transform:translate(-6px, 6px); color:color-mix(in srgb, var(--c) 17%, transparent);} .trust li:hover::after{width:calc(100% - 56px);} .trust .ti{ position:relative; width:68px; height:68px; margin-bottom:10px; border-radius:20px; display:flex; align-items:center; justify-content:center; color:var(--c); background:linear-gradient(145deg, #FFFFFF, color-mix(in srgb, var(--c) 14%, #FFFFFF)); box-shadow:0 14px 26px -14px color-mix(in srgb, var(--c) 65%, transparent), inset 0 1px 0 #FFFFFF, 0 0 0 1px color-mix(in srgb, var(--c) 16%, transparent); transition:transform .35s ease; } .trust .ti svg{width:40px; height:40px;} .trust li:hover .ti{transform:rotate(-6deg) scale(1.06);} .trust b{display:block; font-family:var(--font-head); font-size:1.18rem; font-weight:800; line-height:1.3; color:color-mix(in srgb, var(--c) 55%, #231A5C);} .trust .tx{font-family:var(--font-body); color:var(--body-text); font-size:1rem; line-height:1.55; max-width:30ch;} @media (prefers-reduced-motion: reduce){ .trust li, .trust li::before, .trust li::after, .trust .ti{transition:none;} .trust li:hover{transform:none;} } /* 7b. termékkategóriák (B2): álló kép, alul név + nyíl, rámutatásra felcsúszó alkategóriák */ .kgrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:30px;} .kcat{ position:relative; isolation:isolate; aspect-ratio:4/5; border-radius:18px; overflow:hidden; color:var(--ink); display:flex; flex-direction:column; justify-content:flex-end; box-shadow:0 16px 32px -24px rgba(58,45,140,.35); transition:transform .3s ease, box-shadow .3s ease; } .kcat .kimg{ position:absolute; inset:0; z-index:-1; display:flex; align-items:center; justify-content:center; background:radial-gradient(80% 90% at 65% 30%, color-mix(in srgb, var(--t) 20%, #FFFFFF) 0%, color-mix(in srgb, var(--t) 8%, #FFFFFF) 65%, #FAFAFC 100%); } .kcat .kimg img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;} .kcat .kimg img.def{object-position:58% 30%;} /* a sablon négyzetes képe: a festő és a vödrök maradjanak benne */ .kcat .big{width:30%; max-width:96px; height:auto; color:var(--t); opacity:.35; transform:translateY(-26px); transition:transform .45s ease;} .kcat .ph{position:absolute; left:14px; top:12px; font-size:.6rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#A0A8B4;} /* a sáv szándékosan nem pozicionált: így a név linkjének ::after rétege az egész csempét lefedi */ .kcat .bar{padding:18px 20px; background:linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.93) 30%);} .kcat .nrow{display:flex; align-items:center; justify-content:space-between; gap:12px;} .kcat .nm{display:block; min-width:0; font-weight:800; font-size:1.12rem; line-height:1.3; color:var(--ink); text-decoration:none; hyphens:manual;} /* a név linkje lefedi az egész csempét – így bárhová kattintasz, a kategóriába visz */ .kcat .nm::after{content:''; position:absolute; inset:0; z-index:1;} .kcat .nm:focus-visible{outline:none;} .kcat:has(.nm:focus-visible){outline:3px solid var(--purple-500); outline-offset:3px;} .kcat .kgo{ position:relative; overflow:hidden; isolation:isolate; flex-shrink:0; width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--t) 14%, #FFFFFF); color:var(--t); transition:color .25s ease; } .kcat .kgo::before{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(135deg, var(--purple-500), var(--purple-700)); opacity:0; transition:opacity .25s ease;} .kcat .kgo svg{width:18px; height:18px; transition:transform .25s ease;} .kcat .subs{ position:relative; z-index:3; /* az alkategóriák a lefedő link fölött, külön kattinthatók */ max-height:0; opacity:0; overflow:hidden; margin:0; transition:max-height .4s ease, opacity .3s ease, margin .3s ease; font-family:var(--font-body); font-size:.94rem; line-height:1.95; } .kcat .subs a{color:#3F4753; text-decoration:none;} .kcat .subs a:hover{color:var(--ink); text-decoration:underline;} .kcat .subs li a::before{content:'›'; color:var(--t); font-weight:700; margin-right:7px;} .kcat .subs li.more a{color:var(--purple-700); font-weight:500;} .kcat .subs li.more a::before{content:''; margin:0;} /* finom színátmenetes keret (::after), rámutatáskor erősebb (::before) */ .kcat::after, .kcat::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:2; -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); transition:opacity .3s ease; } .kcat::after{padding:1px; background:var(--grad-border);} .kcat::before{padding:1.5px; opacity:0; background:linear-gradient(120deg,#3D7BE8,#7367F0,#AD41E8,#E515CF,#C41262);} .kcat:hover, .kcat:focus-within{transform:translateY(-4px); box-shadow:0 26px 44px -24px rgba(58,45,140,.45);} .kcat:hover::before, .kcat:focus-within::before{opacity:.7;} .kcat:hover::after, .kcat:focus-within::after{opacity:0;} .kcat:hover .subs, .kcat:focus-within .subs{max-height:260px; opacity:1; margin-top:10px;} .kcat:hover .big, .kcat:focus-within .big{transform:scale(1.08) translateY(-60px);} .kcat:hover .kimg img{transform:scale(1.04);} .kcat:hover .kgo{color:#fff;} .kcat:hover .kgo::before{opacity:1;} .kcat:hover .kgo svg{transform:translateX(2px);} /* 7b1. bemutató blokkok (színkeverés, tanács, szállítás): szöveg + rajzolt illusztráció */ .feat .fx-inner{gap:clamp(36px,5vw,80px); padding-top:52px; padding-bottom:52px;} .feat .feyebrow{margin:0 0 10px; font-family:var(--font-head); font-weight:800; font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--purple-500);} .ftext h2{margin-bottom:14px; font-size:clamp(1.8rem, 2.6vw, 2.3rem);} /* azonos a „Kéményt keresel?” címmel */ .feat .ftext p:not(.feyebrow){font-size:1.12rem;} .fvis{position:relative; z-index:1; width:100%; max-width:440px; justify-self:center;} /* színkeverés: vödör, körülötte színfoltok, alatta a 3 lépés */ .mix-stage{position:relative; aspect-ratio:1.25/1;} .mix-can{position:absolute; left:50%; top:52%; width:48%; transform:translate(-50%,-50%); filter:drop-shadow(0 18px 22px rgba(58,45,140,.22));} .mix-can svg.can{width:100%; height:auto; display:block;} .blob{position:absolute; border-radius:50%; box-shadow:0 10px 22px -12px rgba(31,36,48,.45), inset 0 0 0 3px rgba(255,255,255,.55); animation:fcBob 6s ease-in-out infinite;} .b1{width:17%; aspect-ratio:1; left:6%; top:12%; background:#E5487F;} .b2{width:12%; aspect-ratio:1; left:20%; top:62%; background:#F5A524; animation-delay:-1.5s;} .b3{width:14%; aspect-ratio:1; right:8%; top:8%; background:#3D9BD6; animation-delay:-3s;} .b4{width:10%; aspect-ratio:1; right:16%; top:66%; background:#A3B899; animation-delay:-4.2s;} .b5{width:8%; aspect-ratio:1; left:44%; top:2%; background:#7367F0; animation-delay:-2.2s;} @keyframes fcBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .mix-tag{position:absolute; padding:5px 11px; border-radius:999px; background:#fff; font-family:var(--font-body); font-size:.8rem; font-weight:700; color:var(--ink); box-shadow:0 8px 18px -10px rgba(58,45,140,.45);} .t1{left:0; top:38%;} .t2{right:0; top:36%;} .t3{left:50%; bottom:0; transform:translateX(-50%);} .mix-steps{display:flex; justify-content:center; gap:8px; margin:18px 0 0; padding:0; list-style:none; flex-wrap:wrap;} .mix-steps li{display:inline-flex; align-items:center; gap:8px; padding:7px 12px 7px 7px; border-radius:999px; background:#fff; border:1px solid #ECE8FA; font-family:var(--font-body); font-size:.88rem; font-weight:500; color:var(--ink);} .mix-steps b{width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--purple-500),#C4447F); color:#fff; font-size:.78rem;} /* tanács: „Mit szeretnél festeni?” választó */ .ppick{width:100%;} .ppick-h{margin:0 0 12px !important; font-family:var(--font-head) !important; font-weight:800; font-size:1.05rem !important; color:var(--ink) !important;} .ppick ul{margin:0; padding:0; list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px;} .ppick li a{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px 12px 12px 12px; border-radius:14px; background:#fff; border:1.5px solid #ECE8FA; text-decoration:none; color:var(--ink); box-shadow:0 10px 22px -20px rgba(58,45,140,.6); transition:border-color .2s, transform .2s, box-shadow .2s;} .ppick li a:hover{border-color:var(--c); transform:translateY(-2px); box-shadow:0 16px 26px -18px rgba(58,45,140,.55);} .ppick .pi{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--c) 13%, #fff); color:var(--c);} .ppick .pi svg{width:22px; height:22px;} .ppick .pt{display:flex; flex-direction:column; min-width:0;} .ppick .pt b{font-family:var(--font-head); font-weight:800; font-size:.98rem; line-height:1.25;} .ppick .pt small{font-family:var(--font-body); font-size:.8rem; color:var(--muted-text); line-height:1.35;} .ppick .pa{width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; color:var(--c); transition:transform .2s;} .ppick .pa svg{width:15px; height:15px;} .ppick li a:hover .pa{transform:translateX(3px);} .ppick-more{display:inline-flex; align-items:center; gap:6px; margin-top:14px; font-family:var(--font-body); font-weight:700; font-size:.92rem; color:var(--purple-700); text-decoration:none;} .ppick-more svg{width:15px; height:15px;} .ppick-more:hover{text-decoration:underline;} .feat-help .fvis{max-width:520px;} /* Termékkategóriák: „Összes termék” gomb a csempék alatt */ .kall{margin:28px 0 0 !important; max-width:none !important; display:flex; justify-content:center;} .kall .cta svg{width:18px; height:18px;} /* színkeverés: a keverőgép fotója, a sarkában kártya a pigmentkeveréssel */ .feat-mix .fx-inner{grid-template-columns:minmax(0,.78fr) minmax(0,1fr); gap:clamp(40px,6.5vw,104px);} /* ugyanaz, mint a KéményShop blokk */ .feat-mix .fvis{max-width:none;} .mixph-wrap{position:relative; padding:0 0 30px;} .mixph{border-radius:22px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 24px 44px -26px rgba(31,36,48,.55); background:#E9EAEE;} .mixph img{width:100%; height:100%; object-fit:cover; display:block;} .mixchip{position:absolute; right:-16px; bottom:0; display:flex; align-items:center; gap:12px; padding:10px 16px 10px 10px; border-radius:18px; background:#fff; box-shadow:0 22px 40px -22px rgba(58,45,140,.6);} .mixchip-art{position:relative; width:96px; height:64px; border-radius:12px; overflow:hidden; background:#FAFAFD; flex-shrink:0;} .mixchip p{margin:0 !important; display:flex; flex-direction:column; font-size:1rem !important;} .mixchip b{font-family:var(--font-head); font-weight:800; font-size:1rem; color:var(--ink);} .mixchip small{font-family:var(--font-body); font-size:.8rem; color:var(--muted-text);} /* tanács: a szakértő fotója, rajta az elérhetőség */ .hexp{position:relative; padding:0 0 34px;} .hph{border-radius:22px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 24px 44px -26px rgba(31,36,48,.55); background:#EDEBF5;} .hph img{width:100%; height:100%; object-fit:cover; display:block;} .hchip{position:absolute; left:-14px; top:22px; display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:999px; background:#fff; font-family:var(--font-head); font-weight:800; font-size:.86rem; color:var(--purple-700); box-shadow:0 12px 24px -14px rgba(58,45,140,.55);} .hchip svg{width:20px; height:20px; padding:4px; border-radius:50%; background:linear-gradient(135deg,var(--purple-500),var(--purple-700)); color:#fff;} /* a márka lilája */ .hcard{position:absolute; right:-14px; bottom:0; display:flex; align-items:center; gap:14px; padding:14px 18px 14px 14px; border-radius:18px; background:#fff; text-decoration:none; box-shadow:0 22px 40px -22px rgba(58,45,140,.6); transition:transform .2s ease, box-shadow .2s ease;} .hcard:hover{transform:translateY(-2px); box-shadow:0 26px 44px -22px rgba(58,45,140,.7);} .hav{width:48px; height:48px; border-radius:14px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,var(--purple-500),var(--purple-700)); color:#fff;} .hav svg{width:24px; height:24px;} .htx{display:flex; flex-direction:column;} .htx small{font-family:var(--font-body); font-size:.8rem; color:var(--muted-text);} .htx b{font-family:var(--font-head); font-weight:800; font-size:1.2rem; color:var(--ink); white-space:nowrap;} .htx em{display:flex; align-items:center; gap:5px; font-style:normal; font-family:var(--font-body); font-size:.8rem; color:var(--body-text);} .htx em svg{width:13px; height:13px; color:var(--purple-500);} .feat-photo .fvis{max-width:none;} /* a fotó ugyanakkora, mint a KéményShop blokk képe: ugyanaz a rács (szöveg : kép = 1 : 0,78) és térköz */ .feat-photo .fx-inner{grid-template-columns:minmax(0,1fr) minmax(0,.78fr); gap:clamp(40px,6.5vw,104px);} /* tanács: minta-beszélgetés */ .chat{display:flex; flex-direction:column; gap:12px; padding:22px; border-radius:22px; background:rgba(255,255,255,.85); box-shadow:0 24px 44px -30px rgba(58,45,140,.5); border:1px solid #EFEBFA;} .chat .msg{margin:0; max-width:86%; padding:12px 16px; font-family:var(--font-body); font-size:.98rem; line-height:1.5; border-radius:18px;} .msg.q{align-self:flex-end; background:linear-gradient(135deg,var(--purple-500),var(--purple-700)); color:#fff; border-bottom-right-radius:6px;} .msg.a{align-self:flex-start; background:#FFF7DD; color:#3F3A2A; border-bottom-left-radius:6px;} .msg .who{display:block; margin-bottom:3px; font-family:var(--font-head); font-weight:800; font-size:.78rem; color:#9A6A00;} .msg.short{padding:9px 14px;} .typing{align-self:flex-start; display:inline-flex; gap:4px; padding:10px 14px; border-radius:14px; background:#FFF7DD;} .typing i{width:6px; height:6px; border-radius:50%; background:#D4A500; opacity:.4; animation:fcDot 1.2s infinite;} .typing i:nth-child(2){animation-delay:.2s} .typing i:nth-child(3){animation-delay:.4s} @keyframes fcDot{0%,60%,100%{opacity:.35; transform:none}30%{opacity:1; transform:translateY(-3px)}} .feat .chat-note{margin:10px 0 0; max-width:none; text-align:center; font-family:var(--font-body); font-size:.8rem; color:var(--muted-text);} /* szállítás: a módok árral */ .ship-list{margin:0; padding:0; list-style:none; display:grid; gap:10px;} .ship-list li{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px; padding:13px 16px; border-radius:16px; background:rgba(255,255,255,.9); border:1px solid #ECE8FA; box-shadow:0 12px 26px -22px rgba(58,45,140,.5);} .ship-list .si{width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:#F0EEFD; color:var(--purple-500);} .ship-list .si svg{width:22px; height:22px;} .ship-list .sn b{display:block; font-size:.98rem; color:var(--ink);} .ship-list small{display:block; font-family:var(--font-body); font-size:.8rem; color:var(--muted-text); font-weight:400;} .ship-list .sp{text-align:right; font-weight:800; color:var(--ink); white-space:nowrap;} .ship-list li.hi{border-color:transparent; background:linear-gradient(#fff,#fff) padding-box, var(--grad-hero) border-box; border:1.5px solid transparent;} .ship-list li.hi .sp{color:#2F7D52;} /* 7b2. Leier KéményShop ajánló: kép balra, logó, rövid szöveg, gomb a külső boltba */ .chimney .fx-inner{display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr); gap:clamp(40px,6.5vw,104px); align-items:center;} /* kisebb kép, több levegő a szövegig */ .chimney .ch-img{aspect-ratio:4/3; border-radius:22px; overflow:hidden; box-shadow:0 24px 44px -28px rgba(31,36,48,.5);} .chimney .ch-img img{width:100%; height:100%; object-fit:cover; object-position:55% 50%;} .chimney .ch-body{display:flex; flex-direction:column; align-items:flex-start;} /* a szöveg magassága a képéhez igazodik */ /* Leier Kémény × Aranyi Építőanyag: felirat + két logó, köztük vonallal összekötött „×” */ .chimney .ch-collab{margin:0 0 14px; font-family:var(--font-head); font-weight:800; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:#0073AC; max-width:none;} .chimney .ch-logos{display:flex; align-items:center; gap:0; margin:0 0 28px;} .chimney .ch-plus{position:relative; flex-shrink:0; display:flex; align-items:center; justify-content:center; width:clamp(84px,8vw,130px); align-self:stretch;} .chimney .ch-plus::before{content:''; position:absolute; left:14px; right:14px; top:50%; height:2px; border-radius:2px; background:linear-gradient(90deg,#0073AC,#FFD600);} .chimney .ch-plus i{position:relative; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#fff; box-shadow:0 0 0 2px #E6E9F0, 0 6px 14px -8px rgba(31,36,48,.5); font-style:normal; font-family:var(--font-body); font-size:1.05rem; font-weight:700; color:var(--ink);} .chimney .ch-aranyi{display:block; height:54px; width:auto; transition:transform .2s ease;} .chimney .ch-aranyi-link{display:block; border-radius:8px;} .chimney .ch-aranyi-link:hover .ch-aranyi{transform:translateY(-2px);} .chimney .ch-logo{display:inline-block; padding:13px 18px; border-radius:12px; background:#0073AC;} /* a fehér logó a Leier kékjén */ .chimney .ch-logo{flex-shrink:0;} .chimney .ch-aranyi-link{flex-shrink:0;} .chimney .ch-logo img{display:block; height:26px; width:auto;} .chimney h2{margin:0 0 14px; font-size:clamp(1.8rem, 2.6vw, 2.3rem);} .chimney p{margin:0 0 32px; font-size:1.2rem; line-height:1.7; max-width:34ch;} .chimney .cta, body.home .cta{padding:16px 30px; font-size:1.05rem;} /* a főoldal minden gombja akkora, mint a KéményShop gombja */ body.home .prod .cta{padding:12px 14px; font-size:.92rem;} .chimney .cta .ext{width:16px; height:16px;} .chimney .ch-note{display:block; margin-top:12px; font-family:var(--font-body); font-size:.84rem; color:var(--muted-text);} /* 7c. termékkártyák */ .prods{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; align-items:stretch;} .prod{ position:relative; display:flex; flex-direction:column; padding:10px; border-radius:18px; background:linear-gradient(180deg,#FFFFFF 0%, #FBFAFF 100%); border:1px solid #E7E4F5; box-shadow:0 1px 2px rgba(58,45,140,.04), 0 16px 32px -24px rgba(58,45,140,.32); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .prod .pimg{ position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center; background:radial-gradient(75% 70% at 50% 38%, color-mix(in srgb, var(--t) 13%, #FFFFFF) 0%, color-mix(in srgb, var(--t) 6%, #FFFFFF) 70%, #FAFAFC 100%); } .prod .pimg img{width:100%; height:100%; object-fit:contain; transition:transform .35s ease;} .prod .pimg:has(img){background:#fff;} /* valódi termékfotónál fehér háttér (a fotók többnyire fehér alapúak) */ .prod .pimg svg.can{width:62%; height:auto; transition:transform .35s ease;} .prod .ph{position:absolute; left:10px; bottom:8px; font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#A0A8B4;} .prod .badge{position:absolute; left:10px; top:10px; font-size:.72rem; font-weight:800; letter-spacing:.02em; padding:5px 9px; border-radius:8px; background:#EDEBFE; color:var(--purple-700);} .prod .badge.sale{background:#C41262; color:#FFFFFF;} .prod .pb{padding:14px 6px 4px; display:flex; flex-direction:column; flex:1;} .prod .pcat{font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-text); margin-bottom:5px;} .prod .pn{margin:0; font-weight:700; font-size:1.02rem; line-height:1.3; min-height:2.6em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;} .prod .pn a{color:var(--ink); text-decoration:none;} .prod .pn a:hover{color:var(--purple-700);} .prod .chips{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 14px;} .prod .chips li{font-family:var(--font-body); font-size:.78rem; font-weight:500; padding:3px 8px; border-radius:6px; background:#F3F1FD; color:var(--purple-700);} .prod .prow{margin-top:auto; display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px;} .prod .pp{font-weight:800; font-size:1.34rem; letter-spacing:-.01em; color:var(--ink); font-variant-numeric:tabular-nums;} .prod .pp small{font-weight:700; font-size:.82rem; color:var(--body-text); margin-left:1px;} .prod .pp.sale{color:#C41262;} .prod .old{font-family:var(--font-body); font-size:.85rem; color:var(--muted-text);} .prod .pmeta{display:flex; justify-content:space-between; align-items:center; gap:8px; margin:4px 0 14px; font-family:var(--font-body); font-size:.8rem; color:#6B7280; min-height:1.2em;} .prod .stock{display:inline-flex; align-items:center; gap:5px; color:#2F7D52; font-weight:500;} .prod .stock::before{content:''; width:7px; height:7px; border-radius:50%; background:#2F9E63;} .prod .stock.back{color:#9A6A00;} .prod .stock.back::before{background:#D4A500;} .prod .stock.out{color:#8A94A3;} .prod .stock.out::before{background:#A0A8B4;} .prod .cta{width:100%; justify-content:center; padding:12px 14px; font-size:.92rem;} .prod .cta svg{width:17px; height:17px; flex-shrink:0;} .prod:hover{transform:translateY(-4px); border-color:#CFC8F5; box-shadow:0 2px 4px rgba(58,45,140,.05), 0 26px 44px -24px rgba(58,45,140,.42);} .prod:hover svg.can, .prod:hover .pimg img{transform:scale(1.05) translateY(-2px);} /* 7d. vélemények (csak valódiak) */ .revs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;} .rev{margin:0; border:1px solid #E7E4F5; border-radius:16px; background:#fff; padding:20px; display:flex; flex-direction:column; gap:10px;} .rev .stars{color:#E9BE10; letter-spacing:2px; font-size:1.05rem;} .rev blockquote{margin:0; font-family:var(--font-body); color:var(--body-text); line-height:1.6;} .rev .who{display:flex; align-items:center; gap:10px; margin-top:auto; font-weight:700; font-size:.9rem;} .rev .who i{width:32px; height:32px; border-radius:50%; background:#EDEBFE; color:var(--purple-700); display:flex; align-items:center; justify-content:center; font-style:normal;} .rev .who small{display:block; font-weight:500; color:var(--muted-text); font-family:var(--font-body);} /* 7e. partnerek */ .partners{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px;} .partners li{height:64px; border-radius:12px; display:flex; align-items:center; justify-content:center; padding:8px 12px; background:rgba(255,255,255,.6);} .partners img{max-height:44px; width:auto; object-fit:contain; transition:transform .25s;} .partners li:hover img{transform:scale(1.05);} .partners li.ph, .ptrack li.ph{border:1px dashed #C9CED6; color:#A0A8B4; font-size:.78rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;} .partners li > a, .partners li > span, .ptrack li > a, .ptrack li > span{display:flex; align-items:center; justify-content:center; width:100%; height:100%;} .partners li:has(a):hover, .ptrack li:has(a):hover{background:#fff; box-shadow:0 10px 22px -16px rgba(58,45,140,.5);} .partners li:has(a:focus-visible), .ptrack li:has(a:focus-visible){outline:3px solid var(--purple-500); outline-offset:2px;} .partners a:focus-visible, .ptrack a:focus-visible{outline:none;} /* sok logó: két, ellentétes irányba lassan úszó sor; rámutatásra megáll */ .pmarq{display:flex; flex-direction:column; gap:14px; margin-inline:calc(-1 * clamp(20px, 4vw, 56px)); -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);} .pmrow{overflow:hidden;} .ptrack{display:flex; gap:14px; width:max-content; margin:0; padding:4px 0; list-style:none; animation:fcMarq calc(var(--n) * 3.2s) linear infinite;} .pmrow.back .ptrack{animation-direction:reverse;} .pmarq:hover .ptrack, .pmarq:focus-within .ptrack{animation-play-state:paused;} .ptrack li{flex:0 0 168px; height:72px; border-radius:12px; display:flex; align-items:center; justify-content:center; padding:10px 16px; background:rgba(255,255,255,.7); transition:background-color .2s, box-shadow .2s;} .ptrack img{max-height:46px; max-width:100%; width:auto; object-fit:contain; transition:transform .25s;} .ptrack li:hover img{transform:scale(1.05);} @keyframes fcMarq{from{transform:translateX(0)} to{transform:translateX(calc(-50% - 7px))}} @media (prefers-reduced-motion: reduce){ .pmarq{margin-inline:0; -webkit-mask-image:none; mask-image:none;} .pmrow{overflow:visible;} .ptrack{animation:none; width:auto; flex-wrap:wrap; justify-content:center;} .ptrack li[aria-hidden="true"]{display:none;} } /* 7f. rólunk röviden */ .about{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:40px; align-items:center;} .about .aimg{position:relative; aspect-ratio:4/3; border-radius:18px; overflow:hidden; background:linear-gradient(135deg, rgba(89,73,228,.18), rgba(59,209,213,.14) 55%, rgba(233,190,16,.12));} .about .aimg img{width:100%; height:100%; object-fit:cover;} .about .aimg .ph{position:absolute; left:14px; bottom:12px; color:var(--muted-text); font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;} /* 8. LÁBLÉC ================================================================ */ .site-footer{margin-top:0;} .site-foot{background:var(--bar-gray); color:#E6E9F0; font-family:var(--font-body);} .site-foot .in{max-width:calc(var(--wrap) + 80px); margin:0 auto; padding:48px 40px 36px; display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px;} .site-foot .fh{margin:0 0 12px; color:#fff; font-family:var(--font-body); font-weight:700; font-size:1.02rem; letter-spacing:.01em;} .site-foot .brand{margin:0 0 10px; font-weight:700; color:#fff; font-size:1.18rem;} .site-foot address{font-style:normal; display:flex; flex-direction:column;} .site-foot address, .site-foot li{font-weight:500; line-height:2; font-size:.98rem;} .site-foot a{color:#E6E9F0; text-decoration:none;} .site-foot a:hover{color:#fff; text-decoration:underline;} .site-foot .linklike{background:none; border:0; padding:0; margin:0; font:inherit; color:#E6E9F0; cursor:pointer; text-align:left;} .site-foot .linklike:hover{color:#fff; text-decoration:underline;} .site-foot .soc{display:flex; gap:10px; margin-top:12px;} .site-foot .soc a{width:38px; height:38px; border-radius:50%; border:1.5px solid #8A919E; display:flex; align-items:center; justify-content:center;} .site-foot .soc a:hover{border-color:#fff; text-decoration:none;} .site-foot .soc svg{width:18px; height:18px;} .site-foot .soc a.fb{border:0;} .site-foot .soc a.fb svg{width:38px; height:38px; transition:transform .15s;} .site-foot .soc a.fb:hover svg{transform:scale(1.08);} .site-foot .copyline{border-top:1px solid #4B515D;} .site-foot .copy > span{flex:1 1 0;} .site-foot .copy .pnote-f{flex:2 1 0; text-align:center; font-weight:500; color:#B3B9C4;} .site-foot .copy > span:last-child{text-align:right;} .fc-cardmarks.foot{flex:none; display:inline-flex; gap:5px;} .fc-cardmarks.foot span{padding:2px 7px; border-radius:6px; border:1px solid #5B616E; font-size:.72rem; font-weight:700; color:#D5D9E2;} /* az árakról szóló mondat középen */ .site-foot .copy{max-width:calc(var(--wrap) + 80px); margin:0 auto; padding:16px 40px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 24px; color:#D5D9E2; font-weight:500; font-size:.88rem;} .site-foot .copy span{color:#B3B9C4; font-size:.88rem; font-weight:500;} /* az alsó sor mindhárom felirata egyforma színű */ .site-foot .copy .love{display:inline-flex; align-items:center; gap:5px;} .site-foot .copy .heart{width:15px; height:15px; fill:#E5487F; flex-shrink:0; transform:translateY(.5px);} /* 9. EGYSZERŰ OLDALAK (tartalék sablonok) =================================== */ .page-basic{padding-top:40px; max-width:900px;} .page-title{margin:0; font-size:clamp(1.7rem, 3vw, 2.3rem); color:var(--heading-purple); text-wrap:balance;} .basic-page .entry, .basic-card .entry{font-family:var(--font-body); font-size:1.05rem; line-height:1.75; color:var(--body-text);} .basic-page .entry{margin-top:18px;} .post-list{display:flex; flex-direction:column; gap:16px;} .basic-card{padding:22px 24px; background:#fff; border:1px solid #E7E4F5; border-radius:16px;} .basic-card h2{margin:0 0 6px; font-size:1.2rem;} .basic-card h2 a{color:var(--ink); text-decoration:none;} .empty{font-family:var(--font-body); color:var(--body-text);} /* 10. NAGY KIJELZŐK (pl. iMac 24", 27") =================================== A tartalom szélesebb (--wrap), a betűk és az elemek kicsit nagyobbak, hogy ne tűnjön keskenynek és aprónak a nagy képernyőn. */ @media (min-width:1500px){ /* KéményShop: nagy kijelzőn a nagyobb képhez nagyobb szöveg */ .chimney .ch-logo img{height:34px;} .chimney .ch-logo{padding:15px 22px;} .chimney .ch-logos{margin-bottom:32px;} .chimney .ch-aranyi{height:70px;} .chimney .ch-collab{font-size:.9rem;} .chimney h2, .ftext h2{font-size:2.7rem; margin-bottom:18px;} body.home .section h2{font-size:2.7rem;} .chimney p{font-size:1.38rem; margin-bottom:36px;} .chimney .cta, body.home .cta{padding:18px 34px; font-size:1.12rem;} body.home .prod .cta{padding:12px 14px; font-size:.92rem;} .chimney .ch-note{font-size:.95rem;} :root{font-size:17px;} .site-info{font-size:16px;} .site-info .in{min-height:54px;} .ncat{font-size:14px; max-width:180px; padding-inline:10px;} .ncat > svg{width:28px; height:28px;} .site-logo{height:74px;} .site-header.is-compact .site-logo{height:50px;} .nicons svg, .icon-btn svg{width:31px; height:31px;} .icon-btn{width:50px; height:50px;} .sbar{max-width:980px; height:66px;} .hero .fx-inner{gap:72px; padding-top:32px; padding-bottom:32px;} .logo-anchor{max-width:min(700px, calc(100svh - 400px));} .hero-title{font-size:clamp(3.4rem, 3.6vw, 4.2rem);} .hero-body{font-size:1.4rem;} div.page{gap:64px;} .kgrid{gap:32px;} .kcat{aspect-ratio:1/1.1;} /* szélesebb csempe mellett ne legyen túl magas */ .prods{gap:28px;} .section .fx-inner{padding:64px clamp(24px, 4vw, 72px) 68px;} .section p{max-width:58ch;} .split-space{min-height:280px;} } @media (min-width:1900px){ :root{font-size:18px;} .ncat{font-size:15px;} .site-nav .in{min-height:112px;} } /* 11. MOBIL ÉS TABLET ====================================================== */ @media (max-width:1100px){ .ncats{display:none;} .menu-toggle{display:inline-flex;} /* tableten az infósáv linkjei a hamburger-menüben vannak, itt csak az elérhetőség marad */ .site-info .in nav{display:none;} .site-info .in{justify-content:center;} .site-nav .in, .site-header.is-compact .site-nav .in{min-height:72px;} /* mobilon: lefelé görgetéskor elrejtőzik, felfelé azonnal visszajön */ .site-header.is-hidden{transform:translateY(-100%);} } @media (max-width:980px){ .prods{grid-template-columns:repeat(2,minmax(0,1fr));} .kgrid{grid-template-columns:repeat(2,minmax(0,1fr));} .partners{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (max-width:760px){ :root{--hdr-h:76px;} .site-info .in nav{display:none;} .site-info .in{padding:0 16px; justify-content:center; font-size:13px; min-height:42px;} .site-nav .in{padding:0 10px; min-height:64px; gap:6px;} .site-logo, .site-header.is-compact .site-logo{height:44px;} .site-header.is-compact .site-nav .in{min-height:64px;} .nicons{gap:0;} .icon-btn svg{width:26px; height:26px;} .site-search{padding:14px 16px 0;} .sbar{height:52px; padding:0 5px 0 16px; gap:10px;} .sbar input[type="search"]{font-size:16px;} /* 16px alatt az iPhone ránagyít */ .sbar button{width:40px; height:40px;} .hero .fx-inner{flex-direction:column; align-items:stretch; padding:24px 16px; gap:8px;} .logo-anchor{flex-basis:auto; max-width:100%; margin-inline:auto;} div.page{padding:0 16px 48px; gap:30px;} .split{grid-template-columns:1fr;} .chimney .fx-inner{grid-template-columns:1fr; gap:22px;} .chimney .ch-img{order:2;} .chimney .ch-logos{margin-bottom:20px;} .chimney .ch-logo{padding:9px 11px; border-radius:10px;} .chimney .ch-logo img{height:17px;} .chimney .ch-aranyi{height:38px;} .chimney .ch-plus{width:52px;} .chimney .ch-plus::before{left:6px; right:6px;} .chimney .ch-plus i{width:24px; height:24px; font-size:.9rem;} .chimney .ch-collab{font-size:.72rem;} .chimney h2, .ftext h2, body.home .section h2{font-size:1.6rem;} .chimney p{font-size:1.05rem; margin-bottom:22px;} .chimney .cta, body.home .cta{padding:14px 24px; font-size:1rem;} .split-space{min-height:200px; order:2;} /* mobilon a szöveg felül, a kép alul */ .feat .fx-inner{padding-top:30px; padding-bottom:34px; gap:26px;} .feat .fvis{order:2; max-width:360px;} .feat-help .fvis{order:0; max-width:none;} /* a választó a szöveg alatt */ .feat-photo .fvis{order:2; max-width:none;} .feat-mix .fx-inner{grid-template-columns:1fr;} .feat-mix .fvis{order:2; max-width:none;} .mixchip{right:-6px;} .feat-photo .fx-inner{grid-template-columns:1fr;} .hchip{left:12px; top:-14px;} .hcard{right:-6px;} .hexp{padding:14px 0 66px;} .hexp .hchip{top:0;} .ppick ul{grid-template-columns:1fr;} .feat .ftext p:not(.feyebrow){font-size:1.02rem;} .ship-list li{padding:11px 12px; gap:10px;} .ship-list .si{width:34px; height:34px;} .chat .msg{font-size:.92rem;} .kgrid{gap:14px; margin-top:20px;} .kcat{aspect-ratio:3/4.3; border-radius:16px;} .kcat .bar{padding:12px;} .kcat .subs{display:none;} .kcat .nm{font-size:.92rem;} .kcat .nrow{gap:8px;} .kcat .kgo{width:30px; height:30px; border-radius:8px;} .kcat .kgo svg{width:15px; height:15px;} .kcat .big{transform:translateY(-16px);} .prods{gap:12px;} .prod{padding:7px; border-radius:16px;} .prod .pb{padding:10px 4px 2px;} .prod .pn{font-size:.9rem;} .prod .pp{font-size:1.1rem;} .prod .pmeta{flex-direction:column; align-items:flex-start; gap:2px;} .prod .cta, body.home .prod .cta{padding:10px 8px; font-size:.8rem;} .prod .cta svg{display:none;} .prod .chips li{font-size:.72rem;} .trust{grid-template-columns:1fr;} .partners{gap:10px;} .ptrack li{flex-basis:132px; height:60px;} .ptrack img{max-height:38px;} .pmarq{margin-inline:-16px;} .revs{grid-template-columns:1fr;} .revs .rev:nth-child(n+2){display:none;} .about{grid-template-columns:1fr; gap:20px;} .sec-head{flex-direction:column; align-items:flex-start; gap:6px;} .site-foot .in{grid-template-columns:1fr 1fr; padding:32px 20px 24px; gap:24px;} .site-foot .in > div:first-child{grid-column:1 / -1;} .site-foot .copy{padding:14px 20px; justify-content:center; text-align:center;} .site-foot .copy{flex-direction:column; align-items:center;} .site-foot .copy > span, .site-foot .copy > span:last-child{flex:none; text-align:center;} } /* robotvédelem: a csapdamező rejtve, a Turnstile doboz helye */ .fc-hp{position:absolute !important; left:-10000px !important; width:1px; height:1px; overflow:hidden;} .fc-turnstile{min-height:65px; margin:4px 0 2px;} .fc-turnstile .cf-turnstile{width:100%;} /* kevesebb mozgás, ha a látogató így állította be */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{transition:none !important; animation:none !important;} .cta:hover, .kcat:hover, .prod:hover{transform:none;} } .site-foot .khrow{display:flex; justify-content:center; padding:0 20px 18px;} .fc-khbanner.foot{height:56px; width:auto; border-radius:6px; display:block;} /* K&H webshop-címke (kötelező), olvasható méretben */ /* HÍRLEVÉL-FELIRATKOZÁS (inc/newsletter.php) ============================== */ .nlfoot{border-bottom:1px solid #4B515D;} .nlbox{max-width:calc(var(--wrap) + 80px); margin:0 auto; padding:36px 40px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:18px 48px; align-items:center; font-family:var(--font-body);} .nlbox .nlh{margin:0 0 6px; font-family:var(--font-head); font-weight:800; font-size:1.35rem; line-height:1.25;} .nlbox .nltext p{margin:0; line-height:1.55;} .nlrow{display:flex; gap:10px;} .nlbox .input-text{flex:1 1 auto; width:100%; min-width:0; height:52px; padding:0 16px; border-radius:var(--radius-btn); border:1.5px solid #DAD6F2; background:#fff; font-family:var(--font-body); font-size:1rem; color:var(--ink);} .nlbox .input-text::placeholder{color:#6B7280;} .nlbox .input-text:focus{outline:3px solid rgba(115,103,240,.55); outline-offset:1px; border-color:var(--purple-500);} .nlbox .input-text[aria-invalid="true"]{border-color:#E0457B;} .nlbox .cta{flex-shrink:0; height:52px; padding:0 24px;} .nlconsent{display:flex; align-items:flex-start; gap:10px; margin:12px 0 0; font-size:.88rem; line-height:1.5;} .nlconsent input{width:18px; height:18px; margin:2px 0 0; flex-shrink:0; accent-color:var(--purple-500);} .nlconsent label{cursor:pointer;} .nlconsent a{font-weight:700; text-decoration:underline;} .nlerr{margin:8px 0 0; font-size:.88rem; font-weight:600;} .nlok{display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:14px; line-height:1.55;} .nlok svg{width:26px; height:26px; flex-shrink:0; margin-top:2px;} .nlok p{margin:0;} /* a sötét láblécben */ .site-foot .nlbox .nlh{color:#fff;} .site-foot .nlbox .nltext p, .site-foot .nlconsent{color:#D5D9E2;} .site-foot .nlconsent a{color:#fff;} .site-foot .nlerr{color:#FFB3C7;} .site-foot .nlok{background:rgba(255,255,255,.08); color:#E6E9F0;} .site-foot .nlok svg{color:#B9B2FF;} /* a Kapcsolat oldalon (világos kártya) */ .nlcontact{margin-top:28px;} .nlcontact .nlbox{padding:clamp(24px,3vw,36px) clamp(24px,3vw,40px);} .nlcontact .nlh{color:var(--heading-purple);} .nlcontact .nltext p, .nlcontact .nlconsent{color:var(--body-text);} .nlcontact .nlconsent a{color:var(--purple-700);} .nlcontact .nlerr{color:#B0124F;} .nlcontact .nlok{background:#F4F3FC; color:var(--ink);} .nlcontact .nlok svg{color:var(--purple-500);} /* megerősítő / leiratkozó oldal */ .nlpage{max-width:720px; margin:0 auto; padding:48px 20px 72px;} .nlcard{padding:clamp(28px,4vw,48px); text-align:center;} .nlcard h1{margin:0 0 12px; font-size:clamp(1.6rem,2.4vw,2.1rem); color:var(--heading-purple);} .nlcard p{color:var(--body-text); line-height:1.6;} .nlcard .tybtns{margin-top:22px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap;} @media (max-width:900px){ .nlbox{grid-template-columns:1fr; padding:28px 20px;} } @media (max-width:480px){ .nlrow{flex-direction:column;} .nlrow .input-text{flex:none;} .nlbox .cta{width:100%;} .nlbox .cta{justify-content:center;} } /* partnersáv: megállító gomb (WCAG 2.2.2 – a mozgó tartalom megállítható) */ .pmtoggle{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; padding:0; border-radius:50%; border:1px solid #E4E0F5; background:transparent; color:#9A93C9; cursor:pointer; opacity:.7;} .pmtoggle:hover, .pmtoggle:focus-visible{opacity:1; color:var(--purple-700);} .pmtoggle:hover{background:var(--ghost-bg);} .pmtoggle svg{width:14px; height:14px;} .pmarq.is-paused .ptrack{animation-play-state:paused;} @media (prefers-reduced-motion: reduce){ .pmtoggle{display:none;} } /* KÉT CÉG, EGY CSALÁD (template-parts/shared/companies.php) – „útvonal” terv */ .cos-in{display:grid; grid-template-columns:minmax(0,.75fr) minmax(0,1.7fr); gap:40px; align-items:center;} .cos-eyebrow{margin:0 0 8px; font-family:var(--font-body); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.8rem; color:var(--muted-text);} .cos-txt h2{margin:0 0 14px;} .cos-txt p:not(.cos-eyebrow){margin:0 0 12px; font-family:var(--font-body); font-size:1.04rem; line-height:1.65; color:var(--body-text);} .cos-route{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:92px; align-items:start; padding:18px 0;} .cos-string{position:absolute; left:calc(50% - 46px); width:92px; top:30%; height:210px; z-index:2; overflow:visible; pointer-events:none;} .cos-link{position:absolute; z-index:4; left:46%; top:10px; transform:translateX(-50%) rotate(-4deg); display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:999px; background:#fff; border:2px solid transparent; background-image:linear-gradient(#fff,#fff), linear-gradient(90deg,#5949E4,#E0B400); background-origin:border-box; background-clip:padding-box, border-box; font-family:var(--font-head); font-weight:800; font-size:.9rem; color:var(--heading-purple); white-space:nowrap; box-shadow:0 10px 22px -10px rgba(58,45,140,.55);} .cos-link svg{width:18px; height:18px; color:#7367F0;} .cos-stop{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; padding:36px 30px 30px; background:#fff; border-radius:18px; border-top:5px solid var(--pc2); box-shadow:0 26px 50px -30px rgba(58,45,140,.6), 0 2px 6px -2px rgba(31,36,48,.12);} .cos-stop > *{margin:0 !important;} .cos-stop-0{margin-top:70px !important;} .cos-stop-1{margin-bottom:70px !important;} .cos-pin{position:absolute; z-index:5; top:-6px; left:50%; width:40px; height:40px; margin-left:-20px !important;} .cos-stop-0{transform:rotate(-1.6deg);} .cos-stop-1{transform:rotate(1.8deg);} .cos-stop{transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;} .cos-stop:hover{transform:rotate(0) translateY(-4px);} @media (prefers-reduced-motion: reduce){ .cos-stop{transition:none;} } .cos-stop img{height:78px; width:auto; margin-bottom:4px !important;} .cos-stop .cos-kind{font-family:var(--font-head); font-weight:800; font-size:1.15rem; line-height:1.3; color:var(--heading-purple) !important;} .cos-stop .cos-addr{font-family:var(--font-body); font-weight:700; font-size:.95rem; line-height:1.45; color:var(--ink) !important;} .cos-addr svg{display:inline-block; width:17px; height:17px; margin:0 5px -3px 0; color:var(--pc);} .cos-stop .cos-desc{font-family:var(--font-body); font-size:.98rem; line-height:1.55 !important; color:var(--body-text);} .cos-btn{margin-top:6px !important; display:inline-flex; align-items:center; gap:8px; padding:12px 22px; border-radius:var(--radius-btn); font-family:var(--font-head); font-weight:800; text-decoration:none; color:#fff; background:linear-gradient(135deg, var(--purple-500), var(--purple-700)); box-shadow:0 12px 24px -14px rgba(91,75,214,.8); transition:transform .2s, box-shadow .2s;} .cos-stop-1 .cos-btn{color:#231A00; background:linear-gradient(135deg,#FED500,#F2BD00); box-shadow:0 12px 24px -14px rgba(224,180,0,.9);} .cos-btn svg{width:18px; height:18px;} .cos-btn:hover{transform:translateY(-2px);} .cpage-about .cos{margin-top:28px;} @media (max-width:1100px){ .cos-in{grid-template-columns:1fr;} } @media (max-width:640px){ .cos-route{grid-template-columns:1fr; gap:40px; padding-top:18px;} .cos-string{display:none;} .cos-link{top:auto; bottom:auto; position:relative; left:auto; transform:none; justify-self:center; order:1; margin:-40px 0;} .cos-stop-1{order:2;} .cos-stop-0, .cos-stop-1{margin:0 !important;} } @media (prefers-reduced-motion: reduce){ .cos-btn{transition:none;} } .pmall{margin-left:auto; margin-right:12px; font-family:var(--font-body); font-weight:600; color:var(--purple-700); text-decoration:none; white-space:nowrap;} .pmall:hover{text-decoration:underline;}