/* ===================================================================== ΡΥΘΜΙΣΕΙΣ ΕΜΦΑΝΙΣΗΣ (design tokens) --------------------------------------------------------------------- Χρώματα, γραμματοσειρές και στρογγυλέματα ορίζονται ΜΟΝΟ εδώ. • Για μόνιμη αλλαγή: άλλαξε τις τιμές αυτού του μπλοκ. • Για δοκιμές: άνοιξε τη σελίδα με ?theme=1 → πάνελ «Εμφάνιση» (παλέτες, γραμματοσειρές, χρώμα-χρώμα) και μετά «Αντιγραφή CSS» για να κολλήσεις εδώ το τελικό αποτέλεσμα. ===================================================================== */ :root{ /* ---- γραμματοσειρές ---- */ --font-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; /* τίτλοι */ --font-sans:"Commissioner",-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; /* κείμενο */ --fs-base:17px; /* βασικό μέγεθος κειμένου */ /* ---- παλέτα ---- */ --cocoa:#744233; /* καστανιά: το χρώμα του λογότυπου */ --brown:#3c241a; /* κακάο: κείμενο και βαθιά πάνελ */ --taupe:#8a6a52; /* ζεστό δευτερεύον */ --cream:#f1dbc4; /* άμμος, σκιά */ --paper:#f7e6d6; /* άμμος: φόντο σελίδας */ --paper-2:#f1dbc4; /* φόντο 2ου επιπέδου */ --surface:#f1dbc4; /* κάρτες, πεδία: άμμος σκιά */ --ink:#3c241a; /* κείμενο */ --muted:#7c5f4a; /* κείμενο 2ης σειράς */ --accent:#c58a5c; /* καραμέλα: γεμίσματα, λεπτομέρειες */ --accent-soft:#e9c7a2; --dust:#c49445; /* χρυσόσκονη της εισαγωγής: βαθύς χρυσός */ --dust-glint:#f4dca6; /* χρυσόσκονη: οι λάμψεις */ /* ---- σχήματα ---- */ --radius:9px; --radius-lg:14px; /* ---- χάρτης ---- */ --map-tone:sepia(.3) saturate(.8) hue-rotate(-8deg); /* ζεστός τόνος στον χάρτη της Google */ /* ---- παράγωγα: βγαίνουν από τα πάνω, δεν τα αλλάζεις ---- */ --on-dark:var(--paper); /* κείμενο πάνω σε σκούρο */ --on-dark-soft:color-mix(in srgb,var(--paper) 80%,transparent); --on-dark-border:color-mix(in srgb,var(--paper) 40%,transparent); --on-dark-line:color-mix(in srgb,var(--paper) 20%,transparent); --muted-text:color-mix(in srgb,var(--muted) 80%,var(--ink)); /* μικρά κείμενα: WCAG AA */ --taupe-text:color-mix(in srgb,var(--taupe) 52%,var(--ink)); --accent-ink:color-mix(in srgb,var(--accent) 50%,var(--ink)); /* τόνος για κείμενο/ενδείξεις */ --danger:#a8382b; /* λάθη σε φόρμες */ --success: #32ae64; /* επιβεβαίωση: το κλασικό πράσινο «εγκρίθηκε» */ --on-success:#ffffff; /* κείμενο πάνω στο --success: 4.5:1 */ --line:color-mix(in srgb,var(--ink) 18%,transparent); --disabled:color-mix(in srgb,var(--muted) 45%,transparent); --header-bg:color-mix(in srgb,var(--paper) 93%,transparent); --veil:color-mix(in srgb,var(--ink) 78%,transparent); --scrim:color-mix(in srgb,var(--ink) 55%,transparent); --scrim-strong:color-mix(in srgb,var(--ink) 86%,transparent); --shadow:0 18px 50px -24px color-mix(in srgb,var(--ink) 45%,transparent); --glow:color-mix(in srgb,var(--accent) 22%,transparent); /* απαλό φως πίσω από την πεταλούδα */ --curtain:var(--brown); /* φόντο της εισαγωγής */ --shadow-tab:-6px 0 24px -12px color-mix(in srgb,var(--ink) 55%,transparent); --step:cubic-bezier(.22,.61,.36,1); --step-soft:cubic-bezier(.22,1,.36,1); /* απαλό σβήσιμο, για hover */ --step-curtain:cubic-bezier(.45,0,.25,1); /* σβήσιμο της εισαγωγής: απαλή αρχή, απαλό τέλος */ } /* --------------------------------------------------------------------- Γραμματοσειρές: σερβίρονται από το assets/fonts/, όχι από το Google Fonts. Έτσι η σελίδα δεν στέλνει τη διεύθυνση IP του επισκέπτη στην Google χωρίς συγκατάθεση. Κρατάμε μόνο τα σύνολα χαρακτήρων greek, latin και latin-ext. Η Cormorant Garamond δεν έχει ελληνικά, οπότε τα ελληνικά των τίτλων βγαίνουν με την εφεδρική γραμματοσειρά του --font-serif, όπως και πριν. --------------------------------------------------------------------- */ /* Commissioner, greek */ @font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 200 700; font-display: swap; src: url(/assets/fonts/commissioner-greek-normal.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* Commissioner, latin-ext */ @font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 200 700; font-display: swap; src: url(/assets/fonts/commissioner-latin-ext-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Commissioner, latin */ @font-face { font-family: 'Commissioner'; font-style: normal; font-weight: 200 700; font-display: swap; src: url(/assets/fonts/commissioner-latin-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Cormorant Garamond, latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-ext-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Cormorant Garamond, latin */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Cormorant Garamond, latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-ext-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Cormorant Garamond, latin */ @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Cormorant Garamond, latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-ext-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Cormorant Garamond, latin */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 300; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Cormorant Garamond, latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-ext-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Cormorant Garamond, latin */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Cormorant Garamond, latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-ext-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Cormorant Garamond, latin */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/cormorant-garamond-latin-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } *{box-sizing:border-box} [hidden]{display:none!important} html,body{margin:0;padding:0} body{ background:var(--paper); color:var(--ink); font-family:var(--font-sans); font-weight:300; font-size:var(--fs-base); line-height:1.65; -webkit-font-smoothing:antialiased; } h1,h2,h3,.serif{font-family:var(--font-serif);font-weight:400;letter-spacing:.01em} h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.04;margin:0} h2{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:0 0 .6rem} h3{font-size:1.5rem;line-height:1.2;margin:0 0 .35rem} /* Η Cormorant αποδίδει τα λατινικά πιο λεπτά και μικρά από τα ελληνικά. Μικρή οπτική διόρθωση, ώστε το όνομα να δένει μέσα σε ελληνικό τίτλο. */ .en{font-weight:500;font-size:.96em;letter-spacing:.015em} p{margin:0 0 1rem;max-width:62ch} a{color:inherit} img{max-width:100%;display:block} :focus-visible{outline:2px solid var(--cocoa);outline-offset:3px;border-radius:6px} .wrap{width:min(1180px,92vw);margin-inline:auto} .lede{font-size:1.12rem;color:var(--muted-text);font-weight:300} .eyebrow{font-size:.82rem;letter-spacing:.12em;color:var(--taupe-text);margin:0 0 .8rem} .skip{position:absolute;left:-999px;top:0;background:var(--brown);color:var(--paper);padding:.7rem 1rem;z-index:99} .skip:focus{left:.5rem;top:.5rem} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:.5rem;justify-content:center; font:inherit;font-size:.95rem;font-weight:400;letter-spacing:.02em; padding:.78rem 1.5rem;border:1px solid var(--cocoa);background:var(--cocoa);color:var(--on-dark); border-radius:var(--radius);cursor:pointer;text-decoration:none; transition:background .45s var(--step-soft),color .45s var(--step-soft), border-color .45s var(--step-soft),transform .45s var(--step-soft), box-shadow .45s var(--step-soft); } .btn:hover{background:var(--brown);border-color:var(--brown)} .btn.ghost{background:transparent;color:var(--cocoa);border-color:var(--line)} .btn.ghost:hover{background:transparent;border-color:var(--cocoa);color:var(--cocoa)} .btn.accent{background:var(--cocoa);border-color:var(--cocoa);color:var(--on-dark)} .btn.accent:hover{background:var(--brown);border-color:var(--brown);filter:none} .band-dark .btn.accent,.site-footer .btn.accent{background:var(--paper);border-color:var(--paper);color:var(--brown)} .band-dark .btn.accent:hover,.site-footer .btn.accent:hover{background:var(--cream);border-color:var(--cream);color:var(--brown)} .btn[disabled]{opacity:.35;cursor:not-allowed} .btn.small{padding:.5rem 1rem;font-size:.86rem} /* ---------- header ---------- */ .site-header{ position:sticky;top:0;z-index:40;background:var(--header-bg); backdrop-filter:blur(8px);border-bottom:1px solid var(--line); } .header-in{display:flex;align-items:center;gap:1.4rem;height:76px} .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;margin-right:auto} .brand img{width:38px;height:38px} .brand b{font-family:var(--font-serif);font-weight:400;font-size:1.5rem;letter-spacing:.14em;display:block;line-height:1} .brand span{font-size:.66rem;letter-spacing:.24em;color:var(--taupe-text);display:block;margin-top:2px} .nav{display:flex;gap:.3rem} .nav button{ font:inherit;font-size:.93rem;background:none;border:0;cursor:pointer;color:var(--muted-text); padding:.5rem .8rem;border-bottom:1px solid transparent;transition:color .2s,border-color .2s; } .nav button:hover{color:var(--ink)} .nav button[aria-current="page"]{color:var(--brown);border-bottom-color:var(--accent-ink)} .burger{display:none;background:var(--surface);border:0;border-radius:8px;padding:.55rem .8rem;font:inherit;cursor:pointer;color:var(--ink)} /* ---------- sticky right booking tab ---------- */ .tab-book{ position:fixed;right:0;top:52%;transform:translateY(-50%);z-index:45; writing-mode:vertical-rl; background:var(--cocoa);color:var(--on-dark);border:0;border-radius:14px 0 0 14px; font:inherit;font-size:.9rem;letter-spacing:.1em;padding:1.35rem .72rem;cursor:pointer; box-shadow:var(--shadow-tab); transition:padding-left .4s var(--step-soft),background .4s var(--step-soft); } .tab-book:hover{padding-left:1rem;background:var(--brown)} .tab-book .dot{display:block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin:0 auto .7rem} /* ---------- hero ---------- */ .hero{display:grid;grid-template-columns:1.05fr .95fr;min-height:calc(100vh - 76px)} .hero-copy{display:flex;flex-direction:column;justify-content:center;padding:5rem 5vw 5rem max(4vw,calc((100vw - 1180px)/2))} .hero-copy h1 em{font-style:italic;color:var(--cocoa)} .hero-actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.8rem} .hero-panel{position:relative;background:var(--cocoa);overflow:hidden;display:grid;place-items:center; border-bottom-left-radius:calc(var(--radius-lg) * 2)} /* η εικόνα ακουμπά δεξιά και πάνω: στρογγυλεύει η ελεύθερη γωνία */ .hero-panel .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0} .hero-panel .veil{position:absolute;inset:0;background:var(--cocoa);opacity:.26;mix-blend-mode:multiply} .hero-panel .mark{position:relative;width:min(38%,230px);opacity:.92} .hero-panel::after{ content:"";position:absolute;inset:0; background:radial-gradient(120% 90% at 70% 15%,rgba(255,255,255,.13),transparent 60%); } /* ---------- sections ---------- */ .section{padding:5.5rem 0} .section.tight{padding:3.5rem 0} .section-head{max-width:60ch;margin-bottom:2.6rem} .two{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center} /* Εικόνα αριστερά, κείμενο δεξιά. Στον κώδικα το κείμενο μένει πρώτο, ώστε οι αναγνώστες οθόνης και τα κινητά να ξεκινούν από τον τίτλο. */ .two.swap>*:first-child{order:2} .two.swap>*:last-child{order:1} .band{background:var(--cream)} .band-dark{background:var(--brown);color:var(--paper)} /* η ζώνη κράτησης παίρνει το χρώμα του λογότυπου, ώστε να μη διαβάζεται ενιαία με το footer που είναι στο ίδιο βαθύ καφέ */ .band-cta{background:var(--cocoa)} .band-dark .lede,.band-dark .eyebrow{color:var(--on-dark-soft)} .band-dark .btn.ghost{color:var(--paper);border-color:var(--on-dark-border)} .band-dark .btn.ghost:hover{border-color:var(--paper);color:var(--paper)} /* price list */ .menu{margin:0;padding:0;list-style:none} .menu li{ display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:.9rem; padding:.85rem 0;border-bottom:1px dotted var(--line); } .menu .nm{font-size:1.05rem} .menu .nm small{display:block;color:var(--muted-text);font-size:.85rem;line-height:1.4;max-width:46ch} .menu .dur{color:var(--taupe-text);font-size:.9rem;font-variant-numeric:tabular-nums} .menu .pr{font-family:var(--font-serif);font-size:1.45rem;min-width:3.4rem;text-align:right} /* Ο τίτλος πάνω αριστερά. Η φωτογραφία και ο κατάλογος μοιράζονται την ίδια σειρά και κεντράρονται κάθετα, ώστε ο κατάλογος να στέκεται δίπλα στην εικόνα. */ .svc-group{ display:grid;grid-template-columns:.85fr 1.15fr;column-gap:4rem;row-gap:1.2rem; padding:3.5rem 0;border-top:1px solid var(--line); } .svc-group:first-of-type{border-top:0;padding-top:1rem} .svc-head{grid-column:1} .svc-group>.shot{grid-column:1;aspect-ratio:4/5;align-self:center} .svc-group>.menu{grid-column:2;grid-row:2;align-self:center} .svc-head h2{font-size:2rem;margin-bottom:.4rem} .svc-head p{font-size:.95rem;color:var(--muted-text);margin:0} .menu.pick li{grid-template-columns:1fr auto auto auto} /* Το γέμισμα ξεχωρίζει μόλις 1.1:1 από τη σελίδα, οπότε το σχήμα του κουμπιού δεν φαινόταν. Το περίγραμμα είναι στο 3.5:1, όσο ζητά το 1.4.11. */ .menu .add{ font:inherit;font-size:.82rem;background:var(--surface);color:var(--cocoa); border:1px solid color-mix(in srgb,var(--cocoa) 70%,transparent); border-radius:9px;padding:.4rem .85rem;cursor:pointer;white-space:nowrap; } .menu .add:hover{background:var(--accent-soft)} .group-title{ font-family:var(--font-serif);font-size:1.9rem;margin:2.8rem 0 .4rem; display:flex;align-items:center;gap:1rem; } .group-title::after{content:"";flex:1;height:1px;background:var(--line)} .group-title:first-child{margin-top:0} /* how it works */ .steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:3rem} .step-n{font-family:var(--font-serif);font-size:3.2rem;line-height:1;color:var(--accent-ink);display:block;margin-bottom:.4rem} .steps3 h3{font-size:1.45rem;margin-bottom:.3rem} .steps3 p{font-size:.97rem;color:var(--muted-text);margin:0} /* faq */ .faq{border-top:1px solid var(--line);max-width:74ch} .faq details{border-bottom:1px solid var(--line)} .faq summary{ list-style:none;cursor:pointer;padding:1.15rem 0;font-size:1.12rem; display:flex;align-items:center;gap:1rem; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";margin-left:auto;color:var(--cocoa);font-size:1.3rem;line-height:1} .faq details[open] summary::after{content:"−"} .faq p{padding:0 0 1.2rem;color:var(--muted-text);font-size:.98rem;max-width:64ch;margin:0} /* gallery */ .gal{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .gal-more{display:flex;justify-content:center;margin-top:2.2rem} .gal-more .btn[hidden]{display:none} .gal button{ position:relative;border:0;padding:0;cursor:pointer;aspect-ratio:3/4;border-radius:var(--radius-lg); background:var(--cream);overflow:hidden;display:grid;place-items:center; } .gal button img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--step)} .gal button:hover img{transform:scale(1.04)} /* Η λεζάντα κάθεται πάνω στη φωτογραφία, άρα το φόντο της δεν είναι γνωστό. Το σκούρο πέπλο μένει σε πλήρη ένταση όσο ψηλά φτάνει το κείμενο και σβήνει μόνο στα τελευταία 1.3rem, ώστε η αντίθεση να κρατά ακόμη και πάνω σε πολύ ανοιχτόχρωμη φωτογραφία. Με απλό gradient έπεφτε στο 2.2:1. */ .gal .cap{ position:absolute;left:0;right:0;bottom:0;padding:1.5rem .8rem .7rem;font-size:.82rem; color:var(--on-dark);text-align:left; background:linear-gradient(to top,var(--scrim-strong) 0 calc(100% - 1.3rem),transparent 100%); } .shot{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--cream)} .shot img{width:100%;height:100%;object-fit:cover;display:block} /* contact */ .info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem} .info h2{font-size:1.25rem;font-weight:400} .info p{font-size:.98rem;color:var(--muted-text)} .field{display:block;margin-bottom:1.1rem} .field span{display:block;font-size:.85rem;color:var(--muted-text);margin-bottom:.35rem} .field input,.field textarea,.field select{ width:100%;font:inherit;font-size:.98rem;padding:.8rem .95rem; /* γεμάτο πεδίο, χωρίς περίγραμμα: το σχήμα το δίνει το γέμισμα */ border:2px solid transparent;border-radius:var(--radius);color:var(--ink); background:color-mix(in srgb,var(--taupe) 13%,var(--surface)); transition:background .35s var(--step-soft),border-color .25s var(--step-soft); } .field input:hover,.field textarea:hover,.field select:hover{ background:color-mix(in srgb,var(--taupe) 20%,var(--surface)); } .field input:focus,.field textarea:focus,.field select:focus{ outline:none;border-color:var(--cocoa); background:color-mix(in srgb,var(--taupe) 8%,var(--surface)); } /* το κείμενο οδηγίας μέσα στο πεδίο σβήνει μόλις το πατήσεις */ .field input::placeholder,.field textarea::placeholder{color:var(--taupe-text);opacity:1} .field input:focus::placeholder,.field textarea:focus::placeholder{color:transparent} .field textarea{min-height:120px;resize:vertical} .map-ph{ position:relative;overflow:hidden; aspect-ratio:16/10;background:var(--cream);border:0;border-radius:var(--radius-lg); color:var(--taupe-text);font-size:.9rem; } /* contact */ /* Τρεις στήλες στο πλάτος του περιεχομένου τους, με ίσα κενά ανάμεσα: με ίσες στήλες η πρώτη έμενε μισοάδεια και τα κενά έμοιαζαν άνισα. */ .contact-band{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:3.5rem} .contact-band .hours{min-width:18rem;column-gap:0} .contact-band .hours dd{padding-left:1.5rem} .contact-band h2{font-size:1.35rem;margin-bottom:1rem;color:var(--paper)} .contact-band p{font-size:1rem;margin:0;color:var(--on-dark-soft)} .phone{font-family:var(--font-serif);font-size:2.3rem;line-height:1.1;color:var(--accent);text-decoration:none;display:block;margin-bottom:.4rem} .phone:hover{text-decoration:underline} .band-dark .hours dt{color:var(--on-dark-soft);border-bottom-color:var(--on-dark-line)} .band-dark .hours dd{color:var(--paper);border-bottom-color:var(--on-dark-line)} .hours{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.1rem .8rem;font-size:.98rem} .hours dt{color:var(--muted-text);padding:.35rem 0} .hours dd{margin:0;padding:.35rem 0;text-align:right;font-variant-numeric:tabular-nums} .hours dt+dd{border-bottom:1px dotted var(--line)} .hours dt{border-bottom:1px dotted var(--line)} .hours dt:last-of-type,.hours dd:last-of-type{border-bottom:0} .contact-main{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:start} .contact-note{font-size:.9rem;color:var(--muted-text);margin-top:.8rem} /* footer */ .site-footer{background:var(--brown);color:var(--on-dark-soft);padding:3.5rem 0 2.5rem;font-size:.92rem} /* Η μάρκα παίρνει μιάμιση στήλη, οι τρεις άλλες από μία. Όλες ξεκινούν με τίτλο h4 στο ίδιο ύψος, ώστε η σειρά των τίτλων να διαβάζεται ευθεία. */ .footer-in{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:2rem;align-items:start} .footer-in > div > p{margin:0;font-size:.93rem;line-height:1.75} .foot-logo{display:flex;align-items:center;gap:.55rem;letter-spacing:.14em} .site-footer .foot-logo img{width:30px;margin:0} /* Το κείμενο της μάρκας σε δύο γραμμές, ώστε το κουμπί από κάτω να μη μοιάζει με ουρά μιας ατέλειωτης παραγράφου. */ .foot-brand p{max-width:30ch} .foot-brand .btn{margin-top:1.4rem} .footer-in > div > p.foot-note{margin-top:.9rem;font-size:.84rem;line-height:1.6;max-width:30ch} /* Το ωράριο του υποσέλιδου: ίδιο περιεχόμενο με της επικοινωνίας, αλλά χωρίς τις διάστικτες γραμμές και χωρίς να σπρώχνει τις ώρες στην άκρη. */ .site-footer .hours{ display:grid;grid-template-columns:auto auto;justify-content:start; gap:.15rem 1rem;font-size:.93rem;line-height:1.75; } .site-footer .hours dt{color:var(--on-dark-soft);padding:0;border:0} .site-footer .hours dd{margin:0;padding:0;border:0;color:var(--paper);text-align:left} .site-footer img{width:46px;margin-bottom:.9rem} .site-footer a{color:var(--on-dark-soft);text-decoration:none} .site-footer a:hover{color:var(--paper);text-decoration:underline} .site-footer .btn.ghost{color:var(--paper);border-color:var(--on-dark-border)} .site-footer h2{font-family:var(--font-serif);font-weight:400;font-size:1.25rem;color:var(--paper);margin:0 0 .6rem} /* Ελάχιστος στόχος 24x24: με γραμμή 17px χρειάζονται εσωτερικά περιθώρια. */ .legal a,.legal button{display:inline-block;padding:.32rem 0;min-height:24px} .legal button{font:inherit;font-size:inherit;background:none;border:0;cursor:pointer;color:inherit;text-decoration:none} .legal button:hover{color:var(--paper);text-decoration:underline} .legal{border-top:1px solid var(--on-dark-line);margin-top:2.5rem;padding-top:1.2rem;font-size:.82rem;opacity:.7;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} /* ---------- ενδείξεις φόρτωσης ---------- Εμφανίζονται μετά από 300ms (όσο το SKEL_DELAY του app.js), ώστε μια γρήγορη απάντηση να μην προκαλεί αναβόσβημα. Με μειωμένη κίνηση μένουν ορατές αλλά ακίνητες. */ .skel-wrap,.skel-row,.loader-mark{opacity:0;animation:skelIn .25s ease .3s forwards} @keyframes skelIn{to{opacity:1}} .skel{ display:block;border-radius:6px;height:.9rem; background:linear-gradient(90deg, color-mix(in srgb,var(--taupe) 13%,transparent) 0%, color-mix(in srgb,var(--taupe) 24%,transparent) 50%, color-mix(in srgb,var(--taupe) 13%,transparent) 100%); background-size:200% 100%;animation:shimmer 1.5s linear infinite; } @keyframes shimmer{from{background-position:100% 0}to{background-position:-100% 0}} .skel.line{width:80%;margin-bottom:1.2rem} .skel.title{height:1.6rem;width:45%;margin:0 auto} .svc-head .skel.title{margin:0 0 .7rem} .skel.name{width:60%}.skel.w0{width:62%}.skel.w1{width:48%}.skel.w2{width:70%} .skel.short{width:2.6rem} .skel.shot{aspect-ratio:4/5;height:auto;border-radius:var(--radius-lg)} .skel.round{width:38px;height:38px;border-radius:50%;flex:none} .skel.day{aspect-ratio:1;height:auto;max-height:52px;border-radius:var(--radius)} .skel.slot{height:2.6rem;border-radius:var(--radius)} .skel.tile{aspect-ratio:1;height:auto;border-radius:var(--radius-lg)} /* ο σκελετός της γκαλερί πιάνει όλο το πλέγμα, όχι ένα κελί του */ .gal>.skel-wrap{grid-column:1/-1} #recent .skel-gal{grid-template-columns:repeat(3,1fr)} .skel.pill{width:9rem;height:1.8rem;border-radius:999px;margin:0 auto 1.1rem} .skel.when{height:5.5rem;border-radius:var(--radius-lg);margin-bottom:1.4rem} .skel-row{display:grid;grid-template-columns:1fr 3rem 3rem;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line);list-style:none} .skel-cal-head{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem} .skel-slots{margin-top:1.6rem} .skel-pair{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line)} .skel-pair .skel.name{width:40%} /* Κουμπί σε αναμονή: κύκλος που γυρίζει δίπλα στο κείμενο. */ .btn.busy{cursor:progress} .btn.busy::before{ content:"";width:1em;height:1em;flex:none;border-radius:50%; border:2px solid currentColor;border-right-color:transparent; opacity:0;animation:spin .8s linear infinite,skelIn .2s ease .3s forwards; } @keyframes spin{to{transform:rotate(360deg)}} /* Μεγάλη αναμονή: η πεταλούδα «αναπνέει». */ .loader-mark{text-align:center;padding:3rem 1rem} .loader-mark img{width:64px;height:auto;display:block;margin:0 auto 1rem;animation:breathe 2.4s ease-in-out infinite} .loader-mark p{color:var(--muted-text);margin:0 auto;font-size:.95rem} @keyframes breathe{0%,100%{transform:scale(.92);opacity:.55}50%{transform:scale(1.04);opacity:1}} @media (prefers-reduced-motion:reduce){ .skel,.loader-mark img{animation:none} .btn.busy::before{animation:skelIn .2s ease .3s forwards;border-right-color:currentColor;opacity:.6} } /* ---------- booking drawer ---------- */ .scrim{position:fixed;inset:0;background:var(--scrim);opacity:0;pointer-events:none;transition:opacity .3s var(--step);z-index:60} .scrim.open{opacity:1;pointer-events:auto} .drawer{ position:fixed;top:0;right:0;height:100dvh;width:min(560px,100vw);background:var(--paper);z-index:70; transform:translateX(102%);transition:transform .4s var(--step);display:flex;flex-direction:column;border-radius:18px 0 0 18px;overflow:hidden; box-shadow:var(--shadow); } .drawer.open{transform:none} .drawer-head{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.6rem;border-bottom:1px solid var(--line)} .drawer-head h2{font-size:1.6rem;margin:0} .drawer-head .x{margin-left:auto;background:var(--surface);border:0;border-radius:50%;width:38px;height:38px;font-size:1.1rem;cursor:pointer;color:var(--muted-text);transition:background .35s var(--step-soft)} .drawer-head .x:hover{background:var(--cream)} .steps{display:flex;gap:.4rem;margin:0;padding:0 1.6rem 1rem;list-style:none;border-bottom:1px solid var(--line);font-size:.82rem;color:var(--taupe-text)} .steps li{flex:1;min-width:0;padding-top:.5rem;border-top:2px solid var(--line);white-space:nowrap;transition:border-color .3s,color .3s} .steps li.on{border-top-color:var(--cocoa);color:var(--brown)} .steps li.done{border-top-color:var(--taupe-text)} /* τα ολοκληρωμένα βήματα είναι κουμπιά επιστροφής */ .steps button{ width:100%;font:inherit;color:var(--taupe-text);background:none;border:0;padding:0;cursor:pointer; text-align:left;min-height:24px;text-decoration:underline;text-decoration-color:transparent; text-underline-offset:3px;transition:color .3s,text-decoration-color .3s; } .steps button:hover{color:var(--brown);text-decoration-color:currentColor} .drawer-body{flex:1;overflow:auto;padding:1.6rem} .drawer-foot{border-top:1px solid var(--line);padding:1rem 1.6rem 1.3rem;background:var(--paper-2)} .total{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem;font-size:.95rem;color:var(--muted-text)} .total b{font-family:var(--font-serif);font-size:1.9rem;font-weight:400;color:var(--ink);margin-left:auto} /* δεξιά: το σύνολο και από κάτω του η προκαταβολή, στην ίδια γραμμή με την περιγραφή */ .total .amt{margin-left:auto;text-align:right;line-height:1.15} .total .amt b{display:block} .total .amt small{display:block;font-size:.84rem;color:var(--cocoa);margin-top:.15rem} /* Η δεύτερη γραμμή του υποσέλιδου: η προκαταβολή. Μικρότερη από το σύνολο, γιατί το σύνολο είναι η τιμή της υπηρεσίας και αυτό μια δόση της. */ .total.sub{margin-top:-.5rem;font-size:.9rem} .total.sub b{font-size:1.25rem;color:var(--cocoa)} /* Η ανακοίνωση της προκαταβολής, στην κορυφή του πρώτου βήματος. */ .drawer-note{ margin:0 0 1.2rem;padding:.75rem .9rem;border-radius:var(--radius); background:var(--cream);color:var(--ink);font-size:.9rem;line-height:1.55;max-width:none; } .foot-actions{display:flex;gap:.7rem} .foot-actions .btn{flex:1} /* το «Πίσω» παίρνει μόνο τον χώρο που χρειάζεται, το κύριο κουμπί τον υπόλοιπο */ .foot-actions .btn.ghost{flex:0 0 auto;padding-inline:1.4rem} .drawer-lead{color:var(--muted-text);font-size:.93rem;margin-top:0} .drawer-lead b{font-weight:500} .drawer-fine{font-size:.85rem;color:var(--muted-text);margin:1.2rem 0 0} /* βήμα 3: η σύνοψη σε μία κάρτα, με επιστροφή στο ημερολόγιο */ .recap{ display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.4rem; background:var(--cream);border-radius:var(--radius-lg);padding:.9rem 1.1rem; } .recap-tx{flex:1;min-width:0} .recap-tx b{display:block;font-weight:500;color:var(--ink)} .recap-tx span{display:block;font-size:.88rem;color:var(--muted-text);margin-top:.15rem} .recap-edit{ font:inherit;font-size:.88rem;color:var(--cocoa);background:none;border:0;padding:.2rem 0;cursor:pointer; text-decoration:underline;text-underline-offset:3px;min-height:24px;white-space:nowrap; } .remember{display:flex;align-items:flex-start;gap:.6rem;font-size:.92rem;color:var(--ink);cursor:pointer;margin-top:-.2rem} .remember input{width:18px;height:18px;margin:.15rem 0 0;accent-color:var(--cocoa);flex:none} /* Στο κινητό το drawer πιάνει όλη την οθόνη: πιο σφιχτά περιθώρια, ώστε το ημερολόγιο και οι ώρες να χωρούν χωρίς να κρύβονται πίσω από το υποσέλιδο. */ @media (max-width:600px){ .drawer-head{padding:.8rem 1rem} .drawer-head h2{font-size:1.4rem} .steps{padding:0 1rem .7rem;font-size:.8rem;gap:.3rem} /* Τέσσερα ονόματα δεν χωρούν δίπλα δίπλα: φαίνεται ολόκληρο μόνο το τρέχον βήμα, τα άλλα με τον αριθμό τους. Οι αναγνώστες οθόνης ακούν όλα τα ονόματα. */ .steps li.on{flex:3} .steps li:not(.on) .t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .drawer-body{padding:1.1rem 1rem} .drawer-foot{padding:.7rem 1rem .9rem} .total{margin-bottom:.6rem;font-size:.9rem} .total .amt b{font-size:1.5rem} .total .amt small{font-size:.8rem} .cal{gap:4px} } .svc{display:block;border:0;border-radius:var(--radius);padding:.9rem 1rem;margin-bottom:.35rem;cursor:pointer;background:transparent;transition:background .2s} .svc:hover{background:color-mix(in srgb,var(--cream) 60%,transparent)} /* Το γέμισμα από μόνο του έχει αντίθεση 1.31:1 με το φόντο, δηλαδή η επιλογή δεν φαίνεται σε χαμηλή όραση. Το περίγραμμα ανεβάζει την ένδειξη σε 6.7:1. */ .svc.sel,.svc.sel:hover{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--cocoa)} .svc input{position:absolute;opacity:0;width:0;height:0} .svc-row{display:flex;align-items:baseline;gap:.8rem} .svc-row .n{font-size:1rem} .svc-row .d{color:var(--taupe-text);font-size:.85rem;margin-left:auto;font-variant-numeric:tabular-nums} .svc-row .p{font-family:var(--font-serif);font-size:1.25rem;min-width:2.8rem;text-align:right} .drawer-body h3.gr{font-size:1.35rem;margin:1.6rem 0 .7rem;color:var(--cocoa)} .drawer-body h3.gr:first-child{margin-top:0} .cal-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.9rem} .cal-head b{font-family:var(--font-serif);font-weight:400;font-size:1.5rem;flex:1;text-align:center} .cal-head button{width:38px;height:38px;border:0;background:var(--surface);border-radius:50%;cursor:pointer;font-size:1rem;color:var(--brown);transition:background .35s var(--step-soft)} .cal-head button:hover:not([disabled]){background:color-mix(in srgb,var(--taupe) 26%,var(--surface))} .cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .cal .dow{text-align:center;font-size:.75rem;color:var(--taupe-text);padding-bottom:.3rem} .cal button{ aspect-ratio:1;max-height:52px;border:0;background:var(--surface);border-radius:var(--radius); font:inherit;font-size:.95rem;cursor:pointer;color:var(--ink);position:relative; transition:background .35s var(--step-soft); } .cal button:hover:not([disabled]){background:color-mix(in srgb,var(--taupe) 26%,var(--surface))} .cal button[disabled]{background:transparent;color:var(--disabled);cursor:not-allowed} .cal button.sel,.cal button.sel:hover{background:var(--cocoa);color:var(--on-dark)} .cal button.has::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:6px;width:6px;height:6px;border-radius:50%;background:var(--accent-ink)} .cal button.sel.has::after{background:var(--accent-soft)} .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px} #slots-wrap h3.slots-title{margin-top:1.6rem;scroll-margin-top:1rem} .slots button{font:inherit;font-size:.95rem;padding:.65rem 0;border:0;background:var(--surface);border-radius:var(--radius);cursor:pointer;color:var(--ink);font-variant-numeric:tabular-nums;transition:background .35s var(--step-soft)} .slots button:hover{background:color-mix(in srgb,var(--taupe) 26%,var(--surface))} .slots button.sel,.slots button.sel:hover{background:var(--cocoa);color:var(--on-dark)} .empty{background:color-mix(in srgb,var(--cream) 55%,transparent);padding:1.2rem;text-align:center;color:var(--muted-text);font-size:.92rem;border-radius:var(--radius-lg);margin-top:1.4rem} .summary{background:var(--cream);border-radius:var(--radius-lg);padding:1.1rem 1.2rem;margin-bottom:1.4rem} .summary dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;margin:0;font-size:.95rem} .summary dt{color:var(--muted-text)} .summary dd{margin:0;text-align:right} .done-panel{text-align:center;padding:2.2rem 1rem;position:relative} /* Κομφετί, μόνο με CSS. Το JavaScript βάζει απλώς τα κενά κομμάτια . Για να μοιάζει αληθινό, η κίνηση χωρίζεται σε τρία ανεξάρτητα μέρη: - οριζόντια (translate): ανοίγει γρήγορα προς τα έξω και μετά παρασύρεται, - κάθετα (transform): πετάγεται προς τα πάνω και πέφτει με βαρύτητα, - το ίδιο το χαρτάκι (::before): γυρίζει στον χώρο και ταλαντεύεται, οπότε στενεύει, φαρδαίνει και σκουραίνει σαν να πιάνει φως. Χωρίς οριζόντια κύλιση, και κρυφό με λιγότερη κίνηση. */ .confetti{position:absolute;inset:0;overflow-x:clip;overflow-y:visible;pointer-events:none;z-index:2} .confetti i{ position:absolute;left:50%;top:4rem;opacity:0; animation: confettiX var(--d) cubic-bezier(.15,.8,.35,1) var(--delay) both, confettiY var(--d) linear var(--delay) both; } .confetti i::before{ content:"";display:block;width:var(--w);height:var(--h);margin-left:calc(var(--w) / -2); background:var(--c);border-radius:var(--br); animation:confettiFlip var(--flip) linear var(--delay) infinite; } @keyframes confettiX{ 0% {translate:0 0;opacity:0} 3% {opacity:1} 80% {opacity:1} 100%{translate:calc(var(--x) * 1.35) 0;opacity:0} } @keyframes confettiY{ 0% {transform:translateY(0);animation-timing-function:cubic-bezier(.2,.9,.4,1)} 22% {transform:translateY(var(--y));animation-timing-function:cubic-bezier(.45,0,.9,.6)} 100%{transform:translateY(calc(var(--y) + var(--fall)))} } @keyframes confettiFlip{ 0% {transform:translateX(0) rotateZ(var(--rz)) rotateX(0) rotateY(0);filter:brightness(1)} 25% {transform:translateX(var(--sway)) rotateZ(calc(var(--rz) + 40deg)) rotateX(90deg) rotateY(45deg);filter:brightness(.75)} 50% {transform:translateX(0) rotateZ(calc(var(--rz) + 80deg)) rotateX(180deg) rotateY(90deg);filter:brightness(1.1)} 75% {transform:translateX(calc(var(--sway) * -1)) rotateZ(calc(var(--rz) + 40deg)) rotateX(270deg) rotateY(135deg);filter:brightness(.8)} 100%{transform:translateX(0) rotateZ(var(--rz)) rotateX(360deg) rotateY(180deg);filter:brightness(1)} } .confetti i:nth-child(1){--c:var(--accent);--x:-21px;--y:-108px;--fall:408px;--d:2.57s;--delay:0.48s;--flip:0.85s;--rz:33deg;--sway:0px;--w:5px;--h:12px;--br:1px} .confetti i:nth-child(2){--c:var(--cocoa);--x:-179px;--y:-137px;--fall:275px;--d:2.85s;--delay:0.52s;--flip:0.53s;--rz:177deg;--sway:13px;--w:5px;--h:12px;--br:1px} .confetti i:nth-child(3){--c:var(--accent-soft);--x:54px;--y:-79px;--fall:270px;--d:2.23s;--delay:0.57s;--flip:0.86s;--rz:140deg;--sway:-5px;--w:5px;--h:12px;--br:1px} .confetti i:nth-child(4){--c:var(--taupe);--x:8px;--y:-100px;--fall:340px;--d:2.73s;--delay:0.46s;--flip:0.67s;--rz:180deg;--sway:14px;--w:5px;--h:5px;--br:1px} .confetti i:nth-child(5){--c:var(--accent-ink);--x:91px;--y:-135px;--fall:297px;--d:2.43s;--delay:0.37s;--flip:0.96s;--rz:72deg;--sway:10px;--w:5px;--h:5px;--br:50%} .confetti i:nth-child(6){--c:var(--brown);--x:-191px;--y:-168px;--fall:370px;--d:2.37s;--delay:0.58s;--flip:0.53s;--rz:68deg;--sway:6px;--w:4px;--h:10px;--br:1px} .confetti i:nth-child(7){--c:var(--accent);--x:29px;--y:-148px;--fall:368px;--d:2.47s;--delay:0.43s;--flip:0.51s;--rz:74deg;--sway:12px;--w:3px;--h:12px;--br:1px} .confetti i:nth-child(8){--c:var(--cocoa);--x:91px;--y:-169px;--fall:334px;--d:2.59s;--delay:0.52s;--flip:0.61s;--rz:92deg;--sway:14px;--w:3px;--h:16px;--br:1px} .confetti i:nth-child(9){--c:var(--accent-soft);--x:63px;--y:-157px;--fall:327px;--d:2.37s;--delay:0.42s;--flip:1.08s;--rz:145deg;--sway:-5px;--w:5px;--h:5px;--br:1px} .confetti i:nth-child(10){--c:var(--taupe);--x:-127px;--y:-127px;--fall:397px;--d:2.71s;--delay:0.38s;--flip:1.09s;--rz:38deg;--sway:-7px;--w:6px;--h:6px;--br:50%} .confetti i:nth-child(11){--c:var(--accent-ink);--x:-75px;--y:-137px;--fall:272px;--d:2.27s;--delay:0.5s;--flip:0.65s;--rz:108deg;--sway:-4px;--w:4px;--h:12px;--br:1px} .confetti i:nth-child(12){--c:var(--brown);--x:202px;--y:-117px;--fall:352px;--d:2.89s;--delay:0.4s;--flip:0.59s;--rz:164deg;--sway:9px;--w:3px;--h:12px;--br:1px} .confetti i:nth-child(13){--c:var(--accent);--x:-150px;--y:-101px;--fall:349px;--d:2.75s;--delay:0.45s;--flip:0.79s;--rz:14deg;--sway:-13px;--w:3px;--h:10px;--br:1px} .confetti i:nth-child(14){--c:var(--cocoa);--x:5px;--y:-142px;--fall:378px;--d:2.51s;--delay:0.46s;--flip:1.04s;--rz:88deg;--sway:1px;--w:7px;--h:7px;--br:1px} .confetti i:nth-child(15){--c:var(--accent-soft);--x:210px;--y:-156px;--fall:337px;--d:2.72s;--delay:0.5s;--flip:0.54s;--rz:38deg;--sway:12px;--w:6px;--h:6px;--br:50%} .confetti i:nth-child(16){--c:var(--taupe);--x:-213px;--y:-140px;--fall:331px;--d:2.25s;--delay:0.39s;--flip:0.72s;--rz:103deg;--sway:-10px;--w:4px;--h:12px;--br:1px} .confetti i:nth-child(17){--c:var(--accent-ink);--x:172px;--y:-62px;--fall:365px;--d:2.75s;--delay:0.5s;--flip:0.58s;--rz:6deg;--sway:-13px;--w:4px;--h:14px;--br:1px} .confetti i:nth-child(18){--c:var(--brown);--x:204px;--y:-168px;--fall:362px;--d:2.59s;--delay:0.53s;--flip:0.69s;--rz:180deg;--sway:-12px;--w:5px;--h:14px;--br:1px} .confetti i:nth-child(19){--c:var(--accent);--x:104px;--y:-71px;--fall:378px;--d:2.76s;--delay:0.55s;--flip:1.05s;--rz:63deg;--sway:5px;--w:5px;--h:5px;--br:1px} .confetti i:nth-child(20){--c:var(--cocoa);--x:163px;--y:-124px;--fall:386px;--d:2.89s;--delay:0.49s;--flip:0.87s;--rz:69deg;--sway:2px;--w:6px;--h:6px;--br:50%} .confetti i:nth-child(21){--c:var(--accent-soft);--x:-188px;--y:-160px;--fall:278px;--d:2.41s;--delay:0.45s;--flip:0.7s;--rz:168deg;--sway:5px;--w:4px;--h:16px;--br:1px} .confetti i:nth-child(22){--c:var(--taupe);--x:-16px;--y:-110px;--fall:343px;--d:2.61s;--delay:0.43s;--flip:0.55s;--rz:4deg;--sway:13px;--w:3px;--h:16px;--br:1px} .confetti i:nth-child(23){--c:var(--accent-ink);--x:123px;--y:-97px;--fall:338px;--d:2.92s;--delay:0.44s;--flip:0.59s;--rz:110deg;--sway:1px;--w:4px;--h:16px;--br:1px} .confetti i:nth-child(24){--c:var(--brown);--x:-1px;--y:-143px;--fall:325px;--d:2.4s;--delay:0.51s;--flip:0.98s;--rz:136deg;--sway:-8px;--w:5px;--h:5px;--br:1px} .confetti i:nth-child(25){--c:var(--accent);--x:-51px;--y:-106px;--fall:311px;--d:2.31s;--delay:0.47s;--flip:1.0s;--rz:153deg;--sway:6px;--w:5px;--h:5px;--br:50%} .confetti i:nth-child(26){--c:var(--cocoa);--x:142px;--y:-158px;--fall:335px;--d:2.94s;--delay:0.56s;--flip:0.73s;--rz:94deg;--sway:5px;--w:5px;--h:16px;--br:1px} .confetti i:nth-child(27){--c:var(--accent-soft);--x:-79px;--y:-79px;--fall:304px;--d:2.69s;--delay:0.52s;--flip:0.67s;--rz:64deg;--sway:4px;--w:5px;--h:10px;--br:1px} .confetti i:nth-child(28){--c:var(--taupe);--x:62px;--y:-125px;--fall:290px;--d:2.82s;--delay:0.42s;--flip:0.97s;--rz:143deg;--sway:14px;--w:3px;--h:16px;--br:1px} .confetti i:nth-child(29){--c:var(--accent-ink);--x:-172px;--y:-111px;--fall:362px;--d:2.49s;--delay:0.37s;--flip:0.62s;--rz:148deg;--sway:-7px;--w:7px;--h:7px;--br:1px} .confetti i:nth-child(30){--c:var(--brown);--x:-215px;--y:-118px;--fall:374px;--d:2.34s;--delay:0.42s;--flip:0.71s;--rz:126deg;--sway:1px;--w:6px;--h:6px;--br:50%} .confetti i:nth-child(31){--c:var(--accent);--x:219px;--y:-152px;--fall:396px;--d:2.76s;--delay:0.41s;--flip:0.75s;--rz:161deg;--sway:-3px;--w:4px;--h:16px;--br:1px} .confetti i:nth-child(32){--c:var(--cocoa);--x:-133px;--y:-72px;--fall:261px;--d:2.64s;--delay:0.51s;--flip:0.8s;--rz:148deg;--sway:-4px;--w:4px;--h:12px;--br:1px} .confetti i:nth-child(33){--c:var(--accent-soft);--x:-176px;--y:-75px;--fall:388px;--d:2.94s;--delay:0.38s;--flip:0.65s;--rz:70deg;--sway:-12px;--w:4px;--h:14px;--br:1px} .confetti i:nth-child(34){--c:var(--taupe);--x:-105px;--y:-91px;--fall:263px;--d:2.6s;--delay:0.36s;--flip:0.71s;--rz:76deg;--sway:-6px;--w:5px;--h:5px;--br:1px} .confetti i:nth-child(35){--c:var(--accent-ink);--x:-124px;--y:-75px;--fall:329px;--d:2.23s;--delay:0.48s;--flip:0.91s;--rz:165deg;--sway:-1px;--w:6px;--h:6px;--br:50%} .confetti i:nth-child(36){--c:var(--brown);--x:176px;--y:-113px;--fall:368px;--d:2.55s;--delay:0.57s;--flip:0.85s;--rz:124deg;--sway:7px;--w:4px;--h:14px;--br:1px} .confetti i:nth-child(37){--c:var(--accent);--x:146px;--y:-108px;--fall:286px;--d:2.61s;--delay:0.58s;--flip:0.65s;--rz:121deg;--sway:13px;--w:5px;--h:12px;--br:1px} .confetti i:nth-child(38){--c:var(--cocoa);--x:-86px;--y:-154px;--fall:347px;--d:2.42s;--delay:0.47s;--flip:0.75s;--rz:21deg;--sway:-14px;--w:4px;--h:10px;--br:1px} .confetti i:nth-child(39){--c:var(--accent-soft);--x:17px;--y:-165px;--fall:407px;--d:2.64s;--delay:0.6s;--flip:0.57s;--rz:17deg;--sway:-9px;--w:7px;--h:7px;--br:1px} .confetti i:nth-child(40){--c:var(--taupe);--x:-18px;--y:-69px;--fall:388px;--d:2.52s;--delay:0.41s;--flip:0.8s;--rz:61deg;--sway:11px;--w:5px;--h:5px;--br:50%} .confetti i:nth-child(41){--c:var(--accent-ink);--x:11px;--y:-158px;--fall:327px;--d:2.22s;--delay:0.42s;--flip:0.92s;--rz:176deg;--sway:-13px;--w:3px;--h:12px;--br:1px} .confetti i:nth-child(42){--c:var(--brown);--x:-215px;--y:-139px;--fall:376px;--d:2.4s;--delay:0.47s;--flip:0.8s;--rz:105deg;--sway:10px;--w:5px;--h:14px;--br:1px} .confetti i:nth-child(43){--c:var(--accent);--x:96px;--y:-93px;--fall:401px;--d:2.22s;--delay:0.51s;--flip:1.0s;--rz:111deg;--sway:1px;--w:5px;--h:12px;--br:1px} .confetti i:nth-child(44){--c:var(--cocoa);--x:13px;--y:-76px;--fall:358px;--d:2.89s;--delay:0.41s;--flip:0.94s;--rz:146deg;--sway:11px;--w:6px;--h:6px;--br:1px} .confetti i:nth-child(45){--c:var(--accent-soft);--x:45px;--y:-72px;--fall:291px;--d:2.82s;--delay:0.4s;--flip:0.56s;--rz:160deg;--sway:-10px;--w:4px;--h:4px;--br:50%} .confetti i:nth-child(46){--c:var(--taupe);--x:-106px;--y:-159px;--fall:393px;--d:2.54s;--delay:0.55s;--flip:0.58s;--rz:73deg;--sway:5px;--w:3px;--h:10px;--br:1px} .confetti i:nth-child(47){--c:var(--accent-ink);--x:-132px;--y:-95px;--fall:406px;--d:2.97s;--delay:0.38s;--flip:0.8s;--rz:136deg;--sway:0px;--w:5px;--h:12px;--br:1px} .confetti i:nth-child(48){--c:var(--brown);--x:133px;--y:-117px;--fall:264px;--d:2.81s;--delay:0.5s;--flip:1.04s;--rz:87deg;--sway:-9px;--w:3px;--h:12px;--br:1px} .confetti i:nth-child(49){--c:var(--accent);--x:-144px;--y:-153px;--fall:305px;--d:2.74s;--delay:0.49s;--flip:0.58s;--rz:123deg;--sway:-12px;--w:5px;--h:5px;--br:1px} .confetti i:nth-child(50){--c:var(--cocoa);--x:-76px;--y:-119px;--fall:342px;--d:2.54s;--delay:0.5s;--flip:0.51s;--rz:126deg;--sway:10px;--w:4px;--h:4px;--br:50%} .confetti i:nth-child(51){--c:var(--accent-soft);--x:-40px;--y:-130px;--fall:319px;--d:2.94s;--delay:0.5s;--flip:0.56s;--rz:143deg;--sway:-5px;--w:3px;--h:16px;--br:1px} .confetti i:nth-child(52){--c:var(--taupe);--x:31px;--y:-149px;--fall:354px;--d:2.47s;--delay:0.54s;--flip:0.67s;--rz:21deg;--sway:7px;--w:3px;--h:16px;--br:1px} .confetti i:nth-child(53){--c:var(--accent-ink);--x:-161px;--y:-134px;--fall:346px;--d:2.5s;--delay:0.46s;--flip:0.61s;--rz:37deg;--sway:-9px;--w:4px;--h:14px;--br:1px} .confetti i:nth-child(54){--c:var(--brown);--x:-14px;--y:-169px;--fall:317px;--d:2.71s;--delay:0.51s;--flip:0.64s;--rz:170deg;--sway:5px;--w:6px;--h:6px;--br:1px} .confetti i:nth-child(55){--c:var(--accent);--x:-125px;--y:-125px;--fall:289px;--d:2.26s;--delay:0.48s;--flip:0.8s;--rz:38deg;--sway:-11px;--w:5px;--h:5px;--br:50%} .confetti i:nth-child(56){--c:var(--cocoa);--x:211px;--y:-167px;--fall:358px;--d:2.79s;--delay:0.41s;--flip:0.74s;--rz:9deg;--sway:-9px;--w:4px;--h:10px;--br:1px} @media (prefers-reduced-motion:reduce){.confetti{display:none}} .done-panel img{width:84px;margin:0 auto 1.4rem} /* Επιβεβαίωση ραντεβού: το τικ σχεδιάζεται μπροστά στα μάτια σου. Ο κύκλος και η γραμμή ζωγραφίζονται με stroke-dashoffset. */ .done-check{margin:0 auto 1.2rem;width:52px;height:52px} .done-ring{stroke:var(--accent-ink);stroke-dasharray:151;stroke-dashoffset:151; animation:ringDraw .55s var(--step-soft) forwards} .done-tick{stroke:var(--cocoa);stroke-dasharray:40;stroke-dashoffset:40; animation:tickDraw .4s var(--step-soft) .45s forwards} @keyframes ringDraw{to{stroke-dashoffset:0}} @keyframes tickDraw{to{stroke-dashoffset:0}} .done-panel h3{font-size:2.1rem;margin:0 0 .3rem;animation:doneUp .5s var(--step-soft) .25s both} .done-who{color:var(--muted-text);margin:0 0 1.3rem;animation:doneUp .5s var(--step-soft) .35s both} /* Η ημερομηνία και η ώρα είναι το πιο σημαντικό της οθόνης: μεγάλα, χωριστά, και ολόκληρα, με το όνομα της ημέρας. */ .done-when{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.2rem; background:var(--cream);border-radius:var(--radius-lg);padding:1.2rem 1.4rem; animation:doneUp .5s var(--step-soft) .45s both; } /* Οι θέσεις δηλώνονται ρητά. Το ::before μετράει ως πρώτο παιδί και χωρίς αυτό η αυτόματη τοποθέτηση έβαζε την ώρα πριν από την ημερομηνία. */ .done-date{grid-column:1;grid-row:1;text-align:right} .done-when::before{content:"";grid-column:2;grid-row:1;width:1px;height:42px;background:var(--line)} .done-time{grid-column:3;grid-row:1;text-align:left} .done-when b{display:block;font-family:var(--font-serif);font-weight:400;font-size:1.65rem;line-height:1.15;color:var(--ink)} .done-when span{display:block;font-size:.88rem;color:var(--muted-text);margin-top:.15rem} .done-time b{font-variant-numeric:tabular-nums} .done-panel .summary{animation:doneUp .5s var(--step-soft) .55s both} .done-panel>p:last-child{animation:doneUp .5s var(--step-soft) .65s both} @keyframes doneUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} @media (max-width:420px){ .done-when{grid-template-columns:1fr;gap:.8rem} .done-when::before{display:none} .done-date,.done-time{text-align:center} } /* lightbox */ .lightbox{position:fixed;inset:0;background:var(--scrim-strong);display:none;place-items:center;z-index:80;padding:5vw} .lightbox.open{display:grid} .lightbox .box{background:transparent;width:auto;max-width:min(560px,86vw);max-height:82vh;display:grid;place-items:center;padding:0} .lightbox .box img{max-height:82vh;width:auto} .lightbox .lb-cap{color:var(--on-dark-soft);font-size:.9rem;margin-top:.9rem;text-align:center} .lightbox .box img{width:100%;height:100%;object-fit:contain;border-radius:18px} .lightbox .x{position:absolute;top:1.2rem;right:1.4rem;background:none;border:1px solid var(--on-dark-border);color:var(--paper);width:42px;height:42px;border-radius:50%;cursor:pointer;font-size:1.1rem} /* ---------- κίνηση και αλληλεπίδραση ---------- */ /* εμφάνιση περιεχομένου καθώς κατεβαίνει η σελίδα */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .8s var(--step-soft),transform .8s var(--step-soft)} .reveal.in{opacity:1;transform:none} /* εικόνες: εμφανίζονται απαλά όταν φορτώσουν (η κλάση img-fade μπαίνει από το app.js) */ .img-fade .page img{opacity:0;transition:opacity .9s var(--step-soft),transform .6s var(--step)} .img-fade .page img.loaded{opacity:1} /* Οι εικόνες μπαίνουν με ένα απαλό «ζουμ προς τα έξω»: το κάδρο ανεβαίνει και η φωτογραφία μέσα του μικραίνει από 1.08 στο φυσικό της μέγεθος. */ .reveal.shot,.reveal.hero-panel,.gal>button.reveal{transform:translateY(24px) scale(.985)} .reveal.shot.in,.reveal.hero-panel.in,.gal>button.reveal.in{transform:none} .img-fade .page .reveal img{transition:opacity .9s var(--step-soft),transform 1.6s var(--step-soft)} .img-fade .page .reveal:not(.in) img{transform:scale(1.08)} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none} .img-fade .page img{opacity:1;transition:none} .img-fade .page .reveal img,.img-fade .page .reveal:not(.in) img{transform:none;transition:none} } /* κουμπιά: ελαφρύ σήκωμα */ .btn{will-change:transform} .btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -16px color-mix(in srgb,var(--ink) 58%,transparent); transition-duration:.3s; } .btn:active{transform:translateY(0);box-shadow:none;transition-duration:.09s} .btn.ghost:hover{background:var(--surface)} /* φωτογραφίες: διακριτικό ζουμ */ .shot img{transition:transform .7s var(--step)} .shot:hover img{transform:scale(1.04)} /* τιμοκατάλογος: φωτισμός γραμμής */ .menu li{position:relative;z-index:0} .menu li::before{ content:"";position:absolute;inset:-.1rem -.9rem;border-radius:var(--radius); background:transparent;transition:background .28s var(--step);z-index:-1; } .menu li:hover::before{background:color-mix(in srgb,var(--accent-soft) 42%,transparent)} .menu .add{transition:background .35s var(--step-soft),transform .35s var(--step-soft)} .menu li:hover .add{background:var(--accent-soft);transform:translateX(-2px)} /* κάρτες πληροφοριών */ .info{transition:transform .5s var(--step-soft)} .info:hover{transform:translateY(-4px)} /* header που μαζεύει στο scroll */ .header-in{transition:height .3s var(--step)} .site-header{transition:box-shadow .3s var(--step)} .site-header.scrolled{box-shadow:0 10px 30px -22px color-mix(in srgb,var(--ink) 70%,transparent)} .site-header.scrolled .header-in{height:60px} .brand img,.brand b{transition:transform .3s var(--step)} .site-header.scrolled .brand img{transform:scale(.86)} /* ήρωας: αργό ζουμ και λογότυπο που αιωρείται */ .hero-panel .shot{animation:kenburns 22s var(--step) both} @keyframes kenburns{from{transform:scale(1.09)}to{transform:scale(1)}} .hero-panel .mark{animation:float 7s ease-in-out infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}} /* παλλόμενη κουκκίδα στη μπάρα ραντεβού */ .tab-book .dot{animation:pulse 2.6s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.5)}} .tab-book:hover .dot{animation-duration:1.1s} /* συχνές ερωτήσεις: ομαλό άνοιγμα */ .faq details[open] p{animation:fadeUp .4s var(--step)} @keyframes fadeUp{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .faq summary{transition:color .2s} .faq summary:hover{color:var(--cocoa)} .faq summary::after{transition:transform .3s var(--step)} .faq details[open] summary::after{transform:rotate(180deg)} /* ---------- διαδραστική παρουσίαση κράτησης ---------- */ .how{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:3.4rem;align-items:start} /* αριστερά: τα βήματα */ .how-steps{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.4rem} .how-step{ width:100%;font:inherit;text-align:left;color:var(--ink);cursor:pointer; display:grid;grid-template-columns:44px 1fr;gap:1.05rem;align-items:start; min-height:104px;align-content:start; background:transparent;border:1px solid transparent;border-radius:var(--radius-lg); padding:1.15rem 1.2rem;position:relative;overflow:hidden; transition:background .4s var(--step-soft),border-color .4s var(--step-soft),box-shadow .4s var(--step-soft); } .how-step:hover{background:color-mix(in srgb,var(--paper) 55%,transparent)} .how-step[aria-selected="true"]{ background:var(--paper); box-shadow:0 16px 36px -24px color-mix(in srgb,var(--ink) 62%,transparent); } .how-step .n{ width:44px;height:44px;border-radius:50%;display:grid;place-items:center; font-family:var(--font-serif);font-size:1.4rem;line-height:1; background:color-mix(in srgb,var(--taupe) 16%,transparent);color:var(--taupe-text); transition:background .45s var(--step-soft),color .45s var(--step-soft); } .how-step[aria-selected="true"] .n{background:var(--cocoa);color:var(--on-dark)} .how-step .tx{display:block;padding-top:.15rem} .how-step .t{display:block;font-family:var(--font-serif);font-size:1.2rem;line-height:1.3;margin-bottom:.3rem} .how-step .d{display:block;font-size:.92rem;line-height:1.55;color:var(--muted-text)} .how-step .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:transparent} .how-step .bar i{display:block;height:100%;width:0;background:var(--accent-ink)} .how.auto .how-step[aria-selected="true"] .bar i{animation:howbar 5s linear forwards} @keyframes howbar{from{width:0}to{width:100%}} /* δεξιά: η κάρτα προεπισκόπησης */ .how-demo{ background:var(--paper);border:0;border-radius:var(--radius-lg); box-shadow:0 26px 60px -34px color-mix(in srgb,var(--ink) 62%,transparent);overflow:hidden; } .how-demo .hd{ display:flex;align-items:baseline;gap:1rem;padding:1rem 1.35rem; background:color-mix(in srgb,var(--cream) 55%,var(--paper)); } .how-demo .hd-t{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe-text)} .how-demo .hd-s{margin-left:auto;font-size:.8rem;color:var(--muted-text);font-variant-numeric:tabular-nums} .how-demo .hd-p{ font:inherit;font-size:.78rem;color:var(--cocoa);background:none;cursor:pointer; border:1px solid color-mix(in srgb,var(--cocoa) 70%,transparent);border-radius:999px; padding:.2rem .7rem;min-height:24px;white-space:nowrap; } .how-demo .hd-p:hover{background:color-mix(in srgb,var(--cream) 70%,transparent)} .demo-panel{display:flex;flex-direction:column;min-height:372px;animation:demoIn .45s var(--step-soft)} @keyframes demoIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .demo-main{padding:1.35rem 1.35rem 0;flex:1;display:flex;flex-direction:column;overflow:auto} .demo-lbl{font-size:.86rem;color:var(--muted-text);margin:0 0 .75rem} .demo-lbl+.demo-lbl,.days+.demo-lbl{margin-top:1.3rem} /* λίστα υπηρεσιών: σταθερές στήλες, όλα στοιχισμένα */ .demo-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem} .demo-row{ width:100%;font:inherit;text-align:left;color:var(--ink);cursor:pointer; display:grid;grid-template-columns:20px 1fr 3.4rem 3.2rem;gap:1.1rem;align-items:center; padding:.75rem .9rem;border:0;border-radius:var(--radius); background:transparent; transition:background .35s var(--step-soft); } .demo-row:hover{background:color-mix(in srgb,var(--cream) 60%,transparent)} .demo-row[aria-pressed="true"]{background:var(--accent-soft)} .demo-row .tick{ width:20px;height:20px;border-radius:50%;display:grid;place-items:center; background:color-mix(in srgb,var(--taupe) 22%,transparent);font-size:.7rem;color:transparent; transition:background .3s var(--step-soft),color .3s var(--step-soft); } .demo-row:hover .tick{background:color-mix(in srgb,var(--taupe) 34%,transparent)} .demo-row[aria-pressed="true"] .tick{background:var(--cocoa);color:var(--on-dark)} .demo-row .nm{font-size:.97rem} .demo-row .du{font-size:.86rem;color:var(--taupe-text);text-align:right;font-variant-numeric:tabular-nums} .demo-row .pr{font-family:var(--font-serif);font-size:1.15rem;text-align:right;font-variant-numeric:tabular-nums} /* ημέρες και ώρες: ίσα κελιά */ .days{display:grid;grid-template-columns:repeat(7,1fr);gap:.4rem} .day{ font:inherit;border:0;background:var(--surface);border-radius:var(--radius); padding:.55rem .2rem;cursor:pointer;color:var(--ink);text-align:center;line-height:1.3; font-variant-numeric:tabular-nums; transition:background .35s var(--step-soft),transform .35s var(--step-soft); } .day small{display:block;font-size:.68rem;color:var(--taupe-text);margin-top:2px} .day:hover:not([disabled]){transform:translateY(-2px);background:color-mix(in srgb,var(--taupe) 26%,var(--surface))} .day[aria-pressed="true"],.day[aria-pressed="true"]:hover{background:var(--cocoa);color:var(--on-dark)} .day[aria-pressed="true"] small{color:var(--on-dark-soft)} .day[disabled]{background:transparent;color:var(--disabled);cursor:not-allowed} .day[disabled] small{color:var(--disabled)} .times{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem} .time{ font:inherit;font-size:.93rem;border:0;background:var(--surface); border-radius:var(--radius);padding:.55rem 0;cursor:pointer;color:var(--ink);text-align:center; font-variant-numeric:tabular-nums; transition:background .35s var(--step-soft),transform .35s var(--step-soft); } .time:hover{transform:translateY(-2px);background:color-mix(in srgb,var(--taupe) 26%,var(--surface))} .time[aria-pressed="true"],.time[aria-pressed="true"]:hover{background:var(--cocoa);color:var(--on-dark)} .demo-empty{font-size:.9rem;color:var(--muted-text);background:color-mix(in srgb,var(--cream) 55%,transparent);border-radius:var(--radius);padding:.9rem;text-align:center} /* υποσέλιδο κάρτας: πάντα στην ίδια θέση */ .demo-foot{ display:flex;align-items:baseline;gap:1rem;margin-top:1.3rem; padding:.95rem 1.35rem; background:color-mix(in srgb,var(--cream) 55%,var(--paper)); font-size:.9rem;color:var(--muted-text); } .demo-foot b{margin-left:auto;font-family:var(--font-serif);font-weight:400;font-size:1.5rem;color:var(--ink)} .demo-foot b.bump{animation:bump .45s var(--step-soft)} @keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.14)}100%{transform:scale(1)}} /* βήμα 4: η επιβεβαίωση */ .demo-done{text-align:center;padding:.2rem 0 1.2rem;margin-top:auto} .demo-check{ width:48px;height:48px;border-radius:50%;background:var(--cocoa);color:var(--on-dark); display:grid;place-items:center;margin:0 auto .8rem;font-size:1.3rem; animation:pop .5s var(--step-soft) both; } @keyframes pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}} .demo-done h4{font-family:var(--font-serif);font-weight:400;font-size:1.4rem;margin:0} .demo-recap{ display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.2rem;margin:0 0 auto; background:var(--surface);border-radius:var(--radius);padding:.85rem 1rem;font-size:.92rem; } .demo-recap dt{color:var(--muted-text)} .demo-recap dd{margin:0;text-align:right;font-weight:500} /* βήμα 3: η πληρωμή της προκαταβολής */ .demo-card{ display:flex;align-items:baseline;gap:1rem;margin:1rem 0 .7rem; border:1px solid var(--line);border-radius:var(--radius);padding:.7rem 1rem;font-size:.92rem; font-variant-numeric:tabular-nums; } .demo-card .k{color:var(--muted-text)} .demo-card .v{letter-spacing:.06em} .demo-card .x{margin-left:auto;color:var(--muted-text)} .demo-pay{ font:inherit;font-size:.95rem;font-weight:500;width:100%;cursor:pointer; border:0;border-radius:var(--radius);padding:.75rem 1rem; background:var(--cocoa);color:var(--on-dark); transition:background .35s var(--step-soft); } .demo-pay:hover{background:var(--brown)} .demo-secure{ display:flex;align-items:center;justify-content:center;gap:.4rem; margin:.7rem 0 0;font-size:.8rem;color:var(--muted-text); } .demo-secure b{font-weight:600;color:var(--ink)} /* βήμα 4: η σημείωση για το email */ .demo-sent{ display:flex;align-items:flex-start;gap:.55rem;margin:1rem .2rem 0; font-size:.88rem;line-height:1.55;color:var(--muted-text); } .demo-sent svg{flex:none;margin-top:.2rem;color:var(--taupe-text)} .how-note{font-size:.85rem;color:var(--muted-text);margin:.9rem .2rem 0;max-width:46ch} @media (max-width:600px){ /* σε στενές οθόνες κόβουμε τη στήλη διάρκειας, ώστε τα ονόματα να μη σπάνε */ .demo-row{grid-template-columns:20px 1fr auto;gap:.75rem} .demo-row .du{display:none} .times{grid-template-columns:repeat(3,1fr)} .how-step{min-height:0} } /* ---------- φόρμα επικοινωνίας ---------- */ .form-card{background:var(--cream);border-radius:var(--radius-lg);padding:1.5rem 1.6rem 1.7rem} .form-intro{font-size:.9rem;color:var(--muted-text);margin:0 0 1.3rem} .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.1rem} /* μέσα στην κάρτα τα πεδία είναι ανοιχτότερα από το φόντο της */ .form-card .field input,.form-card .field textarea{background:var(--paper)} .form-card .field input:hover,.form-card .field textarea:hover, .form-card .field input:focus,.form-card .field textarea:focus{ background:color-mix(in srgb,var(--taupe) 10%,var(--paper)); } .form-card textarea{min-height:130px} .form-send{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-top:.2rem} /* απλός έλεγχος ότι γράφει άνθρωπος: πρόσθεση δύο τυχαίων ψηφίων */ .robot{ display:inline-flex;align-items:center;gap:.9rem; background:var(--paper);border:2px solid transparent;border-radius:var(--radius); padding:.6rem .9rem;font-size:.95rem; transition:border-color .25s var(--step-soft),background .35s var(--step-soft); } .robot .q{color:var(--muted-text)} .robot .q b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.04em} .robot input{ width:74px;text-align:center;font:inherit;font-size:1rem;color:var(--ink); padding:.5rem .4rem;border:0;border-radius:var(--radius); background:color-mix(in srgb,var(--taupe) 15%,var(--surface)); font-variant-numeric:tabular-nums; transition:background .3s var(--step-soft),box-shadow .25s var(--step-soft); } .robot input:focus{outline:none;background:var(--surface);box-shadow:inset 0 0 0 2px var(--cocoa)} .robot.bad{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--paper))} .robot-wrap{margin:0 0 1.2rem} .robot-wrap .err{margin-left:.1rem} .robot-wrap .err{margin-top:.4rem} @media (max-width:760px){ .form-grid{grid-template-columns:1fr} .form-send{gap:.9rem;align-items:stretch;flex-direction:column} .form-send .btn{width:100%} } /* Σε πολύ στενή οθόνη, οι τέσσερις στήλες του τιμοκαταλόγου (όνομα, διάρκεια, τιμή, κουμπί) δεν χωρούν και η σελίδα αποκτά οριζόντια κύλιση. Το κουμπί κατεβαίνει σε δική του σειρά. */ @media (max-width:400px){ /* Ο φωτισμός της γραμμής απλώνεται 0.9rem δεξιά και αριστερά. Σε αυτό το πλάτος δεν υπάρχει τόσο περιθώριο και προεξέχει από τη σελίδα. */ .menu li::before{inset:-.1rem -.45rem} .menu.pick li{grid-template-columns:1fr auto auto} .menu.pick .add{grid-column:1 / -1;justify-self:start;margin-top:.5rem} .menu .pr{font-size:1.25rem;min-width:2.8rem} .menu .nm{font-size:1rem} } /* ---------- χάρτης και μηνύματα φόρμας ---------- */ /* Σε στενή οθόνη το 16:10 δεν χωρά την κάρτα. Σταθερό ύψος αντί για min-height, γιατί το min-height μαζί με το aspect-ratio φάρδαινε το πλαίσιο πέρα από την οθόνη. */ @media (max-width:600px){ .map-ph:not(.has-map){aspect-ratio:auto;height:300px} } .map-ph iframe{width:100%;height:100%;border:0;display:block;filter:var(--map-tone)} /* ο σχηματικός χάρτης πριν από τη συγκατάθεση */ .map-art{position:absolute;inset:0;width:100%;height:100%;display:block} .map-art .sea{fill:color-mix(in srgb,var(--accent-soft) 70%,var(--cream))} .map-art .blocks rect{fill:color-mix(in srgb,var(--taupe) 12%,var(--cream))} .map-art .roads path{fill:none;stroke:var(--paper);stroke-width:9;stroke-linecap:round} .map-art .lanes path{fill:none;stroke:var(--paper);stroke-width:4;stroke-linecap:round} .map-art .pin path{fill:var(--cocoa)} .map-art .pin{filter:drop-shadow(0 6px 8px color-mix(in srgb,var(--ink) 35%,transparent))} .map-card{ position:absolute;left:1rem;bottom:1rem;max-width:min(270px,calc(100% - 2rem)); background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow); padding:1rem 1.1rem;text-align:left; } .map-card-a{margin:0 0 .35rem;color:var(--ink);font-size:.98rem;line-height:1.45} .map-card-s{margin:0 0 .8rem;color:var(--muted-text);font-size:.84rem;line-height:1.45} .map-note{font-size:.88rem;margin:.7rem 0 0} .map-note a{color:var(--cocoa);text-decoration:underline;text-underline-offset:3px; display:inline-block;padding:.3rem 0;min-height:24px} .form-msg{margin-top:1rem;font-size:.95rem;border-radius:var(--radius);padding:.8rem 1rem} .form-msg.ok{background:var(--accent-soft);color:var(--ink)} .form-msg.bad{background:color-mix(in srgb,var(--cocoa) 12%,var(--paper));color:var(--cocoa)} /* ---------- νομικές σελίδες ---------- */ .legal-page{max-width:74ch} .legal-page h2{font-size:1.6rem;margin:2.6rem 0 .8rem} .legal-page h2:first-of-type{margin-top:1.5rem} .legal-page h3{font-size:1.15rem;margin:1.6rem 0 .4rem} .legal-page p,.legal-page li{font-size:.98rem;line-height:1.7} .legal-page ul{padding-left:1.2rem;margin:0 0 1rem} .legal-page li{margin-bottom:.4rem} .legal-page .upd{font-size:.88rem;color:var(--taupe-text)} .legal-page .fill{background:color-mix(in srgb,var(--accent-soft) 60%,transparent);padding:0 .25rem;border-radius:3px} .legal-page .box{background:var(--cream);border-radius:var(--radius-lg);padding:1.2rem 1.4rem;margin:1.4rem 0} .legal-page .box p:last-child{margin-bottom:0} /* ---------- ενημέρωση για cookies ---------- */ .cookie{ position:fixed;left:50%;bottom:1.1rem;transform:translate(-50%,140%);z-index:75; width:min(760px,94vw);background:var(--paper);border-radius:var(--radius-lg); box-shadow:0 30px 70px -30px color-mix(in srgb,var(--ink) 70%,transparent); padding:1.2rem 1.4rem;display:grid;grid-template-columns:1fr auto;gap:1rem 1.6rem;align-items:center; transition:transform .5s var(--step-soft),opacity .5s var(--step-soft);opacity:0; } .cookie.open{transform:translate(-50%,0);opacity:1} .cookie h2{font-size:1.15rem;margin:0 0 .3rem;font-family:var(--font-serif);font-weight:400} .cookie p{font-size:.9rem;color:var(--muted-text);margin:0;max-width:60ch} .cookie a{color:var(--cocoa);text-decoration:underline;text-underline-offset:3px} .cookie .acts{display:flex;gap:.6rem;flex-wrap:wrap} @media (max-width:760px){ .cookie{grid-template-columns:1fr;bottom:calc(62px + .8rem);padding:1.1rem 1.2rem} .cookie .acts .btn{flex:1} } /* κουμπί κλεισίματος στην ενημέρωση cookies */ .cookie{position:fixed;padding-right:3rem} .cookie-x{ position:absolute;top:.7rem;right:.7rem;width:32px;height:32px;border:0;border-radius:50%; background:transparent;color:var(--muted-text);font-size:.95rem;cursor:pointer;line-height:1; transition:background .35s var(--step-soft),color .35s var(--step-soft); } .cookie-x:hover{background:var(--surface);color:var(--ink)} /* επιστροφή στην κορυφή */ .to-top{ position:fixed;right:18px;bottom:18px;z-index:44;width:46px;height:46px;border:0;border-radius:50%; background:var(--cocoa);color:var(--on-dark);font-size:1.2rem;line-height:1;cursor:pointer; display:grid;place-items:center; box-shadow:0 14px 30px -16px color-mix(in srgb,var(--ink) 75%,transparent); opacity:0;transform:translateY(12px);pointer-events:none; transition:opacity .4s var(--step-soft),transform .4s var(--step-soft),background .35s var(--step-soft); } .to-top.show{opacity:1;transform:none;pointer-events:auto} .to-top:hover{background:var(--brown);transform:translateY(-2px)} /* όσο είναι ανοιχτή η ενημέρωση cookies, το κουμπί δεν εμφανίζεται */ body.cookie-open .to-top{opacity:0;pointer-events:none} @media (max-width:1100px){ /* Πέντε στήλες δεν χωρούν σε tablet: η μάρκα από πάνω, οι υπόλοιπες ανά δύο. */ .footer-in{grid-template-columns:1fr 1fr} .foot-brand{grid-column:1 / -1} } @media (max-width:900px){ /* πάνω από τη σταθερή μπάρα ραντεβού */ .to-top{bottom:calc(62px + 14px);right:14px;width:42px;height:42px} } /* ---------- προσβασιμότητα ---------- */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0; } /* το checkbox της υπηρεσίας είναι κρυμμένο: δείχνουμε το focus στην ετικέτα */ .svc:has(input:focus-visible){outline:2px solid var(--cocoa);outline-offset:3px} /* τίτλος σελίδας: h1 με την οπτική βαρύτητα του h2 */ h1.h2{font-size:clamp(2rem,4vw,3rem);line-height:1.1;margin:0 0 .6rem} .page h1[tabindex="-1"]:focus,.page h1[tabindex="-1"]:focus-visible{outline:none} /* μηνύματα λάθους σε φόρμες */ .field .err,.err{display:block;color:var(--danger);font-size:.85rem;margin:.4rem 0 0;font-weight:400} /* Κατάσταση λάθους. Η κλάση μπαίνει στο