/* =========================================================== CREDENCE — shared styles (styles.css) Themed via [data-theme] on . Change a token once, it updates across every page. =========================================================== */ :root{ /* brand palette (constant in both themes) */ --pink:#FF025D; --pink-dark:#C80049; --coral:#FF958A; --orange:#FF9B05; --yellow:#FFC93D; --red:#FF0000; --green:#1a7431; --serif:'Cormorant Garamond', Georgia, serif; --sans:'Inter', system-ui, sans-serif; } /* ---------- LIGHT (default) ---------- */ :root, [data-theme="light"]{ --paper:#FAF8F5; --surface:#ffffff; --ink:#141414; --muted:#6b6660; --line:rgba(20,20,20,0.10); --nav-bg:rgba(250,248,245,0.85); --btn-bg:rgba(255,2,93,0.10); --btn-border:rgba(255,2,93,0.30); --btn-text:var(--pink-dark); --ring-track:rgba(20,20,20,0.07); --glow-pink:rgba(255,2,93,0.10); --glow-yellow:rgba(255,201,61,0.14); } /* ---------- DARK ---------- */ [data-theme="dark"]{ --paper:#121011; --surface:#1c1a1b; --ink:#F3EFEA; --muted:#9a938c; --line:rgba(243,239,234,0.12); --nav-bg:rgba(18,16,17,0.85); --btn-bg:rgba(255,2,93,0.18); --btn-border:rgba(255,2,93,0.45); --btn-text:#ff7aa6; --ring-track:rgba(243,239,234,0.10); --glow-pink:rgba(255,2,93,0.16); --glow-yellow:rgba(255,201,61,0.10); } *{margin:0;padding:0;box-sizing:border-box;} body{ font-family:var(--sans); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; transition:background .3s ease, color .3s ease; } /* ---------- NAV ---------- */ .nav{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.6rem; border-bottom:1px solid var(--line); background:var(--nav-bg); backdrop-filter:blur(8px); position:sticky; top:0; z-index:50; } .brand{ font-family:var(--serif); font-weight:600; font-size:1.7rem; letter-spacing:0.05em; color:var(--ink); text-decoration:none; } .nav-right{display:flex; align-items:center; gap:1.4rem;} .nav-links{display:flex; align-items:center; gap:1.8rem; list-style:none;} .nav-links a{ font-size:0.95rem; font-weight:500; color:var(--muted); text-decoration:none; transition:color .2s ease; } .nav-links a:hover, .nav-links a.active{color:var(--pink);} .theme-toggle{ background:none; border:1px solid var(--line); border-radius:999px; width:38px; height:38px; cursor:pointer; color:var(--ink); display:grid; place-items:center; font-size:1.1rem; transition:border-color .2s ease, background .2s ease; } .theme-toggle:hover{border-color:var(--pink);} .theme-toggle:focus-visible{outline:3px solid var(--coral); outline-offset:2px;} .hamburger{ display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; } .hamburger span{width:24px; height:2px; background:var(--ink); transition:.3s;} .hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);} .hamburger.open span:nth-child(2){opacity:0;} .hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} @media (max-width:760px){ .nav-links{ position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; align-items:stretch; background:var(--surface); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition:max-height .3s ease; } .nav-links.open{max-height:320px;} .nav-links li{border-top:1px solid var(--line);} .nav-links a{display:block; padding:1rem 1.6rem;} .hamburger{display:flex;} } /* ---------- LAYOUT PRIMITIVES ---------- */ .wrap{max-width:920px; margin:0 auto; padding:3rem 1.6rem 5rem;} .eyebrow{ font-size:0.8rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--pink); } h1{ font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,5vw,3.2rem); line-height:1.1; margin:0.5rem 0 0.8rem; } h2{font-family:var(--serif); font-weight:500; font-size:1.9rem; margin:0 0 0.6rem;} .lede{font-size:1.05rem; color:var(--muted); max-width:600px; line-height:1.6;} /* ---------- BUTTONS (light fill, darken on hover) ---------- */ .btn{ font-family:var(--sans); font-size:1rem; font-weight:500; color:var(--btn-text); background:var(--btn-bg); border:1.5px solid var(--btn-border); border-radius:12px; padding:0.95rem 1.8rem; cursor:pointer; transition:background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease; } .btn:hover{background:var(--pink); color:#fff; border-color:var(--pink);} .btn:active{transform:translateY(1px);} .btn:focus-visible{outline:3px solid var(--coral); outline-offset:2px;} .btn-pill{border-radius:999px; padding:0.9rem 2.2rem;} /* ---------- SEARCH ---------- */ .search{margin-top:2.2rem; display:flex; gap:0.7rem; flex-wrap:wrap;} .search input{ flex:1; min-width:240px; font-family:var(--sans); font-size:1rem; padding:0.95rem 1.1rem; border:1.5px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); transition:border-color .2s ease; } .search input:focus{outline:none; border-color:var(--pink);} .hint{margin-top:0.7rem; font-size:0.85rem; color:var(--muted);} .hint button{ background:none; border:none; color:var(--pink); cursor:pointer; font-size:0.85rem; text-decoration:underline; padding:0; } /* ---------- VERDICT CARD ---------- */ .verdict{ margin-top:2.4rem; background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:1.8rem; display:none; } .verdict.show{display:block; animation:rise .4s ease;} .verdict-top{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;} .score-ring{ --val:0; width:118px; height:118px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; background:conic-gradient(var(--ring) calc(var(--val)*1%), var(--ring-track) 0); } .score-ring .inner{ width:92px; height:92px; border-radius:50%; background:var(--surface); display:grid; place-items:center; text-align:center; } .score-ring .num{font-family:var(--serif); font-size:2.3rem; font-weight:600; line-height:1;} .score-ring .lbl{font-size:0.7rem; color:var(--muted); letter-spacing:0.1em; text-transform:uppercase;} .verdict-meta{flex:1; min-width:220px;} .addr{font-size:0.82rem; color:var(--muted); word-break:break-all;} .badges{display:flex; gap:0.6rem; flex-wrap:wrap; margin-top:0.7rem;} .badge{font-size:0.8rem; font-weight:600; padding:0.35rem 0.85rem; border-radius:999px;} .risk-low{background:rgba(46,160,67,0.14); color:#2ea043;} .risk-medium{background:rgba(255,155,5,0.16); color:var(--orange);} .risk-high{background:rgba(255,0,0,0.12); color:#ff5a5a;} .risk-unknown{background:rgba(120,120,120,0.15); color:var(--muted);} .badge.type{background:var(--btn-bg); color:var(--btn-text);} .conf{margin-top:0.9rem; font-size:0.9rem; color:var(--muted);} .conf b{color:var(--ink); font-weight:600;} .reasons{margin-top:1.6rem; border-top:1px solid var(--line); padding-top:1.3rem;} .reasons h3{font-size:0.8rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:0.9rem;} .reason{display:flex; gap:0.8rem; padding:0.8rem 0; border-bottom:1px solid var(--line);} .reason:last-child{border-bottom:none;} .sev{flex-shrink:0; width:8px; height:8px; border-radius:50%; margin-top:0.45rem;} .sev.high{background:var(--red);} .sev.medium{background:var(--orange);} .sev.info{background:var(--muted); opacity:0.5;} .reason-body .rtext{font-size:0.95rem; line-height:1.5;} .reason-body .rev{font-size:0.82rem; color:var(--muted); margin-top:0.25rem;} /* ---------- STAT CARDS ---------- */ .stats{margin-top:3rem; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(150px,1fr));} .stat{background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:1.3rem;} .stat .v{font-family:var(--serif); font-size:2rem; font-weight:600; line-height:1;} .stat .k{font-size:0.82rem; color:var(--muted); margin-top:0.4rem;} .stat .bar{height:3px; border-radius:2px; margin-top:0.9rem;} /* ---------- HOW IT WORKS ---------- */ .steps{margin-top:2.4rem; display:grid; gap:1.2rem;} .step{ display:flex; gap:1.2rem; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.5rem; } .step-num{ font-family:var(--serif); font-size:1.6rem; font-weight:600; color:var(--pink); flex-shrink:0; width:2.2rem; } .step h3{font-size:1.1rem; font-weight:600; margin-bottom:0.35rem;} .step p{font-size:0.95rem; color:var(--muted); line-height:1.6;} .principle{ margin-top:1rem; padding:1.3rem 1.5rem; border-left:3px solid var(--pink); background:var(--surface); border-radius:0 12px 12px 0; } .principle b{color:var(--ink);} .principle p{color:var(--muted); line-height:1.6; font-size:0.97rem;} @keyframes rise{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}} @media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important;}} /* ---------- RECOMMENDATION BANNER ---------- */ .rec{ display:none; gap:1rem; align-items:flex-start; margin-top:1.6rem; padding:1.1rem 1.3rem; border-radius:14px; border:1px solid var(--line); } .rec-action{ font-size:0.72rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.4rem 0.7rem; border-radius:8px; flex-shrink:0; color:#fff; } .rec-headline{font-weight:600; font-size:1rem; margin-bottom:0.2rem;} .rec-detail{font-size:0.9rem; color:var(--muted); line-height:1.5;} .rec-proceed{background:rgba(46,160,67,0.10); border-color:rgba(46,160,67,0.35);} .rec-proceed .rec-action{background:#2ea043;} .rec-caution{background:rgba(255,155,5,0.10); border-color:rgba(255,155,5,0.35);} .rec-caution .rec-action{background:var(--orange);} .rec-avoid{background:rgba(255,0,0,0.08); border-color:rgba(255,0,0,0.30);} .rec-avoid .rec-action{background:var(--red);} .rec-verify{background:rgba(120,120,120,0.10); border-color:var(--line);} .rec-verify .rec-action{background:#6b6660;}