/* ========================================================================== Érzelemszabályozási napló – saját, #naplo-ra szűkített stíluslap. A prototípus (Projektek/Érzelemszabályozási napló/prototipus/ erzelemnaplo-prototipus-v1.html) CSS-e, a lillenesek.hu márkatokenjeire áthangolva - ugyanaz a technika, mint az "Egyetemista lettem!" kvíznél (kviz.css, #lm1): a helyi CSS-változók a közös style.css tokenjeire mutatnak, a szabályok a saját névterükben maradnak. A prototípus protípus-sávja, a zöld szakmai jegyzetek és a mintahét-kapcsoló innen kimaradtak - a napló üres állapotból indul. ========================================================================== */ #naplo{--paper:var(--krem);--card:var(--feher);--ink:var(--szoveg);--ink-soft:var(--szoveg-halvany); --line:var(--vonal);--track:var(--rez-100);--accent:var(--rez);--accent-deep:var(--rez-700); --accent-onpetrol:var(--rez-300);--wash:var(--rez-100);--wash-soft:var(--krem-2);--radius:var(--r);--cream:#fff; --btn-ink:#fff;--dark-chip:#2a2a2a; --accent-text:#845a46; --disp:var(--serif);--body:var(--sans);} /* box-sizing:border-box-ot a közös style.css már globálisan beállítja minden elemre, itt nem kell ismételni */ #naplo, #naplo *, #naplo *::before, #naplo *::after{margin:0;padding:0;-webkit-tap-highlight-color:transparent} #naplo [hidden]{display:none!important} /* --- védőréteg: semlegesíti a közös style.css globális elem-stílusait a naplón belül --- */ #naplo p{padding:0;text-align:left} #naplo h1,#naplo h2,#naplo h3,#naplo h4{padding:0;color:var(--ink);text-transform:none;letter-spacing:normal} #naplo ul,#naplo ol,#naplo li{padding:0;margin:0;line-height:inherit;list-style-position:outside} #naplo section,#naplo div,#naplo footer,#naplo header{background:none;padding:0;margin:0;border:0;float:none;width:auto} #naplo button,#naplo input,#naplo textarea,#naplo select{font-family:inherit;font-size:inherit;line-height:inherit; text-transform:none;letter-spacing:normal;-webkit-appearance:none;appearance:none; box-shadow:none;text-shadow:none;min-height:0;min-width:0;max-width:none;border-radius:0} #naplo button{background:none;border:0;color:inherit;cursor:pointer} #naplo button:hover,#naplo button:focus{box-shadow:none} #naplo a{text-decoration:none;box-shadow:none;border:0} /* svg/img max-width:100% és height:auto már megvan globálisan a style.css-ben (img, picture, svg, video szabály) */ /* ------------------------------------------------------------------- */ #naplo{display:block;position:relative;font-size:16.5px;text-align:left; font-family:var(--body);color:var(--ink);line-height:1.6;font-variant-numeric:lining-nums; background:transparent;padding:16px 14px 40px} #naplo .wrap{max-width:560px;margin:0 auto} @media(min-width:430px){#naplo .wrap{padding-left:20px;padding-right:20px}} #naplo header{padding:18px 0 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);margin-bottom:16px} #naplo header .brand{margin-right:auto;min-width:0} #naplo .brand{font-family:var(--disp);font-weight:700;font-size:19px;white-space:nowrap} #naplo .brand span{font-family:var(--body);color:var(--ink-soft);font-weight:500;font-size:12.5px} #naplo .brand .short{display:none} @media(max-width:440px){#naplo .brand .long{display:none}#naplo .brand .short{display:inline}} #naplo .num{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--accent-text);border:1.5px solid var(--accent);border-radius:999px;padding:3px 10px;background:var(--card);white-space:nowrap} #naplo .progress{height:4px;background:var(--track);border-radius:999px;margin:0 0 24px;overflow:hidden} #naplo .progress i{display:block;height:100%;width:5%;background:var(--accent);border-radius:999px;transition:width .35s ease} #naplo .eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-text);margin-bottom:10px} #naplo h2{font-family:var(--disp);color:var(--petrol);font-weight:600;font-size:38px;line-height:1.1;margin-bottom:10px;text-wrap:balance} #naplo h3{font-family:var(--disp);color:var(--petrol);font-weight:600;font-size:29px;line-height:1.18;margin-bottom:10px;text-wrap:balance} #naplo h4{font-family:var(--disp);color:var(--petrol);font-weight:700;font-size:21px;line-height:1.25;margin:16px 0 8px} #naplo h4.sec{margin-top:26px} #naplo p{margin-bottom:12px} #naplo a{color:var(--accent-text)} #naplo .lead{font-family:var(--disp);font-style:italic;font-size:21px;line-height:1.35;color:var(--ink-soft);margin-bottom:18px} #naplo .soft{color:var(--ink-soft)} #naplo .small{font-size:13.5px;color:var(--ink-soft)} #naplo .hl{background-image:linear-gradient(100deg,transparent 1%,var(--wash) 2.5%,var(--wash) 97.5%,transparent 99%);background-repeat:no-repeat;background-size:100% 72%;background-position:0 68%;padding:0 3px} #naplo .screen, #naplo .view{display:none} #naplo .screen.on, #naplo .view.on{display:block;animation:naplo-rise .35s ease both} #naplo .screen.on .hl, #naplo .view.on .hl{animation:naplo-sweep .9s ease .15s both} @keyframes naplo-sweep{from{background-size:0% 72%}to{background-size:100% 72%}} #naplo .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:0 2px 10px rgba(102,72,50,.05)} #naplo .card>h4:first-child{margin-top:0} #naplo .quotecard{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:18px 20px;margin-bottom:14px;font-family:var(--disp);font-style:italic;font-size:20px;line-height:1.45;box-shadow:0 2px 10px rgba(102,72,50,.05)} #naplo .quotecard .attr{display:block;font-family:var(--body);font-style:normal;font-size:13px;color:var(--accent-text);margin-top:9px;font-weight:600} #naplo .quotecard.sm{font-size:18px;padding:14px 17px} #naplo .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-size:15.5px;font-weight:600;border:none;border-radius:999px;padding:14px 28px;cursor:pointer;background:var(--accent-deep);color:var(--btn-ink);width:100%;margin-top:18px;transition:transform .12s ease,opacity .2s ease,background .2s ease} #naplo .btn:hover{background:#7A4D32}#naplo .btn:active{transform:scale(.985)}#naplo .btn:disabled{opacity:.35;cursor:not-allowed} #naplo .btn.ghost{background:transparent;color:var(--accent-text);border:1.5px solid var(--accent-deep)}#naplo .btn.ghost:hover{background:var(--wash-soft)} #naplo .btn.mini{width:auto;padding:10px 20px;margin-top:12px;font-size:14.5px} #naplo .navrow{display:flex;gap:10px;align-items:center;margin-top:18px} #naplo .navrow .btn{margin-top:0} #naplo .navrow .btn.back{width:auto;flex:none;padding:14px 18px} #naplo .linkbtn{font:inherit;font-size:14px;font-weight:600;color:var(--accent-text);background:none;border:none;padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} #naplo .fb{border-left:4px solid var(--accent);background:var(--card);border-radius:0 var(--radius) var(--radius) 0;padding:15px 17px;margin:6px 0 14px;font-size:15px;box-shadow:0 2px 10px rgba(102,72,50,.05);animation:naplo-rise .3s ease both} #naplo .fb .fb-title{font-family:var(--disp);font-weight:700;font-size:20px;line-height:1.25;margin-bottom:5px} #naplo .fb .tip{margin-top:10px;background:var(--wash-soft);border-radius:10px;padding:9px 12px;font-size:14px} #naplo .chip{display:block;width:100%;text-align:left;font:inherit;font-size:15px;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 15px;margin-bottom:9px;cursor:pointer;transition:border-color .15s,background .15s} #naplo .chip:hover{border-color:var(--accent)} #naplo .chip.sel{border-color:var(--accent-deep);background:var(--wash-soft);font-weight:600} #naplo .chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px} #naplo .chiprow .chip{width:auto;margin:0;padding:8px 14px;font-size:14px;border-radius:999px} #naplo input[type=text], #naplo input[type=date], #naplo textarea{width:100%;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:14px;padding:12px 15px;background:var(--card);color:var(--ink);resize:vertical} #naplo textarea{min-height:104px;line-height:1.5} #naplo textarea.short{min-height:72px} #naplo ::placeholder{color:#A8978A} #naplo .reflect{background:var(--wash-soft);border:1px solid var(--wash);border-radius:var(--radius);padding:14px 16px;font-size:14.5px;margin-top:8px;animation:naplo-rise .3s ease both} #naplo .flip{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-bottom:12px;cursor:pointer;font:inherit;color:inherit;transition:border-color .2s;box-shadow:0 2px 10px rgba(102,72,50,.05)} #naplo .flip .q{display:flex;justify-content:space-between;align-items:center;gap:10px;font-family:var(--disp);font-weight:700;font-size:20px;line-height:1.25} #naplo .flip .q .plus{flex:none;width:27px;height:27px;border-radius:50%;background:var(--wash);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-family:var(--body);font-weight:700;transition:transform .25s} #naplo .flip .a{display:block;max-height:0;overflow:hidden;transition:max-height .4s,margin .3s;color:var(--ink-soft);font-size:14.5px} #naplo .flip.open{border-color:var(--accent)}#naplo .flip.open .a{max-height:520px;margin-top:11px}#naplo .flip.open .plus{transform:rotate(45deg)} #naplo .quote{font-family:var(--disp);font-style:italic;font-size:21px;line-height:1.4} #naplo .plan{margin-top:14px;background:var(--dark-chip);color:#F7EFE7;border-radius:var(--radius);padding:16px 19px;font-size:15.5px;animation:naplo-rise .3s ease both} #naplo .plan .lbl{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);font-weight:700;margin-bottom:5px} #naplo .gets{list-style:none;margin:0 0 14px} #naplo .gets li{position:relative;padding-left:28px;margin-bottom:10px} #naplo .gets li:before{content:"✓";position:absolute;left:2px;top:0;color:var(--accent-text);font-weight:700} #naplo .mhead{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-text);margin-bottom:8px} #naplo .ql{display:block;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin:4px 0 8px} /* A visszajelzo urlap kerdesei valodi kerdesek, nem apro nagybetus urlapcimkek: a doboz cime es a negy kerdes a napló sajat cim-tipografiajat kapja. */ #naplo .vj .mhead{font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--petrol);line-height:1.25;margin-bottom:6px} #naplo .vj .vjk{display:block;font-family:var(--disp);font-size:18px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--petrol);line-height:1.3;margin:18px 0 8px;text-wrap:pretty} #naplo .vj .vjk:first-of-type{margin-top:6px} #naplo .scale-ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink-soft);margin-top:6px} #naplo .hubcard{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:12px;cursor:pointer;box-shadow:0 2px 10px rgba(102,72,50,.05);transition:border-color .15s} #naplo .hubcard:hover{border-color:var(--accent)} #naplo .hubcard .ht{display:block;font-family:var(--disp);font-weight:700;font-size:21px;line-height:1.2} #naplo .hubcard .hs{display:block;font-size:13.5px;color:var(--ink-soft);margin-top:2px} #naplo .hubcard .hp{display:block;margin-top:11px;height:5px;background:var(--track);border-radius:999px;overflow:hidden} #naplo .hubcard .hp i{display:block;height:100%;width:0;background:var(--accent);border-radius:999px} #naplo .hubcard .hstat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-text);margin-top:9px} #naplo footer{margin-top:36px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-soft);line-height:1.55} #naplo footer p{margin-bottom:8px} /* forrasmegjeloles: a licenc kotelezo, de halkan alljon a lablecben */ #naplo footer .forras{font-size:11px;opacity:.85} #naplo footer .forras a{color:inherit} @keyframes naplo-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---------- prototípus-sáv és szakmai jegyzetek (csak Lilinek) ---------- */ /* ---------- kezdőlap ---------- */ #naplo .owner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;margin-bottom:14px;box-shadow:0 2px 10px rgba(102,72,50,.05)} #naplo .on-l{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)} #naplo .on-n{font-family:var(--disp);font-style:italic;font-size:24px;font-weight:600;line-height:1.2} #naplo .on-d{font-size:13px;color:var(--ink-soft)} #naplo .field{margin-bottom:12px} #naplo .field label{display:block;font-size:13px;font-weight:600;margin-bottom:5px} #naplo .week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:10px 0} /* A csempe a telefon legfontosabb eleme: magas, nagy sorszámmal. A hétnév rövidítése (dt-wd) kikerült, a nap nevét az aria-label viszi; így a sorszám, a sáv és az infósor egy függőleges tengelyen ül. */ #naplo .dtile{font:inherit;color:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:var(--card);border:1.5px dashed var(--track);border-radius:14px;padding:12px 1px 10px;min-height:98px;cursor:pointer;min-width:0;transition:border-color .15s,transform .15s} #naplo .dtile:hover{border-color:var(--accent);transform:translateY(-1px)} #naplo .dtile.st-started{border-style:solid;border-color:var(--line)} #naplo .dtile.st-done{border-style:solid;border-color:var(--fm,var(--line));background:var(--ft,var(--card))} #naplo .dtile.is-today{box-shadow:0 0 0 2px var(--accent-deep)} /* Jövőbeli, még nem nyitható nap (a JS: disabled + .zart). Nem opacity-vel halványul, mert az a sorszám kontrasztját is vinné: a felület egy árnyalattal a lapba süllyed (--paper), a keret szaggatott és halvány, a sorszám és az infósor a halvány szövegszínt kapja (világosban 6.6:1, sötétben lásd a mérést a --paper hátterén). A hover nem mozdítja, a kurzor nem kéz. */ #naplo .dtile.zart, #naplo .dtile[disabled]{background:var(--paper);border-style:dashed;border-color:var(--line);color:var(--ink-soft);cursor:default;box-shadow:none} #naplo .dtile.zart:hover, #naplo .dtile[disabled]:hover{border-color:var(--line);transform:none} #naplo .dtile.zart .dt-n, #naplo .dtile[disabled] .dt-n{color:var(--ink-soft);font-weight:600} #naplo .dtile.zart .dt-bar, #naplo .dtile[disabled] .dt-bar{background:transparent} #naplo .dt-n{font-family:var(--disp);font-weight:700;font-size:29px;line-height:1.1;font-variant-numeric:lining-nums} #naplo .dt-bar{display:block;width:62%;height:5px;border-radius:3px;background:var(--fc,var(--track));margin:6px 0 7px} #naplo .dtile.st-empty .dt-bar{background:transparent} #naplo .dt-i{font-size:11px;font-weight:600;color:var(--ink-soft);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;line-height:1.3} #naplo .sos{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--radius);padding:16px 18px;margin:0 0 14px;box-shadow:0 2px 10px rgba(102,72,50,.05)} #naplo .sos h4{margin:0 0 4px} #naplo .sos p{margin-bottom:0} #naplo .sos .btn{margin-top:12px} /* ---------- innen folytasd: az elsődleges következő lépés ---------- */ /* Liquid glass: áttetsző, homályosított petrol üveg (ugyanaz a --uveg-* készlet, mint a többi üveges elemnél), finom belső fénykerettel és egy halvány, bal felső fényfolttal. A petrol réteg 88%-os fedésű, így a szöveg kontrasztja a legvilágosabb (fehér) mögöttes felületen és a fényfolt csúcsán is megmarad. Mért értékek (legrosszabb eset: fehér háttér + a fényfolt csúcsa): h4 7.5:1, p 6.1:1, .nextup-eb 5.1:1. A gomb a szokásos réz .btn. Sötét módban lásd a dark blokk után. */ #naplo .nextup{position:relative;color:#F7EFE7;border-radius:var(--radius);padding:20px 20px 18px;margin:4px 0 22px; background-color:rgba(11,46,46,.88); background-image:linear-gradient(155deg,var(--uveg-sotet) 0%,rgba(255,255,255,0) 58%); -webkit-backdrop-filter:var(--uveg-homaly);backdrop-filter:var(--uveg-homaly); border:1px solid var(--uveg-keret-sotet); box-shadow:0 16px 40px -18px rgba(22,78,78,.55),inset 0 1px 0 rgba(255,255,255,.30),inset 0 0 0 1px rgba(255,255,255,.05)} #naplo .nextup-eb{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#F2CFB5;margin-bottom:8px} #naplo .nextup h4{color:#fff;margin:0 0 6px;font-size:22px;font-family:var(--disp)} #naplo .nextup p{color:#EFE6DD;margin-bottom:14px;font-size:14.5px} /* a gomb a petrol üvegen világos rézfelület sötét tintával (8.7:1); a korábbi fehér felirat a --rez-700 hátterén csak 3.99:1 lett volna */ /* A gomb szándékosan a szokásos réz .btn marad: a megrendelő korábban kifejezetten kérte, hogy a fő gombok színe ne változzon a kontraszt kedvéért. */ #naplo .nextup .btn{margin-top:0} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #naplo .nextup{background-color:rgba(11,46,46,.97)} } /* ---------- szegmentált kapcsoló, lépéspontok ---------- */ #naplo .seg{display:flex;background:var(--wash-soft);border:1px solid var(--line);border-radius:999px;padding:3px;margin:0 0 18px;gap:3px} #naplo .segb{flex:1;font:inherit;font-size:14px;font-weight:600;color:var(--ink-soft);background:transparent;border:none;border-radius:999px;padding:9px 8px;cursor:pointer} #naplo .segb[aria-checked="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 4px rgba(102,72,50,.14)} #naplo .dayhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px} #naplo .dayhead .eyebrow{margin:0} #naplo .dots{display:flex;gap:2px;align-items:center} #naplo .dot{width:24px;height:24px;border:none;background:transparent;cursor:pointer;position:relative;padding:0} #naplo .dot:before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:999px;background:var(--track);transition:all .2s} #naplo .dot.has:before{background:var(--accent)} #naplo .dot.cur:before{width:18px;margin-left:-9px;background:var(--accent-deep)} /* ---------- érzelemkerék és szóválasztó ---------- */ #naplo .wheelwrap{max-width:340px;margin:0 auto 8px} #naplo .wheel{display:block;width:100%;height:auto;overflow:visible} #naplo .wseg{cursor:pointer;transition:transform .25s ease,opacity .25s} #naplo .wseg path{stroke:var(--paper);stroke-width:2} #naplo .wseg.dim{opacity:.4} #naplo .wseg:focus{outline:none} #naplo .wseg:focus-visible .wfill{stroke:var(--accent-deep);stroke-width:3} #naplo .wlab{font-family:var(--body);font-size:10.5px;font-weight:700;letter-spacing:.07em;fill:var(--dark-chip);pointer-events:none} #naplo .wbadge circle{fill:var(--dark-chip)} #naplo .wbadge text{fill:#FFFFFF;font-family:var(--body);font-size:10px;font-weight:700;pointer-events:none} #naplo .wcenter{font-family:var(--disp);font-weight:700;font-size:18px;fill:var(--ink)} #naplo .wsub{font-family:var(--body);font-size:8.5px;font-weight:700;letter-spacing:.12em;fill:var(--ink-soft)} #naplo .famrow{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px} #naplo .fambtn{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:14px;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 13px;cursor:pointer} #naplo .fambtn:hover{border-color:var(--fc)} #naplo .fambtn small{font-size:12px;color:var(--ink-soft)} #naplo .fdot{width:10px;height:10px;border-radius:50%;background:var(--fc);flex:none;display:inline-block} #naplo .fambtn[aria-pressed="true"]{background:var(--ft);border-color:var(--fc);font-weight:600} #naplo .fpanel{background:var(--ft);border:1px solid var(--fm);border-radius:var(--radius);padding:14px 14px 6px;margin-bottom:12px;animation:naplo-rise .25s ease both} #naplo .fhead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px} #naplo .fname{font-family:var(--disp);font-weight:700;font-size:22px;line-height:1.1} #naplo .fmeta{font-size:12.5px;color:var(--ink-soft)} #naplo .frow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:9px} #naplo .farr{color:var(--ink-soft);font-size:14px;padding:0 1px} #naplo .wchip{font:inherit;font-size:14px;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;cursor:pointer;transition:background .15s,border-color .15s} #naplo .wchip.l1{font-family:var(--disp);font-size:17px;font-weight:700;padding:4px 13px} #naplo .wchip.l2{font-weight:600} #naplo .wchip.l3{font-size:13.5px;background:rgba(255,255,255,.72)} #naplo .wchip:hover{border-color:var(--fc)} #naplo .wchip[aria-pressed="true"]{background:var(--fs);border-color:var(--fc);font-weight:700} #naplo .wchip[aria-pressed="true"]:before{content:"✓ "} #naplo .tray{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:34px;margin:2px 0 10px} #naplo .tray .tl{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-right:2px} #naplo .epill{display:inline-flex;align-items:center;gap:6px;background:var(--ft,var(--wash-soft));border:1px solid var(--fm,var(--wash));border-radius:999px;padding:3px 3px 3px 11px;font-size:14px;font-weight:600} #naplo .epill button{font:inherit;width:26px;height:26px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--ink-soft);font-size:16px;line-height:1} #naplo .epill button:hover{background:rgba(62,49,41,.08)} #naplo .ownrow{display:flex;gap:8px;margin-bottom:6px} #naplo .ownrow input{flex:1;min-width:0} #naplo .ownrow .btn{width:auto;margin:0;padding:10px 16px;font-size:14px;flex:none} #naplo .sig{display:flex;gap:11px;align-items:flex-start;background:var(--ft);border:1px solid var(--fm);border-radius:14px;padding:12px 14px;margin:4px 0 12px;animation:naplo-rise .3s ease both} #naplo .sig .fdot{margin-top:6px} #naplo .sig-l{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} #naplo .sig-t{display:block;font-family:var(--disp);font-style:italic;font-size:19px;line-height:1.3} /* ---------- karikázós intenzitás ---------- */ #naplo .ibox{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 12px 10px;margin:12px 0 14px;box-shadow:0 2px 10px rgba(102,72,50,.05)} #naplo .ihead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px} #naplo .ihead .ql{margin:0} #naplo .ival{font-family:var(--disp);font-weight:700;font-size:24px;line-height:1;color:var(--accent-text);font-variant-numeric:lining-nums tabular-nums;min-width:28px;text-align:right} #naplo .irow{display:flex;gap:2px} #naplo .inum{flex:1 1 0;min-width:0;height:36px;position:relative;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);background:transparent;border:none;border-radius:50%;cursor:pointer;font-variant-numeric:lining-nums tabular-nums;padding:0} #naplo .inum:hover{background:var(--wash-soft)} #naplo .inum svg{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;overflow:visible} #naplo .inum svg path{fill:none;stroke:var(--accent-deep);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:120;stroke-dashoffset:120;animation:naplo-draw .45s ease forwards} #naplo .inum[aria-checked="true"]{color:var(--accent-text);font-weight:700} @keyframes naplo-draw{to{stroke-dashoffset:0}} /* ---------- testtérkép ---------- */ #naplo .bodywrap{display:flex;justify-content:center;margin:2px 0 10px} #naplo .bodysvg{width:100%;max-width:190px;height:auto} #naplo .bz{cursor:pointer} #naplo .bz ellipse, #naplo .bz circle, #naplo .bz rect{fill:var(--wash-soft);stroke:var(--line);stroke-width:1.5;transition:fill .15s} #naplo .bz:hover ellipse, #naplo .bz:hover circle, #naplo .bz:hover rect{stroke:var(--accent)} #naplo .bz.sel ellipse, #naplo .bz.sel circle, #naplo .bz.sel rect{fill:var(--accent);stroke:var(--accent-deep)} #naplo .heat .bz{cursor:default} #naplo .gapcard{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0} #naplo .gapcard>div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px;font-size:14px;min-width:0;overflow-wrap:anywhere} #naplo .gapcard .gl{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:3px} #naplo .gapcard p{grid-column:1/-1;font-size:14px;color:var(--ink-soft);margin:2px 0 0} /* ---------- eszközök ---------- */ #naplo .trow{display:grid;grid-template-columns:1fr auto;gap:1px 12px;align-items:center;width:100%;text-align:left;font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 15px;margin-bottom:8px;cursor:pointer;transition:border-color .15s} #naplo .trow:hover{border-color:var(--accent)} #naplo .tr-n{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.2} #naplo .tr-w{grid-column:1;font-size:13.5px;color:var(--ink-soft)} #naplo .tr-s{grid-row:1/3;grid-column:2;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--accent-text);white-space:nowrap} #naplo .gtrack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;position:relative;margin:8px 0 12px} #naplo .gtrack:before{content:"";position:absolute;left:12.5%;right:12.5%;top:18px;height:2px;background:var(--track)} #naplo .gnode{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-soft);background:none;border:none;cursor:pointer;padding:0 2px} #naplo .gnode b{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:2px solid var(--track);font-family:var(--disp);font-size:19px;color:var(--ink)} #naplo .gnode[aria-selected="true"]{color:var(--ink)} #naplo .gnode[aria-selected="true"] b{background:var(--accent-deep);border-color:var(--accent-deep);color:var(--btn-ink)} #naplo .gpanel{background:var(--wash-soft);border-radius:14px;padding:12px 14px} #naplo .gpanel p{font-size:14.5px;margin-bottom:8px} #naplo .gpanel .chiprow{margin-bottom:2px} #naplo .sgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} #naplo .stile{font:inherit;color:inherit;position:relative;height:132px;border:none;background:none;padding:0;cursor:pointer;perspective:800px;text-align:left;border-radius:16px} #naplo .st-in{position:absolute;top:0;left:0;right:0;bottom:0;transition:transform .5s ease;transform-style:preserve-3d} #naplo .stile[aria-pressed="true"] .st-in{transform:rotateY(180deg)} #naplo .st-f, #naplo .st-b{position:absolute;top:0;left:0;right:0;bottom:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;padding:13px 14px;display:flex;flex-direction:column;justify-content:space-between} #naplo .st-f{background:var(--card);border:1px solid var(--line);box-shadow:0 2px 10px rgba(102,72,50,.05)} #naplo .st-f b{font-family:var(--disp);font-size:21px;line-height:1.15} #naplo .st-f small{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)} #naplo .st-b{background:var(--ft);border:1px solid var(--fc);transform:rotateY(180deg);font-family:var(--disp);font-style:italic;font-size:18px;line-height:1.3;justify-content:center} /* ---------- lap (gyakorlatok) ---------- */ html.lock, html.lock body{overflow:hidden} #naplo .sheet-bg{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(62,49,41,.38);z-index:40;animation:naplo-fade .2s ease both} #naplo .sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--paper);border-radius:22px 22px 0 0;box-shadow:0 -8px 30px rgba(62,49,41,.18);padding:10px 16px calc(26px + env(safe-area-inset-bottom,0px));animation:naplo-up .3s ease both} #naplo .sheet-in{max-width:560px;margin:0 auto} #naplo .grab{width:42px;height:4px;border-radius:2px;background:var(--track);margin:0 auto 12px} #naplo .sh-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} #naplo .xbtn{flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:var(--card);font-size:21px;line-height:1;cursor:pointer;color:var(--ink)} #naplo .sh-foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)} #naplo .sh-foot .btn{margin:0;flex:1 1 180px} @keyframes naplo-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}} @keyframes naplo-fade{from{opacity:0}to{opacity:1}} @media(min-width:640px){#naplo .sheet{left:50%;right:auto;width:600px;margin-left:-300px;bottom:24px;border-radius:22px;max-height:86vh;padding-bottom:26px}} #naplo .bwrap{display:flex;flex-direction:column;align-items:center;padding:10px 0 2px} #naplo .bcirc{width:110px;height:110px;border-radius:50%;background:var(--wash);border:3px solid var(--accent);transition:transform 4s ease-in-out} #naplo .bphase{font-family:var(--disp);font-size:24px;font-weight:700;margin-top:26px;min-height:32px;text-align:center} #naplo .bcount{font-size:13px;color:var(--ink-soft);margin-top:2px;text-align:center} #naplo .g54{text-align:center} #naplo .g54-steps{display:flex;justify-content:center;gap:6px;margin-bottom:10px} #naplo .g54-steps i{width:26px;height:4px;border-radius:2px;background:var(--track)} #naplo .g54-steps i.done{background:var(--accent)}#naplo .g54-steps i.on{background:var(--accent-deep)} #naplo .g54-n{font-family:var(--disp);font-weight:700;font-size:64px;line-height:1;color:var(--accent-text)} #naplo .g54-l{font-size:17px;margin:2px 0 14px} #naplo .g54-dots{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:10px} #naplo .g54d{width:46px;height:46px;border-radius:50%;border:2px dashed var(--accent);background:var(--card);font:inherit;font-weight:700;color:var(--accent-text);cursor:pointer} #naplo .g54d.on{border-style:solid;background:var(--accent);color:var(--btn-ink)} #naplo .stoprow{display:flex;justify-content:center;gap:8px;margin-bottom:12px} #naplo .stoprow span{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:22px;background:var(--card);border:1px solid var(--line);color:var(--ink-soft)} #naplo .stoprow span.done{background:var(--wash);color:var(--accent-text);border-color:var(--wash)} #naplo .stoprow span.on{background:var(--accent-deep);color:var(--btn-ink);border-color:var(--accent-deep)} #naplo .stopcard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;text-align:center} #naplo .stopcard h4{margin:0 0 6px;font-size:24px} #naplo .pause{height:4px;background:var(--track);border-radius:2px;overflow:hidden;margin:12px auto 0;max-width:200px} #naplo .pause i{display:block;height:100%;width:0;background:var(--accent);transition:width 3s linear} #naplo .tlist{display:grid;gap:8px} #naplo .trow2{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 13px} #naplo .trow2 .lt{width:34px;height:34px;border-radius:10px;background:var(--wash);color:var(--accent-text);display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:700;font-size:19px} #naplo .trow2 b{display:block;font-size:14.5px} #naplo .trow2 span{display:block;font-size:13px;color:var(--ink-soft)} #naplo .ckb{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--accent-deep);background:var(--card);color:var(--accent-text);font-weight:700;cursor:pointer;font-size:15px} #naplo .ckb[aria-pressed="true"]{background:var(--accent-deep);color:var(--btn-ink)} #naplo .caution{margin-top:12px;font-size:13.5px;background:var(--wash-soft);border-radius:12px;padding:10px 13px;color:var(--ink)} #naplo .defu p{font-family:var(--disp);font-style:italic;line-height:1.35;margin:0 0 10px;transition:all .45s ease} #naplo .defu .d0{font-size:25px} #naplo .defu .d1{font-size:21px} #naplo .defu .d2{font-size:18px} #naplo .defu .far{opacity:.45;font-size:15px} #naplo .accwave{height:74px;overflow:hidden;border-radius:14px;background:var(--wash-soft);margin:6px 0 14px;position:relative} #naplo .accwave svg{position:absolute;left:0;top:0;width:200%;height:100%} #naplo .accwave path{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linecap:round} #naplo .accwave.run svg{animation:naplo-wave 9s linear infinite} @keyframes naplo-wave{from{transform:translateX(0)}to{transform:translateX(-50%)}} #naplo .kitrow{margin-bottom:10px} #naplo .kitrow .ql{margin-bottom:6px} /* ---------- heti áttekintés: összegzés és grafikonok ---------- */ #naplo .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0 14px} #naplo .stat.wide{grid-column:1/-1;display:flex;align-items:center;gap:10px;flex-wrap:wrap} #naplo .stat.wide b{font-size:22px} #naplo .stat.wide span{margin:0} #naplo .stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:11px 12px} #naplo .stat b{display:block;font-family:var(--disp);font-weight:700;font-size:27px;line-height:1.05} #naplo .stat span{display:block;font-size:12px;color:var(--ink-soft);line-height:1.35;margin-top:4px} #naplo .cwrap{position:relative} #naplo .wchart{display:block;width:100%;max-width:460px;height:auto;margin:0 auto} #naplo .wchart .grid{stroke:var(--line);stroke-width:1} #naplo .wchart .tick{font-family:var(--body);font-size:10.5px;fill:var(--ink-soft)} #naplo .wchart .tickb{font-family:var(--body);font-size:11px;font-weight:700;fill:var(--ink)} #naplo .wchart .dl{font-family:var(--body);font-size:11.5px;font-weight:700;fill:var(--ink)} #naplo .wchart .hit{fill:transparent} #naplo .wchart .hit:focus{outline:none} #naplo .wchart .hit:focus-visible{stroke:var(--accent);stroke-width:2} #naplo .legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--ink-soft);margin:2px 0 8px} #naplo .legend span{display:inline-flex;align-items:center;gap:6px} #naplo .lg-o{width:11px;height:11px;border-radius:50%;border:2px solid var(--accent-deep);background:var(--card)} #naplo .lg-f{width:11px;height:11px;border-radius:50%;background:var(--accent-deep)} #naplo .ctip{position:absolute;pointer-events:none;background:var(--dark-chip);color:var(--cream);font-size:12.5px;line-height:1.4;padding:7px 10px;border-radius:10px;white-space:nowrap;transform:translate(-50%,-110%);z-index:3} #naplo .fbars{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px 10px;align-items:center;margin:8px 0 12px} #naplo .fb-l{display:inline-flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap} #naplo .fb-l.zero{color:var(--ink-soft)} #naplo .fb-t{height:12px;background:var(--wash-soft);border-radius:0 4px 4px 0;overflow:hidden} #naplo .fb-t i{display:block;height:100%;background:var(--fc,var(--accent));border-radius:0 4px 4px 0} #naplo .fb-v{font-size:13px;color:var(--ink-soft);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap} #naplo .wordpills{display:flex;flex-wrap:wrap;gap:6px} #naplo .wordpills .epill{padding:3px 11px} #naplo .wordpills .epill em{font-style:normal;font-weight:600;color:var(--ink-soft);font-size:12.5px} #naplo .hlegend{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12px;color:var(--ink-soft);margin:2px 0 8px;flex-wrap:wrap} #naplo .hlegend i{width:20px;height:10px;border-radius:3px;display:inline-block} #naplo .zlist{font-size:13.5px;color:var(--ink-soft);text-align:center;margin:0} #naplo table.tab{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:lining-nums tabular-nums;margin-top:8px} #naplo table.tab th, #naplo table.tab td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left} #naplo table.tab th{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)} #naplo .sits{list-style:none} #naplo .sits li{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:14.5px} #naplo .sits li:last-child{border-bottom:none} #naplo .sits b{font-family:var(--disp);font-size:17px;color:var(--accent-text);white-space:nowrap;line-height:1.4} #naplo .wq{margin-bottom:18px} #naplo .hint{display:inline-block;font:inherit;font-size:13px;line-height:1.4;text-align:left;color:var(--accent-text);background:var(--wash-soft);border:1px dashed var(--accent);border-radius:12px;padding:6px 10px;margin:0 6px 8px 0;cursor:pointer} #naplo .hint:hover{background:var(--wash)} #naplo .dsum{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 2px 10px rgba(102,72,50,.05)} #naplo .dsum .strip{height:6px;background:var(--fc,var(--accent))} #naplo .dsum dl{padding:4px 16px 14px} #naplo .dsum dt{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin-top:12px} #naplo .dsum dt .linkbtn{font-size:12px;letter-spacing:0;text-transform:none;padding:0} #naplo .dsum dd{font-size:15px;margin:2px 0 0;overflow-wrap:anywhere} #naplo .dsum dd.empty{color:var(--ink-soft);font-style:italic} #naplo .toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--dark-chip);color:var(--cream);font-size:14px;font-weight:600;padding:10px 18px;border-radius:999px;z-index:60;box-shadow:0 6px 20px rgba(0,0,0,.2);max-width:calc(100% - 32px);text-align:center} #naplo .confirm{margin-top:10px;background:var(--wash-soft);border:1px solid var(--wash);border-radius:14px;padding:12px 14px;font-size:14px} #naplo .confirm .navrow{margin-top:10px} #naplo .notebox{background:var(--wash-soft);border:1px solid var(--wash);border-radius:var(--radius);padding:14px 16px;font-size:14.5px;margin:14px 0} #naplo .btn:focus-visible, #naplo .chip:focus-visible, #naplo .flip:focus-visible, #naplo .hubcard:focus-visible, #naplo .dtile:focus-visible, #naplo .fambtn:focus-visible, #naplo .wchip:focus-visible, #naplo .inum:focus-visible, #naplo .segb:focus-visible, #naplo .dot:focus-visible, #naplo .trow:focus-visible, #naplo .gnode:focus-visible, #naplo .stile:focus-visible, #naplo .linkbtn:focus-visible, #naplo .xbtn:focus-visible, #naplo .hint:focus-visible, #naplo .g54d:focus-visible, #naplo .ckb:focus-visible, #naplo .epill button:focus-visible, #naplo input:focus-visible, #naplo textarea:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* a köznormál mozgáscsökkentés a közös style.css *, *::before, *::after szabálya (!important) miatt már mindenre - a #naplo tartalmára is - kikapcsolja az animációt/átmenetet; itt csak a karikázós intenzitás-gomb rajzoló animációjának végállapotát kell explicit módon megadni */ @media(prefers-reduced-motion:reduce){#naplo .inum svg path{stroke-dashoffset:0}} @media(max-width:390px){#naplo h2{font-size:32px}#naplo h3{font-size:26px}#naplo .stat b{font-size:23px}} /* ========================================================================== Liquid glass - a site vizuális nyelvéhez igazítva Ugyanaz a --uveg / --uveg-keret / --uveg-homaly / --uveg-arnyek készlet, mint a .kartya, .forgo__elol, .lepteto__idezet és .kiemelt elemeken a style.css-ben. A helyi --g-* változók csak ezeket a közös tokeneket hivatkozzák, így a sötét mód és a tartalék ág egyetlen helyen váltható. A napló --card változója marad (chipek, gombok, mezők tömör felülete). Rétegezési szabály (teljesítmény): a backdrop-filter legfeljebb EGY szinten fut. Ha üveges felületen belül újabb üveges elem ül (pl. .card > .reflect, .sheet > .trow2), a belsőnek csak áttetsző, meleg tónusú háttere van, homályosítás nélkül (lásd a "beágyazott" szabályokat lent). Szándékosan tömör marad: .chip, .wchip, .epill, .inum, .dtile, .fdot, .segb, .linkbtn (túl kicsik), .fpanel és .st-b (a családszín információt hordoz, ezeknél csak a keret/árnyék igazodik), az érzelemkerék, a .mcirc körök, a .mcell cellák. (A .nextup korábban tömör petrol doboz volt, most üveges, lásd a saját szabályát fent.) ========================================================================== */ #naplo{ --g-bg:var(--uveg); /* nagy, önálló felületek */ --g-bg-strong:rgba(255,255,255,.90); /* felugró rétegek: lap, támogatás-ablak */ --g-soft:rgba(255,255,255,.40); /* halványabb csoport (jelenleg nincs használatban, a sötét mód is állítja) */ --g-inner:rgba(243,230,221,.46); /* üveges felületen belüli elem: meleg tónus, blur nélkül */ --g-dark:rgba(34,32,30,.92); /* sötét alapú üveg (.plan) */ --g-edge:var(--uveg-keret); --g-edge-dark:var(--uveg-keret-sotet); --g-blur:var(--uveg-homaly); --g-shadow:var(--uveg-arnyek); --g-shadow-up:0 -14px 40px -18px rgba(22,78,78,.38), inset 0 1px 0 rgba(255,255,255,.75); --g-shadow-dark:var(--uveg-arnyek-sotet); --g-shadow-inner:inset 0 1px 0 rgba(255,255,255,.7); } /* --- önálló üveges felületek --- */ #naplo .card, #naplo .fold, #naplo .ahet, #naplo .hubcard, #naplo .sos, #naplo .owner, #naplo .quotecard, #naplo .notebox, #naplo .flip, #naplo .reflect, #naplo .ibox, #naplo .stat, #naplo .trow, #naplo .trow2, #naplo .dsum, #naplo .stopcard, #naplo .st-f, #naplo .fb, #naplo .gapcard>div, #naplo .gpanel, #naplo .tray, #naplo .seg, #naplo .mzoom, #naplo .ah-txt { background-color:var(--g-bg); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); border:1px solid var(--g-edge); box-shadow:var(--g-shadow); } /* a bal oldali kiemelő sáv (réz) megmarad a keret átszínezése után is */ #naplo .sos, #naplo .quotecard, #naplo .fb{border-left:4px solid var(--accent)} #naplo .fb{border-radius:0 var(--radius) var(--radius) 0} /* a korábban keret nélküli elemek kis belső térközt kapnak az üvegkerethez */ #naplo .tray{padding:6px 10px;border-radius:16px} #naplo .mzoom{padding:14px 12px 12px;border-radius:var(--radius)} #naplo .gpanel{border-radius:14px} #naplo .seg{background-color:var(--g-inner)} /* --- felugró rétegek: erősebb (majdnem tömör) üveg, hogy a mögöttes oldal ne zavarjon --- */ #naplo .sheet, #naplo .tamogato-in{ background-color:var(--g-bg-strong); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); border:1px solid var(--g-edge); box-shadow:var(--g-shadow); } #naplo .sheet{border-bottom:0;box-shadow:var(--g-shadow-up)} @media(min-width:640px){#naplo .sheet{border-bottom:1px solid var(--g-edge);box-shadow:var(--g-shadow)}} /* --- sötét alapú üveg: a defúziós terv-doboz --- */ #naplo .plan{ background-color:var(--g-dark); -webkit-backdrop-filter:var(--g-blur); backdrop-filter:var(--g-blur); border:1px solid var(--g-edge-dark); box-shadow:var(--g-shadow-dark); } #naplo .plan .lbl{color:var(--accent-onpetrol)} /* --- tömör pasztell családfelületek: csak a keret és az árnyék igazodik --- */ #naplo .fpanel, #naplo .st-b{box-shadow:var(--g-shadow)} /* --- beágyazott üveg: nincs második homályosítás --- */ #naplo :is(.card,.fold,.ahet,.hubcard,.sos,.owner,.quotecard,.notebox,.flip,.reflect,.ibox,.stat,.trow,.dsum,.stopcard,.fb,.gpanel,.tray,.seg,.mzoom,.plan,.sheet,.tamogato-in) :is(.card,.fold,.ahet,.hubcard,.sos,.owner,.quotecard,.notebox,.flip,.reflect,.ibox,.stat,.trow,.trow2,.dsum,.stopcard,.fb,.gapcard>div,.gpanel,.tray,.seg,.mzoom,.plan,.ah-txt){ -webkit-backdrop-filter:none; backdrop-filter:none; } #naplo :is(.card,.fold,.ahet,.hubcard,.sos,.owner,.quotecard,.notebox,.flip,.reflect,.ibox,.stat,.trow,.dsum,.stopcard,.fb,.gpanel,.tray,.seg,.mzoom,.plan,.sheet,.tamogato-in) :is(.card,.fold,.ahet,.hubcard,.sos,.owner,.quotecard,.notebox,.flip,.reflect,.ibox,.stat,.trow,.trow2,.dsum,.stopcard,.fb,.gapcard>div,.gpanel,.tray,.seg,.mzoom,.ah-txt){ background-color:var(--g-inner); box-shadow:var(--g-shadow-inner); } /* --- tartalék: ahol a böngésző nem tudja a backdrop-filter-t, a felület tömörebb --- */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #naplo{ --g-bg:rgba(255,255,255,.92); --g-bg-strong:rgba(255,255,255,.98); --g-soft:rgba(255,255,255,.80); --g-inner:rgba(246,240,235,.94); --g-dark:rgba(34,32,30,.98); } } /* ---------- archívum: lezárt hetek ---------- */ #naplo .ahet{margin-bottom:14px} #naplo .ah-n{font-family:var(--disp);font-style:italic;font-size:21px;font-weight:600;line-height:1.25;color:var(--petrol)} #naplo .ah-d{font-size:13px;color:var(--ink-soft);margin-top:2px} #naplo .ahet .navrow{margin-top:12px} #naplo .ahet .linkbtn{margin-top:12px} #naplo .ah-txt{margin-top:12px;padding:14px;background:var(--wash-soft);border:1px solid var(--line);border-radius:14px; font-size:13.5px;line-height:1.7;white-space:pre-wrap;max-height:60vh;overflow:auto;-webkit-overflow-scrolling:touch} /* ---------- hangulattérkép: a megnevezés második bejárata ---------- */ /* A megrendelő 10x10-es Mood Meter táblája. Első lépésben négy nagy kör (.mcirc), egyre koppintva kinagyítva látszik a negyed 25 szava (.mzoom > .mzgrid > .mcell). A heti áttekintésben a 10x10-es keret (.mmap > .mgrid) a napok pontjait mutatja. A negyedek színe a Mood Meter saját színe (--qc: r,g,b), a telítettség (--a) a rács közepétől a külső sarok felé erősödik. */ #naplo .mapbox{margin:0 0 10px} #naplo .mmap{max-width:480px;margin:0 auto} #naplo .mtop, #naplo .mbot, #naplo .mside{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);line-height:1.3} #naplo .mtop{text-align:center;margin-bottom:6px} #naplo .mbot{text-align:center;margin-top:6px} #naplo .mrow{display:grid;grid-template-columns:20px minmax(0,1fr) 20px} #naplo .mside{writing-mode:vertical-rl;display:flex;align-items:center;justify-content:center;white-space:nowrap} #naplo .mside.l{transform:rotate(180deg)} #naplo .mgrid{position:relative;aspect-ratio:1/1;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)} #naplo .mq{position:absolute;width:50%;height:50%;background:rgba(var(--qc),.16)} #naplo .mq.tl{left:0;top:0}#naplo .mq.tr{right:0;top:0}#naplo .mq.bl{left:0;bottom:0}#naplo .mq.br{right:0;bottom:0} #naplo .mgrid::before{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;pointer-events:none; background-image:linear-gradient(to right,var(--line) 1px,transparent 1px),linear-gradient(to bottom,var(--line) 1px,transparent 1px);background-size:10% 10%} #naplo .mgrid::after{content:"";position:absolute;left:0;top:0;right:0;bottom:0;z-index:3;pointer-events:none;opacity:.32; background:linear-gradient(var(--ink-soft),var(--ink-soft)) center/1px 100% no-repeat,linear-gradient(var(--ink-soft),var(--ink-soft)) center/100% 1px no-repeat} #naplo .mgrid.mfull::before{display:none} /* a teljes térkép: négy koppintható negyed, bennük a kis szavak */ #naplo .mcap{text-align:center;font-size:15px;line-height:1.45;margin:12px 0 4px;min-height:1.45em} /* a nagyított negyed: 5x5 nagy, koppintható cella */ #naplo .mzoom{max-width:480px;margin:0 auto;animation:naplo-rise .25s ease both} #naplo .mzhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2px 12px;margin-bottom:8px} #naplo .mztit{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.25;margin:0} #naplo .mback{font-weight:600;padding:8px 0} /* A rács görgethető keret: a szavak SOHA nem törnek meg és nincsenek elvágva, ha a cellák nem férnek el, a .mzgrid maga görget (mindkét irányban). Így a LAP nem kap vízszintes görgetést, csak ez a doboz. */ #naplo .mzgrid{display:grid;grid-template-columns:repeat(5,minmax(max-content,1fr));grid-auto-rows:minmax(58px,auto); align-content:start;gap:4px; overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch; max-height:min(58vh,420px); padding:10px 14px;scroll-padding:14px; scrollbar-width:thin;scrollbar-color:var(--accent) transparent} /* WebKit (régebbi Safari): finom, a réz akcentust követő görgetősáv */ #naplo .mzgrid::-webkit-scrollbar{width:8px;height:8px} #naplo .mzgrid::-webkit-scrollbar-track{background:transparent;border-radius:999px} #naplo .mzgrid::-webkit-scrollbar-thumb{background:var(--accent);border-radius:999px;border:2px solid transparent;background-clip:padding-box} #naplo .mzgrid::-webkit-scrollbar-corner{background:transparent} /* Vizuális jelzés a görgethetőségről: a rács szélén a tartalom a felület (üveg) színébe halványul. A tartalom nyugalmi helyzetben a párnázáson belül ül, ezért ott nem halványul; görgetéskor viszont a szélek felé finoman elfogy. A jobb és az alsó szélen a maszk nem megy 0-ra (.25), hogy a görgetősáv látható maradjon. Ahol nincs mask-image, marad a görgetősáv (a @supports miatt nincs törött állapot). */ @supports ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){ #naplo .mzgrid{ -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),rgba(0,0,0,.25) 100%), linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 10px),rgba(0,0,0,.25) 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),rgba(0,0,0,.25) 100%), linear-gradient(to bottom,transparent 0,#000 10px,#000 calc(100% - 10px),rgba(0,0,0,.25) 100%); mask-composite:intersect} } /* A cella háttere lágy színátmenet (nem sík szín): a negyed színe (--qc) a telítettséggel (--a, a rács közepétől a külső sarok felé erősödik) és a --g értékkel (0 a közép, 1 a külső sarok) halad, egy áttetsző, meleg alapon. Az alfa fel van fedve (--mc-cap), így a szöveg (--ink) minden cellán legalább 5:1 kontrasztot tart (a részleteket lásd az összefoglalóban). */ #naplo .mcell{--mc-k:1;--mc-cap:.62;--mc-base:var(--uveg); position:relative;display:flex;align-items:center;justify-content:center;min-height:58px;padding:18px 10px 6px;border-radius:10px;border:1px solid rgba(var(--qc),.55); background: linear-gradient(145deg, rgba(var(--qc),calc(var(--a,.3) * .8 * var(--mc-k))) 0%, rgba(var(--qc),min(var(--mc-cap),calc(var(--a,.3) * (1.2 + .3 * var(--g,.5)) * var(--mc-k)))) 100%), var(--mc-base); color:var(--ink);font-size:clamp(11px,3vw,13.5px);font-weight:600;line-height:1.15;text-align:center; white-space:nowrap;overflow-wrap:normal;-webkit-hyphens:none;hyphens:none; scroll-margin:6px;cursor:pointer;transition:transform .12s ease,border-color .15s ease} #naplo .mcell:hover{border-color:var(--fc)} #naplo .mcell:active{transform:scale(.97)} #naplo .mcell .fdot{position:absolute;left:5px;top:5px;width:8px;height:8px} #naplo .mcell[aria-pressed="true"]{background:var(--fs);border-color:var(--fc);box-shadow:inset 0 0 0 2px var(--fc);font-weight:700;color:#2a2a2a} #naplo .mcell[aria-pressed="true"]::after{content:"✓";position:absolute;right:5px;top:1px;font-size:12px} #naplo .mcell:focus-visible{outline:3px solid var(--accent);outline-offset:2px;z-index:2} #naplo .mhint{margin:10px 0 6px} #naplo .mlinks{display:flex;flex-wrap:wrap;gap:2px 18px;margin-bottom:12px} #naplo .mlinks .linkbtn{font-weight:500;color:var(--ink-soft)} #naplo .mlinks .linkbtn:focus-visible, #naplo .mback:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* a heti kártya pontjai: a nap sorszáma, a fő érzéscsalád színén */ #naplo .mdot{position:absolute;z-index:2;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:12px;font-weight:700;line-height:1;box-shadow:0 0 0 2px var(--card);font-variant-numeric:lining-nums} #naplo .mdot.mini{position:static;flex:none;margin:0;width:22px;height:22px;font-size:11.5px} #naplo .mlist{list-style:none;margin:14px 0 0} #naplo .mlist li{display:flex;align-items:center;gap:9px;font-size:13.5px;line-height:1.4;color:var(--ink-soft);margin-bottom:6px} @media(prefers-reduced-motion:reduce){#naplo .mzoom{animation:none}#naplo .mcell{transition:none}} /* ---------- letöltési gombsor a heti áttekintésben ---------- */ #naplo .dlrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} #naplo .dlrow .btn{margin-top:0;flex:1 1 auto;min-width:200px} @media (max-width:520px){#naplo .dlrow .btn{flex:1 1 100%}} /* ---------- támogatás-ablak a letöltés után ---------- */ /* Az ablak maga a teljes képernyős, középre igazító réteg: a belső kártya animálódik. (A középre húzást nem transformmal oldjuk meg, mert a naplo-up keyframe „both” kitöltéssel felülírná.) */ #naplo .tamogato{position:fixed;inset:0;z-index:42;display:flex;align-items:center;justify-content:center; padding:16px;pointer-events:none} #naplo .tamogato[hidden]{display:none} #naplo .tamogato-in{pointer-events:auto;position:relative;width:min(520px,100%); max-height:86vh;overflow-y:auto;-webkit-overflow-scrolling:touch; background:var(--paper);border-radius:22px;box-shadow:0 18px 46px rgba(62,49,41,.26); padding:26px 24px calc(24px + env(safe-area-inset-bottom,0px));animation:naplo-up .28s ease both} #naplo .tamogato .xbtn{position:absolute;top:2px;right:2px} #naplo .tamogato h3{margin:2px 44px 8px 0;color:var(--petrol)} #naplo .tamogato .eyebrow{margin-right:44px} #naplo .tamogato .soft{margin-bottom:4px} #naplo .tamogato-gombok{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} #naplo .tamogato-gombok .btn{margin-top:0;flex:1 1 170px;text-align:center;text-decoration:none; display:inline-flex;align-items:center;justify-content:center} @media (prefers-reduced-motion:reduce){#naplo .tamogato-in{animation:none}} /* ========================================================================== Új kezdőlap: lenyíló fülek, heti doboz, kiemelt segély, eszközkártyák, visszajelző űrlap, támogatás doboz, mobil címcsere ========================================================================== */ #naplo{--fold-hover:rgba(195,143,112,.13)} /* ---------- lenyíló fül:
---------- */ /* Ugyanaz az üveges felület, mint a .card (a közös glass listában szerepel), a fejléc a summary. */ #naplo .fold{display:block;margin:0 0 10px;border-radius:var(--radius)} #naplo .fold+.fold{margin-top:10px} #naplo .fold>summary{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:14px 16px 14px 18px;min-height:56px;cursor:pointer;list-style:none; border-radius:var(--radius);transition:background-color .2s ease; -webkit-user-select:none;user-select:none} #naplo .fold>summary::-webkit-details-marker{display:none} #naplo .fold[open]>summary{border-radius:var(--radius) var(--radius) 0 0} #naplo .fold>summary:hover{background-color:var(--fold-hover)} #naplo .fold>summary:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* a cím: a kártyacímek (h4 / .mhead) tipográfiája */ #naplo .fold-t{font-family:var(--disp);font-weight:700;font-size:20px;line-height:1.25;color:var(--petrol);min-width:0} /* a jobb oldali jel: körbe rajzolt, lefelé mutató nyíl, nyitva felfelé fordul (tiszta CSS) */ #naplo .fold-j{flex:none;position:relative;display:block;width:28px;height:28px;border-radius:50%;background:var(--wash)} #naplo .fold-j::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px; border-right:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text); transform:translateY(-2px) rotate(45deg);transition:transform .2s ease} #naplo .fold[open]>summary .fold-j::before{transform:translateY(2px) rotate(-135deg)} /* a tartalom: belső térköz, nyitáskor finom megjelenés (mint a naplo-rise a nézeteknél) */ #naplo .fold-b{padding:2px 18px 18px} #naplo .fold[open]>.fold-b{animation:naplo-rise .3s ease both} #naplo .fold-b>:first-child{margin-top:0} #naplo .fold-b>:last-child{margin-bottom:0} /* alcím a fülön belül: a h3/h4 alá illő méret */ #naplo .foldh{font-family:var(--disp);font-weight:700;font-size:18px;line-height:1.25;color:var(--petrol); text-transform:none;letter-spacing:normal;padding:0;margin:16px 0 6px} #naplo .fold-b>.foldh:first-child{margin-top:0} @media(prefers-reduced-motion:reduce){ #naplo .fold[open]>.fold-b{animation:none} #naplo .fold>summary, #naplo .fold-j::before{transition:none} } /* ---------- a heti bejegyzések doboza: telefonkeret (.hetblokk > .telefon) ---------- */ /* A kezdőlapi heti doboz #h-week / #h-today / #h-weeknote elemei a telefon képernyőjén ülnek. Az .ahet osztályt már csak az archívum kártyái használják (lásd lentebb), ezért az id-szabályok ide kerültek. */ #naplo .telefon-kepernyo #h-weeknote{margin:0 0 2px;font-size:14.5px;text-align:center} #naplo .telefon-kepernyo #h-week{margin:14px 0 18px} /* a fő gomb is nagyobb: ez a lap legfontosabb művelete. 19px félkövér = nagy szöveg (WCAG: 18.66px félkövér felett), a réz gomb színpárja (3.99:1) így a nagy szövegre előírt 3:1 fölött van; a szín nem változott. */ #naplo .telefon-kepernyo #h-today{width:100%;margin-top:4px;min-height:60px;padding:17px 24px;font-size:19px;font-weight:700;line-height:1.3;letter-spacing:.005em} /* ---------- kiemelt segély: "Most van szükségem segítségre" ---------- */ /* Petrol akcentus, erősebb keret és szín, hogy elüssön a többi (réz) kártyától; a .nextup rokona, de üveges marad, hogy ne versenyezzen a petrol "Innen folytasd" dobozzal. */ #naplo .sos.sos--kiemelt{padding:20px 20px 20px 18px; border:1.5px solid rgba(22,78,78,.42);border-left:6px solid var(--petrol); background-image:linear-gradient(135deg,rgba(22,78,78,.14),rgba(22,78,78,.03) 70%); box-shadow:0 18px 44px -20px rgba(22,78,78,.55),inset 0 1px 0 rgba(255,255,255,.75)} #naplo .sos--kiemelt h4{color:var(--petrol);font-size:23px;margin-bottom:6px} #naplo .sos--kiemelt .btn{background:var(--petrol);margin-top:14px} #naplo .sos--kiemelt .btn:hover{background:var(--petrol-700)} /* ---------- eszközök: négy kártya egymás alatt, szélesebben két oszlopban (a .beallracs ugyanez a rács) ---------- */ #naplo #h-cards, #naplo .beallracs{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-bottom:14px} #naplo #h-cards .hubcard{margin-bottom:0} @media(min-width:560px){#naplo #h-cards, #naplo .beallracs{grid-template-columns:repeat(2,minmax(0,1fr))}} /* a "Heti áttekintés" gomb ugyanaz a .hubcard, mint az eszközkártyák */ #naplo #h-week-go.hubcard{margin-bottom:14px} /* ---------- visszajelző űrlap (.card.vj) ---------- */ #naplo .vj .seg{margin:4px 0 0} #naplo .vj .segb{flex:1 1 0;min-width:0;min-height:44px;padding:10px 0;font-size:16px;text-align:center} #naplo .vj .segb:hover{color:var(--ink)} /* a kiválasztott érték: tömör réz kitöltés, a gombokkal azonos színpár (jól látszik, világos és sötét módban is) */ #naplo .vj .segb[aria-checked="true"]{background:var(--accent-deep);color:var(--btn-ink);box-shadow:0 1px 4px rgba(102,72,50,.22)} #naplo .vj textarea{display:block;margin-bottom:12px} #naplo .vj .btn{margin-top:4px} /* Honeypot: nem display:none (azt a robotok kiszűrik), hanem képernyőn kívülre tolva, ugyanúgy, mint a közös style.css .csapda szabálya. A #naplo div reset (width:auto) miatt kell itt újra kimondani. */ #naplo .csapda{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} /* Az üzenet üresen nem foglal helyet; szöveggel jól olvasható, kiemelt sáv */ /* A sablonból beillesztett példányok azonosítója előtagot kap (h-vj-uzenet, d-vj-uzenet), ezért végződésre szűrünk. */ #naplo .vj [id$="vj-uzenet"]{min-height:0;margin:12px 0 0;padding:10px 13px;border-radius:12px; background:var(--wash-soft);border:1px solid var(--wash);color:var(--ink);font-size:14.5px;line-height:1.5} #naplo .vj [id$="vj-uzenet"]:empty{display:none} /* A napi összegző képernyőn a visszajelzés és a támogatás a gombsor (Mentés, Következő nap) alatt jön: az első fejléc vékony vonallal és nagyobb térközzel válik el a műveletektől. Csak a #v-day-re szűkítve, a kezdőlap változatlan. */ #naplo #v-day h4.sec:has(+ #d-vj-hely){margin-top:34px;padding-top:24px;border-top:1px solid var(--line)} /* ---------- támogatás doboz (.card.tamdoboz) ---------- */ /* Finoman kiemelt, réz akcentusú kártya, szándékosan nem petrol. A teljes tartalom középre igazított: fölül a kávéikon (réz, kerek háttéren), alatta a szöveg és a gomb. A réz akcentus itt felső sáv. */ #naplo .card.tamdoboz{text-align:center;border:1px solid rgba(195,143,112,.55);border-top:4px solid var(--accent); padding:22px 20px 20px; background-image:linear-gradient(140deg,rgba(195,143,112,.20),rgba(243,230,221,.30)); box-shadow:0 16px 38px -22px rgba(132,90,70,.5),inset 0 1px 0 rgba(255,255,255,.75)} #naplo .tam-ikon{display:flex;align-items:center;justify-content:center;width:64px;height:64px;margin:0 auto 12px; border-radius:50%;background:rgba(195,143,112,.22);color:var(--accent-text)} #naplo .tam-ikon svg{display:block;width:34px;height:36px;max-width:none;fill:currentColor} #naplo .tamdoboz p{margin-bottom:0;text-align:center} #naplo .tamdoboz .btn{width:100%;margin-top:16px;text-align:center} @media(min-width:560px){#naplo .tamdoboz .btn{width:auto;padding-left:32px;padding-right:32px}} /* ---------- fejlesztési területek ---------- */ /* Kis kártyák az eszköztárban, és a hozzájuk tartozó részletes nézet. */ #naplo .terkartyak{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:18px} @media(min-width:560px){#naplo .terkartyak{grid-template-columns:1fr 1fr}} #naplo .terkartya{position:relative;display:block;width:100%;text-align:left;cursor:pointer; padding:16px 18px 16px 52px;border-radius:var(--radius);border:1px solid var(--line); background:var(--card);box-shadow:0 2px 10px rgba(102,72,50,.05);transition:transform .14s ease,box-shadow .14s ease} #naplo .terkartya::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--accent);opacity:.55} #naplo .terkartya:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(62,49,41,.13)} #naplo .terkartya:focus-visible{outline:3px solid var(--accent);outline-offset:3px} #naplo .terkartya .tk-sz{position:absolute;left:16px;top:16px;font-family:var(--disp);font-weight:700;font-size:19px;color:var(--accent-text);line-height:1} #naplo .terkartya .tk-n{display:block;font-family:var(--disp);font-weight:700;font-size:18.5px;line-height:1.2;color:var(--petrol);margin-bottom:3px} #naplo .terkartya .tk-o{display:block;font-size:14px;line-height:1.45;color:var(--ink-soft)} #naplo .terkartya .tk-cimke{display:inline-block;margin-top:9px;font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--accent-text);background:var(--wash-soft);border-radius:999px;padding:3px 10px} #naplo .terkartya--figyelem::before{opacity:1;width:4px} @media(prefers-reduced-motion:reduce){#naplo .terkartya{transition:none}#naplo .terkartya:hover{transform:none}} /* a részletes nézet */ #naplo .ter-cimke{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase; color:var(--accent-text);background:var(--wash-soft);border-radius:999px;padding:4px 11px;margin-bottom:12px} #naplo .ter-mit{margin-bottom:16px} #naplo .ter-blokk{margin-bottom:18px} #naplo .ter-cim{font-family:var(--disp);font-weight:700;font-size:17.5px;line-height:1.3;color:var(--petrol);margin:0 0 6px} #naplo .ter-blokk>p,#naplo .ter-proba>p{margin:0} #naplo .ter-blokk .chiprow{margin-top:8px} #naplo .ter-lista{margin:0;padding-left:20px} #naplo .ter-lista li{margin-bottom:7px;line-height:1.55} #naplo .ter-lista li:last-child{margin-bottom:0} #naplo .ter-proba{background:var(--wash-soft);border:1px solid var(--line);border-radius:var(--radius);padding:15px 17px;margin:0 0 18px} /* ---------- kitölthető gyakorlatok a fejlesztési területeknél (v81) ---------- */ /* A .gyak önálló, üveges kártya (a .card rokona). A kitöltős mezők a napló meglévő mezőstílusát követik, de 16px betűvel (iPhone-on így nem nagyít rá fókuszkor). A mezőfeliratok (.gyak-cimke) szándékosan NEM a .ql apró nagybetűs stílusát használják: normál írásmódú, olvasható felirat. */ #naplo .gyak{position:relative;background-color:var(--g-bg);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur); border:1px solid var(--g-edge);border-radius:var(--radius);box-shadow:var(--g-shadow); padding:18px 18px 16px;margin:0 0 16px} #naplo .gyak:last-child{margin-bottom:0} /* üveges felületen belül nincs második homályosítás */ #naplo :is(.card,.fold,.ahet,.hubcard,.sos,.notebox,.reflect,.ibox,.sheet,.ter-proba) .gyak{ -webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--g-inner);box-shadow:var(--g-shadow-inner)} #naplo .gyak-fej{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 6px} #naplo .gyak-cim{flex:1 1 0;min-width:0;margin:0;font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.28; letter-spacing:0;text-transform:none;color:var(--petrol);text-wrap:balance} #naplo .gyak-jel{flex:none;display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:3px 11px 3px 9px;border-radius:999px; background:var(--wash-soft);border:1px solid var(--wash);color:var(--accent-text); font-size:12px;font-weight:700;line-height:1.3;white-space:nowrap} #naplo .gyak-jel::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor} #naplo .gyak-leir{margin:0 0 4px;font-size:15px;line-height:1.55;color:var(--ink-soft)} /* mezőfelirat: a .vjk mintájára, csak kisebb; normál írásmód, nem nagybetűs */ #naplo .gyak-cimke{display:block;margin:16px 0 6px;font-family:var(--disp);font-weight:700;font-size:16px;line-height:1.35; letter-spacing:0;text-transform:none;color:var(--petrol);text-wrap:pretty} /* beviteli mezők: a napló meglévő input/textarea stílusa, 16px betűvel */ #naplo input.gyak-sor, #naplo textarea.gyak-szoveg{display:block;width:100%;font:inherit;font-size:16px;line-height:1.5; color:var(--ink);background-color:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 15px; transition:border-color .15s ease,box-shadow .15s ease} #naplo textarea.gyak-szoveg{min-height:88px;resize:vertical} #naplo input.gyak-sor{min-height:48px} #naplo input.gyak-sor:hover, #naplo textarea.gyak-szoveg:hover{border-color:var(--accent)} #naplo input.gyak-sor:focus, #naplo textarea.gyak-szoveg:focus{border-color:var(--accent-deep);box-shadow:0 0 0 3px var(--wash)} #naplo .gyak ::placeholder{color:#6f6258;opacity:1} /* jelölőnégyzet: legalább 44px magas kattintható sor; a négyzet fix 24x24, flex nem nyújthatja (a napló globális resetje appearance:none-t ad, ezért a doboz és a pipa itt készül) */ #naplo .gyak-pipa{display:flex;align-items:center;gap:12px;min-height:44px;margin:12px 0 0;padding:6px 0;cursor:pointer; font-size:16px;line-height:1.35;color:var(--ink)} #naplo .gyak-pipa>span{flex:1 1 auto;min-width:0} #naplo .gyak-pipa input[type=checkbox]{flex:0 0 24px;box-sizing:border-box;width:24px;height:24px;min-width:24px;max-width:24px; min-height:24px;max-height:24px;margin:0;padding:0;border:2px solid var(--accent-text);border-radius:7px; background-color:var(--card);background-repeat:no-repeat;background-position:center;background-size:16px 16px;cursor:pointer; transition:background-color .15s ease,border-color .15s ease} #naplo .gyak-pipa input[type=checkbox]:checked{background-color:var(--accent-text); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} /* választósáv: a meglévő .seg/.segb, de itt sorba törhet, és nem kap második homályosítást */ #naplo .gyak .seg.gyak-valaszt{flex-wrap:wrap;border-radius:24px;margin:0 0 4px; -webkit-backdrop-filter:none;backdrop-filter:none;background-color:var(--g-inner);box-shadow:var(--g-shadow-inner)} #naplo .gyak-valaszt .segb{flex:1 1 auto;min-width:0;min-height:44px;padding:10px 14px;font-size:15px;line-height:1.25;text-align:center; text-wrap:balance} #naplo .gyak-valaszt .segb:hover{color:var(--ink)} #naplo .gyak-valaszt .segb[aria-checked="true"]{background:var(--accent-text);color:var(--btn-ink);box-shadow:0 1px 4px rgba(102,72,50,.22)} /* időzítő */ #naplo .gyak-ido{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:16px 0 0} #naplo .gyak-ido .btn{margin:0;min-height:44px} #naplo .gyak-ora{display:inline-flex;align-items:center;gap:8px;min-width:5.2ch;justify-content:center;padding:6px 16px;border-radius:999px; background:var(--wash-soft);border:1px solid var(--wash);color:var(--ink); font-family:var(--disp);font-weight:700;font-size:26px;line-height:1.2;font-variant-numeric:lining-nums tabular-nums; transition:background-color .2s ease,border-color .2s ease} /* futó állapot: erősebb réz kiemelés és finoman lüktető jelzőpont */ #naplo .gyak-ido.fut .gyak-ora{background:var(--wash);border-color:var(--accent-deep)} #naplo .gyak-ido.fut .gyak-ora::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--accent-text); animation:naplo-gyak-ora 1.6s ease-in-out infinite} @keyframes naplo-gyak-ora{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}} /* 2x2 mérleg: mobilon egy oszlop, 560px felett két oszlop */ #naplo .gyak-racs{display:grid;grid-template-columns:minmax(0,1fr);gap:0 14px;margin:2px 0 0} #naplo .gyak-racs>div{display:flex;flex-direction:column;min-width:0} #naplo .gyak-racs .gyak-szoveg{flex:1 1 auto;min-height:72px} @media(min-width:560px){#naplo .gyak-racs{grid-template-columns:repeat(2,minmax(0,1fr))}} /* halk törlés-link a kártya alján */ #naplo .gyak-torol{display:block;margin:12px 0 0;padding:8px 0;font-size:13px;font-weight:500;color:var(--ink-soft)} #naplo .gyak-torol:hover{color:var(--accent-text)} /* haladásjelző a terület tetején */ #naplo .ter-halado{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--ink-soft)} #naplo .ter-halado b{display:inline-block;min-width:1.7em;margin-right:1px;padding:0 8px;border-radius:999px;text-align:center; background:var(--wash-soft);border:1px solid var(--wash);color:var(--accent-text); font-family:var(--disp);font-size:1.15em;font-weight:700;line-height:1.35;font-variant-numeric:lining-nums tabular-nums} @media(prefers-reduced-motion:reduce){ #naplo input.gyak-sor, #naplo textarea.gyak-szoveg, #naplo .gyak-pipa input[type=checkbox], #naplo .gyak-ora{transition:none} #naplo .gyak-ido.fut .gyak-ora::before{animation:none} } @media(max-width:390px){#naplo .gyak{padding:16px 14px 14px}#naplo .gyak-cim{font-size:18px}} /* ---------- mobil címcsere ---------- */ /* Az oldalcím (H1) a #naplo konténeren KÍVÜL van, ezért ezek a szabályok szándékosan nem #naplo-ra szűkítettek. A naplo.css csak ezen az egy oldalon töltődik be, így ez biztonságos. Keskeny képernyőn a rövid cím (Érzelemnapló) látszik, a hosszú (Érzelemszabályozási napló) rejtve. */ .cim-rovid{display:none} @media(max-width:560px){ .cim-hosszu{display:none} .cim-rovid{display:inline} /* a cím semmiképp ne törjön szó közben */ .oldalfej h1{overflow-wrap:normal;-webkit-hyphens:none;hyphens:none} /* az Érzelem + napló egyetlen szó: a kiemelés bal oldali térköze itt gépelt szóköznek látszana */ #naplo .cim-rovid .hl{padding-left:0} } /* ========================================================================== Sötét mód - KIZÁRÓLAG az érzelemszabályozási napló oldalán A `body:has(#naplo)` horgony biztosítja, hogy ez a blokk csak azon az oldalon fusson, ahol a napló konténere jelen van - a kezdőlap, a blog, a kvíz és a többi aloldal így érintetlen marad világos módban is. A rendszerbeállítást követi (prefers-color-scheme), nincs saját kapcsoló. ========================================================================== */ @media (prefers-color-scheme: dark) { /* ---------- Közös oldalváz: fejléc, oldalfej/morzsamenü, süti-sáv ---------- */ body:has(#naplo) { background: #182525; } body:has(#naplo)::before, body:has(#naplo)::after { opacity: .3; } /* a dekorfoltok tompítva, hogy ne üssenek ki a sötét alapon */ body:has(#naplo) .fejlec { background: linear-gradient(180deg, rgba(24, 37, 37, .92), rgba(24, 37, 37, .74)); } body:has(#naplo) .fejlec.gorgetve { border-bottom-color: rgba(255, 255, 255, .14); } body:has(#naplo) .logo, body:has(#naplo) .nav__lista a, body:has(#naplo) .nav-gomb { color: #F2ECE4; } body:has(#naplo) .logo__szoveg small { color: #C7BEB4; } @media (max-width: 1120px) { body:has(#naplo) .nav { background: rgba(24, 37, 37, .97); border-bottom-color: rgba(255, 255, 255, .14); } body:has(#naplo) .nav__lista a:not(.gomb) { border-bottom-color: rgba(255, 255, 255, .12); } } body:has(#naplo) .oldalfej h1 { color: #F2ECE4; } body:has(#naplo) .oldalfej .felcim { color: #e0935f; } body:has(#naplo) .oldalfej p { color: #C7BEB4; } body:has(#naplo) .morzsa, body:has(#naplo) .morzsa a { color: #C7BEB4; } body:has(#naplo) .suti { background-color: rgba(24, 37, 37, .95); color: #E7E1D9; } body:has(#naplo) .suti h2 { color: #F2ECE4; } /* A lábléc (.lablec) már eleve sötét petrolzöld, világos szöveggel - ez a kombináció a sötét oldalháttér mellett is megfelelően olvasható marad, ezért nem igényel külön felülírást. */ /* ---------- A napló saját sötét palettája ---------- Nem fekete, hanem mély, meleg petrol-szürke alap (--paper/--card), törtfehér szöveg (--ink/--ink-soft) és világosabb, telítettebb réz kiemelőszín (--accent/--accent-deep), hogy sötét háttéren is jól látszódjon és kontrasztos maradjon. */ #naplo { --paper: #182525; --card: #223231; --ink: #F2ECE4; --ink-soft: #C7BEB4; --line: rgba(255, 255, 255, .14); --track: rgba(255, 255, 255, .12); --accent: #e0935f; --accent-deep: #e0935f; --accent-onpetrol: var(--rez-300); /* a petrol .nextup doboz és a sötét .plan felirata: 4.78:1 (a #e0935f csak 3.81:1 volt) */ --accent-text: #f0b592; /* a réz szövegváltozata sötét üvegen: legalább 4.5:1 a kompozitált felületen */ --wash: rgba(224, 147, 95, .22); --wash-soft: rgba(224, 147, 95, .12); /* --cream és --dark-chip szándékosan NEM változik: ezek a mindig-sötét "chip" elemek (tooltip, toast, a karikakerék jelvényei és feliratai, a defúziós terv-doboz) mindkét témában sötét maradnak, lásd lejjebb. */ --btn-ink: #2b160d; /* a gombok/kijelölt vezérlők felirata: a most már világosabb rézháttéren a korábbi fehér szöveg helyett sötét tinta ad AA kontrasztot */ /* Üveg sötét alapon: a közös --uveg-sotet / --uveg-keret-sotet / --uveg-arnyek-sotet tokenek */ --g-bg: var(--uveg-sotet); --g-bg-strong: rgba(30, 44, 44, .90); --g-soft: rgba(255, 255, 255, .05); --g-inner: rgba(6, 14, 14, .30); /* beágyazott elem sötét üvegen: süllyesztett, sötétebb réteg (a világos réteg rontaná a kontrasztot) */ --g-dark: rgba(6, 12, 12, .55); --g-edge: var(--uveg-keret-sotet); --g-edge-dark: var(--uveg-keret-sotet); --g-shadow: var(--uveg-arnyek-sotet); --g-shadow-up: 0 -16px 44px -20px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .22); --g-shadow-inner: inset 0 1px 0 rgba(255, 255, 255, .12); } /* A fejezetcímek (h2-h4) és néhány direkt --petrol-t használó felirat a közös style.css márkaszínére (sötétzöld) van állítva - ez sötét alapon szinte láthatatlan lenne, ezért itt a témába illő világos --ink-re váltunk. */ #naplo h2, #naplo h3, #naplo h4, #naplo .ah-n, #naplo .tamogato h3, #naplo .fold-t, #naplo .foldh, #naplo .vj .mhead, #naplo .vj .vjk, #naplo .ter-cim, #naplo .terkartya .tk-n, #naplo .gyak-cim, #naplo .gyak-cimke { color: var(--ink); } /* A közös style.css globális "strong, b { color: var(--petrol) }" szabálya a napló sok helyén (pl. .stat b, .st-f b, a lábjegyzet kiemelt szavai) nem kap saját színfelülírást, tehát ez a sötétzöld szín érvényesül - világos alapon ez még olvasható, sötét alapon szinte eltűnne. Öröklődő színre váltva mindenhol a helyi (esetenként pasztell felületen fixen sötét) szövegszínt veszi fel. */ #naplo b, #naplo strong { color: inherit; } /* ---------- Üveges felületek: a fenti --g-* változók már sötét tokenekre mutatnak ---------- */ /* A kijelölt szegmens (.segb) kis, tömör elem: a sötét üveg-sávon világosabb réz-fehér tónust kap. */ #naplo .segb[aria-checked="true"] { background: rgba(255, 255, 255, .14); box-shadow: 0 1px 4px rgba(0, 0, 0, .35); } /* ---------- Pasztell érzéscsalád-felületek: a felület marad pasztell (inline JS-stílus, nem tudjuk/nem szabad átszínezni), de a rajtuk lévő szöveg és a közvetlen környezet fixen sötét marad, hogy ne legyen vakító, olvashatatlan folt. Érinti: érzelemkerék cikkelyei (lásd lejjebb a .wlab/.wbadge fix-chipjét), .fpanel, .epill, .wchip, valamint - a heti családsávokkal rokon mintaként - a "sajátszavak" panel (.sig), a helyzetkártyák hátlapja (.st-b) és a kitöltött naptárnapok (.dtile.st-done). */ #naplo .fpanel, #naplo .epill, #naplo .wchip, #naplo .sig, #naplo .st-b, #naplo .dtile.st-done { color: #2a2a2a; --ink: #2a2a2a; --ink-soft: #55524f; } /* A .fpanel és a .st-b nagy, egybefüggő pasztell felület - finoman tompítva, hogy sötét oldalon ne hasson vakító foltnak; a kisebb elemeknél (chip, pill, sáv-címke) ez nem indokolt. */ #naplo .fpanel { filter: brightness(.94); border-color: rgba(0, 0, 0, .22); } #naplo .st-b { filter: brightness(.94); } /* A szólista chipjei a világos pasztell .fpanel felületen ülnek, ezért sötét módban is VILÁGOS hátteret kapnak: enélkül a fenti szabály sötét tintát írna egy sötét --card hátterre, és olvashatatlanok lennének. */ #naplo .wchip { background: #FFFFFF; border-color: rgba(0, 0, 0, .18); } /* A családszín nélküli (saját szavas) pirula háttere alapból a sötét --wash-soft lenne, a fenti szabály viszont sötét tintát ír rá: világos hátteret adunk neki, hogy olvasható maradjon. A családszínes pirulák inline --ft értéke ezt felülírja. */ #naplo .epill { background: var(--ft, #F2ECE4); border-color: var(--fm, rgba(0, 0, 0, .18)); } #naplo .wchip.l3 { background: rgba(255, 255, 255, .72); } #naplo .wchip:hover { border-color: var(--fc); } #naplo .fpanel .fmeta, #naplo .fpanel .farr { color: #55524f; } /* Az érzelemkerék közepe (SVG-attribútum: fill="#FFFFFF") sötét oldalon világos foltként világítana, és a rajta lévő világos felirat olvashatatlan lenne: itt sötét, üveges lyukat kap. A cikkelyek saját színei érintetlenek. */ #naplo .wheel > circle { fill: rgba(24, 37, 37, .92); stroke: rgba(255, 255, 255, .22); } /* A hangulattérkép négy nagy körének pasztell színe marad, de a feliratuk a világos --ink helyett fixen sötét, különben világos pasztellen világos szöveg lenne. */ body:has(#naplo) #naplo .mcirc { color: #2a2a2a; } /* a .mcirc alapszabálya a dark blokk után következik: a magasabb specificitás kell */ /* Hangulattérkép: a negyedek áttekinthetően, de nem vakítóan tintázzák a sötét felületet. */ #naplo .mq { background: rgba(var(--qc), .28); } /* ---------- Új elemek sötét módban ---------- */ #naplo { --fold-hover: rgba(224, 147, 95, .13); } /* .fold / .fold-b / .ahet / .vj / .card.tamdoboz üvege a --g-* változókból jön (sötét tokenek); itt csak a fix színű részeket állítjuk át. */ #naplo .fold-t, #naplo .foldh { color: var(--ink); } #naplo .fold-j { background: rgba(255, 255, 255, .10); } #naplo .fold-j::before { border-color: var(--accent-text); } #naplo #h-weeknote { color: var(--ink-soft); } /* kiemelt segély: sötét alapon a petrol nem látszana, ezért réz akcentus, erősebb kerettel */ #naplo .sos.sos--kiemelt { border-color: rgba(224, 147, 95, .5); border-left-color: var(--accent); background-image: linear-gradient(135deg, rgba(224, 147, 95, .18), rgba(224, 147, 95, .04) 70%); box-shadow: var(--g-shadow); } #naplo .sos--kiemelt h4 { color: var(--ink); } #naplo .sos--kiemelt .btn { background: var(--accent-deep); } #naplo .sos--kiemelt .btn:hover { background: #f0b592; } /* támogatás doboz: réz akcentus sötét üvegen */ #naplo .card.tamdoboz { border-color: rgba(224, 147, 95, .40); border-top-color: var(--accent); background-image: linear-gradient(140deg, rgba(224, 147, 95, .16), rgba(224, 147, 95, .04)); box-shadow: var(--g-shadow); } #naplo .tam-ikon { background: rgba(224, 147, 95, .18); } /* visszajelző űrlap: a kiválasztott értékelés a sötét mód gombszínpárját kapja (a fenti általános .segb szabálynál nagyobb specificitással), az üzenet-sáv sötét, süllyesztett */ #naplo .vj .segb[aria-checked="true"] { background: var(--accent-deep); color: var(--btn-ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .4); } #naplo .vj .segb:hover { color: var(--ink); } #naplo .vj [id$="vj-uzenet"] { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .16); color: var(--ink); } /* hangulattérkép: a görgethető rács és a cellák. A cellák alapja sötét, halványabb szín-átmenet (--mc-k a telítettséget csökkenti, --mc-cap a felső korlát), hogy a világos szöveg (--ink) mindenhol legalább 5:1 kontrasztot kapjon. */ #naplo .mzgrid { scrollbar-color: var(--accent) rgba(255, 255, 255, .06); } #naplo .mzgrid::-webkit-scrollbar-track { background: rgba(255, 255, 255, .06); } #naplo .mcell { --mc-k: .7; --mc-cap: .42; --mc-base: rgba(6, 14, 14, .30); } /* Tartalék sötét módban: tömörebb, de még mindig sötét üvegtónus */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #naplo { --g-bg: rgba(34, 50, 49, .94); --g-bg-strong: rgba(28, 42, 42, .98); --g-soft: rgba(34, 50, 49, .80); --g-inner: rgba(46, 62, 61, .90); --g-dark: rgba(6, 12, 12, .92); } } } /* ---------- hangulattérkép: az első lépés négy nagy köre ---------- */ #naplo .mcircs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,3.2vw,20px); max-width:430px;margin:8px auto 0} #naplo .mcirc{position:relative;display:flex;align-items:center;justify-content:center; aspect-ratio:1;border-radius:50%;padding:10px;text-align:center;cursor:pointer; font:inherit;color:var(--ink); border:1.5px solid rgba(var(--qc),.5); background:radial-gradient(circle at 34% 28%, var(--qt), var(--qm)); box-shadow:0 6px 18px rgba(62,49,41,.10); transition:transform .15s ease, box-shadow .15s ease} #naplo .mcirc:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(62,49,41,.16)} #naplo .mcirc:focus{outline:none} #naplo .mcirc:focus-visible{outline:3px solid var(--accent);outline-offset:3px} #naplo .mcirc-t{display:block;font-size:clamp(13px,3.3vw,15.5px);line-height:1.3} #naplo .mcirc-t b{display:block;font-weight:700} @media (prefers-reduced-motion:reduce){ #naplo .mcirc{transition:none} #naplo .mcirc:hover{transform:none} } /* ========================================================================== v72 finomítás: telefonos heti doboz, üzenetek az érzéseknek, festményszelet, beállítás-kártyák, idő/dátum mezők ========================================================================== */ /* ---------- a heti bejegyzések szekciója: .hetblokk > .telefon ---------- */ /* A blokk nagyobb függőleges térközt és két halvány, réz és petrol színfoltot kap (nem hivalkodó). A foltok a blokk saját dobozán belül maradnak, így nem növelik meg az oldal szélességét. */ #naplo .hetblokk{position:relative;isolation:isolate;margin:8px 0 10px;padding:26px 0 30px} #naplo .hetblokk::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:40px; background: radial-gradient(62% 52% at 16% 26%,rgba(195,143,112,.24),transparent 70%), radial-gradient(58% 50% at 86% 78%,rgba(22,78,78,.14),transparent 72%)} /* A telefon: füstös petrol-üveg keret (vastag, lekerekített), rajta finom fényszegély; a képernyő világos üveg. A hangszórósáv és a "home indicator" csík a keretre kerül, nem a képernyőre. */ /* Méret: a keret 400px-ig nő, de a konténerhez igazodik (width:100%), így 375 pixeles kijelzőn sem lóg ki. */ #naplo .telefon{position:relative;width:100%;max-width:400px;margin:0 auto;padding:8px 11px 8px;border-radius:44px; background-color:rgba(12,44,44,.94); background-image:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,0) 42%); -webkit-backdrop-filter:var(--uveg-homaly);backdrop-filter:var(--uveg-homaly); border:1px solid rgba(255,255,255,.28); box-shadow:0 30px 60px -28px rgba(22,78,78,.65),0 10px 22px -14px rgba(22,50,50,.35), inset 0 1px 0 rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.05)} #naplo .telefon-fej{display:flex;align-items:center;justify-content:center;height:24px} #naplo .telefon-hangszoro{display:block;width:56px;height:6px;border-radius:999px;background:rgba(255,255,255,.30);font-style:normal} #naplo .telefon-kepernyo{position:relative;padding:20px 14px 20px;border-radius:33px;overflow:hidden; background-color:rgba(255,255,255,.93); background-image:linear-gradient(180deg,rgba(255,255,255,.75),rgba(243,230,221,.55)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 2px 12px -6px rgba(22,78,78,.25)} #naplo .telefon-kepernyo .week{gap:5px} #naplo .telefon-lab{position:relative;height:24px} #naplo .telefon-lab::after{content:"";position:absolute;left:50%;top:50%;width:96px;height:4px;margin:-2px 0 0 -48px;border-radius:999px;background:rgba(255,255,255,.34)} /* Keskeny kijelzőn (375 px) a keret és a képernyő oldalsó párnázása szűkül, hogy a hét csempe számai ne vágódjanak le; a csempék kisebb térközzel, de továbbra is magasak maradnak. */ @media(max-width:430px){ #naplo .hetblokk{margin-left:-12px;margin-right:-12px} /* a keret a lap saját oldalsó margójáig ér ki */ #naplo .telefon{padding:6px 8px;border-radius:38px} #naplo .telefon-kepernyo{padding:18px 8px 18px;border-radius:30px} #naplo .telefon-kepernyo .week{gap:3px} #naplo .dtile{padding-left:0;padding-right:0} #naplo .dt-n{font-size:27px} #naplo .dt-i{letter-spacing:-.02em} } @media(max-width:380px){#naplo .dt-i{font-size:9.5px}} @media(min-width:431px){#naplo .dt-i{font-size:11.5px}#naplo .dtile{min-height:104px}} /* ---------- üzenetek az érzéseknek ---------- */ /* .ucsalad: a család színével keretezett blokk (--fc/--ft/--fm/--fs a JS style-jából). Világos módban a pasztell --ft felület, sötét módban sötét üveg, halvány családszín-fátyollal (lásd a dark blokkot). */ #naplo #u-lista{margin-top:6px} #naplo .ucsalad{position:relative;margin:0 0 16px;padding:14px 14px 12px;border-radius:var(--radius); background-color:var(--ft,var(--g-bg));border:1px solid var(--fm,var(--g-edge));border-top:4px solid var(--fc,var(--accent)); box-shadow:var(--g-shadow)} #naplo .ucim{display:flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;font-size:22px;line-height:1.15;color:var(--petrol);margin-bottom:12px} #naplo .ucim .fdot{width:12px;height:12px} #naplo .ukartyak{display:grid;grid-template-columns:minmax(0,1fr);gap:10px} @media(min-width:560px){#naplo .ukartyak{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Egy kártya: fehéres, áttetsző felület a pasztell alapon; a bal oldali sáv (::before) a család színét viszi, a sáv erőssége típusonként más: segítő közepes, bátorító a legerősebb, megnyugtató a leghalványabb, az önreflexió kérdése a legvékonyabb sávval és dőlt betűvel. */ #naplo .ukartya{--w:4px;--bc:var(--fc,var(--accent));position:relative;min-width:0; padding:11px 14px 12px 17px;border-radius:14px; background-color:rgba(255,255,255,.76);border:1px solid var(--fm,var(--g-edge)); box-shadow:0 1px 0 rgba(255,255,255,.7) inset} #naplo .ukartya::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:var(--w);border-radius:0 4px 4px 0;background:var(--bc)} #naplo .ucimke{display:block;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text);margin-bottom:5px} #naplo .ukartya p{margin:0;font-size:15px;line-height:1.55;color:var(--ink)} #naplo .u-s{--w:4px} #naplo .u-b{--w:7px} #naplo .u-m{--w:4px;--bc:var(--fm,var(--wash))} #naplo .u-o{--w:3px;background-color:rgba(255,255,255,.60)} #naplo .u-o p{font-family:var(--disp);font-style:italic;font-size:16.5px;line-height:1.45} @supports (color:color-mix(in srgb,red,blue)){ #naplo .u-m{--bc:color-mix(in srgb,var(--fc,var(--accent)) 45%,transparent)} } /* a mai (megnevezett) család: kiemelt keret és lágy fény, nyugodtan */ #naplo .ucsalad--mai{box-shadow:0 0 0 2px var(--fc,var(--accent)),0 18px 38px -22px var(--fc,var(--accent)),var(--g-shadow-inner)} #naplo #u-mai{margin:0 0 14px} #naplo #u-mai:empty{display:none} #naplo #u-mai b{color:var(--ink)} /* ---------- záró gondolat: festményszelet + Picasso-idézet ---------- */ /* A festményszelet természetes méretben jelenik meg: a forrás 740x180, ezért a kép a saját arányát tartja (height:auto, object-fit:fill), és sosem nagyítjuk 740 pixel fölé. A kép és az idézet egy elemnek látszik: a kép felső sarkai, az idézet alsó sarkai kerekítettek. */ #naplo .festmeny{margin:0 auto 14px;max-width:740px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--g-shadow)} #naplo .festmeny picture{display:block} #naplo .festmeny img{display:block;width:100%;height:auto;max-width:740px;object-fit:fill;border-radius:var(--radius) var(--radius) 0 0} #naplo .festmeny .quotecard{margin:0;border-top:0;border-radius:0 0 var(--radius) var(--radius);box-shadow:none} /* ---------- beállítások és mentés: kártyák ---------- */ /* A .beallkartya ugyanaz az üveges .card, mint a kezdőlap eszközkártyái (.hubcard): azonos rács, sugár, keret és kiemelés. A kártya oszlopos elrendezésű, hogy a gombok a párjukkal egy vonalba kerüljenek. */ #naplo .beallkartya{display:flex;flex-direction:column;margin-bottom:0;padding:16px 18px 18px;text-align:center;transition:border-color .15s ease} #naplo .beallkartya p, #naplo .beallkartya .confirm{text-align:center} #naplo .beallkartya:hover{border-color:var(--accent)} #naplo .beallkartya .mhead{font-family:var(--disp);font-size:20px;font-weight:700;line-height:1.25;letter-spacing:normal;text-transform:none;color:var(--petrol);margin-bottom:6px} #naplo .beallkartya .small{margin-bottom:10px} #naplo .beallkartya .btn{margin-top:14px} #naplo .beallkartya>.btn:last-child{margin-top:auto} #naplo .beallkartya>:nth-last-child(2){margin-bottom:14px} #naplo .beallkartya .field{margin-top:4px} #naplo .beallkartya .field--ido input{margin-left:auto;margin-right:auto} #naplo .beallkartya .dlrow{justify-content:center} #naplo .beallkartya{overflow-wrap:anywhere} /* A két kártya gombsora egy vonalba kerül (560 px felett, két oszlopban): a .beallracs sorai közösek, a kártyák subgridként osztoznak rajtuk. Sorok: 1 fejléc, 2 leírás, 3 időmező (az emlékeztetőnél), 4 MŰVELET (gombok), 5 megerősítő doboz, 6 lábjegyzet. A gombok margója nulla, a köz a fölöttük lévő elemek alsó margójából jön, így a két gomb teteje pontosan azonos magasságba kerül. Ahol nincs subgrid, marad a fenti oszlopos (flex) elrendezés, és a leírás min-height-ja nem szükséges mobilon sem. */ @media(min-width:560px){ @supports (grid-template-rows:subgrid){ #naplo .beallracs{row-gap:0;margin-bottom:2px} #naplo .beallkartya{display:grid;grid-template-rows:subgrid;grid-row:span 6;margin-bottom:12px;align-content:start} #naplo .beallkartya>*{min-width:0} #naplo .beallkartya>.mhead{grid-row:1} #naplo .beallkartya>p.small:nth-child(2){grid-row:2;margin-bottom:12px} #naplo #h-k-ment>p.small:nth-child(2){grid-row:2 / span 2} #naplo .beallkartya>p.small:nth-child(3){grid-row:3;margin:0 0 12px} #naplo .beallkartya>.field{grid-row:3;margin:0 0 12px} #naplo .beallkartya>.dlrow, #naplo .beallkartya>.btn, #naplo .beallkartya>.btn:last-child{grid-row:4;margin:0;align-self:start} #naplo .beallkartya .dlrow .btn{margin:0} #naplo .beallkartya>.confirm{grid-row:5;margin-top:12px} #naplo .beallkartya>p.small:last-child:not(:nth-child(2)){grid-row:6;margin:12px 0 0} #naplo .beallkartya>.linkbtn{grid-row:5;justify-self:center} } } #naplo input[type=file]{display:block;width:100%;max-width:100%;font:inherit;font-size:14px;color:var(--ink-soft);margin:6px 0 4px} #naplo input[type=file]::file-selector-button{font:inherit;font-size:14px;font-weight:600;color:var(--accent-text);background:transparent; border:1.5px solid var(--accent-deep);border-radius:999px;padding:8px 16px;margin:0 10px 0 0;cursor:pointer} #naplo input[type=file]::file-selector-button:hover{background:var(--wash-soft)} /* ---------- idő- és dátummező: a napló design-jában ---------- */ /* Ugyanaz a keret, sugár, betűtípus és fókuszjelzés, mint a szövegmezőknél (#naplo input[type=text]), 48px magas, 16px betűvel (iOS-en így nem nagyít rá fókuszkor). A natív óra/naptár ikont saját, réz színű SVG-ikonra cseréljük, 44px-es kattintható felülettel; sötét módban az ikon világos rézszínű. */ #naplo input[type=time], #naplo input[type=date]{ display:block;width:100%;height:48px;min-height:48px;padding:0 6px 0 14px; font:inherit;font-size:16px;font-weight:600;line-height:1.2;font-variant-numeric:lining-nums tabular-nums; color:var(--ink);background-color:var(--card); border:1px solid var(--line);border-radius:14px; -webkit-appearance:none;appearance:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.5); accent-color:var(--accent-deep);cursor:pointer;text-align:left; transition:border-color .15s ease,box-shadow .15s ease} #naplo input[type=time]:hover, #naplo input[type=date]:hover{border-color:var(--accent)} #naplo input[type=time]:focus, #naplo input[type=date]:focus{border-color:var(--accent-deep);box-shadow:0 0 0 3px var(--wash)} #naplo input[type=time]:focus-visible, #naplo input[type=date]:focus-visible{outline:3px solid var(--accent);outline-offset:2px} #naplo .field--ido input{width:150px;max-width:100%} #naplo input[type=time]::-webkit-date-and-time-value, #naplo input[type=date]::-webkit-date-and-time-value{text-align:left;min-height:1.2em;margin:0;padding:0} #naplo input[type=time]::-webkit-datetime-edit, #naplo input[type=date]::-webkit-datetime-edit{padding:0} #naplo input[type=time]::-webkit-datetime-edit-fields-wrapper, #naplo input[type=date]::-webkit-datetime-edit-fields-wrapper{padding:0} #naplo input[type=time]::-webkit-datetime-edit-hour-field:focus, #naplo input[type=time]::-webkit-datetime-edit-minute-field:focus, #naplo input[type=date]::-webkit-datetime-edit-year-field:focus, #naplo input[type=date]::-webkit-datetime-edit-month-field:focus, #naplo input[type=date]::-webkit-datetime-edit-day-field:focus{ background:var(--wash);color:var(--ink);border-radius:6px;outline:none} #naplo input[type=time]::-webkit-calendar-picker-indicator, #naplo input[type=date]::-webkit-calendar-picker-indicator{ box-sizing:border-box;width:44px;height:44px;margin:0;padding:0;cursor:pointer;border-radius:10px;opacity:1; color:transparent;-webkit-filter:none;filter:none; background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:20px 20px; transition:background-color .15s ease} #naplo input[type=time]::-webkit-calendar-picker-indicator:hover, #naplo input[type=date]::-webkit-calendar-picker-indicator:hover{background-color:var(--wash-soft)} #naplo input[type=time]::-webkit-calendar-picker-indicator{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23845a46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")} #naplo input[type=date]::-webkit-calendar-picker-indicator{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23845a46' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")} /* Firefox: nincs stílusozható indikátor, a mező saját ikonja marad; a fenti keret/betű ott is érvényes */ @media(prefers-reduced-motion:reduce){ #naplo .beallkartya, #naplo input[type=time], #naplo input[type=date], #naplo input[type=time]::-webkit-calendar-picker-indicator, #naplo input[type=date]::-webkit-calendar-picker-indicator{transition:none} } /* ---------- sötét mód: az új elemek ---------- */ @media (prefers-color-scheme: dark) { /* a heti blokk színfoltjai és a telefon */ #naplo .hetblokk::before{ background: radial-gradient(62% 52% at 16% 26%,rgba(224,147,95,.16),transparent 70%), radial-gradient(58% 50% at 86% 78%,rgba(80,170,170,.12),transparent 72%)} #naplo .telefon{background-color:rgba(4,12,12,.88);border-color:rgba(255,255,255,.22); box-shadow:0 30px 60px -28px rgba(0,0,0,.75),0 10px 22px -14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.04)} #naplo .telefon-kepernyo{background-color:rgba(24,37,37,.96); background-image:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 2px 14px -6px rgba(0,0,0,.6)} #naplo .telefon-hangszoro{background:rgba(255,255,255,.24)} #naplo .telefon-lab::after{background:rgba(255,255,255,.30)} /* innen folytasd: sötét alapon kevésbé sötétített, valamivel világosabb petrol üveg */ #naplo .nextup{background-color:rgba(18,64,64,.78);border-color:var(--uveg-keret-sotet); box-shadow:0 16px 40px -18px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.04)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ #naplo .nextup{background-color:rgba(18,64,64,.96)} } /* üzenetek: sötét üveg, halvány családszín-fátyol; a szöveg a világos --ink */ #naplo .ucsalad{background-color:var(--g-bg);border-color:rgba(255,255,255,.16);border-top-color:var(--fc,var(--accent))} @supports (color:color-mix(in srgb,red,blue)){ #naplo .ucsalad{background-image:linear-gradient(180deg,color-mix(in srgb,var(--fc,var(--accent)) 20%,transparent),color-mix(in srgb,var(--fc,var(--accent)) 6%,transparent))} } #naplo .ucim{color:var(--ink)} #naplo .ukartya{background-color:var(--g-inner);border-color:rgba(255,255,255,.12);box-shadow:var(--g-shadow-inner)} #naplo .u-o{background-color:rgba(6,14,14,.18)} #naplo .ucsalad--mai{box-shadow:0 0 0 2px var(--fc,var(--accent)),0 18px 38px -22px var(--fc,var(--accent)),var(--g-shadow-inner)} /* beállítás-kártyák címe */ #naplo .beallkartya .mhead{color:var(--ink)} /* idő/dátum: sötét mezőfelület, világos réz ikon (a natív ikon helyett saját, világos rézszínű SVG) */ #naplo input[type=time], #naplo input[type=date]{color-scheme:dark;background-color:rgba(255,255,255,.06);box-shadow:none} #naplo input[type=time]::-webkit-calendar-picker-indicator{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0b592' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")} #naplo input[type=date]::-webkit-calendar-picker-indicator{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0b592' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='3'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E")} #naplo input[type=file]::file-selector-button{color:var(--accent-text)} } /* ========================================================================== v73 finomítás: kiemelés-nyelv a kártyákon, "hamarosan" állapot, dekorkép, vissza gomb a fejlécben ========================================================================== */ /* ---------- a .sos--kiemelt nyelve, halkabb változatban: eszközkártyák és beállítás-kártyák ---------- */ /* A kiemelt segély doboz (petrol sáv, petrol keret, színes tónus) a lap leghangsúlyosabb eleme marad: 6px-es sáv, 1.5px-es keret, .14-es tónus, nagy árnyék, petrol gomb. A kártyák ugyanezt a nyelvet viszik, de minden tengelyen egy fokkal halkabban: 3px-es sáv, 1px-es halvány keret, .07-es tónus, kis árnyék, gomb nélkül. Így a kártyák összefüggenek vele, de nem versenyeznek. */ #naplo .hubcard, #naplo .beallkartya{ border:1px solid rgba(22,78,78,.20);border-left:3px solid rgba(22,78,78,.62); background-image:linear-gradient(135deg,rgba(22,78,78,.075),rgba(22,78,78,.012) 70%); box-shadow:0 10px 24px -20px rgba(22,78,78,.45),inset 0 1px 0 rgba(255,255,255,.75)} #naplo .hubcard{padding-left:16px} #naplo .beallkartya{padding-left:16px} #naplo .hubcard:hover, #naplo .beallkartya:hover{border-color:rgba(22,78,78,.38);border-left-color:var(--petrol)} #naplo .hubcard .ht{color:var(--petrol)} /* a "Heti áttekintés" gomb is .hubcard: ugyanaz a nyelv */ /* ---------- inaktív, "hamarosan" kártya (pl. Üzenetek az érzéseknek) ---------- */ /* Nem opacity-vel halványítjuk (az a szöveg kontrasztját is vinné), hanem a tónus, a sáv és az árnyék csökken, a szövegszín a halványabb, de még AA feletti --ink-soft. A .hstat feliratot egyértelmű, szaggatott keretű "Hamarosan" címkévé alakítjuk. */ #naplo .hubcard.hamarosan{cursor:default;filter:saturate(.5); border-color:rgba(22,78,78,.12);border-left-color:rgba(22,78,78,.26); background-image:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)} #naplo .hubcard.hamarosan:hover{border-color:rgba(22,78,78,.12);border-left-color:rgba(22,78,78,.26)} #naplo .hubcard.hamarosan .ht{color:var(--ink-soft)} #naplo .hubcard.hamarosan .hstat{margin-top:10px;padding:3px 11px;border:1px dashed var(--ink-soft);border-radius:999px; background:var(--wash-soft);color:var(--ink-soft);font-size:11px;letter-spacing:.08em} #naplo .hubcard:disabled{cursor:default} /* ---------- dekorkép a "Miben segíthet ez a napló?" fülben ---------- */ /* A forrás 339 px széles: a kép sosem lehet szélesebb (nincs felnagyítás, nincs elmosódás). 560 px felett jobbra úszik, a szöveg körbefolyja; alatta középre igazított, kis blokk. */ #naplo .fold-b{display:flow-root} #naplo .dekor{display:block;width:min(180px,74%);max-width:339px;margin:6px auto 16px; border-radius:18px;overflow:hidden;background:var(--wash-soft); border:1px solid var(--g-edge);box-shadow:var(--g-shadow)} #naplo .dekor picture{display:block} #naplo .dekor img{display:block;width:100%;height:auto;max-width:339px} @media(min-width:560px){ #naplo .dekor{float:right;width:160px;margin:4px 0 12px 20px} } /* az úszó kép mellett az idézet nem csúszik alá: külön formázási környezetben a kép mellett marad */ #naplo .dekor ~ .quotecard{display:flow-root} /* ---------- vissza gomb a napló fejlécében ---------- */ /* Kerek, üveges gomb a márkanév előtt. A nyíl (‹) a gomb szövege helyett CSS-ből rajzolódik, így pontosan középre esik; a gomb neve az aria-label. 44x44 px a kattintható felület; a negatív függőleges margó miatt a gomb megjelenése nem növeli a fejléc magasságát. */ #naplo .visszagomb{position:relative;flex:none;width:44px;height:44px;margin:-8px 0 -8px -6px;padding:0;border-radius:50%; font-size:0;line-height:0;color:transparent;cursor:pointer; background-color:var(--g-bg-strong);border:1px solid var(--g-edge); -webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur); box-shadow:var(--g-shadow-inner),0 4px 12px -6px rgba(22,78,78,.4); transition:background-color .15s ease,border-color .15s ease,transform .12s ease} #naplo .visszagomb::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -2px; border-left:2.5px solid var(--petrol);border-bottom:2.5px solid var(--petrol);border-radius:1px; transform:rotate(45deg);transition:transform .15s ease} #naplo .visszagomb:hover{background-color:var(--wash-soft);border-color:var(--accent)} #naplo .visszagomb:hover::before{transform:translateX(-2px) rotate(45deg)} #naplo .visszagomb:active{transform:scale(.94)} #naplo .visszagomb:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* Keskeny kijelzőn a márkanév és a lépéscsip kicsit szűkül, hogy a vissza gomb mellett is elférjenek; ha mégsem, a márkanév végén három pont jelzi a levágást (a csip sosem szorul ki). */ @media(max-width:440px){ #naplo .visszagomb{margin-left:-4px} #naplo header{gap:6px} #naplo header .brand{font-size:16.5px;overflow:hidden;text-overflow:ellipsis} #naplo header .brand span{font-size:11px} #naplo header .num{flex:none;padding:3px 8px;letter-spacing:.05em} } #naplo header .brand{overflow:hidden;text-overflow:ellipsis} @media(prefers-reduced-motion:reduce){#naplo .visszagomb, #naplo .visszagomb::before{transition:none}} /* ---------- sötét mód: a v73 elemek ---------- */ @media (prefers-color-scheme: dark) { /* kártyák: a kiemelés-nyelv réz akcentussal (a petrol sötét alapon nem látszana), ugyanúgy halkan */ #naplo .hubcard, #naplo .beallkartya{ border-color:rgba(224,147,95,.24);border-left-color:rgba(224,147,95,.70); background-image:linear-gradient(135deg,rgba(224,147,95,.10),rgba(224,147,95,.02) 70%); box-shadow:var(--g-shadow)} #naplo .hubcard:hover, #naplo .beallkartya:hover{border-color:rgba(224,147,95,.45);border-left-color:var(--accent)} #naplo .hubcard .ht{color:var(--ink)} #naplo .hubcard.hamarosan{border-color:rgba(255,255,255,.10);border-left-color:rgba(224,147,95,.28); background-image:none;box-shadow:var(--g-shadow-inner)} #naplo .hubcard.hamarosan:hover{border-color:rgba(255,255,255,.10);border-left-color:rgba(224,147,95,.28)} #naplo .hubcard.hamarosan .ht{color:var(--ink-soft)} #naplo .hubcard.hamarosan .hstat{background:rgba(255,255,255,.06);border-color:var(--ink-soft);color:var(--ink-soft)} #naplo .dekor{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.05)} #naplo .dekor img{filter:brightness(.9)} #naplo .visszagomb::before{border-color:var(--accent-text)} #naplo .visszagomb:hover{background-color:rgba(255,255,255,.10);border-color:var(--accent)} } /* ---------- sötét mód: a v81 kitölthető gyakorlatok ---------- */ @media (prefers-color-scheme: dark) { #naplo .gyak-cim, #naplo .gyak-cimke { color: var(--ink); } #naplo .gyak ::placeholder { color: #aaa197; } /* a pipa sötét tinta a világos rézen */ #naplo .gyak-pipa input[type=checkbox]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%232b160d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } } /* ========================================================================== Pillangó - a napló saját pillangója: üveges gomb a címek mellett, amely berepül, és az alatta nyíló üveges panel (.pillangoszo). Csak transform és opacity animálódik, az elrendezés nem mozdul. ========================================================================== */ /* --- a gomb: kerek üvegchip, 44px-es érintési céllal (::after, nem a chip nő) --- */ #naplo .pillango{ position:relative;display:inline-flex;align-items:center;justify-content:center; vertical-align:middle;flex:none;width:30px;height:30px;margin:0;padding:0; border:1px solid var(--g-edge);border-radius:50%; background-color:var(--g-bg);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur); box-shadow:var(--g-shadow-inner);color:inherit;font:inherit;line-height:1; cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent; transition:background-color .15s,border-color .15s; } #naplo .pillango::after{content:"";position:absolute;inset:-7px;border-radius:50%;background:transparent} #naplo .pillango--kicsi{width:25px;height:25px} #naplo .pillango--kicsi::after{inset:-10px} /* 25 + 20 = 45px, így a kicsi is eléri a 44px-t */ #naplo .pillango--nagy{width:34px;height:34px} @media (hover:hover){#naplo .pillango:hover{border-color:var(--accent);background-color:var(--g-bg-strong)}} #naplo .pillango:active{border-color:var(--accent)} #naplo .pillango:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px} #naplo .pillango svg{display:block;width:19px;height:19px;pointer-events:none;transform-origin:50% 50%} #naplo .pillango--kicsi svg{width:15px;height:15px} #naplo .pillango--nagy svg{width:22px;height:22px} /* --- csendes hívogatás az olvasatlan pillangónak: lassú szárnycsapás, csak 3 kör --- */ @keyframes pillangoCsendes{ 0%,26%,100%{transform:scaleX(1)} 7%,19%{transform:scaleX(.93)} 13%{transform:scaleX(1)} } #naplo .pillango--uj svg{animation:pillangoCsendes 4.5s ease-in-out 1s 3} /* --- berepülés: jobbról lentről, enyhe dőléssel; utána 3 szárnycsapás --- */ @keyframes pillangoBe{ from{transform:rotate(-14deg) translate(26px,18px) scale(.72);opacity:0} to{transform:rotate(0) translate(0,0) scale(1);opacity:1} } @keyframes pillangoSzarny{ 0%,100%{transform:scaleX(1)} 50%{transform:scaleX(.86)} } #naplo .pillango--repul{animation:pillangoBe 620ms cubic-bezier(.22,.8,.3,1) both} #naplo .pillango--repul svg{animation:pillangoSzarny 300ms ease-in-out 620ms 3} /* --- a panel: üveges kártya a cím alatt --- */ @keyframes pillangoNyit{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:translateY(0)} } #naplo .pillangoszo{ margin:10px 0 16px;padding:14px 16px 12px; border:1px solid var(--g-edge);border-radius:var(--radius); background-color:var(--g-bg);-webkit-backdrop-filter:var(--g-blur);backdrop-filter:var(--g-blur); box-shadow:var(--g-shadow); animation:pillangoNyit 260ms ease-out; } #naplo .pillangoszo-fej{ display:flex;align-items:center;gap:7px;margin:0 0 8px; font-size:12.5px;font-weight:600;letter-spacing:.04em;line-height:1.3;color:var(--accent-text); } #naplo .pillangoszo-fej svg{display:block;flex:none;width:17px;height:17px} #naplo .pillangoszo p{font-size:15px;line-height:1.65;color:var(--ink);margin:0 0 9px} #naplo .pillangoszo p:last-child{margin:0} #naplo .pillangoszo p b{font-family:var(--disp);font-weight:400;font-size:15.5px;color:var(--petrol)} #naplo .pillangoszo-tipp{ border-top:1px solid var(--line);padding-top:10px; font-size:13.5px;line-height:1.5;color:var(--ink-soft); } /* egy bekezdéses, fej nélküli változat */ #naplo .pillangoszo--rovid{padding:11px 16px} #naplo .pillangoszo--rovid p{margin:0} /* --- sötét mód: a --petrol itt nem változik, ezért a kérdéscímke saját felülírást kap --- */ @media (prefers-color-scheme: dark) { #naplo .pillangoszo p b, #naplo .pillangoszo-fej { color: var(--accent-text); } } /* --- csökkentett mozgás: nincs animáció, a pillangó teljesen látható --- */ @media (prefers-reduced-motion: reduce) { #naplo .pillango--uj svg, #naplo .pillango--repul, #naplo .pillango--repul svg, #naplo .pillangoszo { animation: none; } #naplo .pillango--repul { opacity: 1; transform: none; } #naplo .pillango { transition: none; } } /* a pillangó helye a címben: nem bontja meg a cím elrendezését, csak mellé ül */ #naplo .pill-cim .pillango{ margin-left: 9px; } /* a panel aljáról indított ugrás után a feladat egy pillanatra kiemelkedik */ #naplo .gyak--kiemel{ box-shadow: 0 0 0 2px var(--accent-text); } /* ========================================================================== Aura-kártyák: lágy, szemcsés, elmosott sugárgradiens felületek egyetlen mondattal. Az érzéscsalád színeit a JS inline állítja a kártyán: --fc (telített), --ft (legvilágosabb), --fm (közép), --fs (erős árnyalat). Világos módban pasztell rétegek, sötét módban a --fc halvány alfával a sötét felületen. A szöveg mindenhol tömör (nem áttetsző) színt kap. ========================================================================== */ /* --- közös alap: kártya, szemcsefátyol, tartalom --- */ #naplo .aura{ --aura-tinta:var(--ink); --aura-halk:#37332f; /* a kis feliratok sötétebb, de tömör tónusa */ position:relative;display:block;width:100%;overflow:hidden; /* overflow:clip: nem hoz létre görgetődobozt, így az aspect-ratio dobozt a tartalom ki tudja nyújtani (a hidden csak tartalék) */ overflow:clip; border-radius:18px;border:1px solid rgba(255,255,255,.7); color:var(--aura-tinta);text-align:left; background-color:var(--ft); /* tartalék (color-mix nélkül): csak a három pasztell tónus */ background-image: radial-gradient(90% 70% at 14% 10%,var(--fs) 0%,transparent 66%), radial-gradient(80% 75% at 92% 28%,var(--fm) 0%,transparent 72%), radial-gradient(95% 65% at 32% 104%,var(--fs) 0%,transparent 70%); box-shadow:0 14px 34px -22px rgba(42,42,42,.45),inset 0 1px 0 rgba(255,255,255,.6); } /* négy réteg: a --fc csak egy kis, halvány folt a jobb alsó sarokban */ #naplo .aura{ background-image: radial-gradient(90% 70% at 14% 10%,var(--fs) 0%,transparent 66%), radial-gradient(80% 75% at 92% 28%,var(--fm) 0%,transparent 72%), radial-gradient(95% 65% at 32% 104%,var(--fs) 0%,transparent 70%), radial-gradient(60% 52% at 84% 90%,color-mix(in srgb,var(--fc) 26%,transparent) 0%,transparent 74%); } /* szemcsefátyol: monokróm feTurbulence zaj, lágyfény keverés */ #naplo .aura-fatyol{ position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;display:block; border-radius:inherit;pointer-events:none;opacity:.17;mix-blend-mode:soft-light; 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='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:160px 160px; } #naplo .aura-be{position:relative;z-index:1;display:flex;flex-direction:column;min-width:0}/* --- apró feliratok: normál írásmód, tömör színnel --- */ /* --- a mondat --- */ #naplo .aura-mondat{ font-family:var(--disp);font-weight:400;line-height:1.34;color:var(--aura-tinta); overflow-wrap:break-word; } @supports (text-wrap:balance){#naplo .aura-mondat{text-wrap:balance}} /* --- napi kártya: álló, középre igazított --- */ #naplo .aura--napi{ aspect-ratio:4/5;border-radius:22px; display:flex;align-items:center;justify-content:center; padding:clamp(24px,6vw,34px); } #naplo .aura--napi .aura-be{width:100%;align-items:center;text-align:center;gap:clamp(14px,3.4vw,20px)} #naplo .aura--napi .aura-mondat{font-size:clamp(21px,5.2vw,29px);text-align:center} /* --- mentett mondat: kompakt, balra igazított --- */ #naplo .aura--mentett{padding:16px 18px} #naplo .aura--mentett .aura-be{gap:8px;text-align:left} #naplo .aura--mentett .aura-mondat{font-size:17px;text-align:left} /* ========================================================================== Sötét mód: a pasztell tónusok vakítanának, ezért a kártya sötét, áttetsző alapra épül, és a --fc színből épített, alacsony alfájú foltokat kap. A szöveg a (már világos) --ink / --ink-soft marad. ========================================================================== */ @media (prefers-color-scheme: dark){ #naplo .aura{ --aura-halk:#E4DCD2; border-color:rgba(255,255,255,.18); background-color:rgba(22,32,32,.94); background-image:none; box-shadow:0 16px 40px -22px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.14); } #naplo .aura{ background-image: radial-gradient(90% 70% at 14% 10%,color-mix(in srgb,var(--fc) 14%,transparent) 0%,transparent 66%), radial-gradient(80% 75% at 92% 28%,color-mix(in srgb,var(--fc) 10%,transparent) 0%,transparent 72%), radial-gradient(95% 65% at 32% 104%,color-mix(in srgb,var(--fc) 12%,transparent) 0%,transparent 70%), radial-gradient(60% 52% at 84% 90%,color-mix(in srgb,var(--fc) 16%,transparent) 0%,transparent 74%); } #naplo .aura-fatyol{opacity:.1} } /* egy elmentett mondat sora: az aurakártya és mellette a törlés */ #naplo .kedvsor{ display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; } #naplo .kedvsor .aura{ flex:1 1 auto; min-width:0; } #naplo .kedvsor .linkbtn{ flex:none; margin-top:4px; } /* a kártya alatti gombok: ha nem férnek el egymás mellett, külön sorba kerülnek */ #naplo #u-gombok{ flex-wrap:wrap; } #naplo #u-gombok .btn{ flex:0 1 auto; } /* Sötét módban az aura az eredeti arányokkal alig látszott, pedig éppen a lágy ragyogás a kártya lényege. Erősebb színfoltok, és föléjük egy lágy szélű sötét réteg pontosan ott, ahol a szöveg áll: a nagy kártyán középen, a kicsiken alul. Így a legvilágosabb folton is legalább 8:1 a szöveg kontrasztja. */ @media (prefers-color-scheme: dark){ #naplo .aura{ --aura-f1:radial-gradient(90% 70% at 14% 10%,color-mix(in srgb,var(--fc) 34%,transparent) 0%,transparent 66%); --aura-f2:radial-gradient(80% 75% at 92% 28%,color-mix(in srgb,var(--fc) 26%,transparent) 0%,transparent 72%); --aura-f3:radial-gradient(95% 65% at 32% 104%,color-mix(in srgb,var(--fc) 30%,transparent) 0%,transparent 70%); --aura-f4:radial-gradient(60% 52% at 84% 90%,color-mix(in srgb,var(--fc) 38%,transparent) 0%,transparent 74%); background-image:var(--aura-f1),var(--aura-f2),var(--aura-f3),var(--aura-f4); } /* a takaró réteg legelöl áll, ezért az első a felsorolásban */ #naplo .aura--napi{ background-image: radial-gradient(72% 48% at 50% 50%,rgba(12,18,18,.66) 0%,rgba(12,18,18,.5) 52%,rgba(12,18,18,0) 100%), var(--aura-f1),var(--aura-f2),var(--aura-f3),var(--aura-f4); } #naplo .aura--arny,#naplo .aura--mentett{ background-image: linear-gradient(to top,rgba(12,18,18,.68) 0%,rgba(12,18,18,.52) 46%,rgba(12,18,18,0) 100%), var(--aura-f1),var(--aura-f2),var(--aura-f3),var(--aura-f4); } #naplo .aura-fatyol{opacity:.13} } /* A mondatkártya lapozósora: két nyíl és közöttük a sorszám. */ #naplo .lapozo{ display:flex; align-items:center; justify-content:center; gap:16px; margin:14px 0 4px; } #naplo .lapgomb{ width:44px; height:44px; flex:none; display:inline-flex; align-items:center; justify-content:center; font-size:24px; line-height:1; color:var(--accent-text); background:none; border:1px solid var(--line); border-radius:50%; cursor:pointer; padding:0; } #naplo .lapgomb:hover{ border-color:var(--accent-text); } #naplo .lapgomb:focus-visible{ outline:2px solid var(--accent-text); outline-offset:2px; } #naplo .lapszam{ font-size:13px; color:var(--ink-soft); min-width:66px; text-align:center; } /* a lapozás súgója a kártya alatt */ #naplo .lapsugo{ text-align:center; margin:0 0 4px; }