/* ReelCrew shared brand + document styles for the legal/support pages. Matches the landing page: void/navy background, Syne headings, DM Sans body, red/gold/teal accents. Pair with the Syne + DM Sans Google Fonts that each page loads in its . */ :root { --void:#0D0D14; --navy:#1A1A2E; --red:#E94560; --gold:#F5A623; --teal:#3ECFB2; --dim:#8A8C9A; --border:rgba(255,255,255,0.10); --surface:rgba(255,255,255,0.04); --text:#FFFFFF; --text-2:#C7C8D1; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--void); color:var(--text-2); font-family:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; } a { color:var(--teal); text-decoration:none; } a:hover { text-decoration:underline; } .accent { background:linear-gradient(90deg,var(--gold),var(--teal)); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ---- Header / footer bars (shared with the landing page look) ---- */ .site-header { position:sticky; top:0; z-index:10; background:rgba(13,13,20,0.72); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } .site-header .inner, .site-footer .inner { max-width:760px; margin:0 auto; padding:0 24px; } .site-header .inner { height:60px; display:flex; align-items:center; justify-content:space-between; } .brand { display:flex; align-items:center; gap:9px; font-family:"Syne",sans-serif; font-weight:800; font-size:1.15rem; color:var(--text); } .brand:hover { text-decoration:none; } .brand img { width:28px; height:28px; border-radius:7px; } .site-header .home { color:var(--text-2); font-weight:500; font-size:.92rem; } .site-header .home:hover { color:#fff; text-decoration:none; } /* ---- Document body ---- */ .wrap { max-width:760px; margin:0 auto; padding:44px 24px 72px; } h1 { font-family:"Syne",sans-serif; font-weight:800; letter-spacing:-0.02em; line-height:1.15; font-size:clamp(1.9rem,4vw,2.5rem); color:var(--text); margin:0 0 6px; } h2 { font-family:"Syne",sans-serif; font-weight:700; font-size:1.32rem; color:var(--text); margin:40px 0 10px; padding-top:22px; border-top:1px solid var(--border); } h3 { font-family:"Syne",sans-serif; font-weight:700; font-size:1.08rem; color:var(--text); margin:26px 0 8px; } p, li { font-size:1.02rem; } ul, ol { padding-left:22px; } li { margin:6px 0; } strong { color:var(--text); font-weight:600; } em { color:var(--text); } .eff { color:var(--dim); font-size:.9rem; margin:0 0 28px; } .eff strong { color:var(--text-2); } .tmdb { border-left:3px solid var(--teal); background:var(--surface); padding:12px 16px; margin:20px 0; color:var(--text-2); font-style:italic; border-radius:0 8px 8px 0; } .legal { font-size:.92rem; color:var(--text-2); } /* ---- FAQ accordions ---- */ .faq h2 { margin-top:38px; } .faq details { border:1px solid var(--border); border-radius:12px; margin:10px 0; background:var(--surface); } .faq summary { cursor:pointer; list-style:none; padding:15px 18px; gap:14px; display:flex; align-items:center; justify-content:space-between; font-family:"Syne",sans-serif; font-weight:700; font-size:1.05rem; color:var(--text); } .faq summary::-webkit-details-marker { display:none; } .faq summary::after { content:"+"; color:var(--teal); font-size:1.5rem; font-weight:400; line-height:1; } .faq details[open] summary::after { content:"\2013"; } .faq details > :not(summary) { margin:0; padding:0 18px 16px; color:var(--text-2); } .faq details > :not(summary) a { color:var(--teal); } /* ---- Changelog ---- */ .changelog h2 { display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; } .changelog .rel-date { font-family:"DM Sans",sans-serif; font-weight:500; font-size:.88rem; color:var(--dim); letter-spacing:0; } .changelog li { margin:9px 0; } /* ---- Footer ---- */ .site-footer { border-top:1px solid var(--border); padding:30px 0 52px; margin-top:20px; } .site-footer .inner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 24px; } .site-footer .links { display:flex; flex-wrap:wrap; gap:8px 22px; } .site-footer a { color:var(--text-2); font-size:.9rem; } .site-footer a:hover { color:#fff; text-decoration:none; } .site-footer .copy { color:var(--dim); font-size:.82rem; width:100%; margin-top:12px; }