/** * Live-search overlay + results page (op-sr) styling. Brand tokens with * hardcoded fallbacks so it renders identically outside Oxygen contexts. */ /* ---- overlay shell ---- */ .op-search { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-start; justify-content: center; padding: 9vh 18px 24px; } .op-search[hidden] { display: none; } .op-search__backdrop { position: absolute; inset: 0; background: rgba(30, 12, 12, 0.55); backdrop-filter: blur(3px); } .op-search__panel { position: relative; width: 100%; max-width: 680px; background: var(--op-surface, #fff); border-radius: 16px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); overflow: hidden; display: flex; flex-direction: column; max-height: 78vh; } html.op-search-open { overflow: hidden; } /* ---- bar ---- */ .op-search__bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--op-border, #E7E2DB); margin: 0; } .op-search__glass { flex: 0 0 auto; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E1A1A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='M21 21l-4.5-4.5'/%3E%3C/svg%3E") no-repeat center / contain; } .op-search__input { flex: 1 1 auto; border: none; outline: none; font-family: var(--op-font-body, sans-serif); font-size: 17px; color: var(--op-ink, #24211E); background: transparent; } .op-search__input::placeholder { color: var(--op-faint, #9E9C99); } .op-search__close { flex: 0 0 auto; border: none; background: transparent; font-size: 26px; line-height: 1; color: var(--op-muted, #6E6A65); cursor: pointer; padding: 2px 6px; } .op-search__close:hover { color: var(--op-primary, #8E1A1A); } /* ---- results ---- */ .op-search__results { overflow-y: auto; padding: 14px 18px; } .op-search__results.is-loading { opacity: 0.45; } .op-search__h { font-family: var(--op-font-body, sans-serif); font-size: 11.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--op-faint, #9E9C99); margin: 14px 0 10px; } .op-search__h:first-child { margin-top: 2px; } .op-search__issues { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .op-search-issue { text-decoration: none; text-align: center; } .op-search-issue img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14); transition: transform 0.15s ease; } .op-search-issue:hover img { transform: translateY(-3px); } .op-search-issue__mag { display: block; font-family: var(--op-font-body, sans-serif); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--op-primary, #8E1A1A); margin-top: 8px; } .op-search-issue__label { display: block; font-family: var(--op-font-body, sans-serif); font-size: 12px; color: var(--op-muted, #6E6A65); } .op-search__cols { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 4px; } .op-search__cols a { font-family: var(--op-font-body, sans-serif); font-size: 13px; font-weight: 700; color: var(--op-ink, #24211E); background: var(--op-cream, #F6F5F1); border: 1px solid var(--op-border, #E7E2DB); border-radius: 20px; padding: 7px 14px; text-decoration: none; transition: all 0.15s ease; } .op-search__cols a:hover { border-color: var(--op-primary, #8E1A1A); color: var(--op-primary, #8E1A1A); } .op-search__colcount { display: inline-block; margin-left: 6px; background: rgba(201, 161, 92, 0.18); color: #6B5320; border-radius: 9px; padding: 0 7px; font-size: 11px; } .op-sr__cols { justify-content: flex-start; margin: 0 0 6px; } .op-search__articles { display: flex; flex-direction: column; } .op-search-article { display: block; text-decoration: none; padding: 10px 10px; border-radius: 8px; } .op-search-article:hover { background: var(--op-cream, #F6F5F1); } .op-search-article__title { display: block; font-family: var(--op-font-heading, Georgia, serif); font-size: 15.5px; color: var(--op-ink, #24211E); line-height: 1.35; } .op-search-article__meta { display: block; font-family: var(--op-font-body, sans-serif); font-size: 12px; color: var(--op-muted, #6E6A65); margin-top: 2px; } .op-search-article__free, .op-sr-article__free { display: inline-block; font-family: var(--op-font-body, sans-serif); font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; background: var(--op-free, #2E7D4F); border-radius: 9px; padding: 1px 8px; vertical-align: 2px; margin-left: 6px; } .op-search__empty { font-family: var(--op-font-body, sans-serif); font-size: 14.5px; color: var(--op-muted, #6E6A65); padding: 18px 6px; text-align: center; } /* ---- footer ---- */ .op-search__footer { border-top: 1px solid var(--op-border, #E7E2DB); padding: 10px 18px; text-align: right; } .op-search__all { font-family: var(--op-font-body, sans-serif); font-size: 13px; font-weight: 700; color: var(--op-primary, #8E1A1A); text-decoration: none; } .op-search__all:hover { text-decoration: underline; } @media (max-width: 600px) { .op-search { padding: 4vh 10px 12px; } .op-search__issues { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---- page search bar (/anazitisi/) ---- */ .op-searchbar { position: relative; display: flex; align-items: center; gap: 12px; max-width: 720px; margin: 0 auto 34px; background: var(--op-surface, #fff); border: 1px solid var(--op-border, #E7E2DB); border-radius: 16px; padding: 8px 8px 8px 20px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.09); } .op-searchbar:focus-within { border-color: var(--op-gold, #C9A15C); box-shadow: 0 14px 44px rgba(142, 26, 26, 0.12); } .op-searchbar__glass { flex: 0 0 auto; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238E1A1A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7.5'/%3E%3Cpath d='M21 21l-4.5-4.5'/%3E%3C/svg%3E") no-repeat center / contain; } .op-searchbar__input { flex: 1 1 auto; border: none; outline: none; background: transparent; font-family: var(--op-font-body, sans-serif); font-size: 17px; color: var(--op-ink, #24211E); padding: 12px 4px; min-width: 0; } .op-searchbar__input::placeholder { color: var(--op-faint, #9E9C99); } .op-searchbar__btn { flex: 0 0 auto; border: none; cursor: pointer; font-family: var(--op-font-body, sans-serif); font-size: 14px; font-weight: 700; color: #fff; background: var(--op-primary, #8E1A1A); border-radius: 10px; padding: 13px 26px; transition: background 0.16s ease; } .op-searchbar__btn:hover { background: #741313; } .op-searchbar__drop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 5000; background: var(--op-surface, #fff); border: 1px solid var(--op-border, #E7E2DB); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18); padding: 14px 16px; max-height: 60vh; overflow-y: auto; text-align: left; } @media (max-width: 600px) { .op-searchbar { padding-left: 14px; } .op-searchbar__btn { padding: 12px 16px; } } /* ---- results page (/anazitisi/) ---- */ .op-sr__summary { font-family: var(--op-font-body, sans-serif); font-size: 15px; color: var(--op-muted, #6E6A65); margin: 0 0 22px; } .op-sr__h { font-family: var(--op-font-heading, Georgia, serif); font-size: 22px; color: var(--op-ink, #24211E); margin: 30px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--op-gold, #C9A15C); } .op-sr__issues { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; } .op-sr-issue { text-decoration: none; text-align: center; } .op-sr-issue__cover { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 8px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.13); transition: transform 0.15s ease; } .op-sr-issue:hover .op-sr-issue__cover { transform: translateY(-4px); } .op-sr-issue__mag { display: block; font-family: var(--op-font-body, sans-serif); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--op-primary, #8E1A1A); margin-top: 10px; } .op-sr-issue__label { display: block; font-family: var(--op-font-body, sans-serif); font-size: 12.5px; color: var(--op-muted, #6E6A65); } .op-sr__articles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .op-sr-article { display: block; text-decoration: none; background: var(--op-surface, #fff); border: 1px solid var(--op-border, #E7E2DB); border-left: 3px solid var(--op-primary, #8E1A1A); border-radius: 10px; padding: 16px 18px; transition: box-shadow 0.15s ease, transform 0.15s ease; } .op-sr-article:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08); transform: translateY(-2px); } .op-sr-article__title { display: block; font-family: var(--op-font-heading, Georgia, serif); font-size: 17px; color: var(--op-ink, #24211E); line-height: 1.35; } .op-sr-article__meta { display: block; font-family: var(--op-font-body, sans-serif); font-size: 12.5px; color: var(--op-muted, #6E6A65); margin-top: 5px; } .op-sr__empty { background: var(--op-gold-soft, #F1E5CC); border: 1px solid var(--op-gold, #C9A15C); border-radius: 10px; padding: 14px 18px; margin: 0 0 8px; } .op-sr__empty p { margin: 0; font-family: var(--op-font-body, sans-serif); font-size: 14px; color: #6B5320; } @media (max-width: 767px) { .op-sr__articles { grid-template-columns: 1fr; } } /* --- Article-card kicker row: column name + "Δωρεάν" pill on one line ------ Rendered by [kapaweb_card_kicker] inside the card's flex-column link; a single wrapper is the only way two "inline" pieces can share a line there (flex items blockify, so display:inline on siblings is ignored per spec). */ .op-card__kickrow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; } .op-card__kickrow .op-card__kicker { margin: 0; min-height: 0; } .op-card__kickrow .op-card__free { margin: 0; } /* R70 — a small padlock on articles locked for the current viewer (a free sample the member already owns shows nothing at all). */ .op-card__lock { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #F3EFE8; color: #8A6A2F; flex: 0 0 auto; } .op-card__lock svg { width: 13px; height: 13px; } .op-card__kickrow .op-card__lock { margin-left: auto; } .op-sr-article__title .op-card__lock { width: 18px; height: 18px; vertical-align: -4px; margin-left: 4px; } .op-sr-article__title .op-card__lock svg { width: 11px; height: 11px; } /* --- Article-card fixed zones (R12) ---------------------------------------- Every zone reserves a constant slot so all cards in a row line up no matter whether a column/free pill exists or how long the title/excerpt runs. */ .op-card div.oxy-shortcode.oxy-shortcode-105-107 { min-height: 27px; margin: 0 0 6px; } /* kicker/free zone, kept even when empty */ .op-card h3.op-card__title { min-height: calc(3 * 1.3em); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .op-card p.op-card__excerpt { min-height: calc(5 * 1.7em); line-height: 1.7; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; margin: 0 0 18px; } .op-card .op-card__meta { margin-top: auto; } /* --- Single-issue column chips ([kapaweb_issue_columns_filter]) ------------ Shown above the issue's article grid, library-style. */ nav.op-issuecols { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 30px; } nav.op-issuecols a { font-size: 12.5px; padding: 6px 12px; } /* Sidebar library buttons under the recent-issue loops */ a.hm-btn.op-side-btn { display: flex; width: 100%; justify-content: center; margin-top: 16px; font-size: 13.5px; } /* Homepage testimonials ("Τι λένε οι αναγνώστες μας", section 109-234): hidden for now per Nicolas 2026-08-13 — may return later; delete this rule to restore. The FAQ/pricing sections' backgrounds were swapped to keep the alternation. */ .oxy-container-109-234 { display: none; } /* --- Footer "Περιοδικά" column ([kapaweb_magazine_links]) ------------------ */ .op-maglinks { display: flex; flex-direction: column; gap: 10px; } /* #arthra anchor: land below the sticky header so the section title stays visible */ #arthra { scroll-margin-top: 110px; } /* --- Complianz cookie banner in OP brand colors (R16) ---------------------- */ .cmplz-cookiebanner { background-color: #fff !important; border: 1px solid #E6E2DB; border-radius: 12px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.14); font-family: var(--op-font-body, 'OP Sans', sans-serif) !important; } .cmplz-cookiebanner .cmplz-title, .cmplz-cookiebanner .cmplz-header { color: #1E1C1A !important; font-family: var(--op-font-heading, Georgia, serif) !important; } .cmplz-cookiebanner .cmplz-message, .cmplz-cookiebanner .cmplz-description, .cmplz-cookiebanner .cmplz-category .cmplz-title { color: #33302C !important; } .cmplz-cookiebanner .cmplz-btn { border-radius: 4px !important; font-weight: 600; } .cmplz-cookiebanner .cmplz-btn.cmplz-accept { background-color: var(--op-primary, #8E1A1A) !important; border-color: var(--op-primary, #8E1A1A) !important; color: #fff !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-deny { background-color: transparent !important; border: 1px solid #C9C4BD !important; color: #33302C !important; } .cmplz-cookiebanner .cmplz-btn.cmplz-view-preferences, .cmplz-cookiebanner .cmplz-btn.cmplz-save-preferences { background-color: transparent !important; border: 1px solid var(--op-gold, #C9A15C) !important; color: #6B5320 !important; } .cmplz-cookiebanner a, .cmplz-cookiebanner .cmplz-link { color: var(--op-primary, #8E1A1A) !important; } .cmplz-cookiebanner input[type=checkbox] { accent-color: var(--op-primary, #8E1A1A); } .cmplz-cookiebanner .cmplz-banner-checkbox .cmplz-label { background-color: var(--op-gold, #C9A15C) !important; } /* the collapsed consent tab ("Cookies") shown after the banner is dismissed */ #cmplz-manage-consent-container .cmplz-manage-consent, button.cmplz-manage-consent.cmplz-btn, a.cmplz-manage-consent.cmplz-btn { background-color: var(--op-primary, #8E1A1A) !important; border-color: var(--op-primary, #8E1A1A) !important; color: #fff !important; font-size: 12px !important; padding: 7px 14px !important; } /* Buttons inside page content (e.g. newsletter page nav): the content-area link color must not override the button text colors. */ .op-pagecontent a.hm-btn--primary, .op-pagecontent a.hm-btn--primary:hover { color: #fff; } .op-pagecontent a.hm-btn--outline { color: var(--op-primary, #8E1A1A); } /* --- Footer newsletter: Mailster form styled EXACTLY like the old static bar (values copied from the previous input/button computed styles). ------- */ .oxy-container-42-108 .mailster-form { margin: 0; } .oxy-container-42-108 .mailster-form-fields { display: flex; gap: 10px; align-items: center; } .oxy-container-42-108 .mailster-wrapper { margin: 0; } .oxy-container-42-108 .mailster-email-wrapper { flex: 1 1 auto; } .oxy-container-42-108 input.mailster-email { background: #fff; color: #1E1C1A; border: 0; border-radius: 4px; padding: 13px 16px; font-family: var(--op-font-body, 'OP Sans', sans-serif); font-size: 14px; min-width: 250px; width: 100%; height: 46px; box-sizing: border-box; } .oxy-container-42-108 .mailster-submit-wrapper { flex: 0 0 auto; } .oxy-container-42-108 input.submit-button { background: var(--op-gold, #C9A15C); color: #1E1C1A; border: 1px solid transparent; border-radius: 4px; padding: 14px 28px; font-family: var(--op-font-body, 'OP Sans', sans-serif); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; height: 46px; cursor: pointer; transition: background 0.15s ease; } .oxy-container-42-108 input.submit-button:hover { background: #d5af6e; } .oxy-container-42-108 .mailster-form-info { border-radius: 6px; font-family: var(--op-font-body, sans-serif); font-size: 13.5px; } .oxy-container-42-108 .mailster-form-info.error { background: rgba(0, 0, 0, 0.25); color: #fff; } .oxy-container-42-108 .mailster-form-info.success { background: rgba(255, 255, 255, 0.16); color: #fff; } .oxy-container-42-108 .mailster-form-info a { color: var(--op-gold, #C9A15C); } @media (max-width: 767px) { .oxy-container-42-108 .mailster-form-fields { flex-direction: column; align-items: stretch; } .oxy-container-42-108 input.mailster-email { min-width: 0; } } /* --- PMPro: every blue becomes the site's brand red (R14) ------------------ */ :root { --pmpro--color--accent: var(--op-primary, #8E1A1A) !important; } .pmpro, .pmpro_form, .pmpro_card { accent-color: var(--op-primary, #8E1A1A); } .pmpro input:focus-visible, .pmpro select:focus-visible, .pmpro textarea:focus-visible, .pmpro_form input:focus-visible { outline-color: var(--op-primary, #8E1A1A); } /* --- Burger-menu extras: «Γίνε Συνδρομητής» + «Σύνδεση» items live only in the mobile offcanvas panel (desktop keeps the header buttons). -------- */ @media (min-width: 1120px) { .breakdance-menu li.op-menu-extra { display: none; } } body.logged-in .breakdance-menu li.op-menu-extra { display: none; } .breakdance-menu li.op-menu-subscribe > a { color: var(--op-primary, #8E1A1A) !important; font-weight: 700 !important; } .breakdance-menu li.op-menu-login > a { color: var(--op-primary, #8E1A1A) !important; font-weight: 700 !important; } /* --- PMPro auto-username recipe (Checkout_Recipes): the username is derived from the email server-side, so the redundant row is not shown. -------- */ .pmpro_form_field.pmpro_form_field-username { display: none !important; } /* --- Checkout account layout: each field on its OWN full-width line — Email, then Password, then Confirm (Nicolas, 2026-08-14). PMPro wraps the two password fields in .pmpro_cols-2, so that wrapper is unstacked to a column too; the strong-passwords meter gets its own line below. */ #pmpro_user_fields .pmpro_form_fields { display: flex; flex-direction: column; gap: 12px; } #pmpro_user_fields .pmpro_form_fields > .pmpro_form_field { width: 100%; margin: 0; } #pmpro_user_fields .pmpro_form_fields > .pmpro_cols-2 { display: flex; flex-direction: column; gap: 12px; width: 100%; } #pmpro_user_fields .pmpro_form_fields > .pmpro_cols-2 > .pmpro_form_field { width: 100%; margin: 0; } #pmpro_user_fields .pmpro_form_field-bemail { order: -1; } #pmpro_user_fields .pmpro_form_fields > .pmpro_form-strong-password-container { order: 5; width: 100%; } #pmpro_user_fields .pmpro_form_fields > div:empty { display: none; } #pmpro_user_fields .pmpro_form_field input { width: 100%; max-width: 100%; box-sizing: border-box; } /* --- Checkout payment trust line + submit (Checkout_Recipes) --------------- */ .op-paytrust { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 14px; padding: 12px 14px; background: #F7F6F2; border: 1px solid #E6E2DB; border-radius: 8px; } /* #pmpro_form is a flex column whose sections carry CSS `order` (user fields 1, picker 2, submit 6) — without its own order the trust box floats to the TOP. 5 pins it visually right before the submit button (Nicolas, 2026-08-14). */ #pmpro_form > .op-paytrust { order: 5; } .op-paytrust__lock { width: 20px; height: 20px; flex: 0 0 auto; color: var(--op-free, #2e7d4f); margin-top: 1px; } .op-paytrust__text { font-family: var(--op-font-body, sans-serif); font-size: 13px; line-height: 1.55; color: #55514C; } .op-paytrust__stripe { display: inline-block; background: #635BFF; color: #fff; font-weight: 700; font-size: 11.5px; padding: 1px 7px 2px; border-radius: 4px; letter-spacing: 0.02em; } /* R66 — auto-renewal notice directly under the SSL line: the two boxes form one stacked block (the wrapper takes the trust box's flex `order` slot). */ .op-paytrust-row { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 14px; } #pmpro_form > .op-paytrust-row { order: 5; } /* R67 — billing block after the magazine picker (2), before trust (5)/submit (6); the State field is neither required (PHP filter) nor shown. */ #pmpro_form > #pmpro_billing_address_fields { order: 3; } #pmpro_form > #pmpro_payment_information_fields { order: 4; } .pmpro_form_field-bstate { display: none !important; } /* With the magazine picker (step "2") in between, the billing card is step 3; Premium has no picker heading, so the Oxygen counter's "2" stands. */ .op-pagecontent #pmpro_form:has(#kapaweb_magazine_choice legend .pmpro_form_heading) > #pmpro_billing_address_fields .pmpro_card_title::before { content: "3"; } /* Premium: the pricing card has no picker and every text line in it is hidden (the bar above says it all) — collapse the empty wrapper so only the discount-code line remains (Nicolas, 2026-09-23 «μείωσε αυτό το κενό»). */ #pmpro_form > #pmpro_pricing_fields:not(:has(#kapaweb_magazine_choice)) { padding-top: 16px !important; padding-bottom: 16px !important; } #pmpro_pricing_fields:not(:has(#kapaweb_magazine_choice)) > .pmpro_card_content { padding: 0 !important; } .op-paytrust-row .op-paytrust { margin: 0; } .op-paytrust__renew { color: #8A6A2F; } .op-paytrust__text strong { color: #2B2824; font-weight: 700; } @media (max-width: 767px) { .op-paytrust-row { margin: 4px 0 10px; } } /* Checkout submit — Nicolas's pick (2026-08-14): gold-outline pill. White, 1.5px gold border, gold-brown text, full pill radius, arrow in the value text; fills gold on hover. Auto width on desktop, full-width mobile. PMPro wraps the button in a classless that shrinks as a flex item of .pmpro_form_submit — stretch it or width:100% resolves to ~40px. */ .pmpro_form_submit > span { display: block; width: 100%; flex: 1 1 100%; } .pmpro_btn-submit-checkout { display: inline-block !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; padding: 13px 30px !important; background: #fff !important; color: #8A6A2F !important; font-size: 15.5px !important; font-weight: 700 !important; font-family: var(--op-font-body, sans-serif) !important; letter-spacing: 0.02em; border: 1.5px solid #C9A15C !important; border-radius: 999px !important; box-shadow: 0 3px 10px rgba(201, 161, 92, 0.22); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .pmpro_btn-submit-checkout:hover { background: #C9A15C !important; color: #fff !important; box-shadow: 0 6px 14px rgba(201, 161, 92, 0.35); transform: translateY(-1px); } @media (max-width: 767px) { .pmpro_btn-submit-checkout { display: block !important; width: 100% !important; } } /* The floating bar carries the package facts (title, name, scope, price), so ONLY those rows of the "Στοιχεία συνδρομής" card are hidden — the card itself stays because the magazine picker renders inside it (Nicolas, 2026-08-14). */ #pmpro_pricing_fields .pmpro_card_title, #pmpro_pricing_fields .pmpro_level_name_text, #pmpro_pricing_fields .pmpro_level_description_text, #pmpro_pricing_fields #pmpro_level_cost { display: none !important; } /* Premium (level 4) includes ALL magazines — nothing to pick, so the picker and "Αλλαγή πακέτου" go away. The card itself only survives when PMPro put the discount-code toggle in it (i.e. discount codes exist); otherwise it would be an empty white box (Nicolas, 2026-08-14). */ #pmpro_level-4 #kapaweb_magazine_choice, #pmpro_level-4 .kapaweb-magchoice__change { display: none !important; } #pmpro_level-4 #pmpro_pricing_fields:not(:has(#other_discount_code_p)) { display: none !important; } /* ONE box per section on checkout: .pmpro_section and .pmpro_form_fieldset each drew their own white/border/radius layer around the .pmpro_card, stacking 3 nested boxes — only the gold-top card keeps its chrome (Nicolas, 2026-08-14). */ body.pmpro-checkout .pmpro_section, body.pmpro-checkout .pmpro_form_fieldset { border: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } body.pmpro-checkout #pmpro_form { gap: 18px; } /* All checkout cards look the SAME: the pricing card drops its red 2px emphasis and takes the standard card chrome (thin line + gold top), and the magazine picker stops being a box-inside-a-box — the fieldset's own border/ padding collapse so only the outer card frames it (Nicolas, 2026-08-14). */ #pmpro_pricing_fields { border: 1px solid #E6E2DC !important; border-top: 3px solid #C9A15C !important; border-radius: 12px !important; padding: 22px 24px !important; /* Plain white like the other cards — kills the old cream gradient (linear-gradient 135deg #FBF6F0→#fff) that read as a yellow tint. */ background: #fff !important; } #pmpro_pricing_fields .kapaweb-magchoice { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; } #pmpro_pricing_fields .kapaweb-magchoice > .pmpro_card { padding: 0 !important; border: 0 !important; box-shadow: none !important; } /* The picker heading is the twin of «Πληροφορίες λογαριασμού»: same legend typography (from the global stylesheet) + the SAME numbered bubble, hardcoded to "2" (the account section is step 1). Flex centers bubble and text — the old vertical-align hack sat the number off the text middle. */ #pmpro_form legend .pmpro_form_heading { display: flex; align-items: center; } /* «Πληροφορίες λογαριασμού» is an h2.pmpro_card_title (not a legend heading) — flex centers its "1" bubble on the text middle, same as the picker's "2". */ #pmpro_form .pmpro_card > .pmpro_card_title { display: flex; align-items: center; } /* The picker h2 inherits the global μπορντό h2 look — pin it to the ink/19px legend style so it is identical to «Πληροφορίες λογαριασμού». */ #kapaweb_magazine_choice legend .pmpro_form_heading { color: var(--op-ink, #24211E) !important; font-size: 19px !important; } #kapaweb_magazine_choice legend .pmpro_form_heading::before { content: '2'; display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; width: 30px; height: 30px; color: #fff; font-family: var(--op-font-body, sans-serif); font-weight: 700; font-size: 15px; margin-right: 11px; background-color: var(--op-primary, #8E1A1A); border-radius: 50%; } /* The floating Complianz "Cookies" re-consent tab is VISIBLE — Nicolas hid it briefly on 2026-08-14 and then asked for it back the same day. */ /* --- Package bar pinned right BELOW the sticky header (Nicolas, 2026-09-22: "πάνω, ακριβώς κάτω από τον header, όχι στο footer") ------------------ Dark translucent strip: «Έχετε επιλέξει το πακέτο: "X"» + price + change link. The inline script in Checkout_Recipes::floating_package_bar sets --op-header-h (live header bottom) and --op-bar-h (bar height) so the bar sits flush under the header at every breakpoint and the content is pushed down by exactly its height. ---------------------------------- */ .op-checkoutbar { position: fixed; left: 0; right: 0; top: var(--op-header-h, 0px); z-index: 998; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; background: rgba(23, 15, 13, 0.88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #F5EDDE; /* Attention cues: gold bottom edge, warm red glow, one-time slide-down entrance. */ border-bottom: 2px solid var(--op-gold, #C9A15C); box-shadow: 0 10px 30px rgba(142, 26, 26, 0.3); animation: op-bar-in 0.45s ease-out; padding: 10px clamp(16px, 4vw, 40px); font-family: var(--op-font-body, sans-serif); } @keyframes op-bar-in { from { transform: translateY(-100%); opacity: 0.4; } to { transform: translateY(0); opacity: 1; } } /* The page-title band (first thing under the header) moves down by the bar's measured height, so the bar covers empty space instead of the title; the checkout section keeps its trimmed 28px (Nicolas, 2026-08-14). */ body.pmpro-checkout .sub-head.sub-head { margin-top: var(--op-bar-h, 0px); } body.pmpro-checkout .hm-sec { padding-top: 28px !important; } body.pmpro-checkout .pmpro { padding-top: 0 !important; padding-bottom: 32px !important; } /* --- Checkout mobile pack ------------------------------------------------- */ @media (max-width: 767px) { body.pmpro-checkout .hm-sec { padding-top: 12px !important; } /* Tidy two-row bar: package line centered on top, price + change link side by side beneath — no mid-word wrapping (Nicolas, 2026-08-14). */ .op-checkoutbar { padding: 9px 14px 11px; gap: 3px 16px; } .op-checkoutbar__text { flex: 1 1 100%; text-align: center; font-size: 13px; } .op-checkoutbar__text strong { font-size: 14.5px; } .op-checkoutbar__price { font-size: 16px; } .op-checkoutbar__price span { font-size: 11px; } .op-checkoutbar__change { font-size: 12px; padding: 2px 0; } body.pmpro-checkout .hm-sec { padding-top: 12px !important; } /* Cards breathe less on a phone. */ body.pmpro-checkout .pmpro_card { padding: 16px 14px !important; } #pmpro_pricing_fields { padding: 16px 14px !important; } /* Three covers side by side, scaled to the viewport. */ .kapaweb-magchoice__opts { gap: 10px; flex-wrap: nowrap; } .kapaweb-magchoice__opt.has-cover { flex: 1 1 0; min-width: 0; padding: 8px; } .kapaweb-magchoice__cover { width: 100%; } .op-paytrust { margin: 4px 0 10px; padding: 10px 12px; } .op-paytrust__text { font-size: 12px; } } .op-checkoutbar__text { font-size: 15px; color: #F5EDDE; min-width: 0; } .op-checkoutbar__text strong { font-family: var(--op-font-heading, Georgia, serif); font-size: 17px; font-weight: 700; color: #EFC97E; } .op-checkoutbar__scope { font-size: 12.5px; color: rgba(245, 237, 222, 0.65); } .op-checkoutbar__price { font-family: var(--op-font-heading, Georgia, serif); font-size: 20px; font-weight: 700; color: #fff; } .op-checkoutbar__price span { font-size: 12.5px; color: rgba(245, 237, 222, 0.7); font-weight: 400; font-family: var(--op-font-body, sans-serif); } /* !important: the global link color (brand red) would render this invisible on the red translucent bar. */ .op-checkoutbar__change { flex: 0 0 auto; border: 0; padding: 7px 2px; font-size: 13px; color: rgba(245, 237, 222, 0.9) !important; text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s ease; } .op-checkoutbar__change:hover { background: transparent; color: #fff !important; } /* Proration note (member switching packages): explains the reduced first payment / delayed downgrade next to the price. */ .op-checkoutbar__note { font-size: 12.5px; color: rgba(245, 237, 222, 0.75); font-style: italic; } @media (max-width: 767px) { .op-checkoutbar { gap: 10px; } .op-checkoutbar__text { font-size: 13.5px; } .op-checkoutbar__price { font-size: 16px; } .op-checkoutbar__note { flex: 1 1 100%; text-align: center; font-size: 11.5px; } } /* --- Magazine picker cards: latest-issue covers, blurred until selected ---- */ .kapaweb-magchoice__opts { display: flex; gap: 16px; flex-wrap: wrap; } .kapaweb-magchoice__opt.has-cover { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px; border: 2px solid #E6E2DB; border-radius: 10px; cursor: pointer; width: 150px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .kapaweb-magchoice__opt.has-cover input { position: absolute; opacity: 0; pointer-events: none; } .kapaweb-magchoice__cover { width: 118px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; filter: blur(1.5px) saturate(0.7); opacity: 0.85; transition: filter 0.2s ease, opacity 0.2s ease; } /* NOTE: the :has() and .is-checked variants are deliberately SEPARATE rules — an engine that drops a :has() selector list would otherwise drop the .is-checked fallback that shares it. */ .kapaweb-magchoice__opt.has-cover:has(input:checked) { border-color: var(--op-primary, #8E1A1A); box-shadow: 0 6px 18px rgba(142, 26, 26, 0.18); } .kapaweb-magchoice__opt.has-cover.is-checked { border-color: var(--op-primary, #8E1A1A); box-shadow: 0 6px 18px rgba(142, 26, 26, 0.18); } .kapaweb-magchoice__opt.has-cover:has(input:checked) .kapaweb-magchoice__cover { filter: none; opacity: 1; } .kapaweb-magchoice__opt.has-cover.is-checked .kapaweb-magchoice__cover { filter: none; opacity: 1; } .kapaweb-magchoice__opt.has-cover:has(input:checked) span { color: var(--op-primary, #8E1A1A); font-weight: 700; } .kapaweb-magchoice__opt.has-cover.is-checked span { color: var(--op-primary, #8E1A1A); font-weight: 700; } .kapaweb-magchoice__opt.has-cover.is-disabled { opacity: 0.45; cursor: not-allowed; } /* --- Desktop header: small round empty-avatar to the LEFT of the username -- */ @media (min-width: 1120px) { /* The chip's shortcode wrapper is a block inside the header flex row — its line box adds ~2.6px under the chip, sitting it 1.3px above the search icon's center. !important: Oxygen's selectors.css loads after us and would win the display back to block. */ .oxy-shortcode-31-122 { display: flex !important; align-items: center !important; } a.op-user-chip { display: inline-flex; align-items: center; gap: 7px; color: #4A4642; font-size: 13px; font-weight: 500; text-decoration: none; } a.op-user-chip::before { content: ''; width: 20px; height: 20px; border-radius: 50%; flex: 0 0 auto; overflow: hidden; background: url("data:image/svg+xml;utf8,") center / cover no-repeat; } } /* --- Mobile/tablet header (R14): logo left, EVERYTHING else packed hard right (search, plain login icon, small ΣΥΝΔΡΟΜΕΣ button, burger last). Applies all the way to 1119px — the desktop header only fits above that. */ @media (max-width: 1119px) { /* logo pushes the rest to the right edge; everything vertically centered. display:flex overrides the compiled desktop grid, which otherwise survives in the 768-1119 range and strands the icons mid-header. */ .oxy-container-31-113 { display: flex !important; justify-content: flex-end; align-items: center; gap: 10px; width: 100%; } .oxy-container-link-31-104 { margin-right: auto; } .oxy-container-31-112, .oxy-container-31-109, .oxy-container-31-111, .bde-wp-menu-31-115 { align-self: center; } .bde-wp-menu-31-115 .breakdance-menu-toggle { display: flex; align-items: center; } /* burger last in the row (kept in its default black — Nicolas 2026-08-13). Zero out the compiled desktop auto-margins that otherwise strand the icon cluster mid-header in the 768-1119 range. */ .bde-wp-menu-31-115 { order: 99; margin: 0 !important; } .oxy-container-31-112, .oxy-container-31-109, .oxy-container-31-111 { margin: 0 !important; } .bde-wp-menu-31-115 .breakdance-menu-toggle .breakdance-menu-toggle-icon { background: transparent; } /* Logged-out order: ΣΥΝΔΡΟΜΕΣ first, then a divider, then the icon cluster (login + burger) hard right — the actions container melts into the row */ .oxy-container-31-109 { display: contents; } a.oxy-text-link-31-108 { order: 1; } a.oxy-text-link-31-107 { order: 2; } /* Είσοδος + account: plain icon, no circle border — an elegant outline person */ a.oxy-text-link-31-107 { display: inline-flex !important; } a.oxy-text-link-31-107, a.op-user-chip { width: 34px; height: 34px; padding: 0 !important; border: 0; background: transparent; border-radius: 0; font-size: 0 !important; line-height: 0; display: inline-flex; justify-content: center; align-items: center; flex: 0 0 auto; color: #1E1C1A !important; } /* burger scaled to match the 24px login icon — soft thin lines, not heavy black bars */ .bde-wp-menu-31-115 .breakdance-menu-toggle { width: 24px; height: 24px; padding: 0; transform: translateY(-1px); } .bde-wp-menu-31-115 .breakdance-menu-toggle .breakdance-menu-toggle-icon { width: 20px; } .bde-wp-menu-31-115 .breakdance-menu-toggle .breakdance-menu-toggle-lines, .bde-wp-menu-31-115 .breakdance-menu-toggle .breakdance-menu-toggle-lines::before, .bde-wp-menu-31-115 .breakdance-menu-toggle .breakdance-menu-toggle-lines::after { height: 1.5px !important; border-radius: 2px; background-color: #4A4642 !important; } /* simple vertical divider before the icons, like the desktop header's */ a.oxy-text-link-31-107, body.logged-in a.op-user-chip { width: auto; border-left: 1px solid #E6E2DC; border-radius: 0; padding-left: 12px !important; } a.oxy-text-link-31-107::before, a.op-user-chip::before { content: ''; display: block; width: 24px; height: 24px; background-color: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* logged-out login: arrow-into-bracket "log in" glyph (Nicolas's pick #5). 1.5px strokes + #4A4642, the exact weight/color of the burger lines. */ a.oxy-text-link-31-107 { color: #4A4642 !important; } a.oxy-text-link-31-107::before { width: 26px; height: 26px; /* 1px optical lift: boxes measure dead-center vs ΣΥΝΔΡΟΜΕΣ (cy equal at 375/1000px) but the glyph reads a hair low next to the pill text. */ transform: translateY(-1px); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* Γίνε συνδρομητής: same primary button as desktop, just smaller, reading ΣΥΝΔΡΟΜΕΣ */ a.oxy-text-link-31-108 { height: 32px; padding: 0 12px !important; display: inline-flex; align-items: center; font-size: 0 !important; line-height: 0; flex: 0 0 auto; } a.oxy-text-link-31-108::after { content: 'ΣΥΝΔΡΟΜΕΣ'; font-size: 11.5px; font-weight: 600; letter-spacing: 0.05em; line-height: 1; } } /* --- Single-article template, arthro-template.jpg look (R13) --------------- Hero featured image at the top of the main column, above the body. */ img.oxy-image-112-126 { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; margin: 8px 0 26px; } /* Drop cap on the article's opening paragraph */ .oxy-text-112-112 > p:first-of-type::first-letter { float: left; font-family: var(--op-font-heading, Georgia, serif); font-size: 54px; line-height: 0.85; padding: 7px 10px 0 0; color: var(--op-primary, #8E1A1A); font-weight: 700; } /* "Δείτε ακόμη" rows: thumbnail left, title + issue right */ a.oxy-container-link-116-102 { display: grid !important; grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; } a.oxy-container-link-116-102 img.oxy-image-116-103 { grid-row: 1 / span 2; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; } /* --- Single-issue template: 20 / 60 / 20 three-column layout (R12) --------- Left = current cover + magazine info; middle = breadcrumb, issue header, flipbook CTA, filterable articles; right = the magazine's latest issues. */ section.oxy-container-100-109.oxy-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr); gap: 30px; align-items: start; } section.oxy-container-100-109 > .oxy-container { min-width: 0; } @media (max-width: 1023px) { section.oxy-container-100-109.oxy-container { grid-template-columns: 1fr; } .oxy-container-100-112 { order: -1; } /* main content first when stacked */ } /* --- "Δωρεάν" chip in the library articles explorer ------------------------ */ .op-explorer__chips a.op-chip--free { border-color: var(--op-free, #2e7d4f); color: var(--op-free, #2e7d4f); } .op-explorer__chips a.op-chip--free.is-active { background: var(--op-free, #2e7d4f); border-color: var(--op-free, #2e7d4f); color: #fff; } .op-explorer__chips a.op-chip--free.is-active .op-libbar__count { color: #e6f2ea; } /* --- Footer centered on mobile (Nicolas, 2026-08-14) ----------------------- */ @media (max-width: 767px) { /* Newsletter: intro stacked + centered, then email + button on ONE line. */ .op-newsletter .op-container { flex-direction: column; align-items: center; text-align: center; gap: 14px; } .op-newsletter .oxy-shortcode { width: 100%; } .op-newsletter .mailster-form { width: 100%; max-width: 420px; margin: 0 auto; } /* Mailster's own CSS stacks the fields (flex-direction: column) — force row. */ .op-newsletter .mailster-form-fields { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 8px; align-items: stretch; } .op-newsletter .mailster-email-wrapper { flex: 1 1 auto; min-width: 0; width: auto; } .op-newsletter .mailster-email-wrapper .input { width: 100%; box-sizing: border-box; } .op-newsletter .mailster-submit-wrapper { flex: 0 0 auto; width: auto; } .op-footer__brand, .op-newsletter__intro { text-align: center; } .op-footer__brand a.op-flogo { margin-left: auto; margin-right: auto; } .op-newsletter__intro { align-items: center; } .op-newsletter .oxy-shortcode { text-align: center; } .op-footer__col { align-items: center; text-align: center; } .op-footer__col .op-flink { text-align: center; } .op-footer__bottom .op-container { justify-content: center; } .op-footer__copy, .op-footer__legal { text-align: center; } } /* --- © line clips on very narrow phones (≤400px): the one-line copyright is wider than the viewport. Let both bottom lines wrap and shrink a step. */ @media (max-width: 400px) { .op-footer__bottom .op-container { flex-wrap: wrap; row-gap: 4px; padding-left: 12px; padding-right: 12px; } .op-footer__copy, .op-footer__legal { font-size: 12px; line-height: 1.6; white-space: normal; overflow-wrap: break-word; min-width: 0; max-width: 100%; } } /* --- Tighter hero → first-section gap, site-wide (Nicolas, 2026-08-14) ----- Every page template gives the section right after the .sub-head hero the default 64px top padding — too much, especially on phones. The checkout keeps its own tighter values (body.pmpro-checkout rules above). -------- */ body:not(.pmpro-checkout) main > .sub-head + .hm-sec { padding-top: 48px !important; } @media (max-width: 767px) { body:not(.pmpro-checkout) main > .sub-head + .hm-sec { padding-top: 28px !important; } } /* --- Bounced-session notice on /login/ (Limit Logins redirect) ------------- */ .op-bounced-notice { max-width: 720px; margin: 18px auto 0; padding: 13px 18px; background: #FBEFEA; border: 1px solid #E4C0B0; border-radius: 8px; color: #7C2D12; font-family: var(--op-font-body, sans-serif); font-size: 14px; text-align: center; } /* --- R22: article typography + layout (Nicolas, 2026-08-25) ---------------- (3) Justified article text with Greek hyphenation, (4) larger mobile type, (5) collapse the empty column kicker + tighter mobile spacing around the title, (6) issue template: wider section, 3 cards per row. .art ancestor prefix outranks selectors.css same-class rules without needing !important (search.css loads first). ------------------------- */ .art .art-content, .art .art-content p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } /* --- R29: η στοίχιση που επιλέγει ο συντάκτης πρέπει να νικά τη γενική ----- Το παραπάνω `.art .art-content p` (0,2,1) κέρδιζε τις κλάσεις του WordPress `.has-text-align-*` (0,1,0), οπότε το κεντράρισμα μιας παραγράφου από τον επεξεργαστή ΔΕΝ φαινόταν ποτέ (βρέθηκε live: το «***» στο άρθρο «Τήν ἀλήθεια μέ κάθε θυσία»). Τρεις κλάσεις (0,3,0) κερδίζουν, χωρίς !important. Οι επικεφαλίδες δεν στοιχίζονται πλήρως: το justify σε τίτλο τεντώνει άσχημα τις λέξεις. -------------------- */ .art .art-content .has-text-align-center { text-align: center; } .art .art-content .has-text-align-left { text-align: left; } .art .art-content .has-text-align-right { text-align: right; } .art .art-content h2, .art .art-content h3, .art .art-content h4, .art .art-content h5 { text-align: start; hyphens: manual; -webkit-hyphens: manual; } @media (max-width: 767px) { /* The paragraph-level rule in selectors.css outranks the container. */ .art .art-content p { font-size: 18.5px; line-height: 1.75; } } /* (5) Articles without a column: the empty kicker span kept 26px of phantom margin above the title. */ .art-kicker:empty { display: none; } @media (max-width: 767px) { .art .art-wrap { padding-top: 20px; } .art .op-breadcrumbs { margin-bottom: 12px; } .art .art-meta { margin-bottom: 18px; } .art .oxy-image-112-126 { margin-top: 4px; margin-bottom: 18px; } } /* (6) Issue template: let the content column grow and fit THREE article cards per row on desktop (was a 2-col grid in a 655px column). */ @media (min-width: 1120px) { .op-issue { max-width: 1400px !important; } .oxy-container-100-112 { flex: 1 1 auto !important; width: auto !important; min-width: 0; } .bde-post-loop-100-110 .bde-loop { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } /* --- R22.2b: dash-aware drop cap (see search.js) --------------------------- */ /* Mirror of the selectors.css drop-cap look, applied to the JS-built span. */ .kapaweb-dropcap { float: left; font-family: var(--op-font-heading, Georgia, serif); font-size: 58px; line-height: 0.8; padding: 6px 10px 0 0; color: var(--op-primary, #8E1A1A); white-space: nowrap; } /* The native ::first-letter must stand down when the span takes over. :first-of-type is REQUIRED for specificity: the drop-cap rule in selectors.css carries it (counts as a class) and would win otherwise, painting the first letter AFTER the span as a second drop cap. */ .art-content > p.kapaweb-dash-dropcap:first-of-type::first-letter { float: none; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; padding: 0; font-weight: inherit; } /* Long tokens (full dates) shrink so they do not swallow the column. */ .kapaweb-dropcap--long { font-size: 30px; line-height: 1.15; padding: 12px 10px 0 0; } /* --- R22.5b: uniform article cards (Nicolas, 2026-08-25) ------------------- Every card fills its grid row; the «Διαβάστε το άρθρο» link and the «Τεύχος …» meta pin to the bottom via an auto margin, so they sit at the same spot on every card. Title keeps minimal breathing room; the flexible gap lives between the excerpt and the footer. ---------------- */ .bde-loop-item .op-card { height: 100%; width: 100%; } .bde-loop-item .op-card > .oxy-container-link { display: flex; flex-direction: column; height: 100%; } .bde-loop-item .op-card__title { margin-top: 2px !important; margin-bottom: 6px !important; } .bde-loop-item .op-card__more { margin-top: auto !important; padding-top: 12px; } .bde-loop-item .op-card__meta { margin-top: 8px !important; } /* --- R25: personalised library split (Nicolas, 2026-08-27) ----------------- [kapaweb_library_split] headings around the two issue loops on the Βιβλιοθήκη page: «Από τη συνδρομή σας» → member's issues, then the «Λοιπά τεύχη» divider + upgrade CTA → the rest. All-new classes, no selectors.css collisions. ---------------------------------------------- */ .op-libsec { margin: 4px 0 18px; font-family: var(--op-font-body, sans-serif); } .op-libsec--rest { margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--op-border, #E7E2DB); } .op-libsec__h { margin: 0; } .op-libsec__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; } .op-libsec__sub { margin: 6px 0 0; color: #6E6A65; font-size: 15px; } .op-libsec--notice { padding: 12px 16px; border: 1px solid var(--op-border, #E7E2DB); border-radius: 8px; background: #FBF8F3; } .op-libsec--notice p { margin: 0; font-size: 15px; } .op-libsec--notice a { font-weight: 600; } @media (max-width: 767px) { .op-libsec--rest { margin-top: 32px; padding-top: 20px; } .op-libsec__row { align-items: center; } .op-libsec__cta { width: 100%; text-align: center; } } /* --- R27: no self-service downgrades -------------------------------------- On the pricing page a cheaper package's button is dimmed and labelled; on a checkout the member cannot complete, the form is replaced by an explanation. -------------------------------------------------------- */ a.op-plan-blocked { pointer-events: none; cursor: default; opacity: .45; filter: grayscale(100%); box-shadow: none !important; } .op-plan-note { display: block; margin-top: 8px; text-align: center; font-family: var(--op-font-body, sans-serif); font-size: 13px; color: #6E6A65; } body.kapaweb-no-downgrade #pmpro_form, body.kapaweb-no-downgrade .pmpro_form, body.kapaweb-no-downgrade .op-checkoutbar { display: none !important; } .op-nodowngrade { max-width: 680px; margin: 24px auto 40px; padding: 22px 24px; border: 1px solid var(--op-border, #E7E2DB); border-radius: 10px; background: #FBF8F3; font-family: var(--op-font-body, sans-serif); text-align: center; } .op-nodowngrade p { margin: 0 0 8px; font-size: 16px; line-height: 1.6; } .op-nodowngrade__sub { color: #6E6A65; font-size: 14.5px; } .op-nodowngrade .hm-btn { margin-top: 6px; } /* --- R26: issue-template article pager ([kapaweb_issue_pagination]) -------- 12 articles per page, driven by our own ?apage= arg. The wrapper is always printed so the AJAX handlers have a stable target; :empty keeps it out of the parent's flex gap on single-page issues. --------------- */ .op-pagerwrap:empty { display: none; } .op-pager { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 26px 0 4px; font-family: var(--op-font-body, sans-serif); } .op-pager__num, .op-pager__arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--op-border, #E7E2DB); background: #fff; color: #4A4642 !important; font-size: 14.5px; text-decoration: none; transition: border-color .15s ease, background .15s ease, color .15s ease; } .op-pager__num:hover, .op-pager__arrow:hover { border-color: var(--op-primary, #8E1A1A); color: var(--op-primary, #8E1A1A) !important; background: #fff; } .op-pager__num.is-active { background: var(--op-primary, #8E1A1A); border-color: var(--op-primary, #8E1A1A); color: #fff !important; font-weight: 600; cursor: default; } .op-pager__gap { padding: 0 2px; color: #9A948C; } @media (max-width: 767px) { .op-pager { gap: 5px; margin-top: 20px; } .op-pager__num, .op-pager__arrow { min-width: 34px; height: 34px; padding: 0 9px; font-size: 13.5px; } } /* --------------------------------------------------------------------- R42 — flipbook CTA: a miniature open book whose loose leaves lift on hover, so the banner unmistakably reads as "ξεφύλλισμα". The base .op-flipcta card styling (cream gradient, gold border, red spine bar) lives in the Oxygen selectors; these rules only add the new mini-book and win over the old round icon via the --book modifier specificity. ------------------------------------------------------------------- */ .op-flipcta.op-flipcta--book { align-items: center; } .op-flipcta.op-flipcta--book .op-flipbook-mini { position: relative; flex: 0 0 auto; width: 68px; height: 50px; } /* the spine */ .op-flipcta.op-flipcta--book .op-flipbook-mini::before { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 42px; margin-left: -2px; background: var(--op-primary, #8e1a1a); border-radius: 2px; z-index: 6; } /* the leaves: 1 = resting left page, 2 = resting right page, 3-4 = lifted */ .op-flipcta.op-flipcta--book .op-flipbook-mini i { position: absolute; bottom: 4px; width: 28px; height: 40px; background: linear-gradient(100deg, #ffffff 78%, var(--op-gold-soft, #f1e5cc) 100%); border: 1px solid var(--op-border, #e6e2dc); box-shadow: 0 2px 5px rgba(0, 0, 0, .10); transition: transform .45s ease; } .op-flipcta.op-flipcta--book .op-flipbook-mini i:nth-child(1) { left: 6px; border-radius: 6px 0 0 6px; background: linear-gradient(260deg, #ffffff 78%, var(--op-gold-soft, #f1e5cc) 100%); z-index: 1; } .op-flipcta.op-flipcta--book .op-flipbook-mini i:nth-child(n+2) { left: 34px; border-radius: 0 6px 6px 0; transform-origin: left bottom; } .op-flipcta.op-flipcta--book .op-flipbook-mini i:nth-child(2) { transform: rotate(0deg); z-index: 2; } .op-flipcta.op-flipcta--book .op-flipbook-mini i:nth-child(3) { transform: rotate(-14deg); z-index: 3; } .op-flipcta.op-flipcta--book .op-flipbook-mini i:nth-child(4) { transform: rotate(-30deg); z-index: 4; } .op-flipcta.op-flipcta--book:hover .op-flipbook-mini i:nth-child(3) { transform: rotate(-26deg); } .op-flipcta.op-flipcta--book:hover .op-flipbook-mini i:nth-child(4) { transform: rotate(-52deg); } @media (prefers-reduced-motion: reduce) { .op-flipcta.op-flipcta--book .op-flipbook-mini i { transition: none; } } /* keep the old round icon from ever rendering inside the new banner */ .op-flipcta.op-flipcta--book .op-flipcta__icon { display: none; } /* --------------------------------------------------------------------- R43 (2026-09-08) — wider desktop layouts for the issue + article templates, and a fully centered paywall box. The doubled class beats the equal-specificity rules compiled from the Oxygen selectors regardless of stylesheet order. ------------------------------------------------------------------- */ @media (min-width: 1200px) { .op-issue.op-issue { max-width: 1560px !important; } .art-wrap.art-wrap { max-width: 1320px !important; } } .kapaweb-paywall.kapaweb-paywall { text-align: center; } .kapaweb-paywall .kapaweb-paywall__lock { margin-left: auto; margin-right: auto; } .kapaweb-paywall .kapaweb-paywall__actions { justify-content: center; } /* Our own article-typography rules leak into the card on article pages: `.art .art-content p` justifies the paywall text (and the selectors.css `.art-content p` margins kill its auto-centering), while the R29 heading rule start-aligns the title. Heavier selectors re-center both. */ .art .art-content .kapaweb-paywall h3.kapaweb-paywall__title, .kapaweb-paywall .kapaweb-paywall__title { text-align: center; } .art .art-content .kapaweb-paywall p.kapaweb-paywall__text, .kapaweb-paywall .kapaweb-paywall__text { text-align: center; hyphens: manual; -webkit-hyphens: manual; margin-left: auto; margin-right: auto; } /* --------------------------------------------------------------------- R44 (2026-09-08) — four visual touches requested by Nicolas: 1. "Από το τεύχος" article-sidebar card: airier, translucent ground. 2. Its button becomes the gold-outline pill used on the PMPro checkout. 3. The blocked-checkout notice, when moved inside the page section by the footer script, breathes like page content. 4. The issue cover+description box, when moved under the title on stacked (mobile/tablet) layouts, takes the full width. ------------------------------------------------------------------- */ .art-issuebox.art-issuebox { background: rgba(246, 245, 241, 0.45); } .art-issuebox .hm-btn.hm-btn--primary { background: #fff; color: #8A6A2F; border: 1.5px solid #C9A15C; border-radius: 999px; box-shadow: 0 3px 10px rgba(201, 161, 92, 0.22); font-weight: 700; letter-spacing: 0.02em; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } .art-issuebox .hm-btn.hm-btn--primary:hover { background: #C9A15C; color: #fff; box-shadow: 0 6px 14px rgba(201, 161, 92, 0.35); transform: translateY(-1px); } .op-nodowngrade--insec { margin: 26px auto 6px; } .op-side--mobiletop { width: 100% !important; max-width: none !important; margin: 16px 0 4px; } /* --------------------------------------------------------------------- R48 (2026-09-09) — change-password form (member profile): the three password fields stack vertically at a comfortable width instead of the cramped three-column grid, and every field carries the PMPro eye toggle (markup cloned by search.js; PMPro's own CSS styles it). ------------------------------------------------------------------- */ #change-password .pmpro_form_fields, #resetpassform .pmpro_form_fields { display: block; } #change-password .pmpro_cols-2, #resetpassform .pmpro_cols-2 { display: block; grid-template-columns: 1fr; } #change-password .pmpro_form_field, #resetpassform .pmpro_form_field { width: 100%; max-width: 460px; margin: 0 0 20px; } #change-password .pmpro_form_field input, #resetpassform .pmpro_form_field input { width: 100%; box-sizing: border-box; } #change-password .pmpro_form_field-password-toggle, #resetpassform .pmpro_form_field-password-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; } #resetpassform .pmpro_form_hint, #resetpassform #pass-strength-result { max-width: 460px; } /* PMPro locks the submit until the new password is strong and both fields match, but paints the disabled button exactly like the live one — so a blocked click looks like a broken form. Make the locked state obvious, and pair it with the .op-cpw-hint line search.js keeps in sync. */ .pmpro_form input.pmpro_btn:disabled, .pmpro_form button.pmpro_btn:disabled { opacity: .5; cursor: not-allowed; } .op-cpw-hint { max-width: 460px; margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #6b6357; } .op-cpw-hint[hidden] { display: none; } /* --------------------------------------------------------------------- R51 (2026-09-15) — homepage hero: the real product photo (the three magazines + the site on a tablet, shot with clear floor space on the left) replaces the Meteora background. Light treatment: a soft cream wash keeps the left side readable, the text flips from white to ink, and the three floating cover images retire — the photo already shows the actual magazines. Doubled/descendant selectors outrank the equal-specificity rules in selectors.css, which loads after this file. ------------------------------------------------------------------- */ /* The desktop hero PHOTO is set in the BUILDER (hero section → Style → Background → Image, or the hm-hero selector) so Nicolas can swap it himself; this single-class rule is only a fallback so the hero never renders empty — builder styles load later and outrank it. Everything else (cover/position, the cream wash, text colors) stays ours below and applies to WHATEVER photo is chosen. */ .hm-hero { background-image: url(/wp-content/uploads/2026/09/op-hero-photo.webp); } .hm-hero.hm-hero { color: var(--op-ink, #24211E); position: relative; background-size: cover; background-position: 70% 74%; background-repeat: no-repeat; } @media (min-width: 1200px) { /* The readability wash is its own layer painted ABOVE the photo, so swapping the image in the builder never loses the text contrast. */ .hm-hero.hm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(247, 244, 239, .92) 0%, rgba(247, 244, 239, .72) 34%, rgba(247, 244, 239, .18) 58%, rgba(247, 244, 239, 0) 74%); pointer-events: none; } .hm-hero.hm-hero > * { position: relative; z-index: 1; } /* The right side of the frame belongs to the photo's magazines — the stats row tucks into the clear floor space on the left instead of stretching across (its two right cells were unreadable on top of the tablet). Width 1200 lines the text up flush with the header logo (the 1160 container sat 20px further in). */ .hm-hero .hm-hero__inner { max-width: 1200px; } .hm-hero .hm-stats { grid-template-columns: repeat(4, auto); justify-content: start; column-gap: 52px; max-width: 1200px; } } @media (min-width: 1200px) { /* A little more frame for the photo on large screens. */ .hm-hero .hm-hero__art { height: 430px; } } .hm-hero .hm-hero__title { color: var(--op-ink, #24211E); text-shadow: none; } .hm-hero .hm-hero__title-em { color: var(--op-primary, #8E1A1A); } .hm-hero .hm-hero__sub { color: rgba(36, 33, 30, .8); } .hm-hero .hm-btn--ghost { color: var(--op-ink, #24211E); border-color: rgba(36, 33, 30, .45); } .hm-hero .hm-btn--ghost:hover { color: var(--op-ink, #24211E); background-color: rgba(36, 33, 30, .08); } /* The photo shows the real magazines — the stacked cover cutouts retire, but their 370px container stays so the hero keeps its height. */ .hm-hero .hm-hero__cover { display: none; } .hm-hero .hm-stat { color: var(--op-ink, #24211E); border-top-color: rgba(36, 33, 30, .18); } .hm-hero .hm-stat__num { color: var(--op-primary, #8E1A1A); } .hm-hero .hm-stat__label { color: rgba(36, 33, 30, .72); } /* The page-title bands on every inner template (.sub-head): Nicolas's own edit of the product shot (white fade baked into the left side) on a LIGHT treatment — soft cream wash, ink titles — matching the homepage hero instead of the old dark Meteora band. */ .sub-head.sub-head { background: radial-gradient(ellipse 640px 210px at 50% 46%, rgba(247, 244, 239, .8) 0%, rgba(247, 244, 239, .42) 55%, rgba(247, 244, 239, 0) 100%), url(/wp-content/uploads/2026/09/op-hero-title.webp?v=3) center/cover no-repeat; } /* A soft light "spot" behind the centered text zone plus a cream halo on the letters keeps the titles crisp over the covers, without flattening the photo the way a full-band wash did. */ .sub-head .sub-head__title { color: var(--op-ink, #24211E); text-shadow: 0 0 16px rgba(247, 244, 239, .95), 0 0 5px rgba(247, 244, 239, .9); } .sub-head .sub-head__sub { color: rgba(36, 33, 30, .82); text-shadow: 0 0 14px rgba(247, 244, 239, .95), 0 0 4px rgba(247, 244, 239, .9); } /* R58 (2026-09-22) — a member's upgrade price on the packages cards reads "€36 σήμερα" with the renewal note under the figure (tokens rendered by class-magazine-lists; visitors keep the plain "/έτος"). */ /* Price row: the € sits flush against the figure on one baseline (the Oxygen span had vertical-align:top and inline whitespace between the parts). display:contents lifts "/έτος" and the note out of the suffix span so the note can drop to its own full-width line. */ .hm-plan__price.hm-plan__price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; /* flex ignores the card's text-align: keep the row centered */ column-gap: 3px; } .hm-plan__cur.hm-plan__cur { vertical-align: baseline; } .hm-plan__per.hm-plan__per { display: contents; } /* The member's upgrade line as a soft burgundy badge under the price. */ .hm-plan__per .op-price-note { display: block; flex-basis: 100%; margin-top: 12px; padding: 10px 12px; text-align: center; font-size: 13px; line-height: 1.45; font-weight: 400; color: #6b6357; background: rgba(142, 26, 26, .07); border: 1px solid rgba(142, 26, 26, .22); border-radius: 10px; } .hm-plan__per .op-price-note strong { display: block; font-size: 18px; font-weight: 800; color: var(--op-primary, #8E1A1A); margin-bottom: 3px; } /* R61 (2026-09-22) — site buttons read lighter: 500 instead of the Oxygen selector's 700 ("όχι τόσο bold", applied to all of them for consistency). */ .hm-btn.hm-btn { font-weight: 500; } @media (max-width: 1199px) { /* Narrow screens AND tablets (Nicolas, 2026-09-15, final pick): the photo leads ABOVE the copy — image and text as separate zones — on a warm ground, whole text block centered. Desktop's overlaid layout starts at 1200px, where the left floor space has real room. */ .hm-hero.hm-hero { background: linear-gradient(180deg, #F5EFE3 0%, var(--op-cream, #F7F4EF) 82%); } .hm-hero .hm-hero__inner { grid-template-columns: 1fr; text-align: center; padding-top: 42px; } /* Lightly framed: small side margins, soft corners, gentle shadow. */ .hm-hero.hm-hero::before { content: ""; display: block; width: calc(100% - 32px); height: 66vw; max-height: 470px; margin: 16px auto 0; background: url(/wp-content/uploads/2026/09/op-hero-photo-mobile.webp?v=2) center/cover no-repeat; border-radius: 12px; box-shadow: 0 10px 26px rgba(0, 0, 0, .13); } .hm-hero .hm-hero__sub { margin-left: auto; margin-right: auto; } .hm-hero .hm-hero__cta { justify-content: center; } .hm-hero .hm-hero__art { display: none; } } /* R73 — phone-only floating "back to top" (bottom right), site palette. */ .op-totop { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 900; width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--op-primary, #8E1A1A); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; opacity: 0.95; transition: transform 0.15s ease, opacity 0.15s ease; } .op-totop svg { width: 20px; height: 20px; } .op-totop:hover { opacity: 1; } .op-totop:active { transform: scale(0.94); } .op-totop[hidden] { display: none !important; } @media (min-width: 768px) { .op-totop { display: none !important; } } /* R79 — magazine YouTube promo card (issue page, left column; only when the magazine has a channel URL). */ .op-ytcard { display: block; margin-top: 16px; padding: 22px 20px 20px; border-radius: 14px; background: #8E1A1A; background-image: radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0) 55%); color: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14); } .op-ytcard__kicker { display: block; font-family: var(--op-font-body, sans-serif); font-size: 14px; color: #F3C26B; } .op-ytcard__name { display: block; font-family: var(--op-font-heading, serif); font-size: 26px; line-height: 1.1; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; margin: 4px 0 2px; color: #fff; } .op-ytcard__logo { display: block; width: 100%; max-width: 100%; height: auto; margin: 10px 0 8px; } .op-ytcard__on { display: block; font-family: var(--op-font-body, sans-serif); font-size: 18px; font-weight: 700; color: #F3C26B; margin-bottom: 14px; } .op-ytcard__row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .op-ytcard__icon { flex: 0 0 auto; width: 46px; height: 34px; } .op-ytcard__icon svg { width: 46px; height: 34px; display: block; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.25)); } .op-ytcard__text { margin: 0; font-family: var(--op-font-body, sans-serif); font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.88); } .op-ytcard__btn { display: block; text-align: center; background: #fff; color: #8E1A1A !important; font-family: var(--op-font-body, sans-serif); font-weight: 700; font-size: 13px; line-height: 1.3; padding: 11px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 999px; text-decoration: none !important; transition: transform 0.15s ease, box-shadow 0.15s ease; } .op-ytcard__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2); }