/** * tickbo.css — the design language of TicketBox's own public surface. * * ⚠️ STANDALONE. This file is NOT part of the theme's CSS bundle (inc/enqueue.php) and must not be * added to it. It is loaded with a plain by template-parts/tickbo/head.php and it styles a * document that never calls get_header(). Two reasons, both load-bearing: * * 1. The bundle is DryVia's live stylesheet. Anything that reaches both surfaces can break a site * that is taking money, for the sake of a site that is behind Basic Auth. * 2. TicketBox's platform is unbuilt. This surface must not move while it is built, so it depends * on nothing that building it would touch. * * ONE COPY OF THE CHROME. The nav, the footer and these tokens are used by BOTH page-holding.php * (the front page) and page-tickbo.php (terms, privacy, refund, cookies). Before 2026-09-07 the * front page carried its own inline copy of all of it, which is exactly the duplication that let * the legal pages drift into the old light theme in the first place. */ /* ── tokens ──────────────────────────────────────────────────────────────────────────────────── */ :root{ --ink:#0B0B0F; --ink-2:#12121A; --paper:#F7F6F3; --dim:#8B8A93; --accent:#00C8FF; --accent-2:#5CDBFF; --line:rgba(247,246,243,.10); --body:#C4C3CC; --body-soft:#B4B3BC; color-scheme:dark; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ min-height:100vh;background:var(--ink);color:var(--paper); font-family:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased; display:flex;flex-direction:column;overflow-x:hidden; } /* ⚠️ overflow-x:hidden ABOVE WOULD SILENTLY KILL THE STICKY HEADER. `hidden` makes the element a scroll container, so a sticky descendant sticks to a box that never scrolls — the header just scrolls away, with no error and nothing in the CSS looking wrong. `clip` prevents the same horizontal overflow WITHOUT creating a scroll container. Kept as a @supports override rather than a replacement so a browser without `clip` still gets the overflow guard and merely loses the stickiness, instead of gaining a horizontal scrollbar. */ @supports (overflow-x: clip){ body{ overflow-x:clip; } } body::before{ content:'';position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(60rem 40rem at 50% -10%, rgba(0,200,255,.10), transparent 60%), radial-gradient(40rem 30rem at 85% 110%, rgba(0,200,255,.06), transparent 60%); } .wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto;padding:0 28px;width:100%} /* ⚠️ THE STICKY HEADER WOULD OTHERWISE COVER EVERY ANCHOR TARGET IT SCROLLS TO. The header is ~78px tall (20 + 38 + 20). Without this, "Научи повече" jumps to #info and the header sits on top of the first line, and the skip link lands the keyboard user underneath the bar they were trying to skip past. Applied to any [id] so a heading anchor added to a legal document later inherits it rather than reproducing the bug. */ [id]{scroll-margin-top:98px} /* Keyboard users must be able to see where they are on a near-black ground. */ a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} .tb-skip{ position:absolute;left:-9999px;top:0;z-index:99; background:var(--accent);color:#04121A;padding:10px 18px;font-weight:600;text-decoration:none; } .tb-skip:focus{left:12px;top:12px} /* ── chrome: header ──────────────────────────────────────────────────────────────────────────── */ /* Sticky, because it is the ONLY way back. There is no menu behind the logo — on a legal document the wordmark IS the navigation, and a header that scrolls away leaves a reader four screens into the terms with no route home but the browser's back button. */ header.tb-top{ position:sticky;top:0;z-index:50; padding:20px 0; /* The pages are near-black and content scrolls UNDER this bar, so it cannot be transparent. The solid colour is the real background; the translucent+blur is an enhancement applied only where backdrop-filter actually works, so a browser without it gets an opaque bar rather than text bleeding through a 82%-alpha one. */ background:var(--ink); border-bottom:1px solid transparent; } @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){ header.tb-top{ background:rgba(11,11,15,.78); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line); } } .brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;width:max-content} .brand-mark{width:38px;height:38px;flex:0 0 auto} .brand-name{font-size:23px;font-weight:700;letter-spacing:.18em} .brand-name b{color:var(--accent);font-weight:700} a.brand:hover .brand-name{color:var(--accent-2)} /* ── chrome: footer ──────────────────────────────────────────────────────────────────────────── */ footer.tb-bottom{padding:44px 0 52px;border-top:1px solid var(--line);position:relative;z-index:1} .foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;margin-bottom:36px} .foot-h{font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:14px} .foot-grid p,.foot-grid a{font-size:15px;color:var(--body-soft);text-decoration:none;display:block;margin-bottom:7px} .foot-grid a:hover{color:var(--accent)} .foot-brand p{max-width:34ch;color:#9A99A3;font-size:14.5px} .foot-bottom{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between; align-items:center;padding-top:26px;border-top:1px solid var(--line)} .foot-bottom p{font-size:13.5px;color:#6E6D76} .foot-legal{display:flex;gap:20px;flex-wrap:wrap} .foot-legal a{font-size:13.5px;color:#6E6D76;text-decoration:none} .foot-legal a:hover{color:var(--body-soft)} /* ── buttons ─────────────────────────────────────────────────────────────────────────────────── */ .btn{ font-size:15.5px;font-weight:600;letter-spacing:.02em;padding:14px 30px; text-decoration:none;border:1.5px solid transparent;display:inline-block;transition:all .18s; border-radius:2px; } .btn-fill{background:var(--accent);color:#04121A} .btn-fill:hover{background:var(--accent-2);transform:translateY(-1px)} .btn-ghost{border-color:rgba(247,246,243,.24);color:var(--paper)} .btn-ghost:hover{border-color:var(--paper)} /* ── front page: hero ────────────────────────────────────────────────────────────────────────── */ main.tb-hero-main{flex:1;display:flex;align-items:center;padding:70px 0 90px} .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;width:100%} .eyebrow{ display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);font-weight:600;margin-bottom:24px; opacity:0;animation:rise .8s .1s cubic-bezier(.2,.7,.2,1) forwards; } .hero h1{ font-size:clamp(38px,5.6vw,62px);font-weight:700;line-height:1.08;letter-spacing:-.02em; margin-bottom:24px;opacity:0;animation:rise .8s .22s cubic-bezier(.2,.7,.2,1) forwards; } .hero h1 .grad{ background:linear-gradient(100deg,var(--accent) 10%,var(--accent-2) 60%,var(--paper) 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } .lede{ font-size:18.5px;color:var(--body);max-width:46ch;margin-bottom:36px; opacity:0;animation:rise .8s .34s cubic-bezier(.2,.7,.2,1) forwards; } .actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center; opacity:0;animation:rise .8s .46s cubic-bezier(.2,.7,.2,1) forwards} @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* ── front page: ticket animation ────────────────────────────────────────────────────────────── */ .ticket-stage{display:flex;justify-content:center;align-items:center; opacity:0;animation:rise 1s .5s cubic-bezier(.2,.7,.2,1) forwards} .ticket-stage svg{width:100%;max-width:420px;height:auto;overflow:visible} .tk-body{fill:var(--ink-2);stroke:rgba(0,200,255,.32);stroke-width:1.4} .tk-half{transform-origin:center;animation:tear 7s ease-in-out infinite} .tk-left{animation-name:tearL} .tk-right{animation-name:tearR} @keyframes tearL{ 0%,42%{transform:translateX(0) rotate(0)} 56%,74%{transform:translateX(-9px) rotate(-1.4deg)} 90%,100%{transform:translateX(0) rotate(0)} } @keyframes tearR{ 0%,42%{transform:translateX(0) rotate(0)} 56%,74%{transform:translateX(9px) rotate(1.4deg)} 90%,100%{transform:translateX(0) rotate(0)} } .perf circle{fill:var(--accent);opacity:0;animation:punch 7s ease-in-out infinite; transform-box:fill-box;transform-origin:center} @keyframes punch{ 0%,10%{opacity:0;transform:scale(.4)} 22%,50%{opacity:1;transform:scale(1)} 62%{opacity:.35;transform:scale(1)} 78%,100%{opacity:0;transform:scale(.4)} } .tk-line{stroke:rgba(247,246,243,.16);stroke-width:1.2;stroke-linecap:round} .tk-code rect{fill:rgba(0,200,255,.55);opacity:0;animation:qr 7s ease-in-out infinite} @keyframes qr{ 0%,14%{opacity:0} 30%,66%{opacity:1} 82%,100%{opacity:0} } .tk-glow{filter:blur(14px);opacity:.30;fill:var(--accent)} /* ── front page: fact strip ──────────────────────────────────────────────────────────────────── */ .strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)} .strip-in{max-width:1080px;margin:0 auto;padding:30px 28px; display:grid;grid-template-columns:repeat(3,1fr);gap:34px} .fact-k{font-size:11.5px;letter-spacing:.19em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-bottom:7px} .fact-v{font-size:16px;color:#DEDDE4} .fact-v a{color:var(--accent);text-decoration:none} .fact-v a:hover{text-decoration:underline} /* ── content pages (terms / privacy / refund / cookies) ──────────────────────────────────────── */ main.tb-doc{flex:1;padding:64px 0 88px} .doc-head{max-width:74ch;margin:0 auto 44px} .doc-eyebrow{display:inline-block;font-size:12px;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);font-weight:600;margin-bottom:18px} .doc-head h1{font-size:clamp(32px,4.4vw,48px);font-weight:700;line-height:1.12;letter-spacing:-.02em} .doc-updated{margin-top:16px;font-size:14.5px;color:var(--dim)} /* ⚠️ These rules style the OUTPUT OF the_content(), i.e. whatever the editor produced. They are therefore written against plain tags rather than classes — a policy pasted from a Word document arrives as bare

,

and