@import url("../fonts/fonts.css"); @import url("tokens.css"); @import url("article-body.css"); /* * cassiopeia_feodeiop: θέμα Β «Στην Πάτρα από το 1892» (Stage 14 φάση 5, docs/roadmaps/stage14-phase5-implementation.md). * Πηγή: docs/design/design_handoff_feodeiop/ (handoff.md §γ.1). Η Cassiopeia φορτώνει αυτό το αρχείο μετά το template.css. * * 1. Αντιστοίχιση στις μεταβλητές της Cassiopeia J6. * 2. Component CSS του πρωτοτύπου: prototype-src/proto.css αυτούσιο, με `@container page` → `@media`. * Λείπουν μόνο οι κανόνες της βιτρίνας του πρωτοτύπου (.fe-focus-demo*, .fe-proto-spacer, .fe-home, .fe-state*). * 3. Cassiopeia: ό,τι το markup του core δίνει με άλλες κλάσεις από το πρωτότυπο (handoff.md §γ). Μεγαλώνει με κάθε βήμα του §ε. */ /* ===================== 1. Cassiopeia J6 ===================== */ /* Η Cassiopeia χτίζει το Bootstrap χωρίς πρόθεμα (--body-color, --link-color, --btn-bg), άρα τα --bs-* του tokens.css δεν φτάνουν πουθενά. Οι ίδιες τιμές με τα σημερινά ονόματα· τα --cassiopeia-* του tokens.css ισχύουν ως έχουν. */ html:root { --body-font-size: var(--fe-fs-body); --body-line-height: calc(28 / 17); --body-color: var(--fe-color-ink); --body-color-rgb: 43, 33, 24; --body-bg: var(--fe-color-ivory); --body-bg-rgb: 247, 241, 230; --secondary-color: var(--fe-color-meta); --secondary-bg: var(--fe-color-paper); --tertiary-bg: var(--fe-color-paper-hover); --emphasis-color: var(--fe-color-ink); --heading-color: var(--fe-color-ink); --link-color: var(--fe-color-bronze); --link-color-rgb: 138, 90, 34; --link-hover-color: var(--fe-color-bronze-deep); --link-hover-color-rgb: 107, 68, 24; --primary: var(--fe-color-bronze); --primary-rgb: 138, 90, 34; --secondary: var(--fe-color-meta); --secondary-rgb: 107, 88, 70; --dark: var(--fe-color-ink); --dark-rgb: 43, 33, 24; --light: var(--fe-color-paper); --light-rgb: 255, 251, 244; --border-color: var(--fe-color-rule); --border-radius: var(--fe-radius); --border-radius-sm: var(--fe-radius); --border-radius-lg: var(--fe-radius); --border-radius-pill: var(--fe-radius); --box-shadow: var(--fe-shadow-dropdown); --focus-ring-color: rgba(138, 90, 34, .45); --focus-ring-width: var(--fe-focus-width); --highlight-bg: var(--fe-color-highlight); --highlight-color: var(--fe-color-ink); } /* ===================== 2. Components (proto.css) ===================== */ .site{font-family:var(--fe-font-sans);font-size:var(--fe-fs-body);line-height:var(--fe-lh-body);color:var(--fe-color-ink);background:var(--fe-color-ivory);display:flex;flex-direction:column;min-height:100%} .site *{box-sizing:border-box} .site img{max-width:100%} .site a{color:var(--fe-color-bronze);text-decoration:underline;text-decoration-color:rgba(138,90,34,.35);text-underline-offset:3px;transition:color var(--fe-dur-fast) var(--fe-ease)} .site a:hover{color:var(--fe-color-bronze-deep);text-decoration-color:var(--fe-color-bronze-deep)} .site :focus-visible{outline:var(--fe-focus-width) solid var(--fe-focus-color);outline-offset:var(--fe-focus-offset)} .site :is(.fe-topbar,.fe-cycles,.fe-footer,.fe-enrol) :focus-visible{outline-color:var(--fe-focus-color-on-dark)} .serif{font-family:var(--fe-font-serif)} .vh{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .fe-wrap{width:var(--fe-container);margin:0 auto} .fe-main{flex-shrink:0} /* --- topbar --- */ .fe-topbar{background:var(--fe-color-ink);color:var(--fe-color-sand);font-size:var(--fe-fs-topbar);line-height:var(--fe-lh-topbar)} .fe-topbar .fe-wrap{display:flex;justify-content:space-between;align-items:center;height:42px} .fe-topbar__name{font-family:var(--fe-font-serif);font-style:italic;font-size:16px} .fe-topbar__name span+span:before{content:" "} .fe-topbar ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;align-items:center} .fe-topbar a{color:var(--fe-color-sand);text-decoration:none;display:flex;align-items:center;gap:8px} .fe-topbar a:hover{color:#fff} .fe-topbar .fe-topbar__fb a{width:32px;height:32px;justify-content:center} /* --- header / brand --- */ .fe-header{background:var(--fe-color-paper);position:relative} .fe-brand-row{display:flex;justify-content:center;align-items:center;padding:26px 0 20px} .fe-logo{display:flex;align-items:center;gap:16px;color:var(--fe-color-ink);text-decoration:none !important} .fe-logo:hover{color:var(--fe-color-ink)} .fe-logo__mark{display:block;width:68px;height:106px} .fe-wm{display:flex;flex-direction:column;align-items:center;font-family:var(--fe-font-logo);font-weight:700;line-height:1.08;color:var(--fe-color-ink)} .fe-wm span{display:block;white-space:nowrap} .fe-wm__l1{font-size:31px;line-height:1.05;letter-spacing:1.89px;margin-right:-1.89px} .fe-wm__l2{font-size:19px;line-height:1.2;letter-spacing:1.71px;margin-right:-1.71px} .fe-wm__l3{font-size:21px} .fe-wm__l4{font-size:11.5px;margin-top:3px} .fe-header__actions{display:none} .fe-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;background:transparent;color:var(--fe-color-ink);padding:0;cursor:pointer;text-decoration:none;border-radius:var(--fe-radius)} .fe-iconbtn:hover{color:var(--fe-color-bronze)} .fe-iconbtn--boxed{border:1px solid var(--fe-color-rule);background:var(--fe-color-paper)} .fe-iconbtn[aria-expanded="true"]{color:var(--fe-color-bronze-dark)} /* --- main nav (desktop) --- */ .fe-navrow{border-top:1px solid var(--fe-color-rule);border-bottom:var(--fe-rule-double)} .fe-navrow .fe-wrap{display:flex;align-items:center;justify-content:center;position:relative} .fe-nav ul{list-style:none;margin:0;padding:0} .fe-nav>ul{display:flex;align-items:center} .fe-nav>ul>li{position:relative;display:flex;align-items:center} .fe-nav>ul>li+li:before{content:"";width:5px;height:5px;background:var(--fe-color-rule-strong);transform:rotate(45deg);margin:0 6px} .fe-nav__link{display:flex;align-items:center;gap:4px;height:54px;padding:0 14px;font-size:var(--fe-fs-nav);font-weight:700;letter-spacing:var(--fe-ls-nav);color:var(--fe-color-ink) !important;text-decoration:none !important;border-bottom:2px solid transparent;margin-bottom:-2px;background:none;border-top:0;border-left:0;border-right:0;font-family:inherit;cursor:pointer} .fe-nav__link:hover{color:var(--fe-color-bronze) !important} .fe-nav__link[aria-current],.fe-nav__link.is-active{color:var(--fe-color-bronze) !important;border-bottom-color:var(--fe-color-bronze)} .fe-nav__search{position:absolute;right:0;top:5px} .fe-dd{display:none;position:absolute;top:56px;left:20px;width:290px;background:var(--fe-color-paper);border:1px solid var(--fe-color-rule);border-top:3px solid var(--fe-color-bronze);z-index:5;padding:10px 0;box-shadow:var(--fe-shadow-dropdown)} .fe-dd a{display:flex;justify-content:space-between;align-items:center;padding:8px 20px;font-size:16px;line-height:23px;color:var(--fe-color-ink);text-decoration:none} .fe-dd a:hover,.fe-dd a.is-hover{background:var(--fe-color-paper-hover);color:var(--fe-color-bronze-deep)} .fe-dd li{position:relative} .fe-dd--sub{top:-11px;left:288px;border-top:1px solid var(--fe-color-rule)} .is-open>.fe-dd{display:block} /* --- search panel (header) --- */ .fe-searchpanel{display:none;background:var(--fe-color-ivory);border-bottom:1px solid var(--fe-color-rule)} .fe-searchpanel.is-open{display:block} .fe-searchpanel .fe-wrap{display:flex;justify-content:center;padding:16px 0} .fe-searchpanel .fe-srch{width:560px;max-width:100%} .fe-srch{display:flex;border:1px solid var(--fe-color-input-border);height:48px;align-items:center;background:var(--fe-color-paper);border-radius:var(--fe-radius)} .fe-srch input{flex-grow:1;min-width:0;border:0;height:46px;padding:0 14px;font:inherit;font-size:var(--fe-fs-body);color:var(--fe-color-ink);background:transparent;outline-offset:-3px} .fe-srch input::placeholder{color:var(--fe-color-meta);opacity:1} .fe-srch button{width:48px;height:46px;border:0;background:var(--fe-color-bronze);color:var(--fe-color-paper);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0} .fe-srch button:hover{background:var(--fe-color-bronze-deep)} .fe-srch--lg{height:56px} .fe-srch--lg input{height:54px;font-size:18px} .fe-srch--lg button{width:auto;height:54px;padding:0 22px;gap:8px;font:inherit;font-weight:700;letter-spacing:var(--fe-ls-button);font-size:15px} /* --- mobile menu panel --- */ .fe-mpanel{display:none} .fe-mnav a,.fe-mnav button{display:flex;width:100%;justify-content:space-between;align-items:center;min-height:54px;padding:0 18px;border:0;border-bottom:1px solid var(--fe-color-rule);font:inherit;font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--fe-color-ink);text-decoration:none;background:var(--fe-color-paper);text-align:left;cursor:pointer} .fe-mnav [aria-expanded="true"]{color:var(--fe-color-bronze-dark)} .fe-mnav [aria-expanded="true"] svg{transform:rotate(180deg)} .fe-mnav [aria-current]{box-shadow:inset 4px 0 0 var(--fe-color-bronze)} .fe-mnav ul{list-style:none;margin:0;padding:0} .fe-mnav .fe-mnav__sub a{font-size:17px;font-weight:400;letter-spacing:0;padding-left:34px;background:var(--fe-color-ivory)} .fe-mnav__foot{display:flex;justify-content:center;padding:28px;background:var(--fe-color-paper);color:var(--fe-color-bronze)} /* --- breadcrumbs --- */ .fe-crumbs{font-size:var(--fe-fs-small);line-height:var(--fe-lh-small);color:var(--fe-color-meta)} .fe-crumbs ol{list-style:none;margin:0 auto;display:flex;gap:10px;align-items:center;padding:16px 0;flex-wrap:wrap} .fe-crumbs li{display:flex;gap:10px;align-items:center} .fe-crumbs li+li:before{content:"·";color:var(--fe-color-rule-strong)} /* --- shared bits --- */ .fe-eyebrow{font-size:var(--fe-fs-eyebrow);line-height:var(--fe-lh-eyebrow);font-weight:700;letter-spacing:var(--fe-ls-eyebrow);text-transform:uppercase;color:var(--fe-color-bronze);margin:0} .fe-btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 22px;font:inherit;font-size:15px;font-weight:700;letter-spacing:var(--fe-ls-button);border:1px solid var(--fe-color-bronze);background:var(--fe-color-bronze);color:var(--fe-color-paper) !important;border-radius:var(--fe-radius);text-decoration:none !important;cursor:pointer;transition:background var(--fe-dur-fast) var(--fe-ease)} .fe-btn:hover{background:var(--fe-color-bronze-deep);border-color:var(--fe-color-bronze-deep)} .fe-btn--outline{background:transparent;color:var(--fe-color-bronze-dark) !important} .fe-btn--outline:hover{background:var(--fe-color-bronze);color:var(--fe-color-paper) !important} .fe-btn--light{background:var(--fe-color-paper);border-color:var(--fe-color-paper);color:var(--fe-color-oxblood) !important} .fe-btn--light:hover{background:var(--fe-color-oxblood-label);border-color:var(--fe-color-oxblood-label)} .fe-btn--ghost{background:transparent;border-color:var(--fe-color-sand);color:var(--fe-color-paper) !important} .fe-btn--ghost:hover{background:rgba(255,251,244,.12)} .fe-btn[disabled],.fe-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none} .fe-divider{display:flex;align-items:center;gap:18px;justify-content:center;color:var(--fe-color-bronze)} .fe-divider:before,.fe-divider:after{content:"";height:1px;background:var(--fe-color-rule-strong);flex-grow:1;max-width:220px} .fe-divider img{display:block;width:22px;height:34px} .fe-sec-title{font-family:var(--fe-font-serif);font-weight:500;font-size:var(--fe-fs-h2-section);line-height:var(--fe-lh-h2-section);margin:0;text-align:center;color:var(--fe-color-ink)} .fe-frame{display:block;background:var(--fe-color-paper);border:1px solid var(--fe-color-rule);padding:10px} .fe-cover{display:block;width:100%;height:100%;object-fit:cover} .fe-ph{background:#d9c7a8;color:#3d3024;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;font-size:13px;line-height:18px;padding:12px;height:100%} .fe-noimg{display:flex;align-items:center;justify-content:center;height:100%;background:var(--fe-color-paper)} .fe-noimg img{height:62%;width:auto} /* --- page header (listing pages) --- */ .fe-pagehead{text-align:center;padding:28px 0 40px;display:flex;flex-direction:column;gap:10px;align-items:center} .fe-pagehead h1{margin:0;font-family:var(--fe-font-serif);font-weight:500;font-size:var(--fe-fs-h1);line-height:var(--fe-lh-h1)} .fe-pagehead p{margin:0;color:var(--fe-color-text-2);max-width:640px} .fe-pagehead .fe-divider{width:440px;margin-top:6px} /* --- date block --- */ .fe-date{display:flex;flex-direction:column;align-items:center;border:1px solid var(--fe-color-rule-strong);background:var(--fe-color-paper);padding:6px 0 8px;text-align:center} .fe-date__d{font-family:var(--fe-font-serif);font-size:var(--fe-fs-date-day);line-height:var(--fe-lh-date-day);font-weight:500;color:var(--fe-color-ink)} .fe-date__my{font-size:var(--fe-fs-date-my);line-height:var(--fe-lh-date-my);font-weight:700;letter-spacing:.1em;color:var(--fe-color-bronze-dark)} .fe-tdate{white-space:nowrap;font-style:italic;color:var(--fe-color-bronze-dark)} .fe-pub{font-size:var(--fe-fs-pub);line-height:var(--fe-lh-pub);color:var(--fe-color-meta);margin:0 0 4px;letter-spacing:.02em} /* --- ledger (κάρτα ανακοίνωσης) --- */ .fe-ledger-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px} .fe-ledger{list-style:none;margin:0;padding:0} .fe-ledger>li{display:grid;grid-template-columns:92px minmax(0,1fr) 104px;gap:22px;padding:24px 0;border-top:1px solid var(--fe-color-rule);align-items:start} .fe-ledger :is(h2,h3){margin:0 0 6px;font-family:var(--fe-font-serif);font-weight:500;font-size:var(--fe-fs-h3-card);line-height:var(--fe-lh-h3-card)} .fe-ledger :is(h2,h3) a{color:var(--fe-color-ink);text-decoration:none} .fe-ledger :is(h2,h3) a:hover{color:var(--fe-color-bronze-dark);text-decoration:underline} .fe-ledger p.fe-excerpt{margin:0;color:var(--fe-color-text-2);font-size:var(--fe-fs-excerpt);line-height:var(--fe-lh-excerpt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .fe-thumb{width:104px;height:104px;background:var(--fe-color-paper);border:1px solid var(--fe-color-rule);display:flex;align-items:center;justify-content:center;overflow:hidden} .fe-thumb img{display:block} .fe-thumb .fe-cover{object-position:center 20%} .fe-thumb .fe-contain{height:88%;width:auto} .fe-thumb .fe-emblem{height:80%;width:auto} .fe-ledger--compact>li{padding:20px 0} .fe-more-link{text-align:center;margin-top:24px;border-top:1px solid var(--fe-color-rule);padding-top:28px} /* --- home: carousel (bootstrap .carousel) --- */ .fe-carousel{position:relative} /* Stage 14: margin-right -100% όπως το .carousel-item του Bootstrap. Το margin:0 του πρωτοτύπου (στατικό, μία διαφάνεια) το ακύρωνε, και στη μετάβαση η επόμενη διαφάνεια έπεφτε κάτω από την τρέχουσα. */ .fe-carousel__item{margin:0 -100% 0 0;height:600px;position:relative} /* Stage 14, βήμα 17: η διαφάνεια (role="group") είναι div γύρω από το
, γιατί το
δεν δέχεται role="group" */ .fe-carousel__item>figure{margin:0;height:100%} .fe-carousel__item img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 45%} .fe-carousel__caption{position:absolute;right:24px;bottom:20px;background:var(--fe-color-caption-bg);color:var(--fe-color-paper);font-family:var(--fe-font-serif);font-style:italic;font-size:15px;line-height:22px;padding:6px 14px} .fe-carousel__bar{position:absolute;left:0;right:0;bottom:20px;pointer-events:none} .fe-carousel__panel{pointer-events:auto;display:inline-flex;background:rgba(255,251,244,.94);border:1px solid var(--fe-color-rule);padding:8px} .fe-car-ctl{display:flex;align-items:center;gap:8px} .fe-car-ctl>button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;min-width:44px;padding:0 10px;border:1px solid var(--fe-color-rule-strong);background:var(--fe-color-paper);color:var(--fe-color-ink);font:inherit;font-size:15px;font-weight:700;border-radius:var(--fe-radius);cursor:pointer} .fe-car-ctl>button:hover{border-color:var(--fe-color-bronze);color:var(--fe-color-bronze-dark)} .fe-car-ctl__pause{margin-left:6px} /* Stage 14: το κουμπί έχει και τα δύο εικονίδια· φαίνεται αυτό που ταιριάζει στο aria-pressed (user.js). */ .fe-car-ctl__pause[aria-pressed="false"] .fe-car-ctl__i-play,.fe-car-ctl__pause[aria-pressed="true"] .fe-car-ctl__i-pause{display:none} .fe-dots{display:flex;gap:4px} .fe-dots button{width:28px;height:44px;border:0;background:transparent;padding:0;display:flex;align-items:center;justify-content:center;cursor:pointer} .fe-dots button span{display:block;width:10px;height:10px;border:1.5px solid var(--fe-color-bronze);transform:rotate(45deg)} .fe-dots button[aria-current="true"] span{background:var(--fe-color-bronze)} /* --- home: diptych Ωδείο / Φιλαρμονική --- */ .fe-diptych{background:var(--fe-color-paper);border-top:1px solid var(--fe-color-rule);border-bottom:1px solid var(--fe-color-rule)} .fe-diptych .fe-wrap{display:grid;grid-template-columns:minmax(0,1fr) 200px minmax(0,1fr);gap:32px;align-items:center;padding:64px 0} .fe-diptych section{display:flex;flex-direction:column;gap:12px} .fe-diptych h2{margin:0;font-family:var(--fe-font-serif);font-weight:500;font-size:var(--fe-fs-h2-diptych);line-height:var(--fe-lh-h2-diptych)} .fe-diptych p{margin:0;color:var(--fe-color-text-2)} .fe-linkrow{display:flex;flex-wrap:wrap;gap:4px 20px} .fe-diptych__mid{display:flex;flex-direction:column;align-items:center;gap:12px;align-self:stretch;justify-content:center} .fe-diptych__mid:before,.fe-diptych__mid:after{content:"";width:1px;flex-grow:1;background:var(--fe-color-rule)} .fe-diptych__mid img{width:96px;height:150px;display:block} .fe-diptych__mid span{font-family:var(--fe-font-serif);font-style:italic;color:var(--fe-color-meta);font-size:15px;text-align:center;line-height:20px} /* --- home: news section --- */ .fe-news{padding:72px 0 64px} .fe-news .fe-divider{margin-bottom:14px} .fe-news .fe-ledger-cols{margin-top:36px} /* --- home: registrations (στατικό πλαίσιο εγγραφών) --- */ .fe-enrol{background:var(--fe-color-oxblood);color:var(--fe-color-paper)} .fe-enrol .fe-wrap{display:flex;justify-content:space-between;align-items:center;gap:40px;padding:44px 0} .fe-enrol__text{display:flex;flex-direction:column;gap:8px;max-width:640px} .fe-enrol .fe-eyebrow{color:var(--fe-color-oxblood-label)} .fe-enrol h2{margin:0;font-family:var(--fe-font-serif);font-weight:500;font-size:var(--fe-fs-h2-band);line-height:var(--fe-lh-h2-band)} .fe-enrol p{margin:0;color:var(--fe-color-oxblood-text)} .fe-enrol__btns{display:flex;gap:10px;flex-wrap:wrap;flex-shrink:0} /* --- home: institutional cycles (κάρτα θεσμικού κύκλου) --- */ .fe-cycles{background:var(--fe-color-ink);color:var(--fe-color-sand);position:relative;overflow:hidden} .fe-cycles__wm{position:absolute;right:-60px;top:-60px;width:420px;opacity:var(--fe-color-watermark-opacity);pointer-events:none} .fe-cycles__wm img{display:block;width:100%;height:auto} .fe-cycles .fe-wrap{position:relative;padding:64px 0} .fe-cycles .fe-eyebrow{color:var(--fe-color-gold);text-align:center} .fe-cycles .fe-sec-title{color:var(--fe-color-paper);margin:10px 0 36px} .fe-cycles__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:0} .fe-cycles__row--4{grid-template-columns:repeat(4,minmax(0,1fr))} .fe-cycle{display:flex;flex-direction:column;gap:10px;padding:34px 32px;border-left:1px solid rgba(217,185,138,.35);color:var(--fe-color-sand) !important;text-decoration:none !important;height:100%} .fe-cycles__row>li:first-child .fe-cycle{border-left:0} .fe-cycle__img{height:220px;border:1px solid rgba(217,185,138,.45);padding:6px} .fe-cycle__rn{font-family:var(--fe-font-serif);font-size:22px;color:var(--fe-color-gold);font-style:italic} .fe-cycle h3{margin:0;font-family:var(--fe-font-serif);font-weight:500;font-size:var(--fe-fs-h3-cycle);line-height:var(--fe-lh-h3-cycle);color:var(--fe-color-paper)} .fe-cycle p{margin:0;font-size:var(--fe-fs-excerpt);line-height:var(--fe-lh-excerpt)} .fe-cycle__go{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14px;letter-spacing:.1em;color:var(--fe-color-gold)} .fe-cycle:hover h3{text-decoration:underline;text-decoration-color:var(--fe-color-gold)} /* --- home: μπλοκ Κτιρίου / χρονολόγιο --- */ .fe-history{padding:72px 0} .fe-history .fe-divider{margin-bottom:14px} .fe-history__photos{display:grid;grid-template-columns:1fr 1fr 1.5fr;gap:24px;margin:36px 0 0} .fe-history figure{margin:0} .fe-history .fe-frame{height:380px} .fe-history figcaption{font-family:var(--fe-font-serif);font-style:italic;color:var(--fe-color-text-2);font-size:15px;margin-top:8px;line-height:28px} .fe-history .fe-cover{object-position:center 30%} .fe-timeline{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))} .fe-timeline li{display:flex;flex-direction:column;gap:6px;padding:0 20px;border-left:1px solid var(--fe-color-rule)} .fe-timeline__y{font-family:var(--fe-font-serif);font-size:var(--fe-fs-year);line-height:var(--fe-lh-year);color:var(--fe-color-bronze-dark)} .fe-timeline__t{font-size:16px;line-height:25px;color:var(--fe-color-text-2)} .fe-history__cta{text-align:center;margin-top:28px} /* --- footer --- */ .fe-footer{background:var(--fe-color-ink);color:var(--fe-color-sand);flex-grow:1;display:flex;flex-direction:column;position:relative;overflow:hidden} .fe-footer__wm{position:absolute;right:-40px;top:20px;width:300px;opacity:.07;pointer-events:none} .fe-footer__wm img{display:block;width:100%;height:auto} .fe-footer .fe-wrap{position:relative} .fe-footer__cols{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:48px;padding:52px 0 40px} .fe-footer__brand{display:flex;gap:18px;align-items:flex-start} .fe-footer__brand img{width:76px;height:76px;flex-shrink:0} .fe-footer__name{font-family:var(--fe-font-serif);font-size:21px;line-height:27px;color:var(--fe-color-paper)} .fe-footer__sub{font-size:15px;line-height:23px;margin-top:6px} .fe-footer h2{margin:0 0 12px;font-size:13px;line-height:18px;letter-spacing:.16em;font-weight:700;color:var(--fe-color-gold)} .fe-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:16px;line-height:24px} .fe-footer li{display:flex;gap:10px;align-items:flex-start} .fe-footer li svg{margin-top:3px;flex-shrink:0} .fe-footer a{color:var(--fe-color-paper);text-decoration-color:rgba(255,251,244,.35)} .fe-footer a:hover{color:var(--fe-color-gold);text-decoration-color:var(--fe-color-gold)} .fe-copy{border-top:1px solid rgba(217,185,138,.3);font-size:14px;line-height:20px;color:var(--fe-color-gold);position:relative} .fe-copy .fe-wrap{display:flex;justify-content:space-between;padding:16px 0} /* --- pagination --- */ .fe-pagination{display:flex;gap:6px;align-items:center;justify-content:center;margin-top:32px;flex-wrap:wrap;list-style:none;padding:0} .fe-pagination a,.fe-pagination span{min-width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;font-family:var(--fe-font-serif);font-size:18px;color:var(--fe-color-ink);text-decoration:none;border:1px solid var(--fe-color-rule);background:var(--fe-color-paper);border-radius:var(--fe-radius)} .fe-pagination a:hover{border-color:var(--fe-color-bronze);color:var(--fe-color-bronze-dark)} .fe-pagination [aria-current]{background:var(--fe-color-ink);border-color:var(--fe-color-ink);color:var(--fe-color-paper)} .fe-pagination .is-gap{border-color:transparent;background:transparent} .fe-pagination .is-text{font-family:var(--fe-font-sans);font-size:15px;font-weight:700;letter-spacing:.04em} .fe-pagination .is-disabled{color:var(--fe-color-meta);opacity:.55} /* --- listing main --- */ .fe-listing{margin-bottom:72px} /* --- article --- */ .fe-article-wrap{width:var(--fe-container-article);margin:0 auto 72px} .fe-article__head{display:grid;grid-template-columns:96px minmax(0,1fr);gap:28px;align-items:start;padding:16px 0 36px;border-bottom:var(--fe-rule-double);margin-bottom:36px} .fe-article__head>div{display:flex;flex-direction:column;gap:10px} .fe-article__head--nodate{grid-template-columns:minmax(0,1fr)} /* Stage 14: .fe-article__head αντί για .fe-article, αλλιώς πιάνει και το

του editor: το article-body.css εισάγεται πριν από αυτό το αρχείο και χάνει */ .fe-article__head h1{margin:0;font-family:var(--fe-font-serif);font-weight:500;font-size:var(--fe-fs-h1-article);line-height:var(--fe-lh-h1-article)} .fe-meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:var(--fe-fs-small);color:var(--fe-color-meta)} .fe-meta span{display:flex;gap:6px;align-items:center} .fe-article__foot{clear:both;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;border-top:1px solid var(--fe-color-rule);padding-top:18px;margin-top:10px} .fe-article__tools{display:flex;gap:6px} .fe-related{margin-top:64px} .fe-related .fe-divider{margin-bottom:10px} .fe-related h2{font-family:var(--fe-font-serif);font-weight:500;text-align:center;margin:0 0 20px;font-size:var(--fe-fs-h2-more);line-height:var(--fe-lh-h2-more)} /* --- gallery (ΑΡΧΕΙΟ) --- */ .fe-gal-layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:48px} .fe-catlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--fe-color-rule)} .fe-catlist a{display:flex;justify-content:space-between;gap:12px;padding:12px 4px;border-bottom:1px solid var(--fe-color-rule);color:var(--fe-color-ink);text-decoration:none;font-size:16px;line-height:22px} .fe-catlist a:hover{color:var(--fe-color-bronze-dark)} .fe-catlist small{color:var(--fe-color-meta);font-family:var(--fe-font-serif);font-size:16px;font-style:italic} .fe-catlist a[aria-current]{color:var(--fe-color-bronze-dark);font-weight:700} .fe-catlist a[aria-current] small{color:var(--fe-color-bronze-dark)} .fe-catdisclosure{display:none} .fe-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px;list-style:none;margin:0;padding:0} .fe-grid figure{margin:0} .fe-grid .fe-frame{padding:10px} .fe-grid .fe-frame>div{height:250px} .fe-grid figcaption{margin-top:12px;font-family:var(--fe-font-serif);font-style:italic;font-size:var(--fe-fs-caption);line-height:var(--fe-lh-caption);color:var(--fe-color-text-2)} .fe-grid figcaption b{font-style:normal;color:var(--fe-color-bronze-dark);margin-right:6px;font-weight:500} .fe-gal-foot{margin-top:36px;border-top:1px solid var(--fe-color-rule);padding-top:18px} /* πλακίδιο κατηγορίας (ρίζα ΑΡΧΕΙΟΥ) */ .fe-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px;list-style:none;margin:0;padding:0} .fe-tile{display:flex;flex-direction:column;gap:12px;text-decoration:none !important;color:var(--fe-color-ink) !important} .fe-tile .fe-frame>div{height:270px} .fe-tile h2{margin:0;font-family:var(--fe-font-serif);font-weight:500;font-size:var(--fe-fs-h3-card);line-height:var(--fe-lh-h3-card)} .fe-tile:hover h2{color:var(--fe-color-bronze-dark);text-decoration:underline} .fe-tile__n{display:flex;align-items:center;gap:8px;font-family:var(--fe-font-serif);font-style:italic;color:var(--fe-color-meta);font-size:16px;line-height:22px} /* --- events archive (κάρτα εκδήλωσης αρχείου) --- */ .fe-events{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:44px 28px;list-style:none;margin:0;padding:0} .fe-event{position:relative;display:flex;flex-direction:column;gap:0} .fe-event__poster{position:relative;aspect-ratio:3/4;padding:8px} .fe-event__poster>div{height:100%;background:var(--fe-color-paper)} .fe-event__poster>.fe-ph{background:var(--fe-color-sand);color:var(--fe-color-text-2)} .fe-event__poster .fe-contain{display:block;width:100%;height:100%;object-fit:contain} .fe-event__poster .fe-date{position:absolute;left:-10px;bottom:-18px;width:84px;box-shadow:0 0 0 4px var(--fe-color-ivory)} .fe-event__body{padding:30px 0 0} .fe-event h2{margin:0 0 6px;font-family:var(--fe-font-serif);font-weight:500;font-size:20px;line-height:27px} .fe-event h2 a{color:var(--fe-color-ink);text-decoration:none} .fe-event h2 a:hover{color:var(--fe-color-bronze-dark);text-decoration:underline} .fe-event h2 a:after{content:"";position:absolute;inset:0} /* --- search results --- */ .fe-search-wrap{width:var(--fe-container-article);margin:0 auto 72px} .fe-search-form{margin:4px 0 14px} .fe-search-summary{margin:0 0 8px;color:var(--fe-color-text-2);font-size:16px} .fe-results{list-style:none;margin:0;padding:0;border-bottom:1px solid var(--fe-color-rule)} .fe-results li{padding:24px 0;border-top:1px solid var(--fe-color-rule)} .fe-results h2{margin:0 0 6px;font-family:var(--fe-font-serif);font-weight:500;font-size:var(--fe-fs-h3-card);line-height:var(--fe-lh-h3-card)} .fe-results h2 a{color:var(--fe-color-ink);text-decoration:none} .fe-results h2 a:hover{color:var(--fe-color-bronze-dark);text-decoration:underline} .fe-results .fe-meta{font-size:14px;margin:0 0 6px;gap:6px 14px} .fe-results p{margin:0;color:var(--fe-color-text-2);font-size:var(--fe-fs-excerpt);line-height:var(--fe-lh-excerpt)} .fe-results mark,.fe-mark{background:var(--fe-color-highlight);color:var(--fe-color-ink);padding:0 2px} /* --- empty states / 404 --- */ .fe-empty{background:var(--fe-color-paper);border:1px solid var(--fe-color-rule);padding:36px 32px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px} .fe-empty img{width:44px;height:68px} .fe-empty h2,.fe-empty h1{margin:0;font-family:var(--fe-font-serif);font-weight:500;font-size:26px;line-height:34px} .fe-empty p{margin:0;color:var(--fe-color-text-2);max-width:520px} .fe-empty__actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px} .fe-404{padding:24px 0 72px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px} .fe-404__code{font-family:var(--fe-font-serif);font-style:italic;color:var(--fe-color-bronze-dark);font-size:22px} .fe-404 h1{margin:0;font-family:var(--fe-font-serif);font-weight:500;font-size:var(--fe-fs-h1);line-height:var(--fe-lh-h1)} .fe-404 p{margin:0;color:var(--fe-color-text-2);max-width:560px} .fe-404 .fe-srch{width:560px;max-width:100%;margin-top:8px} /* ===================== 992–1199 ===================== */ @media (max-width: 1199.98px){ .fe-wrap{width:auto;margin:0 var(--fe-gutter)} .fe-cycle{padding:30px 22px} .fe-events{grid-template-columns:repeat(3,minmax(0,1fr))} } /* ===================== <992: header κινητού ===================== */ @media (max-width: 991.98px){ .fe-topbar .fe-wrap{height:44px} .fe-topbar__name{font-size:14px;line-height:17px} .fe-topbar__name span{display:block} .fe-topbar__name span+span:before{content:none} .fe-topbar ul{gap:0} .fe-topbar a{width:44px;height:44px;justify-content:center;color:var(--fe-color-sand)} .fe-topbar .fe-topbar__fb a{width:44px;height:44px} .fe-topbar .fe-topbar__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .fe-header{border-bottom:var(--fe-rule-double)} .fe-brand-row{justify-content:space-between;padding:0;height:78px} .fe-logo{gap:10px} .fe-logo__mark{width:38px;height:60px} .fe-wm{align-items:flex-start} .fe-wm__l1{font-size:20px;letter-spacing:.88px;margin-right:-.88px} .fe-wm__l2{font-size:12.5px;letter-spacing:.75px;margin-right:-.75px} .fe-wm__l3{font-size:12.5px;letter-spacing:.1em} .fe-wm .fe-wm__l4{display:none} .fe-header__actions{display:flex} .fe-navrow{display:none} .fe-article-wrap,.fe-search-wrap{width:auto;margin:0 var(--fe-gutter) 72px} .fe-carousel__item{height:440px} .fe-header.is-menu-open .fe-mpanel{display:block} .fe-mpanel__search{padding:16px var(--fe-gutter);background:var(--fe-color-ivory)} .fe-searchpanel .fe-wrap{padding:16px 0} .fe-searchpanel .fe-srch{width:100%} .fe-diptych .fe-wrap{grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);gap:24px;padding:48px 0} .fe-diptych__mid img{width:64px;height:100px} .fe-enrol .fe-wrap{flex-direction:column;align-items:flex-start;gap:18px;padding:40px 0} .fe-cycles__row,.fe-cycles__row--4{grid-template-columns:minmax(0,1fr)} .fe-cycles__row--4{grid-template-columns:repeat(2,minmax(0,1fr))} .fe-cycles__row .fe-cycle{border-left:0;border-top:1px solid rgba(217,185,138,.35);padding:28px 0} .fe-cycles__row--4 .fe-cycle{padding:28px 20px 28px 0} .fe-cycles .fe-wrap{padding:48px 0} .fe-cycle__img{height:300px} .fe-history__photos{grid-template-columns:1fr 1fr} .fe-history__photos figure:nth-child(3){grid-column:1 / -1} .fe-history .fe-frame{height:340px} .fe-timeline{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px} .fe-timeline li{padding:14px 0;border-left:0;border-top:1px solid var(--fe-color-rule)} .fe-footer__cols{grid-template-columns:1fr 1fr;gap:36px 40px} .fe-footer__cols>:first-child{grid-column:1 / -1} .fe-gal-layout{grid-template-columns:minmax(0,1fr);gap:0} .fe-ledger-cols{grid-template-columns:minmax(0,1fr)} .fe-catlist-wrap{display:none} .fe-catdisclosure{display:block;margin-bottom:22px;border:1px solid var(--fe-color-rule);background:var(--fe-color-paper)} .fe-catdisclosure summary{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 14px;font-weight:700;list-style:none;cursor:pointer} .fe-catdisclosure summary::-webkit-details-marker{display:none} .fe-catdisclosure .fe-catlist{border-top:1px solid var(--fe-color-rule);padding:0 14px} .fe-catdisclosure .fe-catlist li:last-child a{border-bottom:0} .fe-events{grid-template-columns:repeat(2,minmax(0,1fr))} .fe-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ===================== <768: κινητό ===================== */ @media (max-width: 767.98px){ .fe-brand-row{height:78px} .fe-pagehead{text-align:left;padding:22px 0 18px;align-items:flex-start} .fe-pagehead .fe-divider{width:100%} .fe-sec-title{text-align:center} .fe-ledger-cols{grid-template-columns:minmax(0,1fr)} .fe-ledger>li{grid-template-columns:62px minmax(0,1fr);gap:14px;padding:18px 0} .fe-ledger .fe-thumb{display:none} .fe-ledger--home>li:nth-child(n+4),.fe-ledger--home-2{display:none} .fe-carousel__item{height:300px} .fe-carousel__caption{display:none} .fe-carousel__bar{position:static;padding:12px 0 4px} .fe-carousel__panel{background:none;border:0;padding:0} /* Stage 14, βήμα 17: στο 320 (WCAG 1.4.10) ή με μεγάλο κείμενο οι έλεγχοι δεν χωρούν σε μία σειρά: το κουμπί παύσης κατεβαίνει σε δεύτερη γραμμή αντί να κυλά η σελίδα οριζόντια (στο 390 βλ. <576) */ .fe-car-ctl{flex-wrap:wrap;row-gap:8px} .fe-diptych{background:transparent;border:0} .fe-diptych .fe-wrap{display:flex;flex-direction:column;gap:28px;padding:40px 0;align-items:stretch} .fe-diptych__mid{flex-direction:row;gap:18px} .fe-diptych__mid:before,.fe-diptych__mid:after{width:auto;height:1px;flex-grow:1;background:var(--fe-color-rule-strong)} .fe-diptych__mid img{width:44px;height:68px} .fe-diptych__mid span{display:none} .fe-news{padding:44px 0 40px} .fe-news .fe-ledger-cols{margin-top:20px} .fe-enrol .fe-wrap{padding:36px 0} .fe-cycles .fe-wrap{padding:44px 0} .fe-cycles .fe-eyebrow,.fe-cycles .fe-sec-title{text-align:left} .fe-cycles .fe-sec-title{margin:10px 0 8px} .fe-cycles__wm{width:260px} .fe-cycles__row--4{grid-template-columns:minmax(0,1fr)} .fe-cycles__row .fe-cycle{padding:24px 0} .fe-cycle__img{height:180px} .fe-history{padding:40px 0} .fe-history__photos{grid-template-columns:minmax(0,1fr);margin-top:20px} .fe-history__photos figure:nth-child(n+2){display:none} .fe-history .fe-frame{height:320px} .fe-timeline{grid-template-columns:minmax(0,1fr);margin-top:20px} .fe-timeline__y{font-size:var(--fe-fs-year);line-height:var(--fe-lh-year)} .fe-footer__wm{width:200px;right:-60px} .fe-footer__cols{grid-template-columns:minmax(0,1fr);gap:28px;padding:36px 0} .fe-footer__cols>:first-child{grid-column:auto} .fe-copy .fe-wrap{flex-direction:column;gap:4px} .fe-listing{margin-bottom:44px} .fe-article-wrap{width:auto;margin:0 var(--fe-gutter) 44px} .fe-article__head{grid-template-columns:minmax(0,1fr);gap:14px;padding:8px 0 24px;margin-bottom:24px} .fe-article__head .fe-date{display:none} .fe-related{margin-top:40px} .fe-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px} .fe-grid .fe-frame{padding:10px} .fe-grid .fe-frame>div{height:140px} .fe-tiles{gap:24px 12px} .fe-tile .fe-frame{padding:6px} .fe-tile .fe-frame>div{height:120px} .fe-tile h2{font-size:17px;line-height:22px} .fe-tile__n{font-size:14px} .fe-events{grid-template-columns:minmax(0,1fr);gap:0;border-bottom:1px solid var(--fe-color-rule)} .fe-event{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--fe-color-rule)} .fe-event__poster{padding:4px} .fe-event__poster .fe-ph{font-size:0;gap:0} .fe-event__poster .fe-date{width:58px;left:-6px;bottom:-10px;padding:3px 0 5px} .fe-event__poster .fe-date__d{font-size:22px;line-height:24px} .fe-event__poster .fe-date__my{font-size:10px;line-height:13px;letter-spacing:.06em} .fe-event__body{padding:0} .fe-event h2{font-size:18px;line-height:24px} .fe-search-wrap{width:auto;margin:0 var(--fe-gutter) 44px} .fe-srch--lg button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .fe-srch--lg button{width:56px;padding:0} .fe-empty{padding:28px 20px} .fe-404{padding:16px 0 44px} .fe-404 .fe-srch{width:100%} } @media (max-width: 575.98px){ .fe-tiles{grid-template-columns:repeat(2,minmax(0,1fr))} /* Stage 14, βήμα 17: εδώ χωρά το «⏸ Παύση» του σχεδίου αλλά όχι το «Αναπαραγωγή» — σε παύση το κουμπί δείχνει μόνο το ▶ και το κείμενο μένει ως όνομά του, ώστε το πάτημα να μη στέλνει το κουμπί σε δεύτερη γραμμή (βλ. <768) */ .fe-car-ctl__pause[aria-pressed="true"]{gap:0} .fe-car-ctl__pause[aria-pressed="true"] span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} } /* ===================== 3. Cassiopeia ===================== */ /* --- §α.4 / §γ.1 grid: 4 στήλες × 290 = 1160 χωρίς κενά, gutter 24 (<768: 18 από το tokens.css) --- */ .site .site-grid { grid-gap: 0; grid-template-columns: [full-start] minmax(var(--fe-gutter), 1fr) [main-start] repeat(4, minmax(0, 290px)) [main-end] minmax(var(--fe-gutter), 1fr) [full-end]; } /* Ζώνες σε όλο το πλάτος· το περιεχόμενό τους το περιορίζει το .fe-wrap του module */ .site .site-grid > :is(.container-banner, .container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b) { grid-column: full-start / full-end; } /* §γ.1: οι ζώνες ακουμπούν, το κενό το δίνει το padding τους. Η Cassiopeia βάζει 2rem κάτω από το banner και .5em πάνω και κάτω από κάθε module των top-a/top-b/bottom-a/bottom-b */ .site .container-banner{margin-bottom:0} .site :is(.container-top-a, .container-top-b, .container-bottom-a, .container-bottom-b) > *{margin:0} /* ≥992 το top-b (εγγραφές, μόνο στην αρχική) πάει μετά το comp· <992 μένει η σειρά της Cassiopeia (top-b πριν από το comp). Το handoff δίνει τη σειρά χωρίς side-l/side-r· εδώ μένουν στη γραμμή του comp, όπως στην Cassiopeia, ώστε ένα module σε sidebar να μη χαλάει το grid (σήμερα δεν χρησιμοποιούνται). */ @media (min-width: 992px) { .site .site-grid { grid-template-areas: ". banner banner banner banner ." ". top-a top-a top-a top-a ." ". side-l comp comp side-r ." ". top-b top-b top-b top-b ." ". bot-a bot-a bot-a bot-a ." ". bot-b bot-b bot-b bot-b ."; } } /* --- β.1/β.2 header: χαρτί, χωρίς το gradient και τη σκιά της Cassiopeia. Topbar (module 132) και ονομασία (module «Ονομασία», below-top) φέρνουν δικό τους .fe-wrap, άρα οι θέσεις τους πιάνουν όλο το πλάτος --- */ .site .container-header{background:var(--fe-color-paper);box-shadow:none;color:var(--fe-color-ink)} .site .container-header .container-topbar{display:block;padding:0} .site .container-header .container-below-top{display:block;max-width:none;padding:0} .site .fe-topbar__name{margin:0} @media (max-width: 991.98px){ .site .container-header{border-bottom:var(--fe-rule-double)} } /* --- β.3 / β.4 / β.13 κύριο μενού (mod_menu, collapse-metismenu της Cassiopeia, χωρίς override) και αναζήτηση header (override mod_finder: .fe-search-toggle + .collapse.fe-searchpanel). Το markup του core αντιστοιχίζεται στα .fe-nav/.fe-dd (≥992) και .fe-mnav (<992) του §2: γονικό με σελίδα = + button.mm-toggler-link (μόνο chevron), γονικό χωρίς σελίδα (menu item τύπου heading) = button.mm-toggler-nolink με το κείμενο. Το metismenu ανοίγει/κλείνει με click/Enter/Space και κλειδώνει ώσπου να έρθει transitionend: οι διάρκειες έχουν +1ms, γιατί με prefers-reduced-motion το tokens.css τις κάνει 0 και το transitionend δεν θα ερχόταν ποτέ. Esc, focus-out, ετικέτα του hamburger: user.js. --- */ .site { --fe-ic-kato: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); --fe-ic-dexia: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m10 7 5 5-5 5'/%3E%3C/svg%3E"); --fe-ic-menou: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); --fe-ic-kleisimo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); } .site .container-header{position:relative} .site .container-header .container-nav{display:flex;flex-direction:column;flex-wrap:nowrap;max-width:none;margin:0;padding:0;position:static} .site .container-header .container-nav :is(.navbar,.container-search){margin:0;padding:0;position:static} .site .container-nav .metismenu.mod-menu{color:var(--fe-color-ink);margin:0;padding:0;list-style:none} .site .container-nav .metismenu.mod-menu .metismenu-item{padding:0;font-size:inherit;line-height:inherit} .site .container-nav .metismenu.mod-menu .metismenu-item > :is(a,button){overflow:visible;text-overflow:clip;font-family:inherit;text-decoration:none;cursor:pointer} .site .container-nav .metismenu.mod-menu > li::after, .site .container-nav .metismenu.mod-menu > li > a::after, .site .container-nav .metismenu.mod-menu > li > button::before{content:none} .site .container-nav .metismenu.mod-menu .mm-toggler::after{content:"";flex-shrink:0;border:0;margin:0;background:currentColor;-webkit-mask:var(--fe-ic-kato) center / 100% no-repeat;mask:var(--fe-ic-kato) center / 100% no-repeat;transition:none} .site .container-nav .metismenu.mod-menu .metismenu-item > ul{list-style:none;margin:0;padding:0} .site .container-nav .metismenu.mod-menu :is(a,button):focus:not(:focus-visible){outline:0} .site .container-nav .metismenu.mod-menu :is(a,button):focus-visible{outline:var(--fe-focus-width) solid var(--fe-focus-color);outline-offset:var(--fe-focus-offset)} .site .container-nav .fe-search-toggle{z-index:2} .site .container-nav .fe-search-toggle[aria-expanded="true"]{color:var(--fe-color-bronze-dark)} .site .container-nav .fe-searchpanel:is(.show,.collapsing){display:block} .site .container-nav .fe-searchpanel.collapsing{transition:height var(--fe-dur-panel) var(--fe-ease)} .site .fe-searchpanel search{flex:0 1 560px;min-width:0} .site .fe-searchpanel .fe-srch{width:100%} .site .container-header .fe-srch{color:var(--fe-color-ink)} /* autosuggest (awesomplete) τυλίγει το input σε div.awesomplete. Το handoff δεν σχεδιάζει τη λίστα: κρέμεται από όλο το .fe-srch (πεδίο + κουμπί) με την όψη του dropdown του μενού, και το είναι το highlight των αποτελεσμάτων. Το top:100% χρειάζεται γιατί στο flex .awesomplete η στατική θέση της λίστας θα ήταν πάνω στο πεδίο· το margin αφήνει ελεύθερο το focus outline του input (offset 2 + πάχος 3), που αλλιώς κρύβει την πάνω γραμμή της λίστας */ .site .fe-srch{position:relative} .site .fe-srch .awesomplete{position:static;flex-grow:1;min-width:0;align-self:stretch;display:flex} .site .fe-srch .awesomplete > input{width:100%;max-width:none} /* η Cassiopeia το περιορίζει σε 200px κάτω από 992 */ .site .fe-srch .awesomplete > ul{top:100%;left:-1px;right:-1px;min-width:0;margin:6px 0 0;padding:0;background:var(--fe-color-paper);border:1px solid var(--fe-color-rule);border-top:3px solid var(--fe-color-bronze);border-radius:0;box-shadow:var(--fe-shadow-dropdown);text-align:left;z-index:1001;transition:none} .site .fe-srch .awesomplete > ul::before{content:none} .site .fe-srch .awesomplete > ul > li{padding:8px 14px;font-size:16px;line-height:23px;color:var(--fe-color-ink);background:none} .site .fe-srch .awesomplete > ul > li:is(:hover,[aria-selected="true"]){background:var(--fe-color-paper-hover);color:var(--fe-color-bronze-deep)} .site .fe-srch .awesomplete mark{background:var(--fe-color-highlight);color:var(--fe-color-ink);padding:0} @media (min-width: 992px) { .site .container-header .container-nav{position:relative} .site .container-header .container-nav .navbar{border-top:1px solid var(--fe-color-rule);border-bottom:var(--fe-rule-double);justify-content:center} .site .container-nav .navbar-collapse{flex-grow:0;justify-content:center} .site .container-nav .metismenu.mod-menu{display:flex;align-items:center;flex:0 1 auto} .site .container-nav .metismenu.mod-menu > li{position:relative;display:flex;align-items:center;flex-wrap:nowrap} .site .container-nav .metismenu.mod-menu > li + li::before{content:"";width:5px;height:5px;background:var(--fe-color-rule-strong);transform:rotate(45deg);margin:0 6px} .site .container-nav .metismenu.mod-menu > li > :is(a,button){display:flex;align-items:center;gap:4px;height:54px;padding:0 14px;font-size:var(--fe-fs-nav);font-weight:700;line-height:1;letter-spacing:var(--fe-ls-nav);white-space:nowrap;color:var(--fe-color-ink);background:none;border:0;border-bottom:2px solid transparent;border-radius:0;margin-bottom:-2px;transition:color var(--fe-dur-fast) var(--fe-ease)} .site .container-nav .metismenu.mod-menu > li > a:has(+ .mm-toggler-link){padding-right:0} .site .container-nav .metismenu.mod-menu > li > .mm-toggler-link{padding:0 14px 0 4px} .site .container-nav .metismenu.mod-menu > li > .mm-toggler::after{width:14px;height:14px;transform:none} .site .container-nav .metismenu.mod-menu > li:hover > :is(a,button){color:var(--fe-color-bronze)} .site .container-nav .metismenu.mod-menu > li.active > :is(a,button){color:var(--fe-color-bronze);border-bottom-color:var(--fe-color-bronze)} /* dropdown (.fe-dd) και 3ο επίπεδο οριζόντια (.fe-dd--sub). Ανοίγει και σε hover· η γέφυρα ::before καλύπτει το κενό ανάμεσα στο στοιχείο και στο dropdown, ώστε να μη χάνεται το hover στη διαδρομή του δείκτη. Padding 0: στο πρωτότυπο το padding:10px 0 του .fe-dd το ακυρώνει το .fe-nav ul{padding:0}, που έχει μεγαλύτερη εξειδίκευση */ .site .container-nav .metismenu.mod-menu .metismenu-item > ul{position:absolute;top:56px;left:20px;width:290px;min-width:0;padding:0;background:var(--fe-color-paper);color:var(--fe-color-ink);border:1px solid var(--fe-color-rule);border-top:3px solid var(--fe-color-bronze);box-shadow:var(--fe-shadow-dropdown);z-index:1001;animation:fe-dd-in var(--fe-dur-menu) var(--fe-ease)} .site .container-nav .metismenu.mod-menu > li > ul::before{content:"";position:absolute;left:-1px;right:-1px;top:-12px;height:9px} .site .container-nav .metismenu.mod-menu .metismenu-item:not(.level-1) > ul{top:-11px;left:288px;border-top:1px solid var(--fe-color-rule)} .site .container-nav .metismenu.mod-menu .metismenu-item.parent:hover > ul{display:block} .site .container-nav .metismenu.mod-menu .mm-collapsing{transition-duration:1ms} .site .container-nav .metismenu.mod-menu .metismenu-item:not(.level-1){display:block;position:relative} .site .container-nav .metismenu.mod-menu .metismenu-item:not(.level-1) > :is(a,button){display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:8px 20px;font-size:16px;line-height:23px;font-weight:400;letter-spacing:0;white-space:normal;text-align:left;color:var(--fe-color-ink);background:none;border:0;border-radius:0} .site .container-nav .metismenu.mod-menu .metismenu-item:not(.level-1) > :is(a,button):focus-visible{outline-offset:0} .site .container-nav .metismenu.mod-menu .metismenu-item:not(.level-1):hover > :is(a,button), .site .container-nav .metismenu.mod-menu .metismenu-item:not(.level-1) > [aria-expanded="true"]{background:var(--fe-color-paper-hover);color:var(--fe-color-bronze-deep)} .site .container-nav .metismenu.mod-menu .metismenu-item:not(.level-1) > .mm-toggler::after{width:16px;height:16px;-webkit-mask-image:var(--fe-ic-dexia);mask-image:var(--fe-ic-dexia);transform:none} /* αναζήτηση: εικονίδιο δεξιά στη γραμμή μενού, στο άκρο της στήλης 1160 */ .site .container-nav .fe-search-toggle{position:absolute;top:6px;right:max(var(--fe-gutter), calc((100% - var(--fe-container)) / 2))} } @keyframes fe-dd-in{from{opacity:0}} @media (max-width: 991.98px) { /* hamburger και αναζήτηση στη γραμμή της ονομασίας: κάτω από το topbar (44), κεντραρισμένα στα 78 της γραμμής */ .site .container-nav :is(.navbar-toggler,.fe-search-toggle){position:absolute;top:calc(44px + 17px);right:var(--fe-gutter);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--fe-radius);background:transparent;color:var(--fe-color-ink);box-shadow:none;z-index:2} .site .container-nav .fe-search-toggle{right:calc(var(--fe-gutter) + 44px)} .site .container-nav .navbar-toggler:hover{color:var(--fe-color-bronze)} .site .container-nav .navbar-toggler[aria-expanded="true"]{color:var(--fe-color-bronze-dark)} .site .container-nav .navbar-toggler .icon-menu{display:none} .site .container-nav .navbar-toggler::before{content:"";width:24px;height:24px;background:currentColor;-webkit-mask:var(--fe-ic-menou) center / 100% no-repeat;mask:var(--fe-ic-menou) center / 100% no-repeat} .site .container-nav .navbar-toggler[aria-expanded="true"]::before{-webkit-mask-image:var(--fe-ic-kleisimo);mask-image:var(--fe-ic-kleisimo)} /* πάνελ (.fe-mpanel): αναζήτηση πάνω, λίστα, έμβλημα στο τέλος */ .site .container-nav .container-search{order:-1} .site .container-nav:has(.navbar-collapse:is(.show,.collapsing)) .fe-searchpanel{display:block;height:auto;border-bottom:0} .site .container-nav .navbar-collapse.show{display:block} .site .container-nav .navbar-collapse.collapsing{transition:height var(--fe-dur-panel) var(--fe-ease)} .site .container-nav .navbar-collapse::after{content:"";display:block;height:103px;background:var(--fe-color-paper) url("../images/emvlima-mpronntzos.svg") center / 30px 47px no-repeat} .site .container-nav .metismenu.mod-menu{display:block} .site .container-nav .metismenu.mod-menu .metismenu-item{display:flex;flex-wrap:wrap;align-items:stretch} .site .container-nav .metismenu.mod-menu .metismenu-item > :is(a,button){flex:1 1 0;display:flex;justify-content:space-between;align-items:center;min-height:54px;padding:0 18px;font-size:15px;font-weight:700;line-height:1.3;letter-spacing:.1em;white-space:normal;text-align:left;color:var(--fe-color-ink);background:var(--fe-color-paper);border:0;border-bottom:1px solid var(--fe-color-rule);border-radius:0} .site .container-nav .metismenu.mod-menu .metismenu-item > .mm-toggler-link{flex:0 0 54px;justify-content:center;padding:0} .site .container-nav .metismenu.mod-menu .metismenu-item > :is(a,button):focus-visible{outline-offset:-3px} .site .container-nav .metismenu.mod-menu .mm-toggler::after{width:20px;height:20px;transition:transform var(--fe-dur-fast) var(--fe-ease)} .site .container-nav .metismenu.mod-menu .mm-toggler[aria-expanded="true"]::after{transform:rotate(180deg)} .site .container-nav .metismenu.mod-menu .metismenu-item > [aria-expanded="true"], .site .container-nav .metismenu.mod-menu .metismenu-item:has(> [aria-expanded="true"]) > a{color:var(--fe-color-bronze-dark)} .site .container-nav .metismenu.mod-menu .metismenu-item > a[aria-current="page"]{box-shadow:inset 4px 0 0 var(--fe-color-bronze)} .site .container-nav .metismenu.mod-menu .metismenu-item > ul{position:static;flex:0 0 100%;width:100%;min-width:0;background:none;border:0;box-shadow:none} .site .container-nav .metismenu.mod-menu .mm-collapsing{transition-duration:calc(var(--fe-dur-panel) + 1ms)} .site .container-nav .metismenu.mod-menu .metismenu-item:not(.level-1) > :is(a,button){font-size:17px;font-weight:400;letter-spacing:0;padding-left:34px;background:var(--fe-color-ivory)} .site .container-nav .metismenu.mod-menu .metismenu-item.level-3 > :is(a,button){padding-left:50px} .site .fe-searchpanel search{flex-basis:100%} } /* --- β.12 breadcrumbs: override html/mod_breadcrumbs (nav.fe-crumbs > ol, aria-current), όψη από το §2. Μέσα στο .container-component, άρα στη στήλη 1160 με το gutter της· στο πρωτότυπο το ol είναι .fe-wrap, αλλά κάτω από 1200 το margin:0 auto του .fe-crumbs ol ακυρώνει το gutter του .fe-wrap και τα screenshots 768/390 τα δείχνουν στο x=0. Η Cassiopeia δίνει margin-top 1em σε κάθε παιδί του component· στο πρωτότυπο τα μπλοκ ακουμπούν και το κενό το δίνει το padding τους (breadcrumbs 16, .fe-pagehead 28) --- */ .site .container-component > *{margin-top:0} /* --- β.19 footer: module 133, layout html/mod_custom/footer.php, όψη από το §2. Το