/* ═══════════════════════════════════════════════════════════════════════ BuyOffSeason — "B.O.S" Fiverr-style design system Monochrome base · one orange pop for price & action. Responsive: mobile = app-like (bottom tab bar) · desktop = marketplace web. Light + dark aware (toggle stamps data-theme on ). ═══════════════════════════════════════════════════════════════════════ */ :root{ --bg:#ffffff; --surface:#ffffff; --ink:#1a1a1a; /* near-black text */ --ink-2:#404145; /* secondary text */ --muted:#74767e; /* Fiverr grey */ --line:#e4e5e7; --line-2:#efeff0; --paper:#f7f7f7; /* chip / tile / band background */ --paper-2:#f1f1f2; --orange:#FF6B35; /* the one pop of color */ --orange-deep:#E14A14; --orange-tint:#fff3ee; --shadow-sm:0 1px 2px rgba(0,0,0,.04); --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px -12px rgba(0,0,0,.18); --shadow-lg:0 24px 60px -24px rgba(0,0,0,.30); --radius:16px; --radius-sm:11px; --maxw:1240px; --nav-h:72px; --font:'Inter',-apple-system,'SF Pro Text','Segoe UI',Roboto,system-ui,sans-serif; color-scheme:light; } @media (prefers-color-scheme:dark){ :root{ --bg:#0f1012; --surface:#17181b; --ink:#f3f3f4; --ink-2:#c9cace; --muted:#9a9ca3; --line:#2a2c31; --line-2:#212226; --paper:#1a1b1e; --paper-2:#202226; --orange-tint:#2a1a12; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -24px rgba(0,0,0,.7); color-scheme:dark; } } :root[data-theme="light"]{ --bg:#ffffff; --surface:#ffffff; --ink:#1a1a1a; --ink-2:#404145; --muted:#74767e; --line:#e4e5e7; --line-2:#efeff0; --paper:#f7f7f7; --paper-2:#f1f1f2; --orange-tint:#fff3ee; color-scheme:light; } :root[data-theme="dark"]{ --bg:#0f1012; --surface:#17181b; --ink:#f3f3f4; --ink-2:#c9cace; --muted:#9a9ca3; --line:#2a2c31; --line-2:#212226; --paper:#1a1b1e; --paper-2:#202226; --orange-tint:#2a1a12; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px -12px rgba(0,0,0,.6); --shadow-lg:0 24px 60px -24px rgba(0,0,0,.7); color-scheme:dark; } *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{ font-family:var(--font); background:var(--bg); color:var(--ink); line-height:1.45; letter-spacing:-0.011em; -webkit-font-smoothing:antialiased; padding-bottom:0; } @media (max-width:900px){ body{ padding-bottom:76px; } } /* room for bottom tab bar */ a{ color:inherit; } img{ max-width:100%; display:block; } button{ font-family:inherit; } :focus-visible{ outline:2.5px solid var(--orange); outline-offset:2px; border-radius:4px; } .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; } @media (max-width:560px){ .wrap{ padding:0 16px; } } /* ── utility ── */ .tnum{ font-variant-numeric:tabular-nums; } .only-mobile{ display:none !important; } @media (max-width:900px){ .only-desktop{ display:none !important; } .only-mobile{ display:flex !important; } } /* ═══════════════ TOP NAV / APP BAR ═══════════════ */ .bos-nav{ position:sticky; top:0; z-index:100; background:var(--bg); border-bottom:1px solid var(--line); } .bos-nav-inner{ max-width:var(--maxw); margin:0 auto; height:var(--nav-h); padding:0 24px; display:flex; align-items:center; gap:20px; } .wordmark{ font-weight:800; font-size:24px; letter-spacing:-0.05em; color:var(--ink); text-decoration:none; display:inline-flex; align-items:baseline; flex:0 0 auto; } .wordmark .dot{ color:var(--orange); } .wordmark .mono{ display:none; } /* Collapse to B.O.S monogram on tight screens */ @media (max-width:1040px){ .wordmark .full{ display:none; } .wordmark .mono{ display:inline; } } .nav-search{ flex:1 1 auto; max-width:520px; display:flex; align-items:center; gap:10px; height:46px; padding:0 16px; border-radius:12px; border:1.5px solid var(--ink); background:var(--surface); color:var(--muted); font-size:15px; cursor:text; } .nav-search svg{ width:18px; height:18px; color:var(--ink); flex:0 0 auto; } .nav-search input{ border:0; background:transparent; outline:0; color:var(--ink); font:inherit; width:100%; } .nav-search input::placeholder{ color:var(--muted); } .nav-links{ display:flex; align-items:center; gap:26px; margin-left:auto; flex:0 0 auto; } .nav-links a{ color:var(--ink); text-decoration:none; font-size:15px; font-weight:600; position:relative; padding:4px 0; white-space:nowrap; } .nav-links a:hover{ color:var(--orange); } .nav-links a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2.5px; background:var(--orange); border-radius:2px; } .nav-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; } .icon-btn{ width:42px; height:42px; border-radius:50%; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); display:grid; place-items:center; cursor:pointer; transition:border-color .15s, background .15s; } .icon-btn:hover{ border-color:var(--ink); } .icon-btn svg{ width:20px; height:20px; } .avatar{ width:42px; height:42px; border-radius:50%; flex:0 0 auto; background:linear-gradient(135deg,#2a2c30,#54575e); color:#fff; display:grid; place-items:center; font-weight:800; font-size:15px; text-decoration:none; } /* Mobile app bar */ @media (max-width:900px){ .bos-nav-inner{ height:auto; flex-wrap:wrap; padding:10px 16px 12px; gap:12px; } .nav-links{ display:none; } .nav-search{ order:3; max-width:none; width:100%; height:48px; } .wordmark{ font-size:23px; } .nav-actions{ margin-left:auto; } } /* ═══════════════ HERO BAND ═══════════════ */ .hero{ background:var(--paper); border-bottom:1px solid var(--line); padding:56px 0 48px; } .hero .wrap{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; } .hero-eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--orange); } .hero-eyebrow .pulse{ width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 0 rgba(255,107,53,.5); animation:pulse 2.4s infinite; } @keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(255,107,53,.5);} 70%{box-shadow:0 0 0 12px rgba(255,107,53,0);} 100%{box-shadow:0 0 0 0 rgba(255,107,53,0);} } .hero h1{ font-size:clamp(38px,6.4vw,76px); font-weight:800; letter-spacing:-0.045em; line-height:.98; max-width:16ch; text-wrap:balance; } .hero h1 em{ font-style:normal; color:var(--orange); } .hero p.lede{ font-size:clamp(16px,2.2vw,21px); color:var(--ink-2); max-width:56ch; font-weight:500; } .hero-search{ width:100%; max-width:640px; display:flex; align-items:center; gap:12px; height:58px; padding:0 8px 0 20px; border-radius:14px; border:2px solid var(--ink); background:var(--surface); } .hero-search svg{ width:20px; height:20px; color:var(--ink); flex:0 0 auto; } .hero-search input{ border:0; outline:0; background:transparent; font:inherit; font-size:16px; width:100%; color:var(--ink); } .hero-search button{ flex:0 0 auto; height:44px; padding:0 24px; border:0; border-radius:10px; background:var(--ink); color:var(--bg); font-weight:800; font-size:15px; cursor:pointer; } .hero-search button:hover{ background:var(--orange); } .hero-tags{ display:flex; gap:9px; flex-wrap:wrap; align-items:center; } .hero-tags .lbl{ font-size:13px; color:var(--muted); font-weight:600; } .hero-tags a{ font-size:13px; font-weight:700; text-decoration:none; color:var(--ink); border:1.5px solid var(--line); border-radius:999px; padding:7px 14px; background:var(--surface); transition:border-color .15s, color .15s; } .hero-tags a:hover{ border-color:var(--ink); } /* ═══════════════ SECTIONS ═══════════════ */ .section{ padding:44px 0; } .section.tight{ padding:28px 0; } .section.band{ background:var(--paper); } .sec-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:22px; } .sec-head h2{ font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-0.025em; } .sec-head .sub{ color:var(--muted); font-size:14px; margin-top:4px; font-weight:500; } .see-all{ font-size:15px; font-weight:700; color:var(--ink); text-decoration:none; border-bottom:2.5px solid var(--orange); padding-bottom:1px; white-space:nowrap; } .see-all:hover{ color:var(--orange); } /* ── horizontal scroller ── */ .hscroll{ display:flex; gap:16px; overflow-x:auto; padding:4px 24px 10px; margin:0 -24px; scroll-snap-type:x mandatory; scrollbar-width:none; } .hscroll::-webkit-scrollbar{ display:none; } @media (max-width:560px){ .hscroll{ padding:4px 16px 10px; margin:0 -16px; } } /* ── category tile (Fiverr "Popular services") ── */ .ctile{ flex:0 0 190px; scroll-snap-align:start; text-decoration:none; color:var(--ink); } .ctile-img{ height:150px; border-radius:14px; position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:14px; color:#fff; } .ctile-img::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 40%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.8) 100%); } .ctile-glyph{ position:absolute; top:12px; right:14px; font-size:34px; opacity:.92; z-index:1; } .ctile-cap{ position:relative; z-index:1; font-size:15px; font-weight:800; letter-spacing:-0.01em; line-height:1.15; } .ctile-name{ margin-top:10px; font-size:15px; font-weight:700; } .ctile-sub{ font-size:13px; color:var(--muted); font-weight:600; } /* monochrome tile gradients */ .g1{background:linear-gradient(135deg,#232529,#3a3d43);} .g2{background:linear-gradient(135deg,#3a3d43,#57595f);} .g3{background:linear-gradient(135deg,#1a1c1f,#2f3237);} .g4{background:linear-gradient(135deg,#45484e,#26282c);} .g5{background:linear-gradient(135deg,#2c2e33,#4a4d53);} .g6{background:linear-gradient(135deg,#3d4046,#1f2124);} .g7{background:linear-gradient(135deg,#202225,#3f4247);} .g8{background:linear-gradient(135deg,#4c4f55,#2a2c30);} /* ── filter chips ── */ .chips{ display:flex; gap:10px; overflow-x:auto; padding:2px 0 6px; scrollbar-width:none; } .chips::-webkit-scrollbar{ display:none; } .chip{ flex:0 0 auto; height:40px; padding:0 18px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink); font-size:14px; font-weight:700; display:inline-flex; align-items:center; gap:8px; cursor:pointer; text-decoration:none; transition:border-color .15s, background .15s, color .15s; } .chip:hover{ border-color:var(--ink); } .chip.active{ border-color:var(--ink); background:var(--ink); color:var(--bg); } .chip svg{ width:16px; height:16px; } /* ── product / gig grid ── */ .gig-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px 22px; } @media (max-width:1040px){ .gig-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:760px){ .gig-grid{ grid-template-columns:repeat(2,1fr); gap:20px 14px; } } @media (max-width:420px){ .gig-grid{ grid-template-columns:1fr; } } .gig{ text-decoration:none; color:var(--ink); display:block; } .gig-media{ position:relative; aspect-ratio:4/3; border-radius:14px; overflow:hidden; display:grid; place-items:center; color:#fff; } .gig-media .big-glyph{ font-size:56px; opacity:.92; } .gig-heart{ position:absolute; top:10px; right:10px; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; color:#1a1a1a; border:0; cursor:pointer; } .gig-heart svg{ width:18px; height:18px; } .gig-heart.saved{ background:var(--orange); color:#fff; } .gig-badge{ position:absolute; top:10px; left:10px; font-size:10.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; background:var(--ink); color:#fff; padding:5px 9px; border-radius:7px; display:inline-flex; align-items:center; gap:5px; } .gig-badge .b-dot{ color:var(--orange); font-size:9px; } .gig-tag{ position:absolute; bottom:10px; right:10px; font-size:11px; font-weight:700; color:#fff; background:rgba(0,0,0,.58); padding:3px 9px; border-radius:999px; } .gig-rating{ display:flex; align-items:center; gap:5px; margin-top:12px; font-size:13.5px; font-weight:700; } .gig-rating svg{ width:15px; height:15px; color:var(--ink); } .gig-rating .rc{ color:var(--muted); font-weight:600; } .gig-brand{ font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:8px; } .gig-title{ font-size:15px; font-weight:600; line-height:1.32; margin-top:3px; color:var(--ink-2); } .gig-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:11px; padding-top:11px; border-top:1px solid var(--line-2); } .gig-price{ font-size:12px; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:.05em; } .gig-price b{ font-size:18px; color:var(--ink); font-weight:800; letter-spacing:-0.01em; } .gig-floor{ font-size:11.5px; font-weight:800; color:var(--orange); } /* ── deal card (Fiverr "custom offer") ── */ .deal-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } @media (max-width:1000px){ .deal-row{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .deal-row{ grid-template-columns:1fr; } } .deal{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); box-shadow:var(--shadow); text-decoration:none; color:var(--ink); display:flex; flex-direction:column; transition:transform .16s, border-color .16s; } .deal:hover{ transform:translateY(-3px); border-color:var(--ink); } .deal-top{ display:flex; gap:13px; padding:16px 16px 12px; align-items:center; } .deal-thumb{ width:62px; height:62px; border-radius:12px; flex:0 0 auto; display:grid; place-items:center; color:#fff; font-size:28px; } .deal-brand{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); } .deal-name{ font-size:15px; font-weight:700; line-height:1.25; margin-top:3px; } .deal-body{ min-width:0; } .deal-meta{ display:flex; align-items:center; gap:14px; padding:0 16px 12px; font-size:12.5px; color:var(--muted); font-weight:600; } .deal-meta .lo{ color:var(--ink); font-weight:800; } .deal-price{ display:flex; align-items:baseline; gap:10px; padding:0 16px 14px; margin-top:auto; } .deal-now{ font-size:24px; font-weight:800; color:var(--orange); letter-spacing:-0.02em; } .deal-was{ font-size:14px; color:var(--muted); text-decoration:line-through; font-weight:600; } .deal-save{ margin-left:auto; font-size:11px; font-weight:800; letter-spacing:.04em; color:#fff; background:var(--orange); padding:6px 10px; border-radius:8px; } .deal-actions{ display:flex; gap:10px; padding:0 16px 16px; } /* ── buttons ── */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px; border-radius:11px; font-size:15px; font-weight:800; letter-spacing:-0.01em; cursor:pointer; text-decoration:none; border:1.5px solid var(--ink); background:var(--surface); color:var(--ink); transition:background .15s, color .15s, transform .12s; } .btn:hover{ transform:translateY(-1px); } .btn.solid{ background:var(--ink); color:var(--bg); } .btn.solid:hover{ background:var(--orange); border-color:var(--orange); } .btn.orange{ background:var(--orange); border-color:var(--orange); color:#fff; } .btn.orange:hover{ background:var(--orange-deep); border-color:var(--orange-deep); } .btn.full{ flex:1; } .btn svg{ width:17px; height:17px; } /* ── holiday / seasonal tile grid ── */ .tile-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } @media (max-width:900px){ .tile-grid{ grid-template-columns:repeat(3,1fr); } } @media (max-width:600px){ .tile-grid{ grid-template-columns:repeat(2,1fr); gap:12px; } } .htile{ position:relative; aspect-ratio:1/1; border-radius:16px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding:16px; text-decoration:none; color:#fff; transition:transform .16s; } .htile:hover{ transform:translateY(-3px); } .htile::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 38%,rgba(0,0,0,.58) 76%,rgba(0,0,0,.82) 100%); } .htile-glyph{ position:absolute; top:14px; left:16px; font-size:30px; z-index:1; } .htile-name{ position:relative; z-index:1; font-size:17px; font-weight:800; letter-spacing:-0.02em; } .htile-sub{ position:relative; z-index:1; font-size:12px; font-weight:700; color:rgba(255,255,255,.82); text-transform:uppercase; letter-spacing:.06em; margin-top:2px; } /* ── promo band ── */ .promo{ position:relative; overflow:hidden; border-radius:22px; background:var(--ink); color:#fff; padding:44px 40px; } .promo::after{ content:"↓"; position:absolute; right:14px; top:-30px; font-size:210px; font-weight:900; color:rgba(255,107,53,.16); line-height:1; } .promo-k{ font-size:12px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); } .promo h2{ font-size:clamp(26px,4vw,42px); font-weight:800; letter-spacing:-0.03em; margin-top:12px; line-height:1.08; max-width:16ch; text-wrap:balance; } .promo p{ font-size:16px; color:rgba(255,255,255,.74); margin-top:14px; max-width:52ch; font-weight:500; } .promo .btn{ margin-top:24px; } :root[data-theme="dark"] .promo, .promo{ } /* ── fanatics / players strip ── */ .pcard-row{ display:flex; gap:16px; overflow-x:auto; padding:4px 24px 10px; margin:0 -24px; scroll-snap-type:x mandatory; scrollbar-width:none; } .pcard-row::-webkit-scrollbar{ display:none; } @media (max-width:560px){ .pcard-row{ padding:4px 16px 10px; margin:0 -16px; } } .pcard{ flex:0 0 260px; scroll-snap-align:start; text-decoration:none; color:var(--ink); border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); transition:transform .16s, border-color .16s; } .pcard:hover{ transform:translateY(-3px); border-color:var(--ink); } .pcard-photo{ height:150px; position:relative; display:grid; place-items:center; color:#fff; font-size:52px; } .pcard-team{ position:absolute; top:10px; left:12px; font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#fff; background:rgba(0,0,0,.4); padding:4px 8px; border-radius:6px; } .pcard-body{ padding:13px 14px 15px; } .pcard-name{ font-size:16px; font-weight:800; letter-spacing:-0.02em; } .pcard-news{ font-size:12px; color:var(--muted); font-weight:600; margin-top:3px; line-height:1.35; } .pcard-cta{ margin-top:11px; font-size:13px; font-weight:800; color:var(--orange); } /* ═══════════════ BOTTOM TAB BAR (mobile) ═══════════════ */ .tabbar{ display:none; } @media (max-width:900px){ .tabbar{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:200; height:64px; background:color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-top:1px solid var(--line); align-items:center; justify-content:space-around; padding:0 4px; padding-bottom:env(safe-area-inset-bottom,0); } .tab{ display:flex; flex-direction:column; align-items:center; gap:3px; color:var(--muted); text-decoration:none; font-size:10.5px; font-weight:700; flex:1; position:relative; } .tab svg{ width:24px; height:24px; } .tab.active{ color:var(--ink); } .tab.active .tab-ico{ background:var(--paper); } .tab-ico{ width:52px; height:30px; border-radius:999px; display:grid; place-items:center; } .tab-badge{ position:absolute; top:-3px; right:calc(50% - 22px); min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:var(--orange); color:#fff; font-size:9px; font-weight:800; display:grid; place-items:center; } } /* ═══════════════ FOOTER ═══════════════ */ .bos-footer{ border-top:1px solid var(--line); background:var(--bg); padding:52px 0 30px; margin-top:24px; } .bos-footer .fgrid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr); gap:40px; } @media (max-width:820px){ .bos-footer .fgrid{ grid-template-columns:1fr 1fr; gap:32px 24px; } } @media (max-width:480px){ .bos-footer .fgrid{ grid-template-columns:1fr; } } .bos-footer .fbrand .wordmark{ font-size:26px; } .bos-footer .fbrand p{ color:var(--muted); font-size:14px; margin-top:12px; max-width:38ch; } .bos-footer h5{ font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; } .bos-footer ul{ list-style:none; display:grid; gap:10px; } .bos-footer a{ color:var(--ink-2); text-decoration:none; font-size:14px; font-weight:500; } .bos-footer a:hover{ color:var(--orange); } .fbottom{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:40px; padding-top:22px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px; } .ftrademark{ color:var(--muted); font-size:11.5px; margin-top:14px; max-width:70ch; } /* ═══════════════ REAL PRODUCT / HOLIDAY IMAGES (homepage) ═══════════════ */ /* Photos are injected by id from PRODUCT_IMAGES (data.js). The .pic fills its tile; the tile's gradient shows only while loading or if the photo is missing (the fill script removes broken/absent images). */ .deal-thumb, .gig-media, .ctile-img, .htile, .pcard-photo{ position:relative; overflow:hidden; } .deal-thumb .pic, .gig-media .pic, .ctile-img .pic, .htile .pic{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; display:block; } /* product photos sit on white backgrounds → give them a light ground so they don't float on the dark tile while covering it */ .gig-media .pic, .deal-thumb .pic{ background:#fff; } .ctile-img .pic, .htile .pic{ background:#e9eaec; } /* keep captions/badges/overlays above the photo */ .gig-badge, .gig-heart, .gig-tag{ z-index:2; } .ctile-cap, .htile-name, .htile-sub{ position:relative; z-index:2; } .htile-name{ text-shadow:0 1px 8px rgba(0,0,0,.5); } .ctile-cap{ text-shadow:0 1px 10px rgba(0,0,0,.55); } .gig-media .big-glyph, .ctile-glyph, .htile-glyph{ position:relative; z-index:2; } /* ═══════════════ INJECTED GLOBAL CHROME (shared scripts) ═══════════════ */ /* A shared script injects a mobile hamburger into the header — our nav uses the bottom tab bar on mobile, so suppress it to avoid a stray ☰. */ .bos-nav .hamburger, header .hamburger{ display:none !important; } /* Scroll-progress bar → orange accent */ .bofsScrollProgress{ background:var(--orange) !important; height:3px !important; } /* Beta banner → match the system (kept, it's useful) */ .bofs-beta-banner{ font-family:var(--font) !important; background:var(--ink) !important; color:var(--bg) !important; font-weight:600; } .bofs-beta-banner a{ color:var(--orange) !important; } /* ═══════════════ LEGACY BRIDGE ═══════════════ Remap the old style.css / theme.css palette (--cream/--ink/--ember/--frost…) onto the new tokens so every existing page adopts monochrome + orange and stays theme-aware, without touching each page's own CSS. bos-fiverr.css must be linked LAST in for this to win the cascade. */ :root{ --cream:var(--bg); --paper:var(--paper); --ink:var(--ink); /* text → near-black (light) / near-white (dark) */ --ink-soft:var(--ink-2); --ember:var(--orange); /* accent stays orange */ --ember-deep:var(--orange-deep); --ember-light:var(--orange); --frost:var(--ink); /* blue → neutralized to text color */ --frost-deep:var(--ink); --frost-light:var(--muted); --gold:var(--muted); --rule:var(--line); --rule-soft:var(--line-2); } /* Neutralize the old serif (Fraunces) + mono (JetBrains) treatment site-wide → one geometric sans everywhere. Blanket !important so style.css's higher- specificity descendant rules can't keep the serif. SVG/emoji icons are unaffected (they don't render via font-family). */ *{ font-family:var(--font) !important; } /* Kill the decorative paper-grain + noise overlays from style.css (off-brand) */ body::before, body::after{ display:none !important; } /* Old primary buttons/links that used --ember keep working via the remap; make the common .btn-primary / .cta read on the new ground. */ a{ text-decoration-color:var(--orange); } /* Heading accent spans → orange, upright (kills the old italic-serif em look) */ h1 em, h2 em, h3 em, .legal-title em, .shop-title em, .cal-page-title em, .pl-title em, .gr-title em, .hero-title em{ font-style:normal; color:var(--orange); } /* Fixes for hardcoded (non-variable) colors the remap can't reach: */ /* calendar leverage bars used literal red/green/gold per score → all orange, depth encoded by how many bars are lit (.on) */ .cal-card-bars span{ background:var(--line) !important; } .cal-card-bars span.on{ background:var(--orange) !important; } .cal-card.current .cal-card-bars span{ background:rgba(255,255,255,.2) !important; } .cal-card.current .cal-card-bars span.on{ background:var(--orange) !important; } /* calendar pick list → pill chips */ .cal-card-picks{ display:flex !important; flex-wrap:wrap; gap:6px; list-style:none; } .cal-card-picks li{ font-size:11.5px; font-weight:700; color:var(--ink-2); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:4px 10px; } .cal-card-picks li::before{ display:none !important; } /* calendar legend bar → grey→orange */ .cal-page-legend-bar{ background:linear-gradient(90deg,var(--line),var(--orange)) !important; } /* All-Star badges (players) used league red/blue → orange */ .pl-card-allstar, .allstar-badge, .badge-allstar{ background:var(--orange) !important; background-image:none !important; color:#fff !important; border-color:var(--orange) !important; } .pl-card-allstar .pl-star, .pl-card-allstar *{ color:#fff !important; } /* ── reduced motion ── */ @media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }