/* ============================================================ UNBREAKABLE GAMES — brand stylesheet for Roblox Radar Light / neo-brutalist re-skin. Link this LAST in . Palette: pink #EC3186 · orange #FF5711 · cyan #57FFF1 · lime #D5FF2E · blue #1F1FDB · ink #000 · paper #fff Type: Anton (display) · Archivo (body) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400&display=swap'); :root{ --ink:#000000; --paper:#ffffff; --page:#F3EEE2; --card:#FFFDF7; --pink:#EC3186; --orange:#FF5711; --cyan:#57FFF1; --lime:#D5FF2E; --blue:#1F1FDB; --muted:#555555; --grad:linear-gradient(135deg,#EC3186 0%,#FF5711 100%); } /* ---- Base: warm off-white page + brand type ---- */ html, body{ background:var(--page) !important; color:var(--ink) !important; font-family:'Archivo', system-ui, -apple-system, sans-serif !important; } body{ -webkit-font-smoothing:antialiased; } *{ text-shadow:none !important; } ::selection{ background:var(--lime); color:#000; } h1,h2,h3,h4,.title,.h1,.h2,.eyebrow,.brand,.wordmark,.masthead-title,.app-title{ font-family:'Anton', sans-serif !important; text-transform:uppercase; letter-spacing:.01em; color:var(--ink) !important; font-weight:400; } h1{ font-size:clamp(34px,6vw,60px); line-height:.96; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent !important; } h2{ font-size:clamp(24px,4vw,40px); line-height:1; position:relative; } h2::after{ content:''; display:block; width:60px; height:7px; margin-top:10px; background:var(--grad); } h3{ font-size:clamp(18px,3vw,26px); } a{ color:var(--pink); text-decoration:none; } a:hover{ color:var(--orange); } /* readability: the radar's own light dark-theme grays are unreadable on the light cards, so force dark body text; links / badges / scores are re-asserted below. */ p, li, dd, dt, ul, ol, .reason, .reason *, .meta, .meta *, .note, .desc, .body, .text, .bullets, .bullets *, .detail, .details, .details *, .row, .info, .info *{ color:#232323 !important; } small,.small,.muted,.section-note,.sub,.dim,.faint{ color:#525252 !important; } a, a *{ color:var(--pink) !important; } a:hover, a:hover *{ color:var(--orange) !important; } .badge,.badge *,.stat,.pill,.stage,.tag,.chip{ color:var(--ink) !important; } .badge.hot,.badge.hot *,.neg{ color:#ffffff !important; } code,pre{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; color:#232323 !important; } /* ---- Brand nav (injected as .ug-nav) ---- */ .ug-nav{ position:sticky; top:0; z-index:100; display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding:12px 22px; background:#fff !important; border-bottom:5px solid var(--ink); box-shadow:0 6px 0 0 rgba(236,49,134,.28); } .ug-nav img{ height:34px; display:block; } .ug-nav .sp{ flex:1; } .ug-nav a{ font-weight:700 !important; font-size:13px !important; text-transform:uppercase; letter-spacing:.04em; text-decoration:none; color:var(--ink) !important; } .ug-nav a:hover, .ug-nav a.on{ color:var(--pink) !important; } .ug-nav a.cta{ background:var(--ink); color:#fff !important; padding:9px 15px; } .ug-nav a.cta:hover{ background:var(--pink); color:#fff !important; } /* ---- Cards / panels: brutalist with colored offset shadows ---- */ .card,.panel,.tile,.box,.item,.entry{ background:var(--card) !important; color:var(--ink) !important; border:3px solid var(--ink) !important; border-radius:0 !important; box-shadow:6px 6px 0 var(--pink) !important; transition:box-shadow .15s, transform .15s; } .card:nth-of-type(4n+2),.panel:nth-of-type(4n+2),.item:nth-of-type(4n+2){ box-shadow:6px 6px 0 var(--cyan) !important; } .card:nth-of-type(4n+3),.panel:nth-of-type(4n+3),.item:nth-of-type(4n+3){ box-shadow:6px 6px 0 var(--lime) !important; } .card:nth-of-type(4n+4),.panel:nth-of-type(4n+4),.item:nth-of-type(4n+4){ box-shadow:6px 6px 0 var(--blue) !important; } .card:hover,.panel:hover,.tile:hover,.item:hover,.entry:hover{ box-shadow:10px 10px 0 var(--ink) !important; transform:translate(-3px,-3px); } /* ---- Badges / stats / pills / stages ---- */ .badge,.stat,.pill,.stage,.tag,.chip{ display:inline-block; background:var(--lime) !important; color:var(--ink) !important; border:2px solid var(--ink) !important; border-radius:0 !important; font-weight:800 !important; text-transform:uppercase; letter-spacing:.05em; padding:4px 9px; } .badge.up,.stat.up,.pos{ background:var(--cyan) !important; } .badge.hot,.stat.hot,.neg{ background:var(--pink) !important; color:#fff !important; } .eyebrow{ display:inline-block; background:var(--lime); color:#000 !important; padding:7px 13px; font-family:'Anton',sans-serif !important; letter-spacing:.1em; text-transform:uppercase; border:2px solid #000; } /* ---- Buttons / actions ---- */ .actions a,.btn,button,.button{ font-weight:800 !important; text-transform:uppercase; letter-spacing:.05em; border-radius:0 !important; } .btn,.button,.actions a.primary{ display:inline-block; background:var(--ink) !important; color:#fff !important; border:3px solid var(--ink) !important; padding:11px 18px; text-decoration:none; } .btn:hover,.button:hover,.actions a.primary:hover{ background:var(--blue) !important; border-color:var(--blue) !important; } .btn.ghost,.actions a.ghost{ background:#fff !important; color:#000 !important; } .btn.ghost:hover,.actions a.ghost:hover{ background:var(--cyan) !important; } /* ---- Tables ---- */ table{ border-collapse:collapse; width:100%; background:var(--card) !important; } th{ font-family:'Anton',sans-serif !important; text-transform:uppercase; letter-spacing:.02em; background:var(--ink) !important; color:#fff !important; border:2px solid var(--ink) !important; padding:10px 12px; text-align:left; } td{ border:2px solid var(--ink) !important; color:var(--ink) !important; padding:9px 12px; } tr:nth-child(even) td{ background:#F3EEE2 !important; } tr:hover td{ background:var(--lime) !important; } /* ---- Media / thumbnails ---- */ .thumb,img.thumb,.cover,figure img{ border:3px solid var(--ink) !important; border-radius:0 !important; } /* ---- Misc ---- */ hr{ border:none; border-top:3px solid var(--ink); } input,select,textarea{ border:2px solid var(--ink) !important; border-radius:0 !important; background:#fff !important; color:#000 !important; font-family:'Archivo',sans-serif; } /* ---- Gradient footer (injected as .ug-foot) ---- */ .ug-foot{ background:var(--grad); color:#fff; padding:34px 22px; margin-top:44px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; } .ug-foot .m{ font-family:'Anton',sans-serif; text-transform:uppercase; font-size:26px; color:#fff; line-height:1.05; } .ug-foot a{ color:#fff !important; font-weight:800; text-transform:uppercase; letter-spacing:.06em; font-size:13px; }