/* =====================================================================================
css/vt-page.css · ΤΟ ΣΩΜΑ ΤΩΝ ΣΕΛΙΔΩΝ ΜΑΘΗΜΑΤΩΝ
-------------------------------------------------------------------------------------
Αντικαθιστά το vt-course.css (η απόπειρα της 10ης Σεπ, που απορρίφθηκε).
Τα προβλήματα εκείνης ήταν μετρήσιμα και εδώ αντιμετωπίζονται ρητά:
ύψος 12.823px → προϋπολογισμός ≤7.000px, μετρημένος μετά από κάθε μπλοκ
αντίθεση ενοτήτων 4% → τρεις επιφάνειες με βήματα ≥12% (πίνακας παρακάτω)
τυπογραφία σαν sans → μετρήθηκε η ΠΡΑΓΜΑΤΙΚΗ Artemisia (πίνακας παρακάτω)
── ΜΕΤΡΗΣΗ ΓΡΑΜΜΑΤΟΣΕΙΡΑΣ (canvas, στα 100px) ──────────────────────────
GFS Artemisia x-height 44,9% cap 66,2%
Georgia x-height 48,1% cap 69,3%
system sans x-height 52,3% cap 71,7%
Άρα η Artemisia θέλει **×1,165** για ίδιο οπτικό μέγεθος με ένα sans.
(Είχα πει «+25%» χωρίς να μετρήσω· η μέτρηση λέει **+17%**.)
Σώμα κειμένου 20px = οπτικά ίσο με sans 17px.
── ΕΠΙΦΑΝΕΙΕΣ (σχετική φωτεινότητα· βήμα = πόσο σκουρότερη από την προηγούμενη) ──
paper #FCFAF4 L* 98,3, paper-2 #F1EADA L* 92,9 13,6% ✅
paper-3 #E3D8C1 L* 87,1 16,1% ✅
navy #1E2D40 L* 18,0 η άγκυρα· χρησιμοποιείται ΜΙΑ φορά
===================================================================================== */
.vp {
/* ── χρώμα ── */
--p1: #FCFAF4; /* βασικό χαρτί */
--p2: #F1EADA; /* εναλλαγή ενότητας */
--p3: #E3D8C1; /* έμφαση, πλαίσια */
--navy: #1E2D40; /* η σκοτεινή άγκυρα */
--deep: #16222F;
--ink: #16222F; /* αντίθεση 15,4 σε p1 */
--ink-2: #455565; /* απαλό· 7,3 σε p1, 5,2 σε p3, περνά παντού */
--accent: #6B5029; /* χρυσό ΓΙΑ ΚΕΙΜΕΝΟ· 7,2 / 6,1 / 5,1, το μόνο που περνά σε ΟΛΕΣ */
--gold: #D9BD89; /* χρυσό ΓΙΑ ΣΚΟΥΡΟ φόντο· 7,7 σε navy */
--brick: #8E2F22;
--brick-d: #66211A; /* ΜΟΝΟ για το early bird· το μόνο κόκκινο της σελίδας */
--cream: #F2ECCE;
--line: rgba(22, 34, 47, .14);
--line-d: rgba(242, 236, 206, .16);
/* ── τυπογραφία, από τη μέτρηση ── */
--t-micro: 13.5px;
--t-small: 16.5px;
--t-body: 20px;
--t-lead: clamp(21px, 2.1vw, 24px);
--t-h3: clamp(23px, 2.4vw, 27px);
--t-h2: clamp(29px, 3.6vw, 40px);
--t-h1: clamp(36px, 6vw, 64px);
/* ΙΔΙΟ padding με το κέλυφος. Είχε clamp(20px,4vw,40px) ενώ το header έχει
clamp(16px,3vw,40px): στα μεσαία πλάτη το σώμα ήταν 8px πιο μέσα από το
λογότυπο. Τώρα κληρονομείται, οπότε δεν μπορούν να ξεσυγχρονιστούν. */
--pad: var(--vtx-pad, clamp(16px, 3vw, 40px));
--gap: clamp(2.4rem, 4.2vw, 3.8rem);
background: var(--p1);
color: var(--ink);
font-family: var(--vtx-font, "GFS Artemisia", Georgia, serif);
font-size: var(--t-body);
line-height: 1.68;
}
.vp *, .vp *::before, .vp *::after { box-sizing: border-box; }
/* ⚠ ΤΟ ΜΗΔΕΝΙΣΜΑ ΠΡΕΠΕΙ ΝΑ ΕΧΕΙ ΜΗΔΕΝΙΚΗ ΕΙΔΙΚΟΤΗΤΑ.
Ήταν γραμμένο `.vp p, .vp ul { margin: 0 }` δηλαδή (0,1,1), και νικούσε ΚΑΘΕ
`.vp-promise__turn { margin-top }` ή `.vp-list { margin-top }` που είναι (0,1,0).
Αποτέλεσμα: όλα τα κενά που έγραφα ήταν σιωπηλά μηδέν, και ο ρυθμός της σελίδας
έσπαγε. Επίσης το `.vp ul { padding: 0 }` μηδένιζε το padding-left των ερωτήσεων,
γι' αυτό ακουμπούσαν πάνω στην κάθετη γραμμή.
Με :where() η ειδικότητα γίνεται (0,0,0) και κάθε κλάση κερδίζει, όπως πρέπει.
ΙΔΙΟ ΛΑΘΟΣ είχε γίνει τρεις φορές: `.vtx a`, `.vp a`, και εδώ. */
:where(.vp) :where(p, ul, ol, dl, dd, h1, h2, h3, figure, blockquote) { margin: 0; }
:where(.vp) :where(ul, ol) { list-style: none; padding: 0; }
.vp a:not([class]) { color: inherit; }
/* ΜΗΝ γράψεις `.vp a { color: inherit }`, ειδικότητα (0,1,1) που νικά κάθε
`.vp-btn--go { color: … }` (0,1,0) και σβήνει το κείμενο των κουμπιών.
Το ίδιο λάθος είχε γίνει και στο κέλυφος με το `.vtx a`. */
.vp strong { font-weight: 700; }
/* Η ΣΤΗΛΗ. Μετρήθηκε: στα 20px, 62ch ≈ 65 χαρακτήρες ανά γραμμή. */
/* 1320px, ΟΣΟ ΚΑΙ ΤΟ ΚΕΛΥΦΟΣ. Ήταν 1180 και όλο το σώμα της σελίδας καθόταν
70px πιο μέσα από το λογότυπο και το «ΕΠΙΚΟΙΝΩΝΙΑ». */
.vp__wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--pad); }
.vp__sec { padding-block: var(--gap); }
.vp__sec--p2 { background: var(--p2); }
.vp__sec--navy { background: var(--navy); color: var(--cream); }
/* Επιγραφή ενότητας, μικρά κεφαλαία με αραίωση. Δεν είναι τίτλος, είναι ετικέτα. */
.vp__eyebrow {
font-size: var(--t-micro); font-weight: 700;
letter-spacing: .18em; text-transform: uppercase;
color: var(--accent);
display: flex; align-items: center; gap: .7rem;
margin-bottom: 1.1rem;
}
.vp__eyebrow::after { content: ''; flex: 1; height: 1px; background: var(--line); max-width: 110px; }
.vp__sec--navy .vp__eyebrow { color: var(--gold); }
.vp__sec--navy .vp__eyebrow::after { background: var(--line-d); }
.vp h1 { font-size: var(--t-h1); line-height: 1.04; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.vp h2 { font-size: var(--t-h2); line-height: 1.14; font-weight: 700; text-wrap: balance; }
.vp h3 { font-size: var(--t-h3); line-height: 1.22; font-weight: 700; }
.vp__lead { font-size: var(--t-lead); line-height: 1.5; color: var(--ink-2); }
/* ΜΙΑ σταθερή σχέση: μετά από επικεφαλίδα, η εισαγωγή απέχει πάντα το ίδιο.
Ήταν γραμμένη με inline style σε κάθε μπλοκ ξεχωριστά, δηλαδή τέσσερις
διαφορετικές τιμές και κανένας ρυθμός. */
.vp h2 + .vp__lead, .vp h1 + .vp__lead { margin-top: 1.5rem; }
.vp__sec--navy .vp__lead { color: rgba(242,236,206,.82); }
/* ═══ ΜΠΛΟΚ 1, ΗΡΩΑΣ ════════════════════════════════════════════════════
ΔΕΝ είναι 100vh. Το ύψος το ορίζει το περιεχόμενο· ο επισκέπτης πρέπει να
δει τι, πότε και πόσο χωρίς να κυλήσει, και ταυτόχρονα να καταλάβει ότι
υπάρχει συνέχεια. */
.vp-hero { padding-block: clamp(2.4rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem); }
.vp-hero__grid { display: grid; gap: clamp(1.8rem, 3.5vw, 2.6rem); }
@media (min-width: 900px) {
/* Η κάρτα τιμής πιάνει και τις δύο σειρές· τα γεγονότα γεμίζουν το κενό
κάτω από το κείμενο αντί να το αφήνουν άδειο. */
.vp-hero__grid {
grid-template-columns: minmax(0,1.32fr) minmax(300px,.68fr);
grid-template-areas: "txt price" "facts price";
align-items: start;
column-gap: clamp(2rem, 4vw, 3.4rem);
}
.vp-hero__grid > div:first-child { grid-area: txt; }
.vp-hero__grid > .vp-facts { grid-area: facts; }
.vp-hero__grid > .vp-price { grid-area: price; }
}
.vp-hero h1 { margin-bottom: 1rem; }
.vp-hero__lead { max-width: 54ch; }
/* Τα γεγονότα: τέσσερα, σε σειρά, χωρίς κουτιά. Κουτί = «ξεχωριστό αντικείμενο»·
αυτά δεν είναι αντικείμενα, είναι ιδιότητες ενός πράγματος. */
/* Απλώνονται σε ΟΛΟ το πλάτος, κάτω από τις δύο στήλες. Μετρήθηκε ότι μέσα στη
στενή αριστερή στήλη κάθε τιμή τύλιγε σε 3 και 4 σειρές και οι στήλες έβγαιναν
άνισες. Με όλο το πλάτος, κάθε τιμή χωρά σε μία ή δύο. */
.vp-facts {
display: grid; gap: 1.1rem 2rem; margin-top: clamp(2.2rem, 4vw, 3.2rem);
border-top: 1px solid var(--line); padding-top: 1.5rem;
}
@media (min-width: 560px) { .vp-facts { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 900px) { .vp-facts { margin-top: 0; gap: 1.4rem 2.2rem; } }
.vp-facts dt {
font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase;
color: var(--ink-2); line-height: 1.4;
}
.vp-facts dd { margin: .4rem 0 0; font-size: var(--t-small); font-weight: 700; line-height: 1.5; }
/* Η κάρτα τιμής. ΕΝΑ κουτί σε όλη τη σελίδα, γι' αυτό ξεχωρίζει. */
.vp-price {
background: var(--p3); border: 1px solid rgba(107,80,41,.22);
border-radius: 3px; padding: clamp(1.3rem, 2.4vw, 1.8rem);
}
/* ΚΟΡΔΕΛΑ. Κάθεται στην κορυφή της κάρτας και ξεπερνά το περίγραμμά της.
Το σώμα έχει ελαφρά κυρτή βάση· οι δύο άκρες γυρίζουν προς τα πίσω, σε πιο
σκούρο τόνο, ώστε να διαβάζονται ως η ταινία που συνεχίζει και τυλίγεται.
ΠΡΟΗΓΟΥΜΕΝΗ ΑΠΟΠΕΙΡΑ: οι άκρες ήταν τρίγωνα στις κάτω γωνίες του σώματος και
διαβάζονταν ως δαγκωμένες γωνίες, όχι ως τύλιγμα. Τώρα είναι ΕΞΩ από το σώμα.
Τούβλινο ματ, όχι γυαλιστερό: το γυαλιστερό κόκκινο των έτοιμων προτύπων
χτυπά με την Artemisia και το navy. */
/* ΤΟ ΚΕΝΟ ΩΣ ΤΟ ΠΟΣΟ. Η κορδέλα μπαίνει 17px πάνω από την κάρτα και συνεχίζει
μέσα της. Με 2,4rem το ποσό ερχόταν πολύ κοντά, και σε τετραψήφιο ποσό
(π.χ. η Γενέθλια) θα ακουμπούσε. */
.vp-price, .vp-buy__price { position: relative; }
/* ΤΟ ΚΕΝΟ ΙΣΧΥΕΙ ΜΟΝΟ ΟΤΑΝ ΥΠΑΡΧΕΙ ΚΟΡΔΕΛΑ.
Η κορδέλα εμφανίζεται μόνο στη φάση του early bird. Χωρίς τον έλεγχο `:has()`,
μόλις έληγε η προσφορά η κορδέλα εξαφανιζόταν αλλά το κενό έμενε: μετρήθηκαν
67px και 71px αδικαιολόγητου κενού πάνω από την τιμή, σε ΚΑΘΕ φάση μετά τη
λήξη, δηλαδή στο μεγαλύτερο μέρος του χρόνου ζωής της σελίδας. Τώρα η κάρτα
κρατά το κανονικό της padding όταν δεν έχει τι να χωρέσει. */
.vp-price:has(.vp-price__tag) { padding-top: clamp(3.8rem, 5vw, 4.1rem); }
.vp-price__tag {
position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
display: inline-flex; align-items: center; gap: .6rem;
font-size: var(--t-small); font-weight: 700;
letter-spacing: .13em; text-transform: uppercase; white-space: nowrap;
background: var(--brick); color: #FBEFE6;
padding: .62rem 1.7rem .78rem;
border-radius: 3px 3px 60% 60% / 3px 3px 22px 22px;
filter: drop-shadow(0 5px 10px rgba(142,47,34,.28));
}
/* ΟΙ ΑΚΡΕΣ ΜΕ ΧΕΛΙΔΟΝΟΟΥΡΑ («ψαροκόκαλο»).
Κάθε άκρη είναι μια ταινία που φεύγει προς τα έξω και κάτω, και στο τέλος
της έχει κομμένο ένα τρίγωνο προς τα μέσα. Το σχήμα δίνεται με clip-path,
ώστε να μην χρειάζεται εικόνα και να μένει καθαρό σε κάθε ανάλυση.
Οι κορυφές, από το σημείο που κολλά στο σώμα και γύρω:
(100% 0) πάνω, στο σώμα (100% 64%) κάτω, στο σώμα
(0 100%) έξω, κάτω μύτη (36% 66%) η κορυφή του κοψίματος
(0 30%) έξω, πάνω μύτη
Η δεξιά άκρη είναι η ίδια, καθρεφτισμένη. */
.vp-price__tag::before, .vp-price__tag::after {
content: ''; position: absolute; top: 5px; height: calc(100% - 15px);
width: 26px; background: var(--brick-d); z-index: -1;
/* ΙΣΙΑ, στο ίδιο ύψος με το σώμα. Μόνο το τρίγωνο στην έξω άκρη.
Δοκιμάστηκε και γερμένη προς τα κάτω: έμοιαζε να κρέμεται, όχι να συνεχίζει. */
clip-path: polygon(100% 0, 100% 100%, 0 100%, 42% 50%, 0 0);
}
.vp-price__tag::before { left: -22px; }
.vp-price__tag::after { right: -22px; transform: scaleX(-1); }
.vp-price__tag i {
width: .5rem; height: .5rem; border-radius: 50%;
background: currentColor; flex: none;
animation: vpPulse 2.4s ease-in-out infinite;
}
@keyframes vpPulse { 0%,100% { opacity: .3; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .vp-price__tag i { animation: none; opacity: 1; } }
/* Σε στενές οθόνες η κορδέλα μικραίνει: στο ίδιο μέγεθος έμπαινε πολύ μέσα
στην κάρτα και στρίμωχνε το ποσό. Μετρήθηκε: το κενό ως το ποσό έπεφτε
στα 18px, ενώ σε πλάτος ήταν 28. */
@media (max-width: 600px) {
.vp-price__tag { font-size: var(--t-micro); padding: .5rem 1.25rem .62rem; top: -14px; }
.vp-price__tag::before, .vp-price__tag::after { width: 20px; }
.vp-price__tag::before { left: -17px; }
.vp-price__tag::after { right: -17px; }
}
.vp-price__now { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.vp-price__now b { font-size: clamp(38px, 5vw, 52px); line-height: 1; font-weight: 700; }
.vp-price__was { font-size: var(--t-lead); color: var(--ink-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.vp-price__note { font-size: var(--t-small); color: var(--ink-2); margin-top: .9rem; line-height: 1.6; }
.vp-price__note b { color: var(--accent); }
/* Δεύτερη, ανεξάρτητη πρόταση: χρειάζεται δικό της κενό, όχι ένα
. */
.vp-price__note--alt {
margin-top: .8rem; padding-top: .8rem;
border-top: 1px solid rgba(107,80,41,.18);
}
.vp-cta { display: flex; flex-direction: column; gap: .7rem; margin-top: 1.5rem; }
.vp-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
padding: .95rem 1.4rem; border-radius: 3px; text-decoration: none;
font-size: var(--t-small); font-weight: 700; letter-spacing: .04em;
transition: background-color .16s ease, color .16s ease, transform .1s ease;
}
.vp-btn--go { background: var(--navy); color: var(--cream); }
.vp-btn--go:hover { background: var(--deep); }
.vp-btn--quiet { border: 1px solid rgba(22,34,47,.28); color: var(--ink); background: transparent; }
.vp-btn--quiet:hover { background: rgba(22,34,47,.05); }
.vp-btn:active { transform: translateY(1px); }
/* ═══ ΜΠΛΟΚ 2, Η ΥΠΟΣΧΕΣΗ ═══════════════════════════════════════════════ */
/* Το «« δεν έχει σχεδόν καθόλου αριστερό κενό στη γραμματοσειρά, οπότε με
1rem ακουμπούσε πάνω στη γραμμή. Θέλει περισσότερο από ό,τι ένα γράμμα. */
/* ΔΥΟ ΣΤΗΛΕΣ. Σε μία, το δεξί μισό της σελίδας έμενε άδειο και η ενότητα
ψήλωνε χωρίς λόγο. */
.vp-promise { display: grid; gap: clamp(2rem, 4vw, 3.4rem); }
@media (min-width: 900px) {
/* Η αριστερή στήλη ήταν 622px και ο τίτλος χρειαζόταν 639. */
.vp-promise { grid-template-columns: minmax(0,1.2fr) minmax(0,.8fr); align-items: center; }
/* 52ch έδινε 602px και ο τίτλος χρειαζόταν 639. Μετρημένο, όχι κατ' εκτίμηση. */
.vp-promise > div { max-width: 60ch; }
}
.vp-promise__q {
display: grid; gap: .25rem; align-content: center;
border-left: 2px solid var(--accent); padding-left: clamp(1.4rem, 2.4vw, 2.1rem);
}
.vp-promise__q li { font-size: var(--t-lead); line-height: 1.45; padding-block: .5rem; font-style: italic; }
.vp-promise__turn {
margin-top: 2.4rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
font-size: var(--t-h3); line-height: 1.35; max-width: 34ch; text-wrap: balance;
}
.vp-promise__turn b { color: var(--accent); }
/* ═══ ΜΠΛΟΚ 3, Η ΑΠΟΔΕΙΞΗ ═══════════════════════════════════════════════
Η μόνη σκοτεινή ενότητα της σελίδας. Είναι το κέντρο βάρους: εδώ ο
επισκέπτης βλέπει να γίνεται αυτό που του υποσχεθήκαμε στο μπλοκ 2. */
.vp-proof__grid { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); }
@media (min-width: 1000px) { .vp-proof__grid { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); } }
.vp-proof__side h2 { margin-bottom: 1.4rem; }
/* ΧΩΡΙΣ κάθετη γραμμή. Τα «» δηλώνουν ήδη παράθεση, και η γραμμή ύψους μιας
σειράς διαβαζόταν ως τυχαίο σημάδι δίπλα στον τίτλο. Η ίδια γραμμή στο μπλοκ 2
σημαίνει «κατάλογος παραδειγμάτων»· εδώ είναι μία πραγματική περίπτωση, άλλο
πράγμα, και δεν πρέπει να δανείζεται το ίδιο σημάδι. */
.vp-proof__ask {
font-size: var(--t-h3); line-height: 1.32; font-style: italic; color: var(--gold);
}
.vp-proof__when {
font-size: var(--t-small); color: rgba(242,236,206,.58);
letter-spacing: .03em; margin-top: .7rem;
}
.vp-proof__steps { margin-top: 2.3rem; }
/* ΤΟ ΒΙΝΤΕΟ ΜΕ ΠΡΟΣΟΨΗ
Δεν φορτώνεται iframe του YouTube με τη σελίδα. Μπαίνει εικόνα αφίσας από τον
δικό μας σέρβερ· το YouTube ζητιέται μόνο στο κλικ. */
.vp-video { margin: 0; position: relative; }
.vp-video__btn {
display: block; width: 100%; padding: 0; border: 1px solid var(--line-d);
border-radius: 3px; overflow: hidden; background: var(--deep);
cursor: pointer; position: relative; line-height: 0;
}
.vp-video__btn img { width: 100%; height: auto; display: block; opacity: .88; transition: opacity .2s ease, transform .4s ease; }
.vp-video__btn:hover img { opacity: 1; transform: scale(1.015); }
.vp-video__play {
position: absolute; inset: 0; display: grid; place-items: center; color: var(--navy);
}
.vp-video__play svg {
width: 92px; height: 64px; border-radius: 8px;
background: var(--gold); padding: 4px 0;
box-shadow: 0 4px 18px rgba(0,0,0,.35);
transition: background-color .18s ease, transform .18s ease;
}
.vp-video__btn:hover .vp-video__play svg { background: var(--cream); transform: scale(1.06); }
.vp-video iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 3px; display: block; }
.vp-video__cap {
margin-top: .8rem; font-size: var(--t-small); font-style: italic;
color: rgba(242,236,206,.62); line-height: 1.4;
}
.vp-proof__steps { display: grid; gap: 1.5rem; counter-reset: s; }
.vp-proof__steps li { display: grid; grid-template-columns: 1.9rem 1fr; gap: 1.1rem; align-items: start; }
.vp-proof__steps li::before {
margin-top: .1rem;
counter-increment: s; content: counter(s);
font-size: var(--t-micro); font-weight: 700; color: var(--gold);
border: 1px solid var(--line-d); border-radius: 50%;
width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
}
.vp-proof__steps p { font-size: var(--t-small); line-height: 1.65; color: rgba(242,236,206,.82); }
.vp-proof__steps b { color: var(--cream); }
@media (prefers-reduced-motion: reduce) { .vp * { transition: none !important; } }
/* ═══ ΜΠΛΟΚ 4, ΔΟΚΙΜΑΣΕ ΤΟ ══════════════════════════════════════════════
Χαμηλό και ήσυχο επίτηδες. Δεν διεκδικεί προσοχή· περιμένει όποιον τη χρειάζεται. */
.vp__sec--tight { padding-block: clamp(1.8rem, 3vw, 2.6rem); }
.vp-try {
display: grid; gap: 1.2rem; align-items: center;
border-block: 1px solid var(--line); padding-block: clamp(1.6rem, 3vw, 2.2rem);
}
@media (min-width: 860px) { .vp-try { grid-template-columns: minmax(0,1.5fr) minmax(280px,1fr); gap: 2.6rem; } }
.vp-try h3 { font-size: var(--t-h3); margin-bottom: .5rem; }
.vp-try p { font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; max-width: 56ch; }
.vp-try__form { display: flex; gap: .5rem; flex-wrap: wrap; }
.vp-try__form input {
flex: 1 1 190px; min-width: 0; padding: .8rem 1rem;
font: inherit; font-size: var(--t-small);
background: var(--p1); color: var(--ink);
border: 1px solid rgba(22,34,47,.25); border-radius: 3px;
}
.vp-try__form input::placeholder { color: rgba(22,34,47,.45); }
.vp-try__form button {
padding: .8rem 1.3rem; border: 0; border-radius: 3px; cursor: pointer;
font: inherit; font-size: var(--t-small); font-weight: 700; letter-spacing: .03em;
background: var(--accent); color: var(--p1);
}
.vp-try__form button:hover { background: var(--ink); }
.vp-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vp-link:hover { color: var(--ink); }
/* ═══ ΜΠΛΟΚ 5, ΓΙΑ ΠΟΙΟΝ ════════════════════════════════════════════════ */
.vp-who { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); }
@media (min-width: 900px) { .vp-who { grid-template-columns: minmax(0,1.5fr) minmax(280px,.9fr); align-items: start; } }
/* ΤΑ ΟΡΙΑ ΣΤΟΥΣ ΤΙΤΛΟΥΣ ΗΤΑΝ ΠΟΛΥ ΣΦΙΧΤΑ. Με 18-20ch ο τίτλος έσπαγε σε τρεις
σειρές ενώ η στήλη είχε διπλάσιο χώρο. Το `text-wrap: balance` (ήδη ενεργό)
φροντίζει να σπάει όμορφα όταν όντως χρειάζεται. */
.vp-who h2 { max-width: 34ch; }
/* Λίστα με παύλες θα ήταν το εύκολο. Μικρή γωνία αντί για κουκκίδα: δείχνει
κατεύθυνση, δεν ζυγίζει, και δεν μοιάζει με προεπιλογή του browser. */
/* Οι λίστες ακολουθούν πάντα επικεφαλίδα· χρειάζονται αέρα, όχι 18px. */
.vp-list { display: grid; gap: 1.05rem; margin-top: 2.6rem; }
.vp-list li { position: relative; padding-left: 1.7rem; font-size: var(--t-small); line-height: 1.6; }
.vp-list li::before {
content: ''; position: absolute; left: 0; top: .55em;
width: .5rem; height: .5rem; border-right: 1.5px solid var(--accent);
border-bottom: 1.5px solid var(--accent); transform: rotate(-45deg);
}
.vp-who__no {
background: var(--p3); border-left: 2px solid var(--accent);
padding: clamp(1.2rem, 2.4vw, 1.7rem);
}
.vp-who__no h3 { font-size: var(--t-lead); margin-bottom: .9rem; }
.vp-who__no p { font-size: var(--t-small); line-height: 1.6; color: var(--ink-2); margin-bottom: .8rem; }
.vp-who__no p:last-child { margin-bottom: 0; }
/* ═══ ΜΠΛΟΚ 6, ΤΟ ΠΡΟΓΡΑΜΜΑ ═════════════════════════════════════════════ */
/* Η επικεφαλίδα σε ΟΛΟ το πλάτος και η ύλη από κάτω σε τρεις στήλες.
Ήταν δύο στήλες (κείμενο | ύλη) και, αφού έφυγε η διπλή λίστα «Πώς θα μάθεις»,
η αριστερή έμενε άδεια ενώ η δεξιά τραβούσε την ενότητα στα 830px. */
/* 68ch έδινε 787px και ο τίτλος χρειαζόταν 794. Επτά pixel. */
.vp-prog { max-width: 74ch; margin-bottom: 2.6rem; }
.vp-prog h2 { max-width: 36ch; }
.vp-prog .vp__lead { margin-top: 1rem; }
/* ΘΕΜΑΤΙΚΕΣ, όχι ύλη. Πλέγμα με αυτόματες σειρές· ΟΧΙ `columns`, που σπάει τα
στοιχεία στη μέση της στήλης και βγάζει άνισα ύψη. */
.vp-themes__lbl {
font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase;
color: var(--ink-2); margin-bottom: 1.1rem;
}
.vp-themes { display: grid; gap: .1rem; }
@media (min-width: 620px) { .vp-themes { grid-template-columns: 1fr 1fr; column-gap: 2rem; } }
@media (min-width: 1080px) { .vp-themes { grid-template-columns: repeat(3, 1fr); column-gap: 2.6rem; } }
.vp-themes li {
display: flex; align-items: baseline; gap: .7rem;
padding: .62rem 0; border-bottom: 1px solid var(--line);
font-size: var(--t-small); line-height: 1.45;
}
.vp-themes li::before {
content: ''; flex: none; width: .42rem; height: .42rem;
border-right: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
transform: rotate(-45deg); position: relative; top: -.15em;
}
/* ═══ ΜΠΛΟΚ 7, ΤΟ ΑΠΟΤΕΛΕΣΜΑ ════════════════════════════════════════════ */
.vp-out { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); }
/* Η στήλη του δασκάλου είναι η ΨΗΛΗ (φωτογραφία, βιογραφικό, πέντε
πιστοποιήσεις). Της δίνουμε περισσότερο πλάτος ώστε να κοντύνει και να
μη μένει τεράστιο κενό κάτω από την αριστερή. */
@media (min-width: 950px) { .vp-out { grid-template-columns: minmax(0,.92fr) minmax(320px,1.08fr); align-items: start; } }
.vp-out h2 { max-width: 30ch; }
.vp-teacher {
border-left: 1px solid var(--line); padding-left: clamp(1.2rem, 2.4vw, 2rem);
}
/* Η ΦΩΤΟΓΡΑΦΙΑ ΔΙΠΛΑ, ΟΧΙ ΑΠΟ ΠΑΝΩ.
Από πάνω πρόσθετε ολόκληρο το ύψος της και άφηνε κενό στην απέναντι στήλη.
Δίπλα στο πρώτο κείμενο, το ύψος της απορροφάται από κείμενο που υπάρχει ήδη. */
.vp-teacher__head { display: grid; gap: 1.3rem; align-items: start; }
@media (min-width: 560px) { .vp-teacher__head { grid-template-columns: 148px 1fr; } }
.vp-teacher__img {
width: 148px; height: 178px;
object-fit: cover; object-position: 50% 12%;
border-radius: 3px; filter: saturate(.94);
}
.vp-teacher__head h3 { margin-bottom: .7rem; }
.vp-teacher h3 { font-size: var(--t-lead); margin-bottom: 1.1rem; }
.vp-teacher p { font-size: var(--t-small); line-height: 1.65; color: var(--ink-2); margin-bottom: .9rem; }
.vp-teacher b { color: var(--ink); }
.vp-teacher__lbl {
font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase;
color: var(--ink-2); margin: 1.4rem 0 .6rem !important;
}
/* Δύο στήλες: πέντε πιστοποιήσεις σε μία στήλη τραβούσαν 150px ύψος άδικα. */
.vp-certs { display: grid; gap: .7rem 1.6rem; margin-bottom: 1.2rem; }
@media (min-width: 620px) { .vp-certs { grid-template-columns: 1fr 1fr; } }
.vp-certs li { font-size: var(--t-small); line-height: 1.4; }
.vp-certs b { display: block; font-weight: 700; }
.vp-certs span { color: var(--ink-2); font-size: var(--t-micro); letter-spacing: .02em; }
/* ═══ ΜΠΛΟΚ 8, Η ΓΕΦΥΡΑ ═════════════════════════════════════════════════
Λωρίδα, όχι ενότητα. Απευθύνεται σε ένα μόνο κοινό· στους υπόλοιπους
πρέπει να περνά απαρατήρητη. */
.vp-bridge { background: var(--p3); border-block: 1px solid rgba(107,80,41,.2); }
.vp-bridge__in {
display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.4rem;
padding-block: 1.1rem;
}
.vp-bridge p { font-size: var(--t-small); line-height: 1.55; max-width: 74ch; }
.vp-bridge b { color: var(--accent); }
/* ═══ ΜΠΛΟΚ 9, ΜΑΡΤΥΡΙΕΣ ════════════════════════════════════════════════ */
/* Η μαρτυρία αριστερά, η βαθμολογία δεξιά. Πριν η μαρτυρία κρατούσε το μισό
πλάτος και το άλλο μισό έμενε άδειο, ενώ η βαθμολογία ήταν μία ψιλή σειρά στο
τέλος που δεν την πρόσεχε κανείς. */
.vp-voices__top { display: grid; gap: clamp(1.8rem, 3.5vw, 3rem); margin-top: 2rem; }
@media (min-width: 900px) {
.vp-voices__top { grid-template-columns: minmax(0,1fr) minmax(220px,.34fr); align-items: center; }
}
/* ΣΚΟΤΕΙΝΟΣ, ΣΕ ΑΝΟΙΧΤΗ ΕΝΟΤΗΤΑ. Είναι το μόνο σκούρο πλαίσιο εδώ, οπότε το
μάτι πάει πρώτα εκεί. Τα χρυσά αστέρια πάνω σε navy είναι και η πιο δυνατή
αντίθεση που έχει η παλέτα (7,7 προς 1).
ΤΟ «5 / 5» ΕΦΥΓΕ: είναι αριθμός που θέλει αποκωδικοποίηση. Τα αστέρια όχι.
Το «στο Google» μένει γιατί εκεί είναι που η απόδειξη γίνεται επαληθεύσιμη. */
.vp-score {
background: var(--navy); color: var(--cream);
/* Πιο μαλακές γωνίες από τις υπόλοιπες κάρτες (3px). Εδώ είναι σκόπιμο:
η κάρτα λειτουργεί ως σφραγίδα, όχι ως πλαίσιο περιεχομένου. */
border: 0; border-radius: 12px;
padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.2rem, 2.4vw, 1.6rem);
text-align: center;
box-shadow: 0 6px 26px rgba(30,45,64,.18);
}
.vp-score .vp-stars { justify-content: center; gap: .22rem; }
.vp-score .vp-stars svg { width: 26px; height: 26px; fill: var(--gold); }
/* ΣΥΝΘΕΣΗ, ΟΧΙ ΛΙΣΤΑ. Ήταν τέσσερις κεντραρισμένες σειρές η μία κάτω από την
άλλη, που διαβάζονταν ως κατάλογος. Τώρα: ο βαθμός είναι ο ήρωας, από κάτω
ΜΙΑ γραμμή συμφραζομένων, και ο σύνδεσμος χωρισμένος με λεπτή γραμμή ώστε να
διαβάζεται ως ενέργεια.
Το `white-space: nowrap` λύνει τη χήρα: το «σπουδαστών» έμενε μόνο του σε
δεύτερη σειρά. Η λέξη αφαιρέθηκε ούτως ή άλλως, η φράση κοντύνε. */
/* ΜΕΓΑΛΥΤΕΡΗ. Εκατόν δεκαεννιά αξιολογήσεις πέντε αστέρων δεν είναι υποσημείωση,
και στα 16,5px διαβαζόταν σαν να ήταν. */
.vp-score p {
margin-top: .75rem; font-size: clamp(18px, 2vw, 21px); line-height: 1.35;
color: rgba(242,236,206,.82); white-space: nowrap;
}
.vp-score p b { font-weight: 700; color: var(--cream); font-size: 1.18em; }
/* ⚠ Ο ΣΥΝΔΕΣΜΟΣ ΘΕΛΕΙ ΚΛΑΣΗ. Με σκέτο , ο κανόνας `.vp a:not([class])`
στην κορυφή του αρχείου έχει ειδικότητα (0,2,1) και νικά το `.vp-score a`
(0,1,1): ο σύνδεσμος κληρονομούσε το κρεμ της κάρτας αντί για το χρυσό των
αστεριών. ΠΕΜΠΤΗ φορά που το ίδιο μοτίβο ειδικότητας δαγκώνει σε αυτό το
έργο. Η κλάση λύνει και το `:not([class])` και το πρόβλημα. */
.vp-score__link {
display: block; margin-top: 1.3rem; padding-top: 1.15rem;
border-top: 1px solid rgba(242,236,206,.16);
font-size: var(--t-small); color: var(--gold); text-decoration: none;
}
.vp-score__link::after { content: ' \2192'; }
.vp-score__link:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
/* Το `.vp-score__where` («ΣΤΟ GOOGLE») αφαιρέθηκε από το markup: η ίδια λέξη
εμφανιζόταν ΔΥΟ φορές μέσα σε 60 pixels, μαζί με τον σύνδεσμο από κάτω. */
.vp-quote { margin: 0; max-width: 62ch; }
.vp-quote blockquote {
/* Ήταν σε --t-lead (24px) και έπιανε δέκα σειρές, κυριαρχώντας στην ενότητα.
Στα 21px με φαρδύτερη στήλη πέφτει σε επτά, χωρίς να χάσει βάρος. */
margin: 0; font-size: clamp(19px, 1.8vw, 21px); line-height: 1.6; font-style: italic;
border-left: 2px solid var(--accent); padding-left: clamp(1.4rem, 2.4vw, 2.1rem);
}
.vp-quote figcaption,
.vp-voices figcaption {
margin-top: .8rem; font-size: var(--t-micro); letter-spacing: .13em;
text-transform: uppercase; color: var(--ink-2);
}
.vp-quote figcaption { padding-left: clamp(1.4rem, 2.4vw, 2.1rem); }
/* Πλέγμα, ΟΧΙ `columns`. Το columns έσπαγε μαρτυρίες στη μέση και έβγαζε
άνισες στήλες· εδώ κάθε μαρτυρία μένει ακέραιη. */
.vp-voices { display: grid; gap: 1.6rem; margin-top: 3rem; }
@media (min-width: 700px) { .vp-voices { grid-template-columns: 1fr 1fr; gap: 1.8rem 2.4rem; } }
@media (min-width: 1100px) { .vp-voices { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }
/* Το όνομα ακολουθεί ΤΟ ΚΕΙΜΕΝΟ. Με `justify-content: space-between` σπρωχνόταν
στο κάτω μέρος της κάρτας και ξεκρεμόταν από τη μαρτυρία που υπέγραφε. */
.vp-voices figure { margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.vp-voices blockquote { margin: 0; font-size: var(--t-small); line-height: 1.6; color: var(--ink-2); }
/* ═══ ΜΠΛΟΚ 10, ΠΡΑΚΤΙΚΑ ════════════════════════════════════════════════ */
.vp-pr__h { max-width: 36ch; }
.vp-pr { display: grid; gap: 0; margin-top: 2.2rem; }
@media (min-width: 780px) { .vp-pr { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 4vw, 4rem); } }
.vp-pr > div {
display: grid; grid-template-columns: minmax(140px, 34%) 1fr; gap: .8rem;
padding: .85rem 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.vp-pr dt { font-size: var(--t-micro); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); }
.vp-pr dd { margin: 0; font-size: var(--t-small); line-height: 1.5; }
/* ═══ ΜΠΛΟΚ 11, «ΚΙ ΑΝ…» ════════════════════════════════════════════════
ΟΡΑΤΕΣ απαντήσεις, όχι πτυσσόμενες. Ο φόβος που δεν απαντιέται εδώ,
απαντιέται με κλείσιμο της καρτέλας. */
.vp-if__h { margin-bottom: 0; }
.vp-if { display: grid; gap: 1.8rem 2.6rem; margin-top: 2.2rem; }
@media (min-width: 820px) { .vp-if { grid-template-columns: 1fr 1fr; } }
.vp-if > div { border-left: 2px solid rgba(107,80,41,.28); padding-left: 1.2rem; }
.vp-if h3 { font-size: var(--t-lead); margin-bottom: .55rem; }
.vp-if p { font-size: var(--t-small); line-height: 1.65; color: var(--ink-2); }
/* ═══ ΜΠΛΟΚ 12, ΤΙΜΗ ΚΑΙ ΠΛΗΡΩΜΗ ════════════════════════════════════════ */
.vp-buy__h { max-width: 36ch; }
/* Στην ανοιχτή κατάσταση το κενό κάτω από τον τίτλο το δίνει η κάρτα τιμής.
Στην κλειστή δεν υπάρχει κάρτα, οπότε το κείμενο κολλούσε στον τίτλο. */
.vp-buy__h + .vp-closed { margin-top: 1.6rem; }
/* ΕΝΑ ΠΛΕΓΜΑ ΓΙΑ ΟΛΗ ΤΗΝ ΕΝΟΤΗΤΑ.
Αριστερά ό,τι διαβάζεται: κάρτα τιμής, τρόποι, νομικό κείμενο.
Δεξιά ΜΟΝΟ το πλαίσιο πληρωμής, που ανοίγει προς τα κάτω και θέλει ύψος.
Το `display: contents` στα δύο περιβλήματα του viva_pay.php κάνει τα παιδιά
του να γίνουν παιδιά ΑΥΤΟΥ του πλέγματος. Έτσι στοιχίζονται όλα σε δύο
πραγματικές στήλες, χωρίς να αγγιχτεί το κοινό αρχείο πληρωμών. */
.vp-pay { display: grid; gap: 2rem; margin-top: 2.4rem; }
@media (min-width: 960px) {
.vp-pay {
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
column-gap: clamp(2rem, 4vw, 3.6rem); row-gap: 1.8rem;
align-items: start;
}
.vp-pay > .vt-pay { display: contents; }
.vp-pay .vt-pay > .vt-wrap { display: contents; }
/* Ο τίτλος «Τρόποι πληρωμής» περισσεύει: η ενότητα λέει ήδη «Κράτησε τη θέση
σου» και κάθε πλαίσιο αυτοπεριγράφεται. */
.vp-pay .vt-center { display: none; }
.vp-buy__price { grid-column: 1; grid-row: 1; }
.vp-buy__ways { grid-column: 1; grid-row: 2; }
.vp-pay .vt-pay__terms { grid-column: 1; grid-row: 3; }
.vp-pay .vt-pay__methods { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}
.vp-buy__deadline { font-size: var(--t-small); color: var(--ink-2); line-height: 1.6; margin-top: .9rem; }
.vp-buy__deadline b { color: var(--accent); }
.vp-buy__ways > div {
display: grid; grid-template-columns: minmax(130px,32%) 1fr; gap: .8rem;
padding: .85rem 0; border-bottom: 1px solid var(--line); align-items: baseline;
}
.vp-buy__ways dt { font-size: var(--t-micro); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); }
.vp-buy__ways dd { margin: 0; font-size: var(--t-small); line-height: 1.5; }
/* Η ΚΑΡΤΑ ΤΙΜΗΣ ΤΗΣ ΕΝΟΤΗΤΑΣ ΕΓΓΡΑΦΗΣ
-------------------------------------------------------------------------
ΠΑΓΙΔΑ CASCADE, ΠΙΑΣΤΗΚΕ 12 ΣΕΠ 2026. Το `padding` shorthand εδώ ΑΚΥΡΩΝΕ το
`padding-top` που ορίζεται πιο πάνω μαζί με την κάρτα του ήρωα. Αποτέλεσμα:
ο ήρωας είχε 60,8px αέρα πάνω από την τιμή και αυτή η κάρτα μόλις 20,8px.
Μετρήθηκε ότι η απόσταση κορδέλας προς τιμή ήταν **αρνητική, −6px**: η τιμή
ξεκινούσε πριν τελειώσει η κορδέλα, και μόνο η στοίχιση των γραμμών βάσης
έκρυβε τη σύγκρουση. Με τετραψήφια τιμή θα φαινόταν αμέσως.
ΤΟ padding-top ΜΠΑΙΝΕΙ ΜΕΤΑ ΤΟ shorthand, ΠΟΤΕ ΠΡΙΝ. Αν κάποτε προστεθεί
άλλο `padding:` παρακάτω, θα το ακυρώσει ξανά, σιωπηλά.
ΓΙΑΤΙ ΠΕΡΙΣΣΟΤΕΡΟ ΑΠΟ ΤΟΝ ΗΡΩΑ: εδώ η κάρτα έχει φόντο και περίγραμμα, οπότε
η κορδέλα πατά πάνω σε ορατή επιφάνεια και το κενό διαβάζεται πιο σφιχτό.
Με 4rem η απόσταση από την κορδέλα γίνεται ~30px, αρκετή και για τιμή
τεσσάρων ψηφίων με υποδιαστολή. */
.vp-buy__price {
background: var(--p3); border: 1px solid rgba(107,80,41,.22); border-radius: 3px;
padding: clamp(1.3rem, 2.4vw, 1.8rem);
}
/* Και εδώ μόνο με κορδέλα. ΤΟ padding-top ΜΠΑΙΝΕΙ ΜΕΤΑ ΤΟ shorthand: αλλιώς το
`padding` το ακυρώνει σιωπηλά, όπως συνέβη και μετρήθηκε (20,8px αντί 70,4). */
.vp-buy__price:has(.vp-price__tag) { padding-top: clamp(3.9rem, 5vw, 4.4rem); }
/* ── Η ΜΟΡΦΗ ΤΟΥ inc/vt/viva_pay.php ──────────────────────────────────────
Ο μηχανισμός είναι αυτούσιος· αυτό εδώ είναι ΜΟΝΟ η εμφάνισή του, στη νέα
γλώσσα της σελίδας. */
.vt-pay { margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.vt-wrap { max-width: 1320px; margin-inline: auto; padding-inline: var(--pad); }
.vt-pay h2.vt-center { font-size: var(--t-h3); margin-bottom: 1.4rem; }
/* ΔΥΟ ΣΤΗΛΕΣ: όροι αριστερά, τρόποι δεξιά. Σε μία στήλη το πλαίσιο πληρωμής
έμενε 640px φαρδύ και άφηνε μισή σελίδα κενή στα δεξιά του.
Η σειρά στο DOM μένει όροι → τρόποι, που είναι και η σωστή σειρά ανάγνωσης. */
@media (min-width: 900px) {
.vt-pay .vt-wrap {
display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
column-gap: clamp(2rem, 4vw, 3.4rem); align-items: start;
}
.vt-pay h2.vt-center { grid-column: 1 / -1; }
.vt-pay__methods { margin-top: 0; }
}
.vt-pay__terms { max-width: 60ch; }
.vt-pay__terms p { font-size: var(--t-small); line-height: 1.6; color: var(--ink-2); }
.vt-pay__terms a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.vt-pay__accept {
display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem;
font-size: var(--t-small); line-height: 1.5; cursor: pointer;
}
.vt-pay__accept input { width: 1.1rem; height: 1.1rem; margin-top: .28rem; accent-color: var(--accent); flex: none; }
.vt-pay__methods { margin-top: 1.6rem; display: grid; gap: .6rem; align-content: start; }
.vt-pay__methods.is-locked { opacity: .45; }
.vt-pay__method { border: 1px solid var(--line); border-radius: 3px; background: var(--p1); }
.vt-pay__method > summary {
cursor: pointer; list-style: none; padding: .95rem 1.1rem;
font-size: var(--t-small); font-weight: 700;
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.vt-pay__method > summary::-webkit-details-marker { display: none; }
.vt-pay__method > summary::after { content: '+'; color: var(--accent); font-weight: 400; font-size: 1.3em; line-height: 1; }
.vt-pay__method[open] > summary::after { content: '\2212'; }
.vt-pay__body { padding: 0 1.1rem 1.2rem; }
.vt-field { display: grid; gap: .45rem; margin-bottom: 1rem; }
.vt-field label { font-size: var(--t-micro); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); }
.vt-select {
width: 100%; padding: .8rem 1rem; font: inherit; font-size: var(--t-small);
background: var(--p2); color: var(--ink);
border: 1px solid rgba(22,34,47,.25); border-radius: 3px;
}
.vt-btn--pay {
width: 100%; padding: 1rem 1.2rem; border: 0; border-radius: 3px; cursor: pointer;
font: inherit; font-size: var(--t-small); font-weight: 700; letter-spacing: .04em;
background: var(--navy); color: var(--cream);
}
.vt-btn--pay:hover:not(:disabled) { background: var(--deep); }
.vt-btn--pay:disabled, .vt-select:disabled { cursor: not-allowed; }
.vt-pay__note { font-size: var(--t-micro); color: var(--ink-2); line-height: 1.55; margin-top: .8rem; }
.vt-pay__label { font-size: var(--t-micro); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .5rem; }
.vt-copy {
display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
padding: .75rem .9rem; cursor: pointer; text-align: left;
background: var(--p2); border: 1px dashed rgba(107,80,41,.4); border-radius: 3px;
}
.vt-copy code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; color: var(--ink); word-break: break-all; }
.vt-copy__hint { font-size: var(--t-micro); color: var(--accent); white-space: nowrap; }
/* ═══ ΜΠΛΟΚ 13, ΣΥΧΝΕΣ ΕΡΩΤΗΣΕΙΣ ════════════════════════════════════════ */
/* ΟΛΟ ΤΟ ΠΛΑΤΟΣ, στοιχισμένο με το header. Με max-width 80ch οι απαντήσεις
τύλιγαν σε περισσότερες σειρές και το ανοιγμένο accordion ζητούσε άσκοπο ύψος. */
.vp-faq { margin-top: 2rem; border-top: 1px solid var(--line); }
.vp-faq details { border-bottom: 1px solid var(--line); }
/* Έντεκα ερωτήσεις: κάθε 12px στο padding της κάθε μίας είναι 130px συνολικά. */
.vp-faq summary {
cursor: pointer; list-style: none; padding: .8rem 2.2rem .8rem 0;
font-size: var(--t-small); font-weight: 700; line-height: 1.45; position: relative;
}
.vp-faq summary::-webkit-details-marker { display: none; }
.vp-faq summary::after {
content: '+'; position: absolute; right: .2rem; top: .75rem;
color: var(--accent); font-weight: 400; font-size: 1.3em; line-height: 1;
}
.vp-faq details[open] summary::after { content: '\2212'; }
.vp-faq details > div { padding: 0 2.2rem 1rem 0; }
.vp-faq p { font-size: var(--t-small); line-height: 1.7; color: var(--ink-2); }
/* ═══ ΜΠΛΟΚ 14, ΤΕΛΙΚΗ ΚΛΗΣΗ ════════════════════════════════════════════ */
.vp-end { text-align: center; }
.vp-end h2 { max-width: none; }
.vp-end .vp__lead { margin: 1rem auto 0; max-width: 46ch; }
.vp-end__cta { margin-top: 1.8rem; }
.vp-btn--gold { background: var(--gold); color: var(--navy); }
.vp-btn--gold:hover { background: var(--cream); }
/* ═══ ΑΣΤΕΡΙΑ ΑΝΤΙ ΓΙΑ «5 / 5» ═══════════════════════════════════════════
Ο αριθμός θέλει αποκωδικοποίηση· τα αστέρια διαβάζονται πριν προλάβεις να
τα διαβάσεις. Και γίνονται σύνδεσμος προς τις πραγματικές κριτικές, γιατί
κοινωνική απόδειξη που δεν επαληθεύεται δεν είναι απόδειξη. */
.vp-stars { display: inline-flex; gap: .14rem; }
.vp-stars svg { width: 15px; height: 15px; fill: #C9922E; display: block; }
.vp-rate a {
display: inline-flex; align-items: center; gap: .55rem; flex-wrap: wrap;
text-decoration: none; color: inherit;
}
.vp-rate a:hover span { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.vp-rate span { font-size: var(--t-small); font-weight: 700; }
/* ΕΔΩ ΥΠΗΡΧΑΝ ΔΕΥΤΕΡΟΙ κανόνες `.vp-score`, γραμμένοι όταν ο πίνακας ήταν
ανοιχτόχρωμος. Επειδή έρχονταν ΑΡΓΟΤΕΡΑ στο αρχείο με ίδια ειδικότητα,
νικούσαν, και το `color: var(--ink)` έβαφε το «119» σκούρο navy πάνω σε
σκούρο navy. Αόρατο. Αφαιρέθηκαν· ο πίνακας ορίζεται ΜΙΑ φορά, παραπάνω.
ΚΑΝΟΝΑΣ: όταν αλλάζει η μορφή ενός στοιχείου, σβήνεται η παλιά, δεν μένει. */
/* ═══ Η ΚΑΡΤΑ PAYPAL ══════════════════════════════════════════════════════
ΤΟ inc/payment_paypal_horary.php ΕΙΝΑΙ ΠΡΩΤΟΤΥΠΟ ΚΑΙ ΔΕΝ ΑΓΓΙΖΕΤΑΙ.
Ό,τι περισσεύει κρύβεται από εδώ, και η μορφή του φέρνεται στη γλώσσα
της σελίδας. Αν αύριο αλλάξει το αρχείο, εδώ σπάει μόνο η εμφάνιση,
ποτέ η πληρωμή.
ΤΙ ΚΡΥΒΕΤΑΙ ΚΑΙ ΓΙΑΤΙ
#sent → «Για πληρωμή μέσω PayPal, χρησιμοποιήστε το ακόλουθο πεδίο:»
Ο τίτλος του πλαισίου λέει ήδη «Πληρωμή μέσω PayPal».
> .pt-4 → «Παρακαλώ επιλέξτε την προτιμώμενη μέθοδο πληρωμής…»
Επαναλαμβάνει ό,τι λέει το ίδιο το dropdown από πάνω του.
ΠΡΟΣΟΧΗ ΣΤΟ .form-row: υπάρχει ΔΕΥΤΕΡΟ .pt-4 πιο κάτω στο αρχείο, που
περιέχει ΤΟ ΚΟΥΜΠΙ ΤΟΥ PAYPAL. Εκείνο ζει σε .pt-1 > .row, όχι σε .form-row.
Χωρίς αυτόν τον περιορισμό θα κρυβόταν και το κουμπί. Επαληθεύτηκε. */
.vt-pay__body #sent,
.vt-pay__body .form-row .pt-4 { display: none; }
/* ΤΟ ΚΟΥΜΠΙ ΤΟΥ PAYPAL: ΑΠΟΣΤΑΣΗ ΚΑΙ ΠΛΑΙΣΙΟ
-------------------------------------------------------------------------
ΤΟ ΠΡΟΒΛΗΜΑ, ΚΑΙ ΤΟ ΠΡΟΚΑΛΕΣΑΜΕ ΕΜΕΙΣ. Την απόσταση ανάμεσα στο dropdown και
στο κουμπί την έδινε το `.form-row .pt-4` του πρωτοτύπου, δηλαδή ακριβώς το
div που κρύβουμε από πάνω επειδή περιείχε περιττό κείμενο. Μαζί με το κείμενο
έφυγε και ο αέρας: μετρήθηκε απόσταση **0px**, το κουμπί κολλούσε στο πεδίο.
ΚΑΙ ΔΕΝ ΦΑΙΝΟΤΑΝ ΚΟΥΜΠΙ. Το PayPal SDK ζωγραφίζει το λογότυπο μέσα σε στοιχείο
χωρίς περίγραμμα και με διάφανο φόντο. Δίπλα σε ένα dropdown που ΕΧΕΙ πλαίσιο,
διαβαζόταν ως εικόνα, όχι ως κάτι που πατιέται.
Το πλαίσιο μπαίνει στον ΠΕΡΙΕΚΤΗ, όχι στο ίδιο το κουμπί: το εσωτερικό του
κουμπιού το ελέγχει το PayPal μέσα σε iframe και δεν το αγγίζουμε. */
.vt-pay__body #paypal-button-container {
margin-top: 1.15rem;
padding: .55rem;
border: 1px solid rgba(22, 34, 47, .22);
border-radius: 4px;
background: var(--p1);
transition: border-color .15s ease, box-shadow .15s ease;
}
.vt-pay__body #paypal-button-container:hover {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(107, 80, 41, .10);
}
/* Το κείμενο «The safer, easier way to pay» ανήκει στο PayPal και μένει,
αλλά χρειάζεται λίγο αέρα από το πλαίσιο. */
.vt-pay__body #paypal-button-container + * { margin-top: .6rem; }
/* Το dropdown του PayPal να μοιάζει με αυτό της κάρτας, όχι με προεπιλογή. */
/* Το `!important` δεν είναι τεμπελιά: το πρωτότυπο έχει inline
`style="background-color:#F2ECCE"` πάνω στο