/* portal-detail.css — owned by P3 (news article), P7 (event detail) and P4 * (legal pages, own section below). Moved out of portal.css (P1) 2026-09-19 * unchanged: relocated only. */ /* News/legal article column. Ported wholesale from the source product's * portal_node_article_body default branch (internal/ui/news_templates/ * portal.tmpl:281-392): article.pt-2 holding a meta row (mb-4, 11px/500/ * uppercase/.18em), h1.text-3xl.md:text-[3.1rem].font-bold.leading-none * .tracking-tight, the optional lead p.mt-5.text-lg.leading-8, the primary * image (mt-6.block.w-full.h-auto.rounded-[13px].bg-black/20) and the body * wrapper div.mt-6.space-y-4.text-base.leading-8 that sets the article's * base type scale. The column is not capped here: the page frame (P1) owns * the article column width (876px beside the rail on prod). */ .editorial-detail { max-width: none; display: block; padding-top: .5rem; } .editorial-detail-meta { margin: 0 0 1rem; display: flex; flex-wrap: wrap; column-gap: .75rem; row-gap: .25rem; font-size: .6875rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; } .editorial-detail h1 { margin: 0; font-size: 1.875rem; font-weight: 700; line-height: 1; letter-spacing: -.025em; } .editorial-detail-summary { margin: 1.25rem 0 0; font-size: 1.125rem; line-height: 2; color: inherit; } .editorial-detail > picture, .editorial-detail > img { display: block; margin-top: 1.5rem; } .editorial-detail img { display: block; width: 100%; height: auto; border-radius: var(--portal-radius); background: var(--portal-surface); } .editorial-detail-body { margin-top: 1.5rem; font-size: 1rem; line-height: 2; } .editorial-detail-body > * + * { margin-top: 1rem; } .editorial-detail p, .editorial-detail li { overflow-wrap: anywhere; } .editorial-detail a { color: var(--portal-accent); text-decoration: underline; } /* div.mt-8.mb-8.border-t.border-white/10.pt-4.text-sm.font-medium + the "Zdroj:" span and a.font-semibold.text-highlight.underline .decoration-highlight/40.underline-offset-4. The hairline stays the literal white/10: the light theme's border repaint list (frontend/src/index.css:380-386) does not include this line, so prod renders the same literal on zasah.online. */ /* Source line: prod's `mt-8 mb-8 border-t border-white/10 pt-4 text-sm font-medium`. text-sm is 14px over an absolute 1.25rem line box (20px), not the page's 1.5 ratio (21px, style-diff zo-p3-source/-source-action 2026-09-20), and the hairline colour is set on all four sides like the utility does, so the zero-width edges never report the page token. */ .editorial-detail-source { margin: 2rem 0; padding-top: 1rem; border-color: rgba(255, 255, 255, .1); border-top-width: 1px; font-size: .875rem; line-height: 1.25rem; font-weight: 500; } .editorial-detail-source span { margin-right: .5rem; } .editorial-detail-source a { font-weight: 700; color: var(--portal-accent); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--portal-accent) 40%, transparent); text-underline-offset: 4px; } .editorial-detail-source a:hover { text-decoration-color: var(--portal-accent); } @media (width >= 48rem) { .editorial-detail h1 { font-size: 3.1rem; } } .portal-info-box { max-width: 48rem; padding: 1.1rem 1.25rem; border-radius: var(--portal-radius); background: var(--portal-surface-alt); border: 1px solid var(--portal-border); display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; } .portal-info-box h2 { font-size: .95rem; font-weight: 700; } .portal-info-box-logo { flex: 0 0 auto; width: 7rem; max-height: 3.5rem; object-fit: contain; } .portal-info-box-body { flex: 1 1 12rem; min-width: 0; } [data-portal-variant="portal_aside"] .portal-info-box { max-width: none; } [data-portal-variant="portal_aside"] .portal-info-box-logo { width: 5.5rem; } [data-portal-node="map"] { display: flex; flex-direction: column; gap: 1.5rem; } [data-portal-node="map"] h3 { font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; } [data-portal-node="map"] p { font-size: .95rem; } /* Venue map (fix round 4, 2026-09-20). Tile, marker, address label, window, * panel, header and close button are prod's event-detail map classes resolved * through twdict (prod's radial-gradient/glow utilities never compiled, so * they are not here); the preview iframe under the marker is the owner's * addition: the real map, not prod's placeholder. */ [data-portal-node="map"] h3 { font-weight: 700; } .portal-map-tile { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--portal-radius); border: 1px solid color-mix(in oklab, #fff 5%, transparent); background: var(--portal-surface); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } .portal-map-preview { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; } .portal-map-veil { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; background: color-mix(in oklab, var(--portal-accent) 5%, transparent); transition: background-color .15s cubic-bezier(.4, 0, .2, 1); } .portal-map-tile:hover .portal-map-veil { background: transparent; } .portal-map-marker { display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 999px; border: 4px solid #000; background: var(--portal-accent); color: #000; transition: scale .15s cubic-bezier(.4, 0, .2, 1); } .portal-map-marker svg { width: 1.5rem; height: 1.5rem; } .portal-map-tile:hover .portal-map-marker { scale: 1.1; } .portal-map-address { position: absolute; inset-inline: 1rem; bottom: 1rem; margin: 0; border-radius: calc(var(--portal-radius) + 3px); background: rgba(0, 0, 0, .7); padding: .75rem 1rem; font-size: .75rem !important; line-height: 1.375; font-weight: 700; color: #fff; backdrop-filter: blur(12px); pointer-events: none; } .portal-map-open { position: absolute; inset: 0; z-index: 10; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: var(--portal-radius); } .portal-map-open:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--portal-bg), 0 0 0 4px var(--portal-accent); } .portal-map-window { position: fixed; inset: 0; z-index: 100; padding: 1rem; background: rgba(0, 0, 0, .75); backdrop-filter: blur(8px); } .portal-map-window[hidden] { display: none; } @media (min-width: 768px) { .portal-map-window { padding: 2rem; } } .portal-map-backdrop { position: absolute; inset: 0; } .portal-map-panel { position: absolute; left: 50%; top: 50%; width: min(92vw, 1100px); height: 76vh; transform: translate(-50%, -50%); display: flex; resize: both; overflow: hidden; min-height: 360px; min-width: 320px; max-height: 92vh; max-width: 96vw; border-radius: calc(var(--portal-radius) + 7px); border: 1px solid color-mix(in oklab, #fff 10%, transparent); background: var(--portal-surface); } .portal-map-head { position: absolute; inset-inline: 0; top: 0; z-index: 20; display: flex; height: 3.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1rem; cursor: move; user-select: none; border-bottom: 1px solid color-mix(in oklab, #fff 10%, transparent); background: rgba(0, 0, 0, .8); backdrop-filter: blur(24px); color: #fff; } .portal-map-head-text { min-width: 0; flex: 1; } .portal-map-title { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .75rem; line-height: 1.333; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--portal-accent); } .portal-map-subtitle { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px !important; font-weight: 700; color: rgba(255, 255, 255, .75); } .portal-map-external, .portal-map-close { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 999px; border: 1px solid color-mix(in oklab, #fff 10%, transparent); background: color-mix(in oklab, #fff 5%, transparent); color: #fff; cursor: pointer; transition: background-color .15s, color .15s; } .portal-map-external:hover, .portal-map-close:hover { background: var(--portal-accent); color: #000; } .portal-map-frame { width: 100%; height: 100%; padding-top: 3.5rem; border: 0; background: var(--portal-surface-alt); } @media (max-width: 767.98px) { .portal-map-window { padding: .5rem; } .portal-map-panel { inset: .5rem; width: auto; height: auto; min-width: 0; min-height: 0; max-width: none; max-height: none; transform: none; resize: none; } .portal-map-head { cursor: default; } } .portal-info-box-action { display: inline-flex; align-items: center; gap: .5rem; line-height: 1.333; padding: .55rem 1.1rem; border-radius: 999px; background: var(--portal-accent); color: var(--portal-accent-ink); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .portal-info-box-action:hover { color: var(--portal-accent-ink); opacity: .9; } .portal-gallery-title { font-size: .95rem; letter-spacing: .2em; text-transform: uppercase; color: var(--portal-muted); margin-bottom: 1rem; } .portal-gallery-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: .75rem; } .portal-gallery-item { margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: calc(var(--portal-radius) - 4px); overflow: hidden; aspect-ratio: 4 / 3; } .portal-gallery-item img { width: 100%; height: 100%; object-fit: cover; } .portal-gallery-lightbox[hidden] { display: none; } .portal-gallery-lightbox { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; } .portal-gallery-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.88); } .portal-gallery-stage { position: relative; max-width: 92vw; max-height: 88vh; } .portal-gallery-stage img { max-height: 82vh; width: auto; border-radius: 8px; } .portal-gallery-close, .portal-gallery-arrow { position: absolute; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 2rem; width: 2.75rem; height: 2.75rem; border-radius: 999px; cursor: pointer; } .portal-gallery-close { top: .5rem; right: .5rem; } .portal-gallery-arrow--prev { left: .5rem; top: 50%; } .portal-gallery-arrow--next { right: .5rem; top: 50%; } .portal-gallery-caption { color: #fff; display: flex; justify-content: space-between; gap: 1rem; padding-top: .5rem; font-size: .85rem; } /* P7 (event detail): the .portal-event-hero-* classes style the event * branch of the article body (Node.Variant "event_detail", set by * compose_detail.go's detail() only for PortalPublicRouteKindEventDetail; * see portal_bricks.tmpl's portal_node_article_body override) plus the two * event-only info box variants of the side column (event_calendar_export, * event_sponsor). Colours resolved against hasicskysport.sk's compiled * prod-index.css via twdict.py (design-port/tools/legacy-class-css.md has * the same values pre-resolved), source-product CSS vars mapped to * --portal-* tokens per design-port/PLAN.md §3; * the neon glow box-shadow is reproduced with color-mix() from * --portal-accent since the design has no separate glow token (twdict.py's * selector splitter cannot key rgba(...) arbitrary-value classes - confirmed * by grepping their hex output straight from prod-index.css instead of * trusting its "unknown" verdict for those three classes). The source * product's own "text-white"/"text-black" utilities are re-pointed at * --portal-text/--portal-accent-ink so the hero also reads correctly under * a future light-themed event portal * (zasah.online carries no event pages to confirm this against on prod). */ /* Prod's hero is the page-wide block above the two columns and spaces its * parts with its own margins (mb-10 under the image, mb-8 under the facts * row and the title, mb-12 under the accent rule), not with a flex gap, so * they are copied as margins here; the block is not width-capped either - * prod runs it across the full 80rem content box. */ .portal-event-hero { max-width: none; display: block; } .portal-event-hero-media { position: relative; width: 100%; overflow: hidden; margin-bottom: 2.5rem; border-radius: var(--portal-radius); border: 1px solid var(--portal-border); background: var(--portal-surface); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } .portal-event-hero-media img { display: block; width: 100%; height: auto; } .portal-event-hero-media::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 6rem; background: linear-gradient(to top, var(--portal-bg), transparent); pointer-events: none; } /* The country badge over the hero image (prod: absolute top-6 right-6, the * same black/70 chip the event cards carry, drawn by the shared * portal_country_flag template). It stays the literal black/70 + white/10 * of prod: the chip always sits over the photo, never over the page. */ .portal-event-hero-flag { position: absolute; top: 1.5rem; right: 1.5rem; display: inline-flex; align-items: center; justify-content: center; height: 3.5rem; min-width: 3.5rem; padding-inline: .75rem; border-radius: var(--portal-radius); background: rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); backdrop-filter: blur(24px); font-size: 1.875rem; line-height: 1; } .portal-event-facts { display: flex; flex-direction: column; column-gap: 2.5rem; row-gap: 1.5rem; margin-bottom: 2rem; } @media (width >= 48rem) { .portal-event-facts { flex-direction: row; align-items: center; } } .portal-event-fact { display: flex; align-items: center; gap: .75rem; } .portal-event-fact-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: var(--portal-radius); background: color-mix(in srgb, var(--portal-accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--portal-accent) 20%, transparent); color: var(--portal-accent); } .portal-event-fact-icon svg { width: 1.25rem; height: 1.25rem; } .portal-event-fact-label { display: block; font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2em; } .portal-event-fact-value { display: block; font-size: 1rem; font-weight: 700; color: var(--portal-text); } .portal-event-source-cta { transition: transform .15s cubic-bezier(.4, 0, .2, 1); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; line-height: 1.333; width: 100%; padding: .75rem 1.5rem; border-radius: var(--portal-radius); background: var(--portal-accent); color: var(--portal-accent-ink); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; box-shadow: 0 0 20px color-mix(in srgb, var(--portal-accent) 30%, transparent); } @media (width >= 48rem) { .portal-event-source-cta { width: auto; margin-inline-start: auto; justify-content: flex-start; } } .portal-event-source-cta svg { width: 1rem; height: 1rem; flex: none; } .portal-event-source-cta:hover { color: var(--portal-accent-ink); transform: scale(1.05); } .portal-event-source-cta:active { transform: scale(.95); } .portal-event-hero-title { margin: 0 0 2rem; font-size: 1.5rem; font-weight: 700; line-height: 1; letter-spacing: -.05em; text-transform: uppercase; color: var(--portal-text); } @media (width >= 48rem) { .portal-event-hero-title { font-size: 3rem; } } .portal-event-hero-rule { height: 4px; width: 6rem; margin-bottom: 3rem; background: var(--portal-accent); box-shadow: 0 0 20px color-mix(in srgb, var(--portal-accent) 50%, transparent); } /* The body block of the main column (brick variant "event_detail_body"): * prod's heading with the hairline running from it to the column edge * (h2.text-xs/.4em/text-highlight-60 + div.h-px.flex-1.bg-white/5) over the * copy (text-text-high/90, 16px/md:18px, leading-relaxed, font-medium, * whitespace-pre-wrap), the two stacked at space-y-6. */ .portal-event-body { display: flex; flex-direction: column; gap: 1.5rem; } .portal-event-body-title { display: flex; align-items: center; gap: 1rem; margin: 0; font-size: .75rem; font-weight: 700; line-height: 1.333; text-transform: uppercase; letter-spacing: .4em; color: color-mix(in srgb, var(--portal-accent) 60%, transparent); } .portal-event-body-title-rule { height: 1px; flex: 1; background: color-mix(in oklab, #fff 5%, transparent); } .portal-event-body-text { font-size: 1rem; line-height: 1.625; font-weight: 500; white-space: pre-wrap; } @media (width >= 48rem) { .portal-event-body-text { font-size: 1.125rem; } } .portal-event-body-text :where(p, ul, ol) { overflow-wrap: anywhere; } .portal-event-body-text a { color: var(--portal-accent); text-decoration: underline; } [data-portal-variant="event_calendar_export"] .portal-info-box { padding: 0; border: 0; background: none; justify-content: center; } [data-portal-variant="event_calendar_export"] .portal-info-box-action { width: 100%; justify-content: center; padding: .75rem 1.5rem; border-radius: var(--portal-radius); border: 1px solid color-mix(in srgb, var(--portal-accent) 30%, transparent); font-size: .75rem; box-shadow: 0 0 20px color-mix(in srgb, var(--portal-accent) 30%, transparent); transition: transform .15s cubic-bezier(.4, 0, .2, 1); } [data-portal-variant="event_calendar_export"] .portal-info-box-action:hover { opacity: 1; transform: scale(1.02); } [data-portal-variant="event_calendar_export"] .portal-info-box-action:active { transform: scale(.95); } .portal-info-box-link { color: inherit; text-decoration: none; transition: border-color .15s cubic-bezier(.4, 0, .2, 1); } .portal-info-box-link:hover { color: inherit; border-color: var(--portal-border-strong, var(--portal-border)); } [data-portal-variant="event_sponsor"] .portal-info-box { display: block; overflow: hidden; padding: 1.5rem; border-radius: var(--portal-radius); border-color: var(--portal-border); background: var(--portal-bg); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } [data-portal-variant="event_sponsor"] .portal-info-box-logo { width: 100%; max-height: none; aspect-ratio: 1; padding: 1.5rem; border-radius: calc(var(--portal-radius) - 2px); background: var(--portal-bg); object-fit: contain; } [data-portal-variant="event_sponsor"] .portal-info-box-body { margin-top: 1.25rem; } [data-portal-variant="event_sponsor"] .portal-info-box h2 { font-size: .75rem; letter-spacing: .3em; color: var(--portal-accent); } [data-portal-variant="event_sponsor"] .portal-info-box p { margin-top: .5rem; font-size: .875rem; font-weight: 500; line-height: 1.625; } /* Registration box (prod's last side-rail block, cta_row * event_registration): a bordered surface card holding the heading with its * pulsing accent dot, the note, and one full-width source button. The dot's * pulse is Tailwind's own animate-pulse (opacity 1 -> .5, 2s, cubic-bezier * (.4,0,.6,1), infinite), the only animation on this page. */ [data-portal-variant="event_registration"] .portal-info-box { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 1.5rem; padding: 2rem; border-radius: var(--portal-radius); border: 1px solid color-mix(in oklab, #fff 5%, transparent); background: var(--portal-surface); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25); } .portal-registration-title { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: .75rem; font-weight: 700; line-height: 1.333; text-transform: uppercase; letter-spacing: .3em; color: var(--portal-accent); } .portal-registration-pulse { flex: none; width: .375rem; height: .375rem; border-radius: 999px; background: var(--portal-accent); animation: portal-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; } @keyframes portal-pulse { 50% { opacity: .5; } } @media (prefers-reduced-motion: reduce) { .portal-registration-pulse { animation: none; } } .portal-registration-note { margin: 0; font-size: .875rem; line-height: 1.625; } .portal-registration-actions { display: flex; flex-direction: column; gap: .75rem; } [data-portal-variant="event_registration"] .portal-info-box-action { width: 100%; justify-content: center; padding: .75rem 1.5rem; border-radius: var(--portal-radius); font-size: .75rem; letter-spacing: .1em; box-shadow: 0 0 20px color-mix(in srgb, var(--portal-accent) 30%, transparent); transition: transform .15s cubic-bezier(.4, 0, .2, 1); } [data-portal-variant="event_registration"] .portal-info-box-action:hover { opacity: 1; transform: scale(1.05); } [data-portal-variant="event_registration"] .portal-info-box-action:active { transform: scale(.95); } /* Legal pages (privacy, cookies). compose_detail.go's legal() renders the * store's stored Site.Legal.HTML through the same default branch of * portal_node_article_body as a news article, wrapped by the root stack's * [data-portal-variant="portal_news_legal"]. Ported wholesale from the * source product's internal/ui/news_legal.go markup plus its * .news-legal-* rules (frontend/src/index.css:784-905): the shell centres a * 52rem box with its own 1.5rem inline padding, the prose wrapper carries * the child spacing, and the cards/notes/buttons are copied value for * value with the colour vars mapped per design-port/PLAN.md §3 * (--text-med→--portal-muted, --text-high→--portal-text, * --text-low→--portal-subtle, --border→--portal-border, * --bg-level-1→--portal-surface, --highlight→--portal-accent, the literal * button ink →--portal-accent-ink). The source's `.news-legal-prose h1` * rule is dead on the public page (the h1 sits outside that wrapper in its * markup too) and is therefore not ported; the article h1 above applies. * `border-color:#dc262633` (danger card) stays literal: the source never * routes it through a var either, so it renders identically on both hosts. * The shell here caps the CONTENT width (52rem minus the source's own * 1.5rem inline padding) instead of repeating that padding, because the * portal page frame (P1) already supplies the page gutter this block sits * in; repeating it would double the gutter on a phone. */ [data-portal-variant="portal_news_legal"] { display: block; width: min(100%, 49rem); margin-inline: auto; } [data-portal-variant="portal_news_legal"] .portal-legal { color: var(--portal-muted); } [data-portal-variant="portal_news_legal"] .portal-legal > * + * { margin-top: 1.5rem; } [data-portal-variant="portal_news_legal"] .portal-legal h2, [data-portal-variant="portal_news_legal"] .portal-legal h3 { color: var(--portal-text); font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; } [data-portal-variant="portal_news_legal"] .portal-legal h2 { font-size: 1.2rem; line-height: 1.2; margin-top: 3rem; letter-spacing: .14em; } [data-portal-variant="portal_news_legal"] .portal-legal h3 { font-size: 1rem; line-height: 1.3; } [data-portal-variant="portal_news_legal"] .portal-legal p, [data-portal-variant="portal_news_legal"] .portal-legal li { font-size: 1rem; line-height: 1.9; } [data-portal-variant="portal_news_legal"] .portal-legal ul { display: grid; gap: .9rem; padding-left: 1.25rem; list-style: disc; } .portal-legal-grid, .portal-legal-actions { display: grid; gap: 1rem; } @media (width >= 48rem) { .portal-legal-grid--two, .portal-legal-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .portal-legal-card { border: 1px solid var(--portal-border); background: var(--portal-surface); border-radius: 24px; padding: 1.25rem; } .portal-legal-card--danger { border-color: rgba(220, 38, 38, .2); } .portal-legal-note { color: var(--portal-subtle); font-size: .85rem; font-weight: 600; } .portal-legal-button { display: inline-flex; width: fit-content; align-items: center; justify-content: center; border-radius: 16px; background: var(--portal-accent); color: var(--portal-accent-ink); font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .85rem 1.35rem; transition: opacity 180ms ease, transform 180ms ease; } .portal-legal-button:hover { opacity: .92; transform: translateY(-1px); } /* P3 (news article): the opt-in Facebook video embed inside a media_block * brick (portal_bricks.tmpl's portal_media_block_content override, video * Mode "opt_in_embed"). Source = the legacy .news-facebook-video-* rules, * a theme-scoped inline