/* =================================================================== Lydbokstudio =================================================================== */ :root{ --bg: #0d0f14; --bg-glow: #171b25; --surface: #14171f; --surface-2: #1b1f29; --surface-3: #232834; --line: #272c38; --line-soft: #1f2430; --text: #eceef4; --text-dim: #9aa3b6; --text-faint:#6b7488; --accent: #e8a13a; --accent-dim:#8a5f1e; --blue: #79a9f5; --green: #56c88a; --red: #f2706b; --r-sm: 9px; --r: 14px; --r-lg: 20px; /* rgb-kanaler, ikke hex — saa gradientene kan fade til samme farge med alpha 0 */ --glow-cool: 38 48 74; --glow-warm: 232 161 58; --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px -12px rgba(0,0,0,.6); --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif; --serif: "Iowan Old Style", "Palatino Linotype", Georgia, ui-serif, serif; --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; } @media (prefers-color-scheme: light){ :root{ --bg:#f4f5f8; --bg-glow:#e9ebf1; --surface:#ffffff; --surface-2:#f4f5f9; --surface-3:#e9ebf1; --line:#e0e3ec; --line-soft:#eaecf3; --text:#151821; --text-dim:#5d6577; --text-faint:#8b93a5; --accent:#b8730f; --accent-dim:#e8c99a; --blue:#2f6ad0; --green:#1f8f56; --red:#c93a34; --glow-cool: 208 216 236; --glow-warm: 232 178 96; --shadow: 0 1px 2px rgba(20,25,40,.06), 0 12px 28px -14px rgba(20,25,40,.18); } } *{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; } html{ min-height:100%; } body{ margin:0; min-height:100vh; /* Tre regler for at fadingen skal bli pen: 1) `fixed` — ellers stopper gradienten ved bunnen av og lager en synlig vannrett skjoet naar siden er kort. 2) Sluttfargen er SAMME farge med alpha 0, aldri `transparent`. I sRGB betyr `transparent` gjennomsiktig SVART, saa midtpartiet blir gramuddent. 3) Myke, store flekker med lav metning — og en stoylag over (body::before) som bryter opp banding-ringene 8-bits farge ellers gir. */ background-color:var(--bg); background-image: radial-gradient(1400px 820px at 28% -22%, rgb(var(--glow-cool) / .62), rgb(var(--glow-cool) / 0) 74%), radial-gradient(900px 600px at 88% -6%, rgb(var(--glow-warm) / .06), rgb(var(--glow-warm) / 0) 64%); background-attachment:fixed; background-repeat:no-repeat; color:var(--text); font:400 15px/1.6 var(--font); letter-spacing:-.004em; -webkit-font-smoothing:antialiased; } /* Finkornet stoy over bakgrunnen. Uten den blir store, morke gradienter liggende i synlige ringer fordi 8-bits farge ikke har nok trinn. Filmbransjen kaller det dithering; her holder ~3,5 % fraktal stoy. */ body::before{ content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-color-scheme: light){ body::before{ opacity:.022; } } h1,h2,h3{ margin:0; letter-spacing:-.022em; font-weight:650; } p{ margin:0; } code{ font:12.5px/1.4 var(--mono); background:var(--surface-3); padding:1px 5px; border-radius:5px; } /* ---------------------------------------------------------- topbar --- */ .topbar{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); } .topbar-inner{ max-width:1140px; margin:0 auto; padding:14px 28px; display:flex; align-items:center; gap:16px; } .brand{ display:flex; align-items:center; gap:12px; } .mark{ width:38px; height:38px; display:grid; place-items:center; font-size:19px; border-radius:11px; background:linear-gradient(150deg, var(--surface-3), var(--surface-2)); border:1px solid var(--line); box-shadow:var(--shadow); } .brand-text{ display:flex; flex-direction:column; line-height:1.25; } .brand-text b{ font-size:15.5px; font-weight:650; letter-spacing:-.02em; } .brand-text i{ font-style:normal; font-size:12.5px; color:var(--text-faint); } /* ----------------------------------------------------------- shell --- */ .shell{ max-width:1140px; margin:0 auto; padding:32px 28px 96px; display:grid; grid-template-columns:minmax(0,1fr) 312px; gap:24px; align-items:start; } .flow{ display:flex; flex-direction:column; gap:18px; min-width:0; } /* uten bok finnes ikke sidepanelet — da skal innholdet staa midt paa siden, ikke forskjovet til venstre av en tom kolonne */ .shell:has(.rail-card.hidden){ grid-template-columns:minmax(0,1fr); max-width:820px; } .shell:has(.rail-card.hidden) .rail{ display:none; } @media (max-width:980px){ .shell{ grid-template-columns:minmax(0,1fr); padding:22px 18px 80px; } } /* ------------------------------------------------------------ card --- */ .card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 26px 26px; box-shadow:var(--shadow); } .card-head{ display:flex; align-items:flex-start; gap:14px; margin-bottom:20px; } .card-head h2{ font-size:16.5px; } .card-sub{ font-size:13px; color:var(--text-faint); margin-top:3px; max-width:52ch; } .step{ flex:none; width:27px; height:27px; display:grid; place-items:center; border-radius:50%; font-size:12.5px; font-weight:700; color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, transparent); border:1px solid color-mix(in srgb, var(--accent) 32%, transparent); margin-top:1px; } .pill{ margin-left:auto; flex:none; font-size:12px; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line); padding:4px 11px; border-radius:99px; white-space:nowrap; } .hidden{ display:none !important; } .note{ font-size:12.5px; color:var(--text-faint); } .mono{ font-family:var(--mono); font-size:12px; } /* ------------------------------------------------------------ drop --- */ .drop{ border:1.5px dashed var(--line); border-radius:var(--r); background:linear-gradient(180deg, var(--surface-2), transparent); padding:40px 24px 34px; text-align:center; cursor:pointer; transition:border-color .18s, background .18s, transform .18s; } .drop:hover{ border-color:color-mix(in srgb,var(--accent) 55%,var(--line)); } .drop.over{ border-color:var(--accent); transform:scale(1.006); background:color-mix(in srgb, var(--accent) 9%, var(--surface-2)); } .drop-icon{ font-size:34px; line-height:1; margin-bottom:12px; opacity:.9; } .drop-main{ font-size:16px; font-weight:600; letter-spacing:-.02em; } .drop-sub{ font-size:13.5px; color:var(--text-dim); margin-top:4px; } .drop-hint{ font-size:12px; color:var(--text-faint); margin-top:12px; } .linklike{ background:none; border:none; padding:0; font:inherit; color:var(--accent); cursor:pointer; text-decoration:underline; text-underline-offset:2px; } .linklike:hover{ color:var(--text); } .source-hint{ margin-top:13px; text-align:center; font-size:12.5px; color:var(--text-faint); } .source-hint a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; } .source-hint a:hover{ color:var(--text); } .picked{ display:flex; align-items:center; gap:11px; padding:13px 16px; border-radius:var(--r); font-size:13.5px; background:color-mix(in srgb, var(--green) 8%, var(--surface-2)); border:1px solid color-mix(in srgb, var(--green) 26%, transparent); } .picked-ico{ flex:none; width:20px; height:20px; display:grid; place-items:center; border-radius:50%; background:var(--green); color:#0b1410; font-size:11px; font-weight:800; } .picked-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:550; } .parsing{ display:flex; align-items:center; gap:10px; padding:16px 2px; color:var(--text-dim); font-size:13.5px; } .spin{ width:15px; height:15px; border:2px solid var(--line); border-top-color:var(--accent); border-radius:50%; animation:sp .7s linear infinite; } @keyframes sp{ to{ transform:rotate(360deg); } } .alert{ margin-top:14px; padding:12px 14px; border-radius:var(--r-sm); font-size:13px; background:color-mix(in srgb, var(--red) 10%, transparent); border:1px solid color-mix(in srgb, var(--red) 40%, transparent); color:var(--red); white-space:pre-wrap; } /* -------------------------------------------------------- kapitler --- */ .chips{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; } .chip{ font:inherit; font-size:12.5px; cursor:pointer; color:var(--text-dim); background:var(--surface-2); border:1px solid var(--line); padding:6px 13px; border-radius:99px; transition:.14s; } .chip:hover{ color:var(--text); border-color:var(--accent); } .chapters{ list-style:none; margin:0; padding:0; max-height:342px; overflow-y:auto; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-2); } .chapters li{ display:flex; align-items:center; gap:13px; padding:10px 15px; border-bottom:1px solid var(--line-soft); cursor:pointer; transition:background .12s; } .chapters li:last-child{ border-bottom:none; } .chapters li:hover{ background:var(--surface-3); } .ch-num{ flex:none; width:24px; font-size:11.5px; color:var(--text-faint); font-family:var(--mono); text-align:right; } .ch-title{ flex:1; min-width:0; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ch-time{ flex:none; font-size:11.5px; color:var(--text-faint); font-variant-numeric:tabular-nums; background:var(--surface); border:1px solid var(--line); padding:2px 8px; border-radius:99px; } li.off .ch-title, li.off .ch-num{ opacity:.42; } /* egne avkryssingsbokser */ input[type=checkbox]{ appearance:none; -webkit-appearance:none; flex:none; margin:0; width:17px; height:17px; border-radius:5px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; position:relative; transition:.14s; } input[type=checkbox]:hover{ border-color:var(--accent); } input[type=checkbox]:checked{ background:var(--accent); border-color:var(--accent); } input[type=checkbox]:checked::after{ content:""; position:absolute; left:5px; top:1.5px; width:4px; height:9px; border:solid #12141a; border-width:0 2px 2px 0; transform:rotate(43deg); } /* --------------------------------------------------------- skjema ---- */ .fields{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px 16px; margin-bottom:16px; } .fields:last-of-type{ margin-bottom:0; } .span2{ grid-column:span 2; } @media (max-width:620px){ .fields{ grid-template-columns:1fr; } .span2{ grid-column:span 1; } } .field{ display:flex; flex-direction:column; gap:8px; min-width:0; } .label{ font-size:12.5px; color:var(--text-dim); display:flex; gap:6px; align-items:baseline; } .label b{ color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; } .select{ position:relative; } .select::after{ content:""; position:absolute; right:13px; top:50%; width:7px; height:7px; border:solid var(--text-faint); border-width:0 1.6px 1.6px 0; transform:translateY(-70%) rotate(45deg); pointer-events:none; } select{ appearance:none; -webkit-appearance:none; width:100%; font:inherit; font-size:13.5px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 34px 10px 12px; cursor:pointer; transition:.14s; } select:hover{ border-color:color-mix(in srgb,var(--accent) 50%,var(--line)); } select:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; } .text-input{ width:100%; font:inherit; font-size:13.5px; color:var(--text); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; transition:.14s; } .text-input:focus{ outline:none; border-color:var(--accent); } input[type=range]{ appearance:none; -webkit-appearance:none; width:100%; height:22px; background:transparent; cursor:pointer; margin:0; } input[type=range]::-webkit-slider-runnable-track{ height:5px; border-radius:99px; background:var(--surface-3); border:1px solid var(--line); } input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:17px; height:17px; margin-top:-7px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 1px 6px rgba(0,0,0,.45); transition:transform .12s; } input[type=range]:hover::-webkit-slider-thumb{ transform:scale(1.12); } input[type=range]::-moz-range-track{ height:5px; border-radius:99px; background:var(--surface-3); } input[type=range]::-moz-range-thumb{ width:15px; height:15px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); } /* bryter */ .switch{ display:flex; align-items:center; gap:13px; cursor:pointer; margin-top:4px; } .switch input{ position:absolute; opacity:0; pointer-events:none; } .track{ flex:none; width:42px; height:24px; border-radius:99px; position:relative; background:var(--surface-3); border:1px solid var(--line); transition:.18s; } .track::after{ content:""; position:absolute; left:3px; top:2.5px; width:17px; height:17px; border-radius:50%; background:var(--text-faint); transition:.18s; } .switch input:checked + .track{ background:color-mix(in srgb,var(--accent) 30%,transparent); border-color:var(--accent); } .switch input:checked + .track::after{ left:21px; background:var(--accent); } .switch-text{ display:flex; flex-direction:column; line-height:1.35; } .switch-text b{ font-size:13.5px; font-weight:550; } .switch-text i{ font-style:normal; font-size:12px; color:var(--text-faint); } /* -------------------------------------------------------- knapper ---- */ .btn{ font:inherit; font-size:13.5px; font-weight:550; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:var(--r-sm); text-decoration:none; color:var(--text); background:var(--surface-2); border:1px solid var(--line); transition:.14s; } .btn:hover{ border-color:var(--accent); color:var(--text); } .btn:disabled{ opacity:.4; cursor:not-allowed; border-color:var(--line); } .btn.primary{ background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 92%,#fff), var(--accent)); color:#17130a; border-color:transparent; font-weight:650; } .btn.primary:hover:not(:disabled){ filter:brightness(1.07); } .btn.primary:disabled{ background:var(--surface-3); color:var(--text-faint); } .btn.block{ width:100%; padding:12px 16px; font-size:14.5px; } .ico{ font-size:11px; } .preview-bar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:4px; } audio{ display:none; } /* egen avspiller — den innebygde