/* ═══════════════════════════════════════════════════════════════════════════ ERASMUS LIFE ATHENS — STAMPED · engraved edition Production stylesheet. Sections 00-23 carry the locked A2 direction. Section 24 dresses the erasmuslife-ext contract (.ela-*), which ships semantic HTML with zero styling of its own. ═══════════════════════════════════════════════════════════════════════════ */ /* ============ 00 · TOKENS ============ */ @property --bleed{syntax:'';inherits:false;initial-value:0%} :root{ --canvas:#EDE7DA; --canvas-2:#E3DCCB; --ink:#101828; --brand:#17376E; --signal:#C6402C; /* Τα ίδια χρώματα σε κανάλια, για τα rgba(). Χωρίς αυτά, κάθε διαφάνεια θα ήταν σκληροκωδικωμένη και ένα θέμα θα χρειαζόταν εκατό overrides. */ --paper-rgb:242,237,226; --ink-rgb:16,24,40; --signal-rgb:198,64,44; --whisper-rgb:140,127,106; --canvas-rgb:237,231,218; /* Το βάθος είναι ΑΛΛΟ πράγμα από το μελάνι. Στο μπεζ συμπίπτουν, γι' αυτό ήταν ένα token. Σε σκούρο θέμα τραβάνε αντίθετα: τα γράμματα γίνονται λευκά, οι σκιές μένουν σκοτεινές — αλλιώς οι σκιές φωτίζουν. */ --shade-rgb:16,24,40; --stamp-rgb:156,46,27; --brand-rgb:23,55,110; --cream:#F7F2E7; /* κείμενο πάνω σε σκούρο ή σε signal */ --whisper:#8C7F6A; --whisper-ink:#665A48; --signal-ink:#A93520; /* stamp ink: the same vermillion, pressed harder — #C6402C reads 4.09:1 at 10-13px, this reads 6.04:1 */ --stamp-ink:#9C2E1B; --paper:#FBF8F1; --light:#F2EDE2; /* Δύο ρόλοι που στο μπεζ πέφτουν πάνω σε υπάρχοντα χρώματα, αλλά σε ένα σκούρο θέμα τραβάνε αντίθετες κατευθύνσεις: το περιθώριο της φωτογραφίας θέλει να μείνει λευκό, η ζώνη ολικής ροής θέλει να γίνει ακόμα πιο σκούρα. */ --frame:#FBF8F1; /* το «πολαρόιντ» περιθώριο — ίδιο με το --paper στο μπεζ */ --footer-bg:var(--ink); /* το υποσέλιδο είναι ΠΑΝΤΑ αντεστραμμένο: σκούρο με φως από πάνω. Στο μπεζ συμπίπτει με το μελάνι· σε σκούρο θέμα το μελάνι γίνεται λευκό και πρέπει να ξεκολλήσει. */ --fill-dark:#17376E; /* ΚΑΘΕ γεμάτη σκούρα επιφάνεια με φως από πάνω: η ζώνη ολικής ροής, το πλωτό WhatsApp, η θήκη των σφραγίδων. Στο μπεζ ταυτίζεται με το --brand, γι' αυτό ήταν αόρατο ότι είναι άλλος ρόλος. */ --disp:'Source Serif 4',Georgia,'Times New Roman',serif; --sans:'IBM Plex Sans',-apple-system,Segoe UI,sans-serif; --mono:'IBM Plex Mono','Noto Sans Mono',ui-monospace,SFMono-Regular,monospace; /* IBM Plex Mono ships no Greek — the stamp device must never change face between EL and EN */ --stamp-font:'Noto Sans Mono','IBM Plex Mono',ui-monospace,SFMono-Regular,monospace; /* motion system — four easings with a job each */ --e-press:cubic-bezier(.2,.86,.12,1); /* stamp making contact */ --e-page:cubic-bezier(.5,.03,.16,1); /* page / line turning */ --e-ink:cubic-bezier(.1,.6,.26,1); /* ink spreading into paper */ --e-ui:cubic-bezier(.36,.05,.24,1); /* plain interface moves */ --eo:cubic-bezier(.34,1.4,.5,1); /* overshoot */ --sp:30px; --sp2:25px; --pad:clamp(18px,4.6vw,64px); /* the bar is sized around the mark: clamp(46…58px) + breathing room */ --hdr:66px; --hdr-shrink:8px; --line:rgba(var(--whisper-rgb),.42); --shadow:4px 4px 0 rgba(var(--shade-rgb),.08); /* z-index map — one place, no surprises grain 950 · header 900 (1001 while the drawer is open) · drawer 1000 · backdrop 999 floats 880 · tray 870 · lightbox = top layer */ } @media (min-width:700px){:root{--sp:clamp(64px,7vw,92px);--sp2:clamp(48px,5vw,70px)}} @media (min-width:900px){:root{--hdr:84px;--hdr-shrink:14px;--sp:clamp(84px,9vw,128px);--sp2:clamp(60px,6.5vw,96px)}} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} html,body{overflow-x:clip;max-width:100%} main{overflow-x:clip} body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);font-size:1.06rem; line-height:1.66;font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{display:block;max-width:100%;height:auto} h1,h2,h3,h4{margin:0;font-family:var(--disp);font-weight:600;letter-spacing:-.02em;line-height:1.06;text-wrap:balance} p{margin:0 0 1em;text-wrap:pretty} p:last-child{margin-bottom:0} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--signal);outline-offset:2px} ::selection{background:var(--signal);color:var(--canvas)} [id]{scroll-margin-top:calc(var(--hdr) + 18px)} [hidden]{display:none!important} /* a control hidden behind its own label still has to show focus */ input.vh:focus-visible+label,input.vh:focus-visible+span, .opt input:focus-visible+span,.chip input:focus-visible+span{outline:2px solid var(--signal);outline-offset:2px} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap} .skip{position:absolute;left:-9999px;top:0;z-index:1200;background:var(--signal);color:var(--cream); padding:12px 18px;font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none} .skip:focus{left:8px;top:8px} /* ============ 01 · TYPOLOGY A — DOCUMENT PAGE (gutter left) ============ */ .wrap{width:min(1360px,100%);margin-inline:auto;padding-inline:var(--pad)} .doc{display:grid;grid-template-columns:minmax(0,1fr);gap:14px} .doc>*{min-width:0} @media (min-width:900px){.doc{grid-template-columns:minmax(150px,2fr) minmax(0,10fr);gap:clamp(28px,4vw,72px)}} .gut{position:relative} @media (min-width:900px){.gut{position:sticky;top:calc(var(--hdr) + 34px);align-self:start}} .fld{font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--whisper-ink);display:block} .fld b{font-weight:500;color:var(--signal-ink)} .gut .fld{overflow:hidden} .gut .fld span{display:block;transform:translateY(115%);transition:transform .46s var(--e-page)} .in .gut .fld span,.gut.in .fld span{transform:none} .hair{height:1px;background:var(--line);margin-top:12px;transform:scaleX(0);transform-origin:left;transition:transform .42s var(--e-ink) .1s} .in .hair,.hair.in{transform:scaleX(1)} .gut .note{display:none} @media (min-width:900px){.gut .note{display:block;margin-top:16px;font-family:var(--mono);font-size:.7rem;line-height:1.65; color:var(--whisper-ink);letter-spacing:.02em;max-width:19ch}} section{padding-block:var(--sp);position:relative} section.tight{padding-block:var(--sp2)} h2{font-size:clamp(1.95rem,4.4vw,3.4rem);max-width:19ch} h3{font-size:clamp(1.1rem,1.7vw,1.32rem);letter-spacing:-.012em} .lede{font-size:clamp(.99rem,1.3vw,1.16rem);max-width:56ch;color:rgba(var(--ink-rgb),.86);margin-top:14px} .cap{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--whisper-ink)} .alt{background:var(--canvas-2)} /* honest placeholders — never a fake fact */ .pbox{border:1px dashed var(--whisper);background:rgba(var(--whisper-rgb),.06);padding:16px 18px;margin:18px 0 22px} .pbox .pk{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--signal-ink);display:block;margin-bottom:8px} .pbox p{font-size:.98rem;color:rgba(var(--ink-rgb),.84);margin:0} .bleed .pbox{border-color:rgba(var(--paper-rgb),.4);background:rgba(var(--paper-rgb),.06)} .bleed .pbox p{color:rgba(var(--paper-rgb),.9)} .bleed .pbox .pk{color:#F0B8AB} /* ============ 02 · GRAIN + PAPER ============ */ .grain{position:fixed;inset:0;z-index:950;pointer-events:none;opacity:.04;mix-blend-mode:multiply;contain:strict} .grain svg{width:100%;height:100%} .defs{position:absolute;width:0;height:0;overflow:hidden} .perf{height:16px;position:relative;background:transparent} .perf::before{content:"";position:absolute;left:0;right:0;top:50%;height:6px;transform:translateY(-50%); background:radial-gradient(circle at 3px 3px,var(--whisper) 1.6px,transparent 1.9px) 0 0/14px 6px repeat-x;opacity:.55} @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){ .perf::before{animation:perfdraw linear both;animation-timeline:view();animation-range:entry 0% cover 40%} @keyframes perfdraw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}} } } /* ============ 03 · THE STAMP ============ */ .stamp{display:block;width:var(--sz,150px);height:var(--sz,150px);color:var(--stamp-ink);line-height:0; -webkit-mask-image:radial-gradient(circle at 46% 42%,#000 var(--bleed),transparent calc(var(--bleed) + 22%)); mask-image:radial-gradient(circle at 46% 42%,#000 var(--bleed),transparent calc(var(--bleed) + 22%)); transform:scale(1.55) rotate(-9deg);opacity:.001} .stamp.set{--bleed:140%;opacity:.92;transform:scale(1) rotate(var(--rot,-3.5deg)); transition:--bleed 380ms var(--e-ink),transform 380ms var(--eo),opacity 90ms linear} .stamp.lite{-webkit-mask-image:none;mask-image:none} .stamp.lite.set{transition:transform 340ms var(--eo),opacity 200ms var(--e-press)} .stamp svg{width:100%;height:100%;overflow:visible} .s-arc{font-family:var(--stamp-font);font-weight:500;font-size:15px;letter-spacing:2.4px;fill:currentColor} .s-arc-b{font-size:10px;letter-spacing:2.2px} .s-rib{font-family:var(--stamp-font);font-weight:500;font-size:19px;letter-spacing:1.6px;fill:var(--canvas);text-anchor:middle} .s-det{font-family:var(--stamp-font);font-weight:500;font-size:10.5px;letter-spacing:1.6px;fill:currentColor;text-anchor:middle} .stamp-mini{--sz:52px;--rot:-6deg} /* ============ 04 · BUTTONS + FIELD LINKS ============ */ .btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:2px; background:var(--signal);color:var(--cream);font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.14em; text-transform:uppercase;text-decoration:none;cursor:pointer;position:relative;isolation:isolate; box-shadow:4px 4px 0 rgba(var(--signal-rgb),.24); transition:transform .26s var(--e-press),box-shadow .26s var(--e-press),background .26s var(--e-ui)} .btn:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(var(--signal-rgb),.3)} .btn:active{transform:translate(4px,4px);box-shadow:0 0 0 rgba(var(--signal-rgb),.3)} .btn[disabled]{background:var(--whisper);box-shadow:none;cursor:not-allowed;opacity:.6} .btn-out{background:transparent;color:var(--ink);border:1.5px solid var(--ink);box-shadow:3px 3px 0 rgba(var(--shade-rgb),.12)} .btn-out:hover{box-shadow:1px 1px 0 rgba(var(--shade-rgb),.16)} .fl-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-family:var(--mono);font-size:.74rem; letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--ink); border-bottom:1px solid var(--line);padding-bottom:2px; transition:border-color .26s var(--e-ui),color .26s var(--e-ui)} .fl-link::after{content:"→";transition:transform .26s var(--e-ui)} .fl-link:hover{border-bottom-color:var(--signal);color:var(--signal-ink)} .fl-link:hover::after{transform:translateX(4px)} .tl{font-family:var(--mono);font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none; color:var(--signal-ink);display:inline-flex;align-items:center;gap:7px;min-height:44px} .tl::after{content:"→";transition:transform .26s var(--e-ui)} .tl:hover::after{transform:translateX(4px)} .bleed .tl{color:var(--cream)} .actions{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:18px} /* ============ 05 · HEADER + NAV ============ */ .hdr{position:fixed;top:0;left:0;right:0;z-index:900;height:var(--hdr);background:rgba(var(--canvas-rgb),.94); backdrop-filter:blur(9px);border-bottom:1px solid transparent; transition:border-color .3s var(--e-ui),background .3s var(--e-ui)} .hdr.stuck{border-bottom-color:var(--line);background:rgba(var(--canvas-rgb),.98)} /* ── Η μπάρα χαμηλώνει μόλις ξεκινήσει το scroll ────────────────────────── Η κλάση .stuck μπαίνει ήδη από τα 12px. Της δίνουμε και ύψος: η σελίδα κερδίζει λίγο αέρα χωρίς να χάσει την πλοήγηση, και το σήμα μαζεύεται αναλογικά ώστε να μη «χτυπάει» στις άκρες της χαμηλωμένης μπάρας. Το --hdr ΔΕΝ αλλάζει: το διαβάζουν τα scroll-margin των αγκυρών και τα κολλημένα gutters. Αν κουνιόταν, κάθε άγκυρα θα προσγειωνόταν αλλού ανάλογα με το αν είχες ήδη κάνει scroll ή όχι. */ .hdr.stuck{height:calc(var(--hdr) - var(--hdr-shrink))} .hdr.stuck .brand .mk{width:clamp(38px,3.4vw,48px);height:clamp(38px,3.4vw,48px)} @media (prefers-reduced-motion:no-preference){ .hdr{transition:border-color .3s var(--e-ui),background .3s var(--e-ui),height .3s var(--e-ui)} .hdr .brand .mk{transition:width .3s var(--e-ui),height .3s var(--e-ui)} } /* while the drawer is open the header rides above it, so the X stays reachable */ .hdr.nav-open{z-index:1001;background:var(--canvas)} .hdr .brand,.hdr .nav-d,.hdr .hdr-r{transition:opacity .28s var(--e-ui)} .hdr.nav-open .brand,.hdr.nav-open .nav-d,.hdr.nav-open .hdr-r{opacity:.3} .hdr .bar{height:100%;display:flex;align-items:center;gap:9px;width:min(1360px,100%);margin-inline:auto;padding-inline:var(--pad)} .prog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--signal);width:100%;transform-origin:left;transform:scaleX(0)} @supports (animation-timeline:scroll()){.prog{animation:pg linear both;animation-timeline:scroll(root)}@keyframes pg{to{transform:scaleX(1)}}} .brand{display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;flex:0 0 auto;min-width:44px;min-height:44px} .brand .mk{width:clamp(46px,4.2vw,58px);height:clamp(46px,4.2vw,58px);border-radius:50%;background:var(--brand); display:grid;place-items:center;flex:0 0 auto} .brand .mk img{width:86%;height:auto} .nav-d{display:none} /* The eighth item ("Home", on every page except the front one) plus Greek at ~40% wider than English no longer fits at 1080. The desktop nav therefore starts at 1180, the gap is tighter, and the letter-spacing gives back the last few pixels. Below that the drawer carries the same list, Home first. */ @media (min-width:1180px){.nav-d{display:flex;align-items:center;gap:clamp(8px,1.05vw,18px);margin-inline:auto;min-width:0} .nav-d a{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;font-family:var(--mono); font-size:clamp(.66rem,.68vw,.71rem);letter-spacing:.055em;text-transform:uppercase;text-decoration:none; padding:6px 2px;position:relative;color:rgba(var(--ink-rgb),.8);transition:color .24s var(--e-ui)} .nav-d a::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:1.5px;background:var(--signal); transform:scaleX(0);transform-origin:left;transition:transform .28s var(--e-ui)} .nav-d a.nav-home{color:var(--signal-ink)} .nav-d a.nav-home::after{background:var(--signal)} .nav-d a:hover,.nav-d a[aria-current="page"]{color:var(--ink)} .nav-d a:hover::after,.nav-d a[aria-current="page"]::after{transform:scaleX(1)}} /* Το στοιχείο του μενού μεγαλώνει ελαφρά στο hover — μια ένδειξη «αυτό θα πατήσεις» πριν καν το πατήσεις. Με transform, όχι με font-size: το transform δεν επαναϋπολογίζει διάταξη, άρα τα διπλανά στοιχεία δεν μετακινούνται και τα γράμματα δεν αναπηδούν. */ @media (min-width:1180px) and (prefers-reduced-motion:no-preference){ .nav-d a{transition:color .24s var(--e-ui),transform .22s var(--e-press)} .nav-d a:hover,.nav-d a:focus-visible{transform:scale(1.09)} .nav-d a:active{transform:scale(1.02)} } .hdr-r{margin-left:auto;display:flex;align-items:center;gap:8px} .lang{display:flex;align-items:center;gap:8px} .lang button{background:transparent;border:0;min-width:44px;height:44px;padding:0 5px;font-family:var(--mono); font-size:.7rem;font-weight:500;letter-spacing:.1em;cursor:pointer;color:var(--whisper-ink);position:relative; transition:color .24s var(--e-ui)} .lang button::after{content:"";position:absolute;left:5px;right:5px;bottom:11px;height:1.5px;background:var(--signal); transform:scaleX(0);transition:transform .26s var(--e-ui)} .lang button[aria-pressed="true"]{color:var(--ink)} .lang button[aria-pressed="true"]::after{transform:scaleX(1)} .ic{display:grid;place-items:center;width:44px;height:44px;border:1px solid transparent;border-radius:2px; text-decoration:none;transition:background .24s var(--e-ui),border-color .24s var(--e-ui)} .ic:hover{background:var(--canvas-2);border-color:var(--line)} .ic svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.7} .tel-d{display:none;align-items:center;gap:8px;white-space:nowrap;font-family:var(--mono);font-size:.72rem; letter-spacing:.06em;text-decoration:none;padding:0 12px;height:44px;border:1px solid var(--ink);border-radius:2px; transition:background .24s var(--e-ui),color .24s var(--e-ui)} .tel-d:hover{background:var(--ink);color:var(--canvas)} @media (min-width:1180px){.tel-d{display:inline-flex}.ic.tel-i{display:none}} @media (max-width:699px){.hdr .bar{gap:6px}} @media (max-width:559px){.hdr .ic.ig{display:none}} .menu-toggle{display:grid;place-items:center;width:44px;height:44px;background:transparent;border:1px solid var(--line); border-radius:2px;cursor:pointer;flex:0 0 auto;margin-left:-6px} @media (min-width:1180px){.menu-toggle{display:none}} .menu-toggle i{display:block;width:17px;height:1.6px;background:var(--ink);position:relative; transition:transform .3s var(--e-ui),background .2s} .menu-toggle i::before,.menu-toggle i::after{content:"";position:absolute;left:0;width:17px;height:1.6px; background:var(--ink);transition:transform .3s var(--e-ui)} .menu-toggle i::before{top:-5.5px}.menu-toggle i::after{top:5.5px} .menu-toggle[aria-expanded="true"] i{background:transparent} .menu-toggle[aria-expanded="true"] i::before{transform:translateY(5.5px) rotate(45deg)} .menu-toggle[aria-expanded="true"] i::after{transform:translateY(-5.5px) rotate(-45deg)} /* mobile LEFT drawer */ .nav-mobile{position:fixed;top:0;left:0;bottom:0;z-index:1000;width:clamp(260px,62vw,340px);transform:translateX(-105%); visibility:hidden;padding:calc(var(--hdr) + 18px + env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom)); background:var(--canvas);box-shadow:0 0 60px rgba(0,0,0,.18);overflow-y:auto; transition:transform .34s var(--e-page),visibility 0s linear .34s} .nav-mobile.open{transform:none;visibility:visible;transition:transform .34s var(--e-page)} .nav-backdrop{position:fixed;inset:0;z-index:999;background:rgba(var(--shade-rgb),.45);backdrop-filter:blur(2px); opacity:0;pointer-events:none;transition:opacity .3s var(--e-ui)} .nav-backdrop.show{opacity:1;pointer-events:auto} .nav-mobile ol{list-style:none;margin:18px 0 0;padding:0;counter-reset:n} .nav-mobile li{counter-increment:n;border-top:1px solid var(--line)} .nav-mobile li:last-child{border-bottom:1px solid var(--line)} .nav-mobile ol a{display:flex;align-items:baseline;gap:12px;min-height:50px;padding:10px 0;text-decoration:none; font-family:var(--disp);font-size:1.26rem;font-weight:600;letter-spacing:-.015em} .nav-mobile ol a::before{content:"0" counter(n);font-family:var(--mono);font-size:.69rem;letter-spacing:.14em; color:var(--signal-ink);flex:0 0 auto} /* the way back is not item 01 of the tour — it is the way back */ .nav-mobile li.drw-home{counter-increment:none;border-top:0} .nav-mobile li.drw-home a{color:var(--signal-ink)} .nav-mobile li.drw-home a::before{content:"↖"} .nav-mobile .drw-h{display:flex;align-items:center;justify-content:space-between;gap:10px} .drw-soc{display:flex;flex-wrap:wrap;gap:0 16px;margin-top:16px} .drw-soc a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;font-family:var(--mono); font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--signal-ink)} .drw-ct{margin-top:6px;line-height:1.8;text-transform:none;letter-spacing:.04em} /* ============ 06 · PHOTOS (only where the picture is the truth) ============ */ .ph{position:relative;background:var(--frame);padding:9px;box-shadow:var(--shadow);border-radius:1px; transform:rotate(var(--r,-2.2deg));transition:transform .4s var(--e-page),box-shadow .4s var(--e-ui)} .ph img{border-radius:0;width:100%;object-fit:cover;aspect-ratio:var(--ar,3/2)} .ph::after{content:attr(data-tag);position:absolute;right:10px;bottom:12px;font-family:var(--mono);font-size:.66rem; letter-spacing:.14em;color:rgba(var(--ink-rgb),.62);background:rgba(251,248,241,.9);padding:2px 5px} /* the tape grows with whatever it is holding down */ .tape{position:absolute;width:clamp(78px,7.2vw,124px);height:clamp(22px,2.1vw,34px);background:rgba(var(--whisper-rgb),.24); border-left:1px dashed rgba(var(--whisper-rgb),.4);border-right:1px dashed rgba(var(--whisper-rgb),.4);z-index:2} .tape.tl{top:calc(-.5*clamp(22px,2.1vw,34px));left:calc(-.14*clamp(78px,7.2vw,124px) - 8px);transform:rotate(-32deg)} .tape.br{bottom:calc(-.42*clamp(22px,2.1vw,34px));right:calc(-.16*clamp(78px,7.2vw,124px) - 8px);transform:rotate(-28deg)} /* ============ 07 · HERO ============ */ .hero{padding-top:calc(var(--hdr) + 14px);padding-bottom:22px;min-height:78svh;display:flex;flex-direction:column; justify-content:center;position:relative} .h-top{display:flex;align-items:center;gap:12px;margin-bottom:16px} .h-top .ln{flex:1;height:1px;background:var(--line);transform:scaleX(0);transform-origin:left;animation:hln .6s var(--e-ink) .12s forwards} @keyframes hln{to{transform:scaleX(1)}} h1{font-size:clamp(2.4rem,7.1vw,6.1rem);font-weight:600;letter-spacing:-.025em;line-height:.99;text-wrap:balance;margin:0} /* Greek runs ~30% longer — the headline keeps the same line count instead of stealing two lines of vertical rhythm from everything below it. */ html[lang="el"] h1{font-size:clamp(2.05rem,5.75vw,4.95rem);letter-spacing:-.018em} h1 .l{display:block;overflow:hidden;padding-top:.11em;margin-top:-.11em;padding-bottom:.07em;margin-bottom:-.07em} h1 .l>span{display:block;transform:translateY(112%);transition:transform .56s var(--e-page)} h1 .l:nth-child(1)>span{transition-delay:.34s}h1 .l:nth-child(2)>span{transition-delay:.41s}h1 .l:nth-child(3)>span{transition-delay:.48s} .go h1 .l>span{transform:none} h1.done .l{overflow:visible} h1 .l:last-child>span{position:relative;z-index:0;display:inline-block;font-weight:700} h1 .l:last-child>span::after{content:"";position:absolute;inset:-36% -7%;z-index:-1;pointer-events:none;opacity:0; transform:scale(1.42) rotate(-13deg);transform-origin:50% 50%; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cellipse cx='200' cy='80' rx='193' ry='73' fill='none' stroke='%23C6402C' stroke-width='7'/%3E%3Cellipse cx='200' cy='80' rx='181' ry='62' fill='none' stroke='%23C6402C' stroke-width='2.4'/%3E%3C/svg%3E") center/100% 100% no-repeat; transition:opacity .16s linear,transform .42s var(--eo)} h1.done .l:last-child>span::after{opacity:.88;transform:scale(1) rotate(-3deg)} .h-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;margin:24px 0 20px;max-width:520px;opacity:0; transform:translateY(8px);transition:opacity .4s var(--e-ui) .62s,transform .4s var(--e-page) .62s} .go .h-fields{opacity:1;transform:none} .h-fields div{border-top:1px solid var(--line);padding-top:8px} .h-fields b{display:block;font-family:var(--mono);font-size:.82rem;font-weight:500;letter-spacing:.02em;color:var(--ink);margin-top:2px} .h-sub{max-width:46ch;font-size:1.04rem;color:rgba(var(--ink-rgb),.86);opacity:0;transform:translateY(8px); transition:opacity .4s var(--e-ui) .7s,transform .4s var(--e-page) .7s} .go .h-sub{opacity:1;transform:none} .h-cta{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-top:26px;opacity:0;transition:opacity .38s var(--e-ui) .84s} .go .h-cta{opacity:1} .issued{font-family:var(--mono);font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--whisper-ink); white-space:nowrap;overflow:hidden;clip-path:inset(0 100% 0 0);transition:clip-path .7s steps(28,end) .66s;margin-top:20px} .go .issued{clip-path:inset(0 0 0 0)} .mrz{margin-top:auto;padding-top:20px;font-family:var(--mono);font-size:clamp(.58rem,1.5vw,.78rem);letter-spacing:.22em; color:rgba(var(--ink-rgb),.62);white-space:nowrap;overflow:hidden;border-top:1px solid var(--line);padding-block:12px 0} .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center} .hero-grid>*{min-width:0} @media (min-width:900px){.hero-grid{grid-template-columns:minmax(0,6.6fr) minmax(0,5.4fr);gap:clamp(24px,3vw,56px)}} @media (min-width:1200px){.hero-grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}} .h-media{position:relative;--r:-2.2deg} /* the print itself: a wider board, a deeper white margin, a bigger file number */ @media (min-width:900px){ .h-media .ph{padding:clamp(10px,1.05vw,17px);box-shadow:6px 6px 0 rgba(var(--shade-rgb),.1)} .h-media .ph::after{right:14px;bottom:16px;font-size:.72rem;padding:3px 7px} } /* the seal keeps its share of the print — 0.37 of the photo's width at every size */ .h-media .stamp{position:absolute;--sz:clamp(112px,17.4vw,222px);left:-8%;bottom:-9%;z-index:3; filter:drop-shadow(0 1px 0 rgba(var(--signal-rgb),.2))} .h-mob{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:16px;align-items:end;margin-top:20px} @media (min-width:900px){.h-mob{display:none}} @media (max-width:899px){.h-media-d{display:none}} .h-cta-m{display:none} @media (max-width:899px){ .h-cta-m{display:grid;grid-template-columns:1fr;gap:9px;margin-top:14px} .h-cta-m .btn{width:100%;justify-content:center;min-height:50px} .h-cta-m .fl-link{justify-content:center} .h-cta{display:none}.h-fields{display:none}.mrz{display:none} .hero{padding-top:calc(var(--hdr) + 8px);padding-bottom:16px;min-height:auto} .h-top{margin-bottom:10px}.h-top .fld:last-child{display:none} h1{font-size:clamp(2.35rem,10.2vw,3.1rem);line-height:1} h1 .l:last-child>span::after{inset:-24% -6%} .h-sub{font-size:.97rem;max-width:34ch;margin-top:9px} .h-mob{margin-top:14px} .issued{margin-top:12px;font-size:.69rem; /* The stamp reveal needs nowrap on wide screens, but at phone widths the line is longer than the column and overflow:hidden was cutting it mid-sentence ("…days and hours change" with "every week" clipped away). Let it wrap: the clip-path reveal still runs, and the reader gets the whole sentence. */ white-space:normal;overflow-wrap:anywhere} } /* ============ 08 · TYPOLOGY C — SPREAD (two facing pages, visible seam) ============ */ .spread{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:20px} .spread>.pg{position:relative;min-width:0} @media (max-width:899px){.spread>.pg+.pg{border-top:1px solid var(--line);padding-top:20px}} @media (min-width:900px){ .spread{grid-template-columns:1fr 1fr;gap:clamp(44px,6vw,104px);align-items:center} .spread::before{content:"";position:absolute;left:50%;top:-8%;bottom:-8%;width:1px;background:var(--line); box-shadow:-18px 0 30px -18px rgba(var(--shade-rgb),.34),18px 0 30px -18px rgba(var(--shade-rgb),.34)} .spread>.pg:first-child{padding-right:clamp(4px,1vw,18px)} .spread>.pg:last-child{padding-left:clamp(4px,1vw,18px)} } .spread h2{max-width:16ch} .who-ph{--r:1.4deg;--ar:16/9;opacity:0;transform:rotate(0deg) scale(.985); transition:transform .52s var(--e-page),opacity .4s var(--e-ui)} .who-ph.in{opacity:1;transform:rotate(1.4deg) scale(1)} @media (min-width:900px){.who-ph{--ar:3/2}} .ln-rev{overflow:hidden;display:block;padding-top:.1em;margin-top:-.1em} .ln-rev>span{display:block;transform:translateY(110%);transition:transform .5s var(--e-page)} .in .ln-rev>span,.ln-rev.in>span{transform:none} .in .ln-rev:nth-child(2)>span{transition-delay:.07s} .in .ln-rev:nth-child(3)>span{transition-delay:.14s} .pull{margin-top:16px;padding-left:16px;border-left:2px solid var(--signal);font-family:var(--disp); font-size:1.09rem;line-height:1.45;max-width:44ch} /* ============ 09 · TYPOLOGY B — FULL-BLEED STAMPED ZONE ============ */ .bleed{background:var(--fill-dark);color:var(--light);position:relative;overflow:clip} .bleed::before{content:"";position:absolute;inset:0;background-image:var(--bg,none);background-size:cover; background-position:50% 40%;opacity:.12;filter:grayscale(1)} .bleed.deep{background:#0F2951} #crew{--bg:url(/assets/web/20-DSC_5971-800.webp)} @media (min-width:900px){#crew{--bg:url(/assets/web/20-DSC_5971-1600.webp)}} .bleed>.wrap{position:relative} .bleed h2{color:var(--cream);font-size:clamp(2.02rem,7.4vw,6.2rem);max-width:14ch;letter-spacing:-.03em; margin-inline-start:calc(-1*clamp(0px,1.6vw,40px))} .bleed h3{color:var(--cream)} .bleed .lede{color:rgba(var(--paper-rgb),.88);max-width:52ch} .bleed .cap,.bleed .fld{color:rgba(var(--paper-rgb),.8)} .bleed .hair{background:rgba(var(--paper-rgb),.32)} .bz-head{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:flex-end;justify-content:space-between;margin-bottom:16px} .bz-head.two{display:grid;grid-template-columns:1fr;gap:10px} @media (min-width:900px){.bz-head.two{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(30px,4vw,72px); align-items:end;margin-bottom:24px}.bz-head.two .lede{margin-top:0}} .bz2{display:grid;grid-template-columns:minmax(0,1fr);gap:20px} .bz2>*{min-width:0} @media (min-width:860px){.bz2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4.5vw,72px);align-items:start}} .bleed .btn-out{border-color:#F2EDE2;color:#F2EDE2;box-shadow:3px 3px 0 rgba(var(--paper-rgb),.24)} .bleed .btn-out:hover{background:#F2EDE2;color:var(--brand)} .bleed details{border-bottom:1px solid rgba(var(--paper-rgb),.28)} .bleed details:first-of-type{border-top:1px solid rgba(var(--paper-rgb),.28)} .bleed summary{color:var(--cream)} .bleed summary::after{border-color:#E9A99B} .bleed details p{color:rgba(var(--paper-rgb),.86)} @media (max-width:859px){.rvl-g{max-width:300px}} .rvl{clip-path:inset(0 0 100% 0);transition:clip-path .58s var(--e-page) calc(var(--i,0)*90ms)} .rvl img{transform:scale(1.06);transition:transform .74s var(--e-page) calc(var(--i,0)*90ms)} .rvl.in,.rvl-g.in .rvl{clip-path:inset(0 0 0 0)} .rvl.in img,.rvl-g.in .rvl img{transform:scale(1)} .rvl-g{display:grid;gap:12px;align-items:end} .rvl-g.two{grid-template-columns:1.25fr 1fr} .rvl-g.three{grid-template-columns:repeat(3,1fr);align-items:center;gap:10px} /* ============ 10 · LISTS, ACCORDIONS, CONTACT, FOOTER ============ */ .roles{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid rgba(var(--paper-rgb),.28)} .roles li{border-bottom:1px solid rgba(var(--paper-rgb),.28);padding:11px 0;display:flex;gap:14px;align-items:baseline;font-size:1rem} .roles li b{font-family:var(--mono);font-size:.75rem;font-weight:500;letter-spacing:.13em; color:rgba(var(--paper-rgb),.86);flex:0 0 46px;text-transform:uppercase} .steps-3{counter-reset:s;list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid rgba(var(--paper-rgb),.28)} .steps-3 li{counter-increment:s;border-bottom:1px solid rgba(var(--paper-rgb),.28);padding:12px 0 12px 38px;position:relative;line-height:1.55} .steps-3 li::before{content:"0" counter(s);position:absolute;left:0;top:14px;font-family:var(--mono);font-size:.7rem; letter-spacing:.1em;color:#F0B8AB} .ct-grid{display:grid;gap:26px} @media (min-width:900px){.ct-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,4vw,64px)}} .ct-list{display:grid;gap:0 22px;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:16px} @media (min-width:900px){.ct-list{grid-template-columns:1fr}} .ct-list a,.ct-list div{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px; border-bottom:1px solid var(--line);padding:7px 0;text-decoration:none;min-height:46px; transition:transform .3s var(--e-ui),color .24s var(--e-ui)} .ct-list a:hover{transform:translateX(10px);color:var(--signal-ink)} .ct-list b{line-height:1.4;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase; color:var(--whisper-ink);font-weight:400;flex:0 0 auto} .ct-list em{font-style:normal;line-height:1.4;font-family:var(--mono);font-size:.76rem;letter-spacing:.02em;overflow-wrap:break-word} @media (min-width:900px){.ct-list a,.ct-list div{flex-direction:row;align-items:baseline;justify-content:space-between;gap:16px} .ct-list em{font-size:.84rem;text-align:right;overflow-wrap:normal}} details{border-bottom:1px solid var(--line)} details:first-of-type{border-top:1px solid var(--line)} summary{list-style:none;cursor:pointer;padding:11px 34px 11px 0;position:relative;font-family:var(--disp); font-size:1.04rem;font-weight:600;min-height:48px;display:flex;align-items:center} summary::-webkit-details-marker{display:none} summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px; border-right:1.5px solid var(--signal);border-bottom:1.5px solid var(--signal); transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--e-ui)} details[open] summary::after{transform:translateY(-30%) rotate(-135deg)} details p{padding:0 0 13px;font-size:.97rem;color:rgba(var(--ink-rgb),.82);max-width:56ch} details .dbody{padding:0 0 14px} .legal h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-top:34px} .legal h3{margin-top:22px} .legal p,.legal li{max-width:70ch;font-size:1rem} .legal ul{padding-left:20px} .legal li{margin-bottom:6px} footer{background:var(--footer-bg);color:rgba(var(--paper-rgb),.82); padding-block:clamp(24px,4.5vw,60px) calc(18px + env(safe-area-inset-bottom))} .ft-grid{display:grid;gap:18px;grid-template-columns:minmax(0,1fr);align-items:start} .ft-grid>*{min-width:0} @media (min-width:760px){.ft-grid{grid-template-columns:auto 1fr auto;gap:40px}} .ft-mk{width:52px;height:52px;border-radius:50%;background:var(--brand);display:grid;place-items:center} .ft-mk img{width:82%} .ft-nav{display:flex;flex-wrap:wrap;gap:0 18px} .ft-nav a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;line-height:1.5;font-family:var(--mono); font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:rgba(var(--paper-rgb),.86); transition:color .24s var(--e-ui)} .ft-nav a:hover{color:var(--cream)} .ft-legal a{color:rgba(var(--paper-rgb),.72)} .ft-soc{gap:0 18px} @media (min-width:760px){.ft-soc{flex-direction:column;gap:0}} .ft-b{margin-top:14px;padding-top:10px;border-top:1px solid rgba(var(--paper-rgb),.2);display:flex;flex-wrap:wrap; gap:10px 22px;justify-content:space-between;align-items:center} .ft-b p{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:rgba(var(--paper-rgb),.8);margin:0} .ft-line{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin-top:10px;font-family:var(--mono); font-size:.69rem;letter-spacing:.1em;color:rgba(var(--paper-rgb),.86)} .ft-line a{min-height:44px;display:inline-flex;align-items:center;text-decoration:none;color:inherit; transition:color .24s var(--e-ui)} .ft-line a:hover{color:var(--cream)} .credit{min-height:44px;display:inline-flex;align-items:center;font-size:12px;color:rgba(var(--paper-rgb),.78); letter-spacing:.04em;text-decoration:none;font-family:var(--sans)} .credit:hover{color:var(--cream)} /* ============ 11 · FLOATS ============ */ .wa{position:fixed;right:calc(12px + env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom)); z-index:880;display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 14px;background:var(--fill-dark); color:var(--light);border-radius:2px;text-decoration:none;font-family:var(--mono);font-size:.68rem; letter-spacing:.12em;text-transform:uppercase;box-shadow:0 8px 22px rgba(var(--shade-rgb),.24); opacity:0;pointer-events:none;transform:translateY(10px); transition:opacity .3s var(--e-ui),transform .3s var(--e-ui),background .26s var(--e-ui)} .wa.show{opacity:1;pointer-events:auto;transform:none} .wa.show:hover{transform:translateY(-2px);background:#1B4380} .wa.dim{opacity:0;pointer-events:none;transform:translateY(10px)} body.at-foot .wa,body.at-foot .top,body.at-form .wa,body.at-form .top{opacity:0;pointer-events:none;transform:translateY(10px)} .wa svg{width:18px;height:18px;fill:currentColor;flex:0 0 auto} /* On a phone the whole left side of a section is where the text CTAs live, so a bottom-left float scrolls straight over them. Both floats share one right-hand lane instead — back-to-top stacked above WhatsApp — and the reading column stays clear. Desktop keeps the left corner, where nothing competes. */ .top{position:fixed;right:calc(12px + env(safe-area-inset-right));bottom:calc(70px + env(safe-area-inset-bottom)); z-index:880;width:46px;height:46px;display:grid;place-items:center;background:var(--canvas); border:1px solid var(--line);border-radius:2px;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(10px); transition:opacity .3s var(--e-ui),transform .3s var(--e-ui),background .24s var(--e-ui)} .top.show{opacity:1;pointer-events:auto;transform:none} .top.dim{opacity:0;pointer-events:none;transform:translateY(10px)} .top:hover{background:var(--canvas-2)} .top svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:1.8} @media (min-width:900px){ .top{left:calc(12px + env(safe-area-inset-left));right:auto;bottom:calc(12px + env(safe-area-inset-bottom))} } @media (max-width:400px){.wa{font-size:.69rem;padding:0 10px;gap:6px;height:46px}} /* ============ 12 · THE ENGRAVED PLATE (security line print) ============ */ @keyframes engdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} .eng{display:block;width:100%;height:auto;overflow:visible;color:var(--brand)} .eng use{pointer-events:none} /* Οι τρεις στρώσεις είναι ΑΚΙΝΗΤΕΣ. Το translate3d(0,0,0) μένει επίτηδες: κρατά την καθεμιά σε δικό της layer, όπως και πριν — φεύγει η κίνηση, όχι η σύνθεση. */ .gl{position:absolute;inset:-8% -12%;pointer-events:none;overflow:hidden;z-index:0} .gl svg{position:absolute;inset:0;width:100%;height:100%;color:var(--brand);display:block} .gl-a{opacity:.11;transform:translate3d(0,0,0)} .gl-b{opacity:.075;transform:translate3d(0,0,0)} .gl-c{opacity:.05;transform:translate3d(0,0,0) rotate(-1.1deg)} .eng-hero{position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:0} .hero>.wrap{position:relative;z-index:1} .eng-wm{position:absolute;left:50%;bottom:-11%;width:158%;transform:translateX(-50%);opacity:.075} @media (min-width:900px){.eng-wm{left:-9%;bottom:-20%;width:min(1060px,82%);transform:none;opacity:.13}} .eng-draw{--eng-dur:1.35s} .eng-draw.drawn{--eng-anim:engdraw;--eng-tl:auto} @supports (animation-timeline:view()){ @media (prefers-reduced-motion:no-preference){.eng-draw{--eng-anim:engdraw;--eng-tl:view()}} } @media (prefers-reduced-motion:reduce){.eng-draw{--eng-anim:none!important}} /* on paper a scroll timeline never ticks — the plate must print as a finished engraving, never as a blank frame */ @media print{.eng-draw{--eng-anim:none!important}.grain,.wa,.top,.tray,.prog{display:none!important}} .plate{background:var(--paper);border-block:1px solid var(--line);position:relative;overflow:clip;padding-block:var(--sp2)} .plate::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--line);opacity:.55} .plate::after{content:"";position:absolute;left:0;right:0;bottom:5px;height:1px;background:var(--line);opacity:.55} .plate-grid{display:grid;gap:16px;position:relative;z-index:1} .plate-grid>*{min-width:0} @media (min-width:960px){.plate-grid{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(28px,4vw,74px);align-items:center}} .plate h2{font-size:clamp(1.42rem,3vw,2.3rem);max-width:18ch;margin-top:12px} .plate-fig{margin:0;position:relative} .plate-fig .gl{inset:-10% -6%;opacity:.9} .eng-plate{color:var(--ink);position:relative;z-index:1;--eng-accent:var(--signal)} .plate-cap{display:flex;flex-wrap:wrap;gap:2px 18px;justify-content:space-between;margin:8px 0 0; font-family:var(--stamp-font);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;color:var(--whisper-ink)} .plate-rose{position:absolute;right:-1%;top:-7%;width:clamp(78px,11vw,132px);color:var(--signal);opacity:.42;z-index:2;pointer-events:none} @media (max-width:699px){.plate-rose{width:66px;right:0;top:-4%}.plate h2{font-size:1.34rem}} /* the security print behind a section */ .visa-sec{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:2px} .visa-sec .eng{position:absolute;left:-14%;bottom:-24%;width:150%;opacity:.14} .bleed .visa-sec .eng{color:#F2EDE2;opacity:.16} .visa-sec .gl{inset:-4%} .bleed .visa-sec .gl svg{color:#F2EDE2} .sec-print{position:relative} .sec-print>.wrap{position:relative;z-index:1} /* ============ 13 · I1 · THE STAMP YOU PRESS YOURSELF ============ */ @keyframes knock{0%{transform:translateY(0)}42%{transform:translateY(2px)}100%{transform:translateY(0)}} .knock{animation:knock 110ms var(--e-press)} .stamp-press{opacity:1;--bleed:150%;color:var(--stamp-ink);cursor:pointer;touch-action:manipulation; transform:translate3d(var(--dx,0px),var(--dy,0px),0) scale(1.06) rotate(-11deg); transition:transform .34s var(--e-ui),color .34s var(--e-ui);-webkit-tap-highlight-color:transparent} .stamp-press:hover{color:#8E2916} .stamp-press:not(.set) svg>g{filter:url(#rough)} .stamp-press:focus-visible{outline:2px solid var(--signal);outline-offset:6px;border-radius:50%} .stamp-press.pressing{--bleed:0%;transition:none} .stamp-press.set{color:var(--stamp-ink);cursor:default; transform:translate3d(var(--dx,0px),var(--dy,0px),0) scale(1) rotate(var(--rot,-4deg)); transition:--bleed 400ms var(--e-ink),transform 360ms var(--e-press)} .stamp-press.set svg>g{filter:url(#inkbleed)} .press-hint{margin:9px 0 0;display:flex;align-items:center;gap:7px;font-family:var(--stamp-font);font-size:.68rem; letter-spacing:.14em;text-transform:uppercase;color:var(--whisper-ink);transition:opacity .3s var(--e-ui)} .press-hint::before{content:"";width:16px;height:1px;background:currentColor;flex:0 0 auto} .press-hint.done{color:var(--signal-ink)} .h-media .stamp-press{left:-20%;bottom:-3%} .h-media .press-hint{position:absolute;left:-20%;bottom:-30px;white-space:nowrap} /* ============ 14 · THE STAMP TRAY (passport spine) ============ */ .tray{position:fixed;right:calc(0px + env(safe-area-inset-right));top:50%;transform:translateY(-50%);z-index:870; transition:opacity .3s var(--e-ui)} .tray[hidden]{display:none} .tray.dim,body.at-foot .tray,body.at-form .tray{opacity:0;pointer-events:none} .tray-tab{display:flex;flex-direction:column;align-items:center;gap:8px;width:44px;min-width:44px;min-height:112px;padding:12px 0 10px; background:var(--fill-dark);color:#F2EDE2;border:0;border-radius:3px 0 0 3px;cursor:pointer; box-shadow:-4px 0 18px rgba(var(--shade-rgb),.24);transition:background .26s var(--e-ui),transform .3s var(--e-press)} .tray-tab:hover{background:#1B4380;transform:translateX(-2px)} .tray-tab:focus-visible{outline:2px solid var(--signal);outline-offset:2px} .tray-n{font-family:var(--stamp-font);font-size:.72rem;font-weight:500;letter-spacing:.06em} .tray-n b{font-weight:500;font-size:.92rem} .tray-lbl{writing-mode:vertical-rl;font-family:var(--stamp-font);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;opacity:.88} .tray-panel{position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%) translateX(8px); width:min(292px,74vw);background:var(--paper);border:1px solid var(--line);border-radius:2px; box-shadow:0 16px 44px rgba(var(--shade-rgb),.26);padding:13px 15px 11px;opacity:0;pointer-events:none; transition:opacity .26s var(--e-ui),transform .3s var(--e-page)} .tray.open .tray-panel{opacity:1;pointer-events:auto;transform:translateY(-50%)} .tray-hd{display:flex;align-items:center;justify-content:space-between;gap:8px} .tray-x{width:44px;height:44px;margin:-10px -12px -10px 0;display:grid;place-items:center;background:transparent;border:0;cursor:pointer} .tray-x svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:1.9} .tray-list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:0} .tray-list li{display:flex;align-items:flex-start;gap:10px;border-top:1px solid var(--line);padding:7px 0} .tray-list .dot{flex:0 0 auto;width:15px;height:15px;margin-top:3px;border-radius:50%;border:1.4px dashed var(--whisper); transition:transform .3s var(--e-press),border-color .3s var(--e-ui),background .3s var(--e-ink)} .tray-list li.got .dot{border:1.4px solid var(--signal);background:rgba(var(--signal-rgb),.9);transform:rotate(-12deg) scale(1.05)} .tray-list b{display:block;font-family:var(--stamp-font);font-size:.7rem;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--whisper-ink)} .tray-list li.got b{color:var(--ink)} .tray-list i{display:block;font-style:normal;font-size:.82rem;line-height:1.4;color:rgba(var(--ink-rgb),.74)} .tray-cap{margin-top:10px;text-transform:none;letter-spacing:.04em;line-height:1.6} .tray-hide{margin-top:9px;background:transparent;border:0;padding:0;min-height:44px;cursor:pointer; font-family:var(--stamp-font);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase; color:var(--whisper-ink);border-bottom:1px solid var(--line)} .tray-hide:hover{color:var(--signal-ink)} /* a phone has no free edge: the tray joins the bottom-left stack, above back-to-top */ @media (max-width:899px){ .tray{top:auto;bottom:calc(68px + env(safe-area-inset-bottom));left:calc(12px + env(safe-area-inset-left));right:auto;transform:none} .tray-tab{flex-direction:row;align-items:center;justify-content:center;width:46px;min-width:46px;height:46px; min-height:46px;padding:0;gap:0;border-radius:2px;box-shadow:0 8px 22px rgba(var(--shade-rgb),.24)} .tray-tab:hover{transform:none} .tray-lbl{display:none} .tray-n{font-size:.68rem}.tray-n b{font-size:.86rem} .tray-panel{right:auto;left:0;top:auto;bottom:calc(100% + 8px);width:min(300px,84vw);transform:translateY(8px)} .tray.open .tray-panel{transform:none} } @media (max-width:400px){.tray-panel{width:min(300px,88vw)}} /* ============ 15 · LIGHTBOX ============ */ .lb{border:0;padding:0;background:transparent;width:min(1080px,94vw);max-width:94vw;max-height:96svh;overflow:visible;color:var(--ink)} .lb::backdrop{background:rgba(var(--shade-rgb),.88)} .lb-fig{margin:0;background:var(--frame);padding:10px 10px 8px;box-shadow:0 24px 70px rgba(0,0,0,.45);border-radius:1px} .lb-fig img{width:100%;height:auto;max-height:74svh;object-fit:contain;background:var(--canvas-2)} .lb-cap{display:flex;flex-wrap:wrap;gap:2px 16px;justify-content:space-between;margin:8px 2px 0; font-family:var(--stamp-font);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--whisper-ink)} .lb-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px} .lb-btn{width:46px;height:46px;display:grid;place-items:center;background:var(--canvas);border:1px solid var(--line); border-radius:2px;cursor:pointer;transition:background .24s var(--e-ui)} .lb-btn:hover{background:var(--canvas-2)} .lb-btn svg{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:1.9} .lb-nav{display:flex;gap:8px} @media (prefers-reduced-motion:no-preference){ .lb[open]{animation:lbin .26s var(--e-ui)} @keyframes lbin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} } /* ═══════════════════════════════════════════════════════════════════════════ 24 · THE CONTRACT — erasmuslife-ext ships semantic HTML with zero styling. Everything below is where the plugin becomes the passport. ═══════════════════════════════════════════════════════════════════════════ */ /* ── shared notes, sample marks, empty states ── */ .ela-note{font-family:var(--mono);font-size:.72rem;line-height:1.6;letter-spacing:.08em;text-transform:uppercase; color:var(--whisper-ink);margin:0 0 14px;max-width:52ch} .ela-note[role="alert"]{color:var(--signal-ink);border-left:3px solid var(--signal);padding-left:10px} .bleed .ela-note{color:rgba(var(--paper-rgb),.82)} .ela-sample{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.7rem;font-weight:500; letter-spacing:.13em;text-transform:uppercase;color:var(--ink);border-left:3px solid var(--signal); padding:3px 0 3px 9px;margin:6px 0} .bleed .ela-sample{color:rgba(var(--paper-rgb),.94)} .ela-empty{grid-column:1/-1;margin:0;position:relative;border:1px dashed var(--whisper);padding:30px 22px 30px 26px; font-family:var(--mono);font-size:.8rem;line-height:1.7;letter-spacing:.06em;color:var(--whisper-ink); background:repeating-linear-gradient(-45deg,rgba(var(--whisper-rgb),.09) 0 1px,transparent 1px 9px); max-width:none} .ela-empty::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--signal);opacity:.75} .bleed .ela-empty{border-color:rgba(var(--paper-rgb),.42);color:rgba(var(--paper-rgb),.9); background:repeating-linear-gradient(-45deg,rgba(var(--paper-rgb),.08) 0 1px,transparent 1px 9px)} /* the honest line under every empty board — set from the page, never invented here */ .board-note{font-family:var(--mono);font-size:.7rem;line-height:1.7;letter-spacing:.12em;text-transform:uppercase; color:var(--whisper-ink);margin-top:12px;max-width:58ch} /* an inline link in prose still has to be a 44px target — the padding grows the hit box, not the line */ .board-note a{color:var(--signal-ink);text-decoration:underline;text-underline-offset:3px; padding-block:16px;margin-block:-16px} .board-note a:hover{color:var(--ink)} .bleed .board-note{color:rgba(var(--paper-rgb),.78)} /* ── 24.1 · OFFICE SLOTS — the reservation form as a stamped document ── The widget is an official form, not a web form: a navy masthead that says what it is and how far you are, a perforated tear line, then the questions themselves numbered down a left rail so the eye always knows where it is. */ .ela-book{background:var(--paper);border:1px solid var(--line);border-radius:2px; box-shadow:6px 6px 0 rgba(var(--shade-rgb),.09);position:relative;overflow:hidden; transition:opacity .2s var(--e-ui)} .ela-book.is-working{opacity:.55;pointer-events:none} /* ── the masthead ── */ .ela-book__head{position:relative;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap; padding:11px clamp(14px,2.4vw,28px);background:var(--fill-dark);color:var(--light); font-family:var(--mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase} .ela-book__kind{font-weight:500} .ela-book__count{margin-left:auto;color:rgba(var(--paper-rgb),.72);white-space:nowrap; font-variant-numeric:tabular-nums} .ela-book__track{display:inline-flex;align-items:center;gap:6px} .ela-book__mark{width:9px;height:9px;border-radius:50%;background:rgba(var(--paper-rgb),.28)} .ela-book__mark.is-done{background:var(--light)} .ela-book__mark.is-now{background:var(--signal);box-shadow:0 0 0 3px rgba(var(--signal-rgb),.28)} .ela-book__mark.is-more{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(var(--paper-rgb),.42)} /* the tear line under the masthead — the form is detachable from its header */ .ela-book__head::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:6px; background:radial-gradient(circle at 3px 3px,var(--paper) 2.4px,transparent 2.7px) 0 0/11px 6px repeat-x; pointer-events:none} /* ── the standing notice, in the margin of the form ── */ .ela-book>.ela-note{padding:13px clamp(14px,2.4vw,28px) 13px calc(clamp(14px,2.4vw,28px) + 11px); margin:0;border-bottom:1px dashed var(--whisper);position:relative;max-width:none;font-size:.68rem; letter-spacing:.1em;line-height:1.7} .ela-book>.ela-note::before{content:"";position:absolute;left:clamp(14px,2.4vw,28px);top:15px;bottom:15px; width:2px;background:var(--whisper);opacity:.55} .ela-book>.ela-note[role="alert"]{color:var(--signal-ink);background:rgba(var(--signal-rgb),.05);border-left:0; padding-left:calc(clamp(14px,2.4vw,28px) + 11px)} .ela-book>.ela-note[role="alert"]::before{background:var(--signal);opacity:1;width:3px} .ela-book>*:last-child{border-bottom:0} /* ── one step = one question, numbered down the rail ── */ .ela-book__step,.ela-book__fields{padding:clamp(15px,2.3vw,22px) clamp(14px,2.4vw,28px) clamp(17px,2.5vw,24px) calc(clamp(14px,2.4vw,28px) + 40px); border-bottom:1px dashed var(--whisper);display:flex;flex-wrap:wrap;gap:8px;margin:0;position:relative} /* the rule that threads every step marker together */ .ela-book__step::before,.ela-book__fields::before{content:"";position:absolute; left:calc(clamp(14px,2.4vw,28px) + 13px);top:0;bottom:0;width:1px; background:repeating-linear-gradient(var(--line) 0 3px,transparent 3px 7px)} .ela-book__step:first-of-type::before{top:22px} .ela-book>*:last-child::before{bottom:auto;height:24px} .ela-book__fields{display:grid;grid-template-columns:minmax(0,1fr);gap:11px;border-bottom:0; background:var(--canvas)} @media (min-width:680px){.ela-book__fields{grid-template-columns:1fr 1fr}} .ela-book__legend{flex:0 0 100%;grid-column:1/-1;margin:0 0 6px;display:flex;align-items:center;gap:10px; font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)} /* the step number, stamped in the margin */ .ela-book__num{position:absolute;left:clamp(14px,2.4vw,28px);width:27px;height:27px;border-radius:50%; display:inline-flex;align-items:center;justify-content:center;background:var(--paper); border:1.5px solid var(--line);color:var(--whisper-ink);font-size:.7rem;letter-spacing:0;top:clamp(13px,2.1vw,19px); font-variant-numeric:tabular-nums;transition:background .3s var(--e-ink),border-color .3s var(--e-ui),color .3s var(--e-ui)} /* a step that has been answered wears its number in ink */ .ela-book__step:has(.is-on) .ela-book__num,.ela-book__fields .ela-book__num{ background:var(--signal);border-color:var(--signal);color:var(--cream)} .ela-book__ttl{min-width:0} /* the slot you actually hold, restated above the fields */ .ela-book__chosen{flex:0 0 100%;grid-column:1/-1;margin:-2px 0 8px;font-family:var(--mono);font-size:.86rem; letter-spacing:.06em;color:var(--signal-ink);font-weight:500} .ela-book__fields .ela-form__row{grid-column:1/-1} @media (min-width:680px){.ela-book__fields .ela-form__row:nth-of-type(1), .ela-book__fields .ela-form__row:nth-of-type(2){grid-column:auto}} .ela-book__step .ela-empty{flex:1 1 100%;margin-top:2px;padding:22px 20px 22px 24px} /* Οι ημέρες και οι ώρες σε λωρίδα. Μέχρι τέσσερις τυλίγουν κανονικά· από την πέμπτη και πάνω η λωρίδα κυλάει οριζόντια, ώστε ένα γραφείο με δώδεκα ώρες να μη σπρώχνει τα υπόλοιπα βήματα δύο οθόνες πιο κάτω. Το ξεθώριασμα στο δεξί άκρο είναι το μόνο που λέει «υπάρχουν κι άλλες» — δεν χρειάζεται βελάκι. */ .ela-book__rail{flex:1 1 100%;min-width:0;display:flex;flex-wrap:wrap;gap:8px} .ela-book__rail:has(> :nth-child(5)){ flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x proximity;scrollbar-width:thin; padding-bottom:8px;margin-bottom:-4px; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)} .ela-book__rail:has(> :nth-child(5)) > *{flex:0 0 auto;scroll-snap-align:start} /* όταν κυλάει, η επιλεγμένη πρέπει να είναι ορατή χωρίς ψάξιμο */ .ela-book__rail > .is-on{scroll-snap-align:center} .ela-book__rail::-webkit-scrollbar{height:6px} .ela-book__rail::-webkit-scrollbar-thumb{background:var(--whisper);border-radius:3px} .ela-book__rail::-webkit-scrollbar-track{background:transparent} /* ── the option chips — a pad of rubber keys ── */ .ela-opt,.ela-day,.ela-slot,button.ela-filter{ display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:46px;min-width:48px; padding:7px 15px;border:1.5px solid var(--line);border-radius:2px;background:var(--paper);color:var(--ink); font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;line-height:1.28;cursor:pointer; position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent; box-shadow:2px 2px 0 rgba(var(--shade-rgb),.05); transition:transform .18s var(--e-press),border-color .24s var(--e-ui),color .24s var(--e-ui), background .24s var(--e-ui),box-shadow .24s var(--e-press)} .ela-opt::before,.ela-day::before,.ela-slot::before,button.ela-filter::before{ content:"";position:absolute;inset:0;background:var(--signal);opacity:0;transition:opacity .3s var(--e-ink)} .ela-opt:hover,.ela-day:hover:not([disabled]),.ela-slot:hover:not([disabled]),button.ela-filter:hover{ border-color:var(--ink);box-shadow:3px 3px 0 rgba(var(--shade-rgb),.1)} .ela-opt:active,.ela-day:active:not([disabled]),.ela-slot:active:not([disabled]),button.ela-filter:active{ transform:translate(2px,2px);box-shadow:0 0 0 rgba(var(--shade-rgb),.1)} .ela-opt:active::before,.ela-day:active::before,.ela-slot:active::before,button.ela-filter:active::before{opacity:.3;transition:none} /* chosen is not a tint — it is ink on the page, and it reads from across a room */ .ela-opt.is-on,.ela-day.is-on,.ela-slot.is-on{background:var(--signal);border-color:var(--signal); color:var(--cream);box-shadow:2px 2px 0 rgba(var(--signal-rgb),.26)} .ela-opt.is-on::before,.ela-day.is-on::before,.ela-slot.is-on::before{opacity:0} .ela-opt.is-on:hover,.ela-day.is-on:hover,.ela-slot.is-on:hover{border-color:var(--signal-ink); background:var(--signal-ink)} .ela-opt[disabled],.ela-day[disabled],.ela-slot[disabled]{color:var(--whisper-ink);cursor:not-allowed; border-style:dashed;box-shadow:none;text-decoration:line-through;text-decoration-color:rgba(var(--whisper-rgb),.6); background:repeating-linear-gradient(-45deg,rgba(var(--whisper-rgb),.1) 0 1px,transparent 1px 9px)} .ela-day,.ela-slot{min-width:104px;font-variant-numeric:tabular-nums} /* "Reserve online" vs "Pass by the office" is a fork in the road, so the two options are wide, equal and unmistakable — never two small chips in a row. */ .ela-opt--mode{flex:1 1 220px;min-height:58px;padding:10px 18px;font-size:.79rem;letter-spacing:.1em; text-transform:uppercase;border-width:2px} .ela-slot{min-width:88px;letter-spacing:.08em} .ela-opt:focus-visible,.ela-day:focus-visible,.ela-slot:focus-visible,button.ela-filter:focus-visible{ outline:2px solid var(--signal);outline-offset:2px} .ela-book__submit{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px; border:0;border-radius:2px;background:var(--signal);color:var(--cream);font-family:var(--mono);font-size:.78rem; font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;grid-column:1/-1;justify-self:start; margin-top:4px;box-shadow:4px 4px 0 rgba(var(--signal-rgb),.24); transition:transform .26s var(--e-press),box-shadow .26s var(--e-press)} .ela-book__submit:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(var(--signal-rgb),.3)} .ela-book__submit:active{transform:translate(4px,4px);box-shadow:0 0 0 rgba(var(--signal-rgb),.3)} /* On a phone the masthead breaks into two honest rows — what the form is and how far you are on the first, the track underneath — and the chips stretch to fill their line instead of leaving ragged gaps. */ @media (max-width:519px){ .ela-book__submit{width:100%;justify-self:stretch} .ela-book__head{gap:9px 12px} .ela-book__kind{flex:1 1 auto} .ela-book__count{margin-left:0;order:2} .ela-book__track{order:3;flex:1 1 100%} .ela-book__step .ela-opt,.ela-book__step .ela-day{flex:1 1 auto} .ela-book__step .ela-slot{min-width:76px;flex:1 1 76px} .ela-book__rail:has(> :nth-child(5)) .ela-day, .ela-book__rail:has(> :nth-child(5)) .ela-slot{flex:0 0 auto} } .ela-book__fields .ela-note{grid-column:1/-1;margin:0} /* the receipt — the moment the form becomes a stamped document */ .ela-receipt{padding:clamp(20px,3vw,34px) clamp(16px,2.6vw,30px);text-align:center;position:relative} .ela-receipt::before{content:"";position:absolute;left:0;right:0;top:0;height:6px; background:radial-gradient(circle at 3px 3px,var(--canvas-2) 2.2px,transparent 2.6px) 0 0/11px 6px repeat-x} .ela-receipt .ela-book__legend{display:block;font-family:var(--disp);font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:600; letter-spacing:-.02em;text-transform:none;color:var(--ink);margin-bottom:16px;line-height:1.2} .ela-receipt .stamp{margin:0 auto 14px;--sz:clamp(168px,24vw,220px);--rot:-4.5deg} .ela-receipt__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;text-align:left; border-top:1px solid var(--line);padding:7px 0;max-width:460px;margin-inline:auto} .ela-receipt__row span{font-family:var(--mono);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:var(--whisper-ink)} .ela-receipt__row strong{font-family:var(--mono);font-size:.84rem;font-weight:500;text-align:right} .ela-receipt .ela-note{margin:16px auto 0;text-align:left;max-width:460px} .bk-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:22px} .bk-grid>*{min-width:0} @media (min-width:1000px){.bk-grid{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:clamp(26px,3.5vw,52px); align-items:start} .bk-aside{position:sticky;top:calc(var(--hdr) + 34px)}} .bk-aside{border:1px solid var(--line);border-radius:2px;background:var(--canvas);padding:16px 18px 18px} .alt .bk-aside{background:var(--paper)} .bk-aside .proc{margin-top:12px} .bk-aside .proc li{font-size:.94rem;padding-block:10px} .bk-aside .actions{margin-top:14px} /* ── 24.2 · EVENTS — ticket stubs with a torn left edge ── */ .ela-events{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start} @media (min-width:640px){.ela-events{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1100px){.ela-events{grid-template-columns:repeat(3,minmax(0,1fr))}} .ela-ev{background:var(--paper);border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow); display:grid;grid-template-columns:56px minmax(0,1fr);grid-auto-rows:min-content;align-content:space-between;min-height:172px;position:relative;overflow:hidden; opacity:0;transform:translateY(14px); transition:opacity .38s var(--e-ui),transform .44s var(--e-page),box-shadow .3s var(--e-ui)} .ela-ev.in{opacity:1;transform:none} .ela-ev:hover{box-shadow:6px 6px 0 rgba(var(--shade-rgb),.1)} .ela-ev>*{grid-column:2;margin:0 16px 6px 15px} .ela-ev>*:first-of-type{margin-top:0} .ela-ev__date{grid-column:1;grid-row:1/span 20;margin:0;writing-mode:vertical-rl;transform:rotate(180deg); display:flex;align-items:center;justify-content:center;background:var(--canvas-2); border-right:1px dashed var(--whisper);font-family:var(--mono);font-size:.74rem;font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--ink);text-align:center} /* the photo opens the stub — a print in a paper frame, not a bleeding banner. aspect-ratio holds the box before the file lands, so nothing jumps. */ .ela-ev__pic{margin:14px 16px 10px 15px;background:var(--canvas);padding:7px;border-radius:1px; box-shadow:inset 0 0 0 1px rgba(var(--shade-rgb),.07);line-height:0} .ela-ev__pic picture,.ela-ev__pic img{display:block;width:100%;height:auto;aspect-ratio:16/10; object-fit:cover;border-radius:0;background:var(--canvas-2)} .ela-ev__pic+.ela-ev__title{margin-top:0} .bleed .ela-ev__pic{background:rgba(var(--paper-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--paper-rgb),.28)} .ela-ev__title{margin-top:14px;font-size:1.12rem} .ela-ev__meta{font-family:var(--mono);font-size:.7rem;line-height:1.5;letter-spacing:.07em; color:var(--whisper-ink);text-transform:uppercase} .ela-ev__cta{margin-top:0;margin-bottom:12px;align-self:start;font-family:var(--mono);font-size:.71rem; letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--signal-ink); display:inline-flex;align-items:center;gap:7px;min-height:44px} .ela-ev__cta::after{content:"→";transition:transform .26s var(--e-ui)} .ela-ev__cta:hover::after{transform:translateX(4px)} .ela-ev .ela-sample{margin-inline:15px} /* ── 24.3 · TRIPS — visa pages, typographic, no photography ── */ .ela-trips{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:stretch} @media (min-width:700px){.ela-trips{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1150px){.ela-trips{grid-template-columns:repeat(4,minmax(0,1fr))}} .ela-trip{position:relative;display:flex;flex-direction:column;gap:6px;border-radius:2px; padding:15px 16px 14px 24px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow); clip-path:inset(0 100% 0 0);transition:clip-path .5s var(--e-page),background .3s var(--e-ui),transform .3s var(--e-ui)} .ela-trip.in{clip-path:inset(0 0 0 0)} .ela-trip:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(var(--shade-rgb),.1)} .ela-trip::before{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px; background:radial-gradient(circle at 1px 2px,var(--whisper) 1.4px,transparent 1.7px) 0 0/2px 11px repeat-y} /* The rail is four cards abreast, so the photos have to agree on a shape or the row reads as four accidents. Same paper frame as an event stub, and the aspect-ratio holds the box before the file lands so nothing jumps. */ .ela-trip__pic{margin:-3px 0 8px;background:var(--canvas);padding:6px;border-radius:1px; box-shadow:inset 0 0 0 1px rgba(var(--shade-rgb),.07);line-height:0} .ela-trip__pic picture,.ela-trip__pic img{display:block;width:100%;height:auto;aspect-ratio:4/3; object-fit:cover;border-radius:0;margin:0;background:var(--canvas-2)} .bleed .ela-trip__pic{background:rgba(var(--paper-rgb),.1);box-shadow:inset 0 0 0 1px rgba(var(--paper-rgb),.28)} .ela-trip__pic+.ela-trip__title{margin-top:0} .ela-trip img{border-radius:1px;margin-bottom:6px} .ela-trip__title{font-family:var(--disp);font-size:clamp(1.55rem,4.4vw,2.05rem);font-weight:600;letter-spacing:-.028em; color:var(--ink);margin:2px 0 0} .ela-trip__meta{margin:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--mono);font-size:.7rem; line-height:1.55;letter-spacing:.11em;text-transform:uppercase;color:var(--whisper-ink)} .ela-trip__seats{margin:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase; color:var(--whisper-ink)} .ela-trip__cta{margin-top:auto;padding-top:8px;border-top:1px dashed var(--whisper); font-family:var(--mono);font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none; color:var(--signal-ink);display:inline-flex;align-items:center;gap:7px;min-height:44px} .ela-trip__cta::after{content:"→";transition:transform .26s var(--e-ui)} .ela-trip__cta:hover::after{transform:translateX(4px)} .ela-trip__cta::before{content:"";position:absolute;inset:0;z-index:1} /* the SOLD OUT stamp — a device that fell on the page, not a pill */ .ela-badge{align-self:flex-start;display:inline-flex;align-items:center;justify-content:center; font-family:var(--stamp-font);font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase; padding:6px 11px;border:2px solid var(--stamp-ink);color:var(--stamp-ink);border-radius:2px; box-shadow:0 0 0 1.5px rgba(var(--stamp-rgb),.5) inset;transform:rotate(-7deg);background:rgba(var(--stamp-rgb),.06); margin:6px 0 4px 4px} .ela-badge.is-waitlist{border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 1.5px rgba(var(--brand-rgb),.35) inset; transform:rotate(2.5deg);background:transparent;margin:2px 0 6px 2px} .bleed .ela-badge.is-waitlist{border-color:rgba(var(--paper-rgb),.7);color:#F2EDE2;box-shadow:0 0 0 1.5px rgba(var(--paper-rgb),.4) inset} .bleed .ela-badge{color:#F0A192;border-color:#F0A192;box-shadow:0 0 0 1.5px rgba(240,161,146,.4) inset;background:rgba(240,161,146,.07)} .ela-trip .ela-form{margin-top:8px} /* inside a stamped zone the ticket becomes a visa page cut out of the navy */ .bleed .ela-trip{background:rgba(var(--paper-rgb),.055);border-color:rgba(var(--paper-rgb),.34);box-shadow:none} .bleed .ela-trip:hover{background:rgba(var(--paper-rgb),.1);box-shadow:none} .bleed .ela-trip::before{background:radial-gradient(circle at 1px 2px,rgba(var(--paper-rgb),.55) 1.4px,transparent 1.7px) 0 0/2px 11px repeat-y} .bleed .ela-trip__title{color:var(--cream)} .bleed .ela-trip__meta,.bleed .ela-trip__seats{color:rgba(var(--paper-rgb),.86)} .bleed .ela-trip__cta{color:var(--cream);border-top-color:rgba(var(--paper-rgb),.36)} /* the waiting-list form lives inside a narrow ticket — never two columns there */ .ela-trip form.ela-form,.bleed .ela-trip form.ela-form{grid-template-columns:minmax(0,1fr);background:transparent; border:0;box-shadow:none;padding:10px 0 0;gap:10px} .ela-trip form.ela-form::before{content:none} .ela-trip .ela-form__submit{width:100%;justify-self:stretch;padding:0 14px;font-size:.72rem;letter-spacing:.1em; box-shadow:3px 3px 0 rgba(var(--signal-rgb),.24)} .ela-trip .ela-form__gdpr label{font-size:.82rem;line-height:1.45} .ela-trip .ela-form__row input,.ela-trip .ela-form__row textarea{font-size:16px} /* ── 24.3b · TRIP SHEET — μία εκδρομή, ολόκληρη ── Ίδια γλώσσα με το φύλλο του ακινήτου: φωτογραφία σε χαρτί, στοιχεία σε ζυγαριά, και οι τρόποι επικοινωνίας μαζεμένοι στο τέλος — γιατί εκεί καταλήγει κανείς αφού διαβάσει, όχι πριν. */ .ela-td{display:grid;gap:clamp(16px,2.6vw,26px)} @media (min-width:900px){.ela-td{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(22px,3.2vw,40px);align-items:start}} .ela-td__pic{background:var(--paper);padding:8px;border-radius:1px;line-height:0; box-shadow:6px 6px 0 rgba(var(--shade-rgb),.09);transform:rotate(-1deg)} .ela-td__pic picture,.ela-td__pic img{display:block;width:100%;height:auto;aspect-ratio:4/3; object-fit:cover;background:var(--canvas-2)} .ela-td__body{min-width:0;display:grid;gap:14px;align-content:start} .ela-td__facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0;border-top:1px solid var(--line)} .ela-td__facts dt,.ela-td__facts dd{margin:0;padding:8px 0;border-bottom:1px solid var(--line); font-family:var(--mono);font-size:.74rem;line-height:1.5} .ela-td__facts dt{letter-spacing:.13em;text-transform:uppercase;color:var(--whisper-ink);padding-right:18px} .ela-td__facts dd{text-align:right;font-weight:500;color:var(--ink)} .ela-td__copy{display:grid;gap:10px} .ela-td__copy p{margin:0;line-height:1.62;color:var(--ink)} .ela-td__act{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:2px} .ela-td__cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px; border-radius:2px;background:var(--signal);color:var(--cream);font-family:var(--mono);font-size:.78rem; font-weight:500;letter-spacing:.14em;text-transform:uppercase;text-decoration:none; box-shadow:4px 4px 0 rgba(var(--signal-rgb),.24); transition:transform .26s var(--e-press),box-shadow .26s var(--e-press)} .ela-td__cta:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(var(--signal-rgb),.3)} .ela-td__link,.ela-td__back{display:inline-flex;align-items:center;gap:8px;min-height:44px; font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; color:var(--signal-ink);text-decoration:none;border-bottom:1px solid transparent; transition:border-color .26s var(--e-ui),color .26s var(--e-ui)} .ela-td__link:hover,.ela-td__back:hover{border-bottom-color:currentColor} .ela-td__back{color:var(--whisper-ink)} .ela-td__back::before{content:"←"} .ela-td .ela-note{margin:0;grid-column:1/-1} /* ── 24.4 · ERASMUS CARD ── */ .ela-card{background:var(--paper);border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow); padding:clamp(18px,3vw,32px);display:grid;gap:14px} .ela-card__body{display:grid;gap:6px;align-content:start;min-width:0} .ela-card__body h2{font-size:clamp(1.6rem,3.4vw,2.4rem);max-width:18ch} .ela-card__body p{margin:10px 0 0;font-size:1.02rem;color:rgba(var(--ink-rgb),.86);max-width:52ch} .ela-card__perks{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line);counter-reset:pk} .ela-card__perks li{counter-increment:pk;border-bottom:1px solid var(--line);padding:10px 0 10px 40px;position:relative; font-size:1rem;line-height:1.5} .ela-card__perks li::before{content:"0" counter(pk);position:absolute;left:0;top:13px;font-family:var(--mono); font-size:.7rem;letter-spacing:.12em;color:var(--signal-ink)} .ela-card__cta{justify-self:start;display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px; border-radius:2px;background:var(--signal);color:var(--cream);font-family:var(--mono);font-size:.78rem;font-weight:500; letter-spacing:.14em;text-transform:uppercase;text-decoration:none;box-shadow:4px 4px 0 rgba(var(--signal-rgb),.24); transition:transform .26s var(--e-press),box-shadow .26s var(--e-press)} .ela-card__cta:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(var(--signal-rgb),.3)} .ela-card .ela-note{margin:0} /* the physical card object beside the panel */ .ecard-wrap{perspective:1000px;perspective-origin:50% 40%;position:relative;max-width:308px; padding:0 0 clamp(30px,4.4vw,58px)} /* A print of the crew, taped to the page, with the card lying on top of it — the card is issued face to face, so the people belong in the frame. */ .ecard-photo{position:relative;width:min(100%,420px);margin:0 0 clamp(-96px,-13vw,-70px) 0; padding:8px 8px 26px;background:var(--paper);border:1px solid rgba(var(--whisper-rgb),.28); box-shadow:0 12px 26px rgba(var(--shade-rgb),.16);transform:rotate(-3.2deg);z-index:0;pointer-events:none} .ecard-photo img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover; object-position:50% 64%;filter:saturate(.94) contrast(1.03)} .ecard-photo .fno{position:absolute;left:8px;bottom:6px;margin:0; font-family:var(--stamp-font);font-size:10px;letter-spacing:.12em;color:var(--whisper-ink)} .ecard-photo .tape{position:absolute;top:-10px;left:-14px;width:clamp(52px,6vw,86px);height:20px; background:rgba(var(--whisper-rgb),.24);transform:rotate(-28deg)} @media (prefers-reduced-motion:reduce){.ecard-photo{transform:rotate(-3.4deg)}} @media (min-width:900px){.ecard-wrap{max-width:none}} .ecard{position:relative;z-index:1;margin-left:clamp(26px,7vw,76px);aspect-ratio:1.586/1;background-color:#17376E; background-image:linear-gradient(152deg,#1B3E7C 0%,#17376E 46%,#0F2951 100%);border-radius:3px; box-shadow:0 18px 40px rgba(var(--shade-rgb),.3);color:var(--light);padding:clamp(16px,2.6vw,26px); display:flex;flex-direction:column;transform-style:preserve-3d;transition:transform .34s var(--e-ui);will-change:transform} .ecard::after{content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none; background:radial-gradient(120% 90% at var(--mx,30%) var(--my,20%),rgba(255,255,255,.16),transparent 58%)} .ecard .lg{width:clamp(58px,7vw,84px);opacity:.95;transform:translateZ(28px)} .ecard .no{margin-top:auto;font-family:var(--mono);font-size:clamp(.78rem,1.7vw,1.05rem);letter-spacing:.2em;transform:translateZ(20px)} .ecard .nm{font-family:var(--mono);font-size:.7rem;line-height:1.5;letter-spacing:.15em;text-transform:uppercase; color:rgba(var(--paper-rgb),.86);margin-top:8px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px; padding-right:clamp(56px,16vw,88px);transform:translateZ(14px)} /* the stamp falls on the corner of the card — never across its type */ .ecard-badge{position:absolute;right:-26px;bottom:-30px;--sz:clamp(84px,12vw,132px);--rot:7deg;z-index:3} /* the seal is pressed over the CORNER of the card, not into the middle of it — ink that can be read on paper cannot also be read on navy, so it sits on paper */ @media (min-width:900px){.ecard-badge{right:-52px;bottom:-52px}} /* home § 04 — no card object here, just the print of the crew, taped up big */ .ecard-wrap.photo-only{max-width:none;padding-bottom:clamp(26px,3.4vw,46px)} .ecard-wrap.photo-only .ecard-photo{width:min(100%,640px);margin:0; padding:10px 10px 32px;box-shadow:0 18px 38px rgba(var(--shade-rgb),.18)} .ecard-wrap.photo-only .ecard-photo .fno{left:10px;bottom:8px;font-size:11px} .ecard-wrap.photo-only .ecard-badge{right:0;bottom:-16px} @media (min-width:900px){.ecard-wrap.photo-only .ecard-badge{right:-38px;bottom:-26px}} /* ── 24.5 · HOUSING — the register: filters are stamps, homes are visa pages ── */ .ela-housing{display:grid;gap:0;grid-template-columns:minmax(0,1fr);container-type:inline-size} .ela-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px;border-block:1px solid var(--line); padding-block:14px;margin-bottom:22px} .ela-filters .ela-filter{display:flex;flex-direction:column;gap:4px;flex:1 1 150px;min-width:0} .ela-filters label.ela-filter>span{font-family:var(--mono);font-size:.69rem;letter-spacing:.14em; text-transform:uppercase;color:var(--whisper-ink)} .ela-filters select,.ela-filters input[type=number]{width:100%;min-height:48px;background:transparent; border:0;border-bottom:1.5px solid var(--line);border-radius:0;padding:8px 0 6px;font-family:var(--mono); font-size:16px;letter-spacing:.04em;color:var(--ink);transition:border-color .26s var(--e-ui)} .ela-filters select:focus,.ela-filters input[type=number]:focus{outline:none;border-bottom-color:var(--signal)} button.ela-filter{flex:0 0 auto;align-self:flex-end;font-weight:500;letter-spacing:.14em;text-transform:uppercase; padding:0 22px;border-color:var(--stamp-ink);color:var(--stamp-ink); box-shadow:3px 3px 0 rgba(var(--stamp-rgb),.16),0 0 0 1.5px rgba(var(--stamp-rgb),.3) inset} button.ela-filter:hover{border-color:var(--stamp-ink);background:rgba(var(--stamp-rgb),.05)} button.ela-filter:active{box-shadow:0 0 0 rgba(var(--stamp-rgb),.16),0 0 0 1.5px rgba(var(--stamp-rgb),.3) inset} .ela-homes{display:grid;gap:12px;grid-template-columns:minmax(0,1fr);align-items:start} @media (min-width:700px){.ela-homes{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1080px){.ela-homes{grid-template-columns:repeat(3,minmax(0,1fr))}} .ela-home{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:2px; box-shadow:var(--shadow);padding:13px 15px 10px;display:flex;flex-direction:column;gap:5px;overflow:hidden; opacity:0;transform:translateY(14px); transition:opacity .38s var(--e-ui),transform .3s var(--e-ui),box-shadow .28s var(--e-ui)} .ela-home.in{opacity:1;transform:none} .ela-home::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background:repeating-linear-gradient(90deg,rgba(var(--brand-rgb),.055) 0 1px,transparent 1px 14px), repeating-linear-gradient(0deg,rgba(var(--brand-rgb),.055) 0 1px,transparent 1px 14px)} .ela-home>*{position:relative;z-index:1} .ela-home:hover,.ela-home:focus-within{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(var(--shade-rgb),.1)} .ela-home__code{font-family:var(--disp);font-size:clamp(1.5rem,4.2vw,1.95rem);font-weight:600;letter-spacing:-.02em; line-height:1.04;margin:2px 0 0;color:var(--ink)} .ela-home h3{font-size:1.05rem;margin:0} .ela-home__area{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase; color:var(--signal-ink)} .ela-home__price{margin:0;font-family:var(--mono);font-size:.94rem;font-weight:500;letter-spacing:.03em;color:var(--ink)} .ela-home__spec{margin:0;padding-top:6px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.7rem; line-height:1.5;letter-spacing:.1em;text-transform:uppercase;color:var(--whisper-ink)} .ela-home__ph{aspect-ratio:16/3.4;border:1px dashed var(--whisper);display:grid;place-items:center;margin-bottom:4px; font-family:var(--mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--whisper-ink); background:repeating-linear-gradient(-45deg,rgba(var(--whisper-rgb),.13) 0 1px,transparent 1px 9px)} .ela-home picture img,.ela-home img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:1px} .ela-home__act{margin-top:auto;padding-top:4px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap; gap:0 16px;align-items:center;justify-content:space-between} .ela-home__act a{font-family:var(--mono);font-size:.7rem;letter-spacing:.11em;text-transform:uppercase; text-decoration:none;color:var(--signal-ink);display:inline-flex;align-items:center;min-height:44px; transition:color .24s var(--e-ui)} .ela-home__act a+a{color:var(--ink);border-bottom:1px solid var(--line)} .ela-home__act a+a:hover{border-bottom-color:var(--ink)} /* ── 24.6 · HOUSING DETAIL — the opened sheet ── */ .ela-hd{background:var(--paper);border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow); padding:clamp(18px,3vw,34px);position:relative;overflow:hidden} .ela-hd .ela-home__code{font-size:clamp(1.9rem,5vw,2.9rem);margin:0} .ela-hd h2:not(.ela-home__code){font-size:clamp(1.2rem,2.4vw,1.6rem);margin-top:6px;color:var(--whisper-ink);font-weight:400} .ela-hd__gallery{display:grid;gap:10px;grid-template-columns:minmax(0,1fr);margin:18px 0} @media (min-width:760px){.ela-hd__gallery{grid-template-columns:repeat(2,minmax(0,1fr))}} .ela-hd__gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:1px} .ela-hd__gallery .ela-home__ph{grid-column:1/-1;aspect-ratio:16/4} .ela-hd__facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:0;border-top:1px solid var(--line)} .ela-hd__facts dt,.ela-hd__facts dd{margin:0;padding:8px 0;border-bottom:1px solid var(--line); font-family:var(--mono);font-size:.76rem;letter-spacing:.06em} .ela-hd__facts dt{letter-spacing:.13em;text-transform:uppercase;color:var(--whisper-ink);padding-right:18px} .ela-hd__facts dd{text-align:right;font-weight:500} .ela-hd__desc{margin:18px 0 0;font-size:1.02rem;color:rgba(var(--ink-rgb),.86);max-width:64ch} ul.ela-hd__desc{list-style:none;padding:0;display:grid;gap:0;border-top:1px solid var(--line)} ul.ela-hd__desc li{border-bottom:1px solid var(--line);padding:8px 0 8px 22px;position:relative;font-size:.98rem} ul.ela-hd__desc li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:9px; border:1.4px solid var(--signal);border-radius:50%} .ela-hd__act{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center} .ela-hd__act a{display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border:1.5px solid var(--ink); border-radius:2px;font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase; text-decoration:none;color:var(--ink);box-shadow:3px 3px 0 rgba(var(--shade-rgb),.12); transition:transform .26s var(--e-press),box-shadow .26s var(--e-press),background .24s var(--e-ui)} .ela-hd__act a:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(var(--shade-rgb),.16)} .ela-hd__act a:first-child{background:var(--signal);border-color:var(--signal);color:var(--cream); box-shadow:4px 4px 0 rgba(var(--signal-rgb),.24)} .ela-hd__act a:first-child:hover{box-shadow:1px 1px 0 rgba(var(--signal-rgb),.3)} /* ── 24.7 · FORMS — an application on office stationery ── */ div.ela-form{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);min-width:0} form.ela-form{background:var(--paper);border:1px solid var(--line);border-radius:2px;box-shadow:6px 6px 0 rgba(var(--shade-rgb),.09); padding:clamp(18px,3vw,32px);display:grid;grid-template-columns:minmax(0,1fr);gap:14px;position:relative} @media (min-width:680px){form.ela-form{grid-template-columns:1fr 1fr}} form.ela-form>h2{grid-column:1/-1;font-size:clamp(1.5rem,3.2vw,2.2rem);max-width:18ch} form.ela-form::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--line);opacity:.6} .ela-form__row{display:grid;gap:5px;min-width:0} .ela-form__row:has(textarea),.ela-form__row:has(select),.ela-form__row:has(input[type=tel]){grid-column:1/-1} .ela-form__row label{font-family:var(--mono);font-size:.7rem;line-height:1.4;letter-spacing:.14em; text-transform:uppercase;color:var(--whisper-ink)} .ela-form__row input,.ela-form__row textarea,.ela-form__row select{width:100%;background:transparent;border:0; border-bottom:1.5px solid var(--line);border-radius:0;padding:10px 0 7px;font-size:16px;font-family:var(--sans); transition:border-color .26s var(--e-ui)} .ela-form__row textarea{border:1.5px solid var(--line);padding:10px 12px;resize:vertical;min-height:110px} .ela-form__row select{font-family:var(--mono);min-height:48px} .ela-form__row input:focus,.ela-form__row textarea:focus,.ela-form__row select:focus{outline:none;border-color:var(--signal); border-bottom-color:var(--signal)} .ela-form__row:has(input:valid:not(:placeholder-shown)) label{color:var(--brand)} .ela-form__row:has(input:valid:not(:placeholder-shown)) input{border-bottom-color:var(--brand)} .ela-form__gdpr{grid-column:1/-1;border-top:1px solid var(--line);padding-top:12px} .ela-form__gdpr label{display:flex;align-items:flex-start;gap:11px;min-height:44px;padding-block:5px; font-size:.9rem;line-height:1.55;color:rgba(var(--ink-rgb),.84);cursor:pointer} .ela-form__gdpr input[type=checkbox]{flex:0 0 auto;width:22px;height:22px;margin:2px 0 0;accent-color:var(--signal)} .ela-form__gdpr input[type=checkbox]:focus-visible{outline:2px solid var(--signal);outline-offset:3px} .ela-form__submit{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;justify-content:center; gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:2px;background:var(--signal);color:var(--cream); font-family:var(--mono);font-size:.78rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;cursor:pointer; box-shadow:4px 4px 0 rgba(var(--signal-rgb),.24); transition:transform .26s var(--e-press),box-shadow .26s var(--e-press)} .ela-form__submit:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(var(--signal-rgb),.3)} .ela-form__submit:active{transform:translate(4px,4px);box-shadow:0 0 0 rgba(var(--signal-rgb),.3)} div.ela-form>.ela-note{margin-bottom:14px} /* helper line under a field the owner defined */ .ela-form__help{font-family:var(--mono);font-size:.68rem;line-height:1.5;letter-spacing:.05em; color:var(--whisper-ink);margin-top:2px} .bleed .ela-form__help{color:rgba(var(--paper-rgb),.72)} /* a yes/no field is a row too — the box and its label sit on one 44px line */ .ela-form__row.is-check{grid-column:1/-1;gap:2px} .ela-form__row.is-check label{display:flex;align-items:flex-start;gap:11px;min-height:44px;padding-block:5px; font-family:var(--sans);font-size:.9rem;line-height:1.55;letter-spacing:0;text-transform:none; color:rgba(var(--ink-rgb),.84);cursor:pointer} .ela-form__row.is-check input[type=checkbox]{flex:0 0 auto;width:22px;height:22px;margin:2px 0 0; accent-color:var(--signal)} .ela-form__row.is-check input[type=checkbox]:focus-visible{outline:2px solid var(--signal);outline-offset:3px} .bleed .ela-form__row.is-check label{color:rgba(var(--paper-rgb),.9)} /* native date / number pickers keep the same ruled-line treatment as the rest */ .ela-form__row input[type=date],.ela-form__row input[type=number]{font-family:var(--mono);min-height:48px} .ela-form__row input[type=date]::-webkit-calendar-picker-indicator{cursor:pointer;opacity:.7} .ela-form__row input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:1} /* the owner's own "what you still have to do" — a stamped instruction slip */ .ela-steps{grid-column:1/-1;margin:4px 0 0;padding:11px 14px;border-left:3px solid var(--brand); background:rgba(var(--brand-rgb),.045);border-radius:0 2px 2px 0;display:grid;gap:5px} .ela-steps .ela-steps__line{margin:0;max-width:60ch;text-transform:none;letter-spacing:.02em; font-family:var(--sans);font-size:.92rem;line-height:1.55;color:rgba(var(--ink-rgb),.88)} .ela-receipt .ela-steps{text-align:left;max-width:460px;margin-inline:auto;margin-top:16px} .bleed .ela-steps{border-left-color:rgba(var(--paper-rgb),.6);background:rgba(var(--paper-rgb),.07)} .bleed .ela-steps .ela-steps__line{color:rgba(var(--paper-rgb),.92)} /* the bleed zones host forms too */ .bleed form.ela-form{background:rgba(var(--paper-rgb),.06);border-color:rgba(var(--paper-rgb),.34);box-shadow:none} .bleed .ela-form__row label{color:rgba(var(--paper-rgb),.82)} .bleed .ela-form__row input,.bleed .ela-form__row textarea,.bleed .ela-form__row select{color:var(--cream);border-color:rgba(var(--paper-rgb),.4)} .bleed .ela-form__gdpr{border-top-color:rgba(var(--paper-rgb),.3)} .bleed .ela-form__gdpr label{color:rgba(var(--paper-rgb),.9)} /* ── 24.9 · BEER PONG — the tournament as a posted result sheet ── The room this lives in is loud; the page it lives on is not. So the standings are set as a typed table pinned to the wall — mono figures, ruled rows, the leaders inked rather than coloured in — and the only thing that shouts is the score of a game that has actually been played. */ .ela-bp{display:grid;gap:clamp(22px,3.2vw,36px)} /* Ο τίτλος του τουρνουά ζει πια στην επικεφαλίδα της σελίδας, οπότε αυτή η γραμμή κρατά μόνο τη σήμανση «ζωντανή κατάταξη» — και μια μικρή σήμανση δεν δικαιολογεί το κενό ενός ολόκληρου μπλοκ γύρω της. */ .ela-bp__head:not(:has(.ela-bp__pic)){margin-bottom:calc(clamp(22px,3.2vw,36px) * -.55)} .ela-tn__back{margin-bottom:calc(clamp(22px,3.2vw,36px) * -.6)} /* the masthead: a photo of the night beside what the night is */ .ela-bp__head{display:grid;gap:clamp(14px,2.4vw,26px);align-items:center} /* two columns only when there IS a photo — otherwise the masthead would reserve half the page for nothing */ @media (min-width:820px){.ela-bp__head:has(.ela-bp__pic){grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}} .ela-bp__pic{background:var(--paper);padding:8px;border-radius:1px;line-height:0; box-shadow:6px 6px 0 rgba(var(--shade-rgb),.09);transform:rotate(-1.1deg)} .ela-bp__pic picture,.ela-bp__pic img{display:block;width:100%;height:auto;aspect-ratio:4/3; object-fit:cover;background:var(--canvas-2)} .ela-bp__intro{min-width:0} .ela-bp__title{font-family:var(--disp);font-size:clamp(1.9rem,5vw,3rem);font-weight:600; letter-spacing:-.03em;line-height:1.02;margin:0 0 8px;color:var(--ink)} .ela-bp__meta{margin:0 0 10px;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em; text-transform:uppercase;color:var(--whisper-ink)} .ela-bp__lede{margin:0 0 10px;max-width:52ch;color:var(--ink)} /* the one live thing on the page says so, and stops moving when asked */ .ela-bp__flag{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem; letter-spacing:.16em;text-transform:uppercase;color:var(--signal-ink); border:1.5px solid var(--signal);border-radius:2px;padding:6px 12px;background:rgba(var(--signal-rgb),.05)} .ela-bp__flag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal); animation:elaBpPulse 2.4s var(--e-ui) infinite} @keyframes elaBpPulse{0%,100%{opacity:1}50%{opacity:.25}} @media (prefers-reduced-motion:reduce){.ela-bp__flag::before{animation:none}} .ela-bp__block{display:grid;gap:12px} .ela-bp__cap{margin:0;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--whisper-ink); padding-bottom:8px;border-bottom:1px solid var(--line)} /* ── the table ── */ .ela-bp__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .ela-bp__table{width:100%;border-collapse:collapse;min-width:520px; font-family:var(--mono);font-variant-numeric:tabular-nums} .ela-bp__table th{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500; color:var(--whisper-ink);text-align:right;padding:0 8px 9px;border-bottom:1.5px solid var(--line);white-space:nowrap} .ela-bp__table th:nth-child(1),.ela-bp__table th:nth-child(2){text-align:left} .ela-bp__table td{font-size:.82rem;text-align:right;padding:11px 8px;border-bottom:1px dashed var(--whisper); color:var(--ink);white-space:nowrap} .ela-bp__table td:nth-child(1),.ela-bp__table td:nth-child(2){text-align:left} .ela-bp__table tbody tr:last-child td{border-bottom:1px solid var(--line)} .ela-bp__rank{width:2.5em;color:var(--whisper-ink)} .ela-bp__team{white-space:normal;min-width:12ch} .ela-bp__table .ela-bp__name{display:block;font-family:var(--disp);font-size:1.05rem;font-weight:600; letter-spacing:-.01em;line-height:1.2} .ela-bp__who{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em; text-transform:uppercase;color:var(--whisper-ink);margin-top:2px} .ela-bp__pts{font-weight:600;font-size:.95rem} /* first three carry a rule, not a highlight — a ranking, not a heat map */ .ela-bp__table tr.is-top .ela-bp__rank{color:var(--signal-ink);font-weight:600} .ela-bp__table tr.is-r1 td{background:rgba(var(--signal-rgb),.055)} .ela-bp__table tr.is-r1 .ela-bp__name{color:var(--signal-ink)} .ela-bp__table tr.is-r1 .ela-bp__rank::after{content:"★";margin-left:5px;font-size:.7em;vertical-align:2px} /* ── πολλά τουρνουά: καρτέλες που ανοίγουν το καθένα ── Το ευρετήριο εμφανίζεται ΜΟΝΟ από δύο και πάνω. Ένα τουρνουά ανοίγει κατευθείαν — μια λίστα του ενός είναι ένα κλικ που δεν αγοράζει τίποτα. */ .ela-tn{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))} @media (min-width:640px){.ela-tn{gap:12px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}} .ela-tn__card{position:relative;display:flex;flex-direction:column;gap:4px;margin:0; background:var(--paper);border:1px solid var(--line);border-radius:2px; padding:9px 11px 11px;box-shadow:var(--shadow); transition:transform .26s var(--e-ui),box-shadow .26s var(--e-ui)} .ela-tn__card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(var(--shade-rgb),.1)} .ela-tn__pic{background:var(--canvas);padding:5px;border-radius:1px;line-height:0;margin:-1px 0 5px; box-shadow:inset 0 0 0 1px rgba(var(--shade-rgb),.07)} .ela-tn__pic picture,.ela-tn__pic img{display:block;width:100%;height:auto;aspect-ratio:16/10; object-fit:cover;background:var(--canvas-2)} .ela-tn__title{margin:0;font-family:var(--disp);font-size:1.12rem;font-weight:600; letter-spacing:-.015em;line-height:1.16;color:var(--ink);overflow-wrap:anywhere} .ela-tn__meta{margin:0;font-family:var(--mono);font-size:.62rem;letter-spacing:.12em; text-transform:uppercase;color:var(--whisper-ink)} /* Ο υπότιτλος είναι νύξη, όχι παράγραφος: δύο γραμμές και κόβεται, ώστε οι καρτέλες να μένουν ισοϋψείς και η σειρά να διαβάζεται με μια ματιά. */ .ela-tn__lede{margin:1px 0 0;font-size:.82rem;line-height:1.45;color:var(--whisper-ink); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .ela-tn__count{margin:2px 0 0;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em; text-transform:uppercase;color:var(--signal-ink)} .ela-tn__cta{margin-top:auto;padding-top:8px;border-top:1px dashed var(--whisper); font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase; color:var(--signal-ink);display:inline-flex;align-items:center;gap:6px;text-decoration:none} .ela-tn__cta::after{content:"→";transition:transform .26s var(--e-ui)} .ela-tn__card:hover .ela-tn__cta::after{transform:translateX(4px)} /* όλη η καρτέλα είναι ο σύνδεσμος, χωρίς να εγκλωβίζει το κείμενο σε */ .ela-tn__cta::before{content:"";position:absolute;inset:0;z-index:1} .ela-tn__cta:focus-visible{outline:2px solid var(--signal);outline-offset:3px} .ela-tn__back{align-self:start;font-family:var(--mono);font-size:.7rem;letter-spacing:.13em; text-transform:uppercase;color:var(--whisper-ink);text-decoration:none; display:inline-flex;align-items:center;gap:8px;min-height:44px} .ela-tn__back::before{content:"←"} .ela-tn__back:hover{color:var(--signal-ink)} /* ── the games ── */ .ela-bp__games{list-style:none;margin:0;padding:0;display:grid;gap:8px} .ela-bp__game{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center; gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:2px; padding:11px 14px;box-shadow:var(--shadow)} .ela-bp__side{font-family:var(--disp);font-size:1.02rem;font-weight:500;letter-spacing:-.01em; color:var(--whisper-ink);min-width:0;overflow-wrap:anywhere} .ela-bp__side:last-of-type{text-align:right} .ela-bp__side.is-win{color:var(--ink);font-weight:600} .ela-bp__score{font-family:var(--mono);font-size:1rem;font-variant-numeric:tabular-nums; letter-spacing:.06em;color:var(--ink);white-space:nowrap; border:1.5px solid var(--line);border-radius:2px;padding:4px 11px;background:var(--canvas)} .ela-bp__score i{font-style:normal;color:var(--whisper-ink);padding:0 3px} .ela-bp__stage{grid-column:1/-1;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em; text-transform:uppercase;color:var(--whisper-ink)} /* a game not yet played is a line waiting to be filled in */ .ela-bp__game.is-pending{background:transparent;border-style:dashed;box-shadow:none} .ela-bp__game.is-pending .ela-bp__score{background:transparent;border-style:dashed; color:var(--whisper-ink);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase} /* ── the teams ── */ .ela-bp__teams{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} @media (min-width:760px){.ela-bp__teams{grid-template-columns:repeat(auto-fill,minmax(186px,1fr))}} .ela-bp__card{margin:0;background:var(--paper);border:1px solid var(--line);border-radius:2px; padding:10px 12px 12px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:5px; transition:transform .26s var(--e-ui),box-shadow .26s var(--e-ui)} .ela-bp__card:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 rgba(var(--shade-rgb),.1)} .ela-bp__cardpic{background:var(--canvas);padding:5px;border-radius:1px;line-height:0;margin:-2px 0 4px; box-shadow:inset 0 0 0 1px rgba(var(--shade-rgb),.07)} .ela-bp__cardpic picture,.ela-bp__cardpic img{display:block;width:100%;height:auto;aspect-ratio:1/1; object-fit:cover;background:var(--canvas-2)} .ela-bp__card .ela-bp__name{margin:0;font-family:var(--disp);font-size:1.06rem;font-weight:600; letter-spacing:-.015em;line-height:1.18;color:var(--ink)} .ela-bp__card .ela-bp__who{margin:0} .ela-bp__grp{margin:auto 0 0;padding-top:7px;border-top:1px dashed var(--whisper); font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase; color:var(--signal-ink)} /* ── house rules, numbered like a form ── */ .ela-bp__rules{margin:0;padding:0;list-style:none;counter-reset:bpr;display:grid;gap:9px} .ela-bp__rules li{counter-increment:bpr;position:relative;padding-left:34px;line-height:1.6;color:var(--ink)} .ela-bp__rules li::before{content:counter(bpr,decimal-leading-zero);position:absolute;left:0;top:1px; font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--signal-ink)} /* on the navy band the sheet inverts, exactly like the trips rail does */ .bleed .ela-bp__title,.bleed .ela-bp__lede,.bleed .ela-bp__table td, .bleed .ela-bp__side.is-win,.bleed .ela-bp__rules li{color:var(--cream)} .bleed .ela-bp__meta,.bleed .ela-bp__cap,.bleed .ela-bp__who, .bleed .ela-bp__rank,.bleed .ela-bp__side{color:rgba(var(--paper-rgb),.82)} .bleed .ela-bp__cap,.bleed .ela-bp__table th{border-bottom-color:rgba(var(--paper-rgb),.34)} .bleed .ela-bp__table td{border-bottom-color:rgba(var(--paper-rgb),.26)} .bleed .ela-bp__game,.bleed .ela-bp__card{background:rgba(var(--paper-rgb),.055); border-color:rgba(var(--paper-rgb),.34);box-shadow:none} .bleed .ela-bp__score{background:transparent;border-color:rgba(var(--paper-rgb),.42);color:var(--cream)} .bleed .ela-bp__pic,.bleed .ela-bp__cardpic{background:rgba(var(--paper-rgb),.1); box-shadow:inset 0 0 0 1px rgba(var(--paper-rgb),.28)} /* ── 24.8 · THE ARCHIVE — a contact sheet with sprocket edges ── */ .ela-archive{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(146px,1fr))} @media (min-width:760px){.ela-archive{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}} .ela-frame{margin:0;background:var(--paper);padding:9px 7px 7px;border-radius:1px; box-shadow:3px 3px 0 rgba(var(--shade-rgb),.08);position:relative;transform:rotate(var(--r,0deg));cursor:zoom-in; opacity:0;transition:box-shadow .3s var(--e-ui),transform .3s var(--e-page),opacity .34s var(--e-ui)} .ela-frame.in{opacity:1} .ela-frame:nth-child(3n+1){--r:-1.2deg} .ela-frame:nth-child(3n+2){--r:1.1deg} .ela-frame:nth-child(3n+3){--r:-.6deg} .ela-frame:hover{box-shadow:6px 6px 0 rgba(var(--shade-rgb),.13);transform:rotate(var(--r,0deg)) translateY(-2px)} .ela-frame:focus-visible{outline:2px solid var(--signal);outline-offset:3px} .ela-frame::before,.ela-frame::after{content:"";position:absolute;left:8px;right:8px;height:5px; background:radial-gradient(circle at 3px 2.5px,var(--canvas-2) 2.1px,transparent 2.5px) 0 0/9px 5px repeat-x} .ela-frame::before{top:2px} .ela-frame::after{bottom:2px} .ela-frame img{width:100%;aspect-ratio:3/2;object-fit:cover} .ela-frame__no{display:block;margin-top:5px;font-family:var(--stamp-font);font-size:11px;letter-spacing:.11em; color:var(--whisper-ink)} .ela-archive .ela-empty{grid-column:1/-1} /* ============ 25 · VIEW TRANSITIONS + REDUCED MOTION + PRINT ============ */ ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s;animation-timing-function:cubic-bezier(.36,.05,.24,1)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0ms!important; transition-duration:.001ms!important;transition-delay:0ms!important} .stamp{--bleed:140%!important;opacity:.92!important;transform:rotate(var(--rot,-3.5deg))!important; mask-image:none!important;-webkit-mask-image:none!important} h1 .l>span,.ln-rev>span,.gut .fld span{transform:none!important} h1 .l:last-child>span::after{opacity:.88!important;transform:rotate(-3deg)!important} h1 .l{overflow:visible!important} .hair{transform:scaleX(1)!important} .h-fields,.h-sub,.h-cta,.ela-ev,.ela-home,.ela-frame{opacity:1!important;transform:none!important} .issued{clip-path:none!important} .ela-trip,.rvl{clip-path:none!important} .who-ph{opacity:1!important;transform:rotate(1.4deg)!important} .rvl img{transform:none!important} .stamp-press{transform:translate3d(var(--dx,0px),var(--dy,0px),0) rotate(-9deg)!important; -webkit-mask-image:none!important;mask-image:none!important} .stamp-press.set{transform:translate3d(var(--dx,0px),var(--dy,0px),0) rotate(var(--rot,-4deg))!important} .knock{animation:none} } @media (prefers-reduced-motion:no-preference){.stamp.set{will-change:transform}} @media print{ .ela-ev,.ela-trip,.rvl,.who-ph,.ln-rev>span,.gut .fld span,.h-fields,.h-sub,.h-cta,.issued,h1 .l>span,.hair, .rvl img,.ela-home,.ela-frame{opacity:1!important;clip-path:none!important;transform:none!important} h1 .l{overflow:visible!important} .who-ph{transform:rotate(1.4deg)!important} .stamp{opacity:.92!important;-webkit-mask-image:none!important;mask-image:none!important;transform:rotate(-3.5deg)!important} .grain,.wa,.top,.hdr,.nav-mobile,.nav-backdrop,.tray,.lb,.skip{display:none!important} .ela-events,.ela-trips,.ela-archive{overflow:visible!important} section{break-inside:auto} body{background:#fff} } /* ============ 26 · PAGE CHROME (interior documents) ============ */ .page-head{padding-top:calc(var(--hdr) + clamp(22px,4vw,52px));padding-bottom:clamp(20px,3vw,40px); border-bottom:1px solid var(--line);background:var(--paper)} /* `section.tight` (0,0,1,1) out-specifies `.page-head` (0,0,1,0), so on the four pages that carry both — /book, /cookies, /privacy, /terms — its flat 25px padding replaced the header offset and the

sat UNDER the fixed header (h1 top 54px against a header ending at 66px at 390). Re-assert the offset at (0,0,2,1); still tighter than a full page-head, but clear of the header. */ section.page-head.tight{padding-top:calc(var(--hdr) + clamp(14px,3vw,34px))} .page-head h1{font-size:clamp(2.1rem,6vw,4.6rem);max-width:17ch;margin-top:6px} .page-head .lede{max-width:60ch} .page-head .issued{clip-path:none;margin-top:18px} .page-head .eng-draw{position:absolute;right:-10%;bottom:-32%;width:min(760px,66%);opacity:.1;left:auto} @media (max-width:899px){.page-head .eng-draw{right:-22%;bottom:-24%;width:150%;opacity:.09}} .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 9px;font-family:var(--mono);font-size:.7rem; letter-spacing:.13em;text-transform:uppercase;color:var(--whisper-ink);margin-bottom:8px} .crumbs a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center; text-decoration:none;color:var(--signal-ink)} .crumbs a:hover{text-decoration:underline;text-underline-offset:3px} .board{margin-top:6px} .ofc-line{display:block;max-width:56ch;margin:16px 0 18px;text-transform:none;letter-spacing:.03em;line-height:1.7} .card-cap{display:block;margin-top:26px;max-width:38ch;text-transform:none;letter-spacing:.03em;line-height:1.7} .proc{counter-reset:pr;list-style:none;margin:18px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)} .proc li{counter-increment:pr;border-bottom:1px solid var(--line);padding:12px 0 12px 40px;position:relative; line-height:1.6;font-size:1rem} .proc li::before{content:"0" counter(pr);position:absolute;left:0;top:15px;font-family:var(--mono);font-size:.7rem; letter-spacing:.12em;color:var(--signal-ink)} .idx{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)} .idx li{border-bottom:1px solid var(--line)} .idx a{display:flex;align-items:center;min-height:52px;padding:8px 0;text-decoration:none;font-family:var(--disp); font-size:1.1rem;font-weight:600;letter-spacing:-.015em;transition:transform .3s var(--e-ui),color .24s var(--e-ui)} .idx a:hover{transform:translateX(10px);color:var(--signal-ink)} /* 404 — the refused entry */ .err{min-height:auto;padding-bottom:clamp(24px,4vw,56px)} .err-media{display:grid;place-items:center;min-height:260px} .err-media .stamp{position:static;--sz:clamp(180px,22vw,270px);--rot:-7deg} @media (max-width:899px){.err .h-cta{display:none}.err .h-cta-m{display:grid} .err-media{display:grid;min-height:180px;margin-top:18px}} @media (min-width:900px){.err .h-cta-m{display:none}} .err .mrz{margin-top:26px} /* ============ 27 · SCREEN BUDGET — what a phone does not need ============ */ @media (max-width:699px){ #who .pull{display:none} #crew .rvl-g{display:none} .page-head h1{font-size:clamp(2rem,9vw,2.8rem)} .plate-grid{gap:12px} section{padding-block:var(--sp)} } @media (max-width:560px){ #buddy .rvl-g{display:none} .ela-archive{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))} } .ofc-note{display:block;margin-top:14px;text-transform:none;letter-spacing:.03em;line-height:1.7;max-width:34ch} /* the stamped ellipse hangs below the last line — the 404 sub-line has to clear it */ .err .h-sub{margin-top:clamp(20px,3vw,34px)} /* ═══════════════════════════════════════════════════════════════════════════ 28 · FIELD PHOTOGRAPHY — the archive, filed into the interior documents. Three devices, so no two pages wear the same one: .band a full-bleed plate printed in the passport's own navy ink .sheet a contact sheet of small filed frames .filed taped prints with a file number, the hero's device at page scale Every photograph here is of the community. None of them stands in for a flat, a room or a trip destination — the captions say what they are. ═══════════════════════════════════════════════════════════════════════════ */ /* ── 28.1 · the band ── */ figure.band{margin:0;position:relative} .band-fig{position:relative;overflow:clip;isolation:isolate;background:var(--brand); border-block:1px solid var(--line)} .band-fig img{display:block;width:100%;aspect-ratio:var(--bar-m,4/3);object-fit:cover; object-position:var(--bp,50% 42%);filter:grayscale(1) contrast(1.06) brightness(1.05); mix-blend-mode:luminosity} @media (min-width:700px){.band-fig img{aspect-ratio:var(--bar,16/5.6)}} /* the security rule of a printed plate, laid over the picture */ .band-fig::after{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(0deg,rgba(var(--shade-rgb),.17) 0 1px,transparent 1px 3px)} .band figcaption{width:min(1360px,100%);margin-inline:auto;padding:9px var(--pad) 0; display:flex;flex-wrap:wrap;gap:2px 22px;justify-content:space-between;align-items:baseline; font-family:var(--stamp-font);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase; color:var(--whisper-ink)} .band figcaption em{font-style:normal;font-family:var(--mono);font-size:.72rem;letter-spacing:.03em; text-transform:none;line-height:1.6;max-width:56ch} .alt .band-fig,.plate .band-fig{border-block-color:var(--line)} /* ── 28.2 · the contact sheet ── */ .sheet{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px} @media (min-width:760px){.sheet.four{grid-template-columns:repeat(4,minmax(0,1fr))} .sheet.three{grid-template-columns:repeat(3,minmax(0,1fr))}} .sheet figure{margin:0;background:var(--paper);padding:8px 7px 6px;border-radius:1px; box-shadow:3px 3px 0 rgba(var(--shade-rgb),.08);transform:rotate(var(--r,0deg));position:relative; transition:transform .3s var(--e-page),box-shadow .3s var(--e-ui)} .sheet figure:nth-child(2n){--r:1deg} .sheet figure:nth-child(3n){--r:-1.2deg} .sheet figure:hover{transform:rotate(var(--r,0deg)) translateY(-2px);box-shadow:6px 6px 0 rgba(var(--shade-rgb),.12)} .sheet img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:0} .sheet figcaption{margin-top:5px;font-family:var(--stamp-font);font-size:11px;letter-spacing:.11em; color:var(--whisper-ink);line-height:1.5} .bleed .sheet figure{background:rgba(var(--paper-rgb),.07);border:1px solid rgba(var(--paper-rgb),.3);box-shadow:none} .bleed .sheet figure:hover{background:rgba(var(--paper-rgb),.12);box-shadow:none} .bleed .sheet figcaption{color:rgba(var(--paper-rgb),.88)} /* ── 28.3 · filed prints (taped, with a file number) ── */ .filed{display:grid;gap:clamp(16px,3vw,32px);grid-template-columns:minmax(0,1fr); align-items:start;margin-top:clamp(20px,3vw,30px)} @media (min-width:640px){.filed.two{grid-template-columns:repeat(2,minmax(0,1fr))}} .filed figure{margin:0;min-width:0} .filed .ph{position:relative} .filed figcaption{margin-top:14px;font-family:var(--mono);font-size:.72rem;line-height:1.65; letter-spacing:.04em;color:var(--whisper-ink);max-width:44ch} .filed figcaption b{display:block;font-family:var(--stamp-font);font-weight:500;font-size:.66rem; letter-spacing:.15em;text-transform:uppercase;color:var(--signal-ink);margin-bottom:4px} .bleed .filed figcaption{color:rgba(var(--paper-rgb),.86)} .bleed .filed figcaption b{color:#F0B8AB} /* a single print, pinned beside a procedure */ .pinned{margin:clamp(20px,3vw,30px) 0 0;max-width:330px} @media (min-width:900px){.pinned{max-width:400px}} /* ── 28.4 · a photograph behind a page title ── */ /* the photograph is printed INTO the paper of the title page — a window on the right of the plate on desktop, a strip under the type on a phone. It never passes behind body copy, so nothing has to fight it for contrast. */ .head-shot{position:relative;overflow:clip;background:var(--paper);isolation:isolate} .head-shot>img{position:absolute;top:clamp(120px,11.8vw,178px);bottom:0;right:0;left:auto;width:min(46%,640px);height:auto; object-fit:cover;object-position:var(--bp,50% 38%);z-index:0;pointer-events:none; filter:grayscale(1) contrast(1.04) brightness(1.06);mix-blend-mode:luminosity;opacity:.92; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%); mask-image:linear-gradient(90deg,transparent 0,#000 32%)} .head-shot>.wrap{position:relative;z-index:3} .head-shot>.visa-sec{z-index:2;opacity:.72} @media (min-width:900px){.head-shot{padding-bottom:clamp(44px,6vw,92px)}} @media (max-width:899px){ .head-shot{padding-bottom:0} .head-shot>img{top:auto;bottom:0;left:0;right:0;width:100%;height:clamp(150px,42vw,230px); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 46%); mask-image:linear-gradient(180deg,transparent 0,#000 46%)} .head-shot>.wrap{padding-bottom:clamp(160px,44vw,240px)} } /* ── 28.5 · the honest line under a community photograph ── */ .ph-honest{display:block;margin-top:12px;font-family:var(--mono);font-size:.71rem;line-height:1.7; letter-spacing:.04em;color:var(--whisper-ink);max-width:56ch;text-transform:none} .bleed .ph-honest{color:rgba(var(--paper-rgb),.82)} @media (prefers-reduced-motion:reduce){ .sheet figure:hover{transform:rotate(var(--r,0deg))} } @media print{.band-fig img{mix-blend-mode:normal;filter:grayscale(1)}} /* a portrait print is a print, not a poster — cap it before it eats the column */ .filed.tall .ph{max-width:min(300px,82vw)} @media (min-width:900px){.filed.tall .ph{max-width:340px}} .filed.tall figcaption{max-width:34ch} /* ============ 25 · PARTIES — Η ΕΒΔΟΜΑΔΑ, ΒΡΑΔΥ ΒΡΑΔΥ ============ Διαφέρουν από τα events σε ένα πράγμα που αλλάζει όλη την παρουσίαση: δεν έχουν ημερομηνία, έχουν ΗΜΕΡΑ. Κανείς δεν ρωτά «πότε είναι το Hawaii Throwbacks» — ρωτά «τι παίζει Σάββατο». Άρα η ημέρα μπαίνει πρώτη και μεγάλη, σε μέγεθος τίτλου, και ο τίτλος του πάρτι ακολουθεί από κάτω. */ .ela-pt{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start} @media (min-width:700px){.ela-pt{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (min-width:1100px){.ela-pt{grid-template-columns:repeat(3,minmax(0,1fr))}} .ela-pt__card{background:var(--paper);border:1px solid var(--line);border-radius:2px; box-shadow:var(--shadow);padding:16px 16px 14px;display:flex;flex-direction:column;min-height:172px; opacity:0;transform:translateY(14px); transition:opacity .38s var(--e-ui),transform .44s var(--e-page),box-shadow .3s var(--e-ui)} .ela-pt__card.in{opacity:1;transform:none} .ela-pt__card:hover{box-shadow:6px 6px 0 rgba(var(--shade-rgb),.1)} /* Η ημέρα. Μεγάλη, στη γραμματοσειρά των τίτλων, με το χρώμα του accent — είναι το πρώτο και συχνά το μόνο που θα διαβάσει κάποιος. */ .ela-pt__day{margin:0;font-family:var(--disp);font-weight:700;letter-spacing:-.022em;line-height:.98; font-size:clamp(1.7rem,4.2vw,2.5rem);color:var(--signal-ink);text-wrap:balance} .ela-pt__time{margin:6px 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em; color:var(--whisper-ink)} .ela-pt__day+.ela-pt__time{margin-top:4px} .ela-pt__pic{margin:14px 0 10px;background:var(--canvas);padding:7px;border-radius:1px; box-shadow:inset 0 0 0 1px var(--line)} .ela-pt__pic picture,.ela-pt__pic img{display:block;width:100%;height:auto;aspect-ratio:16/10; object-fit:cover;border-radius:1px} .ela-pt__title{margin:12px 0 0;font-size:1.06rem;line-height:1.16} .ela-pt__pic+.ela-pt__title{margin-top:2px} .ela-pt__venue{margin:7px 0 0;font-family:var(--mono);font-size:.7rem;line-height:1.5; letter-spacing:.07em;color:var(--whisper-ink)} .ela-pt__cta{margin-top:auto;padding-top:12px;align-self:start;font-family:var(--mono); font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none; color:var(--signal-ink);display:inline-flex;align-items:center;gap:7px;min-height:44px} .ela-pt__cta::after{content:"→";transition:transform .26s var(--e-ui)} .ela-pt__cta:hover::after{transform:translateX(3px)} /* ── Οι συνεργάτες στο υποσέλιδο ────────────────────────────────────────── Ένα χαμηλόφωνο λουρί, όχι διαφημιστικό banner: μια λέξη και δύο σήματα. Το κοινό ύψος μπαίνει στην εικόνα (όχι στο κουτί), ώστε τα δύο λογότυπα να ζυγίζουν το ίδιο παρότι το ένα είναι τετράγωνο και το άλλο πλατύ. */ .ft-part{display:flex;align-items:center;gap:clamp(16px,2.6vw,30px);flex-wrap:wrap; margin-top:26px;padding-top:20px;border-top:1px solid rgba(var(--paper-rgb),.16)} .ft-part__lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase; color:rgba(var(--paper-rgb),.6);flex:0 0 auto} .ft-part__a{display:inline-flex;align-items:center;min-height:44px;opacity:.9; transition:opacity .26s var(--e-ui),transform .26s var(--e-ui)} .ft-part__a:hover{opacity:1;transform:translateY(-1px)} /* Κοινό ύψος, με ταβάνι στο πλάτος. Το ILA είναι πλατύ lockup (2:1) με δύο σειρές κειμένου από κάτω: στα 56px το κείμενό του θα ήταν 7px και αδιάβαστο. Στα 62px διαβάζεται, και το max-width εμποδίζει ένα ακόμα πιο πλατύ λογότυπο να καταπιεί τη σειρά. */ .ft-part__a img{height:62px;width:auto;max-width:150px;object-fit:contain;display:block} @media (max-width:520px){.ft-part__a img{height:48px;max-width:118px}} /* ============ 26 · WELCOME MONTH — Η ΛΩΡΙΔΑ ============ Ήταν πλέγμα μήνα. Τα 4/5 των κελιών ήταν άδεια και ο επισκέπτης έψαχνε πέντε δραστηριότητες μέσα σε τριάντα κουτάκια — σωστό ημερολόγιο, λάθος εργαλείο. Εδώ υπάρχουν ΜΟΝΟ οι μέρες που κάτι γίνεται, με τη σειρά που έρχονται. Η λωρίδα κυλάει με το δάχτυλο στο κινητό και με τα βελάκια σε οθόνη, και κάθε καρτέλα κουμπώνει στη θέση της (scroll-snap) ώστε να μη μένει ποτέ μισή. */ .ela-wm{position:relative} .ela-wm__rail{display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-padding-inline:2px; padding:4px 2px 16px;margin-bottom:-8px;scrollbar-width:thin; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 42px),transparent)} .ela-wm__rail:focus-visible{outline:2px solid var(--signal);outline-offset:3px} /* Όταν οι καρτέλες χωρούν όλες, η μάσκα και το snap είναι θόρυβος. */ .ela-wm__rail:not(:has(> :nth-child(4))){mask-image:none;-webkit-mask-image:none; scroll-snap-type:none;flex-wrap:wrap} .ela-wm__card{flex:0 0 min(84vw,320px);scroll-snap-align:start;display:flex;flex-direction:column; background:var(--paper);border:1px solid var(--line);border-radius:2px;box-shadow:var(--shadow); overflow:hidden;min-width:0; opacity:0;transform:translateY(14px); transition:opacity .4s var(--e-ui),transform .44s var(--e-page),box-shadow .3s var(--e-ui)} .ela-wm__card.in{opacity:1;transform:none} .ela-wm__card:hover{transform:translateY(-3px);box-shadow:6px 6px 0 rgba(var(--shade-rgb),.1)} .ela-wm__card.is-today{border-color:var(--signal);box-shadow:0 0 0 1px var(--signal),var(--shadow)} /* ── Η κορυφή: φωτογραφία με τη σφραγίδα της ημερομηνίας πάνω της ── */ .ela-wm__top{position:relative;background:var(--canvas-2)} .ela-wm__pic picture,.ela-wm__pic img{display:block;width:100%;height:auto; aspect-ratio:16/10;object-fit:cover} /* Χωρίς φωτογραφία η ημερομηνία γίνεται η ίδια το εξώφυλλο — καμία άδεια κορνίζα. */ .ela-wm__top.is-plain{min-height:104px;display:grid;place-items:center; background:linear-gradient(135deg,var(--canvas-2),var(--canvas))} .ela-wm__date{position:absolute;left:12px;bottom:12px;margin:0; display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto; column-gap:7px;align-items:baseline; background:var(--fill-dark);color:var(--cream);padding:7px 11px 8px;border-radius:2px; box-shadow:0 6px 18px rgba(var(--shade-rgb),.28)} .ela-wm__top.is-plain .ela-wm__date{position:static;box-shadow:none} .ela-wm__dow{grid-column:1;grid-row:1;font-family:var(--mono);font-size:.6rem;letter-spacing:.16em; text-transform:uppercase;opacity:.72} .ela-wm__d{grid-column:1;grid-row:2;font-family:var(--disp);font-weight:700; font-size:1.72rem;line-height:.88;font-variant-numeric:tabular-nums} .ela-wm__mon{grid-column:2;grid-row:2;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em; text-transform:uppercase;opacity:.82} .ela-wm__now{position:absolute;right:12px;top:12px;font-family:var(--mono);font-size:.6rem; letter-spacing:.14em;text-transform:uppercase;background:var(--signal);color:var(--cream); padding:5px 9px;border-radius:2px} /* ── Το σώμα ── */ .ela-wm__body{display:flex;flex-direction:column;gap:5px;padding:13px 15px 15px;flex:1} .ela-wm__time{margin:0;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em; color:var(--whisper-ink);font-variant-numeric:tabular-nums} .ela-wm__title{margin:0;font-size:1.06rem;line-height:1.18} .ela-wm__where{margin:0;font-family:var(--mono);font-size:.68rem;line-height:1.5; letter-spacing:.06em;color:var(--whisper-ink)} .ela-wm__desc{margin:4px 0 0;font-size:.92rem;line-height:1.5;color:rgba(var(--ink-rgb),.84)} .ela-wm__cta{margin-top:auto;padding-top:11px;align-self:start;font-family:var(--mono); font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;text-decoration:none; color:var(--signal-ink);display:inline-flex;align-items:center;gap:7px;min-height:44px} .ela-wm__cta::after{content:"→";transition:transform .26s var(--e-ui)} .ela-wm__cta:hover::after{transform:translateX(3px)} /* ── Τα βελάκια. Κρυφά χωρίς JavaScript και όταν όλα χωρούν. ── */ .ela-wm__nav{display:flex;gap:8px;justify-content:flex-end;margin-top:2px} .ela-wm__arrow{width:44px;height:44px;display:grid;place-items:center;cursor:pointer; background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:2px; font-size:1rem;line-height:1;transition:background .24s var(--e-ui),transform .24s var(--e-ui)} .ela-wm__arrow:hover{background:var(--canvas-2);transform:translateY(-1px)} /* Απενεργοποιημένο βελάκι: εξαιρείται από τους κανόνες αντίθεσης (WCAG 1.4.3, ανενεργά στοιχεία), αλλά ένα 35% το έκανε σχεδόν αόρατο — στο 45% φαίνεται ότι υπάρχει και ότι δεν πατιέται. */ .ela-wm__arrow[disabled]{opacity:.45;cursor:default;transform:none} @media (max-width:700px){ .ela-wm__rail{gap:11px;padding-bottom:14px} .ela-wm__title{font-size:1.02rem} .ela-wm__nav{display:none} /* στο κινητό κυλάει με το δάχτυλο */ } /* ── Κορδέλα κατάστασης ακινήτου ────────────────────────────────────────── Η κατάσταση ήταν η τελευταία λέξη σε μια γραμμή προδιαγραφών και δεν τη διάβαζε κανείς — γι' αυτό ο ιδιοκτήτης κατέληγε να σβήνει τις αγγελίες. Εδώ είναι το πρώτο πράγμα μετά τη φωτογραφία, με χρώμα που σταματά το μάτι. */ .ela-home__flag{margin:10px 15px 0;padding:7px 11px;border-radius:2px; font-family:var(--mono);font-size:.68rem;letter-spacing:.11em;text-transform:uppercase; display:flex;align-items:center;gap:8px;line-height:1.35} .ela-home__flag::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%; background:currentColor} /* Δεσμευμένο: κρατημένο, όχι χαμένο — μπορεί να ελευθερωθεί. */ .ela-home__flag.is-reserved{background:rgba(var(--signal-rgb),.11);color:var(--signal-ink); box-shadow:inset 0 0 0 1px rgba(var(--signal-rgb),.28)} /* Πιασμένο για τη σεζόν: πιο ουδέτερο, δεν καλεί σε ενέργεια. */ .ela-home__flag.is-rented{background:rgba(var(--whisper-rgb),.14);color:var(--whisper-ink); box-shadow:inset 0 0 0 1px rgba(var(--whisper-rgb),.3)} /* Στη σελίδα του ακινήτου η κορδέλα στέκεται μόνη της, χωρίς τα περιθώρια της κάρτας. */ .ela-hd .ela-home__flag, .ela-hd__body .ela-home__flag{margin:14px 0 0;font-size:.72rem;padding:9px 13px}