html.a11y-contrast {
--ctins-black: #000000;
--ctins-off-black: #000000;
--ctins-dark-secondary: #e9e9e9;
--bg-secondray: #ececec;
--bg-secondray-light: #0f0f0f;
--ctins-white: #000;
--ctins-off-white: #ffffff;
--accent: #054c7b;
--accent-hover: #6bffea;
--accent-focus: rgba(0, 255, 213, 0.35);
--ctins-bg-main: white;
--ctins-menu: #fff;
--ctins-accessibility-white: rgba(255, 255, 255, 0.95);
}
/*
* Buttons
*/
.ctins-a11y-fab{
position: fixed;
left: 1.25rem;
bottom: 30px;
display: flex;
flex-direction: column;
gap: 0.75rem;
z-index: 999999;
}
/* Κράτα ένα κοινό style για τα κουμπιά */
.ctins-a11y-fab .ctins-accessibility-toggle{
width: 2.75rem; /* 40px */
height: 2.75rem; /* 40px */
border-radius: 999rem;
display: flex;
align-items: center;
justify-content: center;
border: 0.125rem solid var(--accent);
background: var(--accent);
color: var(--ctins-white);
padding: 0;
cursor: pointer;
}
@media (max-width: 43.75rem){ /* 700px */
.ctins-a11y-fab{ bottom: 12vh; }
}
/* ===== Font scaling (global) =====
Το scale εφαρμόζεται σε rem-based typography.
*/
:root{
--ctins-font-scale: 1;
}
html{
font-size: calc(100% * var(--ctins-font-scale));
}
/* 3 επίπεδα: normal / md / lg */
html.a11y-font-md{ --ctins-font-scale: 1.10; }
html.a11y-font-lg{ --ctins-font-scale: 1.20; }
/*
===========================
A11Y CONTRAST MODE
ενεργοποιείται με:
===========================
*/
html.a11y-contrast .ins-footer__copy,
html.a11y-contrast .ctins-404__code,
html.a11y-contrast h1.ctins-404-title,
html.a11y-contrast .ctins-404__subtitle {
color: var(--ctins-accessibility-white) !important;
}
/* #ctins-accessibility-toggle {
position: fixed;
bottom: 6vh;
right: 30px;
width: 40px;
height: 40px;
border-radius: 20px;
text-align: center;
justify-content: center;
align-items: center;
display: flex !important;
border: 2px solid var(--accent);
background: var(--accent);
color: var(--ctins-white);
padding: 0px;
}
@media (max-width: 700px) {
#ctins-accessibility-toggle {
bottom: 12vh;
}
} */
/* html.a11y-contrast a {
color: var(--accent) !important;
} */
html.a11y-contrast #ctins-home-contact {
background: white !important;
}
html.a11y-contrast .ins-by-catalog-inner .products li.product .button {
background: var(--accent) !important;
}
html.a11y-contrast .tutor-card i,
html.a11y-contrast .woocommerce-Price-amount.amount,
html.a11y-contrast .woocommerce-Price-currencySymbol,
html.a11y-contrast .tutor-dashboard-content-inner span,
html.a11y-contrast .tutor-dashboard-content *,
html.a11y-contrast .woocommerce ul.products li.product .price {
color: var(--ctins-black) !important;
}
/* =========================================================
A11Y CONTRAST MODE ONLY
ενεργοποιείται ΜΟΝΟ όταν: html.a11y-contrast
Panel: #ctins-accessibility-landing-overlay
Button: #ctins-landing-cta-2
========================================================= */
html.a11y-contrast #ctins-accessibility-landing-overlay{
/* πιο “σταθερό” panel πάνω στην εικόνα */
max-width: 46rem;
width: min(94%, 46rem);
margin-inline: auto;
padding: 1.75rem 1.8rem;
border-radius: 1.4rem;
background: rgba(0, 0, 0, 0.92); /* solid enough for contrast */
border: 0.125rem solid rgba(255, 255, 255, 0.28);
box-shadow: 0 1.6rem 3.4rem rgba(0, 0, 0, 0.55);
/* καθαρότητα/σταθερότητα */
backdrop-filter: none;
-webkit-backdrop-filter: none;
color: #fff;
}
html.a11y-contrast #ctins-accessibility-landing-overlay h1,
html.a11y-contrast #ctins-accessibility-landing-overlay h2,
html.a11y-contrast #ctins-accessibility-landing-overlay h5{
margin: 0;
color: var(--ctins-accessibility-white) !important;
}
html.a11y-contrast #ctins-accessibility-landing-overlay p{
margin-top: 0.75rem;
line-height: 1.75;
opacity: 1;
}
/* CTA button σε contrast mode: να “γράφει” πάντα */
html.a11y-contrast #ctins-landing-cta-2{
border-radius: 999rem;
padding: 0.95rem 1.25rem;
font-weight: 700;
/* αν το κουμπί σου είναι ήδη πορτοκαλί από Elementor, αυτά δεν το χαλάνε */
border: 0.125rem solid rgba(255, 255, 255, 0.85);
box-shadow: 0 1rem 1.8rem rgba(0, 0, 0, 0.35);
}
/* Hover + Focus (keyboard) */
html.a11y-contrast #ctins-landing-cta-2:hover{
box-shadow: 0 1.2rem 2.2rem rgba(255, 255, 255, 0.4);
}
html.a11y-contrast #ctins-landing-cta-2:focus,
html.a11y-contrast #ctins-landing-cta-2:focus-visible{
outline: 0.25rem solid var(--ctins-accessibility-white);
outline-offset: 0.25rem;
}
/* Mobile */
@media (max-width: 48rem){
html.a11y-contrast #ctins-accessibility-landing-overlay{
width: min(96%, 46rem);
padding: 1.4rem 1.25rem;
border-radius: 1.2rem;
}
html.a11y-contrast #ctins-landing-cta-2{
width: 100%;
text-align: center;
}
}
/*
* menu items
*/
html.a11y-contrast li.menu-item a {
color: var(--ctins-accessibility-white) !important;
}
/* about */
html.a11y-contrast .elementor-widget-text-editor a {
color: var(--accent) !important;
}
/* =========================================================
Contact Form (αρχικής)
Panel: #ctins-accessibility-landing-overlay
Button: #ctins-landing-cta-2
========================================================= */
html.a11y-contrast #ctins-home-contact .ctins-contact-form {
background: var(--ctins-black) !important;
}
html.a11y-contrast #ctins-home-contact .ctins-contact-form label {
color: var(--ctins-accessibility-white) !important;
}
html.a11y-contrast #ctins-home-contact .ctins-contact-form a{
color: #fff;
text-decoration: underline;
text-decoration-thickness: 0.14rem;
text-underline-offset: 0.18rem;
}
html.a11y-contrast #ctins-home-contact{
display: grid;
justify-items: center;
}
html.a11y-contrast .site-primary-header-wrap.ast-container {
background: black !important;
}
/* about me page */
html.a11y-contrast .ctins-card-about h2,
html.a11y-contrast .ctins-card-about h3,
html.a11y-contrast .ctins-card-about p {
color: var(--ctins-accessibility-white) !important;
}
html.a11y-contrast.tutor-course-details-header .tutor-course-details-title,
html.a11y-contrast.tutor-course-details-header .tutor-course-details-title span,
html.a11y-contrast #tutor-course-details-tab-info h3.tutor-course-content-title {
color: #000 !important;
background: #fff;
padding: 0.75rem 1rem;
border-radius: 0.75rem;
display: inline-block;
}
/* Tutor */
html.a11y-contrast body.ctins-lesson .tutor-course-single-sidebar-wrapper.tutor-lesson-sidebar,
html.a11y-contrast body.ctins-lesson .tutor-accordion-item-body {
background: var(--ctins-black) !important;
}
html.a11y-contrast .tutor-dashboard.tutor-frontend-dashboard,
html.a11y-contrast body.ctins-lesson .tutor-course-topic-single-body {
background: var(--ctins-accessibility-white) !important;
}
html.a11y-contrast .tutor-color-primary-60,
html.a11y-contrast .tutor-topbar-mark-btn,
html.a11y-contrast .tutor-icon-times,
html.a11y-contrast div {
color: var(--ctins-black) !important;
}
html.a11y-contrast .tutor-topbar-mark-btn {
border-color: var(--ctins-black) !important;
}
html.a11y-contrast body.ctins-lesson .ctins-tutor-course-topic-item>a {
color: var(--ctins-black) !important;
background: var(--ctins-black) !important;
}
html.a11y-contrast body.ctins-lesson .tutor-accordion-item-header.is-active {
background: var(--ctins-accessibility-white) !important;
color: var(--ctins-black) !important;
}
html.a11y-contrast body.ctins-lesson .tutor-accordion-item-header {
background: var(--ctins-accessibility-white) !important;
color: var(--ctins-black) !important;
}
html.a11y-contrast .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-iconic-btn:hover {
background-color: var(--accent) !important;
color: var(--ctins-accessibility-white) !important;
}
html.a11y-contrast .tutor-course-single-content-wrapper #tutor-single-entry-content .tutor-course-topic-single-header .tutor-iconic-btn-secondary {
background-color: var(--ctins-black) !important;
}
html.a11y-contrast body.ctins-lesson .ctins-tutor-course-topic-item>a:hover {
background-color: var(--bg-secondray) !important;
color: var(--ctins-black) !important;
}
html.a11y-contrast .ast-separate-container .ast-article-single:not(.ast-related-post) {
background-color: var(--ctins-accessibility-white) !important;
}
/* sidecart */
html.a11y-contrast .xoo-wsc-empty-cart > span {
color: var(--ctins-accessibility-white) !important;
}
html.a11y-contrast .xoo-wsch-text,
html.a11y-contrast .xoo-wsch-basket,
html.a11y-contrast .xoo-wsc-smr-del.xoo-wsc-icon-trash,
html.a11y-contrast .xoo-wsc-header .xoo-wsch-close.xoo-wsch-icon {
color: var(--ctins-accessibility-white) !important;
}
html.a11y-contrast .shop_table.shop_table_responsive th,
html.a11y-contrast td.actions,
html.a11y-contrast .ctins-course-box.ctins-course-box--dark,
html.a11y-contrast .ctins-course-box.ctins-course-box--dark > h3,
html.a11y-contrast ul.sub-menu,
html.a11y-contrast .cart_totals h2 {
color: var(--ctins-accessibility-white) !important;
background: var(--ctins-black) !important;
}
html.a11y-contrast .checkout-button.button {
background: var(--accent) !important;
color: var(--ctins-accessibility-white) !important;
}
/* ===========================
A11Y CONTRAST MODE (Contact)
ενεργοποιείται με:
=========================== */
html.a11y-contrast #ctins-contact-grid{
background: var(--ctins-bg-main);
color: var(--ctins-black);
}
/* ΜΗΝ κάνεις "όλα λευκά !important" σε a11y mode — σπάει headings */
html.a11y-contrast #ctins-contact-grid,
html.a11y-contrast #ctins-contact-grid *{
color: var(--accent) !important;
}
/* Links */
html.a11y-contrast #ctins-contact-grid a,
html.a11y-contrast #ctins-contact-grid a *{
color: var(--accent) !important;
text-decoration: underline;
text-underline-offset: 0.2em;
}
html.a11y-contrast #ctins-contact-grid a:hover{
color: var(--accent-hover) !important;
}
/* Focus visible (keyboard) */
html.a11y-contrast #ctins-contact-grid a:focus-visible,
html.a11y-contrast #ctins-contact-grid button:focus-visible,
html.a11y-contrast #ctins-contact-grid input:focus-visible,
html.a11y-contrast #ctins-contact-grid textarea:focus-visible,
html.a11y-contrast #ctins-contact-grid select:focus-visible{
outline: 0.1875rem solid var(--accent-focus);
outline-offset: 0.1875rem;
}
/* Frame */
html.a11y-contrast #ctins-contact-grid-col-form .ctins-contact-form-frame{
background: var(--ctins-black);
border: 0.0625rem solid rgba(0,0,0,0.18);
backdrop-filter: none; /* σε high-contrast καλύτερα καθαρό */
}
/* Corner brackets */
html.a11y-contrast #ctins-contact-grid-col-form .ctins-contact-form-frame::before,
html.a11y-contrast #ctins-contact-grid-col-form .ctins-contact-form-frame::after{
border-color: var(--accent);
opacity: 1;
}
/* Labels */
html.a11y-contrast #ctins-contact-grid-col-form .wpcf7 label{
color: var(--ctins-accessibility-white) !important;
opacity: 1;
}
/* Inputs */
html.a11y-contrast #ctins-contact-grid-col-form .wpcf7 input[type="text"],
html.a11y-contrast #ctins-contact-grid-col-form .wpcf7 input[type="email"],
html.a11y-contrast #ctins-contact-grid-col-form .wpcf7 input[type="tel"],
html.a11y-contrast #ctins-contact-grid-col-form .wpcf7 textarea{
background: #fff;
color: var(--ctins-accessibility-white) !important;
border: 0.0625rem solid rgba(0,0,0,0.25);
}
/* Placeholder contrast */
html.a11y-contrast #ctins-contact-grid-col-form .wpcf7 input::placeholder,
html.a11y-contrast #ctins-contact-grid-col-form .wpcf7 textarea::placeholder{
color: rgba(0,0,0,0.6);
}
/* Input focus */
html.a11y-contrast #ctins-contact-grid-col-form .wpcf7 input:focus,
html.a11y-contrast #ctins-contact-grid-col-form .wpcf7 textarea:focus{
border-color: var(--accent);
box-shadow: 0 0 0 0.1875rem var(--accent-focus);
}
/* Submit button */
html.a11y-contrast #ctins-contact-grid-col-form .wpcf7 input[type="submit"]{
background: var(--accent) !important;
color: var(--ctins-off-white) !important;
border: 0.0625rem solid rgba(0,0,0,0.15);
}
html.a11y-contrast #ctins-contact-grid-col-form .wpcf7 input[type="submit"]:hover{
background: var(--accent) !important;
color: var(--ctins-accessibility-white) !important;
}
html.a11y-contrast #ctins-contact-grid-col-form .wpcf7 input[type="submit"]:focus-visible{
outline: 0.1875rem solid var(--accent-focus);
outline-offset: 0.1875rem;
}
/* CF7 messages */
html.a11y-contrast #ctins-contact-grid-col-form .wpcf7 .wpcf7-response-output{
border-radius: 0.85rem;
background: #fff;
color: var(--ctins-accessibility-white) !important;
border: 0.0625rem solid rgba(0,0,0,0.2);
}
/* Typography spacing (κρατάμε τα δικά σου) */
html.a11y-contrast #ctins-contact-grid p,
html.a11y-contrast #ctins-contact-grid label{
margin-bottom: 1.2rem !important;
}
html.a11y-contrast #ctins-contact-grid br{
display: none;
}
/* cart page */
html.a11y-contrast .cart_totals {
border-color: var(--ctins-black) !important;
}
/* A11Y CONTRAST — ONLY Checkout */
html.a11y-contrast body.woocommerce-checkout{
background: var(--ctins-bg-main);
color: var(--ctins-off-white);
}
/* Headings / titles */
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout h1,
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout h2,
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout h3,
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout h4,
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout label{
color: var(--ctins-off-black) !important; /* #000 από τα vars σου */
}
/* Main form fields */
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout input[type="text"],
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout input[type="email"],
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout input[type="tel"],
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout select,
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout textarea{
background: var(--ctins-menu) !important; /* #fff */
color: var(--ctins-off-black) !important; /* #000 */
border: 0.0625rem solid var(--ctins-off-black) !important;
border-radius: 0.75rem;
}
/* Focus: καθαρό περίγραμμα για keyboard users */
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout *:focus-visible{
outline: 0.1875rem solid var(--accent) !important;
outline-offset: 0.125rem;
}
/* Coupon/info notices (να μη “χάνονται”) */
html.a11y-contrast body.woocommerce-checkout .woocommerce-info,
html.a11y-contrast body.woocommerce-checkout .woocommerce-message,
html.a11y-contrast body.woocommerce-checkout .woocommerce-error{
background: #fff !important;
color: #000 !important;
border-color: #000 !important;
}
html.a11y-contrast body.woocommerce-checkout .woocommerce-info a{
color: var(--accent) !important;
text-decoration: underline;
}
/* Order review box + table */
html.a11y-contrast body.woocommerce-checkout #order_review,
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout-review-order{
background: #fff !important;
color: #000 !important;
border: 0.0625rem solid #000 !important;
border-radius: 12px;
}
html.a11y-contrast form #order_review_heading:not(.elementor-widget-woocommerce-checkout-page #order_review_heading) {
border-color: var(--ctins-black) !important;
border-radius: 10px;
}
html.a11y-contrast body.woocommerce-checkout #order_review table,
html.a11y-contrast body.woocommerce-checkout #order_review th,
html.a11y-contrast body.woocommerce-checkout #order_review td{
background: transparent !important;
color: #000 !important;
border-color: #000 !important;
}
/* Payment box (π.χ. viva/bacs) */
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout #payment{
background: #fff !important;
color: var(--ctins-black) !important;
border: 0.0625rem solid var(--ctins-black) !important;
border-radius: 10px;
padding: 15px;
margin-bottom: 1rem !important;
}
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout #payment label,
html.a11y-contrast body.woocommerce-checkout .woocommerce-checkout #payment .payment_box{
color: #000 !important;
}
/* Terms text */
html.a11y-contrast body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text{
color: #000 !important;
}
/* Place order button */
html.a11y-contrast body.woocommerce-checkout #place_order{
background: var(--accent) !important;
color: #fff !important;
border-radius: 0.9rem;
border: 0.0625rem solid #000 !important;
}
html.a11y-contrast body.woocommerce-checkout #place_order:hover{
background: var(--accent-hover) !important;
color: #000 !important;
}
/* regiter */
html.a11y-contrast #tutor-registration-wrap,
html.a11y-contrast #tutor-registration-wrap label,
html.a11y-contrast #tutor-registration-wrap div,
html.a11y-contrast .tutor-login-form-wrapper a {
color: var(--ctins-accessibility-white) !important;
}
html.a11y-contrast .tutor-dashboard-content-inner .tutor-card {
background: var(--ctins-dark-secondary) !important;
color: var(--ctins-black) !important;
}
/* sign in */
html.a11y-contrast #ctins-login div {
color: var(--ctins-off-white) !important;
}
html.a11y-contrast #ctins-login-logo {
filter: invert(0);
}
/* thank you page */
html.a11y-contrast .woocommerce-order-details__title,
html.a11y-contrast .woocommerce-customer-details > h2 {
color: var(--ctins-menu) !important;
}
html.a11y-contrast .woocommerce-table--order-details tr,
html.a11y-contrast .woocommerce-table--order-details,
html.a11y-contrast .woocommerce-customer-details {
border: 1px solid black !important;
}
html.a11y-contrast .woocommerce-table--order-details thead th,
html.a11y-contrast .woocommerce-table--order-details tbody td,
html.a11y-contrast .woocommerce-table--order-details tfoot th,
html.a11y-contrast .woocommerce-table--order-details tfoot td {
color: var(--ctins-black) !important;
background-color: var(--ctins-off-white) !important;
}
.ctins-accessibility-toggle{
position: relative;
}
.ctins-accessibility-toggle::after{
content: attr(data-a11y-label);
position: absolute;
left: calc(100% + 0.6rem);
top: 50%;
transform: translateY(-50%);
white-space: nowrap;
font-size: 0.9rem;
font-weight: 600;
padding: 0.45rem 0.65rem;
border-radius: 0.75rem;
background: rgba(0,0,0,0.85);
color: #fff;
border: 0.125rem solid rgba(255,255,255,0.12);
box-shadow: 0 0.8rem 1.6rem rgba(0,0,0,0.35);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease;
}
.ctins-accessibility-toggle:hover::after,
.ctins-accessibility-toggle:focus-visible::after{
opacity: 1;
}
html.a11y-contrast [data-a11y-contrast-toggle],
html.a11y-font-md [data-a11y-font-toggle],
html.a11y-font-lg [data-a11y-font-toggle]{
box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem var(--accent);
transform: translateY(-0.05rem);
}
.ctins-accessibility-toggle:focus-visible{
outline: 0.2rem solid #fff;
outline-offset: 0.2rem;
}