/* ========================================================================== poste.cc · BOOTSTRAP 5 THEME -------------------------------------------------------------------------- Bridges the poste.cc design tokens onto Bootstrap 5.3's --bs-* variables so stock Bootstrap components (btn, card, form-control, table, badge, nav…) adopt the brand automatically. Then adds poste-specific .posta-* classes for things Bootstrap doesn't ship (status pills, post-office cards, hours table, the map panel, service tags, etc.). Load order: bootstrap.min.css → bootstrap-icons.css → poste theme CSS Dark mode: Palette: ========================================================================== */ /* ---- Map tokens → Bootstrap core variables ----------------------------- */ :root{ --bs-primary:var(--brand); --bs-primary-rgb:249, 197, 0; --bs-link-color:var(--brand-ink); --bs-link-color-rgb:138, 105, 0; --bs-link-hover-color:var(--brand-hover); --bs-border-color:var(--line); --bs-border-radius:var(--r-md); --bs-border-radius-sm:var(--r-sm); --bs-border-radius-lg:var(--r-lg); --bs-border-radius-xl:var(--r-xl); --bs-border-radius-pill:var(--r-pill); --bs-body-bg:var(--bg); --bs-body-color:var(--text); --bs-secondary-color:var(--text-2); --bs-tertiary-color:var(--text-muted); --bs-secondary-bg:var(--surface-2); --bs-tertiary-bg:var(--surface-3); --bs-emphasis-color:var(--text); --bs-body-font-family:var(--font-body); --bs-body-font-size:var(--fs-md); --bs-body-line-height:var(--lh-normal); --bs-heading-color:var(--text); --bs-success:var(--success); --bs-warning:var(--warning); --bs-danger:var(--danger); --bs-info:var(--info); --bs-card-bg:var(--surface); --bs-card-border-color:var(--line); --bs-box-shadow-sm:var(--shadow-sm); --bs-box-shadow:var(--shadow-md); } /* Headings use the display family */ h1, h2, h3, .h1, .h2, .h3, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6{ font-family:var(--font-display); letter-spacing:var(--ls-snug); } body{ font-feature-settings:var(--num); } /* ---- Buttons ----------------------------------------------------------- */ .btn{ --bs-btn-font-weight:var(--w-semibold); --bs-btn-border-radius:var(--r-md); letter-spacing:-0.01em; transition:transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); } .btn:active{ transform:scale(0.97); } .btn-primary{ --bs-btn-bg:var(--brand); --bs-btn-border-color:var(--brand); --bs-btn-hover-bg:var(--brand-hover); --bs-btn-hover-border-color:var(--brand-hover); --bs-btn-active-bg:var(--brand-press); --bs-btn-active-border-color:var(--brand-press); --bs-btn-color:var(--on-brand); --bs-btn-hover-color:var(--on-brand); --bs-btn-active-color:var(--on-brand); --bs-btn-disabled-bg:var(--brand); --bs-btn-disabled-border-color:var(--brand); --bs-btn-disabled-color:var(--on-brand); box-shadow:var(--shadow-brand); } .btn-outline-primary{ --bs-btn-color:var(--brand-ink); --bs-btn-border-color:var(--line-strong); --bs-btn-hover-bg:var(--brand-weak); --bs-btn-hover-color:var(--brand-ink); --bs-btn-hover-border-color:var(--brand-ink); --bs-btn-active-bg:var(--brand-weak-2); --bs-btn-active-color:var(--brand-ink); --bs-btn-active-border-color:var(--brand-ink); } .btn-soft{ --bs-btn-bg:var(--brand-weak); --bs-btn-color:var(--brand-ink); --bs-btn-hover-bg:var(--brand-weak-2); --bs-btn-hover-color:var(--brand-ink); --bs-btn-border-color:transparent; --bs-btn-hover-border-color:transparent; } .btn-ghost{ --bs-btn-bg:transparent; --bs-btn-color:var(--text-2); --bs-btn-border-color:transparent; --bs-btn-hover-bg:var(--surface-3); --bs-btn-hover-color:var(--text); --bs-btn-hover-border-color:transparent; } /* ---- Forms ------------------------------------------------------------- */ .form-control, .form-select{ --bs-border-radius:var(--r-md); background:var(--surface); border-color:var(--line-strong); color:var(--text); padding:10px 14px; } .form-control:focus, .form-select:focus{ border-color:var(--brand-ink); box-shadow:0 0 0 3px var(--focus-ring); background:var(--surface); } .form-control::placeholder{ color:var(--text-muted); } .input-group-text{ background:var(--surface-2); border-color:var(--line-strong); color:var(--text-muted); } /* ---- Cards ------------------------------------------------------------- */ .card{ --bs-card-border-radius:var(--r-lg); --bs-card-bg:var(--surface); --bs-card-border-color:var(--line); box-shadow:var(--shadow-sm); } .card.posta-lift{ transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); } .card.posta-lift:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); } /* ---- Tables ------------------------------------------------------------ */ .table{ --bs-table-bg:transparent; --bs-table-color:var(--text); --bs-table-border-color:var(--line); } .table > :not(caption) > * > *{ padding:12px 14px; } .posta-table thead th{ font:var(--text-mono); font-size:11px; text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--text-muted); background:var(--surface-2); border-bottom:1px solid var(--line); } .posta-table tbody tr.is-today{ background:var(--brand-weak); } .posta-table tbody tr.is-today td{ font-weight:var(--w-bold); box-shadow:inset 0 1px 0 var(--brand-weak-2), inset 0 -1px 0 var(--brand-weak-2); } .posta-table tbody tr.is-today td:first-child{ border-left:3px solid var(--brand); } .posta-today-badge{ display:inline-flex; align-items:center; gap:4px; margin-left:6px; padding:1px 8px; border-radius:999px; background:var(--brand); color:var(--on-brand); font:var(--text-caption); text-transform:uppercase; letter-spacing:var(--ls-caps); vertical-align:middle; } .posta-table td .unit{ color:var(--text-muted); font-size:0.85em; } /* ========================================================================== POSTE custom components ========================================================================== */ /* Eyebrow / section label */ .posta-eyebrow{ font:var(--text-caption); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--text-muted); display:inline-flex; align-items:center; gap:6px; } /* Brand wordmark (HTML, font-driven) */ .posta-logo{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; } .posta-logo:hover{ text-decoration:none; } .posta-logo img{ height:30px; display:block; } .posta-logo .wm{ font:var(--w-bold) 22px/1 var(--font-display); letter-spacing:-0.02em; color:var(--text); } .posta-logo .wm b{ color:var(--brand-ink); font-weight:var(--w-bold); } /* ---- Status pill: odprto / zapira se / zaprto / praznik --------------- */ .posta-status{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 9px; border-radius:var(--r-pill); font:var(--w-semibold) var(--fs-xs)/1 var(--font-body); letter-spacing:0.01em; background:var(--st-bg, var(--surface-3)); color:var(--st-fg, var(--text-2)); white-space:nowrap; } .posta-status .dot{ width:8px; height:8px; border-radius:50%; background:var(--st-fg, var(--text-2)); flex:none; } .posta-status.is-open{ --st-fg:var(--status-open); --st-bg:color-mix(in oklch, var(--status-open) 14%, transparent); } .posta-status.is-soon{ --st-fg:var(--status-soon); --st-bg:color-mix(in oklch, var(--status-soon) 16%, transparent); } .posta-status.is-closed{ --st-fg:var(--status-closed); --st-bg:color-mix(in oklch, var(--status-closed) 14%, transparent); } .posta-status.is-holiday{ --st-fg:var(--status-holiday); --st-bg:color-mix(in oklch, var(--status-holiday) 15%, transparent); } .posta-status.is-perm{ --st-fg:var(--status-perm); --st-bg:color-mix(in oklch, var(--status-perm) 14%, transparent); } /* live "open" dot gets a gentle pulse */ .posta-status.is-open .dot{ animation:posta-pulse 2.4s var(--ease-in-out) infinite; } @keyframes posta-pulse{ 0%, 100%{ box-shadow:0 0 0 0 color-mix(in oklch, var(--status-open) 55%, transparent);} 60%{ box-shadow:0 0 0 5px transparent;} } @media (prefers-reduced-motion:reduce){ .posta-status.is-open .dot{ animation:none; } } /* ---- Postal code chip (the signature numeral) ------------------------- */ .posta-code{ font-family:var(--font-mono); font-weight:var(--w-semibold); font-variant-numeric:tabular-nums; letter-spacing:0.02em; color:var(--brand-ink); line-height:1; display:inline-flex; align-items:center; } .posta-code.lg{ font-size:var(--fs-2xl); } .posta-code.hero{ font-size:var(--fs-code); letter-spacing:0.01em; } /* Code badge — yellow tile holding a postal code (list leading element) */ .posta-codetile{ display:inline-flex; align-items:center; justify-content:center; min-width:56px; height:44px; padding:0 10px; border-radius:var(--r-md); background:var(--brand-weak); color:var(--brand-ink); font:var(--w-semibold) var(--fs-lg)/1 var(--font-mono); font-variant-numeric:tabular-nums; letter-spacing:0.02em; border:1px solid color-mix(in oklch, var(--brand-ink) 22%, transparent); } /* ---- Service tag (filatelija, fotokopiranje …) ------------------------ */ .posta-tag{ display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-pill); background:var(--surface-2); border:1px solid var(--line); font:var(--w-medium) var(--fs-sm)/1 var(--font-body); color:var(--text-2); } .posta-tag i{ color:var(--brand-ink); font-size:0.95em; } /* ---- Office card (directory list item) -------------------------------- */ .posta-office{ display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-xs); text-decoration:none; color:inherit; transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); } .posta-office:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--line-strong); color:inherit; text-decoration:none; } .posta-office .body{ flex:1; min-width:0; } .posta-office .name{ font:var(--w-semibold) var(--fs-lg)/1.15 var(--font-display); color:var(--text); display:block; } .posta-office .addr{ font:var(--text-small); color:var(--text-2); margin-top:2px; display:block; } .posta-office .meta{ font:var(--text-mono); font-size:11px; color:var(--text-muted); margin-top:6px; display:flex; gap:12px; flex-wrap:wrap; align-items:center; } .posta-office .chev{ color:var(--text-muted); font-size:1.1rem; flex:none; } .posta-office:hover .chev{ color:var(--brand-ink); } /* ---- Stat tile (oddaljenost / št. telefonov / storitve) --------------- */ .posta-stat{ padding:var(--sp-4); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-md); } .posta-stat .k{ font:var(--text-caption); text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--text-muted); display:flex; align-items:center; gap:6px; } .posta-stat .v{ font:var(--w-bold) var(--fs-2xl)/1 var(--font-display); font-variant-numeric:tabular-nums; color:var(--text); margin-top:8px; } .posta-stat .v small{ font-size:0.5em; font-weight:var(--w-medium); color:var(--text-muted); } /* ---- Hero (detail / location page) — postal-notice yellow ------------- */ .posta-hero{ background:var(--grad-brand); color:var(--on-brand); border-radius:var(--r-xl); padding:clamp(20px, 4vw, 36px); position:relative; overflow:hidden; } .posta-hero .posta-eyebrow{ color:color-mix(in oklch, var(--on-brand) 72%, transparent); } .posta-hero .posta-code{ color:var(--on-brand); } /* faint perforation/stamp edge texture on the hero */ .posta-hero::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:radial-gradient(circle at 8px 8px, color-mix(in oklch, var(--on-brand) 8%, transparent) 1.5px, transparent 2px); background-size:22px 22px; mask-image:linear-gradient(180deg, transparent 60%, #000000 100%); } /* ---- Phone / contact row ---------------------------------------------- */ .posta-contact{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r-md); transition:background var(--dur-fast) var(--ease-out); text-decoration:none; color:var(--text); } .posta-contact:hover{ background:var(--surface-3); color:var(--text); text-decoration:none; } .posta-contact .ic{ width:34px; height:34px; border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center; background:var(--brand-weak); color:var(--brand-ink); flex:none; } .posta-contact .num{ font:var(--w-semibold) var(--fs-md)/1.1 var(--font-mono); font-variant-numeric:tabular-nums; color:var(--text); } .posta-contact .lbl{ font:var(--text-small); color:var(--text-muted); } /* ---- Segmented control (vse / odprte / obala …) ----------------------- */ .posta-seg{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; gap:2px; } .posta-seg button{ border:0; background:transparent; color:var(--text-2); font:var(--w-semibold) 13px/1 var(--font-body); padding:7px 16px; border-radius:var(--r-pill); cursor:pointer; transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .posta-seg button.active{ background:var(--surface); color:var(--brand-ink); box-shadow:var(--shadow-xs); } /* ---- Sticky site header ------------------------------------------------ */ .posta-header{ position:sticky; top:0; z-index:var(--z-header); background:color-mix(in oklch, var(--surface) 88%, transparent); backdrop-filter:saturate(160%) blur(12px); border-bottom:1px solid var(--line); } /* ---- Map panel (temnomodro / dark-blue style) ------------------------- */ .posta-map{ position:relative; border-radius:var(--r-xl); overflow:hidden; background:#0F1F33; border:1px solid var(--line); background-image:linear-gradient(transparent 0 0), repeating-linear-gradient(0deg, rgba(120, 160, 210, .07) 0 1px, transparent 1px 38px), repeating-linear-gradient(90deg, rgba(120, 160, 210, .07) 0 1px, transparent 1px 38px), radial-gradient(120% 90% at 30% 20%, #18324F 0%, #0F1F33 55%, #0A1626 100%); } /* ---- Accordion (FAQ) tweaks ------------------------------------------- */ .accordion{ --bs-accordion-bg:var(--surface); --bs-accordion-border-color:var(--line); --bs-accordion-border-radius:var(--r-md); --bs-accordion-active-bg:var(--brand-weak); --bs-accordion-active-color:var(--brand-ink); --bs-accordion-btn-focus-box-shadow:0 0 0 3px var(--focus-ring); } .accordion-button{ font-weight:var(--w-semibold); } /* ---- Nearby office list link ------------------------------------------ */ .posta-nearby{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:var(--r-md); text-decoration:none; color:var(--text); transition:background var(--dur-fast) var(--ease-out); } .posta-nearby:hover{ background:var(--surface-3); color:var(--text); text-decoration:none; } .posta-nearby .km{ font:var(--text-mono); font-size:11px; color:var(--text-muted); min-width:56px; } /* ---- Utility: muted mono caption -------------------------------------- */ .posta-mono{ font:var(--text-mono); color:var(--text-muted); } /* ========================================================================== poste.cc app additions (not in the design-system source) — patterns the real pages need: alpha index headers, codes/postbox rows, real map glue. ========================================================================== */ /* Alpha section label inside a list grid */ .list-alpha{ grid-column:1/-1; font:var(--w-bold) 13px/1 var(--font-mono); color:var(--brand-ink); margin:14px 2px 2px; } /* Postal-code index row (seznam) */ .codes-row{ display:flex; align-items:center; gap:14px; padding:11px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-xs); text-decoration:none; color:inherit; transition:border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .codes-row:hover{ border-color:var(--line-strong); background:var(--surface-2); color:inherit; text-decoration:none; } /* Postbox row (nabiralniki) */ .box-row{ display:flex; align-items:center; gap:14px; padding:12px 14px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-xs); } .box-ic{ width:38px; height:38px; border-radius:var(--r-sm); display:inline-flex; align-items:center; justify-content:center; background:var(--brand-weak); color:var(--brand-ink); flex:none; font-size:1.1rem; } .box-pick{ text-align:right; flex:none; min-width:78px; } /* Self-hosted MapLibre GL surface dressed in the temnomodro panel chrome */ .posta-map.is-live{ background:#0A1626; } .posta-map .maplibregl-map{ border-radius:inherit; } .posta-map .maplibregl-ctrl-attrib{ opacity:.5; } /* ---- Live map markers: status pill (4-digit code) + name label -------- */ .poste-pin{ cursor:pointer; display:flex; flex-direction:column; align-items:center; line-height:1; } .poste-pin__badge{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; font:var(--w-bold) 12px/1 var(--font-mono); padding:4px 8px; border-radius:999px; background:var(--surface); color:var(--text); border:2px solid var(--danger); box-shadow:0 2px 6px rgba(0, 0, 0, .35); transition:transform var(--dur-fast) var(--ease-out); } .poste-pin__dot{ width:8px; height:8px; border-radius:50%; background:var(--danger); flex:none; } .poste-pin.is-open .poste-pin__badge{ border-color:var(--status-open); } .poste-pin.is-open .poste-pin__dot{ background:var(--status-open); } .poste-pin__name{ margin-top:2px; font:var(--w-semibold) 11px/1.1 var(--font-body); color:#FFFFFF; text-align:center; text-shadow:0 1px 3px rgba(0, 0, 0, .9); display:none; max-width:120px; pointer-events:none; } .poste-map-labeled .poste-pin__name{ display:block; } .poste-pin:hover .poste-pin__badge, .poste-pin.is-active .poste-pin__badge{ transform:scale(1.12); } .poste-pin.is-active{ z-index:3; } .poste-pin.is-current .poste-pin__badge{ background:var(--brand); color:var(--on-brand); border-color:var(--brand); font-size:13px; padding:5px 10px; } .poste-pin.is-current .poste-pin__dot{ background:var(--on-brand); } .poste-pin.is-current .poste-pin__name{ display:block; } /* ---- Map popup (status line + address + actions) ---------------------- */ .maplibregl-popup-content{ border-radius:var(--r-md); padding:12px 14px; box-shadow:var(--shadow-md); background:var(--surface); color:var(--text); } .maplibregl-popup-close-button{ font-size:18px; color:var(--text-muted); padding:0 7px; } .poste-pop__title{ display:block; font:var(--w-bold) var(--fs-md)/1.2 var(--font-body); color:var(--text); text-decoration:none; margin-bottom:6px; } .poste-pop__title:hover{ color:var(--brand-ink); text-decoration:underline; } .poste-pop__status{ display:inline-flex; align-items:center; gap:6px; font:var(--text-small); margin-bottom:4px; } .poste-pop__status .dot{ width:8px; height:8px; border-radius:50%; flex:none; } .poste-pop__status.is-open{ color:var(--status-open); } .poste-pop__status.is-open .dot{ background:var(--status-open); } .poste-pop__status.is-soon{ color:var(--status-soon); } .poste-pop__status.is-soon .dot{ background:var(--status-soon); } .poste-pop__status.is-closed{ color:var(--status-closed); } .poste-pop__status.is-closed .dot{ background:var(--status-closed); } /* live status line reused in the homepage sidebar cards (.meta) */ .poste-status-live{ display:inline-flex; align-items:center; gap:6px; font-weight:var(--w-semibold); } .poste-status-live .dot{ width:7px; height:7px; border-radius:50%; flex:none; background:currentColor; } .poste-status-live.is-open{ color:var(--status-open); } .poste-status-live.is-soon{ color:var(--status-soon); } .poste-status-live.is-closed{ color:var(--status-closed); } .poste-pop__addr{ font:var(--text-small); color:var(--text-2); margin-bottom:8px; } .poste-pop__act{ display:flex; gap:8px; } .poste-pop__act a{ font:var(--w-semibold) 12px/1 var(--font-body); color:var(--brand-ink); text-decoration:none; padding:6px 10px; border-radius:var(--r-sm); background:var(--brand-weak); } .poste-pop__act a:hover{ background:var(--brand); color:var(--on-brand); text-decoration:none; } /* In dark mode the map popup must still read as a light card: black text on white (the maplibre tip is left at its default #fff, so it already matches). */ [data-bs-theme="dark"] .maplibregl-popup-content{ background:#FFFFFF; color:#14202C; } [data-bs-theme="dark"] .poste-pop__title{ color:#14202C; } [data-bs-theme="dark"] .poste-pop__title:hover{ color:#155CA0; } [data-bs-theme="dark"] .poste-pop__addr{ color:#44525F; } [data-bs-theme="dark"] .maplibregl-popup-close-button{ color:#748393; } [data-bs-theme="dark"] .poste-pop__act a{ color:#155CA0; background:#E8F1FB; } [data-bs-theme="dark"] .poste-pop__act a:hover{ color:#FFFFFF; background:#1A73C7; } /* Mailbox detail — address rows link to their marker on the map */ .mailbox-link{ color:var(--text); text-decoration:none; border-radius:var(--r-sm); transition:background .12s, color .12s; } .mailbox-link:hover{ color:var(--brand-ink); background:var(--surface-2); text-decoration:none; } .mailbox-link:hover .bi-mailbox2{ transform:scale(1.1); } .mailbox-dist{ flex:none; align-self:center; font:var(--text-caption); color:var(--text-muted); white-space:nowrap; padding:1px 7px; border-radius:999px; background:var(--surface-2); } .mailbox-dist:empty{ display:none; } /* Homepage live sidebar (office cards keep these JS-hook state classes) */ .selected-post-office-details{ display:flex; flex-direction:column; gap:10px; } .pod-detail-open .posta-office{ border-left:4px solid var(--status-open); } .pod-detail-soon .posta-office{ border-left:4px solid var(--status-soon); } .pod-detail-closed .posta-office{ border-left:4px solid var(--status-closed); } .selected-post-office-detail .posta-office{ background:var(--brand-weak); border-color:var(--brand-ink); } .selected-post-office-details-ad{ margin:4px 0; } .post-office-detail-loading{ height:84px; border-radius:var(--r-lg); background:var(--surface-2); position:relative; overflow:hidden; } .post-office-detail-loading::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, color-mix(in oklch, var(--line) 60%, transparent), transparent); animation:posta-shimmer 1.4s infinite; } @keyframes posta-shimmer{ 100%{ transform:translateX(100%); } } @media (prefers-reduced-motion:reduce){ .post-office-detail-loading::after{ animation:none; } }