ostaje `matrix(1,0,0,1,0,0)`, što od maina radi containing block za SVAKI `position:fixed` potomak: fullscreen karta na /prijevoz i /smjestaj je zbog toga slijetala na vrh dokumenta (mjereno headlessom: top −1792px umjesto 0). Isti matrix je radio i stacking context, pa je plutajući FAB (z-index 948 na ) crtao PREKO fullscreen karte. `backwards` primjenjuje samo POČETNI keyframe prije starta; nakon animacije vrijede osnovne vrijednosti (opacity 1 / transform none) — vizualno identično, jer je `to` keyframe ionako jednak osnovi. Guard: tests/test_fixed_containing_block.py. */ .gp-main { animation: gpEnter .42s cubic-bezier(0.22,1,0.36,1) backwards; } @keyframes gpEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Reveal-on-scroll (opt-in klasom .gp-reveal). */ .gp-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(0.22,1,0.36,1), transform .55s cubic-bezier(0.22,1,0.36,1); } .gp-reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .gp-main { animation: none; } .gp-reveal { opacity: 1; transform: none; transition: none; } } .gp-sidebar { width: 240px; flex-shrink: 0; background: radial-gradient(circle at top left, rgba(255,214,227,0.38), transparent 30%), radial-gradient(circle at bottom right, rgba(214,231,247,0.24), transparent 28%), linear-gradient(180deg, rgba(255,252,250,0.98) 0%, rgba(255,245,230,0.9) 100%); border-right: 1px solid rgba(200, 166, 189, 0.22); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; font-family: var(--font-sans); box-shadow: 20px 0 45px rgba(181, 107, 141, 0.08); } /* 24/18 → 18/14 (Bruno 2026-07-29) → 12/12 (2026-08-02): zaglavlje više NEMA nijedan gumb — zvonce je otišlo pod sliku profila — pa marka ide u kut i oslobođena visina ide meniju. Ista mjera i isti razlog kao kod para (ADR 2026-08-02-identitet-nosi-chrome-portala). */ .gp-sidebar-header { padding: 12px 12px 12px; border-bottom: 1px solid var(--ivory); } /* `display:block` je maknut 2026-08-02. Ostao je iz doba prije `.dw-lockup`, kad je gost crtao vlastitu marku; nakon prelaska na zajednički lockup gazio je njegov `inline-flex` (obje specifičnosti 0,1,0, a ovo pravilo je kasnije u kaskadi). Posljedica: znak i riječ slagali su se JEDNO ISPOD DRUGOG, pa je u 52px mobilnoj traci „Dalia Weddings" ispadao ISPOD zaglavlja (mjereno: lockup 88px visok, riječ na 27-70px). Mladenačka ljuska takvo pravilo nikad nije imala — `.couple-brand-link { color: inherit; }` i ništa više — pa je ondje marka cijelo vrijeme bila u redu. Sad su 1:1. */ /* BEZ color:inherit — riječ marke nosi kanonski `--lk-ink` iz `.dw-lockup` (Vedranova presuda 11.8.: „siva svugdje, samo cvijet nosi boju"; inherit je ovdje davao ugljen tijela i bio jedna od tri tinte iste riječi — Rasmus RASMUS_ZNAK_PO_ULOZI_AUDIT N1). Ulogu nosi SAMO latica (mark='guest', plava je U SVG DATOTECI). UI tema portala ostaje sage. */ .gp-brand-link { text-decoration: none; line-height: 1.0; } :root { /* UI tinta za sitni tekst i badgeve — mora proći 4,5:1, display ton ne prolazi. --sage-700 (#4d6053) je remapiran samo u .portal-theme-vendor opsegu, ovdje je siguran. */ --gp-brand-ink: var(--sage-700, #4d6053); } /* Bruno 2026-07-26: hue-rotate više ne treba — znak dolazi već obojan (`mark='guest'` → dalia-mark-flower-anim--gost.svg). Filter je usput rotirao i ZLATNE PRSTENE; sad prstenje ostaje zlatno u svakom portalu, jer je ono konstanta brenda. Crtež marke NIJE više ovdje. `.gp-brand-mark` (Libre Baskerville 700 / Avenir 300) i `.gp-brand-tag` obrisani 2026-08-01 — gost sada vozi isti `.dw-lockup` kao ostatak proizvoda, a razlika ostaje ono što razlika i jest: LATICA (`mark='guest'`, od 11.8. blago plava; riječ je kućna siva svugdje — Vedranova presuda) i čip „gost" (`tag='gost'`). */ /* Identitet gosta u sidebaru: avatar + ime + par (paritet s mladencima). */ .gp-guest-id { display: flex; align-items: center; gap: 10px; margin-top: 14px; } .gp-guest-av { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; background: rgba(126,148,132,.14); color: var(--gp-brand-ink, #4d6053); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sans, 'Manrope', sans-serif); font-size: 15px; font-weight: 700; text-transform: uppercase; overflow: hidden; line-height: 1; } .gp-guest-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; } /* Ime je od 2026-07-31 gumb (otvara „Moji podaci"). Reset da izgleda identično kao prije — mijenja se afordansa, ne izgled. */ .gp-guest-meta--btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; } .gp-guest-meta--btn:hover .gp-guest-name { color: var(--color-deep-mauve, #b56b8d); } .gp-guest-meta--btn:focus-visible { outline: 2px solid var(--color-deep-mauve, #b56b8d); outline-offset: 3px; border-radius: 6px; } .gp-guest-name { font-family: var(--font-serif, 'Cardo', Georgia, serif); font-size: 16px; font-weight: 600; color: var(--warm-black, #1a1714); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gp-guest-id .couple-profile { flex: 0 0 auto; } .gp-couple { font-size: 12px; color: var(--stone); margin-top: 3px; font-family: var(--font-sans); } body.dark-mode .gp-guest-name { color: #E8DED0; } .gp-nav-wrap { flex: 1; padding: 14px 12px; overflow-y: auto; } .gp-nav { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; color: var(--charcoal); font-size: 14px; text-decoration: none; border-left: 3px solid transparent; transition: all 0.2s; } .gp-nav svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.45; stroke: var(--charcoal); } .gp-nav:hover { background: rgba(255,214,227,0.24); color: var(--color-deep-mauve); } .gp-nav:hover svg { opacity: 0.75; stroke: var(--color-deep-mauve); } .gp-nav.gp-active { background: rgba(255,214,227,0.34); color: var(--color-deep-mauve); border-left-color: var(--color-deep-mauve); font-weight: 500; } .gp-nav.gp-active svg { opacity: 0.85; stroke: var(--color-deep-mauve); } .gp-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(200,166,189,0.22) 30%, rgba(200,166,189,0.22) 70%, transparent); margin: 10px 14px; } .gp-sidebar-bottom { padding: 12px 16px; border-top: 1px solid var(--ivory); display: flex; gap: 8px; } /* Podrška — jedini gumb u podnožju. Stilovi izvučeni iz inline atributa 2026-08-02 (canon: raw inline style se ne množi), izgled nepromijenjen. */ .gp-support-btn { width: 100%; display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: rgba(181,107,141,0.07); border: 1px solid rgba(160,90,125,0.35); border-radius: 8px; color: #a05a7d; font-size: 12.5px; font-weight: 600; font-family: var(--font-sans); cursor: pointer; } .gp-support-btn:hover { background: rgba(181,107,141,0.12); } body.dark-mode .gp-support-btn { background: rgba(181,107,141,0.14); border-color: #3A3530; color: #d18ab0; } .gp-back { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px; text-decoration: none; color: var(--stone); border: 1px solid rgba(140,130,121,0.25); transition: all 0.15s; } .gp-back:hover { color: var(--color-deep-mauve); border-color: rgba(181,107,141,0.4); } /* Izlaz u prvom redu plohe (5.9.2026.). `.gp-back` je dotad bio krojen za red od dva gumba (`flex: 1`) i nije se koristio nigdje; varijanta ga vraća na ono što jest — jedna tiha poveznica ulijevo, iznad naslova. Ne dira zatečeni razred da eventualni budući red od dva gumba ostane moguć. */ .gp-back--red { flex: 0 0 auto; align-self: flex-start; justify-content: flex-start; gap: 5px; margin: 0 0 10px; padding: 6px 10px 6px 6px; } .gp-back--red svg { opacity: .75; } .gp-logout { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 8px; color: var(--danger); font-size: 12.5px; text-decoration: none; border: 1px solid rgba(192,57,43,0.15); } .gp-logout:hover { background: rgba(192,57,43,0.05); } .gp-main { flex: 1; max-width: 1180px; margin-inline: auto; min-width: 0; padding: clamp(1.5rem, 4vw, 2.5rem); font-size: 15px; line-height: 1.6; color: var(--text-body); width: 100%; } /* Vrh sadržaja steže se, bočni razmaci ostaju (Bruno 2026-07-29): prvi redak kreće ranije ispod zaglavlja, stranica i dalje diše sa strane. */ .gp-main { padding-top: clamp(1rem, 2.2vw, 1.5rem); } /* Dno sadržaja mora proći ISPOD raila plutajućih ploha, ne iza njega: padding je visina raila + safe-area (tokeni iz guest-docks.css). Bez ovoga zadnji redak stranice završi pod pločom playliste (BRIEF § 8, IMG_0810/IMG_0811). Rule stoji ovdje, a ne u guest-docks.css, jer `padding` shorthand iznad dolazi kasnije u kaskadi od u pa bi ga prepisao. */ .gp-main { padding-bottom: calc(var(--gp-dock-base, 24px) + var(--gp-dock-band, 148px) + 20px); } .gp-topbar { display: none; position: sticky; top: 0; z-index: 50; height: var(--dw-topbar-h, 48px); align-items: center; justify-content: space-between; padding: 0 16px; background: rgba(255,250,246,0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ivory); } /* Mobilni brand: prelazak znaka ispod trake je `bleed=true` na makrou, ne pravilo po plohi (paritet s couple topbarom je sad doslovan — ista klasa, ne dvije prepisane kopije). Traka zato ne smije dobiti `overflow:hidden`. */ .gp-topbar .gp-brand-link { min-width: 0; } /* Auto-sklanjanje na skrol: data-dw-autohide atribut; CSS+mehanika dijeljeni (dalia-portal.css `dw-topbar-hide` + dw-topbar-autohide.js). */ /* ZNAK U MOBILNOJ TRACI — mjere više NISU ovdje (Bruno 2026-08-05). Ova je ljuska od 2.8. ručno vozila `--lk-mark: 66px; --dw-mark-bleed: 1px`, dakle jedina od četiri s vlastitim brojkama; znak joj je zato bio veći nego u mladenačkoj i poravnat drukčije. Oboje sad dolazi iz `.dw-lockup--bleed` (dalia-portal.css § ZNAK MARKE): znak sjeda na liniju velikih slova „Dalia", a 1,94 u vrijedi u svim trakama. Ljuska ne smije vratiti vlastitu brojku — time bi se marka opet razišla po portalima. */ /* Čip „gost" ne stoji unutar podnaslova na mobitelu — sage ton imena i tako kaže kontekst, a čip bi na toj mjeri bio tekst u tekstu. */ .gp-topbar .dw-lockup-tag { display: none; } /* Desni klaster = 1:1 couple (.couple-topbar__right): ☰ ladica + avatar. Zvono NIJE tu — obavijesti su prva stavka profil menija (jedan ulaz, ne dva). */ .gp-topbar__right { display: flex; align-items: center; gap: 2px; } .gp-topbar-btn { position: relative; flex-shrink: 0; width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 50%; color: var(--warm-black); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s; } .gp-topbar-btn:hover { background: rgba(181,107,141,0.07); } .gp-topbar-btn:active { transform: scale(0.94); } .gp-topbar-btn svg { width: 22px; height: 22px; } body.dark-mode .gp-topbar-btn { color: #E8DED0; } body.dark-mode .gp-topbar-btn:hover { background: #3A3530; } @media (max-width: 768px) { .gp-sidebar { display: none; } .gp-topbar { display: flex; } /* 1.25rem → 0.75rem gore (Bruno 2026-07-29): sadržaj kreće odmah ispod trake. */ .gp-main { padding: 0.75rem 1rem 1.25rem; max-width: 100%; } } /* Shared tab-page primitives (used by every guest tab template) */ .gp-page-head { margin-bottom: 24px; } .gp-page-title { font-family: var(--font-serif); font-size: clamp(24px, 3.5vw, 30px); font-weight: 400; color: var(--warm-black); letter-spacing: -0.01em; margin: 0; line-height: 1.15; } .gp-signature { width: 32px; height: 2px; background: var(--color-deep-mauve, #b56b8d); border-radius: 2px; margin-top: 12px; opacity: 0.8; } .gp-card { background: #fff; border-radius: 14px; padding: 18px 20px; border: 1px solid var(--ivory, #ede8df); box-shadow: var(--shadow-sm, 0 4px 14px -8px rgba(45,34,56,0.18)); } .gp-empty { padding: 48px 28px; border-radius: 14px; border: 1px dashed rgba(181,107,141,0.28); background: linear-gradient(135deg, rgba(255,250,246,0.8), rgba(248,238,243,0.5)); text-align: center; color: var(--stone); } .gp-empty::before { content: ""; display: block; width: 40px; height: 40px; margin: 0 auto 16px; background-image: var(--ornament-fleuron); background-size: contain; background-repeat: no-repeat; background-position: center; opacity: 0.55; } .gp-empty-title { font-family: var(--font-serif); font-size: 18px; color: var(--warm-black); margin-bottom: 6px; } .gp-soon { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-deep-mauve, #b56b8d); background: rgba(181,107,141,0.08); border: 1px solid rgba(181,107,141,0.25); padding: 3px 10px; border-radius: 8px; margin-left: 10px; vertical-align: middle; } /* ── UNIFIED CHROME (paritet s couple portalom) ──────────────────────── Jedinstveni ekosustav: osoba je nekad par, nekad gost — profil/avatar meni, obavijesti i tamni način izgledaju isto. Klase namjerno dijele imena s couple shellom (nikad se ne renderiraju na istoj stranici) da budući dedup u dijeljeni partial bude trivijalan. ── */ /* notif panel + profil meni CSS -> static/css/portal-chrome.css (dedup 2026-07-21) */ .couple-profile { position: relative; flex-shrink: 0; display: flex; align-items: center; gap: 2px; } /* Meni je dijeljeno pravilo usidren na `right: 0` (mobilni topbar: avatar je krajnje desno, meni raste ulijevo — točno). U DESKTOP SIDEBARU avatar stoji krajnje LIJEVO, pa je `right:0` menij od 200px slao izvan ekrana (Vedran 2026-07-29: „otvori se na lijevo na krivu stranu"). Ovdje se sidro obrće. */ .gp-guest-id .couple-profile__menu { right: auto; left: 0; } /* `.gp-notif-bell` / `.gp-notif-badge` obrisani 2026-08-02: zasebno zvonce je otišlo pod sliku profila, pa su pravila ostala bez ijednog nositelja. Nezvani selektor u ovoj datoteci nije bezopasan — obrisan selektor pojede sljedeće pravilo ako se ikad obriše samo prvi redak. */ .dw-theme-toggle .dw-theme-icon { width: 18px; height: 18px; flex-shrink: 0; } .dw-theme-toggle .dw-theme-icon--sun { display: none; } body.dark-mode .dw-theme-toggle .dw-theme-icon--moon { display: none; } body.dark-mode .dw-theme-toggle .dw-theme-icon--sun { display: inline-block; } /* Chrome zona u desktop sidebar headeru (avatar gore-desno) */ .gp-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } /* Mobilni donji nav (paritet s couple; jednostavan tab bar, ne 5-corner FAB) */ .gp-bottom-nav { display: none; } @media (max-width: 768px) { .gp-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; /* Visina dolazi iz `--gp-dock-navbar` (guest-docks.css) — isti broj koji plohe koriste za `--gp-dock-base`. Bez ovoga se dva broja raziđu. */ height: calc(var(--gp-dock-navbar, 50px) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(255,250,246,0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--ivory); } .gp-bottom-nav a, .gp-bottom-nav button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--stone); font-size: 10.5px; font-family: var(--font-sans); background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* Bez ovoga natpis nosi ~5px praznog vodstva pa traka izgleda niža nego što jest, a zrak se skupi ispod slova umjesto oko cijele stavke. 1.15 × 10.5px = 12.1px — dovoljno za rep slova „g" (Pregled, Pogodnosti). */ .gp-bottom-nav a span, .gp-bottom-nav button span { line-height: 1.15; } /* `fill: none` je paritet, ne ukras (shell_couple.html:930): bez njega svaki znak s zatvorenom konturom dobiva punu ispunu iz preglednikove zadane vrijednosti i traka izgleda kao dva različita seta ikona. */ .gp-bottom-nav svg { width: 22px; height: 22px; opacity: 0.7; stroke: currentColor; fill: none; } .gp-bottom-nav .gp-bn-active { color: var(--color-deep-mauve); } .gp-bottom-nav .gp-bn-active svg { opacity: 1; } /* Mobitel: nav (58px) + safe-area + rail ploha — sve iz istih tokena, da se brojevi ne razilaze kad se ploha promijeni. */ .gp-main { padding-bottom: calc(var(--gp-dock-base, 66px) + var(--gp-dock-band, 72px) + 20px) !important; } } body.dark-mode .gp-bottom-nav { background: rgba(30,28,26,0.96); border-top-color: #3A3530; } /* Traka se sklanja ispod fotografije u lightboxu — mladenački pandan to ima (shell_couple.html:1068), gostinski nije, pa je traka ostajala nacrtana preko snimke. `lightbox.js` postavlja `body.lb-open` na OBJE površine. */ body.lb-open .gp-bottom-nav, body.gd-card-open .gp-bottom-nav { display: none !important; } /* ══ „+" U SREDINI TRAKE I PLOČA BRZIH RADNJI (Vedran 31.8.2026.) ═══════════ „Moramo ići u istom smjeru s onim plusom u sredini, boljom organizacijom i rasporedom svega." Mjere su znak po znak mladenačke (shell_couple.html: disk 30px, ploča na z-1040, zatamnjenje na 1035 i staje IZNAD trake, radius 20px, prijelaz 300ms) — traka i ploča su ISTA stvar u dva portala i ne smiju se razići. Brava koja to mjeri: `tests/test_gostinska_plus_ploca_guard.py`. Razlika je SADRŽAJ, i to je jedina razlika koja smije postojati: mladenci ORGANIZIRAJU (skeniraj karticu, dodaj gosta, dodaj sliku, bilješka), gost DOLAZI (dodaj svoje fotografije, predloži pjesmu, pozovi pratnju, javi se mladencima). Zato je kartica na vrhu ploče kod gosta fotoaparat, ne skener: skener je parova alat (`qr-scanner.js` ga i opisuje kao „couple portal + guest nadportal"), a gostu je najveći čin dana slika koju šalje. */ .gp-nav-plus__disc { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-deep-mauve, #b56b8d); transition: transform .18s var(--ease, ease); } .gp-bottom-nav .gp-nav-plus__disc svg { width: 17px; height: 17px; opacity: 1; stroke: #fff; } .gp-nav-plus[aria-expanded="true"] { color: var(--color-deep-mauve, #b56b8d); } .gp-nav-plus[aria-expanded="true"] .gp-nav-plus__disc { transform: rotate(45deg); } @media (prefers-reduced-motion: reduce) { .gp-nav-plus__disc { transition: none; } } /* Zatamnjenje staje IZNAD trake: ploča izlazi IZ trake i nastavak je nje, pa bi zatamniti traku značilo posiviti gumb koji ploču jedini zatvara. */ .gp-plus-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: calc(var(--gp-dock-navbar, 50px) + env(safe-area-inset-bottom, 0px)); z-index: 1035; background: rgba(20, 15, 12, 0); transition: background 240ms ease; } .gp-plus-backdrop[hidden] { display: none; } .gp-plus-backdrop.is-open { background: rgba(20, 15, 12, 0.38); } .gp-plus-sheet { position: fixed; left: 0; right: 0; bottom: calc(var(--gp-dock-navbar, 50px) + env(safe-area-inset-bottom, 0px)); z-index: 1040; background: var(--paper, #fffaf6); border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 -14px 40px -18px rgba(63, 49, 56, 0.42); padding: 8px 14px 16px; transform: translateY(102%); transition: transform 300ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)); max-height: calc(100dvh - var(--gp-dock-navbar, 50px) - 24px); overflow-y: auto; } .gp-plus-sheet[hidden] { display: none; } .gp-plus-sheet.is-open { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .gp-plus-sheet { transition: none; } } @media (min-width: 769px) { .gp-plus-sheet, .gp-plus-backdrop { display: none !important; } } .gp-plus-grip { display: block; width: 36px; height: 4px; margin: 0 auto 12px; border-radius: 999px; background: rgba(107, 78, 113, 0.22); } /* Fotografija je KARTICA, ne redak — kao skener kod para. Razlika u obliku je ono što kaže da ovo nije četvrta stavka popisa nego glavni čin. Omjer je omjer snimke (3:2), ne kartice: gost šalje fotografije, ne skenira. */ .gp-plus-foto { position: relative; display: flex; align-items: flex-end; width: 100%; aspect-ratio: 1.5; max-height: 38dvh; padding: 18px 20px 20px; margin: 2px 0 10px; border: none; border-radius: 18px; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; font: inherit; color: inherit; background: radial-gradient(ellipse 78% 78% at 50% 34%, var(--mauve-100, #f0e2ea), var(--paper, #fffaf6)); overflow: hidden; } .gp-plus-foto::before { content: ""; position: absolute; inset: 0; bottom: 42px; background-color: var(--color-deep-mauve, #b56b8d); -webkit-mask: url("/static/img/kamera.svg") no-repeat center / 54px; mask: url("/static/img/kamera.svg") no-repeat center / 54px; opacity: 0.24; pointer-events: none; } .gp-plus-foto:hover::before, .gp-plus-foto:focus-visible::before { opacity: 0.34; } .gp-plus-foto:focus-visible { outline: 2px solid var(--color-deep-mauve, #b56b8d); outline-offset: 2px; } .gp-plus-foto__body { position: relative; display: flex; flex-direction: column; gap: 1px; } .gp-plus-foto__title { font-family: var(--font-serif); font-size: 18px; color: var(--warm-black); } .gp-plus-foto__hint { font-family: var(--font-sans); font-size: 12.5px; color: var(--stone); } .gp-plus-list { border-top: 1px solid var(--ivory, #f3ece4); padding-top: 6px; } .gp-plus-list .dw-qa-item { min-height: 56px; } body.dark-mode .gp-plus-sheet { background: #1E1C1A; } body.dark-mode .gp-plus-grip { background: rgba(212, 196, 176, 0.24); } body.dark-mode .gp-plus-list { border-top-color: #3A3530; } body.dark-mode .gp-plus-foto__title { color: #E8DED0; } /* Plutajuće plohe se sklanjaju dok je ploča otvorena. Gramofon `#dwVinyl` stoji na z-indexu 10002 (`--z-dock-vinyl`) — namjerno najviše od svega — pa bi bez ovoga stajao PREKO ploče. Dizanje ploče iznad 10002 ne dolazi u obzir: dock sloj je najviši po odluci, a utrka brojeva bi se ponovila na sljedećoj plohi. */ body.gp-plus-open #dwVinyl, body.gp-plus-open .dalia-chat-btn, body.gp-plus-open #gcLauncher { visibility: hidden; pointer-events: none; } /* ── DARK MODE — portal gostiju ───────────────────────────────────────── Isti pristup kao couple (shell_couple.html): redefinicija tokena na .gp-main + eksplicitni override za kartice/inpute/tablice (bijele pozadine se ne flipaju samo tokenom). Anti-FOUC apply (localStorage `dalia-theme`) je u base.html pa dark stanje perzistira i preko par↔gost prebacivanja. */ body.dark-mode { background: #1A1714; } body.dark-mode .dp-aquarelle { display: none; } body.dark-mode .gp-layout { background: transparent; } body.dark-mode .gp-sidebar { background: linear-gradient(180deg, #1E1C1A 0%, #252220 100%); border-right-color: #3A3530; box-shadow: 20px 0 45px rgba(0,0,0,0.28); } body.dark-mode .gp-sidebar-header { border-bottom-color: #3A3530; } /* Tamna tinta lockupa je jedno pravilo u dalia-portal.css (body.dark-mode .dw-lockup). Ovdje je stajala DRUGA vrijednost (#E8DED0) od one 130 redaka iznad (#a8c4ad) — ista marka, ista tema, dvije boje ovisno o tome koje pravilo pobijedi. */ body.dark-mode .gp-couple { color: #9B9188; } body.dark-mode .gp-nav { color: #D4C4B0; } body.dark-mode .gp-nav svg { stroke: #D4C4B0; } body.dark-mode .gp-nav:hover { background: rgba(181,107,141,0.14); color: #d18ab0; } body.dark-mode .gp-nav.gp-active { background: rgba(181,107,141,0.20); color: #d18ab0; border-left-color: #d18ab0; } body.dark-mode .gp-divider { background: linear-gradient(90deg, transparent, #3A3530 30%, #3A3530 70%, transparent); } body.dark-mode .gp-sidebar-bottom { border-top-color: #3A3530; } body.dark-mode .gp-back { color: #9B9188; border-color: #3A3530; } body.dark-mode .gp-topbar { background: rgba(30,28,26,0.92); border-bottom-color: #3A3530; } body.dark-mode .gp-drawer { background: linear-gradient(180deg, #1E1C1A, #252220); border-left-color: #3A3530; } body.dark-mode .gp-drawer-head { border-bottom-color: #3A3530; } /* Sadržaj: token redefinicija (svjetlosne varijable → tamne). */ body.dark-mode .gp-main { --paper: #1E1C1A; --ivory: #2A2520; --cream: #1E1C1A; --warm-black: #E8DED0; --charcoal: #D4C4B0; --stone: #9B9188; --text-primary: #E8DED0; --text-secondary: #D4C4B0; --text-body: #D4C4B0; --text-tertiary: #9B9188; color: #D4C4B0; } body.dark-mode .gp-page-title { color: #E8DED0; } /* Bijele kartice → tamna kartica (token ne pokriva hardkodirani #fff). */ body.dark-mode .gp-main .gp-card, body.dark-mode .gp-main .gp-form-card, body.dark-mode .gp-main .dl-person, body.dark-mode .gp-main .dl-attend-card, body.dark-mode .gp-main .pr-summary, body.dark-mode .gp-main .card, body.dark-mode .gp-main div[style*="background:#fff"], body.dark-mode .gp-main div[style*="background: #fff"], body.dark-mode .gp-main div[style*="background:white"], body.dark-mode .gp-main div[style*="background: white"] { background: #252220 !important; color: #D4C4B0 !important; border-color: #3A3530 !important; } body.dark-mode .gp-main .dl-attend-opt input:checked + .dl-attend-card { border-color: #d18ab0; } /* Inputi / selecti / textarea. */ body.dark-mode .gp-main input, body.dark-mode .gp-main select, body.dark-mode .gp-main textarea, body.dark-mode .gp-main .input, body.dark-mode .gp-main .select, body.dark-mode .gp-main .dl-diet-notes, body.dark-mode .gp-main .dl-decline-msg { background: #1E1C1A !important; border-color: #3A3530 !important; color: #D4C4B0 !important; } body.dark-mode .gp-main input[readonly], body.dark-mode .gp-main .dl-field input[readonly] { background: #2A2520 !important; color: #9B9188 !important; } /* Prazna stanja, tablice, sažeci. */ body.dark-mode .gp-main .gp-empty { background: linear-gradient(135deg, rgba(37,34,32,0.85), rgba(42,37,32,0.55)); border-color: #3A3530; color: #9B9188; } body.dark-mode .gp-main .gp-empty-title { color: #E8DED0; } body.dark-mode .gp-main table { color: #D4C4B0; } body.dark-mode .gp-main th { color: #9B9188 !important; border-color: #3A3530 !important; background: #1E1C1A !important; } body.dark-mode .gp-main td { border-color: #3A3530 !important; color: #D4C4B0 !important; } body.dark-mode .gp-main .pr-summary-value, body.dark-mode .gp-main .dl-summary-row { color: #9B9188; } /* Inline text-linkovi u dark → gold (paritet s couple shell_couple.html:851; izbjegava novi mauve hex koji canon flagati). Nav accent ostaje mauve gore. */ body.dark-mode .gp-main a:not([class*="btn"]):not(.couple-profile__item):not(.dl-add):not(.pr-summary-row) { color: #B56B8D; } body.dark-mode .gp-main .dl-gift-nudge a { color: #B56B8D; } /* Flash poruke u dark — najčešća ploha (svaki submit/spremanje). Hardkodirani tamni tekst (#4f7664/#8e5d69) na tamnom tintu = nečitljivo → svijetli tonovi. */ body.dark-mode .gp-main .flash-success, body.dark-mode .dl-flash--success { color: #8fc9ab !important; } body.dark-mode .gp-main .flash-error, body.dark-mode .dl-flash--error { color: #e0a3b0 !important; } body.dark-mode .gp-main .flash-info { color: #a9c2e6 !important; } body.dark-mode .gp-main .dl-gift-nudge { background: rgba(181,107,141,0.12); border-color: #3A3530; color: #D4C4B0; } /* Inline success-note (ponuda vožnje/prenoćišta) — tamno-zeleni tekst → svijetlo-zeleni. */ body.dark-mode .gp-main .gp-ok-note { color: #9cc19e !important; background: rgba(110,129,112,0.18) !important; } /* ── #788: burger/ladica + chat-FAB stilovi premješteni ovamo iz (stajali su nakon