/* ═══════════════════════════════════════════════════════════ SOMNA · ORACULUM Dizaino sistema v2 – „senovinis astronomijos atlasas“ Graviūra, plaukelio linijos, žalvaris ant juodo. ═══════════════════════════════════════════════════════════ */ /* ─────────── 1. Tokens ─────────── */ /* Numatytasis režimas – tamsus. Šviesus įjungiamas per ; spalvos perrašomos žemiau. */ :root { color-scheme: dark; /* Erdvė */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 176px; /* Rašalas – neutralus, ne violetinis */ --void: #0A0C10; --deep: #0D1016; --surface: #12161E; --raised: #171C26; --line: #242A36; --line-2: #333A48; /* Tekstas. Kontrastas prieš --void išmatuotas ir laikomas virš WCAG AA 4,5:1 – anksčiau --text-3 siekė tik 3,7:1. */ --text: #EFEDE8; --text-2: #B5B2AA; --text-3: #8A887F; --title: #F7F5F1; /* Žalvaris. --brass tekstui, --brass-solid mygtukų fonui, --on-brass tekstui ant to fono. */ --brass: #D6BB7E; --brass-lt: #EBDCB2; --brass-dk: #8A7139; --brass-solid: #C6A664; --on-brass: #14100A; /* Antriniai – prislopinti, retai naudojami */ --celest: #7FA0C4; /* dangaus mėlyna */ --verd: #86A492; /* patina, teigiama */ --clay: #C48775; /* molis, įspėjimas */ --indigo: #2C3E6B; /* Horoskopo rodiklių šiltoji šeima – dera su žalvariu. Koralas → varis → medus → šalavijas. */ --m-love: #D0917C; /* meilė – koralinė rožė */ --m-work: #C7A063; /* darbas – varinis auksas */ --m-energy: #A7B384; /* energija – šalavijas */ --m-luck: #E1C382; /* sėkmė – medaus auksas */ /* Paviršiai – vietoje fiksuotos baltos, kad veiktų abu režimai */ --surf-a: rgba(255,255,255,.030); --surf-b: rgba(255,255,255,.010); --surf-c: rgba(255,255,255,.016); --hover: rgba(255,255,255,.06); --tint: rgba(214,187,126,.07); --tint-2: rgba(214,187,126,.12); /* Perdangų fonai. Šie PRIVALO būti tokenai: anksčiau jie buvo įkalti tamsūs, todėl šviesiame režime įvesties laukai tapdavo juodi su tamsiu tekstu (kontrastas 1,12:1) ir žmogus nematydavo, ką rašo. */ --nav-bg: rgba(7,8,11,.86); --menu-bg: rgba(10,12,16,.98); --field-bg: rgba(7,8,11,.6); --toast-bg: rgba(15,18,24,.97); --scroll-hover: #3a4252; /* Atmosfera */ --grain-op: .14; --grain-blend: overlay; --aura-1: rgba(198,166,100,.06); --aura-2: rgba(44,62,107,.16); /* Kampai – aštrūs = rimta */ --r1: 2px; --r2: 4px; --r3: 8px; --r4: 12px; --r-pill: 999px; /* Šešėliai */ --sh1: 0 1px 2px rgba(0,0,0,.5); --sh2: 0 10px 34px rgba(0,0,0,.5); --sh3: 0 30px 80px rgba(0,0,0,.62); /* Šriftai */ --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --sans: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "IBM Plex Mono", Consolas, monospace; /* Judesys – lėtas ir santūrus */ --ease: cubic-bezier(.22,.61,.36,1); --ease-o: cubic-bezier(.16,1,.3,1); --maxw: 1200px; --nav-h: 68px; } /* ─────────── Šviesus režimas ─────────── Ne apversta paletė: žalvaris #C6A664 ant balto duotų 2,3:1, todėl akcentas patamsintas. Kontrastai matuoti realiai. */ :root[data-theme="light"] { color-scheme: light; --void: #F7F5F0; --deep: #F1EEE7; --surface: #FFFFFF; --raised: #FFFFFF; --line: #E4DFD4; --line-2: #CEC8B9; --text: #15171B; --text-2: #4C4F57; --text-3: #6B6E76; --title: #0E1013; --brass: #7A5F20; --brass-lt: #5C4715; --brass-dk: #B99A4F; --brass-solid: #8A6D28; --on-brass: #FFFBF0; --celest: #3D5F84; --verd: #3F6350; --clay: #8C4A38; --indigo: #2C3E6B; --m-love: #B0604A; /* meilė – koralinė rožė (šviesus fonas) */ --m-work: #92702B; /* darbas – varinis auksas */ --m-energy: #6C7A46; /* energija – šalavijas */ --m-luck: #9C7B2A; /* sėkmė – medaus auksas */ --surf-a: rgba(0,0,0,.022); --surf-b: rgba(0,0,0,.006); --surf-c: rgba(0,0,0,.014); --hover: rgba(0,0,0,.05); --tint: rgba(122,95,32,.07); --tint-2: rgba(122,95,32,.12); /* Šviesūs perdangų fonai, kad tamsus tekstas ant jų būtų įskaitomas */ --nav-bg: rgba(247,245,240,.88); --menu-bg: rgba(247,245,240,.98); --field-bg: #FFFFFF; --toast-bg: rgba(255,255,255,.97); --scroll-hover: #B8B2A4; --grain-op: .05; --grain-blend: multiply; --aura-1: rgba(198,166,100,.16); --aura-2: rgba(44,62,107,.07); --sh1: 0 1px 2px rgba(30,25,15,.06); --sh2: 0 10px 30px rgba(30,25,15,.10); --sh3: 0 24px 60px rgba(30,25,15,.16); } /* Žvaigždės tinka tik nakčiai */ :root[data-theme="light"] #stars { display: none; } /* ─────────── 2. Reset ─────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* hidden atributas privalo nustelbti bet kokį display iš klasės. Be šito .login-wrap ir panašūs blokai su display:grid lieka matomi net kai JS nustato hidden, ir langai persidengia. */ [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 24px); -webkit-text-size-adjust: 100%; } body { background: var(--void); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; font-feature-settings: "kern" 1, "liga" 1, "cv05" 1; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg, canvas { display: block; max-width: 100%; } button, input, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } table { border-collapse: collapse; width: 100%; } ::selection { background: var(--tint-2); color: var(--text); } :focus-visible { outline: 1px solid var(--brass); outline-offset: 3px; } ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: var(--void); } ::-webkit-scrollbar-thumb { background: var(--line-2); border: 3px solid var(--void); border-radius: var(--r-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); } /* ─────────── 3. Atmosfera ─────────── */ #stars { position: fixed; inset: 0; z-index: 0; pointer-events: none; } /* Vos juntamas švytėjimas – ne diskotekos rūkas */ .aura { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 600px at 78% -8%, var(--aura-1), transparent 70%), radial-gradient(760px 520px at 12% 4%, var(--aura-2), transparent 72%); } .grain { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: var(--grain-op); mix-blend-mode: var(--grain-blend); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); } /* ─────────── 4. Karkasas ─────────── */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s5); position: relative; z-index: 1; } .wrap-narrow { max-width: 900px; } section { position: relative; z-index: 1; } .pad { padding-block: var(--s10); } .pad-sm { padding-block: var(--s8); } @media (max-width: 720px) { .pad { padding-block: var(--s8); } } .rule { height: 1px; border: 0; background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent); } /* ─────────── 5. Tipografija ─────────── */ h1, h2, h3, h4, .display { font-family: var(--serif); font-weight: 300; line-height: 1.1; letter-spacing: -.01em; color: var(--title); } h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); } h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); } h3 { font-size: clamp(1.2rem, 1.8vw, 1.45rem); line-height: 1.28; } h1 em, h2 em, h3 em { font-style: italic; color: var(--brass); } /* Skyriaus žymuo – romėniškas skaitmuo + linija */ .marker { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s5); } .marker span { font-family: var(--mono); font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--brass); white-space: nowrap; } .marker::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-2), transparent); } .marker.center { justify-content: center; } .marker.center::before { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-2)); } .marker.center::after { background: linear-gradient(90deg, var(--line-2), transparent); } .lede { font-size: clamp(1rem, 1.3vw, 1.1rem); color: var(--text-2); max-width: 60ch; line-height: 1.72; } .head { max-width: 66ch; margin-bottom: var(--s8); } .head.center { margin-inline: auto; text-align: center; } .head.center .lede { margin-inline: auto; } .head p { margin-top: var(--s4); } .label { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s3); } /* Ir `.prose p`, ir `p.prose`: dalis puslapių prozą deda į konteinerį (`

…`), o astrologija ir suderinamumas klasę kabina tiesiai ant pastraipos (`

`). Palikimo selektorius pastarųjų neapima, todėl tos pastraipos ilgai liko be jokio formatavimo. */ .prose p, p.prose { color: var(--text-2); font-size: 15.5px; line-height: 1.85; /* Neleidžia paskutinėje eilutėje likti vienam žodžiui – ilgame tekste tokios „našlaitės“ krinta į akis labiausiai. */ text-wrap: pretty; hanging-punctuation: first last; } .prose p + p, p.prose + p.prose { margin-top: var(--s4); } .prose strong, p.prose strong, p.prose b { color: var(--text); font-weight: 500; } .prose em, p.prose em { color: var(--brass-lt); font-style: italic; } /* ═══════════ ILGAS ANALIZĖS TEKSTAS ═══════════ Vienas formatavimas VISIEMS ilgiems aiškinimams: numerologijai, orakului, suderinamumui, horoskopams. Anksčiau kiekvienas blokas turėjo savo (arba jokio) matą, todėl tekstas tai driekdavosi per visą kortelės plotį, tai kabodavo prilipęs prie kairio krašto. Trys dalykai, kurie tai sprendžia: 1. ribotas eilutės ilgis (68 ženklai – patogiausia skaityti), 2. centruotas stulpelis, kad blokas neatrodytų nustumtas, 3. ryškesnė įžanginė pastraipa, duodanti tekstui pradžią. */ .prose-analize { max-width: 68ch; margin-inline: auto; } .prose-analize > p:first-child { font-size: 17px; line-height: 1.75; color: var(--text); } /* Skiriamasis ženklas tarp įžangos ir likusio teksto. Rodomas tik tada, kai po įžangos IŠ TIKRŲJŲ kas nors yra – po vienintele pastraipa brūkšnys kabotų be reikalo. */ .prose-analize > p:first-child:not(:only-child)::after { content: ""; display: block; width: 44px; height: 1px; margin: var(--s5) 0 0; background: linear-gradient(90deg, var(--brass-dk), transparent); } @media (max-width: 620px) { .prose-analize > p:first-child { font-size: 16px; } } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } /* ─────────── 6. Mygtukai ─────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: 46px; padding-inline: var(--s5); border-radius: var(--r2); font-size: 14.5px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .15s var(--ease-o); } .btn:active { transform: translateY(1px); } .btn-brass { background: var(--brass); color: var(--on-brass); font-weight: 600; border: 1px solid var(--brass); } .btn-brass:hover { background: var(--brass-lt); border-color: var(--brass-lt); } .btn-line { border: 1px solid var(--line-2); color: var(--text); background: transparent; } .btn-line:hover { border-color: var(--brass); color: var(--brass-lt); background: var(--tint); } .btn-quiet { color: var(--text-2); padding-inline: var(--s3); } .btn-quiet:hover { color: var(--brass); } .btn-danger { border: 1px solid rgba(169,107,91,.4); color: var(--clay); } .btn-danger:hover { background: rgba(169,107,91,.12); border-color: var(--clay); } .btn-sm { height: 36px; padding-inline: var(--s4); font-size: 13.5px; } .btn-lg { height: 54px; padding-inline: var(--s6); font-size: 14.5px; } .btn-block { width: 100%; } .btn[disabled] { opacity: .4; pointer-events: none; } /* ═══════════════════════════════════════════════════════════ 6b. Mygtukų gyvybė Svetainė tyli ir lėta, todėl mygtukai negali šokinėti. Judesio principas: paspaudimas turi jaustis kaip prisilietimas prie daikto, ne kaip programos įvykis. Žalvaris blyksteli šviesa, kaip blykstelėtų tikras metalas pasukus jį po lempa; kraštinė įsidega; paspaudus mygtukas trumpam nusileidžia. Viskas išjungiama, kai žmogus sistemoje prašo mažiau judesio. ═══════════════════════════════════════════════════════════ */ .btn { position: relative; overflow: hidden; transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease), transform .18s var(--ease-o); } /* Pakilimas ir nusileidimas. Vos pastebimas: 1,5 px užtenka, kad ranka pajustų atsaką, ir per mažai, kad blaškytų skaitant. */ .btn:hover { transform: translateY(-1.5px); } .btn:active { transform: translateY(0) scale(.985); transition-duration: .07s; } /* Šviesos blyksnis per žalvarį */ .btn-brass::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.30) 48%, rgba(255,255,255,.30) 52%, transparent 68%); transform: translateX(-135%); transition: transform .75s var(--ease-o); pointer-events: none; } .btn-brass:hover::after { transform: translateX(135%); } .btn-brass:hover { box-shadow: 0 8px 24px -8px rgba(198,166,100,.55); } .btn-brass:active { box-shadow: 0 2px 8px -4px rgba(198,166,100,.5); } /* Kontūrinis mygtukas: kraštinė įsidega iš vidaus */ .btn-line::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), var(--tint-2), transparent 70%); opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; } .btn-line:hover::before { opacity: 1; } .btn-line:hover { box-shadow: 0 6px 20px -10px rgba(198,166,100,.45); } .btn-quiet { transition: color .2s var(--ease), transform .18s var(--ease-o); } .btn-quiet:hover { transform: translateY(-1px); } .btn-danger:hover { box-shadow: 0 6px 20px -10px rgba(169,107,91,.5); } /* Laukimo būsena. Tekstas lieka vietoje, o šalia sukasi žiedas – taip žmogus mato, kad veiksmas priimtas, ir dar skaito, ko laukia. */ .btn.kraunasi { pointer-events: none; opacity: .75; } .btn.kraunasi::before { content: ""; position: static; width: 14px; height: 14px; flex: none; border: 1.5px solid currentColor; border-top-color: transparent; border-radius: 50%; opacity: 1; background: none; animation: btnSukis .7s linear infinite; } @keyframes btnSukis { to { transform: rotate(360deg); } } /* Klaviatūrai: žiedas turi būti matomas ir ant žalvario, ir ant fono */ .btn:focus-visible { outline: 2px solid var(--brass-lt); outline-offset: 3px; } /* ─────────── Kiti spaudžiami dalykai ─────────── */ .sign-btn, .mood, .cx-tab, .acct-tab, .horo-tab, .adm-tab, .pass-eye, .theme-btn { transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), transform .16s var(--ease-o); } .sign-btn:hover, .mood:hover { transform: translateY(-2px); } .sign-btn:active, .mood:active { transform: translateY(0) scale(.97); } /* Pažymėta nuotaika trumpai kryptelėja – patvirtinimas, kad įskaityta */ .mood.on { animation: moodPop .28s var(--ease-o); } @keyframes moodPop { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } } .theme-btn:hover { transform: rotate(18deg); } /* Kortelės, kurios yra nuorodos */ a.card, .prof-thread, .art-card { transition: border-color .25s var(--ease), background .25s var(--ease), transform .22s var(--ease-o), box-shadow .25s var(--ease); } a.card:hover, .prof-thread:hover, .art-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px -18px rgba(0,0,0,.7); } /* ═══════════════════════════════════════════════════════════ 6c. Turinio perėjimai Senas turinys pasitraukia greičiau (0,2 s), naujas ateina lėčiau (0,36 s) ir šiek tiek iš apačios. Toks nelygus ritmas atrodo natūraliai: dėmesys spėja pasitraukti nuo seno, kol naujas dar nesusiformavo. Vienodos trukmės perėjimas atrodo mechaniškas. ═══════════════════════════════════════════════════════════ */ #horoMain { view-transition-name: t-horo-main; } #horoSide { view-transition-name: t-horo-side; } #turinys { view-transition-name: t-skydelis; } #cxOut { view-transition-name: t-suderinamumas; } ::view-transition-old(t-horo-main), ::view-transition-old(t-horo-side), ::view-transition-old(t-skydelis), ::view-transition-old(t-suderinamumas) { animation: keicIseina .2s var(--ease) both; } ::view-transition-new(t-horo-main), ::view-transition-new(t-horo-side), ::view-transition-new(t-skydelis), ::view-transition-new(t-suderinamumas) { animation: keicAteina .36s var(--ease-o) both; } /* Tas pats rankomis, kur View Transitions nėra */ .keic-iseina { animation: keicIseina .17s var(--ease) both; } .keic-ateina { animation: keicAteina .4s var(--ease-o) both; } @keyframes keicIseina { to { opacity: 0; transform: translateY(-7px); } } @keyframes keicAteina { from { opacity: 0; transform: translateY(11px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #horoMain, #horoSide, #turinys, #cxOut { view-transition-name: none; } .keic-iseina, .keic-ateina { animation: none; } } @media (prefers-reduced-motion: reduce) { .btn, .btn:hover, .btn:active, .sign-btn, .sign-btn:hover, .sign-btn:active, .mood, .mood:hover, .mood:active, .theme-btn:hover, a.card:hover, .prof-thread:hover, .art-card:hover { transform: none; } .btn-brass::after { display: none; } .mood.on { animation: none; } .btn.kraunasi::before { animation-duration: 2s; } } /* ─────────── 7. Navigacija ─────────── */ .nav { position: fixed; inset: 0 0 auto 0; height: var(--nav-h); z-index: 100; display: flex; align-items: center; border-bottom: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease); } .nav.scrolled { background: var(--nav-bg); backdrop-filter: blur(18px) saturate(130%); border-bottom-color: var(--line); } .nav .wrap { display: flex; align-items: center; gap: var(--s5); width: 100%; } .logo { display: flex; align-items: center; gap: var(--s3); flex-shrink: 0; } .logo svg { width: 26px; height: 26px; flex-shrink: 0; } .logo-txt { display: flex; flex-direction: column; line-height: 1; } .logo-txt b { font-family: var(--serif); font-size: 19px; font-weight: 400; letter-spacing: .3em; color: var(--title); text-transform: uppercase; } .logo-txt i { font-family: var(--mono); font-style: normal; font-size: 9px; letter-spacing: .24em; color: var(--text-3); margin-top: 3px; text-transform: uppercase; } /* Nuorodos plokščios ir lengvos: mažesnis šriftas, daugiau oro, prislopinta spalva. Jokio fono ties pele, tik spalvos pokytis. */ .nav-links { display: flex; gap: var(--s2); margin-left: auto; align-items: center; } .nav-links a { padding: var(--s2) 2px; font-size: 13px; letter-spacing: .01em; color: var(--text-3); transition: color .2s var(--ease); position: relative; } .nav-links a:hover { color: var(--text); } .nav-links a.active { color: var(--brass); } .nav-links a.active::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -2px; height: 1px; background: var(--brass); } .nav-cta { display: flex; gap: var(--s3); align-items: center; margin-left: var(--s5); } .burger { display: none; width: 40px; height: 40px; border: 1px solid var(--line-2); border-radius: var(--r2); align-items: center; justify-content: center; margin-left: auto; } .burger span { display: block; width: 15px; height: 1px; background: var(--text); position: relative; transition: background .2s; } .burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 15px; height: 1px; background: var(--text); transition: transform .3s var(--ease), top .3s var(--ease); } .burger span::before { top: -5px; } .burger span::after { top: 5px; } .burger[aria-expanded="true"] span { background: transparent; } .burger[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .burger[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } .mmenu { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99; background: var(--menu-bg); backdrop-filter: blur(20px); border-bottom: 1px solid var(--line); padding: var(--s5); display: grid; gap: var(--s1); transform: translateY(-10px); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease); } .mmenu.open { opacity: 1; transform: none; pointer-events: auto; } .mmenu a { padding: var(--s3); font-size: 15px; color: var(--text-2); border-radius: var(--r2); } .mmenu a:hover { background: var(--hover); color: var(--text); } .mmenu .btn { margin-top: var(--s3); } @media (max-width: 1020px) { .nav-links, .nav-cta { display: none; } .burger { display: flex; } } /* ─────────── 8. Kortelės ─────────── */ .card { background: linear-gradient(180deg, var(--surf-a), var(--surf-b)); border: 1px solid var(--line); border-radius: var(--r3); padding: var(--s6); position: relative; transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease-o); } .card:hover { border-color: var(--line-2); } .card-hover:hover { transform: translateY(-3px); border-color: rgba(198,166,100,.35); } .card-flat { background: var(--surf-c); } /* Kampų kryželiai – graviūros detalė */ .card-marked::before, .card-marked::after { content: ""; position: absolute; width: 5px; height: 5px; border: 1px solid var(--brass-dk); opacity: .5; } .card-marked::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; } .card-marked::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; } /* ─────────── 9. Ženkleliai ─────────── */ .tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: var(--r1); border: 1px solid var(--line-2); font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; } .tag-brass { border-color: rgba(198,166,100,.4); color: var(--brass); background: var(--tint); } .tag-verd { border-color: rgba(110,139,123,.4); color: var(--verd); background: rgba(110,139,123,.07); } .tag-clay { border-color: rgba(169,107,91,.4); color: var(--clay); background: rgba(169,107,91,.07); } .tag-celest{ border-color: rgba(91,127,166,.4); color: var(--celest); background: rgba(91,127,166,.07); } /* ─────────── 10. Formos ─────────── */ .field { width: 100%; height: 46px; padding: 0 var(--s4); border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--field-bg); outline: 0; font-size: 14.5px; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); } .field::placeholder { color: var(--text-3); } .field:focus { border-color: var(--brass-dk); box-shadow: 0 0 0 3px var(--tint-2); } textarea.field { height: auto; min-height: 130px; padding: var(--s4); resize: vertical; line-height: 1.7; } select.field { appearance: none; cursor: pointer; padding-right: var(--s6); } select.field option { background: var(--raised); color: var(--text); } .select-wrap { position: relative; } .select-wrap::after { content: ""; position: absolute; right: var(--s4); top: 50%; width: 6px; height: 6px; border-right: 1px solid var(--text-3); border-bottom: 1px solid var(--text-3); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .form-row { margin-bottom: var(--s4); } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); } @media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } } .hint { font-size: 13px; color: var(--text-3); margin-top: var(--s2); line-height: 1.5; } .err { font-size: 13px; color: var(--clay); margin-top: var(--s2); } /* ─────────── 11. Rodikliai ─────────── */ .meter { display: grid; gap: 6px; } .meter-top { display: flex; justify-content: space-between; font-size: 13.5px; } .meter-top span:first-child { color: var(--text-2); } .meter-top b { font-family: var(--mono); font-size: 12.5px; color: var(--brass); font-weight: 400; } .meter-track { height: 3px; background: var(--line); border-radius: var(--r-pill); overflow: hidden; } .meter-fill { height: 100%; width: 0; background: var(--brass); border-radius: inherit; transition: width 1s var(--ease-o); } /* Šiltoji rodiklių šeima – kiekvienas su lengvu gradientu gyliui */ .meter-fill.m-love { background: linear-gradient(90deg, color-mix(in srgb, var(--m-love) 78%, #000), var(--m-love)); } .meter-fill.m-work { background: linear-gradient(90deg, color-mix(in srgb, var(--m-work) 78%, #000), var(--m-work)); } .meter-fill.m-energy { background: linear-gradient(90deg, color-mix(in srgb, var(--m-energy) 78%, #000), var(--m-energy)); } .meter-fill.m-luck { background: linear-gradient(90deg, color-mix(in srgb, var(--m-luck) 78%, #000), var(--m-luck)); } /* ─────────── 12. Žvaigždyno ženklas ─────────── */ .constel { width: 100%; height: 100%; overflow: visible; } /* Linijos „nubrėžiamos“: danga lygi pačios linijos ilgiui, todėl keičiant poslinkį atrodo, tarsi ranka vedžiotų per žemėlapį. */ .constel line { stroke: var(--brass-dk); stroke-width: .5; opacity: .55; stroke-dasharray: var(--len, 40); stroke-dashoffset: 0; transition: stroke-dashoffset .5s var(--ease-o) var(--d, 0s), opacity .4s var(--ease) var(--d, 0s), stroke .4s var(--ease); } .constel circle { fill: var(--brass-lt); transition: r .35s var(--ease-o) var(--d, 0s), fill .35s var(--ease), opacity .35s var(--ease); } .constel .c-main { fill: var(--title); } /* Švytėjimas ramybėje nematomas */ .constel .c-halo { fill: var(--brass); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.4); transition: opacity .45s var(--ease), transform .45s var(--ease-o); pointer-events: none; } /* Užvedus pelę ant kortelės žvaigždynas atgyja */ .card:hover .constel line, .lib-item:hover .constel line, .constel-live:hover line { stroke: var(--brass); opacity: 1; } .card:hover .constel .c-halo, .lib-item:hover .constel .c-halo, .constel-live:hover .c-halo { opacity: .22; transform: scale(1); } .card:hover .constel circle, .lib-item:hover .constel circle, .constel-live:hover circle { r: calc(var(--r, 1) * 1.35px); fill: var(--brass-lt); } .card:hover .constel .c-main, .lib-item:hover .constel .c-main, .constel-live:hover .c-main { fill: var(--title); } /* Lėtas mirksėjimas: kiekviena žvaigždė turi savo trukmę ir vėlavimą */ .js .constel .c-dots circle { animation: c-twinkle var(--tw, 3s) ease-in-out var(--d, 0s) infinite; } @keyframes c-twinkle { 0%, 100% { opacity: .85; } 50% { opacity: .45; } } /* Pirmasis pasirodymas: linijos nubrėžiamos iš nieko */ .js .reveal .constel line, .js .constel-draw line { stroke-dashoffset: var(--len, 40); } .js .reveal.in .constel line, .js .constel-draw.in line { stroke-dashoffset: 0; } @media (prefers-reduced-motion: reduce) { .js .constel .c-dots circle { animation: none; } .js .reveal .constel line { stroke-dashoffset: 0; } } /* ─────────── 13. Poraštė ─────────── */ .footer { border-top: 1px solid var(--line); padding-block: var(--s8) var(--s5); margin-top: var(--s10); position: relative; z-index: 1; } .footer-grid { display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: var(--s7); padding-bottom: var(--s7); } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s6); } } .footer-brand p { color: var(--text-3); font-size: 14.5px; margin-top: var(--s4); max-width: 36ch; line-height: 1.7; } .footer h5 { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-3); margin-bottom: var(--s4); font-weight: 400; } .footer-col ul { display: grid; gap: var(--s3); } .footer-col a { font-size: 14.5px; color: var(--text-2); transition: color .2s; } .footer-col a:hover { color: var(--brass); } .footer-bottom { border-top: 1px solid var(--line); padding-top: var(--s5); display: flex; justify-content: space-between; align-items: center; gap: var(--s4); flex-wrap: wrap; font-size: 13px; color: var(--text-3); } .footer-legal { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin-top: var(--s5); } .footer-legal a { font-size: 13px; color: var(--text-3); transition: color .2s var(--ease); } .footer-legal a:hover { color: var(--brass); } /* Teisinė pastaba laikoma tyliai: smulkus šriftas, be rėmelio, kad netrauktų dėmesio nuo turinio. */ /* Teisinė pastaba laikoma tyliai, BET ne prieinamumo sąskaita: šiame bloke yra Vilties linijos numeris 116 123 ir įspėjimas dėl slaptažodžių. Anksčiau 11,5 px su opacity .72 duodavo 2,79:1 kontrastą šviesiame režime – silpnesnio regėjimo žmogui tekstas praktiškai nematomas. Tylumą dabar kuria tarpas ir dydis, ne permatomumas. */ .disclaim { margin-top: var(--s5); padding: 0; border: 0; font-size: 13px; color: var(--text-2); line-height: 1.7; max-width: 92ch; } .disclaim b { color: var(--text-2); font-weight: 500; } /* ─────────── 14. Pagalbinės ─────────── */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease-o), transform .8s var(--ease-o); } .js .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: .07s; } .reveal.d2 { transition-delay: .14s; } .reveal.d3 { transition-delay: .21s; } .reveal.d4 { transition-delay: .28s; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip { position: absolute; top: -60px; left: var(--s4); z-index: 200; padding: var(--s3) var(--s4); background: var(--brass); color: var(--on-brass); border-radius: var(--r2); font-size: 14px; font-weight: 600; transition: top .2s var(--ease); } .skip:focus { top: var(--s3); } .toast { position: fixed; bottom: var(--s6); left: 50%; transform: translate(-50%, 16px); z-index: 500; padding: var(--s3) var(--s5); border: 1px solid var(--line-2); border-radius: var(--r2); background: var(--toast-bg); backdrop-filter: blur(14px); box-shadow: var(--sh3); font-size: 14.5px; max-width: min(460px, calc(100vw - 32px)); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease), transform .25s var(--ease-o); } .toast.show { opacity: 1; transform: translate(-50%, 0); } .stagger > * { opacity: 0; transform: translateY(10px); animation: rise .55s var(--ease-o) forwards; } .stagger > *:nth-child(1) { animation-delay: .04s; } .stagger > *:nth-child(2) { animation-delay: .1s; } .stagger > *:nth-child(3) { animation-delay: .16s; } .stagger > *:nth-child(4) { animation-delay: .22s; } .stagger > *:nth-child(5) { animation-delay: .28s; } .stagger > *:nth-child(6) { animation-delay: .34s; } .stagger > *:nth-child(7) { animation-delay: .4s; } .stagger > *:nth-child(8) { animation-delay: .46s; } @keyframes rise { to { opacity: 1; transform: none; } } .empty { text-align: center; padding: var(--s9) var(--s5); border: 1px dashed var(--line-2); border-radius: var(--r3); color: var(--text-3); } .empty h3 { font-size: 1.15rem; margin-bottom: var(--s2); color: var(--text-2); } .empty p { font-size: 14.5px; max-width: 40ch; margin-inline: auto; } /* ─────────── 15. Modalas ─────────── */ .backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(4,5,7,.8); backdrop-filter: blur(6px); display: grid; place-items: center; padding: var(--s5); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); } .backdrop.open { opacity: 1; pointer-events: auto; } .modal { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; border: 1px solid var(--line-2); border-radius: var(--r3); background: var(--surface); box-shadow: var(--sh3); padding: var(--s6); transform: translateY(12px); transition: transform .3s var(--ease-o); } .backdrop.open .modal { transform: none; } .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); } .modal-head h3 { font-size: 1.4rem; } .modal-head p { font-size: 13.5px; color: var(--text-3); margin-top: 5px; } .x { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--line-2); border-radius: var(--r2); display: grid; place-items: center; color: var(--text-3); font-size: 14px; transition: all .2s var(--ease); } .x:hover { border-color: var(--clay); color: var(--clay); } /* ─────────── 16. Judesio mažinimas ─────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } .js .reveal { opacity: 1; transform: none; } } /* Navigacijos nuorodos niekada nesilaužo į dvi eilutes */ .nav-links a { white-space: nowrap; }