@import url("https://fonts.googleapis.com/css2?family=Commissioner:wght@400;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap"); /* ========================================================================== SMARTHOST — WHMCS Client Area Child theme του Twenty-One (Bootstrap 4.5.3, jQuery 1.12.4, Font Awesome 5.10.1). Ίδια παλέτα και ίδιες γραμματοσειρές με το smarthost.gr, ώστε ο πελάτης που πατά «Σύνδεση πελάτη» να μη νιώθει ότι άλλαξε εταιρεία. ΠΡΟΣΟΧΗ ΣΤΗ ΓΡΑΜΜΑΤΟΣΕΙΡΑ: το IBM Plex Mono ΔΕΝ έχει ελληνικό subset. Δεν χρησιμοποιείται πουθενά· τα στοιχισμένα ψηφία σε ποσά και τιμολόγια βγαίνουν με font-variant-numeric: tabular-nums πάνω στο IBM Plex Sans. ========================================================================== */ :root { /* --- Grounds -------------------------------------------------------- */ --sh-navy-900: #03071E; /* topbar, navbar, footer */ --sh-navy-800: #080D24; /* σώμα σελίδας */ --sh-navy-700: #101733; /* ανασηκωμένη επιφάνεια */ /* --- Κείμενο -------------------------------------------------------- */ /* Καθαρό λευκό παντού. Κανένα γκρι μπροστά από σκούρο φόντο — ούτε στα δευτερεύοντα. Και τα δύο tokens δίνουν 19,9:1 πάνω στο navy-900, και πουθενά στο θέμα δεν πέφτουν κάτω από 17,4:1. Το `--sh-ink-muted` ΔΕΝ καταργήθηκε, γιατί το χρησιμοποιούν 29 σημεία και το @media print το ξαναδηλώνει σκούρο για το χαρτί. Αν κάποτε θελήσεις πάλι διαβάθμιση, αλλάζεις μόνο αυτή τη μία γραμμή. */ --sh-ink: #FFFFFF; --sh-ink-muted: #FFFFFF; /* --- Ενέργεια. Ονομάζεται κατά ρόλο, όχι κατά απόχρωση -------------- */ --sh-primary: #03A880; /* 6,6:1 σε navy */ --sh-primary-hover: #04C294; /* 8,7:1 σε navy */ --sh-primary-ink: #027053; /* 6,1:1 σε λευκό — για print/light */ /* --- Έμφαση, με μέτρο ----------------------------------------------- */ --sh-accent: #FAA307; /* 9,8:1 σε navy */ /* --- Επιφάνειες & περιγράμματα -------------------------------------- */ --sh-card: rgba(255, 255, 255, 0.05); --sh-border: rgba(255, 255, 255, 0.09); --sh-hover: rgba(255, 255, 255, 0.03); /* Περίγραμμα για ΕΝΕΡΓΑ στοιχεία (κουμπιά, πεδία). Το --sh-border είναι διακοσμητικό και δίνει 1,3:1 — το WCAG 1.4.11 θέλει 3:1 για ό,τι πατιέται. Αυτό δίνει 3,5:1 πάνω στο navy. */ --sh-border-strong: rgba(255, 255, 255, 0.38); /* --- Σημασιολογικά, στις εκδοχές για ΣΚΟΥΡΟ φόντο ------------------- */ --sh-ok: #12B76A; /* 7,6:1 */ --sh-warn: #F79009; /* 8,5:1 */ --sh-error: #FF8A8A; /* 8,8:1 */ --sh-info: #6FE8C8; /* 13,4:1 */ /* --- Γεωμετρία & τυπογραφία ----------------------------------------- */ --sh-radius: 12px; --sh-radius-sm: 8px; --sh-font-display: "Commissioner", "Helvetica Neue", Arial, sans-serif; --sh-font-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; --sh-ease: cubic-bezier(.4, 0, .2, 1); } /* -------------------------------------------------------------------------- ΑΝ ΠΡΟΤΙΜΗΣΕΙΣ ΦΩΤΕΙΝΟ ΘΕΜΑ Ένα πάνελ χρεώσεων είναι γεμάτο πίνακες, τιμολόγια και σελίδες από modules τρίτων που υποθέτουν λευκό φόντο. Αν το σκούρο σου δημιουργήσει προβλήματα, αντικατέστησε το :root παραπάνω με αυτό εδώ και δεν χρειάζεται τίποτα άλλο: --sh-navy-900: #FFFFFF; --sh-navy-800: #F4F6FA; --sh-navy-700: #FFFFFF; --sh-ink: #0B1020; --sh-ink-muted: #5A6478; --sh-primary: #027053; --sh-primary-hover: #03A880; --sh-card: #FFFFFF; --sh-border: #DCE2EC; --sh-hover: rgba(3,168,128,.05); --sh-error: #B3261E; --sh-ok: #0E8F52; --sh-info: #027053; -------------------------------------------------------------------------- */ /* ========================================================================== 1. ΒΑΣΕΙΣ ========================================================================== */ body, body.primary-bg-color { background-color: var(--sh-navy-800); color: var(--sh-ink); font-family: var(--sh-font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .card-title, .h1, .h2, .h3, .h4, .h5 { font-family: var(--sh-font-display); color: #FFFFFF; letter-spacing: -.01em; } a { color: var(--sh-primary); } a:hover, a:focus { color: var(--sh-primary-hover); } hr { border-top-color: var(--sh-border); } /* Οτιδήποτε με ποσά, ημερομηνίες ή αριθμούς τιμολογίων στοιχίζεται σωστά */ .table, .amount, .price, .invoice-amount, .tile .stat, .stat { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* Ορατό focus — απαραίτητο σε πάνελ που χειρίζεται χρήματα */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--sh-primary); outline-offset: 2px; box-shadow: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ========================================================================== 2. TOPBAR & NAVBAR ========================================================================== */ .topbar { background-color: var(--sh-navy-900); border-bottom: 1px solid var(--sh-border); color: var(--sh-ink-muted); } .topbar a, .topbar .btn { color: var(--sh-ink-muted); } .topbar a:hover, .topbar .btn:hover { color: var(--sh-primary); } .navbar, .navbar-light, .main-navbar-wrapper { background-color: var(--sh-navy-900); border-bottom: 1px solid var(--sh-border); } .navbar-brand { padding: 6px 0; } .navbar-brand .logo-img { max-height: 42px; width: auto; } /* Τα κύρια στοιχεία του μενού: καθαρό λευκό, όπως και τα υπομενού */ .navbar-light .navbar-nav .nav-link, .navbar .nav-link, .navbar .navbar-nav > li > a { color: #FFFFFF; /* 19,9:1 πάνω στο navy-900 */ font-weight: 500; transition: color .2s var(--sh-ease); } /* Το βελάκι του dropdown δίπλα στο «Κατάστημα» */ .navbar .nav-link .caret, .navbar .dropdown-toggle::after { color: #FFFFFF; } .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .active > .nav-link, .navbar-light .navbar-nav .nav-link.active { color: var(--sh-primary); } .navbar-light .navbar-toggler { border-color: var(--sh-border); color: var(--sh-ink); } /* Το μετρητή καλαθιού στην μπάρα */ .cart-btn .badge, .badge-info { background-color: var(--sh-primary); color: var(--sh-navy-900); } /* Αναζήτηση στην μπάρα */ .input-group.search .form-control, .input-group .form-control { background-color: var(--sh-card); border-color: var(--sh-border); color: var(--sh-ink); } .input-group-text { background-color: var(--sh-card); border-color: var(--sh-border); color: var(--sh-ink-muted); } /* Dropdowns */ .dropdown-menu { background-color: var(--sh-navy-700); border: 1px solid var(--sh-border); border-radius: var(--sh-radius-sm); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .6); } /* Τα στοιχεία του μενού είναι ΛΕΥΚΑ. Το Bootstrap τα δηλώνει `#212529` — σκούρο γκρι, φτιαγμένο για λευκό dropdown. Πάνω στο navy έβγαινε 1,6:1, δηλαδή πρακτικά αόρατο. Χρειάζεται !important γιατί το `.dropdown-item` του Bootstrap έχει ίδια specificity και το `
  • ` που τυλίγει το `` μπερδεύει τη σειρά. */ .dropdown-menu .dropdown-item, .dropdown-menu li.dropdown-item > a, .navbar .dropdown-menu a, .navbar-nav .dropdown-menu .dropdown-item, .dropdown-item { color: #FFFFFF !important; /* 17,6:1 πάνω στο navy-700 */ font-weight: 500; } .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus, .dropdown-menu li.dropdown-item > a:hover, .navbar .dropdown-menu a:hover, .navbar .dropdown-menu a:focus, .dropdown-item:hover, .dropdown-item:focus { background-color: var(--sh-hover) !important; color: var(--sh-primary-hover) !important; /* 7,7:1 */ } /* Η τρέχουσα επιλογή: το Bootstrap τη βάφει `#369` (μπλε) */ .dropdown-menu .dropdown-item.active, .dropdown-menu .dropdown-item:active, .dropdown-item.active, .dropdown-item:active { background-color: var(--sh-primary) !important; color: var(--sh-navy-900) !important; /* 6,6:1 */ } .dropdown-divider, .nav-divider { border-top-color: var(--sh-border); } .dropdown-header { color: var(--sh-ink-muted); } /* ========================================================================== 3. BREADCRUMB & ΣΩΜΑ ========================================================================== */ .master-breadcrumb { background-color: var(--sh-navy-900); border-bottom: 1px solid var(--sh-border); } .master-breadcrumb .breadcrumb { background: transparent; margin-bottom: 0; } .breadcrumb-item, .breadcrumb-item a { color: var(--sh-ink-muted); } .breadcrumb-item a:hover { color: var(--sh-primary); } .breadcrumb-item.active { color: var(--sh-ink); } .breadcrumb-item + .breadcrumb-item::before { color: var(--sh-ink-muted); } #main-body { background-color: var(--sh-navy-800); padding-top: 32px; padding-bottom: 56px; min-height: 60vh; } .primary-content { color: var(--sh-ink); } .section-title, .page-header { border-bottom-color: var(--sh-border); color: #FFFFFF; } /* ========================================================================== 4. SIDEBAR ========================================================================== */ .sidebar .list-group, .sidebar .card, .sidebar .panel { background-color: var(--sh-card); border: 1px solid var(--sh-border); border-radius: var(--sh-radius); overflow: hidden; } .sidebar .list-group-item { background-color: transparent; border-color: var(--sh-border); color: var(--sh-ink); } .sidebar .list-group-item:hover { background-color: var(--sh-hover); color: var(--sh-primary); } .sidebar .list-group-item.active, .sidebar .list-group-item.active:hover { background-color: var(--sh-primary); border-color: var(--sh-primary); color: var(--sh-navy-900); font-weight: 600; } .sidebar .card-header, .sidebar .panel-heading { background-color: var(--sh-navy-700); border-bottom: 1px solid var(--sh-border); color: #FFFFFF; font-family: var(--sh-font-display); font-weight: 600; } /* ========================================================================== 5. ΚΑΡΤΕΣ ========================================================================== */ .card, .panel { background-color: var(--sh-card); border: 1px solid var(--sh-border); border-radius: var(--sh-radius); color: var(--sh-ink); } .card-header, .panel-heading { background-color: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--sh-border); color: #FFFFFF; } .card-header .card-title { font-size: 17px; font-weight: 600; margin: 0; } .card-footer, .panel-footer { background-color: rgba(255, 255, 255, .03); border-top: 1px solid var(--sh-border); color: var(--sh-ink-muted); } /* Οι έγχρωμες λωρίδες των καρτών της αρχικής, στα δικά μας χρώματα */ .card-accent-blue { border-top: 3px solid var(--sh-primary); } .card-accent-green { border-top: 3px solid var(--sh-ok); } .card-accent-red { border-top: 3px solid var(--sh-error); } .card-accent-gold { border-top: 3px solid var(--sh-accent); } .card-accent-orange { border-top: 3px solid var(--sh-warn); } /* ========================================================================== 6. TILES — τα τέσσερα πλακίδια στατιστικών της αρχικής ========================================================================== */ .tiles .tile, .tile { background-color: var(--sh-card); border: 1px solid var(--sh-border); border-radius: var(--sh-radius); color: var(--sh-ink); transition: border-color .25s var(--sh-ease), transform .25s var(--sh-ease); } .tiles .tile:hover { border-color: rgba(3, 168, 128, .35); transform: translateY(-2px); } .tile .stat { font-family: var(--sh-font-display); font-weight: 700; color: #FFFFFF; } .tile .title { color: var(--sh-ink-muted); font-size: 13px; letter-spacing: .02em; } .tile.highlight, .tile .highlight { color: var(--sh-primary); } /* Το Twenty-One χρωματίζει τα πλακίδια με ονόματα χρωμάτων. Τα ξαναδένουμε στην παλέτα, ώστε να μη μένουν μπλε και χρυσά μέσα σε πράσινο brand. */ .bg-color-blue { background-color: var(--sh-primary) !important; color: var(--sh-navy-900) !important; } .bg-color-green { background-color: var(--sh-ok) !important; color: var(--sh-navy-900) !important; } .bg-color-red { background-color: var(--sh-error) !important; color: var(--sh-navy-900) !important; } .bg-color-gold { background-color: var(--sh-accent) !important; color: var(--sh-navy-900) !important; } .bg-color-orange { background-color: var(--sh-warn) !important; color: var(--sh-navy-900) !important; } /* ========================================================================== 7. LIST GROUPS ========================================================================== */ .list-group-item { background-color: transparent; border-color: var(--sh-border); color: var(--sh-ink); } .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--sh-hover); color: var(--sh-primary); } .list-group-item.active { background-color: var(--sh-primary); border-color: var(--sh-primary); color: var(--sh-navy-900); } /* ========================================================================== 8. ΚΟΥΜΠΙΑ Το κείμενο στο κύριο κουμπί είναι NAVY, όχι λευκό: λευκό πάνω στο #03A880 δίνει 3,0:1 και κόβεται από το AA. Το navy δίνει 6,6:1. ========================================================================== */ .btn { font-family: var(--sh-font-body); font-weight: 600; border-radius: var(--sh-radius-sm); transition: background-color .2s var(--sh-ease), transform .2s var(--sh-ease); } .btn:hover { transform: translateY(-1px); } .btn-primary, .btn-info { background-color: var(--sh-primary); border-color: var(--sh-primary); color: var(--sh-navy-900); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-info:hover, .btn-info:focus, .btn-info:active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { background-color: var(--sh-primary-hover); border-color: var(--sh-primary-hover); color: var(--sh-navy-900); } .btn-default, .btn-secondary, .btn-outline-secondary { background-color: transparent; border-color: var(--sh-border-strong); /* 3,5:1 — περίγραμμα κουμπιού */ color: var(--sh-ink); } .btn-default:hover, .btn-secondary:hover, .btn-outline-secondary:hover { background-color: var(--sh-hover); border-color: var(--sh-primary); color: var(--sh-primary); } .btn-success { background-color: var(--sh-ok); border-color: var(--sh-ok); color: var(--sh-navy-900); } .btn-warning { background-color: var(--sh-warn); border-color: var(--sh-warn); color: var(--sh-navy-900); } .btn-danger { background-color: var(--sh-error); border-color: var(--sh-error); color: var(--sh-navy-900); } .btn-link { color: var(--sh-primary); } .btn-link:hover { color: var(--sh-primary-hover); } /* ========================================================================== 9. ΦΟΡΜΕΣ ========================================================================== */ .form-control, .custom-select, select.form-control, textarea.form-control { background-color: var(--sh-card); border: 1px solid var(--sh-border-strong); border-radius: var(--sh-radius-sm); color: var(--sh-ink); /* Κάτω από 16px, το iOS Safari κάνει zoom σε κάθε πεδίο */ font-size: 16px; } .form-control:focus, .custom-select:focus { background-color: var(--sh-card); border-color: var(--sh-primary); box-shadow: 0 0 0 3px rgba(3, 168, 128, .18); color: var(--sh-ink); } .form-control::placeholder { color: var(--sh-ink-muted); opacity: 1; } .form-control:disabled, .form-control[readonly] { background-color: rgba(255, 255, 255, .02); color: var(--sh-ink-muted); } label, .control-label, .col-form-label { color: var(--sh-ink); font-weight: 500; } .form-text, .help-block, small.text-muted, .text-muted { color: var(--sh-ink-muted) !important; } /* Το select του Bootstrap 4 φέρνει δικό του βελάκι σε σκούρο SVG */ .custom-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%23FFFFFF' d='M0 0h8L4 5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; background-size: 8px 5px; } .custom-control-label::before { background-color: var(--sh-card); border-color: var(--sh-border); } .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--sh-primary); border-color: var(--sh-primary); } .invalid-feedback, .has-error .help-block { color: var(--sh-error); } .is-invalid, .has-error .form-control { border-color: var(--sh-error); } /* ========================================================================== 10. ΠΙΝΑΚΕΣ — υπηρεσίες, τιμολόγια, αιτήματα ========================================================================== */ .table { color: var(--sh-ink); } .table thead th { background-color: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--sh-border); border-top: 0; color: var(--sh-ink-muted); font-family: var(--sh-font-body); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: none; /* τα ελληνικά κεφαλαία κρατούν τους τόνους */ } .table td, .table th { border-top-color: var(--sh-border); vertical-align: middle; } .table-hover tbody tr:hover { background-color: var(--sh-hover); color: var(--sh-ink); } .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, .02); } .table-bordered, .table-bordered td, .table-bordered th { border-color: var(--sh-border); } /* Οι πίνακες να μη σπρώχνουν τη σελίδα πλάγια στο κινητό */ .table-responsive { -webkit-overflow-scrolling: touch; } /* DataTables, που χρησιμοποιεί το Twenty-One σε λίστες */ .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter { color: var(--sh-ink-muted); } .dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--sh-ink) !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--sh-primary) !important; border-color: var(--sh-primary) !important; color: var(--sh-navy-900) !important; } /* ========================================================================== 11. ΕΙΔΟΠΟΙΗΣΕΙΣ & ΕΤΙΚΕΤΕΣ ========================================================================== */ .alert { border-radius: var(--sh-radius); border-width: 1px; } .alert-info { background-color: rgba(3, 168, 128, .10); border-color: rgba(3, 168, 128, .35); color: var(--sh-info); } .alert-success { background-color: rgba(18, 183, 106, .10); border-color: rgba(18, 183, 106, .35); color: var(--sh-ok); } .alert-warning { background-color: rgba(247, 144, 9, .10); border-color: rgba(247, 144, 9, .35); color: var(--sh-warn); } .alert-danger { background-color: rgba(255, 138, 138, .10); border-color: rgba(255, 138, 138, .35); color: var(--sh-error); } .alert a { color: inherit; text-decoration: underline; } .badge-primary { background-color: var(--sh-primary); color: var(--sh-navy-900); } .badge-success { background-color: var(--sh-ok); color: var(--sh-navy-900); } .badge-warning { background-color: var(--sh-warn); color: var(--sh-navy-900); } .badge-danger { background-color: var(--sh-error); color: var(--sh-navy-900); } .badge-secondary, .badge-default { background-color: var(--sh-border); color: var(--sh-ink); } /* Καταστάσεις υπηρεσιών και τιμολογίων */ .status, .label { border-radius: 999px; font-weight: 600; padding: .3em .8em; } /* ========================================================================== 12. MODALS, TABS, PAGINATION ========================================================================== */ .modal-content { background-color: var(--sh-navy-700); border: 1px solid var(--sh-border); border-radius: var(--sh-radius); color: var(--sh-ink); } .modal-header, .modal-footer { border-color: var(--sh-border); } .close { color: var(--sh-ink); opacity: 1; text-shadow: none; } .close:hover { color: var(--sh-primary); opacity: 1; } .nav-tabs { border-bottom-color: var(--sh-border); } .nav-tabs .nav-link { border-color: transparent; color: var(--sh-ink-muted); } .nav-tabs .nav-link:hover { border-color: transparent; color: var(--sh-primary); } .nav-tabs .nav-link.active { background-color: transparent; border-color: transparent transparent var(--sh-primary); border-bottom-width: 2px; color: var(--sh-primary); } .page-link { background-color: var(--sh-card); border-color: var(--sh-border); color: var(--sh-ink); } .page-link:hover { background-color: var(--sh-hover); color: var(--sh-primary); } .page-item.active .page-link { background-color: var(--sh-primary); border-color: var(--sh-primary); color: var(--sh-navy-900); } .page-item.disabled .page-link { background-color: transparent; border-color: var(--sh-border); color: var(--sh-ink-muted); } /* ========================================================================== 13. ΣΥΝΔΕΣΗ, ΕΓΓΡΑΦΗ, ΕΠΑΝΑΦΟΡΑ ΚΩΔΙΚΟΥ ========================================================================== */ body.login-page, .login-box, #loginfrm { background-color: var(--sh-navy-900); } .login-box .card, #login .card { background-color: var(--sh-card); border: 1px solid var(--sh-border); border-radius: var(--sh-radius); } .logincontainer, .login-container { background-color: var(--sh-card); border: 1px solid var(--sh-border); border-radius: var(--sh-radius); } /* ========================================================================== 14. ΠΑΡΑΓΓΕΛΙΑ — store / cart ΠΡΟΣΟΧΗ ΣΤΗ ΣΕΙΡΑ ΦΟΡΤΩΣΗΣ: η φόρμα παραγγελίας φορτώνει το δικό της `templates/orderforms/standard_cart/css/all.min.css` **μέσα στο **, δηλαδή ΜΕΤΑ το custom.css. Οι κανόνες της: #order-standard_cart .products .product { background:#fff } (1,2,0) #order-standard_cart .products .product header { background:#f8f8f8 } Η δική μου `#order-standard_cart .product` είναι (1,1,0) ΚΑΙ δηλώνεται νωρίτερα — έχανε και στα δύο κριτήρια. Γι' αυτό οι κάρτες προϊόντων έμεναν λευκές, με το ανοιχτό κείμενο του θέματος πάνω τους (1,4:1). Εδώ αντιγράφω την ίδια specificity και προσθέτω !important, που κερδίζει ανεξάρτητα από σειρά. ========================================================================== */ #order-standard_cart .products .product, #order-standard_cart .product, .product-card { background: var(--sh-card) !important; border: 1px solid var(--sh-border) !important; border-radius: var(--sh-radius) !important; color: var(--sh-ink); overflow: hidden; } #order-standard_cart .cart-body, .cart-body { background-color: transparent; color: var(--sh-ink); } /* Η γκρίζα κεφαλίδα της κάρτας */ #order-standard_cart .products .product header { background: transparent !important; border-bottom: 1px solid var(--sh-border); margin: 0 !important; padding: 14px 20px !important; } #order-standard_cart .products .product header span, #order-standard_cart .product h3, .product-card h3 { color: #FFFFFF !important; /* 17,4:1 */ font-family: var(--sh-font-display); font-weight: 600; } /* Η περιγραφή έβγαινε στο ανοιχτό χρώμα του θέματος πάνω σε λευκό. Ανεβάζω και λίγο το μέγεθος: το .8em του parent είναι ~11px. */ #order-standard_cart .products .product .product-desc, #order-standard_cart .products .product .product-desc p, #order-standard_cart .products .product .product-desc li { color: var(--sh-ink) !important; /* λευκό, 16,1:1 */ font-size: .92em; line-height: 1.6; } /* Το