/* Tickets4Musicians — design tokens. Dark + bright gold, clean sans-serif. */ @import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap'); :root{ --bg: #0b0b0f; --bg-raised: #131319; --bg-card: #17171f; --line: #2a2a35; --line-bright: #3a3a48; --ink: #f4f4f7; --ink-soft: #a9a9b8; --ink-faint: #6f6f80; --gold: #f6c945; --gold-hover: #ffd863; --gold-ink: #1a1400; --gold-soft: rgba(246,201,69,0.12); --gold-line: rgba(246,201,69,0.35); --green: #4ade80; --green-soft: rgba(74,222,128,0.12); --red: #f87171; --red-soft: rgba(248,113,113,0.12); --radius: 14px; --radius-sm: 9px; --shadow-gold: 0 0 0 1px var(--gold-line), 0 8px 30px -8px rgba(246,201,69,0.25); } /* LIGHT THEME \u2014 toggled by adding .t4m-light to (see lib/html.js) */ html.t4m-light{ --bg: #ffffff; --bg-raised: #f4f2ec; --bg-card: #ffffff; --line: #e1dccd; --line-bright: #cdc5ae; --ink: #1c1b17; --ink-soft: #5a564a; --ink-faint: #8d8776; --gold: #a8791f; --gold-hover: #8f6819; --gold-ink: #ffffff; --gold-soft: rgba(168,121,31,0.12); --gold-line: rgba(168,121,31,0.4); --green: #16843a; --green-soft: rgba(22,132,58,0.12); --red: #c8352b; --red-soft: rgba(200,53,43,0.12); --shadow-gold: 0 0 0 1px var(--gold-line), 0 8px 24px -10px rgba(168,121,31,0.3); } html.t4m-light .t4m-card{ box-shadow:0 1px 3px rgba(20,15,5,0.06); } html.t4m-light .t4m-menu-panel{ box-shadow:0 16px 40px rgba(20,15,5,0.14); } /* THEME TOGGLE BAR \u2014 slim strip injected at the very top of every page */ .t4m-theme-bar{ background:var(--bg-raised); border-bottom:1px solid var(--line); padding:6px 16px; display:flex; justify-content:flex-end; } .t4m-theme-toggle{ background:none; border:1px solid var(--line-bright); color:var(--ink-soft); font-family:inherit; font-size:0.78rem; font-weight:600; padding:4px 12px; border-radius:999px; cursor:pointer; } .t4m-theme-toggle:hover{ border-color:var(--gold-line); color:var(--gold); } /* Keep the main nav header pinned to the top of the viewport while scrolling, on laptop/desktop widths. */ @media (min-width:761px){ header{ position:sticky; top:0; z-index:40; background:var(--bg); } } @media (max-width: 640px){ .t4m-hero-logo{ max-width:144px; /* 20% smaller than 180px */ display:block; margin-left:auto; margin-right:auto; } } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ background:var(--bg); color:var(--ink); font-family:'Manrope', system-ui, sans-serif; -webkit-font-smoothing:antialiased; margin:0; } h1,h2,h3,h4{ font-family:'Sora', 'Manrope', system-ui, sans-serif; font-weight:700; letter-spacing:-0.01em; color:var(--ink); margin:0 0 0.4em; } a{ color:inherit; } ::selection{ background:var(--gold); color:var(--gold-ink); } .t4m-wrap{ max-width:1160px; margin:0 auto; padding:0 24px; } .t4m-wrap-narrow{ max-width:760px; margin:0 auto; padding:0 24px; } .t4m-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Manrope',sans-serif; font-weight:700; font-size:0.95rem; padding:12px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer; text-decoration:none; transition:transform .15s ease, box-shadow .15s ease, background .15s ease; } .t4m-btn:hover{ transform:translateY(-1px); } .t4m-btn-gold{ background:var(--gold); color:var(--gold-ink); box-shadow:var(--shadow-gold); } .t4m-btn-gold:hover{ background:var(--gold-hover); } .t4m-btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line-bright); } .t4m-btn-ghost:hover{ border-color:var(--gold-line); color:var(--gold); } .t4m-btn-sm{ padding:8px 16px; font-size:0.85rem; } .t4m-card{ background:var(--bg-card); border:1px solid var(--line); border-radius:var(--radius); } .t4m-badge{ display:inline-block; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; padding:4px 10px; border-radius:999px; background:var(--gold-soft); color:var(--gold); border:1px solid var(--gold-line); } .t4m-eyebrow{ font-size:0.78rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; color:var(--gold); margin-bottom:10px; display:block; } .t4m-input, .t4m-select, .t4m-textarea{ width:100%; background:var(--bg-raised); border:1px solid var(--line); color:var(--ink); border-radius:var(--radius-sm); padding:11px 13px; font-family:inherit; font-size:0.95rem; } .t4m-input:focus, .t4m-select:focus, .t4m-textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft); } .t4m-label{ display:block; font-size:0.82rem; font-weight:600; color:var(--ink-soft); margin-bottom:6px; } .t4m-navlink{ color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:0.92rem; transition:color .15s ease; } .t4m-navlink:hover, .t4m-navlink.active{ color:var(--gold); } .t4m-nav{ display:flex; gap:22px; align-items:center; flex-wrap:wrap; } /* Responsive menu: a plain always-visible nav (.t4m-desktop-only) handles desktop. Below 760px that's replaced by a
hamburger dropdown — kept entirely separate rather than trying to force a closed
to render its content on wide screens, which browsers hide natively and don't reliably let author CSS override. */ .t4m-menu{ display:none; position:relative; } .t4m-menu > summary{ list-style:none; cursor:pointer; width:40px; height:40px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:8px; font-size:1.15rem; color:var(--ink); } .t4m-menu > summary::-webkit-details-marker{ display:none; } @media (max-width:760px){ .t4m-menu{ display:block; } .t4m-menu > .t4m-menu-panel{ display:none; position:absolute; top:calc(100% + 10px); right:0; flex-direction:column; align-items:stretch; gap:6px; background:var(--bg-card); border:1px solid var(--line); border-radius:12px; padding:12px; min-width:220px; box-shadow:0 16px 40px rgba(0,0,0,0.45); z-index:80; } .t4m-menu[open] > .t4m-menu-panel{ display:flex; } .t4m-nav{ flex-direction:column; align-items:stretch; gap:2px; width:100%; } .t4m-navlink{ padding:9px 10px; border-radius:8px; } .t4m-navlink:hover, .t4m-navlink.active{ background:var(--bg-raised); } .t4m-menu .t4m-btn{ width:100%; } } /* Swap layouts by viewport: hide one, show the other. */ .t4m-mobile-only{ display:none; } @media (max-width:760px){ .t4m-desktop-only{ display:none !important; } .t4m-mobile-only{ display:block; } } /* Homepage hero: buttons stack and centre on mobile, and the big gap before the next section tightens up (the section below no longer needs its own large top padding once the hero's bottom padding is trimmed). */ .t4m-hero{ padding:72px 24px 40px; } .t4m-hero-actions{ display:flex; align-items:center; gap:14px; margin-top:30px; flex-wrap:wrap; } .t4m-why-wrap{ padding:56px 24px; } @media (max-width:760px){ .t4m-hero{ padding:48px 24px 12px; } .t4m-hero-actions{ flex-direction:column; align-items:center; } .t4m-hero-actions .t4m-btn{ width:100%; max-width:340px; } .t4m-why-wrap{ padding:16px 24px 56px; } } /* Collapsible event card for mobile:
*/ .t4m-event-card > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px; } .t4m-event-card > summary::-webkit-details-marker{ display:none; } .t4m-event-card .t4m-chevron{ margin-left:auto; color:var(--ink-faint); transition:transform .18s ease; flex-shrink:0; } .t4m-event-card[open] .t4m-chevron{ transform:rotate(180deg); } .t4m-event-card .t4m-event-body{ margin-top:12px; }