/* ---- shared conventions across all five sites ---- */ /* Bilingual visibility: .l-en / .l-am blocks follow */ html[data-lang="en"] .l-am { display: none !important; } html[data-lang="am"] .l-en { display: none !important; } /* Ethiopic needs taller leading and its own serif; never synthesize oblique */ [lang="am"], .l-am { font-family: "Noto Serif Ethiopic", "Abyssinica SIL", "Kefa", "Ebrima", serif; font-style: normal; line-height: 1.85; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ---- memories module (structure only; each site skins via CSS variables: --mem-paper, --mem-ink, --mem-meta, --mem-rule, --mem-accent) ---- */ .mem-wall { display: grid; gap: 22px; margin: 28px 0; } .mem-card { border: 1px solid var(--mem-rule, #ccc); background: var(--mem-paper, transparent); padding: 20px 22px; } .mem-card blockquote { margin: 0 0 10px; font-style: italic; font-size: 1.05rem; line-height: 1.7; } .mem-card blockquote[lang="am"] { font-style: normal; } .mem-attr { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mem-meta, #777); } .mem-attr .mem-name { color: var(--mem-ink, inherit); } .mem-attr.attr-am { letter-spacing: 0; text-transform: none; } .mem-media { margin: 14px 0 4px; } .mem-media img, .mem-media video { max-width: 100%; display: block; border: 1px solid var(--mem-rule, #ccc); } .mem-sig { margin-top: 10px; } .mem-sig svg { max-width: 240px; height: auto; display: block; } .mem-empty { font-style: italic; color: var(--mem-meta, #777); } /* ---- composer trigger + modal ---- */ .mem-open { font: inherit; cursor: pointer; letter-spacing: .04em; background: var(--mem-accent, #833); color: var(--mem-paper, #fff); border: none; padding: 15px 34px; min-height: 48px; margin-top: 26px; } .mem-open:focus-visible { outline: 2px solid var(--mem-accent, #833); outline-offset: 3px; } html.mem-lock, html.mem-lock body { overflow: hidden; } .mem-dialog { border: 1px solid var(--mem-rule, #ccc); background: var(--mem-paper, #fff); color: var(--mem-ink, #222); padding: 0; width: min(620px, calc(100vw - 32px)); max-height: min(90dvh, 860px); margin: auto; } .mem-dialog::backdrop { background: rgba(16, 12, 8, .58); } .mem-dialog[open], div.mem-dialog:not([hidden]) { display: flex; flex-direction: column; } div.mem-dialog:not([hidden]) { margin: 26px 0; } /* inline fallback for very old browsers */ .mem-dhead { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--mem-rule, #ccc); flex: none; } .mem-dhead h3 { margin: 0; font-size: 1.25rem; font-weight: 600; } .mem-close { font: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; background: transparent; border: 1px solid var(--mem-rule, #ccc); color: var(--mem-meta, #777); min-width: 44px; min-height: 44px; flex: none; } .mem-close:focus-visible { outline: 2px solid var(--mem-accent, #833); outline-offset: 2px; } .mem-dbody { padding: 8px 22px 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } @media (max-width: 640px) { .mem-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border: none; } .mem-dbody { padding-bottom: calc(24px + env(safe-area-inset-bottom)); } } /* the form loses its standalone chrome inside the modal — the dialog is the card */ .mem-dialog .mem-form { border: none !important; box-shadow: none !important; transform: none !important; padding: 0; margin: 0; max-width: none; background: transparent; } /* ---- drag & drop zone + preview ---- */ .mem-drop { border: 1.5px dashed var(--mem-rule, #ccc); color: var(--mem-meta, #777); min-height: 104px; padding: 22px 16px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; } .mem-drop .mem-drop-hint { color: var(--mem-ink, inherit); font-size: .98rem; } .mem-drop.drag { border-color: var(--mem-accent, #833); background: rgba(127, 63, 52, .06); } .mem-drop:focus-visible { outline: 2px solid var(--mem-accent, #833); outline-offset: 2px; } .mem-drop input[type="file"] { display: none; } .mem-drop.has-file { display: none; } .mem-preview[hidden] { display: none !important; } .mem-preview { display: flex; align-items: center; gap: 14px; border: 1px solid var(--mem-rule, #ccc); padding: 10px 12px; margin-top: 2px; } .mem-preview .mem-pthumb { flex: none; width: 84px; height: 84px; } .mem-preview .mem-pthumb img, .mem-preview .mem-pthumb video { width: 84px; height: 84px; object-fit: cover; display: block; border: 1px solid var(--mem-rule, #ccc); background: rgba(0,0,0,.08); } .mem-preview .mem-pmeta { font-size: .85rem; color: var(--mem-meta, #777); overflow-wrap: anywhere; min-width: 0; } .mem-premove { font: inherit; font-size: .82rem; cursor: pointer; margin-left: auto; flex: none; background: transparent; border: 1px solid var(--mem-rule, #ccc); color: var(--mem-meta, #777); padding: 10px 14px; min-height: 44px; } .mem-premove:focus-visible { outline: 2px solid var(--mem-accent, #833); outline-offset: 2px; } .mem-form h3 { margin-top: 0; } .mem-field { margin: 14px 0; } .mem-field label { display: block; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mem-meta, #777); margin-bottom: 6px; } .mem-field input[type="text"], .mem-field textarea { width: 100%; box-sizing: border-box; font: inherit; color: inherit; background: transparent; border: 1px solid var(--mem-rule, #ccc); padding: 10px 12px; } .mem-field textarea { min-height: 120px; resize: vertical; } .mem-field input:focus-visible, .mem-field textarea:focus-visible, .mem-form button:focus-visible { outline: 2px solid var(--mem-accent, #833); outline-offset: 2px; } .mem-file-note { font-size: .82rem; color: var(--mem-meta, #777); margin-top: 6px; } .mem-form button[type="submit"] { font: inherit; cursor: pointer; letter-spacing: .06em; background: var(--mem-accent, #833); color: var(--mem-paper, #fff); border: none; padding: 12px 26px; margin-top: 8px; } .mem-form button[type="submit"][disabled] { opacity: .55; cursor: default; } .mem-status { margin-top: 12px; font-size: .95rem; } .mem-status.ok { color: var(--mem-accent, #375); } .mem-status.err { color: #a33; } .mem-progress { height: 3px; background: var(--mem-rule, #ccc); margin-top: 10px; display: none; } .mem-progress i { display: block; height: 100%; width: 0; background: var(--mem-accent, #833); } .mem-sigpad { border: 1px dashed var(--mem-rule, #ccc); position: relative; } .mem-sigpad canvas { display: block; width: 100%; height: 140px; touch-action: none; } .mem-sigclear { position: absolute; right: 8px; top: 8px; font: inherit; font-size: .78rem; background: transparent; border: 1px solid var(--mem-rule, #ccc); color: var(--mem-meta, #777); cursor: pointer; padding: 3px 10px; } /* gallery structure (skinned per site) */ .ph-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px; } .ph { margin: 0; } .ph img { width: 100%; height: auto; display: block; } .ph figcaption { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin-top: 9px; } .ph figcaption [lang="am"] { text-transform: none; letter-spacing: 0; } /* ---- the three places of the day, featured in every hero ---- */ .hero-venues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; text-align: left; } @media (max-width: 700px) { .hero-venues { grid-template-columns: 1fr; } } .hero-venues .venue { display: block; text-decoration: none; padding: 15px 17px; border: 1px solid currentColor; } .venue .v-time { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 7px; } .venue .v-time [lang="am"] { letter-spacing: 0; text-transform: none; } .venue .v-name { display: block; font-size: 1.02rem; line-height: 1.45; } .venue .v-role { display: block; font-size: .85rem; margin-top: 5px; } .hero-venues-note { font-size: .8rem; margin-top: 10px; }