/* ===================================================================== Bendri komponentai (1.91.0) — maketai 31 (paprastas puslapis, 404), 26 (mėgstamiausių skydas), 24 (kvėpavimo apskritimas), 27 (PWA). Kraunama visur, po main.css ir blocks.css. ===================================================================== */ /* --------------------------------------------------------------------- 1. Paprastas puslapis ir 404 (maketas 31): be tamsios juostos — kelias, H1, „Atnaujinta …“ data ir 65 ženklų teksto stulpelis. --------------------------------------------------------------------- */ #page-hero.plain-head{ margin:0; padding:calc(64px + clamp(28px, 4vw, 48px)) 0 0; background:var(--bg-page); text-align:left; } .plain-head-inner{ width:100%; max-width:calc(65ch + 2 * var(--gutter-wide)); margin:0 auto; box-sizing:border-box; padding:0 var(--gutter-wide); display:flex; flex-direction:column; gap:14px; } .plain-crumbs ol{ display:flex; flex-wrap:wrap; gap:6px; margin:0 0 6px; padding:0; list-style:none; } .plain-crumbs li{ display:inline-flex; align-items:center; gap:6px; margin:0; padding:0; } .plain-crumbs li::before{ content:none; } .plain-crumbs li + li::before{ content:"›"; display:inline; position:static; width:auto; height:auto; background:none; color:var(--ink-muted); } .plain-crumbs a, .plain-crumbs span{ font-family:'Karla',sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); text-decoration:none; } .plain-crumbs a:hover{ color:var(--ink); } .plain-crumbs a::after{ content:none !important; } /* 2.2.0: telefone — 44px paspaudimo plotas, išdėstymas nepasikeičia. */ @media (max-width:899px){ .plain-crumbs a{ display:inline-block; padding:13px 0; margin:-13px 0; } } #page-hero.plain-head h1{ margin:0; max-width:none; text-align:left; font:400 clamp(34px, 5vw, 46px)/1.1 var(--font-display); letter-spacing:-0.01em; color:var(--ink); } .plain-date, .plain-eyebrow{ margin:0; font-family:'Karla',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-meta); } .plain-lead{ margin:6px 0 0; font-size:clamp(17px, 2vw, 19px); line-height:1.65; color:var(--ink-body); } .plain-body .tool-body-inner{ max-width:calc(65ch + 2 * var(--gutter-wide)); padding-top:clamp(24px, 3vw, 36px); } .plain-body .entry-content{ max-width:65ch; } .plain-body .entry-content > *{ max-width:65ch; } /* 404 */ #page-hero.plain-404{ padding-bottom:clamp(56px, 8vw, 96px); min-height:52vh; } .plain-404 .plain-eyebrow{ color:var(--gold); } html:not([data-theme="evening"]) .plain-404 .plain-eyebrow{ color:var(--ink-meta); } .plain-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; } .plain-popular{ display:flex; flex-direction:column; margin-top:clamp(24px, 4vw, 36px); border-top:1px solid var(--hairline-strong); padding-top:16px; } .plain-popular a{ padding:12px 0; border-bottom:1px solid var(--hairline); text-decoration:none; font-size:16px; color:var(--ink); } .plain-popular a:hover{ color:var(--accent); } .plain-popular .plain-eyebrow{ margin-bottom:6px; } @media (max-width:620px){ .plain-actions .btn{ flex:1 1 100%; justify-content:center; } } /* --------------------------------------------------------------------- 2. Mėgstamiausių skydas (maketas 26): tamsus abiejose temose. --------------------------------------------------------------------- */ .fav-panel-body{ width:min(340px, 100%); padding:0; gap:0; background:var(--c-deep-2); color:var(--ink-on-panel); border-left:1px solid rgba(var(--rgb-light),.08); box-shadow:-24px 0 60px -20px rgba(0,0,0,.6); transition:transform .26s cubic-bezier(.2,.7,.2,1); } @media (min-width:900px){ .fav-panel-body{ width:420px; } } html[data-theme="evening"] .fav-panel-body{ background:var(--c-deep-3); } .fav-panel-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0; padding:22px 22px 18px; border-bottom:1px solid rgba(var(--rgb-light),.1); } .fav-panel-heading{ display:flex; flex-direction:column; gap:4px; } .fav-panel-title{ margin:0; font:400 24px/1.15 var(--font-display) !important; color:var(--ink-on-panel) !important; } .fav-panel-meta{ font-family:'Karla',sans-serif; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); } .fav-panel-close{ flex:none; width:40px; height:40px; border-radius:50%; border:1px solid rgba(var(--rgb-light),.25); background:transparent; color:var(--ink-on-panel); font-size:22px; } .fav-panel-close:hover{ background:rgba(var(--rgb-light),.08); color:var(--ink-on-panel); } .fav-panel-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:18px 22px; } .fav-item{ position:relative; display:flex; flex-direction:column; gap:10px; margin:0; padding:16px 18px; border-radius:14px; background:rgba(var(--rgb-light),.06); border:1px solid rgba(var(--rgb-light),.1); box-shadow:none; } html[data-theme="evening"] .fav-item{ background:rgba(var(--rgb-light),.06); } .fav-item-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .fav-item-type{ font-family:'Karla',sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); } .fav-item-remove{ width:32px; height:32px; margin:-6px -6px -6px 0; padding:6px; border:0; border-radius:50%; background:transparent; cursor:pointer; } .fav-item-remove svg{ width:18px; height:18px; fill:var(--gold); } .fav-item-remove:hover{ background:rgba(var(--rgb-light),.08); } .fav-item-text{ margin:0; font:400 18px/1.45 var(--font-display) !important; color:var(--ink-on-panel) !important; } .fav-item-author{ margin:-4px 0 0; font-size:13px; color:rgba(var(--rgb-light),.6); } .fav-item-copy{ align-self:flex-start; padding:0; border:0; background:none; cursor:pointer; font-family:'Karla',sans-serif; font-size:13px; font-weight:600; color:var(--gold); } .fav-item-copy:hover{ color:var(--ink-on-panel); background:none; } /* Sienos žinutė — savo lapelio tapatybė: šviesus popierius ir aukso brūkšnys. */ .fav-item--note{ background:#FFFDF7; border-color:transparent; } html[data-theme="evening"] .fav-item--note{ background:#FFFDF7; } .fav-item--note::before{ content:""; width:28px; height:2px; background:var(--gold); } .fav-item--note .fav-item-type{ color:#2F6B47; } .fav-item--note .fav-item-remove svg{ fill:#2F6B47; } .fav-item--note .fav-item-text{ color:var(--c-deep) !important; } .fav-item--note .fav-item-author{ color:#56625A; } .fav-item--note .fav-item-copy{ color:var(--c-green); } .fav-panel-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:32px 28px; text-align:center; color:rgba(var(--rgb-light),.7); } .fav-panel-empty[hidden]{ display:none; } .fav-panel-empty svg{ width:26px; height:26px; color:var(--gold); } .fav-panel-empty h3{ margin:0; font:400 22px/1.2 var(--font-display); color:var(--ink-on-panel); } .fav-panel-empty p{ margin:0; font-size:14px; line-height:1.6; max-width:30ch; } .fav-empty-btn{ margin-top:8px; background:var(--c-light); color:var(--c-deep); border-color:var(--c-light); } .fav-empty-btn:hover{ background:var(--gold); border-color:var(--gold); color:var(--c-deep); opacity:1; } .fav-undo{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 16px 12px; padding:14px 16px; border-radius:14px; background:rgba(var(--rgb-light),.08); border:1px solid rgba(var(--rgb-light),.16); font-size:14px; color:var(--ink-on-panel); } .fav-undo[hidden]{ display:none; } .fav-undo button{ border:0; background:none; cursor:pointer; font-family:'Karla',sans-serif; font-size:14px; font-weight:600; color:var(--gold); } .fav-panel-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 22px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid rgba(var(--rgb-light),.1); } .fav-panel-foot[hidden]{ display:none; } .fav-clear{ border:0; background:none; cursor:pointer; padding:8px 0; font-family:"Karla",sans-serif; font-size:14px; color:rgba(var(--rgb-light),.65); } .fav-clear:hover{ color:var(--ink-on-panel); } .fav-download{ min-height:40px; padding:0 18px; border-radius:var(--radius-pill); cursor:pointer; border:1px solid rgba(var(--rgb-light),.3); background:transparent; color:var(--ink-on-panel); font-family:'Karla',sans-serif; font-size:14px; font-weight:600; } .fav-download:hover{ border-color:var(--gold); } @media (prefers-reduced-motion:reduce){ .fav-panel-body{ transition-duration:.12s; } } /* --------------------------------------------------------------------- 3. Kvėpavimo apskritimas (maketas 24) --------------------------------------------------------------------- */ .breath-band{ background:var(--bg-page); padding:0; } .breath-band-inner{ width:100%; max-width:calc(820px + 2 * var(--gutter-wide)); margin:0 auto; box-sizing:border-box; padding:clamp(40px, 6vw, 72px) var(--gutter-wide); } .breath{ display:grid; grid-template-columns:minmax(0, 1fr); gap:clamp(20px, 3vw, 36px); align-items:center; padding:clamp(22px, 3vw, 32px); border-radius:20px; background:var(--bg-card); border:1px solid var(--hairline); } @media (min-width:720px){ .breath{ grid-template-columns:240px minmax(0, 1fr); } } .breath-visual{ position:relative; width:min(240px, 100%); aspect-ratio:1; margin:0 auto; } .breath-ring{ position:absolute; inset:0; border-radius:50%; border:1px solid var(--hairline-strong); } .breath-circle{ position:absolute; inset:0; margin:auto; width:100%; height:100%; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center; background:color-mix(in srgb, var(--accent) 16%, var(--bg-card)); border:1px solid var(--hairline-strong); transform:scale(.62); transition:transform 4s cubic-bezier(.4,0,.6,1); } .breath.is-in .breath-circle{ transform:scale(1); } .breath.is-out .breath-circle{ transform:scale(.62); } .breath-cue{ font:400 30px/1.1 var(--font-display); color:var(--ink); white-space:nowrap; } .breath-sub{ font-family:'Karla',sans-serif; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); max-width:16ch; } .breath-body{ display:flex; flex-direction:column; gap:12px; min-width:0; } .breath-eyebrow{ font-family:'Karla',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-meta); } .breath .breath-title{ margin:0; padding:0; border:0; font:400 clamp(26px, 3.2vw, 32px)/1.15 var(--font-display) !important; color:var(--ink) !important; } .breath .breath-title::before{ content:none !important; } .breath-text{ margin:0; max-width:40ch; font-size:16px; line-height:1.65; color:var(--ink-body); } .breath-live{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .breath-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; } .breath-offer{ margin:0; padding:10px 14px; border-radius:12px; background:var(--bg-alt); font-size:14px; line-height:1.5; color:var(--ink-body); } .breath-offer[hidden]{ display:none; } .breath-count{ display:flex; align-items:baseline; gap:14px; margin-top:6px; padding-top:12px; border-top:1px solid var(--hairline); } .breath-count span{ font-family:'Karla',sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-muted); } .breath-count strong{ font:400 22px/1 var(--font-display); color:var(--ink); } @media (max-width:719px){ .breath{ text-align:center; } .breath-visual{ width:200px; } .breath-body{ align-items:center; } .breath-actions{ justify-content:center; } .breath-count{ align-self:stretch; justify-content:space-between; } } @media (prefers-reduced-motion:reduce){ .breath-circle, .breath.is-in .breath-circle, .breath.is-out .breath-circle{ transition:none; transform:scale(.86); } } /* --------------------------------------------------------------------- 4. PWA (maketas 27): kvietimas apačioje ir „atgal“ įdiegtoje programėlėje. --------------------------------------------------------------------- */ .pwa-card{ position:fixed; z-index:1100; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); max-width:420px; margin:0 auto; padding:18px; border-radius:18px; background:var(--bg-card); border:1px solid var(--hairline-strong); box-shadow:var(--shadow-panel); /* 3.7.0 */ display:flex; flex-direction:column; gap:14px; transform:translateY(16px); opacity:0; transition:transform .26s ease, opacity .26s ease; } .pwa-card[hidden]{ display:none; } .pwa-card.is-open{ transform:none; opacity:1; } .pwa-card-row{ display:flex; gap:14px; align-items:flex-start; } .pwa-card-icon{ flex:none; width:48px; height:48px; border-radius:12px; background:var(--c-deep); } .pwa-card-title{ margin:0 0 4px; font:400 20px/1.2 var(--font-display) !important; color:var(--ink) !important; padding:0; border:0; } .pwa-card-title::before{ content:none !important; } .pwa-card-text{ margin:0; font-size:14px; line-height:1.55; color:var(--ink-body); } .pwa-card-actions{ display:flex; gap:10px; } .pwa-card-actions .btn-primary{ flex:1; justify-content:center; } .pwa-card-how{ align-self:flex-start; font-size:13px; color:var(--ink-muted); } @media (prefers-reduced-motion:reduce){ .pwa-card{ transition:none; } } .pwa-back{ display:none; } html.is-standalone .pwa-back{ display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; margin-right:6px; border-radius:50%; border:1px solid var(--hairline-strong); background:transparent; color:var(--ink); cursor:pointer; } html.is-standalone .pwa-back[hidden]{ display:none; } html.is-standalone .pwa-back svg{ width:18px; height:18px; } html.is-standalone body{ padding-bottom:env(safe-area-inset-bottom); } /* Siaurame ekrane „atgal“ užima logotipo lapelio vietą, kad tilptų meniu. */ @media (max-width:440px){ html.is-standalone .pwa-back{ width:36px; height:36px; margin-right:2px; } html.is-standalone .site-header .logo svg, html.is-standalone .site-header .logo .logo-mark{ display:none; } html.is-standalone .site-header .logo{ font-size:17px; } } /* --------------------------------------------------------------------- 5. Prieinamumas (1.92.0, kontrolinis sąrašas 09) --------------------------------------------------------------------- */ /* Fokusas — 2px žiedas (--focus-ring), tamsiose plokštėse — auksinis. */ :where(a, button, input, textarea, select, summary, [role="button"], [tabindex]):focus-visible{ outline:2px solid var(--focus-ring) !important; outline-offset:2px; box-shadow:none !important; } :where(.ink-hero, #page-hero.ink-hero, .site-footer, footer, .fav-panel-body, .qz-res-hero, .qz-card--scale, .qz-invite, .is-style-da-ink, .is-style-da-cta, .next-band--ink, .wall-section, .hero-col-panel, #generator) :where(a, button, input, textarea, select, summary, [role="button"], [tabindex]):focus-visible{ outline-color:var(--gold) !important; } /* Naršymo keliai — be bendro meniu permatomumo (jis mažino kontrastą). */ .crumbs a, .plain-crumbs a{ opacity:1; } .crumbs a, .crumbs .crumbs-back{ color:var(--ink-muted); } /* Kontrastas: smulkūs užrašai, kurie buvo per blankūs. */ .reader-hero-cat{ color:var(--ink-meta); } .breath-sub{ color:var(--ink-body); } .form-ink .field-label{ color:rgba(var(--rgb-light),.74); } .form-ink .wall-form-note, #wall .wall-form--inline .wall-form-note{ color:rgba(var(--rgb-light),.7); } #wmsg-counter{ color:rgba(var(--rgb-light),.7); } /* Meniu: skyrius, kuriame esi (aria-current). */ #site-header nav a[aria-current]{ opacity:1; color:var(--ink); } #site-header nav a[aria-current]::after{ width:100%; } /* Paspaudimo plotai telefone ir planšetėje — ne mažiau 44px aukščio. */ @media (max-width:899px){ .footer-nav-list{ gap:0; } .footer-nav a, .footer-email, .footer-legal a, .footer-bottom-links a{ display:inline-flex; align-items:center; min-height:44px; } .card-share{ width:44px; height:44px; } .practice-card-more, .card-link, .tools-all-link, .wall-section-link, .reader-hero-more, .page-aside .aside-back, .aside-quiz-start, .ew-back-link, .article-toc-tool-link, .article-toc a, .fav-item-copy, .plain-popular a, .breath-count{ min-height:44px; } .practice-card-more, .card-link, .tools-all-link, .wall-section-link, .reader-hero-more, .page-aside .aside-back, .aside-quiz-start, .ew-back-link, .fav-item-copy{ display:inline-flex; align-items:center; } .article-toc-tool-link{ display:flex; align-items:center; } .search-wrap input, #quote-search, #name-search, #article-search{ min-height:44px; } #wall-consent{ width:22px; height:22px; } } /* Turinio sąrašai yra