/* ============================================================ ROUTE 77 · zine design system · v1 Distilled from lab/manual.html — the manual is the law. ============================================================ */ :root { /* papiri */ --paper-cream:#efe6d2; --paper-cream2:#e7dcc4; --paper-yellow:#f0d78a; --paper-white:#fbf7ec; --paper-kraft:#cfa96f; /* mastila */ --ink:#191512; --red:#d92b1c; --blue:#1d4e9e; --green:#2c6e3f; /* fontovi */ --f-display:"Archivo Black", "Arial Black", sans-serif; --f-type:"Courier Prime", "Courier New", monospace; --f-hand:"Caveat", cursive; --wrap:1050px; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper-cream); color:var(--ink); font-family:var(--f-type); font-size:1rem; line-height:1.55; overflow-x:hidden; } img { max-width:100%; display:block; } a { color:inherit; } .wrap { width:min(var(--wrap), 100% - 2.2rem); margin-inline:auto; } /* zrno papira */ body::after { content:""; position:fixed; inset:0; pointer-events:none; opacity:.08; z-index:98; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } /* papiri po strani: itd. */ body.page--yellow { background:var(--paper-yellow); } body.page--dots { background-color:var(--paper-white); background-image:radial-gradient(rgba(25,21,18,.18) 1.1px, transparent 1.1px); background-size:14px 14px; } body.page--grid { background-color:var(--paper-white); background-image:linear-gradient(rgba(29,78,158,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(29,78,158,.13) 1px, transparent 1px); background-size:20px 20px; } h1, h2, h3 { font-family:var(--f-display); font-weight:400; text-transform:uppercase; line-height:.95; letter-spacing:-.01em; margin:0 0 .6em; } h2 { font-size:clamp(1.9rem, 6.5vw, 3rem); } h3 { font-size:clamp(1.2rem, 4vw, 1.6rem); } h2 em, h3 em { font-style:normal; color:var(--red); } p { margin:0 0 1em; } .hand { font-family:var(--f-hand); font-weight:700; color:var(--red); transform:rotate(-1.5deg); display:inline-block; font-size:1.3rem; line-height:1.15; } .spec { font-family:var(--f-type); font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; opacity:.72; } /* ---------- nav (funkcionalno = mirno) ---------- */ .nav { border-bottom:3px solid var(--ink); } .nav .wrap { display:flex; align-items:center; gap:1rem; padding:.7rem 0; flex-wrap:wrap; } .nav__logo { width:52px; mix-blend-mode:multiply; transform:rotate(-7deg); transition:transform .25s; } .nav__brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; margin-right:auto; } .nav__brand:hover .nav__logo { transform:rotate(0deg); } .nav__brand b { font-family:var(--f-display); text-transform:uppercase; font-size:1.25rem; letter-spacing:-.01em; } .nav a.lnk { font-family:var(--f-type); font-weight:700; text-transform:uppercase; letter-spacing:.12em; font-size:.85rem; text-decoration:none; padding-bottom:.1em; background:linear-gradient(transparent 60%, rgba(217,43,28,.35) 60% 92%, transparent 92%) no-repeat; background-size:0% 100%; transition:background-size .3s; } .nav a.lnk:hover, .nav a.lnk[aria-current] { background-size:100% 100%; } /* ---------- masthead (samo landing) ---------- */ .mast { padding:1.6rem 0 0; } .mast__row { display:flex; align-items:flex-end; gap:1.1rem; } .mast__logo { width:clamp(92px, 20vw, 150px); flex:none; mix-blend-mode:multiply; opacity:.94; transform:rotate(-7deg); } .mast h1 { font-size:clamp(3.6rem, 16vw, 9rem); line-height:.78; margin:0; } .mast h1 span { color:var(--red); } .mast__rule { border-block:3px solid var(--ink); margin-top:1.1rem; padding:.45rem 0; display:flex; justify-content:space-between; gap:.6rem; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.18em; font-size:.68rem; font-weight:700; } /* ---------- sekcije ---------- */ .section { padding:clamp(2.4rem, 7vw, 4.5rem) 0; } .section--rule { border-top:3px solid var(--ink); } .section--tinted { background:var(--paper-cream2); border-block:3px solid var(--ink); } /* ---------- plakat (gig) ---------- */ .wall { display:grid; gap:2rem; } @media (min-width:760px) { .wall { grid-template-columns:repeat(3,1fr); align-items:start; } } .gig { position:relative; text-decoration:none; display:block; background:var(--paper-white); border:1px solid #cbbfa6; box-shadow:0 10px 26px rgba(25,21,18,.22); padding:.7rem .7rem 1rem; transition:transform .25s ease, box-shadow .25s ease; } .gig:nth-child(3n+1) { transform:rotate(-2.2deg); } .gig:nth-child(3n+2) { transform:rotate(1.6deg); } .gig:nth-child(3n) { transform:rotate(-1deg); } @media (min-width:760px) { .gig:nth-child(3n+2) { margin-top:1.1rem; } } .gig:hover { transform:rotate(0) scale(1.02); z-index:5; box-shadow:0 16px 34px rgba(25,21,18,.32); } .gig__img { display:block; position:relative; overflow:hidden; } .gig__img img { aspect-ratio:4/3; object-fit:cover; width:100%; } .gig__date { position:absolute; right:-8px; top:-10px; z-index:4; background:var(--ink); color:var(--paper-cream); font-family:var(--f-display); font-size:.95rem; text-transform:uppercase; padding:.35rem .6rem; transform:rotate(3deg); } .gig__band { font-family:var(--f-display); text-transform:uppercase; font-size:1.65rem; line-height:.95; margin:.65rem 0 .25rem; display:block; color:var(--ink); } .gig__meta { font-size:.76rem; text-transform:uppercase; letter-spacing:.12em; display:block; } .gig__cta { font-family:var(--f-hand); font-weight:700; color:var(--red); font-size:1.25rem; display:inline-block; margin-top:.2rem; } .gig--blue .gig__cta { color:var(--blue); } .gig--past { filter:none; } .gig--past .gig__img img { filter:grayscale(1) contrast(1.1); } /* rasprodato = isečak preko plakata */ .gig--sold { pointer-events:auto; } .gig--sold .gig__img img { filter:grayscale(.6) contrast(.95); } .soldclip { position:absolute; z-index:6; left:-6%; top:38%; width:112%; background:linear-gradient(160deg, #f4ecd6, #e8dcb8); transform:rotate(-5deg); padding:.5rem .9rem; box-shadow:0 6px 16px rgba(25,21,18,.3); clip-path:polygon(0% 12%, 3% 0%, 12% 6%, 22% 0%, 34% 8%, 46% 1%, 58% 7%, 70% 0%, 82% 6%, 93% 1%, 100% 10%, 100% 88%, 96% 100%, 85% 94%, 72% 100%, 60% 93%, 47% 100%, 34% 94%, 21% 100%, 9% 95%, 0% 100%); } .soldclip b { font-family:var(--f-display); text-transform:uppercase; color:var(--red); font-size:1.3rem; letter-spacing:.03em; display:block; } .soldclip small { font-family:var(--f-type); font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; } /* ---------- pričvršćivači ---------- */ .tape { position:absolute; top:-13px; left:50%; translate:-50% 0; width:92px; height:26px; background:rgba(214,199,166,.85); box-shadow:0 2px 5px rgba(0,0,0,.18); transform:rotate(-3deg); z-index:5; } .tape--corner { left:auto; right:-18px; top:-10px; translate:0 0; transform:rotate(40deg); width:74px; } .bandaid { position:absolute; top:-14px; left:50%; translate:-50% 0; transform:rotate(-8deg); z-index:5; width:104px; height:30px; background:#e8c39a; border-radius:15px; box-shadow:0 2px 5px rgba(0,0,0,.2); } .bandaid::before { content:""; position:absolute; inset:4px 34px; background:#d9ab7c; border-radius:4px; } .nail { position:absolute; top:-7px; left:50%; translate:-50% 0; z-index:5; width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #999, #3d3a36 70%); box-shadow:0 2px 4px rgba(0,0,0,.4); } .staple-l, .staple-r { position:absolute; top:-6px; width:26px; height:9px; border:2.5px solid #6c675f; border-bottom:0; z-index:5; } .staple-l { left:18%; transform:rotate(-2deg); } .staple-r { right:18%; transform:rotate(2deg); } /* ---------- fotke ---------- */ .photo { background:var(--paper-white); padding:.55rem .55rem 2rem; box-shadow:0 10px 24px rgba(25,21,18,.25); position:relative; } .photo img { aspect-ratio:4/3; object-fit:cover; width:100%; } .photo figcaption { font-family:var(--f-hand); font-weight:700; font-size:1.05rem; position:absolute; bottom:.3rem; left:.7rem; color:var(--ink); } .photo--bw img { filter:grayscale(1) contrast(1.15); } .photo--pola { padding:.55rem .55rem 2.6rem; } .photo--pola img { aspect-ratio:1/1.02; filter:sepia(.28) saturate(.82) contrast(.92) brightness(1.06); } .r-1{transform:rotate(-2.4deg);} .r1{transform:rotate(1.8deg);} .r-2{transform:rotate(-1.2deg);} .r2{transform:rotate(2.4deg);} /* ---------- isečak iz novina ---------- */ .clipping { background:linear-gradient(160deg, #f4ecd6, #eadfbe 70%, #e2d3a8); padding:1.3rem 1.2rem 1.5rem; position:relative; box-shadow:0 10px 26px rgba(25,21,18,.28); font-family:Georgia, "Times New Roman", serif; clip-path:polygon(0% 2%, 4% 0%, 9% 2%, 15% 0%, 22% 2%, 30% 1%, 38% 2%, 47% 0%, 55% 2%, 63% 0%, 71% 2%, 80% 1%, 88% 2%, 95% 0%, 100% 2%, 100% 98%, 96% 100%, 90% 98%, 83% 100%, 75% 97%, 66% 100%, 58% 98%, 49% 100%, 41% 97%, 33% 100%, 24% 98%, 16% 100%, 8% 97%, 3% 100%, 0% 98%); } .clipping .kick { font-size:.62rem; text-transform:uppercase; letter-spacing:.26em; border-bottom:1px solid rgba(25,21,18,.45); padding-bottom:.3rem; margin:0 0 .5rem; display:flex; justify-content:space-between; font-family:var(--f-type); } .clipping h2, .clipping h3 { font-size:1.5rem; margin:0 0 .6rem; } .clipping .cols { columns:2; column-gap:1rem; font-size:.78rem; line-height:1.5; text-align:justify; hyphens:auto; margin:0; } .clipping .cols::first-letter { font-size:1.6em; font-family:var(--f-display); } @media (max-width:560px) { .clipping .cols { columns:1; } } /* ---------- fleke ---------- */ .ring { position:absolute; border-radius:50%; pointer-events:none; z-index:2; } .ring--coffee { width:92px; height:88px; border:7px solid rgba(96,61,26,.30); filter:blur(.5px); transform:rotate(-6deg); } .ring--beer { width:74px; height:72px; border:6px solid rgba(196,140,32,.28); filter:blur(.6px); } /* ---------- dugmad / forme (akcija = mirno) ---------- */ .btn { display:inline-block; font-family:var(--f-display); text-transform:uppercase; text-decoration:none; background:var(--red); color:#fff; padding:.85rem 1.7rem; font-size:1rem; box-shadow:5px 6px 0 var(--ink); transform:rotate(-1deg); border:0; cursor:pointer; transition:transform .12s, box-shadow .12s; } .btn:hover { transform:rotate(-1deg) translate(2px,2px); box-shadow:3px 4px 0 var(--ink); } .btn:active { transform:rotate(-1deg) translate(5px,6px); box-shadow:0 0 0 var(--ink); } .btn--ghost { background:var(--paper-white); color:var(--ink); box-shadow:5px 6px 0 rgba(25,21,18,.35); outline:2px solid var(--ink); outline-offset:-2px; } .field { display:grid; gap:.3rem; margin-bottom:1rem; } .field label { font-size:.72rem; text-transform:uppercase; letter-spacing:.2em; font-weight:700; } .field input, .field select { font-family:var(--f-type); font-size:1.05rem; padding:.75rem .85rem; width:100%; background:var(--paper-white); border:2px solid var(--ink); border-radius:0; box-shadow:inset 2px 2px 0 rgba(25,21,18,.08); } .field input:focus, .field select:focus { outline:3px solid var(--red); outline-offset:-1px; } .check { display:flex; gap:.7rem; align-items:flex-start; margin:1.1rem 0; font-size:.9rem; } .check input { appearance:none; flex:none; width:22px; height:22px; margin-top:.1em; border:2px solid var(--ink); background:var(--paper-white); cursor:pointer; display:grid; place-items:center; } .check input::before { content:"\2715"; font-weight:900; font-size:.9rem; color:var(--red); opacity:0; transition:opacity .15s; } .check input:checked::before { opacity:1; } .check a { color:var(--red); } /* ---------- kupon ---------- */ .coupon { position:relative; border:3px dashed var(--ink); padding:1.8rem 1.4rem 1.6rem; background:var(--paper-white); } .coupon::before { content:"\2702"; position:absolute; top:-16px; left:26px; font-size:1.6rem; background:inherit; padding:0 .3rem; } /* ---------- pečati ---------- */ .stamp-round { width:110px; height:110px; border:4px double var(--ink); border-radius:50%; display:grid; place-content:center; text-align:center; flex:none; font-family:var(--f-hand); font-weight:700; font-size:1rem; text-transform:uppercase; line-height:1.1; transform:rotate(-10deg); opacity:.85; } .stamp-round--red { border-color:var(--red); color:var(--red); } .stamp-round--green { border-color:var(--green); color:var(--green); } @keyframes slam { 0%{opacity:0; transform:scale(2) rotate(-18deg);} 55%{opacity:1; transform:scale(.94) rotate(-9deg);} 75%{transform:scale(1.04) rotate(-11deg);} 100%{transform:scale(1) rotate(-10deg);} } .slam { animation:slam .45s cubic-bezier(.2,.8,.3,1.4) both; } /* ---------- kapacitet ---------- */ .capmeter .bar { border:2.5px solid var(--ink); height:20px; background:var(--paper-white); position:relative; } .capmeter .bar i { position:absolute; inset:2px; background:repeating-linear-gradient(-45deg, var(--red) 0 7px, #b91f12 7px 14px); width:0; transition:width .9s cubic-bezier(.2,.8,.2,1) .2s; } .capmeter .lbl { font-family:var(--f-hand); font-weight:700; font-size:1.15rem; margin-top:.3rem; color:var(--ink); } /* ---------- info / footer ---------- */ .foot { border-top:3px solid var(--ink); padding:2.4rem 0 4.5rem; } .foot .cols3 { display:grid; gap:1.8rem; } @media (min-width:760px) { .foot .cols3 { grid-template-columns:repeat(3,1fr); } } .foot h3 { font-size:1rem; margin-bottom:.5rem; } .foot table { border-collapse:collapse; font-size:.9rem; } .foot td { padding:.15rem .9rem .15rem 0; } .foot .open td { color:var(--red); font-weight:700; } .foot small { display:block; margin-top:2.2rem; text-align:center; text-transform:uppercase; letter-spacing:.18em; font-size:.65rem; } .foot .logo2 { width:74px; mix-blend-mode:multiply; transform:rotate(8deg); margin-top:.5rem; } /* ---------- mobilna gig traka ---------- */ .gigbar { position:fixed; left:0; right:0; bottom:0; z-index:80; background:var(--ink); color:var(--paper-cream); display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.5rem 1.1rem; transform:translateY(110%); transition:transform .4s cubic-bezier(.2,.8,.2,1); } body.gigbar-show .gigbar { transform:none; } .gigbar b { font-family:var(--f-display); text-transform:uppercase; font-size:.95rem; } .gigbar .spec { opacity:.8; color:var(--paper-cream); } .gigbar a { font-family:var(--f-hand); font-weight:700; font-size:1.25rem; color:var(--paper-yellow); text-decoration:none; white-space:nowrap; } @media (min-width:760px) { .gigbar { display:none; } } /* ---------- reveal (papirići padnu) ---------- */ .reveal { opacity:0; transform:translateY(26px); transition:opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); } .reveal.in { opacity:1; transform:none; } .reveal.in.r-1 { transform:rotate(-2.4deg); } .reveal.in.r1 { transform:rotate(1.8deg); } .reveal.in.r-2 { transform:rotate(-1.2deg); } .reveal.in.r2 { transform:rotate(2.4deg); } .reveal[data-delay="1"] { transition-delay:.1s; } .reveal[data-delay="2"] { transition-delay:.2s; } .reveal[data-delay="3"] { transition-delay:.3s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity:1 !important; transform:none !important; transition:none !important; } .slam { animation:none !important; } .capmeter .bar i { transition:none !important; } .gig, .btn { transition:none !important; } } /* ---------- masthead lockup (jedan logo, ne dva) ---------- */ .mast__lock { position:relative; display:inline-block; } .mast__lock h1 { margin:0; } .mast__stamp { position:absolute; right:-1.4em; bottom:-.2em; width:clamp(84px, 14vw, 128px); mix-blend-mode:multiply; opacity:.9; transform:rotate(-12deg); } @media (max-width:480px) { .mast__stamp { right:-.6em; } } /* ---------- cena = nalepnica ---------- */ .pricetag { position:absolute; left:-8px; bottom:.7rem; z-index:4; background:var(--paper-yellow); color:var(--ink); border:2px solid var(--ink); font-family:var(--f-display); font-size:1.25rem; line-height:1; padding:.4rem .65rem; transform:rotate(-4deg); box-shadow:0 3px 8px rgba(25,21,18,.3); } .pricetag small { font-size:.6em; letter-spacing:.06em; } .pricetag--free { font-family:var(--f-hand); font-weight:700; font-size:1.15rem; transform:rotate(-3deg); } .pricetag--big { position:static; display:inline-block; font-size:2rem; padding:.5rem .9rem; transform:rotate(-3deg); } /* ---------- youtube facade (učitava se tek na klik) ---------- */ .yt { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#111; } .yt img { width:100%; height:100%; object-fit:cover; aspect-ratio:auto; } .yt button { position:absolute; inset:0; margin:auto; width:72px; height:72px; border:0; border-radius:50%; cursor:pointer; background:var(--red); color:#fff; font-size:1.5rem; line-height:1; box-shadow:4px 5px 0 rgba(0,0,0,.55); transition:transform .12s, box-shadow .12s; display:grid; place-items:center; padding-left:6px; } .yt button:hover { transform:translate(2px,2px); box-shadow:2px 3px 0 rgba(0,0,0,.55); } .yt iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } /* ---------- mini galerija na svirci ---------- */ .minigal { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:1.1rem; } .minigal .photo { border:0; cursor:pointer; padding:.35rem .35rem 1.1rem; } .minigal .photo img { aspect-ratio:1/1; } .minigal .photo:hover { transform:rotate(0) scale(1.04); z-index:3; } .minigal .photo { transition:transform .2s ease; } /* ---------- lightbox (mrak u baru, fotka na svetlu) ---------- */ .lightbox { position:fixed; inset:0; z-index:200; background:rgba(15,12,10,.93); display:grid; place-items:center; padding:1.4rem; visibility:hidden; opacity:0; transition:opacity .25s, visibility 0s .25s; } .lightbox.open { visibility:visible; opacity:1; transition:opacity .25s; } .lightbox figure { margin:0; background:var(--paper-white); padding:.6rem .6rem 2.2rem; box-shadow:0 30px 80px rgba(0,0,0,.65); transform:rotate(-1.2deg); max-width:min(92vw, 900px); } .lightbox img { max-height:78vh; width:auto; max-width:100%; aspect-ratio:auto; object-fit:contain; } .lightbox__x, .lightbox__prev, .lightbox__next { position:absolute; width:46px; height:46px; cursor:pointer; background:var(--paper-white); border:2px solid var(--ink); color:var(--ink); font-family:var(--f-type); font-weight:700; font-size:1.2rem; display:grid; place-items:center; } .lightbox__x:hover, .lightbox__prev:hover, .lightbox__next:hover { background:var(--paper-yellow); } .lightbox__x { top:1rem; right:1rem; transform:rotate(3deg); } .lightbox__prev { left:.8rem; top:50%; translate:0 -50%; transform:rotate(-2deg); } .lightbox__next { right:.8rem; top:50%; translate:0 -50%; transform:rotate(2deg); } /* ---------- forma za rezervaciju (kupon) ---------- */ .seg { display:grid; grid-template-columns:1fr 1fr; border:2px solid var(--ink); margin-bottom:1.2rem; background:var(--paper-white); } .seg button { font-family:var(--f-type); font-weight:700; font-size:.95rem; letter-spacing:.12em; text-transform:uppercase; background:transparent; color:var(--ink); border:0; padding:.8rem .5rem; cursor:pointer; } .seg button[aria-pressed="true"] { background:var(--ink); color:var(--paper-cream); } .stepper { display:flex; align-items:center; gap:1rem; } .stepper button { width:52px; height:52px; border:2px solid var(--ink); background:var(--paper-white); font-size:1.5rem; cursor:pointer; font-family:var(--f-type); } .stepper button:hover { background:var(--paper-cream2); } .stepper output { font-family:var(--f-display); font-size:2rem; min-width:2ch; text-align:center; } .tables { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:.6rem; margin-bottom:.4rem; } .tables button { display:grid; gap:.1rem; text-align:left; background:var(--paper-white); border:2px solid var(--ink); padding:.65rem .75rem; cursor:pointer; font-family:var(--f-type); color:var(--ink); } .tables button b { font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; } .tables button small { opacity:.7; } .tables button[aria-pressed="true"] { background:var(--ink); color:var(--paper-cream); } .tables button[aria-pressed="true"] small { opacity:.85; } .tables button:disabled { opacity:.4; cursor:not-allowed; text-decoration:line-through; } .confirm { display:none; text-align:center; } #book.done form, #book.done .seg, #book.done .book-head { display:none; } #book.done .confirm { display:block; } [hidden] { display:none !important; } /* ---------- kalendar = list na ekseru (varijanta B) ---------- */ .calwall { display:grid; gap:2.4rem 2rem; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); align-items:start; } .calsheet { background:var(--paper-white); position:relative; max-width:560px; padding:2.2rem 1.1rem 1.6rem; box-shadow:0 14px 30px rgba(25,21,18,.3); } .calsheet .hole { position:absolute; top:.55rem; left:50%; translate:-50% 0; width:16px; height:16px; border-radius:50%; background:var(--paper-cream); box-shadow:inset 0 1px 3px rgba(0,0,0,.4); } .calsheet .nail2 { position:absolute; top:2px; left:50%; translate:-50% 0; width:11px; height:11px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #999, #3d3a36 70%); box-shadow:0 2px 4px rgba(0,0,0,.4); } .calsheet h3 { font-size:1.35rem; margin:0 0 .6rem; } .calsheet h3 em { font-style:normal; color:var(--red); } .calgrid { display:grid; grid-template-columns:repeat(7,1fr); } .calgrid .hd { font-family:var(--f-type); font-size:.58rem; text-transform:uppercase; letter-spacing:.1em; text-align:center; padding:.2rem 0; border-bottom:1.5px solid var(--ink); font-weight:700; } .calgrid .hd:last-child, .calgrid .d:nth-child(7n) { color:var(--red); } .calgrid .d { position:relative; aspect-ratio:1/1.05; font-family:var(--f-type); font-size:.78rem; padding:.15rem .3rem; border-bottom:1px solid rgba(29,78,158,.25); border-right:1px solid rgba(29,78,158,.25); display:block; color:inherit; text-decoration:none; } .calgrid .d:nth-child(7n+1) { border-left:1px solid rgba(29,78,158,.25); } .d--gig { color:var(--red); z-index:2; } .d--gig svg { position:absolute; inset:-12%; width:124%; height:124%; z-index:3; pointer-events:none; } .d--gig .bname { position:absolute; left:-16%; right:-16%; bottom:-5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; font-family:var(--f-hand); font-weight:700; font-size:.6rem; color:var(--red); z-index:4; line-height:1; font-style:normal; } .d--gig:hover svg { transform:scale(1.08); } .d--sold, .d--sold .bname { color:var(--ink); opacity:.75; } /* ---------- forma za rezervaciju (kupon) ---------- */ .seg { display:grid; grid-template-columns:1fr 1fr; border:2px solid var(--ink); margin-bottom:1.2rem; background:var(--paper-white); } .seg button { font-family:var(--f-type); font-weight:700; font-size:.95rem; letter-spacing:.12em; text-transform:uppercase; background:transparent; color:var(--ink); border:0; padding:.8rem .5rem; cursor:pointer; } .seg button[aria-pressed="true"] { background:var(--ink); color:var(--paper-cream); } .stepper { display:flex; align-items:center; gap:1rem; } .stepper button { width:52px; height:52px; border:2px solid var(--ink); background:var(--paper-white); font-size:1.5rem; cursor:pointer; font-family:var(--f-type); } .stepper button:hover { background:var(--paper-cream2); } .stepper output { font-family:var(--f-display); font-size:2rem; min-width:2ch; text-align:center; } .tables { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:.6rem; margin-bottom:.4rem; } .tables button { display:grid; gap:.1rem; text-align:left; background:var(--paper-white); border:2px solid var(--ink); padding:.65rem .75rem; cursor:pointer; font-family:var(--f-type); color:var(--ink); } .tables button b { font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; } .tables button small { opacity:.7; } .tables button[aria-pressed="true"] { background:var(--ink); color:var(--paper-cream); } .tables button[aria-pressed="true"] small { opacity:.85; } .tables button:disabled { opacity:.4; cursor:not-allowed; text-decoration:line-through; } .confirm { display:none; text-align:center; } #book.done form, #book.done .seg, #book.done .book-head { display:none; } #book.done .confirm { display:block; } [hidden] { display:none !important; } /* ---------- kalendar sa slikama ---------- */ .cal { margin-bottom:2.4rem; } .cal__title { font-size:clamp(1.2rem,3.5vw,1.6rem); margin-bottom:.7rem; } .cal__grid { display:grid; grid-template-columns:repeat(7,1fr); gap:5px; } .cal__hd { font-size:.62rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700; text-align:center; padding-bottom:.2rem; opacity:.7; } .cal__day { position:relative; aspect-ratio:1/1; background:var(--paper-white); border:1.5px solid rgba(25,21,18,.25); padding:.25rem .35rem; font-size:.72rem; overflow:hidden; display:block; text-decoration:none; color:var(--ink); } .cal__day b { font-weight:700; } .cal__day--pad { background:transparent; border:0; } .cal__day--wknd { border-color:var(--ink); } .cal__day--gig { background-size:cover; background-position:center; border:2px solid var(--ink); color:var(--paper-white); box-shadow:0 4px 10px rgba(25,21,18,.3); transition:transform .18s ease, box-shadow .18s ease; } .cal__day--gig::before { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(15,12,10,.78), rgba(15,12,10,.12) 55%); } .cal__day--gig b { position:relative; text-shadow:0 1px 3px #000; } .cal__day--gig:hover { transform:scale(1.35) rotate(-2deg); z-index:5; box-shadow:0 10px 24px rgba(25,21,18,.45); } .cal__band { position:absolute; left:.3rem; right:.3rem; bottom:.25rem; font-family:var(--f-display); font-size:.6rem; line-height:1.05; text-transform:uppercase; text-shadow:0 1px 3px #000; } .cal__x { position:absolute; top:38%; left:-10%; right:-10%; background:var(--paper-white); color:var(--red); font-family:var(--f-display); font-size:.5rem; text-transform:uppercase; text-align:center; padding:.1rem 0; transform:rotate(-8deg); } @media (max-width:640px) { .cal__band { display:none; } .cal__day { font-size:.62rem; padding:.15rem .25rem; } .cal__x { font-size:.4rem; } } /* ---------- kraft strana (kontakt) ---------- */ body.page--kraft { background:var(--paper-kraft); } /* ---------- galerija: gomila fotki ---------- */ .pile { display:grid; gap:1.7rem 1.3rem; grid-template-columns:repeat(auto-fill, minmax(165px, 1fr)); } .pile .photo { padding:.4rem .4rem 1.4rem; cursor:pointer; border:0; transition:transform .2s ease; } .pile .photo img { aspect-ratio:1/1; } .pile .photo:hover { transform:rotate(0) scale(1.05); z-index:4; } /* ---------- cenovnik ---------- */ .menu-list { max-width:620px; } .menu-list h3 { margin:2.2rem 0 .6rem; } .menu-list h3:first-of-type { margin-top:0; } .menu-item { display:flex; align-items:baseline; gap:.6rem; font-size:1.02rem; padding:.3rem 0; } .menu-item .dots { flex:1; border-bottom:2px dotted rgba(25,21,18,.55); translate:0 -4px; } .menu-item b { white-space:nowrap; } /* ---------- mapa placeholder ---------- */ .mapbox { border:3px dashed var(--ink); background:var(--paper-white); display:grid; place-items:center; aspect-ratio:16/7; text-align:center; padding:1rem; } /* ---------- pravila ---------- */ .rules { max-width:560px; margin-inline:auto; background:var(--paper-white); padding:clamp(1.4rem,4vw,2.4rem); box-shadow:0 12px 28px rgba(25,21,18,.25); position:relative; } .rules ol { margin:0; padding-left:1.3rem; display:grid; gap:.8rem; font-size:1.05rem; } .rules ol b { font-family:var(--f-display); font-weight:400; text-transform:uppercase; } /* ---------- pristupačnost ---------- */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* ---------- masthead v2: MUSIC [logo] STAGE ---------- */ .mast2 { display:flex; align-items:center; justify-content:center; gap:clamp(.8rem, 3vw, 2rem); padding-top:.4rem; } .mast2__word { font-family:var(--f-display); text-transform:uppercase; font-size:clamp(1.9rem, 8.5vw, 5rem); letter-spacing:-.01em; line-height:1; } .mast2__logo { width:clamp(120px, 26vw, 220px); flex:none; mix-blend-mode:multiply; opacity:.94; transform:rotate(-7deg); transition:transform .35s cubic-bezier(.2,.8,.2,1); } .mast2__logo:hover { transform:rotate(0deg); } /* ---------- mobilni meni ---------- */ .nav__links { display:flex; gap:1.1rem; align-items:center; flex-wrap:wrap; } .nav__meni { display:none; font-family:var(--f-type); font-weight:700; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; background:var(--paper-white); border:2px solid var(--ink); color:var(--ink); padding:.5rem .9rem; cursor:pointer; } body.menu-open .nav__meni { background:var(--ink); color:var(--paper-cream); } @media (max-width:759px) { .nav__links { display:none; } .nav__meni { display:block; margin-left:auto; } .nav .wrap { flex-wrap:nowrap; } } .mobmenu { position:fixed; inset:0; z-index:90; background:var(--paper-cream); display:grid; place-content:center; text-align:center; gap:.4rem; visibility:hidden; opacity:0; transition:opacity .25s, visibility 0s .25s; } body.menu-open .mobmenu { visibility:visible; opacity:1; transition:opacity .25s; } body.menu-open { overflow:hidden; } .mobmenu a { font-family:var(--f-display); text-transform:uppercase; text-decoration:none; font-size:clamp(2.2rem, 11vw, 3.2rem); line-height:1.15; color:var(--ink); opacity:0; transform:translateY(22px); transition:opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1); } .mobmenu a:nth-child(odd) { rotate:-1.5deg; } .mobmenu a:nth-child(even) { rotate:1.2deg; } .mobmenu a[aria-current] { color:var(--red); } body.menu-open .mobmenu a { opacity:1; transform:none; } body.menu-open .mobmenu a:nth-child(1) { transition-delay:.05s; } body.menu-open .mobmenu a:nth-child(2) { transition-delay:.1s; } body.menu-open .mobmenu a:nth-child(3) { transition-delay:.15s; } body.menu-open .mobmenu a:nth-child(4) { transition-delay:.2s; } body.menu-open .mobmenu a:nth-child(5) { transition-delay:.25s; } body.menu-open .mobmenu a:nth-child(6) { transition-delay:.3s; } .mobmenu .hand { margin-top:1.6rem; opacity:0; transition:opacity .4s .35s; } body.menu-open .mobmenu .hand { opacity:1; } /* ── prototip alat za papire (ne ide u produkciju) ── */ .bgtool { position:fixed; left:1rem; bottom:1rem; z-index:95; font-family:var(--f-type); } .bgtool__fab { width:44px; height:44px; border:2px solid var(--ink); background:var(--paper-white); font-size:1.2rem; cursor:pointer; box-shadow:3px 4px 0 rgba(25,21,18,.4); } .bgtool__panel { position:absolute; left:0; bottom:52px; width:230px; background:var(--paper-white); border:2px solid var(--ink); padding:.8rem; box-shadow:6px 7px 0 rgba(25,21,18,.35); } .bgtool__t { margin:.2rem 0 .3rem; font-size:.62rem; text-transform:uppercase; letter-spacing:.18em; font-weight:700; } .bgtool__row { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.6rem; } .bgtool__row[data-kind="c"] button { width:28px; height:28px; border:2px solid var(--ink); cursor:pointer; } .bgtool__row--tex button { font-family:var(--f-type); font-size:.72rem; border:1.5px solid var(--ink); background:var(--paper-cream); padding:.25rem .5rem; cursor:pointer; } .bgtool__row--tex button:hover { background:var(--paper-yellow); } .bgtool__reset { font-family:var(--f-type); font-size:.72rem; border:1.5px solid var(--ink); background:var(--paper-cream2); padding:.3rem .6rem; cursor:pointer; width:100%; } @media (max-width:759px) { .bgtool { bottom:4.4rem; } } /* cenovnik u dve kolone na širokom */ @media (min-width:860px) { .menu-list { max-width:none; columns:2; column-gap:3.5rem; } .menu-list h3 { break-after:avoid; } .menu-item { break-inside:avoid; } }