/* Tinnitus-lab — to temaer. Lyst er standard; mørkt via . */ :root{ --bunn:#F4F6F9; --kort:#FFFFFF; --kant:#E3E8F0; --kant-sterk:#CBD4E1; --tekst:#182338; --dus:#5C6B85; --aksent:#238B68; --aksent-2:#1E7A5B; --aksent-bg:#E7F4EF; --aksent-tekst:#FFFFFF; --blaa:#3563C4; --feil:#C0392B; --gul:#D9A62E; --skygge:0 1px 2px rgba(24,35,56,.06),0 10px 30px rgba(24,35,56,.07); --skygge-lett:0 1px 3px rgba(24,35,56,.08); --sp-bunn:#FBFCFE; --sp-soyle:#2E9E77; --sp-grense:#D9A62E; --radius:18px; --radius-s:12px; } [data-tema="mork"]{ --bunn:#0F1420; --kort:#1A2233; --kant:#28334D; --kant-sterk:#3A4763; --tekst:#E8ECF4; --dus:#93A0B8; --aksent:#6FBF9E; --aksent-2:#5DAF8D; --aksent-bg:#22352E; --aksent-tekst:#0C1A14; --blaa:#7FA7E8; --feil:#E8907F; --gul:#E8C46F; --skygge:0 10px 30px rgba(0,0,0,.35); --skygge-lett:0 1px 3px rgba(0,0,0,.4); --sp-bunn:#0F1420; --sp-soyle:#6FBF9E; --sp-grense:#E8C46F; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bunn);color:var(--tekst); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; -webkit-font-smoothing:antialiased;transition:background .25s,color .25s} /* ---------- topp ---------- */ header{position:sticky;top:0;z-index:20;display:flex;align-items:center; justify-content:space-between;padding:12px 22px; background:color-mix(in srgb,var(--kort) 82%,transparent); -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border-bottom:1px solid var(--kant)} .merke{font-size:18px;letter-spacing:-.01em;white-space:nowrap} .merke b{font-weight:700} #hode-bruker{display:flex;align-items:center;gap:8px} #hb-navn{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px} @media(max-width:520px){#hb-navn{display:none}} /* ---------- struktur ---------- */ main{max-width:720px;margin:0 auto;padding:26px 16px 70px} h1{font-size:clamp(24px,5vw,30px);line-height:1.2;letter-spacing:-.02em;margin:0 0 12px} h1 em{color:var(--aksent);font-style:normal} h2{font-size:19px;letter-spacing:-.01em;margin:0 0 8px} h3{font-size:15.5px;margin:22px 0 8px} .kort{background:var(--kort);border:1px solid var(--kant);border-radius:var(--radius); padding:26px;margin-bottom:18px;box-shadow:var(--skygge)} .smal{max-width:460px;margin:5vh auto 0} .dus{color:var(--dus)} .fin{color:var(--dus);font-size:12.5px;line-height:1.55} .midt{text-align:center} .skjult{display:none!important} .feil{color:var(--feil);font-size:14px} a{color:var(--blaa)} /* ---------- knapper ---------- */ .knapp,.knapp-sekundar,.knapp-google{display:inline-flex;align-items:center; justify-content:center;gap:10px;width:100%;padding:13px 18px; border-radius:var(--radius-s);border:none;cursor:pointer; font:600 15.5px/1 inherit;margin:6px 0;text-decoration:none; transition:transform .06s,box-shadow .15s,filter .15s} .knapp{background:linear-gradient(180deg,var(--aksent),var(--aksent-2)); color:var(--aksent-tekst);box-shadow:var(--skygge-lett)} .knapp:hover{filter:brightness(1.06)} .knapp:active{transform:translateY(1px)} .knapp-sekundar{background:var(--kort);color:var(--tekst); border:1.5px solid var(--kant-sterk)} .knapp-sekundar:hover{border-color:var(--aksent);color:var(--aksent)} .knapp-google{background:#fff;color:#1a1a1a;border:1.5px solid #DADCE0} .knapp-google:hover{box-shadow:var(--skygge-lett)} .knapp-liten{background:transparent;color:var(--dus);border:1px solid var(--kant-sterk); border-radius:999px;padding:7px 14px;font:600 12.5px/1 inherit;cursor:pointer; margin:2px;transition:all .15s;white-space:nowrap} .knapp-liten:hover{color:var(--aksent);border-color:var(--aksent)} #kn-tema{font-size:15px;padding:7px 11px} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{ outline:2.5px solid var(--aksent);outline-offset:2px} /* ---------- skjema ---------- */ .rad{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0} .rad .knapp,.rad .knapp-sekundar{width:auto;flex:1;margin:0} label{display:block;margin:12px 0;font-size:13.5px;font-weight:600;color:var(--dus)} input[type=email],input[type=password],input[type=text],input[type=number],select{ width:100%;margin-top:5px;padding:12px 13px;border-radius:var(--radius-s); border:1.5px solid var(--kant-sterk);background:var(--bunn);color:var(--tekst); font:400 15px/1.3 inherit;transition:border-color .15s} input:focus,select:focus{border-color:var(--aksent);outline:none} input[type=text]#oppskrift-navn{width:auto;flex:1;margin-top:0} .skille{display:flex;align-items:center;gap:12px;color:var(--dus); font-size:13px;margin:16px 0} .skille::before,.skille::after{content:"";flex:1;height:1px;background:var(--kant)} /* ---------- lydvalg ---------- */ .lydgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:10px;margin:14px 0} .lydkort{background:var(--bunn);border:1.5px solid var(--kant); border-radius:var(--radius-s);padding:15px 10px;text-align:center;cursor:pointer; font-size:14px;font-weight:600;color:var(--dus);transition:all .15s} .lydkort:hover{border-color:var(--kant-sterk);transform:translateY(-1px)} .lydkort.valgt{border-color:var(--aksent);color:var(--aksent); background:var(--aksent-bg);box-shadow:var(--skygge-lett)} .lydkort .ikon{font-size:24px;display:block;margin-bottom:5px} /* ---------- A/B ---------- */ .ab-rad{display:flex;gap:14px;margin:20px 0 14px} .ab-knapp{flex:1;padding:36px 0;font:700 32px/1 inherit; border-radius:var(--radius);cursor:pointer;background:var(--bunn); color:var(--dus);border:2px solid var(--kant);transition:all .15s} .ab-knapp:hover{border-color:var(--kant-sterk)} .ab-knapp.aktiv{border-color:var(--aksent);color:var(--aksent); background:var(--aksent-bg);box-shadow:0 0 0 4px color-mix(in srgb,var(--aksent) 16%,transparent)} /* ---------- glidere ---------- */ .glider{margin:16px 0} .glider b{color:var(--tekst)} input[type=range]{width:100%;margin-top:8px;accent-color:var(--aksent)} .snarveier{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0} /* ---------- lag ---------- */ .lag{background:var(--bunn);border:1px solid var(--kant); border-radius:var(--radius-s);padding:14px 16px;margin:10px 0} .lag .lag-topp{display:flex;justify-content:space-between;align-items:center; font-weight:700;color:var(--tekst)} .lag .lag-band{color:var(--dus);font-size:12.5px;margin:3px 0 8px} .lag .rad{margin:4px 0} .lag label{margin:4px 0;display:flex;align-items:center;gap:10px} .lag select{width:auto} .lag input[type=range]{flex:1;width:auto;margin-top:0} canvas#spektrum{width:100%;height:140px;background:var(--sp-bunn); border:1px solid var(--kant);border-radius:var(--radius-s);margin:16px 0 6px} /* ---------- oppskrifter ---------- */ .oppskrift{display:flex;align-items:center;gap:10px;padding:11px 0; border-bottom:1px solid var(--kant)} .oppskrift:last-child{border-bottom:none} .oppskrift .navn{flex:1;color:var(--tekst);font-weight:600} .oppskrift .tid{font-size:12px;color:var(--dus)} details{margin-top:20px;border-top:1px solid var(--kant);padding-top:16px} summary{cursor:pointer;font-weight:700;color:var(--tekst)} summary:hover{color:var(--aksent)} @media(max-width:560px){ .kort{padding:18px} .ab-knapp{padding:28px 0} main{padding:16px 12px 60px} } /* ---------- språkvelger ---------- */ .sprak{padding:7px 9px;border-radius:999px;border:1px solid var(--kant-sterk); background:var(--kort);color:var(--dus);font:600 12.5px/1.2 inherit; max-width:130px;cursor:pointer;margin-top:0} .sprak:hover{color:var(--aksent);border-color:var(--aksent)} /* trang topprad på smale skjermer */ @media(max-width:480px){ header{padding:10px 10px;gap:6px} .merke{font-size:16px} .sprak{max-width:86px;padding:6px 4px;font-size:11.5px} .knapp-liten{padding:6px 9px;font-size:11.5px} #hb-navn{display:none} }