/* ========================================================================= Chill Events – Naptár | frontend Arculati színek a :root-on (prefixelt, ütközésmentes). A pontos brand-szín 1 sorban cserélhető. A modal a -ra kerül, ezért kellenek a :root vars. ========================================================================= */ :root { --ce-bg: #f4ede1; /* meleg krém */ --ce-surface: #fdfbf6; /* meleg elefántcsont (kártya/modal) */ --ce-ink: #3e352b; /* eszpresszó barna (szöveg) */ --ce-ink-soft: #8c7c68; /* meleg taupe-barna */ --ce-line: #e7dcc9; /* lágy homok hajszálvonal */ --ce-accent: #bd9a43; /* antik arany (pötty, keret, chip) */ --ce-accent-deep: #8a6f24; /* mély arany (szöveg/link/hover) */ --ce-accent-soft: #f4ead4; /* pezsgő árnyalat */ --ce-gold: #bd9a43; --ce-ink-deep: #2a2118; /* sötétebb eszpresszó (gomb hover) */ --ce-radius: 14px; --ce-radius-sm: 9px; --ce-shadow: 0 18px 50px rgba(62, 53, 43, .16); --ce-display: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif; } /* ---- scope reset (Hello Elementor ne nyúljon bele) ---- */ .ce-naptar, .ce-naptar * { box-sizing: border-box; } .ce-naptar { color: var(--ce-ink); line-height: 1.55; font-size: 16px; max-width: 820px; margin: 0 auto; -webkit-font-smoothing: antialiased; } .ce-naptar p { margin: 0 0 .4em; } .ce-naptar h2, .ce-naptar h3 { margin: 0; line-height: 1.15; color: var(--ce-ink); } .ce-naptar a { text-decoration: none; color: var(--ce-accent-deep); } .ce-naptar button { font: inherit; margin: 0; cursor: pointer; background: none; border: none; color: inherit; } .ce-naptar [hidden] { display: none !important; } /* ---- toolbar / view switch ---- */ .ce-naptar .ce-toolbar { display: flex; justify-content: center; margin: 0 0 22px; } .ce-naptar .ce-viewswitch { display: inline-flex; padding: 4px; background: var(--ce-accent-soft); border-radius: 999px; gap: 2px; } .ce-naptar .ce-view-btn { border: none; background: transparent; color: var(--ce-ink-soft); font-size: 13px; font-weight: 600; letter-spacing: .02em; padding: 9px 22px; border-radius: 999px; transition: background .2s ease, color .2s ease; } .ce-naptar .ce-view-btn.is-active { background: var(--ce-surface); color: var(--ce-ink); box-shadow: 0 2px 8px rgba(62, 53, 43, .12); } /* ---- calendar ---- */ .ce-naptar .ce-cal-head { display: flex; align-items: center; justify-content: center; gap: 18px; margin: 0 0 16px; } .ce-naptar .ce-cal-title { font-family: var(--ce-display); font-size: 30px; font-weight: 600; letter-spacing: .01em; text-transform: capitalize; min-width: 220px; text-align: center; } .ce-naptar .ce-nav { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ce-line); background: var(--ce-surface); color: var(--ce-ink); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: border-color .2s ease, color .2s ease, transform .15s ease; } .ce-naptar .ce-nav:hover { border-color: var(--ce-accent); color: var(--ce-accent-deep); } .ce-naptar .ce-nav:active { transform: scale(.94); } .ce-naptar .ce-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 0 0 8px; } .ce-naptar .ce-weekdays span { text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ce-ink-soft); } .ce-naptar .ce-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .ce-naptar .ce-cell { position: relative; aspect-ratio: 1 / 1; min-height: 42px; border: 1px solid var(--ce-line); border-radius: var(--ce-radius-sm); background: var(--ce-surface); display: flex; align-items: flex-start; justify-content: flex-start; } .ce-naptar .ce-cell-empty { border: none; background: transparent; } .ce-naptar .ce-cell-num { font-size: 14px; font-weight: 500; color: var(--ce-ink-soft); padding: 8px 0 0 9px; } .ce-naptar .ce-cell.is-past { opacity: .5; } .ce-naptar .ce-cell.is-today { border-color: var(--ce-ink); } .ce-naptar .ce-cell.is-today .ce-cell-num { color: var(--ce-ink); font-weight: 700; } .ce-naptar .ce-cell.has-event { cursor: pointer; background: var(--ce-accent-soft); border-color: var(--ce-accent); transition: transform .15s ease, box-shadow .2s ease; } .ce-naptar .ce-cell.has-event .ce-cell-num { color: var(--ce-ink); font-weight: 700; } .ce-naptar .ce-cell.has-event:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(152, 95, 102, .18); } .ce-naptar .ce-cell.has-event:focus-visible { outline: 2px solid var(--ce-accent-deep); outline-offset: 2px; } /* signature: az eseményes nap jelölő pötty */ .ce-naptar .ce-dot { position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; background: var(--ce-accent); } .ce-naptar .ce-dot-multi { width: auto; height: auto; min-width: 18px; padding: 1px 5px; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 1.4; color: var(--ce-ink); text-align: center; } .ce-naptar .ce-cal-hint { text-align: center; font-size: 12px; color: var(--ce-ink-soft); margin: 16px 0 0; } /* ---- list / cards ---- */ .ce-naptar .ce-cards { display: flex; flex-direction: column; gap: 14px; } .ce-naptar .ce-card { display: flex; gap: 18px; padding: 18px; background: var(--ce-surface); border: 1px solid var(--ce-line); border-radius: var(--ce-radius); transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; } .ce-naptar .ce-card:hover { transform: translateY(-2px); box-shadow: var(--ce-shadow); border-color: var(--ce-accent); } .ce-naptar .ce-chip { flex: 0 0 auto; width: 64px; height: 64px; border-radius: var(--ce-radius-sm); background: var(--ce-accent-soft); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ce-accent-deep); } .ce-naptar .ce-chip-mon { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: lowercase; } .ce-naptar .ce-chip-day { font-family: var(--ce-display); font-size: 28px; font-weight: 600; line-height: 1; } .ce-naptar .ce-card-body { flex: 1 1 auto; min-width: 0; } .ce-naptar .ce-card-title { font-family: var(--ce-display); font-size: 22px; font-weight: 600; margin: 0 0 3px; } .ce-naptar .ce-card-meta { font-size: 13px; color: var(--ce-ink-soft); margin: 0 0 8px; } .ce-naptar .ce-card-guest { font-size: 14px; margin: 0 0 3px; } .ce-naptar .ce-card-guest span { color: var(--ce-ink-soft); } .ce-naptar .ce-card-loc { font-size: 14px; color: var(--ce-ink-soft); margin: 0 0 8px; } .ce-naptar .ce-card-excerpt { font-size: 14px; color: var(--ce-ink-soft); margin: 0 0 12px; } .ce-naptar .ce-card-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .ce-naptar .ce-empty { text-align: center; color: var(--ce-ink-soft); padding: 40px 16px; font-size: 15px; } .ce-naptar .ce-noscript { text-align: center; color: var(--ce-ink-soft); font-size: 13px; } /* ---- buttons ---- */ .ce-naptar .ce-btn, .ce-modal .ce-btn { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; letter-spacing: .02em; padding: 11px 22px; border-radius: 999px; border: 1px solid transparent; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease; } .ce-naptar .ce-btn-solid, .ce-modal .ce-btn-solid { background: var(--ce-ink); color: var(--ce-surface); } .ce-naptar a.ce-btn-solid, .ce-modal a.ce-btn-solid { color: var(--ce-surface); } .ce-naptar .ce-btn-solid:hover, .ce-modal .ce-btn-solid:hover { background: var(--ce-ink-deep); transform: translateY(-1px); } .ce-naptar .ce-btn-ghost { background: transparent; color: var(--ce-accent-deep); border-color: var(--ce-accent); } .ce-naptar .ce-btn-ghost:hover { background: var(--ce-accent-soft); } /* ========================================================================= Modal (a -ra kerül – saját scope) ========================================================================= */ .ce-modal { position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center; padding: 20px; } .ce-modal[hidden] { display: none !important; } .ce-modal-backdrop { position: absolute; inset: 0; background: rgba(24, 18, 20, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: ce-fade .2s ease; } .ce-modal-card { position: relative; z-index: 1; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; background: var(--ce-surface); color: var(--ce-ink); border-radius: var(--ce-radius); box-shadow: var(--ce-shadow); animation: ce-pop .22s cubic-bezier(.2, .7, .3, 1); line-height: 1.55; } .ce-modal-close { position: absolute; top: 12px; right: 12px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255, 255, 255, .85); color: var(--ce-ink); font-size: 24px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; } .ce-modal-close:hover { background: #fff; } .ce-modal-daycount { padding: 18px 26px 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ce-accent-deep); margin: 0; } .ce-detail-sep { height: 1px; background: var(--ce-line); margin: 6px 26px; } .ce-detail-img { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ce-accent-soft); } .ce-detail-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ce-detail-body { padding: 24px 26px 28px; } .ce-detail-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ce-accent-deep); margin: 0 0 6px; } .ce-detail-title { font-family: var(--ce-display); font-size: 28px; font-weight: 600; line-height: 1.12; margin: 0 0 10px; color: var(--ce-ink); } .ce-detail-time { font-size: 15px; color: var(--ce-ink-soft); margin: 0 0 4px; } .ce-detail-loc { font-size: 15px; color: var(--ce-ink); margin: 0 0 4px; } .ce-detail-map { color: var(--ce-accent-deep); font-weight: 600; } .ce-detail-map:hover { text-decoration: underline; } .ce-detail-guest { font-size: 15px; margin: 0 0 14px; } .ce-detail-guest-lbl { color: var(--ce-ink-soft); } .ce-detail-desc { font-size: 15px; color: var(--ce-ink); margin: 14px 0 0; } .ce-detail-desc p { margin: 0 0 .8em; } .ce-detail-desc a { color: var(--ce-accent-deep); text-decoration: underline; } .ce-detail-desc img { max-width: 100%; height: auto; border-radius: var(--ce-radius-sm); } .ce-detail-desc ul, .ce-detail-desc ol { margin: 0 0 .8em 1.2em; padding: 0; } .ce-detail-actions { margin: 20px 0 0; } body.ce-modal-open { overflow: hidden; } @keyframes ce-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes ce-pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } } /* ---- responsive ---- */ @media (max-width: 600px) { .ce-naptar .ce-grid, .ce-naptar .ce-weekdays { gap: 5px; } .ce-naptar .ce-cal-title { font-size: 24px; min-width: 0; } .ce-naptar .ce-cell-num { font-size: 12px; padding: 5px 0 0 6px; } .ce-naptar .ce-dot { bottom: 6px; } .ce-naptar .ce-card { gap: 14px; padding: 14px; } .ce-naptar .ce-chip { width: 54px; height: 54px; } .ce-naptar .ce-chip-day { font-size: 24px; } .ce-naptar .ce-card-title { font-size: 20px; } .ce-modal { padding: 0; align-items: flex-end; } .ce-modal-card { max-width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0; } .ce-detail-body { padding: 22px 20px 26px; } } @media (prefers-reduced-motion: reduce) { .ce-naptar *, .ce-modal * { animation: none !important; transition: none !important; } }