@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,700&display=swap'); :root { /* Kantega primary */ --purple: #27003D; --purple-dark: #150023; --purple-light: #36015B; --red: #EE3A64; --red-dark: #D3335E; --red-light: #FF507E; /* Kantega secondary */ --blue: #19254F; --teal: #028EA7; --teal-dark: #027C92; --teal-light: #06B3C6; --off-white: #FFF8FC; --yellow: #F49727; --yellow-dark: #DA7D0B; /* Support */ --mid-gray: #4e575b; --light-gray: #f2f2f2; --gray-border: #ddd; --text: #27003D; --text-muted: #4e575b; --radius: 4px; --shadow: 0 1px 3px rgba(39,0,61,0.08); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Prevent the html element from becoming a horizontal scroll container. clip (unlike hidden) does not create a scroll container, so it simply prevents any overflow from widening the viewport. */ html { overflow-x: clip; } body { font-family: 'Source Sans 3', 'Source Sans Pro', Arial, sans-serif; background: var(--off-white); color: var(--text); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; /* Prevent any overflowing child from widening the body and cropping full-width header / footer. overflow-x on was removed because it suppresses scrolling at the wrong layer; constraining overflow here on the flex column is the correct containment point. */ overflow-x: hidden; } a { color: var(--teal); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Header ── */ header { background: var(--purple); box-shadow: 0 1px 0 rgba(238,58,100,0.4); padding: 1rem 0; } .logo { font-size: 1.75rem; font-weight: 700; color: var(--off-white); letter-spacing: -0.5px; } .tagline { color: rgba(255,248,252,0.65); font-size: 0.9rem; margin-top: 0.15rem; } .header-nav { display: flex; align-items: center; justify-content: space-between; } .header-nav a { color: rgba(255,248,252,0.75); font-size: 0.85rem; text-decoration: none; } .header-nav a:hover { color: var(--off-white); } /* ── Layout ── */ .container { max-width: 720px; margin: 0 auto; padding: 0 1.25rem; } .container--wide { max-width: 1080px; } main.container { padding-top: 2rem; padding-bottom: 3rem; flex: 1; } footer { padding: 1.25rem 0; text-align: center; color: rgba(255,248,252,0.55); font-size: 0.85rem; background: var(--purple); } /* ── Card ── */ .card { background: white; border: 1px solid var(--gray-border); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow); margin-bottom: 1.5rem; } /* Kantega understrek — partial box outline under headings */ .card h2 { font-size: 1.25rem; font-weight: 700; color: var(--purple); position: relative; padding-bottom: 0.875rem; margin-bottom: 1.25rem; } .card h2::after { content: ''; position: absolute; bottom: 0; left: 0; right: 8px; height: 10px; border-bottom: 2px solid var(--red); border-right: 2px solid var(--red); } /* ── Form fields ── */ .field { margin-bottom: 1.25rem; } .field label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.375rem; color: var(--purple); } .required { color: var(--red); } .help-link { font-weight: 400; font-size: 0.8rem; margin-left: 0.5rem; } .field input[type="text"], .field textarea, .field select { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--gray-border); border-radius: var(--radius); font-size: 0.95rem; font-family: inherit; outline: none; color: var(--text); } .field select { background: white; } .field input[type="text"]:focus, .field textarea:focus, .field select:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(2,142,167,0.15); } .hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.375rem; } .time-range { display: flex; align-items: center; gap: 0.5rem; } .time-range select { flex: 1; } .time-range-sep { font-size: 0.875rem; color: var(--text-muted); } .fb-fields { display: flex; flex-direction: column; gap: 0.375rem; } /* ── Calendar ── */ /* Fixed width = 7 cells × 2.25rem + 6 gaps × 2px. Prevents the container from recalculating when slot pickers appear below and causing a layout jump. */ #calendarContainer { width: calc(7 * 2.25rem + 6 * 2px); } /* Slot pickers match the calendar width so buttons wrap at the same boundary. */ #dateSlotPickers { max-width: calc(7 * 2.25rem + 6 * 2px); } .calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; width: calc(7 * 2.25rem + 6 * 2px); } .calendar-nav button { background: none; border: 1px solid var(--gray-border); border-radius: var(--radius); padding: 0.25rem 0.625rem; cursor: pointer; font-size: 0.95rem; font-family: inherit; color: var(--text); transition: background 0.15s; width: auto; } .calendar-nav button:hover { background: var(--light-gray); } .calendar-month-label { font-weight: 700; font-size: 0.95rem; color: var(--purple); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 2.25rem); gap: 2px; text-align: center; } .calendar-grid .day-header { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); padding: 0.25rem 0; text-transform: uppercase; } .calendar-grid .day { width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; font-size: 0.875rem; transition: background 0.1s, color 0.1s; user-select: none; } .calendar-grid .day:hover { background: rgba(238,58,100,0.1); } .calendar-grid .day.selected { background: var(--purple); color: var(--off-white); font-weight: 700; } .calendar-grid .day.today { font-weight: 700; color: var(--red); } .calendar-grid .day.other-month { color: #d1d5db; pointer-events: none; } .calendar-grid .day.empty { pointer-events: none; } .no-dates { font-size: 0.85rem; color: var(--text-muted); font-style: italic; } /* ── Per-date slot pickers ── */ .date-slot-picker { border: 1px solid var(--gray-border); border-radius: var(--radius); padding: 0.75rem; margin-bottom: 0.625rem; background: var(--light-gray); } .date-slot-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.625rem; } .date-slot-header strong { flex: 1; font-size: 0.875rem; color: var(--purple); } .slot-quick-btn { background: white; border: 1px solid var(--gray-border); border-radius: 4px; padding: 0.15rem 0.5rem; font-size: 0.75rem; cursor: pointer; font-family: inherit; color: var(--text); transition: background 0.15s; } .slot-quick-btn:hover { background: var(--gray-border); } .slot-time-row { display: flex; flex-wrap: wrap; gap: 0.3rem; } .slot-time-btn { background: white; border: 1px solid var(--gray-border); border-radius: 4px; padding: 0.25rem 0.5rem; font-size: 0.8rem; cursor: pointer; font-family: inherit; color: var(--text-muted); transition: background 0.1s, border-color 0.1s, color 0.1s; } .slot-time-btn.active { background: var(--red); border-color: var(--red); color: white; font-weight: 700; } .slot-time-btn:hover:not(.active) { border-color: var(--red); color: var(--red-dark); } /* ── Buttons ── */ .btn-primary { display: inline-block; background: var(--red); color: white; border: none; border-radius: var(--radius); padding: 0.625rem 1.5rem; font-size: 0.95rem; font-weight: 700; cursor: pointer; transition: background 0.15s; font-family: inherit; width: 100%; margin-top: 0.5rem; } .btn-primary:hover { background: var(--red-dark); } .btn-primary:disabled { background: var(--mid-gray); cursor: not-allowed; } .btn-secondary { display: inline-block; border: 2px solid var(--red); color: var(--red); border-radius: var(--radius); padding: 0.5rem 1.25rem; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background 0.15s, color 0.15s; text-decoration: none; } .btn-secondary:hover { background: var(--red); color: white; text-decoration: none; } /* ── Result card ── */ .result-card h2 { color: var(--purple); } .link-box { display: flex; gap: 0.5rem; margin: 0.75rem 0 1rem; } .link-box input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--gray-border); border-radius: var(--radius); font-size: 0.85rem; color: var(--text-muted); outline: none; font-family: 'Source Code Pro', monospace; background: var(--light-gray); } .btn-copy { background: var(--light-gray); border: 1px solid var(--gray-border); border-radius: var(--radius); padding: 0.5rem 0.875rem; font-size: 0.875rem; cursor: pointer; font-family: inherit; font-weight: 700; transition: background 0.15s; white-space: nowrap; color: var(--text); } .btn-copy:hover { background: var(--gray-border); } .btn-copy.copied { background: rgba(2,142,167,0.1); border-color: var(--teal); color: var(--teal-dark); } /* ── Poll page ── */ .poll-meta { margin-bottom: 1.5rem; } .poll-meta h1 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.25rem; color: var(--purple); } .poll-meta .desc { color: var(--text-muted); margin-bottom: 0.25rem; } .poll-meta .by { font-size: 0.85rem; color: var(--text-muted); } .poll-meta .poll-duration { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.25rem; } /* ── Grid layout toggle (JS ResizeObserver controls switching) ── */ /* All start hidden; checkGridLayout() picks the right one after measuring. */ .grid-desktop { display: none; } .grid-vertical { display: none; } .grid-cards { display: none; } /* ── Vertical by-day layout ── */ .vertical-date-block { margin-bottom: 1.25rem; } .vertical-date-header { background: var(--purple); color: var(--off-white); font-size: 0.85rem; font-weight: 700; padding: 0.45rem 0.75rem; border-bottom: 2px solid var(--red); border-radius: var(--radius) var(--radius) 0 0; } .vertical-time-col { min-width: 44px; } .vertical-time-cell { background: var(--light-gray); font-size: 0.8rem; font-weight: 600; padding: 0.4rem 0.5rem; color: var(--text-muted); white-space: nowrap; text-align: left; } .vertical-participant-col { background: var(--light-gray); font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.375rem; color: var(--purple); text-align: center; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ── Slot card layout ── */ .cards-date-block { margin-bottom: 1.25rem; } .cards-date-header { background: var(--purple); color: var(--off-white); font-size: 0.85rem; font-weight: 700; padding: 0.45rem 0.75rem; border-bottom: 2px solid var(--red); border-radius: var(--radius) var(--radius) 0 0; } .slot-cards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding: 0.5rem 0; } .slot-card { border: 1px solid var(--gray-border); border-radius: var(--radius); background: white; overflow: hidden; display: flex; flex-direction: column; } .slot-card--clickable { cursor: pointer; } .slot-card--clickable:hover { border-color: var(--teal); } .slot-card-time { background: var(--light-gray); font-size: 0.8rem; font-weight: 700; color: var(--purple); text-align: center; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--gray-border); } .slot-card-dots { display: flex; flex-wrap: wrap; gap: 3px; padding: 0.4rem 0.5rem 0.2rem; min-height: 1.5rem; } .slot-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .slot-dot[data-state="yes"] { background: var(--teal); } .slot-dot[data-state="maybe"] { background: var(--yellow); } .slot-dot[data-state="no"] { background: #d1d5db; } .slot-card-summary { font-size: 0.72rem; color: var(--text-muted); padding: 0.1rem 0.5rem 0.35rem; } .slot-card-vote { border-top: 1px solid var(--gray-border); text-align: center; padding: 0.35rem 0.25rem; font-size: 1rem; cursor: pointer; user-select: none; transition: background 0.1s; } .slot-card-vote[data-state="yes"] { background: rgba(2,142,167,0.15); color: var(--teal-dark); } .slot-card-vote[data-state="maybe"] { background: rgba(244,151,39,0.15); color: var(--yellow-dark); } .slot-card-vote[data-state="no"] { background: white; color: #9ca3af; } .slot-card-vote:hover { filter: brightness(0.93); } .avail-time-col--clickable { cursor: pointer; } .avail-time-col--clickable:hover { background: var(--gray-border); } /* ── Slot detail modal ── */ .slot-detail-backdrop { display: none; position: fixed; inset: 0; background: rgba(39,0,61,0.5); z-index: 200; align-items: flex-end; justify-content: center; padding: 0; } @media (min-width: 481px) { .slot-detail-backdrop { align-items: center; padding: 1rem; } } .slot-detail-panel { background: white; border-radius: var(--radius) var(--radius) 0 0; width: 100%; max-width: 420px; max-height: 75vh; overflow-y: auto; box-shadow: 0 -4px 24px rgba(39,0,61,0.2); } @media (min-width: 481px) { .slot-detail-panel { border-radius: var(--radius); } } .slot-detail-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background: var(--purple); color: var(--off-white); border-bottom: 2px solid var(--red); position: sticky; top: 0; } .slot-detail-title { font-size: 0.95rem; font-weight: 700; } .slot-detail-close { background: none; border: none; color: var(--off-white); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.25rem; opacity: 0.8; } .slot-detail-close:hover { opacity: 1; } .slot-detail-list { padding: 0.25rem 0; } .slot-detail-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1rem; border-bottom: 1px solid var(--light-gray); } .slot-detail-item:last-child { border-bottom: none; } .slot-detail-icon { font-size: 1rem; width: 1.5rem; text-align: center; flex-shrink: 0; } .slot-detail-item[data-state="yes"] .slot-detail-icon { color: var(--teal-dark); } .slot-detail-item[data-state="maybe"] .slot-detail-icon { color: var(--yellow-dark); } .slot-detail-item[data-state="no"] .slot-detail-icon { color: #9ca3af; } .slot-detail-name { font-size: 0.95rem; color: var(--text); } .slot-detail-empty { padding: 1rem; color: var(--text-muted); font-style: italic; font-size: 0.9rem; text-align: center; } /* ── Availability table ── */ .grid-wrapper { overflow-x: auto; width: 100%; max-width: 100%; margin-bottom: 1.5rem; -webkit-overflow-scrolling: touch; } .avail-table { border-collapse: collapse; width: 100%; } /* Desktop table must render at its natural column widths so the overflow check in checkGridLayout() can detect when it is too wide for the wrapper. The vertical layout does NOT get this — its tables should compress/overflow naturally so the same check can decide whether to fall through to cards. */ .grid-desktop .avail-table { min-width: max-content; } .avail-table th, .avail-table td { border: 1px solid var(--gray-border); } .avail-name-col { text-align: left; padding: 0.5rem 0.875rem; background: var(--light-gray); font-size: 0.8rem; font-weight: 700; min-width: 110px; white-space: nowrap; color: var(--purple); } .avail-date-group { background: var(--purple); color: var(--off-white); font-size: 0.8rem; font-weight: 700; padding: 0.4rem 0.5rem; white-space: nowrap; border-bottom: 2px solid var(--red); text-align: center; } .avail-time-col { background: var(--light-gray); font-size: 0.7rem; font-weight: 600; padding: 0.25rem 0.375rem; white-space: nowrap; color: var(--text-muted); text-align: center; min-width: 44px; } .avail-row-name { padding: 0.5rem 0.875rem; font-size: 0.875rem; text-align: left; font-weight: 600; white-space: nowrap; background: white; color: var(--purple); } .avail-cell { min-width: 44px; padding: 0.5rem 0.25rem; cursor: pointer; font-size: 1rem; user-select: none; transition: background 0.1s; text-align: center; } .avail-cell[data-state="yes"] { background: rgba(2,142,167,0.15); color: var(--teal-dark); } .avail-cell[data-state="maybe"] { background: rgba(244,151,39,0.15); color: var(--yellow-dark); } .avail-cell[data-state="no"] { background: white; color: #9ca3af; } .avail-cell-interactive { cursor: pointer; } .avail-cell-interactive:hover { filter: brightness(0.93); } .your-vote-row { border-top: 2px solid var(--red); } .your-name-cell { color: var(--red); font-weight: 700; } /* ── Legend ── */ .legend { display: flex; gap: 1rem; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.25rem; flex-wrap: wrap; } .legend-item { display: flex; align-items: center; gap: 0.3rem; } /* ── Name input row ── */ .name-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .name-row label { font-weight: 600; font-size: 0.875rem; white-space: nowrap; color: var(--purple); } .name-row input { flex: 1; padding: 0.5rem 0.75rem; border: 1px solid var(--gray-border); border-radius: var(--radius); font-size: 0.95rem; font-family: inherit; outline: none; max-width: 300px; } .name-row input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(2,142,167,0.15); } /* ── Banners ── */ .banner { padding: 0.875rem 1rem; border-radius: var(--radius); font-size: 0.9rem; margin-bottom: 1rem; } .banner.error { background: rgba(238,58,100,0.08); color: var(--red-dark); border: 1px solid rgba(238,58,100,0.3); } .banner.success { background: rgba(2,142,167,0.08); color: var(--teal-dark); border: 1px solid rgba(2,142,167,0.3); } /* ── Thank you state ── */ .thank-you { text-align: center; padding: 2rem 1rem; } .thank-you .big-check { font-size: 3rem; margin-bottom: 0.5rem; } .thank-you h2 { font-size: 1.5rem; margin-bottom: 0.5rem; color: var(--purple); } .thank-you p { color: var(--text-muted); } footer a { color: rgba(255,248,252,0.75); } footer a:hover { color: var(--off-white); } @media (max-width: 480px) { .card { padding: 1rem; } /* ── Layout ── */ /* Reduce horizontal padding on the wide container so the grid card doesn't eat too much of the 375px viewport. */ .container--wide { padding: 0 0.75rem; } /* ── Availability grid ── */ /* Keep the wrapper inside the card — overflow-x: auto handles scrolling. */ /* ── Poll meta ── */ .poll-meta h1 { font-size: 1.2rem; } /* ── Calendar ── */ /* On narrow phones the fixed-width nav can overflow the card. Switch to a full-width nav so the month label + buttons never clip. */ .calendar-nav { width: 100%; } /* Scale down the day cells slightly so the 7-column grid fits inside the card's content area on a 320 px phone (card padding 1rem each side). */ #calendarContainer { width: calc(7 * 2rem + 6 * 2px); } #dateSlotPickers { max-width: calc(7 * 2rem + 6 * 2px); } .calendar-grid { grid-template-columns: repeat(7, 2rem); } .calendar-grid .day { width: 2rem; height: 2rem; } /* ── Tap targets ── */ /* Calendar nav prev/next buttons */ .calendar-nav button { min-height: 44px; padding: 0 0.875rem; } /* Slot quick-action buttons (Alle / Ingen) */ .slot-quick-btn { min-height: 44px; padding: 0 0.75rem; font-size: 0.875rem; } /* Time-slot toggle buttons */ .slot-time-btn { min-height: 44px; padding: 0.25rem 0.625rem; font-size: 0.875rem; } /* Secondary button and copy button */ .btn-secondary, .btn-copy { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* ── Name row ── */ .name-row { flex-wrap: wrap; } /* Remove the desktop max-width cap so the input fills the full row */ .name-row input { max-width: 100%; } /* ── Minimum readable font sizes ── */ /* avail-time-col and day-header are 0.7 rem (11 px) — bump to 0.75 rem */ .avail-time-col, .calendar-grid .day-header { font-size: 0.75rem; } }