/* ============================================================ Musica Viva — site styles (shared by ALL pages) ------------------------------------------------------------ Tweak the values here to change the look: - card width .section-card (max-width:920px) - about logo size .logo-large img (height:36pt) - top bar colour #navbar (background — blue #274e82) - fully-shrunk top bar #navbar.nav-shrunk (background + sizes) - navbar logo #main-logo (the white logo, straight on the blue bar) ============================================================ */ /* ---------- FONTS (local files in assets/fonts/) ---------- */ /* NOTE: this file lives in assets/css/, so font paths are relative to that folder (../fonts/…) */ @font-face{font-family:Warnock;src:url(../fonts/warnock.otf);font-style:normal;font-display:swap} @font-face{font-family:'Work Sans';src:url(../fonts/WorkSans-VariableFont_wght.ttf);font-style:normal;font-display:swap} @font-face{font-family:'Work Sans';src:url(../fonts/WorkSans-Italic-VariableFont_wght.ttf);font-style:italic;font-display:swap} /* ---------- BASE ---------- */ body,html{width:100vw;height:100vh;background-color:#000;padding:0;margin:0;font-family:'Work Sans',Verdana,Roboto,sans-serif;scroll-behavior:smooth!important} h1,h2,h3,h4,h5,h6{font-family:"Work Sans"} /* ---------- TOP BAR (NAVBAR) — shrinks gradually on scroll (see assets/js/site.js) ---------- */ /* TOP BAR — BLUE #274e82 (rgb(39,78,130)), the colour the logo was made with (see the official logo). Fades from solid to translucent as you scroll (see the lerp in assets/js/site.js). */ #navbar{position:fixed;top:0;left:0;right:0;z-index:10;padding:10px 20px;background:rgba(39,78,130,.98);color:#fff;transition:background .3s ease} #nav-row{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2} #nav-brand{display:flex;align-items:center;text-decoration:none;color:#fff} #nav-right{display:flex;align-items:center} /* ABOUT LINK ("O NAS") - sits in the bar, left of the language switch (see the #nav-right block in index.html) */ #nav-about{padding:8px 12px;margin-right:4px;font-weight:600;font-size:14px;letter-spacing:.08em;text-decoration:none;color:#fff;transition:opacity .2s ease} #nav-about:hover{opacity:.7} #lang-switcher{padding:8px 12px;margin-right:4px;font-weight:600;font-size:14px;letter-spacing:.08em;text-decoration:none;color:#fff} /* BURGER BUTTON — three white lines, NO box around them; they morph into an X while the menu is open (the .menu-open class is set by Alpine on #navbar, see the HTML). Sizes: tweak here. */ #nav-burger{cursor:pointer;padding:12px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;transition:opacity .2s ease,transform .15s ease} #nav-burger:hover{opacity:.7} .burger-line{display:block;width:24px;height:3px;border-radius:3px;background:#fff;transition:transform .3s ease,opacity .22s ease} #navbar.menu-open .burger-line:nth-child(1){transform:translateY(9px) rotate(45deg)} #navbar.menu-open .burger-line:nth-child(2){opacity:0;transform:scaleX(.3)} #navbar.menu-open .burger-line:nth-child(3){transform:translateY(-9px) rotate(-45deg)} #nav-backdrop{position:fixed;top:0;bottom:0;left:0;right:0;z-index:1;background:rgba(0,0,0,.35)} /* MENU DROPDOWN — hangs straight off the bar (top:100%), EXACTLY the bar's colour (rgba(39,78,130,.98), the same value the bar itself uses — see the #navbar rule), square top corners (so it looks glued to the bar) and both bottom corners rounded. While the bar fades on scroll, site.js keeps the menu's background in step with it (the #nav-menu line in assets/js/site.js). */ #nav-menu{position:absolute;top:100%;right:20px;z-index:3;min-width:240px;padding:8px 0;background:rgba(39,78,130,.98);border-radius:0 0 12px 12px;box-shadow:0 14px 30px rgba(0,0,0,.45)} #nav-menu a{display:flex;align-items:center;gap:12px;padding:11px 22px;color:#fff;text-decoration:none;font-size:14px;font-weight:500;letter-spacing:.05em;white-space:nowrap} #nav-menu a:hover{background:rgba(255,255,255,.12)} #nav-menu .bi{font-size:17px;line-height:1} .nav-menu-sep{height:1px;margin:7px 0;background:rgba(255,255,255,.18)} /* NAVBAR LOGO — the white SVG (assets/logos/logo-white.svg) straight on the blue bar: no disc, no background. */ #main-logo{padding:10px 12px!important;height:100pt;width:100pt} @media(max-width:575.98px){ #main-logo{height:60pt;width:60pt} #nav-about,#lang-switcher{padding:8px 8px;font-size:13px} /* compact bar on phones */ } #main-logo img{height:100%;width:100%;object-fit:contain;display:block} .navbar-brand-text{font-size:26px;font-weight:500;letter-spacing:.06em;color:#fff;margin-left:14px;white-space:nowrap} /* The fully-shrunk look (reached at the bottom of the scroll range in site.js). The background fades from solid blue rgba(39,78,130,.98) to translucent rgba(39,78,130,.55) — lower the .55 for a more transparent bar. */ #navbar.nav-shrunk{padding:4px 16px;background:rgba(39,78,130,.55)} #navbar.nav-shrunk #main-logo{height:54pt;width:54pt} #navbar.nav-shrunk .navbar-brand-text{font-size:15px} #navbar.nav-shrunk #nav-burger{transform:scale(.77)} /* matches the TO.burger scale in assets/js/site.js */ #navbar.nav-shrunk #nav-menu{background:rgba(39,78,130,.55)} /* matches the faded bar */ /* ---------- SLIDESHOW (full-screen background photos) ---------- Each slide layer (.slide-layer) holds one (the photo N.jpg); the two layers cross-fade (Alpine, in the HTML pages). */ #slideshow{position:fixed!important;top:0;left:0;right:0;z-index:0} #slideshow>picture,#slideshow>.slide-layer{width:100%;height:100%} #slideshow img{position:relative!important;top:0;left:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center} #content{position:relative!important;width:100%} #window{position:relative;z-index:1} #slideshow-captions{display:flex;position:absolute;left:50%;transform:translateX(-50%);height:100%;z-index:1} #slideshow-captions>div{display:inline-block;align-self:flex-end;padding-bottom:25px;color:#fff;text-align:center;font-size:large;text-shadow:1px 2px 4px rgba(0,0,0,.75)} #slideshow-captions h3{font-weight:700} /* BACK BUTTON — the small X in the top-right corner of the presentation pages (goes back to the main site) */ #pres-close{position:fixed;top:14px;right:14px;z-index:30;width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.35);color:#fff;font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:background .2s ease} #pres-close:hover{background:rgba(0,0,0,.6)} #pres-close:active{background:rgba(0,0,0,.75)} #pres-close svg{display:block} @media(max-width:575.98px){ #pres-close{top:8px;right:8px} } /* PRESENTATION ARROWS — the prev/next photo buttons (only on the *-presentation.html pages). Big, round, half-dark circles at the left and right edge; bigger hit area on phones. */ .slide-arrow{position:fixed;top:50%;transform:translateY(-50%);z-index:20;width:64px;height:64px;border-radius:50%;border:0;background:rgba(0,0,0,.35);color:#fff;font-size:28px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease} .slide-arrow:hover{background:rgba(0,0,0,.6)} .slide-arrow:active{background:rgba(0,0,0,.75)} .slide-arrow svg{display:block} .slide-arrow-prev{left:14px} .slide-arrow-next{right:14px} @media(max-width:575.98px){ .slide-arrow{width:52px;height:52px;font-size:22px} .slide-arrow-prev{left:8px} .slide-arrow-next{right:8px} } /* ---------- VIDEOS SECTION (the 3 newest from the YouTube channel) ---------- Logic: assets/js/videos.js · data: videos.php · channel: set in the admin area */ .videos-col{margin-bottom:0} .video-card{cursor:pointer} .video-thumb{position:relative;width:100%;aspect-ratio:16/9;border-radius:.75rem;overflow:hidden;background:#111} .video-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease} .video-card:hover .video-thumb img{transform:scale(1.04)} .video-play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;transition:background .2s ease} .video-card:hover .video-play{background:rgba(0,0,0,.75)} .video-frame{width:100%;height:100%;border:0;display:block} .video-meta{padding:.6rem .25rem 0} .video-title{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .videos-more-link{font-weight:600;color:#000;text-decoration:none;border-bottom:2px solid #000} .videos-more-link:hover{opacity:.7} /* ---------- EVENTS SECTION (the "Dogodki" box — the FIRST box on the site) ---------- Logic: assets/js/events.js · data: content/events.json · edit: the admin area ("Dogodki") The box is hidden while the list is empty — then this CSS simply has nothing to show. */ #events{scroll-margin-top:110px} .events-list{max-width:680px;margin:0 auto} .event-row{display:flex;gap:18px;padding:16px 0;border-bottom:1px solid rgba(0,0,0,.12)} .event-row:first-child{padding-top:6px} .event-row:last-child{border-bottom:0;padding-bottom:4px} .event-date{flex:0 0 118px;font-weight:700;color:#274e82;font-size:15px;line-height:1.3;padding-top:2px} .event-body{flex:1;min-width:0} .event-title{margin:0 0 2px;font-size:18px;font-weight:700;color:#000} .event-place{margin:0 0 4px;font-style:italic;opacity:.75} .event-desc{margin:0 0 6px;opacity:.85} .event-link{font-weight:600;color:#274e82;text-decoration:none;border-bottom:2px solid #274e82} .event-link:hover{opacity:.7} @media (max-width:576px){ .event-row{flex-direction:column;gap:4px} .event-date{flex:none} } /* ---------- SPONSOR STRIP (bottom dark band) ---------- */ #sponsors{z-index:1;margin:-48px auto;padding-top:64px;width:100%;background:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 50%)} #sponsors>div{display:flex;width:100%;max-width:620px;margin:auto;justify-content:space-around} #sponsors img{max-width:100%;max-height:48pt;margin:auto;padding:12px 8px} /* ---------- CONTENT CARDS + CONTACT + ABOUT ---------- */ .contact-form{max-width:560px} #band-napis{font-size:15px} .section-card{position:relative;max-width:920px;z-index:2;margin-left:auto;margin-right:auto;margin-bottom:24px;padding:32px;background-color:rgba(255,255,255,.92);color:#000;border-radius:16px} .logo-large img{height:36pt;width:auto} #about .about-text{text-align:left} #about .about-text p{margin-top:0;margin-bottom:.6rem} #videos,#about,#contact{scroll-margin-top:110px} /* ---------- MISC ---------- */ [x-cloak]{display:none!important} @keyframes fadeIn{ from{opacity:0} to{opacity:1} } .fade-in{animation:fadeIn 1.2s ease both} .heading{letter-spacing:.1em} .opacity-60{opacity:.6}