/* Πλατφόρμα εγγραφών Π.Φ.Σ.Β. — εμφάνιση εμπνευσμένη από το pfsb.gr Υποστηρίζει φωτεινό & σκοτεινό θέμα μέσω [data-theme] στο . */ :root, :root[data-theme="light"] { --bg: #eef1f4; --card: #ffffff; --surface-2: #f1f3f6; /* διακριτικά hover backgrounds */ --surface-3: #f4f5f8; /* κεφαλίδες πινάκων */ --row-hover: #fafbfd; --input-bg: #ffffff; --choice-bg: #ffffff; --choice-bg-active: #faf9fd; --upload-bg: #fafbfc; --ink: #1e2126; --muted: #7a8088; --accent: #c96f8f; /* ροζ τίτλων/συνδέσμων */ --accent-2: #6b5fb5; /* μωβ λογότυπου */ --pill: #2b2e33; /* σκούρα pill κουμπιά */ --line: #e4e7eb; --ok: #2e7d32; --warn: #b8860b; --err: #c62828; --tag-bg: #f4eef8; --tag-ok-bg: #e8f5e9; --tag-warn-bg: #fdf6e3; --tag-err-bg: #fdecea; --flash-err-bg: #fdecea; --flash-err-border: #f6c6c1; --flash-ok-bg: #e8f5e9; --flash-ok-border: #bfe3c2; --bank-bg: #fdf3f6; --bank-border: #f3d4de; --bank-chip-bg: #ffffff; --bank-chip-border: #d9a4b8; --contact-fill: #ffffff; --chart-track: #eceef2; --shadow: rgba(30,33,38,.06); --focus-ring: rgba(107,95,181,.16); --radius: 14px; } :root[data-theme="dark"] { --bg: #14161a; --card: #1e2127; --surface-2: #262a31; --surface-3: #2a2f37; --row-hover: #23272e; --input-bg: #171a1f; --choice-bg: #1b1e24; --choice-bg-active: #24212f; --upload-bg: #1b1e24; --ink: #e7e9ec; --muted: #9aa1ab; --accent: #e08aa6; --accent-2: #9c8ff0; --pill: #343a44; --line: #333944; --ok: #6cc46f; --warn: #e0b64a; --err: #ef6b6b; --tag-bg: #2b2536; --tag-ok-bg: #17301a; --tag-warn-bg: #33290f; --tag-err-bg: #3a1f1f; --flash-err-bg: #3a1f1f; --flash-err-border: #5c2f2f; --flash-ok-bg: #17301a; --flash-ok-border: #2c4a2f; --bank-bg: #241b20; --bank-border: #4a2f3a; --bank-chip-bg: #171a1f; --bank-chip-border: #5a3a48; --contact-fill: #1e2127; --chart-track: #2a2f37; --shadow: rgba(0,0,0,.4); --focus-ring: rgba(156,143,240,.28); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.65 "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; transition: background .2s ease, color .2s ease; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { line-height: 1.3; } .wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; } /* ---------- Κεφαλίδα ---------- */ .site-header { background: var(--card); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 2px 14px var(--shadow); position: sticky; top: 0; z-index: 50; } .site-header .bar { display: flex; align-items: center; gap: 20px; padding: 14px 24px; max-width: 1240px; margin: 0 auto; } .logo { display: flex; align-items: center; gap: 12px; font-weight: 800; } .logo .mark { font-size: 26px; color: var(--accent-2); letter-spacing: 1px; } .logo .logo-img { height: 46px; width: auto; display: block; } :root[data-theme="dark"] .logo .logo-img { /* ελαφρύ φόντο ώστε το μωβ λογότυπο να ξεχωρίζει στο σκούρο θέμα */ background: rgba(255,255,255,.92); border-radius: 8px; padding: 4px 7px; } .logo .sub { font-size: 11px; color: var(--muted); font-weight: 500; max-width: 190px; line-height: 1.25; } @media (max-width: 640px) { .logo .sub { display: none; } .logo .logo-img { height: 40px; } } nav.main { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; } nav.main a { color: var(--ink); font-weight: 600; font-size: 13.5px; letter-spacing: .4px; padding: 8px 16px; border-radius: 999px; text-transform: uppercase; } nav.main a:hover { background: var(--surface-2); text-decoration: none; } nav.main a.active { background: var(--pill); color: #fff; } /* Κουμπί εναλλαγής θέματος */ .theme-toggle { width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: border-color .15s, background .15s, color .15s; } .theme-toggle:hover { border-color: var(--accent-2); color: var(--accent-2); background: var(--surface-2); } .theme-toggle svg { width: 19px; height: 19px; display: block; } /* Το εικονίδιο δείχνει την ΕΠΙΛΟΓΗ (auto/light/dark), όχι το ενεργό θέμα. */ .theme-toggle svg { display: none; } .theme-toggle .icon-auto { display: block; } /* προεπιλογή: αυτόματο */ .theme-toggle[data-mode="auto"] .icon-auto { display: block; } .theme-toggle[data-mode="light"] .icon-auto { display: none; } .theme-toggle[data-mode="light"] .icon-sun { display: block; } .theme-toggle[data-mode="dark"] .icon-auto { display: none; } .theme-toggle[data-mode="dark"] .icon-moon { display: block; } .btn-contact { border: 1.5px solid transparent; border-radius: 999px; padding: 9px 26px; font-weight: 600; color: var(--ink); flex-shrink: 0; background: linear-gradient(var(--contact-fill), var(--contact-fill)) padding-box, linear-gradient(120deg,#8ec5e8,#c96f8f) border-box; } .btn-contact:hover { text-decoration: none; opacity: .85; } /* ---------- Κουμπιά ---------- */ .btn { display: inline-block; border: 0; cursor: pointer; border-radius: 999px; padding: 11px 26px; font-weight: 600; font-size: 14px; background: var(--pill); color: #fff; transition: opacity .15s; } .btn:hover { opacity: .88; text-decoration: none; } .btn.secondary { background: var(--card); color: var(--ink); border: 1.5px solid var(--line); } .btn.accent { background: var(--accent); } .btn.small { padding: 7px 16px; font-size: 13px; } .btn.danger { background: var(--err); } /* ---------- Κάρτες ---------- */ .page { padding: 34px 0 60px; } .card { background: var(--card); border-radius: var(--radius); padding: 28px 32px; box-shadow: 0 2px 14px var(--shadow); margin-bottom: 24px; } /* Ανενεργά προϊόντα στην αρχική — θαμπά, μη διαθέσιμα («Αναμένεται σύντομα») */ .coming-soon { opacity: .5; filter: grayscale(.35); } .ws-card.coming-soon { cursor: default; } .ws-card.coming-soon:hover { transform: none; box-shadow: none; } .grid { display: grid; gap: 22px; } .grid.cols-2 { grid-template-columns: 1fr 1fr; } @media (max-width: 800px) { .grid.cols-2 { grid-template-columns: 1fr; } } .price { font-size: 22px; font-weight: 700; } /* «Παλαιά» διαγραμμένη τιμή — ισχύει παντού (τιμές, απόδειξη, πίνακες) */ .old { color: var(--muted); text-decoration: line-through; font-weight: 600; margin-left: 8px; opacity: .85; } .price .old { font-size: 16px; } .tag { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--tag-bg); color: var(--accent-2); } .tag.ok { background: var(--tag-ok-bg); color: var(--ok); } .tag.warn { background: var(--tag-warn-bg); color: var(--warn); } .tag.err { background: var(--tag-err-bg); color: var(--err); } .muted { color: var(--muted); } .small { font-size: 13px; } /* ---------- Workshops: μοντέρνες κάρτες (αρχική) ---------- */ .ws-head { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .ws-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; margin: 18px 0 22px; } .ws-card { display: flex; flex-direction: column; gap: 7px; text-decoration: none; color: var(--ink); background: var(--card); border: 1.5px solid var(--line); border-radius: 15px; padding: 20px 22px 18px; position: relative; overflow: hidden; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .ws-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); opacity: .9; } .ws-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px var(--shadow); border-color: var(--accent-2); text-decoration: none; } .ws-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .ws-when { font-size: 12px; font-weight: 600; color: var(--accent-2); background: var(--tag-bg); padding: 4px 11px; border-radius: 999px; } .ws-title { margin: 4px 0 0; font-size: 17px; line-height: 1.32; } .ws-speaker { font-size: 13px; color: var(--muted); font-style: italic; } .ws-excerpt { font-size: 13.5px; color: var(--muted); margin: 3px 0 8px; line-height: 1.55; } .ws-more { margin-top: auto; font-size: 13.5px; font-weight: 700; color: var(--accent); } .ws-card:hover .ws-more { text-decoration: underline; } /* ---------- Πλούσιο κείμενο (Markdown/HTML περιγραφές) ---------- */ .rich-text { line-height: 1.65; } .rich-text > :first-child { margin-top: 0; } .rich-text p { margin: 0 0 12px; } .rich-text h1, .rich-text h2, .rich-text h3, .rich-text h4 { margin: 18px 0 8px; line-height: 1.3; } .rich-text ul, .rich-text ol { margin: 0 0 12px; padding-left: 22px; } .rich-text li { margin: 4px 0; } .rich-text a { color: var(--accent); } .rich-text img { max-width: 100%; height: auto; border-radius: 8px; } .rich-text table { border-collapse: collapse; width: 100%; margin: 12px 0; overflow-x: auto; display: block; } .rich-text th, .rich-text td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; } .rich-text th { background: var(--surface-3); } .rich-text code { background: var(--surface-3); padding: 2px 6px; border-radius: 5px; font-size: 13px; font-family: Consolas, Monaco, monospace; } .rich-text pre { background: var(--surface-3); padding: 14px 16px; border-radius: 10px; overflow-x: auto; } .rich-text pre code { background: none; padding: 0; } .rich-text blockquote { margin: 12px 0; padding: 6px 16px; border-left: 3px solid var(--accent-2); color: var(--muted); } /* Λίστα «Διαβάστε περισσότερα» όπως στο pfsb.gr */ .readmore-list { list-style: none; padding: 0; margin: 0; } .readmore-list li { display: flex; align-items: center; gap: 18px; margin: 14px 0; } .readmore-list .pill-link { flex-shrink: 0; background: var(--pill); color: #fff; border-radius: 999px; padding: 10px 22px; font-size: 13px; text-align: center; line-height: 1.35; } .readmore-list .pill-link:hover { text-decoration: none; opacity: .88; } .readmore-list .title a { color: var(--accent); font-size: 16.5px; font-weight: 500; } /* ---------- Φόρμες ---------- */ label.field { display: block; margin: 14px 0 4px; font-weight: 600; font-size: 14px; } label.field .req { color: var(--err); } input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=date], select, textarea { width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 10px; font: inherit; background: var(--input-bg); color: var(--ink); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px var(--focus-ring); } .choice { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 12px; margin: 10px 0; background: var(--choice-bg); transition: border-color .15s, background .15s, opacity .15s; } .choice:has(input:checked) { border-color: var(--accent-2); background: var(--choice-bg-active); } .choice:has(input:disabled) { opacity: .5; } .choice input { margin-top: 5px; transform: scale(1.25); accent-color: var(--accent-2); } .choice .body { flex: 1; } .choice .head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .choice .title { font-weight: 700; } .upload-box { border: 2px dashed var(--line); border-radius: 12px; background: var(--upload-bg); padding: 26px; text-align: center; color: var(--muted); } /* ---------- Ειδοποιήσεις ---------- */ .flash { padding: 13px 18px; border-radius: 10px; margin: 0 0 14px; font-size: 14px; } .flash.error { background: var(--flash-err-bg); color: var(--err); border: 1px solid var(--flash-err-border); } .flash.ok { background: var(--flash-ok-bg); color: var(--ok); border: 1px solid var(--flash-ok-border); } /* Πλαίσιο τραπεζικών στοιχείων */ .bank-box { background: var(--bank-bg); border: 1px solid var(--bank-border); border-radius: 12px; padding: 18px 22px; margin: 16px 0; } .bank-box .reason { font-family: Consolas, Monaco, monospace; background: var(--bank-chip-bg); border: 1px dashed var(--bank-chip-border); border-radius: 8px; padding: 4px 10px; display: inline-block; margin-top: 4px; font-size: 15px; } /* Τραπεζικοί λογαριασμοί — accordion (πολλαπλών επιλογών) */ .bank-accordion { margin: 16px 0; display: flex; flex-direction: column; gap: 10px; } .bank-acc { background: var(--bank-bg); border: 1px solid var(--bank-border); border-radius: 12px; overflow: hidden; } .bank-acc summary { list-style: none; cursor: pointer; padding: 14px 20px; user-select: none; display: flex; align-items: center; gap: 12px; font-weight: 700; flex-wrap: wrap; } .bank-acc summary::-webkit-details-marker { display: none; } .bank-acc summary .bank-acc-iban { font-weight: 400; font-family: Consolas, Monaco, monospace; font-size: 12.5px; } .bank-acc summary .chev { width: 18px; height: 18px; margin-left: auto; flex-shrink: 0; transition: transform .18s ease; color: var(--muted); } .bank-acc[open] summary .chev { transform: rotate(180deg); } .bank-acc[open] summary { border-bottom: 1px solid var(--bank-border); } .bank-acc-body { padding: 6px 20px 18px; font-size: 14px; } .bank-acc-body > div { margin: 5px 0; } /* Τιμή με κουμπί αντιγραφής (IBAN, BIC, αιτιολογία) */ .copyfield { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .copyfield code { font-family: Consolas, Monaco, monospace; font-size: 14px; } .copy-btn { border: 1.5px solid var(--bank-chip-border); background: var(--bank-chip-bg); color: var(--muted); border-radius: 8px; width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: border-color .15s, color .15s, background .15s; } .copy-btn:hover { border-color: var(--accent-2); color: var(--accent-2); } .copy-btn svg { width: 15px; height: 15px; } .copy-btn .icon-check { display: none; } .copy-btn.copied { border-color: var(--ok); color: var(--ok); } .copy-btn.copied .icon-copy { display: none; } .copy-btn.copied .icon-check { display: inline-flex; } /* ---------- Πίνακες (admin) ---------- */ .tablewrap { overflow-x: auto; } table.data { width: 100%; border-collapse: collapse; font-size: 14px; } table.data th { text-align: left; padding: 10px 12px; background: var(--surface-3); border-bottom: 2px solid var(--line); white-space: nowrap; } table.data td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; } table.data tr:hover td { background: var(--row-hover); } /* ---------- Admin layout ---------- */ .admin-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 22px; align-items: center; } .admin-nav a { padding: 8px 18px; border-radius: 999px; font-weight: 600; font-size: 13.5px; background: var(--card); color: var(--ink); border: 1.5px solid var(--line); } .admin-nav a.active, .admin-nav a:hover { background: var(--pill); color: #fff; text-decoration: none; border-color: var(--pill); } .admin-nav .spacer { margin-left: auto; } .admin-nav .icon-link, .admin-nav .icon-btn { width: 38px; height: 38px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; cursor: pointer; border: 1.5px solid var(--line); background: var(--card); color: var(--muted); transition: border-color .15s, color .15s, background .15s; } .admin-nav .icon-link:hover, .admin-nav .icon-btn:hover { border-color: var(--accent-2); color: var(--accent-2); background: var(--surface-2); } .admin-nav .icon-link.active { background: var(--pill); border-color: var(--pill); color: #fff; } .admin-nav .icon-link svg, .admin-nav .icon-btn svg { width: 18px; height: 18px; } .avatar { width: 56px; height: 56px; border-radius: 999px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--accent-2), var(--accent)); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; } .stat { background: var(--card); border-radius: 12px; padding: 18px 20px; box-shadow: 0 2px 10px var(--shadow); } .stat .num { font-size: 28px; font-weight: 800; } .stat .lbl { color: var(--muted); font-size: 13px; } /* ---------- Γραφήματα (Επισκόπηση) ---------- */ .chart { margin: 0 0 4px; } .chart-title { margin: 0 0 10px; font-size: 14.5px; font-weight: 700; } .bars { display: flex; flex-direction: column; gap: 9px; } .barrow { display: grid; grid-template-columns: minmax(80px, 34%) 1fr auto; align-items: center; gap: 12px; } .barlabel { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bartrack { background: var(--chart-track); border-radius: 999px; height: 20px; overflow: hidden; } .barfill { height: 100%; border-radius: 999px; min-width: 3px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .5s ease; } .barfill.alt { background: linear-gradient(90deg, #4f9bd6, var(--accent-2)); } .barval { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; } .chart-empty { color: var(--muted); font-size: 13px; padding: 6px 0; } .stackbar { display: flex; height: 22px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line); background: var(--chart-track); } .stackbar span { display: block; height: 100%; transition: width .5s ease; } .stackbar .s-paid { background: var(--ok); } .stackbar .s-pending { background: var(--warn); } .stackbar .s-cancelled { background: var(--err); } .legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 13px; color: var(--muted); } .legend .dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: middle; } @media (max-width: 560px) { .barrow { grid-template-columns: minmax(70px, 40%) 1fr auto; gap: 8px; } .barlabel { font-size: 12px; } } .site-footer { text-align: center; color: var(--muted); font-size: 13px; padding: 26px 0 40px; } .inline-form { display: inline; }