/* ===================================================================== AMAZON CLUB — közös fejléc, lábléc és alap-arculat --------------------------------------------------------------------- Ez a fájl MINDEN oldalon betöltődik, ezért: • minden osztály "ac-" előtaggal van névterezve (nincs ütközés az OceanWP / WooCommerce / Elementor osztályaival); • minden méret PIXELBEN van megadva. Az OceanWP html{font-size:62.5%}-ot állít (10px-es gyökér), ezért a rem itt félrevinne. A gyökér betűméretet globálisan NEM írjuk felül — a webshop és a pénztár arra épül. ===================================================================== */ :root{ --ac-cream:#F5F1E9; --ac-cream-2:#EDE6D9; --ac-paper:#FFFDF9; --ac-ink:#1E1B18; --ac-ink-2:#39332C; --ac-muted:#7A7166; --ac-line:rgba(30,27,24,.12); --ac-accent:#DE7192; --ac-accent-deep:#B94A6D; --ac-ease:cubic-bezier(.22,.61,.36,1); --ac-wrap:1240px; } /* ============ KÖZÖS ELEMEK ============ */ .ac-wrap{ width:min(100% - 44px, var(--ac-wrap)); margin-inline:auto } .ac-btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 24px; border-radius:100px; background:var(--ac-ink); color:#fff; font-size:15px; font-weight:500; line-height:1.2; border:1px solid transparent; cursor:pointer; position:relative; overflow:hidden; text-decoration:none; transition:transform .45s var(--ac-ease), box-shadow .45s var(--ac-ease); } .ac-btn span{ position:relative; z-index:1 } .ac-btn::after{ content:""; position:absolute; inset:0; background:var(--ac-accent); transform:translateY(101%); transition:transform .5s var(--ac-ease); z-index:0; } .ac-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 40px -28px rgba(30,27,24,.35); color:#fff } .ac-btn:hover::after{ transform:translateY(0) } .ac-btn--accent{ background:var(--ac-accent) } .ac-btn--accent::after{ background:var(--ac-ink) } /* ============ FEJLÉC ============ */ .ac-head{ position:sticky; top:0; z-index:200; padding:16px 0; background:rgba(245,241,233,.92); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 1px 0 var(--ac-line); transition:padding .4s var(--ac-ease), background .4s, box-shadow .4s; } .ac-head__bar{ display:flex; align-items:center; justify-content:space-between; gap:24px } /* A főoldalon a fejléc a hero fölé úszik, és csak görgetésre válik krémmé. */ body.ac-landing-page .ac-head{ position:fixed; inset:0 0 auto 0; padding:20px 0; background:transparent; backdrop-filter:none; box-shadow:none; } body.ac-landing-page .ac-head.is-stuck{ padding:10px 0; background:rgba(245,241,233,.9); backdrop-filter:blur(14px) saturate(1.2); box-shadow:0 1px 0 var(--ac-line); } /* A fejléc ne bújjon a WP admin sáv alá — ez csak bejelentkezett szerkesztőt érint. A sáv 32px magas, 782px alatt 46px, 600px alatt viszont már nem fix (elgörgethető), ezért ott nem kell eltartás. */ body.admin-bar .ac-head{ top:32px } @media screen and (max-width:782px){ body.admin-bar .ac-head{ top:46px } } @media screen and (max-width:600px){ body.admin-bar .ac-head{ top:0 } } /* --- logó --- */ .ac-logo{ display:flex; align-items:center; gap:13px; color:var(--ac-ink); text-decoration:none } .ac-logo:hover{ color:var(--ac-ink) } .ac-logo b{ font-family:"Fraunces",Georgia,serif; font-size:19px; font-weight:500; letter-spacing:.02em; white-space:nowrap; line-height:1.2; display:block; } .ac-logo small{ display:block; font-size:10px; letter-spacing:.24em; text-transform:uppercase; opacity:.62; font-family:"Inter",sans-serif; font-weight:400; margin-top:2px; } .ac-mark{ width:46px; height:46px; flex:none; display:block; transition:transform .6s var(--ac-ease) } .ac-mark svg{ width:100%; height:100%; display:block; overflow:visible; stroke-width:2.2; fill:none } .ac-mark .a{ stroke:currentColor } .ac-mark .b{ stroke:var(--ac-accent) } .ac-logo:hover .ac-mark{ transform:rotate(-8deg) } /* --- főmenü --- */ .ac-nav__list{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0 } .ac-nav__list li{ margin:0; padding:0; position:relative } .ac-nav__list a{ display:block; padding:10px 16px; border-radius:100px; font-size:14px; line-height:1.3; color:var(--ac-ink-2); opacity:.85; text-decoration:none; transition:background .3s, color .4s, opacity .3s; } .ac-nav__list a:hover{ background:rgba(30,27,24,.06); opacity:1; color:var(--ac-ink) } .ac-nav__list .current-menu-item > a{ opacity:1; color:var(--ac-ink); font-weight:500 } /* almenü */ .ac-nav__list .sub-menu{ position:absolute; top:100%; left:0; min-width:200px; list-style:none; margin:8px 0 0; padding:8px; background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:14px; box-shadow:0 24px 60px -32px rgba(30,27,24,.45); opacity:0; visibility:hidden; transform:translateY(8px); transition:.3s var(--ac-ease); z-index:5; } .ac-nav__list li:hover > .sub-menu{ opacity:1; visibility:visible; transform:none } /* --- jobb oldali gombok --- */ .ac-head__cta{ display:flex; align-items:center; gap:12px } .ac-icon-btn{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; color:var(--ac-ink); border:1px solid var(--ac-line); position:relative; transition:.3s; text-decoration:none; background:none; cursor:pointer; padding:0; } .ac-icon-btn:hover{ background:var(--ac-accent); border-color:var(--ac-accent); color:#fff } .ac-badge{ position:absolute; top:-3px; right:-3px; background:var(--ac-accent); color:#fff; font-size:10px; min-width:18px; height:18px; border-radius:100px; display:grid; place-items:center; font-weight:600; padding:0 4px; line-height:1; } .ac-badge[data-count="0"]{ display:none } .ac-burger{ display:none } /* ============ MOBIL FIÓK ============ */ .ac-drawer{ position:fixed; inset:0; z-index:300; background:var(--ac-cream); transform:translateX(100%); transition:transform .55s var(--ac-ease); display:flex; flex-direction:column; padding:26px; overflow-y:auto; } .ac-drawer.is-open{ transform:none } .ac-drawer__close{ align-self:flex-end; font-size:26px; line-height:1; background:none; border:0; cursor:pointer; color:var(--ac-ink); padding:6px; } .ac-drawer__list{ list-style:none; margin:40px 0 0; padding:0; display:grid; gap:0 } .ac-drawer__list li{ margin:0 } .ac-drawer__list a{ display:block; font-family:"Fraunces",Georgia,serif; font-size:22px; color:var(--ac-ink); padding:12px 0; border-bottom:1px solid var(--ac-line); text-decoration:none; } .ac-drawer__list .sub-menu{ list-style:none; margin:0 0 0 18px; padding:0 } .ac-drawer__list .sub-menu a{ font-size:17px } .ac-drawer .ac-btn{ margin-top:auto; justify-content:center } /* ============ LÁBLÉC ============ */ .ac-foot{ background:var(--ac-ink); color:rgba(255,255,255,.62); padding:80px 0 34px; font-size:15px; line-height:1.7; } .ac-foot a{ color:inherit; text-decoration:none; transition:color .3s } .ac-foot a:hover{ color:var(--ac-accent) } .ac-foot h4{ color:#fff; font-family:"Inter",sans-serif; font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; margin:0 0 20px; } .ac-foot__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:44px } .ac-foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:12px } .ac-foot li{ margin:0 } .ac-foot .ac-logo{ color:#fff; margin-bottom:20px } .ac-foot .ac-logo:hover{ color:#fff } .ac-foot__intro{ max-width:34ch; margin:0 } .ac-socials{ display:flex; gap:10px; margin-top:18px } .ac-socials a{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center; transition:.3s; } .ac-socials a:hover{ background:var(--ac-accent); border-color:var(--ac-accent); color:#fff } .ac-paylogos{ margin-top:18px; opacity:.85 } .ac-paylogos img{ height:24px; width:auto; max-width:100% } .ac-foot__bottom{ margin-top:60px; padding-top:24px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:13px; } /* ============ RESPONZÍV ============ */ @media (max-width:1080px){ .ac-foot__grid{ grid-template-columns:1fr 1fr } } @media (max-width:900px){ .ac-nav, .ac-head__cta .ac-btn{ display:none } .ac-burger{ display:grid } } @media (max-width:640px){ .ac-foot__grid{ grid-template-columns:1fr; gap:34px } .ac-foot{ padding:60px 0 28px } .ac-drawer__list a{ font-size:20px } } /* ===================================================================== BELÉPÉS / TAGI FIÓK — Paid Member Subscriptions űrlapok --------------------------------------------------------------------- A body-ra az ac-auth-page osztály kerül (functions.php → ac_is_auth_page), ha a lap tartalmaz PMS rövidkódot: bejelentkezés, regisztráció, fiók, elfelejtett jelszó. ===================================================================== */ body.ac-auth-page #content-wrap{ padding-top:56px; padding-bottom:90px } body.ac-auth-page #primary{ width:100%; max-width:none; float:none } /* A bejelentkezés/jelszó-visszaállítás keskeny, középre zárt kártya. A fiók-oldal ennél szélesebb, ott több adat van. */ body.ac-auth-page .entry{ max-width:460px; margin-inline:auto } body.ac-auth-page.ac-auth-account .entry{ max-width:860px } /* --- az űrlap kártyája --- */ .pms-form, .pms-account-section-wrapper{ background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:22px; padding:34px 32px; box-shadow:0 24px 60px -40px rgba(30,27,24,.4); } .pms-form p{ margin:0 0 18px } .pms-form p:last-child{ margin-bottom:0 } .pms-form label, .pms-form-field-label{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--ac-muted); margin:0 0 8px; } .pms-form input[type="text"], .pms-form input[type="email"], .pms-form input[type="password"], .pms-form input[type="tel"], .pms-form select, .pms-form textarea{ width:100%; padding:13px 16px; border:1px solid var(--ac-line); border-radius:12px; font-family:"Inter",-apple-system,"Segoe UI",sans-serif; font-size:15px; line-height:1.4; color:var(--ac-ink); background:#fff; transition:border-color .25s, box-shadow .25s; } .pms-form input:focus, .pms-form select:focus, .pms-form textarea:focus{ outline:none; border-color:var(--ac-accent); box-shadow:0 0 0 3px rgba(222,113,146,.16); } /* --- „Emlékezz rám" sor --- */ .pms-form .login-remember{ display:flex; align-items:center; gap:9px } .pms-form .login-remember input{ margin:0; width:16px; height:16px; accent-color:var(--ac-accent) } .pms-form .login-remember label{ margin:0; font-size:14px; letter-spacing:0; text-transform:none; font-weight:400; color:var(--ac-ink-2); } /* --- gomb --- */ .pms-form input[type="submit"], .pms-form button[type="submit"]{ width:100%; padding:14px 26px; border:0; border-radius:100px; cursor:pointer; background:var(--ac-accent); color:#fff; font-family:"Inter",sans-serif; font-size:15px; font-weight:500; line-height:1.2; transition:background .3s, transform .35s var(--ac-ease), box-shadow .35s var(--ac-ease); } .pms-form input[type="submit"]:hover, .pms-form button[type="submit"]:hover{ background:var(--ac-ink); transform:translateY(-2px); box-shadow:0 18px 40px -28px rgba(30,27,24,.45); } /* --- alsó linksor (Regisztrálás | Elfelejtette a jelszavát?) --- */ .pms-form .login-extra{ margin:22px 0 0; padding-top:20px; border-top:1px solid var(--ac-line); text-align:center; font-size:14px; color:var(--ac-muted); } .pms-form .login-extra a{ color:var(--ac-accent-deep); text-decoration:none } .pms-form .login-extra a:hover{ text-decoration:underline } .pms-form .separator{ margin:0 10px; opacity:.35 } /* --- üzenetek --- */ .pms-field-error, .pms-error-message, .pms-warning-message, .pms-notice{ border-radius:14px; padding:13px 17px; font-size:14px; line-height:1.5; margin:0 0 18px; } .pms-field-error, .pms-error-message{ background:#FBE9ED; color:#8E2440; border:1px solid #F0C7D2 } .pms-warning-message, .pms-notice{ background:#FBF1E4; color:#7A5320; border:1px solid #EBD9BE } /* --- fiók-oldal navigációja --- */ .pms-account-navigation{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0 0 26px; padding:0; } .pms-account-navigation li{ margin:0 } .pms-account-navigation a{ display:block; padding:10px 18px; border-radius:100px; font-size:14px; color:var(--ac-ink-2); background:var(--ac-cream-2); text-decoration:none; transition:.3s; } .pms-account-navigation a:hover{ background:var(--ac-accent); color:#fff } .pms-account-navigation .pms-account-navigation-link-active a, .pms-account-navigation li.active a{ background:var(--ac-ink); color:#fff } @media (max-width:640px){ .pms-form, .pms-account-section-wrapper{ padding:26px 22px; border-radius:18px } body.ac-auth-page #content-wrap{ padding-top:36px; padding-bottom:60px } } /* ===================================================================== OLDAL FEJRÉSZ (page header) — minden aloldalon --------------------------------------------------------------------- Az OceanWP alapból 34px-es szürke (#f5f5f5) sávot tesz ide. Ez mobilon sok helyet vitt el, ezért összehúzzuk. A hátteret átlátszóra vesszük: a tapadó fejléc krém, és ha ez a sáv is krém volna, egybefolyna vele — így viszont a krém fejléc alatt fehér tartalom kezdődik, jól láthatóan. !important nem kell: az ac-site.css az OceanWP stíluslapja UTÁN töltődik be. ===================================================================== */ .page-header{ background-color:transparent; padding:22px 0 20px; border-bottom:1px solid var(--ac-line); } .page-header-title{ font-family:"Fraunces",Georgia,serif; font-weight:500; color:var(--ac-ink); font-size:24px; line-height:1.2; letter-spacing:-.015em; margin:0; } /* A margin-top-hoz NEM nyúlunk: az OceanWP azzal centrálja függőlegesen az abszolút pozicionált morzsamenüt (margin-top:-16px). */ .site-breadcrumbs{ font-size:12px; color:var(--ac-muted) } .site-breadcrumbs a{ color:var(--ac-muted); text-decoration:none } .site-breadcrumbs a:hover{ color:var(--ac-accent-deep) } /* Belépés/fiók lapon a morzsamenü csak zaj. */ body.ac-auth-page .site-breadcrumbs{ display:none } body.ac-auth-page .page-header{ padding:18px 0 16px } @media (max-width:640px){ .page-header{ padding:18px 0 16px } .page-header-title{ font-size:21px } .site-breadcrumbs{ display:none } body.ac-auth-page .page-header{ padding:16px 0 14px } } /* ===================================================================== „Jelenleg … néven vagy bejelentkezve" doboz + kilépés gomb ===================================================================== */ .pms-alert{ display:flex; flex-direction:column; align-items:center; gap:18px; background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:22px; padding:30px 32px; margin:0 0 24px; text-align:center; font-size:15px; line-height:1.6; color:var(--ac-ink-2); box-shadow:0 24px 60px -40px rgba(30,27,24,.4); } .pms-alert a{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:13px 30px; border-radius:100px; background:var(--ac-ink); color:#fff; font-family:"Inter",sans-serif; font-size:15px; font-weight:500; line-height:1.2; text-decoration:none; transition:background .3s, transform .35s var(--ac-ease), box-shadow .35s var(--ac-ease); } .pms-alert a:hover{ background:var(--ac-accent); color:#fff; transform:translateY(-2px); box-shadow:0 18px 40px -28px rgba(30,27,24,.45); } /* ===================================================================== KAPCSOLATI ŰRLAP — Contact Form 7 --------------------------------------------------------------------- A CF7 felépítése: p > label > "címke szöveg"
A
-t elrejtjük, és a címke szövegét a label-en formázzuk; a mezőket utána vissza kell állítani normál írásmódra. Ugyanaz a kártya- és mezőstílus, mint a belépésnél — egy nyelvet beszéljen a kettő. ===================================================================== */ .wpcf7-form{ background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:22px; padding:34px 32px; box-shadow:0 24px 60px -40px rgba(30,27,24,.4); } .wpcf7-form > p{ margin:0 0 18px } .wpcf7-form > p:last-of-type{ margin-bottom:0 } .wpcf7-form .hidden-fields-container, .wpcf7-form .akismet-fields-container{ margin:0; padding:0; border:0 } /* --- címkék --- */ .wpcf7-form p > label{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--ac-muted); line-height:1.4; } .wpcf7-form p > label br{ display:none } .wpcf7-form .wpcf7-form-control-wrap{ display:block; margin-top:8px } /* --- mezők --- */ .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="url"], .wpcf7-form input[type="number"], .wpcf7-form select, .wpcf7-form textarea{ width:100%; padding:13px 16px; border:1px solid var(--ac-line); border-radius:12px; font-family:"Inter",-apple-system,"Segoe UI",sans-serif; font-size:15px; line-height:1.5; font-weight:400; letter-spacing:normal; text-transform:none; color:var(--ac-ink); background:#fff; transition:border-color .25s, box-shadow .25s; } .wpcf7-form textarea{ min-height:150px; resize:vertical } .wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus{ outline:none; border-color:var(--ac-accent); box-shadow:0 0 0 3px rgba(222,113,146,.16); } /* --- adatkezelési jelölőnégyzet --- */ .wpcf7-form .wpcf7-acceptance .wpcf7-list-item{ margin:0 } .wpcf7-form .wpcf7-acceptance label{ display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.55; font-weight:400; letter-spacing:normal; text-transform:none; color:var(--ac-ink-2); cursor:pointer; } .wpcf7-form .wpcf7-acceptance input[type="checkbox"]{ flex:none; width:16px; height:16px; margin:3px 0 0; accent-color:var(--ac-accent); } /* --- gomb --- */ .wpcf7-form input[type="submit"]{ display:inline-block; padding:14px 34px; border:0; border-radius:100px; cursor:pointer; background:var(--ac-accent); color:#fff; font-family:"Inter",sans-serif; font-size:15px; font-weight:500; line-height:1.2; letter-spacing:normal; text-transform:none; transition:background .3s, transform .35s var(--ac-ease), box-shadow .35s var(--ac-ease); } .wpcf7-form input[type="submit"]:hover{ background:var(--ac-ink); transform:translateY(-2px); box-shadow:0 18px 40px -28px rgba(30,27,24,.45); } .wpcf7-spinner{ margin:0 0 0 12px; vertical-align:middle } /* --- visszajelzések --- */ .wpcf7-form .wpcf7-response-output{ margin:22px 0 0; padding:13px 17px; border-radius:14px; border-width:1px; border-style:solid; font-size:14px; line-height:1.55; } .wpcf7 form.sent .wpcf7-response-output{ background:#EAF3EA; border-color:#CBE0CC; color:#2F5D34 } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output{ background:#FBE9ED; border-color:#F0C7D2; color:#8E2440 } /* Sikeres küldés: az űrlap helyén köszönő kártya (js/ac-site.js). */ .wpcf7-form.ac-sent > *:not(.ac-cf7-thanks){ display:none !important } .ac-cf7-thanks{ display:none; text-align:center; padding:18px 6px 8px } .wpcf7-form.ac-sent .ac-cf7-thanks{ display:block; animation:ac-cf7-in .5s var(--ac-ease) both } .ac-cf7-thanks__icon{ display:inline-grid; place-items:center; width:64px; height:64px; margin:0 0 18px; border-radius:50%; background:#EAF3EA; color:#2F7A45; } .ac-cf7-thanks__title{ margin:0 0 10px; font-family:"Fraunces",Georgia,serif; font-weight:500; font-size:28px; line-height:1.2; color:var(--ac-ink); } .ac-cf7-thanks__text{ margin:0 auto 22px; max-width:36ch; font-size:16px; line-height:1.6; color:var(--ac-ink-2) } .ac-cf7-thanks__again{ padding:11px 24px; border:1px solid var(--ac-line); border-radius:100px; background:transparent; font-family:"Inter",sans-serif; font-size:14px; color:var(--ac-ink); cursor:pointer; transition:border-color .25s, color .25s; } .ac-cf7-thanks__again:hover{ border-color:var(--ac-accent); color:var(--ac-accent-deep) } @keyframes ac-cf7-in{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } } .wpcf7-not-valid-tip{ display:block; margin-top:6px; color:#8E2440; font-size:13px; line-height:1.45; font-weight:400; letter-spacing:normal; text-transform:none; } .wpcf7-form input.wpcf7-not-valid, .wpcf7-form textarea.wpcf7-not-valid{ border-color:#D98BA0 } @media (max-width:640px){ .wpcf7-form{ padding:26px 22px; border-radius:18px } .wpcf7-form input[type="submit"]{ width:100%; text-align:center } } /* ===================================================================== KAPCSOLATI ADATOK BLOKK (kapcsolat oldal jobb hasábja) --------------------------------------------------------------------- A boríték ikon CSS-ből jön (mask), nem a HTML-ből — így a markup elég egyszerű ahhoz, hogy az Elementor Szövegszerkesztője se írja át, és az ikon mégis követi az arculati színt. ===================================================================== */ .ac-contact{ margin:0 } .ac-contact__name{ font-family:"Fraunces",Georgia,serif; font-weight:500; color:var(--ac-ink); font-size:28px; line-height:1.2; letter-spacing:-.01em; margin:0 0 14px; } .ac-contact__link{ display:inline-flex; align-items:center; gap:10px; padding:11px 20px; border:1px solid var(--ac-line); border-radius:100px; font-size:15px; line-height:1.3; color:var(--ac-ink-2); text-decoration:none; transition:border-color .3s, color .3s, background .3s; } .ac-contact__link::before{ content:""; flex:none; width:18px; height:18px; background:var(--ac-accent); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.6 7.2 8.4 5.9 8.4-5.9'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m3.6 7.2 8.4 5.9 8.4-5.9'/%3E%3C/svg%3E") center/contain no-repeat; } .ac-contact__link:hover{ border-color:var(--ac-accent); color:var(--ac-accent-deep); background:var(--ac-paper); } /* Biztosíték: ha a tartalomban valahol lábléc-widget markup maradt (div.footer-widget), ne vigye magával a lábléc térközeit. */ .elementor-widget-container .footer-widget{ margin:0 } .elementor-widget-container .footer-widget h2{ margin:0 0 12px } @media (max-width:640px){ .ac-contact__name{ font-size:23px; margin-bottom:12px } } /* ===================================================================== KOSÁR (WooCommerce klasszikus kosár) --------------------------------------------------------------------- Fontos döntés: a kosarat NEM táblázatként jelenítjük meg, hanem kártyasorokként (display:block/flex). Egy ugyanis nem tud a saját minimális szélessége alá menni, ezért kisebb ablakban kifutott a rácsból és rácsúszott az összesítő kártyára. Kártyaként ez a hiba nem létezhet, és mobilon is magától rendeződik. A + / - gombokat az OceanWP JS-ből szúrja be (a.minus / a.plus a .quantity dobozba), ezért azok a szerveroldali HTML-ben nem látszanak — itt viszont formázni kell őket, különben egymás alá esnek. Csak megjelenés: a mezőnevek, a gombok name attribútumai, a nonce mezők és a WooCommerce működése érintetlen. ===================================================================== */ /* --- két hasáb: tételek balra, összesítő jobbra --- */ @media (min-width:1025px){ body.woocommerce-cart .entry > .woocommerce{ display:grid; grid-template-columns:minmax(0,1fr) 350px; gap:30px; align-items:start; } body.woocommerce-cart .entry > .woocommerce > .woocommerce-notices-wrapper{ grid-column:1 / -1 } body.woocommerce-cart .woocommerce-cart-form{ min-width:0; margin:0 } body.woocommerce-cart .cart-collaterals{ position:sticky; top:100px; margin:0 } } body.woocommerce-cart .cart-collaterals, body.woocommerce-cart .cart-collaterals .cart_totals{ float:none; width:100% } @media (max-width:1024px){ body.woocommerce-cart .cart-collaterals{ margin-top:26px } } /* --- a táblázatból kártyalista lesz --- */ body.woocommerce-cart .shop_table.cart, body.woocommerce-cart .shop_table.cart tbody{ display:block; width:100%; border:0; margin:0; background:none } body.woocommerce-cart .shop_table.cart thead{ display:none } body.woocommerce-cart .shop_table.cart tr{ display:block } /* --- egy tétel kártyája --- Rács, nem rugalmas tördelés. A flex-wrap kiszámíthatatlanul tördelt (a cellák sorrendjét a DOM adja, és az ár rossz helyre került), a megnevezett rácsterületekkel viszont pontosan meghatározható, mi hol áll: kép | terméknév | mennyiség | részösszeg | × kép | egységár | mennyiség | részösszeg | × A kép, a mennyiség, a részösszeg és az × átfogja mindkét sort, ezért függőlegesen középre kerülnek; a név fölött, az egységár alatta ül. --- */ body.woocommerce-cart tr.cart_item{ display:grid; grid-template-columns:64px minmax(0,1fr) auto auto 30px; grid-template-areas: "thumb name qty sub remove" "thumb price qty sub remove"; align-items:center; column-gap:18px; row-gap:2px; background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:18px; padding:16px; margin:0 0 12px; } body.woocommerce-cart tr.cart_item td{ border:0; padding:0; font-size:15px; color:var(--ac-ink-2); background:none; display:block; } body.woocommerce-cart .product-thumbnail{ grid-area:thumb } body.woocommerce-cart .product-thumbnail img{ width:64px; height:64px; object-fit:cover; border-radius:12px; display:block; } body.woocommerce-cart .product-name{ grid-area:name; align-self:end; min-width:0 } body.woocommerce-cart .product-name a{ font-family:"Fraunces",Georgia,serif; font-size:17px; line-height:1.25; color:var(--ac-ink); text-decoration:none; } body.woocommerce-cart .product-name a:hover{ color:var(--ac-accent-deep) } body.woocommerce-cart .product-price{ grid-area:price; align-self:start; font-size:14px; color:var(--ac-muted); } body.woocommerce-cart .product-price .amount{ color:var(--ac-muted) } body.woocommerce-cart .product-quantity{ grid-area:qty } body.woocommerce-cart .product-subtotal{ grid-area:sub; text-align:right; min-width:92px; font-weight:500; } body.woocommerce-cart .product-remove{ grid-area:remove; justify-self:end } body.woocommerce-cart .amount{ color:var(--ac-ink); white-space:nowrap } /* a data-title feliratok csak szűk kártyán kellenek */ body.woocommerce-cart tr.cart_item td::before{ content:none } /* Szűk kijelzőn visszaváltunk rugalmas tördelésre: kép + név + × felül, alatta feliratozott sorokban az Ár / Mennyiség / Részösszeg. 720px alatt lép életbe, hogy a rács öt hasábja sehol ne préselődjön össze. */ @media (max-width:720px){ body.woocommerce-cart tr.cart_item{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; } body.woocommerce-cart .product-thumbnail{ order:0 } body.woocommerce-cart .product-name{ flex:1 1 100px; order:1; align-self:auto } body.woocommerce-cart .product-remove{ order:2; margin-left:auto; justify-self:auto } body.woocommerce-cart .product-price, body.woocommerce-cart .product-quantity, body.woocommerce-cart .product-subtotal{ flex:1 1 100%; order:3; display:flex; align-items:center; justify-content:space-between; align-self:auto; text-align:left; min-width:0; margin:0; padding-top:10px; border-top:1px solid var(--ac-line); } body.woocommerce-cart .product-price::before, body.woocommerce-cart .product-quantity::before, body.woocommerce-cart .product-subtotal::before{ content:attr(data-title); font-size:13px; color:var(--ac-muted); } } /* --- eltávolítás --- */ body.woocommerce-cart .product-remove .remove{ display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:var(--ac-cream-2); color:var(--ac-muted) !important; font-size:18px; line-height:1; text-decoration:none; transition:background .3s, color .3s; } body.woocommerce-cart .product-remove .remove:hover{ background:var(--ac-accent); color:#fff !important } /* --- mennyiség: - [mező] + egy sorban --- */ body.woocommerce-cart .quantity{ display:inline-flex; align-items:stretch; width:max-content; max-width:100%; border:1px solid var(--ac-line); border-radius:100px; overflow:hidden; background:#fff; } body.woocommerce-cart .quantity .minus, body.woocommerce-cart .quantity .plus{ width:36px; display:grid; place-items:center; flex:0 0 auto; background:var(--ac-cream-2); color:var(--ac-ink-2) !important; text-decoration:none; font-size:17px; line-height:1; user-select:none; transition:background .3s, color .3s; } body.woocommerce-cart .quantity .minus:hover, body.woocommerce-cart .quantity .plus:hover{ background:var(--ac-accent); color:#fff !important } body.woocommerce-cart .quantity .qty{ width:52px; height:38px; padding:0 4px; border:0; border-left:1px solid var(--ac-line); border-right:1px solid var(--ac-line); border-radius:0; font-family:"Inter",sans-serif; font-size:15px; text-align:center; color:var(--ac-ink); background:#fff; -moz-appearance:textfield; } body.woocommerce-cart .quantity .qty::-webkit-outer-spin-button, body.woocommerce-cart .quantity .qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 } body.woocommerce-cart .quantity .qty:focus{ outline:none; background:var(--ac-cream) } /* --- kupon + kosár frissítése --- */ body.woocommerce-cart tr:has(> td.actions){ margin-top:4px } body.woocommerce-cart td.actions{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; background:var(--ac-cream); border:1px solid var(--ac-line); border-radius:18px; padding:16px; margin:0; } body.woocommerce-cart td.actions .coupon{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; float:none; margin:0; } body.woocommerce-cart td.actions .coupon .input-text{ width:180px; padding:11px 16px; border:1px solid var(--ac-line); border-radius:100px; font-family:"Inter",sans-serif; font-size:14px; color:var(--ac-ink); background:#fff; } body.woocommerce-cart td.actions .coupon .input-text:focus{ outline:none; border-color:var(--ac-accent); box-shadow:0 0 0 3px rgba(222,113,146,.16); } body.woocommerce-cart td.actions .button{ padding:11px 22px; border-radius:100px; border:1px solid var(--ac-line); background:#fff; color:var(--ac-ink); font-family:"Inter",sans-serif; font-size:14px; font-weight:500; line-height:1.2; cursor:pointer; white-space:nowrap; transition:background .3s, color .3s, border-color .3s; } body.woocommerce-cart td.actions .button:hover:not(:disabled){ background:var(--ac-ink); border-color:var(--ac-ink); color:#fff; } body.woocommerce-cart td.actions .button:disabled{ opacity:.45; cursor:default } @media (max-width:720px){ body.woocommerce-cart td.actions{ flex-direction:column; align-items:stretch } body.woocommerce-cart td.actions .coupon{ flex-direction:column; align-items:stretch } body.woocommerce-cart td.actions .coupon .input-text, body.woocommerce-cart td.actions .button{ width:100% } } /* --- összesítő kártya --- */ body.woocommerce-cart .cart_totals{ background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:22px; padding:24px 22px; box-shadow:0 24px 60px -40px rgba(30,27,24,.4); } body.woocommerce-cart .cart_totals h2{ font-family:"Fraunces",Georgia,serif; font-size:20px; font-weight:500; color:var(--ac-ink); margin:0 0 16px; letter-spacing:-.01em; text-transform:none; } body.woocommerce-cart .cart_totals .shop_table{ display:table; border:0; margin:0; width:100%; border-collapse:collapse; background:none; } body.woocommerce-cart .cart_totals .shop_table tbody{ display:table-row-group } body.woocommerce-cart .cart_totals .shop_table tr{ display:table-row } body.woocommerce-cart .cart_totals .shop_table th, body.woocommerce-cart .cart_totals .shop_table td{ display:table-cell; border:0; border-bottom:1px solid var(--ac-line); padding:12px 0; font-size:15px; color:var(--ac-ink-2); background:none; } body.woocommerce-cart .cart_totals .shop_table th{ font-weight:400; text-align:left } body.woocommerce-cart .cart_totals .shop_table td{ text-align:right } body.woocommerce-cart .cart_totals .shop_table td::before{ content:none } body.woocommerce-cart .cart_totals .order-total th, body.woocommerce-cart .cart_totals .order-total td{ border-bottom:0; padding-bottom:0 } body.woocommerce-cart .cart_totals .order-total .amount{ font-family:"Fraunces",Georgia,serif; font-size:23px; font-weight:400; color:var(--ac-ink); } /* --- tovább a pénztárhoz --- */ body.woocommerce-cart .wc-proceed-to-checkout{ padding:0; margin-top:20px } body.woocommerce-cart .checkout-button{ display:block; width:100%; text-align:center; padding:15px 26px; border:0; border-radius:100px; background:var(--ac-accent); color:#fff !important; font-family:"Inter",sans-serif; font-size:15px; font-weight:500; line-height:1.2; text-decoration:none; transition:background .3s, transform .35s var(--ac-ease), box-shadow .35s var(--ac-ease); } body.woocommerce-cart .checkout-button:hover{ background:var(--ac-ink); transform:translateY(-2px); box-shadow:0 18px 40px -28px rgba(30,27,24,.45); } /* --- üres kosár --- */ body.woocommerce-cart .cart-empty{ font-family:"Fraunces",Georgia,serif; font-size:20px; color:var(--ac-ink); text-align:center; } body.woocommerce-cart .return-to-shop{ text-align:center; margin-top:18px } body.woocommerce-cart .return-to-shop .button{ display:inline-block; padding:14px 30px; border-radius:100px; border:0; background:var(--ac-accent); color:#fff !important; font-size:15px; font-weight:500; text-decoration:none; transition:background .3s; } body.woocommerce-cart .return-to-shop .button:hover{ background:var(--ac-ink) } /* --- WooCommerce üzenetek --- */ .woocommerce-message, .woocommerce-info, .woocommerce-error{ border-radius:14px; padding:14px 18px; font-size:14px; line-height:1.55; border:1px solid var(--ac-line); background:var(--ac-cream-2); color:var(--ac-ink-2); list-style:none; margin:0 0 20px; } .woocommerce-error{ background:#FBE9ED; border-color:#F0C7D2; color:#8E2440 } /* ===================================================================== PÉNZTÁR (WooCommerce checkout) --------------------------------------------------------------------- A markup az éles lapról: form.checkout > .col2-set (.col-1 számlázási adatok, .col-2 megjegyzés) + h3#order_review_heading + #order_review (összegző táblázat és a fizetési módok). Elrendezés asztali gépen: balra az adatok, jobbra a tapadó összegző. Csak megjelenés — a mezőnevek, a nonce mezők, a fizetési módok rádiógombjai és a WooCommerce JS-e (payment_box nyitás/zárás, select2) érintetlen. ===================================================================== */ /* --- két hasáb --- */ @media (min-width:1025px){ body.woocommerce-checkout form.checkout{ display:grid; grid-template-columns:minmax(0,1fr) 380px; grid-template-areas: "details reviewhead" "details review"; grid-template-rows:auto 1fr; column-gap:30px; align-items:start; } body.woocommerce-checkout form.checkout .col2-set{ grid-area:details } body.woocommerce-checkout #order_review_heading{ grid-area:reviewhead; margin-top:0 } body.woocommerce-checkout #order_review{ grid-area:review; position:sticky; top:100px } } /* A WooCommerce klasszikus két hasábját lebegtetéssel és százalékos szélességgel oldja meg (.col2-set 52%, #order_review 48%, mindkettő float). Rácselemként a 48% a HASÁBON belül számolódott — ezért lett az összegző 380px helyett 182px, és ezért gyűrődött körré a megrendelés gomb. Ezeket kötelező visszaállítani, különben a rács nem tud érvényesülni. */ body.woocommerce-checkout .col2-set, body.woocommerce-checkout #order_review, body.woocommerce-checkout #order_review_heading{ width:100%; float:none; clear:none; margin-left:0; margin-right:0; } body.woocommerce-checkout .col2-set{ display:block } body.woocommerce-checkout .col2-set .col-1, body.woocommerce-checkout .col2-set .col-2{ float:none; width:100%; margin:0 } body.woocommerce-checkout .col2-set .col-2{ margin-top:8px } /* --- szakaszcímek --- */ body.woocommerce-checkout .woocommerce h3, body.woocommerce-checkout #order_review_heading{ font-family:"Fraunces",Georgia,serif; font-size:20px; font-weight:500; color:var(--ac-ink); letter-spacing:-.01em; margin:0 0 16px; text-transform:none; } body.woocommerce-checkout .woocommerce-additional-fields h3{ margin-top:26px } /* --- űrlapmezők rácsban (a form-row-first / -last párok egymás mellé) --- */ body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper, body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper, body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{ display:grid; grid-template-columns:1fr 1fr; column-gap:16px; } body.woocommerce-checkout .form-row{ float:none; width:auto; padding:0; margin:0 0 16px; grid-column:1 / -1; } body.woocommerce-checkout .form-row-first{ grid-column:1 } body.woocommerce-checkout .form-row-last{ grid-column:2 } @media (max-width:620px){ body.woocommerce-checkout .woocommerce-billing-fields__field-wrapper, body.woocommerce-checkout .woocommerce-shipping-fields__field-wrapper, body.woocommerce-checkout .woocommerce-additional-fields__field-wrapper{ grid-template-columns:1fr; } body.woocommerce-checkout .form-row-first, body.woocommerce-checkout .form-row-last{ grid-column:1 } } body.woocommerce-checkout .form-row label{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--ac-muted); margin:0 0 8px; line-height:1.4; } body.woocommerce-checkout .form-row label .required{ color:var(--ac-accent-deep); text-decoration:none } body.woocommerce-checkout .form-row label .optional{ text-transform:none; letter-spacing:0; font-weight:400; opacity:.8; } body.woocommerce-checkout .woocommerce-input-wrapper{ display:block; width:100% } body.woocommerce-checkout .form-row input[type="text"], body.woocommerce-checkout .form-row input[type="email"], body.woocommerce-checkout .form-row input[type="tel"], body.woocommerce-checkout .form-row input[type="password"], body.woocommerce-checkout .form-row select, body.woocommerce-checkout .form-row textarea{ width:100%; padding:13px 16px; border:1px solid var(--ac-line); border-radius:12px; font-family:"Inter",-apple-system,"Segoe UI",sans-serif; font-size:15px; line-height:1.5; font-weight:400; letter-spacing:normal; text-transform:none; color:var(--ac-ink); background:#fff; transition:border-color .25s, box-shadow .25s; } body.woocommerce-checkout .form-row textarea{ min-height:96px; resize:vertical } body.woocommerce-checkout .form-row input:focus, body.woocommerce-checkout .form-row select:focus, body.woocommerce-checkout .form-row textarea:focus{ outline:none; border-color:var(--ac-accent); box-shadow:0 0 0 3px rgba(222,113,146,.16); } /* hibás mező */ body.woocommerce-checkout .woocommerce-invalid input.input-text, body.woocommerce-checkout .woocommerce-invalid select, body.woocommerce-checkout .woocommerce-invalid .select2-selection{ border-color:#D98BA0 } body.woocommerce-checkout .woocommerce-validated input.input-text{ border-color:var(--ac-line) } /* --- select2 (ország / megye legördülő) --- */ body.woocommerce-checkout .select2-container .select2-selection--single{ height:auto; padding:11px 16px; border:1px solid var(--ac-line); border-radius:12px; background:#fff; } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{ padding:0; line-height:1.5; font-size:15px; color:var(--ac-ink); } body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{ height:100%; right:12px; } body.woocommerce-checkout .select2-container--open .select2-selection--single{ border-color:var(--ac-accent); box-shadow:0 0 0 3px rgba(222,113,146,.16); } /* --- kupon sáv --- */ body.woocommerce-checkout .woocommerce-form-coupon-toggle{ margin:0 0 18px } body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info{ margin:0; background:var(--ac-cream-2); border:1px solid var(--ac-line); color:var(--ac-ink-2); border-radius:14px; padding:14px 18px; font-size:14px; } body.woocommerce-checkout .woocommerce-info .showcoupon{ color:var(--ac-accent-deep); text-decoration:underline; } body.woocommerce-checkout form.checkout_coupon{ border:1px solid var(--ac-line); border-radius:18px; background:var(--ac-paper); padding:18px; margin:0 0 22px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; } body.woocommerce-checkout form.checkout_coupon .form-row{ margin:0; width:auto; float:none } body.woocommerce-checkout form.checkout_coupon .input-text{ width:100%; padding:12px 16px; border:1px solid var(--ac-line); border-radius:100px; font-family:"Inter",sans-serif; font-size:14px; background:#fff; color:var(--ac-ink); } body.woocommerce-checkout form.checkout_coupon .button{ padding:12px 24px; border-radius:100px; border:1px solid var(--ac-line); background:#fff; color:var(--ac-ink); font-family:"Inter",sans-serif; font-size:14px; font-weight:500; cursor:pointer; white-space:nowrap; transition:background .3s, color .3s, border-color .3s; } body.woocommerce-checkout form.checkout_coupon .button:hover{ background:var(--ac-ink); border-color:var(--ac-ink); color:#fff; } body.woocommerce-checkout form.checkout_coupon .clear{ display:none } /* --- összegző + fizetés kártya --- */ body.woocommerce-checkout #order_review{ background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:22px; padding:24px 22px; box-shadow:0 24px 60px -40px rgba(30,27,24,.4); } body.woocommerce-checkout .woocommerce-checkout-review-order-table{ width:100%; border:0; border-collapse:collapse; margin:0 0 22px; background:none; } body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th{ border:0; border-bottom:1px solid var(--ac-line); padding:0 0 10px; font-family:"Inter",sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--ac-muted); text-align:left; background:none; } body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-total{ text-align:right } body.woocommerce-checkout .woocommerce-checkout-review-order-table td, body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th{ border:0; border-bottom:1px solid var(--ac-line); padding:12px 0; font-size:15px; color:var(--ac-ink-2); background:none; } body.woocommerce-checkout .woocommerce-checkout-review-order-table tbody .product-name{ font-family:"Fraunces",Georgia,serif; font-size:16px; color:var(--ac-ink); } body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity{ font-family:"Inter",sans-serif; font-size:14px; font-weight:500; color:var(--ac-muted); } body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-total, body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td{ text-align:right } body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot th{ font-weight:400; text-align:left } body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th, body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td{ border-bottom:0 } body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total .amount{ font-family:"Fraunces",Georgia,serif; font-size:23px; font-weight:400; color:var(--ac-ink); } body.woocommerce-checkout #order_review .amount{ white-space:nowrap; color:var(--ac-ink) } /* --- fizetési módok --- */ body.woocommerce-checkout .woocommerce-checkout-payment{ background:none; border-radius:0 } body.woocommerce-checkout ul.payment_methods{ list-style:none; margin:0 0 20px; padding:0; border:0; display:grid; gap:10px; } body.woocommerce-checkout ul.payment_methods li{ margin:0; padding:0; border:1px solid var(--ac-line); border-radius:14px; background:#fff; overflow:hidden; transition:border-color .3s, box-shadow .3s; } body.woocommerce-checkout ul.payment_methods li:has(input:checked){ border-color:var(--ac-accent); box-shadow:0 0 0 3px rgba(222,113,146,.12); } body.woocommerce-checkout ul.payment_methods li label{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px 16px 14px 0; margin:0; cursor:pointer; font-size:15px; font-weight:500; color:var(--ac-ink); line-height:1.3; } body.woocommerce-checkout ul.payment_methods li input.input-radio{ margin:0 0 0 16px; width:18px; height:18px; accent-color:var(--ac-accent); flex:none; float:none; vertical-align:middle; } body.woocommerce-checkout ul.payment_methods li label img{ max-height:22px; width:auto; display:inline-block; margin:0; } body.woocommerce-checkout .payment_box{ margin:0; padding:0 16px 16px 46px; background:none; border:0; border-radius:0; font-size:14px; line-height:1.6; color:var(--ac-muted); } body.woocommerce-checkout .payment_box::before{ display:none } body.woocommerce-checkout .payment_box p{ margin:0 } /* --- adatkezelési szöveg + megrendelés gomb --- */ body.woocommerce-checkout .woocommerce-privacy-policy-text{ font-size:13px; line-height:1.6; color:var(--ac-muted); margin:0 0 18px; } body.woocommerce-checkout .woocommerce-privacy-policy-text p{ margin:0 } body.woocommerce-checkout .woocommerce-privacy-policy-link{ color:var(--ac-accent-deep); text-decoration:underline; } body.woocommerce-checkout .form-row.place-order{ margin:0; padding:0 } body.woocommerce-checkout #place_order{ display:block; width:100%; text-align:center; padding:16px 26px; border:0; border-radius:100px; background:var(--ac-accent); color:#fff; font-family:"Inter",sans-serif; font-size:16px; font-weight:500; line-height:1.2; cursor:pointer; float:none; /* szűk helyen se törjön szó közepén, és ne gyűrődjön több sorba */ white-space:nowrap; word-break:normal; overflow-wrap:normal; hyphens:none; transition:background .3s, transform .35s var(--ac-ease), box-shadow .35s var(--ac-ease); } @media (max-width:400px){ body.woocommerce-checkout #place_order{ white-space:normal; padding:16px 18px; font-size:15px } } body.woocommerce-checkout #place_order:hover{ background:var(--ac-ink); transform:translateY(-2px); box-shadow:0 18px 40px -28px rgba(30,27,24,.45); } /* --- WooCommerce hibalista a pénztáron --- */ body.woocommerce-checkout .woocommerce-error{ padding-left:18px } body.woocommerce-checkout .woocommerce-error li{ margin:0 0 4px } body.woocommerce-checkout .woocommerce-error li:last-child{ margin:0 } /* --- a betöltés közbeni átfedő réteg ne legyen csúnya --- */ body.woocommerce-checkout .blockUI.blockOverlay{ border-radius:22px } /* ===================================================================== RECEPTEK — lista --------------------------------------------------------------------- A lista a /receptek/ oldalon az [ac_receptek] rövidkódból jön; a kapcsolódó receptek az adatlap alján ugyanezt a rácsot használják. ===================================================================== */ .ac-recipes{ margin:0 0 10px } .ac-recipes__filter{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 30px } .ac-chip{ padding:9px 18px; border-radius:100px; border:1px solid var(--ac-line); background:var(--ac-paper); color:var(--ac-ink-2); font-family:"Inter",sans-serif; font-size:14px; line-height:1.2; cursor:pointer; transition:background .3s, color .3s, border-color .3s; } .ac-chip:hover{ border-color:var(--ac-ink); color:var(--ac-ink) } .ac-chip.is-on{ background:var(--ac-ink); border-color:var(--ac-ink); color:#fff } .ac-recipes__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:26px; } .ac-recipes__none, .ac-recipes-empty{ margin:26px 0 0; font-size:15px; color:var(--ac-muted); text-align:center } /* --- kártya --- */ .ac-rcard{ display:flex; flex-direction:column; overflow:hidden; background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:22px; transition:transform .45s var(--ac-ease), box-shadow .45s var(--ac-ease); } .ac-rcard:hover{ transform:translateY(-4px); box-shadow:0 28px 60px -42px rgba(30,27,24,.5) } .ac-rcard__media{ display:block; position:relative; aspect-ratio:4 / 3; overflow:hidden; background:var(--ac-cream-2); text-decoration:none; } .ac-rcard__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ac-ease); } .ac-rcard:hover .ac-rcard__media img{ transform:scale(1.05) } .ac-rcard__noimg{ display:block; width:100%; height:100%; background:var(--ac-cream-2) } .ac-rcard__lock{ position:absolute; top:12px; left:12px; padding:6px 13px; border-radius:100px; background:rgba(30,27,24,.78); color:#fff; font-size:12px; letter-spacing:.02em; } .ac-rcard__body{ display:flex; flex-direction:column; gap:9px; padding:20px 20px 18px; flex:1 } .ac-rcard__terms{ display:flex; flex-wrap:wrap; gap:8px; margin:0 } .ac-rcard__terms span{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ac-accent-deep); } .ac-rcard__terms span + span::before{ content:"·"; margin-right:8px; color:var(--ac-muted) } .ac-rcard__title{ margin:0; font-family:"Fraunces",Georgia,serif; font-size:21px; line-height:1.25; font-weight:400; } .ac-rcard__title a{ color:var(--ac-ink); text-decoration:none; transition:color .3s } .ac-rcard__title a:hover{ color:var(--ac-accent-deep) } .ac-rcard__lead{ margin:0; font-size:14.5px; line-height:1.6; color:var(--ac-ink-2) } .ac-rcard__facts{ display:flex; flex-wrap:wrap; gap:8px; margin:0; font-size:13px; color:var(--ac-muted) } .ac-rcard__facts i{ font-style:normal; opacity:.6 } .ac-rcard__foot{ display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:auto; padding-top:15px; border-top:1px solid var(--ac-line); } .ac-rcard__meta{ display:flex; align-items:center; gap:14px; margin:0; font-size:13px; color:var(--ac-muted); } .ac-rcard__comments{ display:inline-flex; align-items:center; gap:5px } .ac-rcard__comments svg{ width:15px; height:15px; display:block } .ac-rcard__more{ display:inline-flex; align-items:center; padding:9px 20px; border-radius:100px; background:var(--ac-accent); color:#fff !important; font-size:13.5px; font-weight:500; letter-spacing:.02em; text-decoration:none; white-space:nowrap; transition:background .3s, transform .35s var(--ac-ease); } .ac-rcard__more:hover{ background:var(--ac-ink); transform:translateY(-2px) } @media (max-width:480px){ .ac-recipes__grid{ grid-template-columns:1fr; gap:20px } } /* ===================================================================== RECEPTEK — adatlap --------------------------------------------------------------------- Fejrész: szöveg balra, nagy kép jobbra (mobilon a kép kerül felülre). Törzs: balra a ragadós, kipipálható hozzávaló-kártya, jobbra a számozott lépések. Főzés közben ez a kettő az, amit az ember nézeget. ===================================================================== */ .ac-recipe{ padding:34px 0 60px; background:var(--ac-cream) } .ac-recipe__crumbs{ margin:0 0 22px; font-size:13px; color:var(--ac-muted) } .ac-recipe__crumbs a{ color:var(--ac-muted); text-decoration:none } .ac-recipe__crumbs a:hover{ color:var(--ac-ink) } .ac-recipe__crumbs span{ margin:0 7px; opacity:.6 } .ac-recipe__head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:44px; align-items:center; margin:0 0 46px; } .ac-recipe__terms{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px } .ac-recipe__terms a{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ac-accent-deep); text-decoration:none; } .ac-recipe__terms a:hover{ color:var(--ac-ink) } .ac-recipe__title{ margin:0 0 16px; font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:clamp(30px, 4vw, 46px); line-height:1.1; letter-spacing:-.02em; color:var(--ac-ink); } .ac-recipe__lead{ margin:0 0 24px; font-size:16.5px; line-height:1.7; color:var(--ac-ink-2); max-width:52ch; } .ac-recipe__facts{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none } .ac-recipe__facts li{ padding:11px 18px; border-radius:16px; background:var(--ac-paper); border:1px solid var(--ac-line); text-align:center; min-width:96px; } .ac-recipe__facts b{ display:block; font-family:"Fraunces",Georgia,serif; font-size:18px; font-weight:400; color:var(--ac-ink); } .ac-recipe__facts span{ display:block; margin-top:2px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ac-muted); } .ac-recipe__tools{ margin:22px 0 0 } .ac-recipe__print{ padding:10px 20px; border-radius:100px; border:1px solid var(--ac-line); background:transparent; color:var(--ac-ink-2); font-family:"Inter",sans-serif; font-size:13.5px; line-height:1.2; cursor:pointer; transition:background .3s, color .3s, border-color .3s; } .ac-recipe__print:hover{ background:var(--ac-ink); border-color:var(--ac-ink); color:#fff } .ac-recipe__figure{ position:relative; margin:0; border-radius:26px; overflow:hidden; aspect-ratio:4 / 3; background:var(--ac-cream-2); box-shadow:0 40px 80px -60px rgba(30,27,24,.7); } .ac-recipe__figure img{ width:100%; height:100%; object-fit:cover; display:block } .ac-recipe__noimg{ display:block; width:100%; height:100% } .ac-recipe__lockbadge{ position:absolute; top:16px; left:16px; padding:7px 15px; border-radius:100px; background:rgba(30,27,24,.78); color:#fff; font-size:12.5px; } @media (max-width:900px){ .ac-recipe__head{ grid-template-columns:1fr; gap:26px; margin-bottom:34px } .ac-recipe__figure{ order:-1 } } /* --- törzs --- */ .ac-recipe__body{ display:grid; grid-template-columns:320px minmax(0,1fr); gap:44px; align-items:start; } .ac-recipe__body.is-single{ grid-template-columns:minmax(0,1fr) } .ac-recipe__body.is-single .ac-recipe__main{ max-width:74ch; margin-inline:auto } .ac-recipe__side{ position:sticky; top:100px } @media (max-width:900px){ .ac-recipe__body{ grid-template-columns:1fr; gap:30px } .ac-recipe__side{ position:static } } .ac-recipe__ing{ background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:22px; padding:24px 22px; } .ac-recipe__ing h2{ margin:0 0 14px; font-family:"Fraunces",Georgia,serif; font-size:21px; font-weight:400; color:var(--ac-ink); text-transform:none; letter-spacing:-.01em; } .ac-recipe__ing ul{ margin:0; padding:0; list-style:none } .ac-recipe__ing li{ margin:0; border-bottom:1px solid var(--ac-line) } .ac-recipe__ing li:last-child{ border-bottom:0 } .ac-recipe__ing label{ display:flex; align-items:flex-start; gap:12px; padding:11px 2px; cursor:pointer; font-size:15px; line-height:1.5; color:var(--ac-ink-2); } .ac-recipe__ing input[type="checkbox"]{ appearance:none; -webkit-appearance:none; flex:0 0 auto; margin:3px 0 0; width:18px; height:18px; border:1px solid var(--ac-line); border-radius:6px; background:#fff; cursor:pointer; transition:background .25s, border-color .25s; } .ac-recipe__ing input[type="checkbox"]:checked{ background:var(--ac-accent); border-color:var(--ac-accent); background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23fff%22 stroke-width=%223%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m5 12.5 4.5 4.5L19 7%22/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:12px; } .ac-recipe__ing input[type="checkbox"]:checked + span{ color:var(--ac-muted); text-decoration:line-through } .ac-recipe__ingnote{ margin:14px 0 0; font-size:12.5px; color:var(--ac-muted) } /* --- lépések --- */ .ac-recipe__main{ font-size:16px; line-height:1.75; color:var(--ac-ink-2) } .ac-recipe__main > :first-child{ margin-top:0 } .ac-recipe__main h2, .ac-recipe__main h3{ font-family:"Fraunces",Georgia,serif; font-weight:400; color:var(--ac-ink); letter-spacing:-.01em; text-transform:none; margin:34px 0 14px; } .ac-recipe__main h2{ font-size:26px } .ac-recipe__main h3{ font-size:21px } .ac-recipe__main p{ margin:0 0 16px } .ac-recipe__main img{ border-radius:18px } .ac-recipe__main a{ color:var(--ac-accent-deep) } .ac-recipe__main ol{ counter-reset:ac-step; margin:0 0 20px; padding:0; list-style:none } .ac-recipe__main ol > li{ counter-increment:ac-step; position:relative; margin:0 0 18px; padding:0 0 0 58px; min-height:42px; } .ac-recipe__main ol > li::before{ content:counter(ac-step); position:absolute; left:0; top:-2px; width:42px; height:42px; display:grid; place-items:center; border-radius:50%; background:var(--ac-cream-2); color:var(--ac-ink); font-family:"Fraunces",Georgia,serif; font-size:19px; line-height:1; } .ac-recipe__main ul{ margin:0 0 20px; padding-left:20px } .ac-recipe__main ul li{ margin:0 0 8px } /* --- zárolt recept --- */ .ac-lock{ max-width:620px; margin:0 auto; padding:38px 34px; text-align:center; background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:26px; box-shadow:0 30px 70px -55px rgba(30,27,24,.6); } .ac-lock__icon{ display:grid; place-items:center; width:56px; height:56px; margin:0 auto 18px; border-radius:50%; background:var(--ac-cream-2); color:var(--ac-accent-deep); } .ac-lock__icon svg{ width:26px; height:26px } .ac-lock h2{ margin:0 0 12px; font-family:"Fraunces",Georgia,serif; font-size:26px; font-weight:400; color:var(--ac-ink); text-transform:none; letter-spacing:-.01em; } .ac-lock p{ margin:0; font-size:15.5px; line-height:1.7; color:var(--ac-ink-2) } .ac-lock__actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:24px !important; } /* --- címkék, kapcsolódó receptek, hozzászólások --- */ .ac-recipe__tags{ display:flex; flex-wrap:wrap; gap:9px; margin:44px 0 0 } .ac-recipe__tags a{ padding:8px 16px; border-radius:100px; border:1px solid var(--ac-line); background:var(--ac-paper); color:var(--ac-ink-2); font-size:13px; text-decoration:none; transition:background .3s, color .3s, border-color .3s; } .ac-recipe__tags a:hover{ background:var(--ac-ink); border-color:var(--ac-ink); color:#fff } .ac-recipe__related{ margin-top:60px; padding-top:44px; border-top:1px solid var(--ac-line) } .ac-recipe__related h2{ margin:0 0 26px; font-family:"Fraunces",Georgia,serif; font-size:28px; font-weight:400; color:var(--ac-ink); text-transform:none; letter-spacing:-.01em; } .ac-recipe__comments{ margin-top:56px; padding-top:40px; border-top:1px solid var(--ac-line) } /* --- nyomtatás: csak maga a recept kerüljön papírra --- */ @media print{ .ac-head, .ac-foot, .ac-drawer, .ac-recipe__tools, .ac-recipe__crumbs, .ac-recipe__related, .ac-recipe__comments, .ac-recipe__tags{ display:none !important } .ac-recipe{ padding:0; background:#fff } .ac-recipe__head{ grid-template-columns:1fr; gap:16px } .ac-recipe__body{ grid-template-columns:1fr; gap:20px } .ac-recipe__figure{ max-height:8cm; box-shadow:none } .ac-recipe__ing, .ac-recipe__facts li, .ac-recipe__main ol > li{ break-inside:avoid } } /* --- recept-kategória oldal (étkezés / jelölés) --- */ .ac-rarchive__head{ max-width:62ch; margin:0 0 34px } .ac-rarchive__head h1{ margin:0 0 12px; font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:clamp(28px, 3.6vw, 42px); line-height:1.1; letter-spacing:-.02em; color:var(--ac-ink); } .ac-rarchive__lead{ font-size:16px; line-height:1.7; color:var(--ac-ink-2) } .ac-rarchive__lead p{ margin:0 0 10px } .ac-rarchive__lead p:last-child{ margin-bottom:0 } .ac-rarchive .pagination, .ac-rarchive .navigation{ margin-top:34px } .ac-rarchive__back{ margin:38px 0 0 } /* ===================================================================== VIDEÓTÁR — lista ===================================================================== */ .ac-videos{ margin:0 0 10px } .ac-empty{ margin:26px 0 0; font-size:15px; color:var(--ac-muted); text-align:center } .ac-chip--tool{ font-size:13px; padding:8px 15px; color:var(--ac-muted) } .ac-chip-sep{ width:1px; height:20px; background:var(--ac-line); margin:0 4px; flex:0 0 auto; } @media (max-width:640px){ .ac-chip-sep{ display:none } } .ac-videos__grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:24px; } /* --- videókártya --- */ .ac-vcard{ display:flex; flex-direction:column } .ac-vcard__media{ display:block; position:relative; aspect-ratio:16 / 9; overflow:hidden; border-radius:18px; background:var(--ac-cream-2); text-decoration:none; } .ac-vcard__media img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ac-ease), filter .4s; } .ac-vcard:hover .ac-vcard__media img{ transform:scale(1.05) } .ac-vcard__noimg{ display:block; width:100%; height:100% } /* A zárolt videó előnézete halványabb — ránézésre látszik, hogy nem nyílik. */ .ac-vcard.is-locked .ac-vcard__media img{ filter:grayscale(.35) brightness(.86) } /* Sötét, áttetsző korong fehér jellel: fényes és sötét fotón is olvasható, és nem takarja el a képet. Rámutatásra válik hangsúlyossá. */ .ac-vcard__play{ position:absolute; inset:0; margin:auto; width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:rgba(30,27,24,.32); color:#fff; backdrop-filter:blur(2px); transition:transform .4s var(--ac-ease), background .3s; } .ac-vcard__play svg{ width:22px; height:22px; margin-left:2px } .ac-vcard:hover .ac-vcard__play{ transform:scale(1.08); background:var(--ac-accent); color:#fff } .ac-vcard__len{ position:absolute; right:10px; bottom:10px; padding:4px 10px; border-radius:100px; background:rgba(30,27,24,.78); color:#fff; font-size:12px; line-height:1.4; } .ac-vcard__badge{ position:absolute; left:10px; top:10px; padding:5px 12px; border-radius:100px; background:rgba(30,27,24,.78); color:#fff; font-size:11.5px; line-height:1.4; } .ac-vcard__badge.is-open, .ac-vcard__badge.is-free{ background:var(--ac-accent); color:#fff } .ac-vcard__body{ display:flex; flex-direction:column; gap:5px; padding:13px 2px 0 } .ac-vcard__cat{ margin:0; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ac-accent-deep); } .ac-vcard__title{ margin:0; font-family:"Fraunces",Georgia,serif; font-size:18px; line-height:1.3; font-weight:400; } .ac-vcard__title a{ color:var(--ac-ink); text-decoration:none; transition:color .3s } .ac-vcard__title a:hover{ color:var(--ac-accent-deep) } .ac-vcard__tools{ margin:0; font-size:13px; color:var(--ac-muted) } @media (max-width:480px){ .ac-videos__grid{ grid-template-columns:1fr; gap:20px } } /* ===================================================================== VIDEÓTÁR — adatlap ===================================================================== */ .ac-video{ padding:34px 0 60px; background:var(--ac-cream) } .ac-video__stage{ max-width:1000px; margin:0 auto } .ac-video__player{ position:relative; aspect-ratio:16 / 9; overflow:hidden; border-radius:22px; background:#000; box-shadow:0 40px 80px -60px rgba(30,27,24,.8); } .ac-video__player iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } .ac-video__missing{ margin:0; padding:24px; text-align:center; color:var(--ac-muted) } .ac-video__head{ max-width:1000px; margin:26px auto 0 } .ac-video__title{ margin:0 0 12px; font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:clamp(26px, 3.4vw, 38px); line-height:1.15; letter-spacing:-.02em; color:var(--ac-ink); } .ac-video__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:0 } .ac-video__meta a, .ac-video__len{ padding:6px 14px; border-radius:100px; border:1px solid var(--ac-line); background:var(--ac-paper); color:var(--ac-ink-2); font-size:13px; text-decoration:none; transition:background .3s, color .3s, border-color .3s; } .ac-video__meta a:hover{ background:var(--ac-ink); border-color:var(--ac-ink); color:#fff } .ac-video__meta a.is-tool{ color:var(--ac-muted) } .ac-video__len{ background:var(--ac-cream-2); border-color:transparent } .ac-video__desc{ margin-top:22px; font-size:16px; line-height:1.75; color:var(--ac-ink-2) } .ac-video__desc p{ margin:0 0 14px } .ac-video__desc a{ color:var(--ac-accent-deep) } .ac-video__related{ margin-top:60px; padding-top:44px; border-top:1px solid var(--ac-line) } .ac-video__related h2{ margin:0 0 26px; font-family:"Fraunces",Georgia,serif; font-size:28px; font-weight:400; color:var(--ac-ink); text-transform:none; letter-spacing:-.01em; } /* A zárolt adatlapon a lakat-kártya foglalja el a lejátszó helyét. */ .ac-video__stage .ac-lock{ margin:0 auto } /* --- szűrés: az elrejtett kártya tényleg tűnjön el --------------------- A JS a `hidden` jelölést teszi a kártyára, a böngésző beépített `[hidden]{display:none}` szabálya viszont gyengébb, mint a saját `.ac-rcard{display:flex}` / `.ac-vcard{display:flex}` szabályunk — ezért az elrejtett kártyák mégis látszottak. Ez a két szabály erősebb náluk. */ .ac-rcard[hidden], .ac-vcard[hidden]{ display:none } /* --- videótár oldal: teljes szélesség ------------------------------------- Az oldal Elementorban készült, és annak konténere 1110 px-nél megfogja a tartalmat. Ezt oldjuk ki — csak ezen az egy oldalon, a törzsosztály alapján, hogy a többi Elementor-oldal érintetlen maradjon. A címsávot is ugyanerre a szélességre nyitjuk, különben a cím és az első kártya nem esne egy vonalba. */ body.ac-videotar-page .elementor-container{ max-width:none !important } body.ac-videotar-page .elementor-widget-wrap.elementor-element-populated{ padding-left:0 !important; padding-right:0 !important; } body.ac-videotar-page .elementor-section:not(.elementor-inner-section){ padding-left:30px; padding-right:30px; } body.ac-videotar-page .page-header-inner{ max-width:none !important; width:auto !important; padding-left:30px; padding-right:30px; } @media (max-width:640px){ body.ac-videotar-page .elementor-section:not(.elementor-inner-section), body.ac-videotar-page .page-header-inner{ padding-left:22px; padding-right:22px } } /* --- kártyajelvények egymás mellett --- */ .ac-vcard__flags{ position:absolute; left:10px; top:10px; display:flex; flex-wrap:wrap; gap:6px; } .ac-vcard__badge{ position:static } /* Az „Új” a hangsúlyos, a hozzáférés csak halkan tájékoztat. */ .ac-vcard__badge.is-new{ background:var(--ac-accent); color:#fff } .ac-vcard__badge.is-open, .ac-vcard__badge.is-free{ background:rgba(255,253,249,.92); color:var(--ac-ink) } .ac-chip--new{ color:var(--ac-accent-deep); border-color:rgba(222,113,146,.45) } .ac-chip--new:hover{ border-color:var(--ac-accent); color:var(--ac-accent-deep) } .ac-chip--new.is-on{ background:var(--ac-accent); border-color:var(--ac-accent); color:#fff } /* ===================================================================== FIÓKOM --------------------------------------------------------------------- Az OceanWP nem írja felül a WooCommerce fiók-sablonjait, tehát a szokásos szerkezetre dolgozunk: .woocommerce-MyAccount-navigation (menü) és .woocommerce-MyAccount-content (tartalom). Ezt tesszük két hasábba. A táblázatok itt is kártyasorrá alakulnak szűk kijelzőn — ugyanaz a megfontolás, mint a kosárnál: a
nem tud a saját minimális szélessége alá menni, és kifutna a rácsból. ===================================================================== */ body.woocommerce-account .woocommerce{ display:grid; grid-template-columns:250px minmax(0,1fr); gap:34px; align-items:start; } body.woocommerce-account .woocommerce > .woocommerce-notices-wrapper{ grid-column:1 / -1 } @media (max-width:900px){ body.woocommerce-account .woocommerce{ grid-template-columns:1fr; gap:24px } } /* --- bal oldali menü --- */ /* Az OceanWP a menüt egy .woocommerce-MyAccount-tabs dobozba csomagolja, és mellé lebegteti a profilblokkot (.oceanwp-user-profile). A lebegtetés elviszi a szélességet, a menünek 30 px marad — attól tört betűnként. Ezért a csomagolást blokkszintűvé tesszük, és a kártya-kinézet is arra kerül. A második választó arra az esetre való, ha nincs ilyen csomagolás. */ body.woocommerce-account .woocommerce-MyAccount-tabs, body.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation{ display:block; width:auto; min-width:0; float:none; margin:0; background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:20px; padding:10px; position:sticky; top:100px; } @media (max-width:900px){ body.woocommerce-account .woocommerce-MyAccount-tabs, body.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation{ position:static } } /* A profilblokk a menü FÖLÉ kerül, teljes szélességben. */ body.woocommerce-account .oceanwp-user-profile{ display:block; width:auto; float:none; clear:both; margin:0 0 12px; padding:0 0 12px; border-bottom:1px solid var(--ac-line); text-align:center; background:none; } body.woocommerce-account .oceanwp-user-profile img, body.woocommerce-account .oceanwp-user-profile .avatar{ display:block; margin:0 auto 8px; border-radius:50%; } body.woocommerce-account .oceanwp-user-profile a{ color:var(--ac-ink) } /* A menü maga már nem kártya — azt a külső doboz adja. */ body.woocommerce-account .woocommerce-MyAccount-navigation{ width:100%; float:none; clear:both; margin:0; padding:0; background:none; border:0; border-radius:0; position:static; } body.woocommerce-account .woocommerce-MyAccount-navigation ul{ margin:0; padding:0; list-style:none; } body.woocommerce-account .woocommerce-MyAccount-navigation li{ margin:0; border:0; } body.woocommerce-account .woocommerce-MyAccount-navigation li a{ display:block; padding:11px 15px; border-radius:12px; font-size:15px; line-height:1.3; color:var(--ac-ink-2); text-decoration:none; transition:background .25s, color .25s; } body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{ background:var(--ac-cream-2); color:var(--ac-ink); } body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{ background:var(--ac-ink); color:#fff; } body.woocommerce-account .woocommerce-MyAccount-navigation li--customer-logout a{ color:var(--ac-accent-deep); } /* --- jobb oldali tartalom --- */ body.woocommerce-account .woocommerce-MyAccount-content{ width:auto; float:none; margin:0; min-width:0; font-size:15.5px; line-height:1.7; color:var(--ac-ink-2); } body.woocommerce-account .woocommerce-MyAccount-content > p:first-child{ margin-top:0 } body.woocommerce-account .woocommerce-MyAccount-content h2, body.woocommerce-account .woocommerce-MyAccount-content h3, body.woocommerce-account .woocommerce-MyAccount-content legend{ font-family:"Fraunces",Georgia,serif; font-weight:400; color:var(--ac-ink); letter-spacing:-.01em; text-transform:none; } body.woocommerce-account .woocommerce-MyAccount-content h2{ font-size:23px; margin:0 0 14px } body.woocommerce-account .woocommerce-MyAccount-content h3{ font-size:19px; margin:26px 0 12px } body.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.ac-btn){ color:var(--ac-accent-deep); } /* --- előfizetés-doboz (saját) --- */ .ac-acct-plans{ display:grid; gap:16px; margin:0 0 28px } .ac-acct-card{ background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:22px; padding:24px 24px 22px; margin:0 0 28px; } .ac-acct-card--plan{ border-color:rgba(222,113,146,.35) } .ac-acct-card.is-inactive{ border-color:var(--ac-line); background:var(--ac-cream) } .ac-acct-card__label{ margin:0 0 4px; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ac-muted); } .ac-acct-card h2{ margin:0 0 12px !important; font-size:26px !important } .ac-acct-card p{ margin:0 0 10px } .ac-acct-card__status{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; font-size:14.5px; color:var(--ac-ink-2); } .ac-acct-pill{ padding:5px 13px; border-radius:100px; background:var(--ac-cream-2); color:var(--ac-muted); font-size:12.5px; line-height:1.4; } .ac-acct-pill.is-on{ background:var(--ac-accent); color:#fff } .ac-acct-card__until strong{ color:var(--ac-ink); font-weight:500 } .ac-acct-note{ margin:14px 0 0 !important; padding:12px 16px; border-radius:14px; background:var(--ac-cream-2); font-size:14px; line-height:1.6; color:var(--ac-ink-2); } .ac-acct-card__actions{ display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 0 !important; } /* --- táblázatok (rendelések, tagságok, letöltések) --- */ body.woocommerce-account .woocommerce-MyAccount-content table{ width:100%; border-collapse:collapse; border:0; margin:0 0 22px; background:none; } body.woocommerce-account .woocommerce-MyAccount-content thead th{ border:0; border-bottom:1px solid var(--ac-line); padding:0 12px 10px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:400; color:var(--ac-muted); text-align:left; background:none; } body.woocommerce-account .woocommerce-MyAccount-content tbody td{ border:0; border-bottom:1px solid var(--ac-line); padding:15px 12px; font-size:15px; color:var(--ac-ink-2); background:none; } body.woocommerce-account .woocommerce-MyAccount-content tbody tr:last-child td{ border-bottom:0 } @media (max-width:640px){ body.woocommerce-account .woocommerce-MyAccount-content table, body.woocommerce-account .woocommerce-MyAccount-content tbody, body.woocommerce-account .woocommerce-MyAccount-content tr, body.woocommerce-account .woocommerce-MyAccount-content td{ display:block; width:100% } body.woocommerce-account .woocommerce-MyAccount-content thead{ display:none } body.woocommerce-account .woocommerce-MyAccount-content tbody tr{ background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:18px; padding:8px 16px; margin:0 0 12px; } body.woocommerce-account .woocommerce-MyAccount-content tbody td{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; text-align:right; } body.woocommerce-account .woocommerce-MyAccount-content tbody td::before{ content:attr(data-title); font-size:13px; color:var(--ac-muted); text-align:left; } } /* --- űrlapok --- */ body.woocommerce-account .woocommerce-MyAccount-content form{ margin:0 } body.woocommerce-account fieldset{ border:1px solid var(--ac-line); border-radius:18px; padding:20px 22px; margin:26px 0 0; } body.woocommerce-account .woocommerce-form-row, body.woocommerce-account .form-row{ margin:0 0 16px; padding:0 } body.woocommerce-account label{ display:block; margin:0 0 6px; font-size:13.5px; color:var(--ac-muted); } body.woocommerce-account .woocommerce-Input, body.woocommerce-account .input-text, body.woocommerce-account select{ height:auto; width:100%; padding:12px 16px; border:1px solid var(--ac-line); border-radius:12px; font-family:"Inter",sans-serif; font-size:15px; line-height:1.4; color:var(--ac-ink); background:#fff; box-shadow:none; } body.woocommerce-account .woocommerce-Input:focus, body.woocommerce-account .input-text:focus, body.woocommerce-account select:focus{ outline:none; border-color:var(--ac-accent); box-shadow:0 0 0 3px rgba(222,113,146,.16); } body.woocommerce-account .woocommerce-form-row .required{ color:var(--ac-accent-deep); text-decoration:none } /* --- gombok --- */ body.woocommerce-account .woocommerce-MyAccount-content .button, body.woocommerce-account .woocommerce-Button{ display:inline-block; padding:12px 24px; border:0; border-radius:100px; background:var(--ac-accent); color:#fff !important; font-family:"Inter",sans-serif; font-size:14.5px; font-weight:500; line-height:1.2; text-decoration:none; cursor:pointer; transition:background .3s, transform .35s var(--ac-ease); } body.woocommerce-account .woocommerce-MyAccount-content .button:hover, body.woocommerce-account .woocommerce-Button:hover{ background:var(--ac-ink); color:#fff !important; transform:translateY(-2px); } /* A táblázatokban lévő „Megtekintés” gomb legyen visszafogottabb. */ body.woocommerce-account .woocommerce-MyAccount-content td .button{ padding:8px 18px; font-size:13.5px; background:var(--ac-cream-2); color:var(--ac-ink) !important; } body.woocommerce-account .woocommerce-MyAccount-content td .button:hover{ background:var(--ac-ink); color:#fff !important; } /* --- Memberships tagi terület --- */ body.woocommerce-account .wc-memberships-members-area-section-title, body.woocommerce-account .my_account_memberships caption{ font-family:"Fraunces",Georgia,serif; font-weight:400; color:var(--ac-ink); text-transform:none; } body.woocommerce-account .wc-memberships-members-area-navigation ul{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 20px; padding:0; list-style:none; } body.woocommerce-account .wc-memberships-members-area-navigation li a{ display:inline-block; padding:8px 16px; border-radius:100px; border:1px solid var(--ac-line); background:var(--ac-paper); font-size:13.5px; color:var(--ac-ink-2) !important; text-decoration:none; } body.woocommerce-account .wc-memberships-members-area-navigation li.active a{ background:var(--ac-ink); border-color:var(--ac-ink); color:#fff !important; } /* --- szűrés: gomb + legördülők ---------------------------------------- Négy szempontnál a pirulasorok elárasztották az oldalt, mobilon a fél képernyőt elvitték. Helyette egy gomb és alatta legördülők. A panel asztali gépen alapból NYITVA van, mobilon zárva — ezt tisztán CSS dönti el, hogy ne villanjon fel betöltéskor. A JS csak a két állapotot kapcsolgatja: .is-open kinyit, .is-closed bezár. */ .ac-filters{ margin:0 0 26px } .ac-filters__bar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px } .ac-filters__toggle{ display:inline-flex; align-items:center; gap:9px; padding:9px 18px; border-radius:100px; border:1px solid var(--ac-line); background:var(--ac-paper); color:var(--ac-ink); font-family:"Inter",sans-serif; font-size:14px; line-height:1.2; cursor:pointer; transition:background .25s, border-color .25s, color .25s; } .ac-filters__toggle:hover{ border-color:var(--ac-ink) } .ac-filters__toggle svg{ width:17px; height:17px; display:block } .ac-filters__count{ min-width:20px; height:20px; padding:0 6px; border-radius:100px; background:var(--ac-accent); color:#fff; font-size:12px; line-height:20px; text-align:center; } .ac-filters__clear{ padding:9px 4px; border:0; background:none; cursor:pointer; font-family:"Inter",sans-serif; font-size:13.5px; color:var(--ac-muted); text-decoration:underline; text-underline-offset:3px; } .ac-filters__clear:hover{ color:var(--ac-ink) } .ac-filters__panel{ display:none; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:14px; margin-top:14px; padding:18px 20px; background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:18px; } .ac-filters.is-open .ac-filters__panel{ display:grid } @media (min-width:900px){ .ac-filters__panel{ display:grid } .ac-filters.is-closed .ac-filters__panel{ display:none } } .ac-fsel{ display:flex; flex-direction:column; gap:6px; min-width:0 } .ac-fsel__label{ font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ac-muted); } .ac-fselect{ /* A téma minden select-re height:2.25em-et tesz, ami kevesebb, mint a szöveg és a belső margó együtt — attól vágódott el a felirat. */ height:auto; width:100%; padding:10px 34px 10px 14px; border:1px solid var(--ac-line); border-radius:12px; font-family:"Inter",sans-serif; font-size:14.5px; line-height:1.3; color:var(--ac-ink); background-color:#fff; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%237A7166%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22m6 9 6 6 6-6%22/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 11px center; background-size:16px; } .ac-fselect:focus{ outline:none; border-color:var(--ac-accent); box-shadow:0 0 0 3px rgba(222,113,146,.16); } @media (max-width:640px){ .ac-filters__panel{ grid-template-columns:1fr; padding:16px } } /* --- a PMS előfizetés-kezelője a Fiókom „Előfizetésem” fülén --- */ .ac-pms-account{ margin-top:8px } .ac-pms-account .pms-account-navigation{ display:none } .ac-pms-account table{ width:100%; border-collapse:collapse; border:0; margin:0 0 20px; background:none; } .ac-pms-account th{ border:0; border-bottom:1px solid var(--ac-line); padding:0 12px 10px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; font-weight:400; color:var(--ac-muted); text-align:left; } .ac-pms-account td{ border:0; border-bottom:1px solid var(--ac-line); padding:15px 12px; font-size:15px; color:var(--ac-ink-2); } .ac-pms-account tr:last-child td{ border-bottom:0 } .ac-pms-account a:not(.button){ color:var(--ac-accent-deep) } .ac-pms-account .pms-account-subscriptions-cancel a, .ac-pms-account .pms-account-subscription-cancel{ color:var(--ac-muted); text-decoration:underline; text-underline-offset:3px; } .ac-pms-account .pms-account-subscriptions-cancel a:hover{ color:var(--ac-accent-deep) } .ac-pms-account input[type="submit"], .ac-pms-account .pms-account-button{ display:inline-block; padding:11px 22px; border:0; border-radius:100px; background:var(--ac-accent); color:#fff; font-family:"Inter",sans-serif; font-size:14.5px; font-weight:500; line-height:1.2; cursor:pointer; transition:background .3s; } .ac-pms-account input[type="submit"]:hover, .ac-pms-account .pms-account-button:hover{ background:var(--ac-ink); color:#fff } @media (max-width:640px){ .ac-pms-account table, .ac-pms-account tbody, .ac-pms-account tr, .ac-pms-account td{ display:block; width:100% } .ac-pms-account thead{ display:none } .ac-pms-account tbody tr{ background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:18px; padding:8px 16px; margin:0 0 12px; } .ac-pms-account tbody td{ padding:10px 0 } } /* ===================================================================== ELŐFIZETÉS OLDAL — csomagkártyák --------------------------------------------------------------------- A PMS rádiógombokat ad; a JS ezekből épít nevet / árat / időszakot (js/ac-site.js), és a .is-card osztályt teszi rájuk. Ha a JS bármiért nem fut le, a rádiógombok az eredeti szöveggel maradnak — az űrlap attól még működik. ===================================================================== */ body.ac-auth-register .entry{ max-width:940px } /* A csomagkártyák és a regisztrációs mezők kártyája összeért: a két blokk vizuálisan egybefolyt, holott két külön döntés (ki vagyok / mit veszek). A felső margó választja el őket. */ body.ac-auth-register .pms-field-subscriptions{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin:34px 0 26px; padding:0; list-style:none; } @media (max-width:640px){ body.ac-auth-register .pms-field-subscriptions{ grid-template-columns:1fr; gap:10px } } .pms-subscription-plan.is-card{ margin:0 } .pms-subscription-plan.is-card label{ position:relative; display:block; height:100%; margin:0; cursor:pointer; padding:22px 20px; border:1px solid var(--ac-line); border-radius:20px; background:var(--ac-paper); text-align:center; font-size:inherit; letter-spacing:0; text-transform:none; color:var(--ac-ink-2); transition:border-color .25s, box-shadow .3s, transform .3s var(--ac-ease); } .pms-subscription-plan.is-card label:hover{ border-color:var(--ac-accent); transform:translateY(-2px); } .pms-subscription-plan.is-card input[type="radio"]{ position:absolute; top:14px; right:14px; margin:0; width:18px; height:18px; accent-color:var(--ac-accent); } .pms-subscription-plan.is-selected label{ border-color:var(--ac-accent); background:#fff; box-shadow:0 0 0 3px rgba(222,113,146,.14); } .ac-plan{ display:block } .ac-plan__name{ display:block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ac-muted); margin-bottom:10px; } .ac-plan__price{ display:block; font-family:"Fraunces",Georgia,serif; font-weight:400; font-size:30px; line-height:1.05; color:var(--ac-ink); letter-spacing:-.02em; } .ac-plan__period{ display:block; margin-top:6px; font-size:13.5px; color:var(--ac-muted); } /* --- automatikus megújítás jelölő --- */ .pms-subscription-plan-auto-renew{ margin:0 0 22px } .pms-subscription-plan-auto-renew label{ display:flex; align-items:center; gap:10px; margin:0; font-size:14px; letter-spacing:0; text-transform:none; color:var(--ac-ink-2); } .pms-subscription-plan-auto-renew input{ width:17px; height:17px; margin:0; accent-color:var(--ac-accent) } /* --- regisztrációs mezők két hasábban --- */ @media (min-width:720px){ body.ac-auth-register .pms-account-section-wrapper{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; } body.ac-auth-register .pms-user-login-field, body.ac-auth-register .pms-user-email-field{ grid-column:1 / -1 } } /* --- fizetési mód --- */ .pms-paygates-holder{ margin:0 0 22px } .pms-paygates-holder:empty{ display:none } .pms-paygates-holder label{ display:inline-flex; align-items:center; gap:9px; margin:0 14px 8px 0; font-size:14.5px; letter-spacing:0; text-transform:none; color:var(--ac-ink-2); } .pms-paygates-holder input[type="radio"]{ width:17px; height:17px; margin:0; accent-color:var(--ac-accent) } /* --- elküldés gomb --- */ body.ac-auth-register .pms-form-submit, body.ac-auth-register input.pms-form-submit{ width:100%; padding:15px 26px; font-size:15px } /* A /fiokom/ oldal az Elementor SZÖVEG widgetjében futtatja a WooCommerce rövidkódot, az pedig wpautop-ot alkalmaz a kimenetre — ettől üres

elemek keletkeznek a saját kártyáink között, és fölösleges térközt csinálnak. A rendes megoldás a Rövidkód widget; ez a szabály addig is rendbe teszi. */ .ac-acct-card p:empty, .ac-acct-plans > p:empty, .ac-pms-account p:empty{ display:none } /* --- WooCommerce Memberships oldalszintű korlátozó üzenete --- A PMS-ét PHP-ban cseréljük a lakat-kártyára; a Membershipsé viszont egy woocommerce-info doboz, azt itt formázzuk hasonlóra. */ .wc-memberships-restriction-message, .wc-memberships-content-restricted-message{ max-width:620px; margin:30px auto !important; padding:26px 30px !important; background:var(--ac-paper) !important; border:1px solid var(--ac-line) !important; border-radius:22px !important; color:var(--ac-ink-2) !important; font-size:15.5px; line-height:1.7; text-align:center; list-style:none; box-shadow:0 24px 60px -50px rgba(30,27,24,.5); } .wc-memberships-restriction-message::before, .wc-memberships-content-restricted-message::before{ content:none !important } .wc-memberships-restriction-message a, .wc-memberships-content-restricted-message a{ color:var(--ac-accent-deep) } /* ===================================================================== FIZETÉSI MÓD VÁLASZTÓ --------------------------------------------------------------------- A PMS saját stíluslapja fix 136×56-os, szögletes dobozt rajzol a rádiógomb melletti -re, és kiválasztáskor MÁSKÉK (#0056ba) keretet ad neki. A rádiógomb maga display:none, tehát a doboz maga a kapcsoló. Nem tudjuk a jelölőt átszínezni, mert nincs jelölő — a teljes dobozt kell átvennünk. A választók id-t tartalmaznak (1,0,2), ezért a body.ac-auth-page előtag kell, hogy a mienk nyerjen (1,1,3). A doboz így ugyanúgy néz ki, mint fölötte a csomagkártya: ugyanaz a gesztus, ugyanaz a visszajelzés. ===================================================================== */ body.ac-auth-page #pms-paygates-wrapper{ margin-bottom:0 } body.ac-auth-page #pms-paygates-wrapper > h3{ font-family:"Inter",sans-serif; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--ac-muted); margin:0 0 10px; } body.ac-auth-page #pms-paygates-inner{ display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:10px; align-items:stretch; } body.ac-auth-page #pms-paygates-inner > label{ display:block; margin:0; background:none; } body.ac-auth-page #pms-paygates-inner input + span{ width:auto; height:auto; min-height:56px; padding:12px 16px; border:1px solid var(--ac-line); border-radius:14px; background:var(--ac-paper); color:var(--ac-ink-2); font-family:"Inter",sans-serif; font-size:14.5px; font-weight:400; line-height:1.3; text-align:center; transition:border-color .25s, box-shadow .3s, background .25s; } body.ac-auth-page #pms-paygates-inner input + span:hover{ border-color:var(--ac-accent); } body.ac-auth-page #pms-paygates-inner input:checked + span{ border-color:var(--ac-accent); background:#fff; color:var(--ac-ink); box-shadow:0 0 0 3px rgba(222,113,146,.14); } /* A PMS a „manual” módot külön kiemeli félkövérrel és majdnem feketével — nálunk ez indokolatlanul rángatja a szemet, hiszen nem ez az ajánlott mód. */ body.ac-auth-page #pms-paygates-inner input[value="manual"] + span{ font-weight:400; font-size:14.5px; color:var(--ac-ink-2); } /* Billentyűzettel is látszódjon, melyik van fókuszban. */ body.ac-auth-page #pms-paygates-inner input:focus-visible + span{ outline:2px solid var(--ac-accent); outline-offset:2px; } /* --- az elküldés gomb szövege ------------------------------------------ A „Fizetési kötelezettséggel járó megrendelés” felirat hosszú, a gomb viszont white-space:pre és overflow:clip volt, ezért mobilon egyszerűen levágta a szó közepén. A feliratot a jogszabály miatt nem rövidíthetjük, tehát a gombnak kell törnie. */ body.ac-auth-page .pms-form-submit, body.ac-auth-page input.pms-form-submit{ width:100%; height:auto; white-space:normal; overflow:visible; line-height:1.35; padding:15px 26px; font-size:15px; } @media (max-width:520px){ body.ac-auth-page input.pms-form-submit{ font-size:13.5px; padding:14px 18px } body.ac-auth-page #pms-paygates-inner{ grid-template-columns:1fr } } /* ===================================================================== MEGERŐSÍTŐ ŰRLAPOK (lemondás, elhagyás, fizetés újrapróbálása) --------------------------------------------------------------------- A PMS ezeknél két gombot ad egymás után, a mi alap gombstílusunk viszont 100% szélességű — így a két gomb hézag nélkül egymásra tapadt, és mindkettő ugyanolyan rózsaszín volt. Ezen felül a HANGSÚLY is rossz volt: a visszavonhatatlan művelet ugyanúgy hívogatott, mint a biztonságos kilépés. Itt megfordítjuk: a „Vissza" a kiemelt gomb, a törlés visszafogott, keretes. ===================================================================== */ .pms-form input[name="pms_confirm_abandon_subscription"], .pms-form input[name="pms_confirm_cancel_subscription"], .pms-form input[name="pms_confirm_retry_payment_subscription"], .pms-form input[name="pms_redirect_back"]{ width:auto; min-width:200px; margin:14px 10px 0 0; } /* A visszavonhatatlan művelet: keretes, visszafogott. A padding 1px-szel kisebb, mert a keret hozzáad — így a két gomb magassága egyforma marad. */ .pms-form input[name="pms_confirm_abandon_subscription"], .pms-form input[name="pms_confirm_cancel_subscription"]{ padding:13px 26px; background:transparent; color:var(--ac-ink); border:1px solid var(--ac-line); } .pms-form input[name="pms_confirm_abandon_subscription"]:hover, .pms-form input[name="pms_confirm_cancel_subscription"]:hover{ background:transparent; color:var(--ac-accent-deep); border-color:var(--ac-accent-deep); box-shadow:none; transform:none; } @media (max-width:520px){ .pms-form input[name="pms_confirm_abandon_subscription"], .pms-form input[name="pms_confirm_cancel_subscription"], .pms-form input[name="pms_confirm_retry_payment_subscription"], .pms-form input[name="pms_redirect_back"]{ width:100%; margin-right:0; } } /* ===================================================================== KÖTELEZŐ NYILATKOZATOK AZ ELŐFIZETÉSI ŰRLAPON --------------------------------------------------------------------- Két pipa a gomb fölött. Szándékosan nem apró betűs jogi lábjegyzet: ha a vevő elveszíti az elállási jogát, azt olvashatóan kell közölni. Ezért 14px, normál kontraszt, nem szürke. ===================================================================== */ /* Rendelés-összegző: csomag neve és ára a nyilatkozatok fölött */ .ac-summary{ margin:6px 0 16px; padding:18px 20px; background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:14px; } .ac-summary__row{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 16px } .ac-summary__name{ font-size:15px; font-weight:600; color:var(--ac-ink); display:flex; flex-wrap:wrap; align-items:center; gap:8px } .ac-summary__badge{ background:var(--ac-accent); color:#fff; border-radius:100px; padding:3px 10px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; } .ac-summary__price{ font-family:"Fraunces",Georgia,serif; font-size:26px; line-height:1; color:var(--ac-ink); white-space:nowrap } .ac-summary__price small{ font-family:"Inter",sans-serif; font-size:14px; color:var(--ac-muted) } .ac-summary__note{ margin:10px 0 0; font-size:13.5px; line-height:1.55; color:var(--ac-ink-2) } .ac-consent{ margin:6px 0 20px } .ac-consent__info{ margin:0 0 14px; padding:14px 16px; background:var(--ac-cream-2, #EDE6D9); border-radius:14px; font-size:13.5px; line-height:1.55; color:var(--ac-ink-2); } .ac-consent__error{ margin:0 0 12px; padding:12px 16px; border:1px solid var(--ac-accent-deep); border-radius:14px; background:#FBEEF2; color:var(--ac-accent-deep); font-size:14px; line-height:1.5; } .ac-consent__row{ display:flex; align-items:flex-start; gap:11px; margin:0 0 12px; cursor:pointer; font-size:14px; line-height:1.55; letter-spacing:0; text-transform:none; font-weight:400; color:var(--ac-ink-2); } /* A pipa nem zsugorodhat össze hosszú szöveg mellett, és a szöveg első sorával kell egy vonalban állnia — innen a kis felső eltolás. */ .ac-consent__row input[type="checkbox"]{ flex:0 0 auto; width:18px; height:18px; margin:2px 0 0; accent-color:var(--ac-accent); cursor:pointer; } .ac-consent__row a{ color:var(--ac-accent-deep); text-decoration:underline; text-underline-offset:2px; } .ac-consent__row a:hover{ color:var(--ac-ink) } .ac-consent__req{ color:var(--ac-accent-deep) } /* ===================================================================== SZÁMLÁZÁSI ADATOK AZ ELŐFIZETÉSI ŰRLAPON --------------------------------------------------------------------- Az amazonclub-szamla bővítmény mezői. A regisztrációs kártya kéthasábos rács; a címsor és a név a teljes szélességet kapja, az irányítószám és a település egymás mellé kerül — így néz ki egy magyar cím papíron is. ===================================================================== */ .ac-szamla-cimsor{ grid-column:1 / -1; margin:14px 0 4px; padding-top:18px; border-top:1px solid var(--ac-line); list-style:none; } .ac-szamla-cimsor__cim{ margin:0 0 2px; font-family:"Fraunces",Georgia,serif; font-size:19px; color:var(--ac-ink); } .ac-szamla-cimsor__leiras{ margin:0; font-size:13.5px; color:var(--ac-muted) } body.ac-auth-page .ac-szamla-nev-field, body.ac-auth-page .ac-szamla-cim-field{ grid-column:1 / -1 } /* Belépett vevőnél nincs kártya körülötte — saját keret kell. */ .ac-szamla-lista{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin:0 0 24px; padding:22px 24px; list-style:none; background:var(--ac-paper); border:1px solid var(--ac-line); border-radius:18px; } .ac-szamla-lista .ac-szamla-cimsor{ margin-top:0; padding-top:0; border-top:0 } @media (max-width:640px){ .ac-szamla-lista{ grid-template-columns:1fr; padding:18px } } /* A belépett vevő űrlapja (.pms-form) maga is kártya — ott a számlázási blokknak nem kell saját keret, különben kártya ül a kártyában. */ .pms-form .ac-szamla-lista{ background:none; border:0; border-radius:0; padding:0 0 22px; border-bottom:1px solid var(--ac-line); }