/* ============================================================ ASTRA — vizuelni sistem Teza: instrument i almanah, ne vračara. Mesing = ljudsko i tumačenje. Hladno svetlo = izmereni podatak. Nikad obrnuto. ============================================================ */ :root { /* podloge */ --ground: #0A0C11; --ground-2: #0E1118; --ground-3: #141822; --ground-deep: #06080C; /* tekst — topla kost, nikad čisto belo */ --bone: #E9E4D9; --bone-2: #B4AEA2; --bone-3: #7C776E; /* uloge boje */ --brass: #C08A3E; /* akcija, tumačenje, ljudsko */ --brass-lit: #E2B674; --brass-deep: #7A5522; --starlight: #9FC3D8; /* isključivo izmereni podatak */ /* linije */ --rule: rgba(233, 228, 217, 0.13); --rule-strong: rgba(233, 228, 217, 0.26); --rule-brass: rgba(192, 138, 62, 0.42); /* tipografija */ /* EB Garamond nosi i grčku (politoničku), i ćirilicu, i naša slova — jedini font koji pokriva svih pet jezika i samo ime. */ --display: "EB Garamond", Georgia, "Times New Roman", serif; --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace; /* skala razmaka — 4px baza */ --s1: 0.25rem; --s2: 0.5rem; --s3: 0.75rem; --s4: 1rem; --s5: 1.5rem; --s6: 2rem; --s7: 3rem; --s8: 4rem; --s9: 6rem; --s10: 8rem; --shell: 74rem; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } /* Mora da nadjaca display iz komponenti (npr. .field { display:flex }). */ [hidden] { display: none !important; } html { scroll-behavior: smooth; /* Mreza za slucaj greske, ne resenje: prelivanja se ispravljaju tamo gde nastaju. `clip` umesto `hidden` jer hidden na se prenosi na viewport i na iOS-u i dalje pusta da se stranica povuce u stranu, dok clip ne pravi kontejner za skrol pa lepljiva traka ostaje lepljiva. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ground); color: var(--bone); font: 400 1rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } ::selection { background: var(--brass-deep); color: var(--bone); } .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; left: -999px; top: 0; z-index: 100; background: var(--brass); color: var(--ground-deep); padding: var(--s3) var(--s5); font-weight: 600; } .skip:focus { left: 0; } :focus-visible { outline: 2px solid var(--brass-lit); outline-offset: 3px; border-radius: 2px; } .shell { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; } /* Sidrena navigacija ne sme da zavuce naslov pod lepljivu traku. */ section[id] { scroll-margin-top: 5.25rem; } /* ---------------- tipografski ritam ---------------- */ h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: -0.012em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(2.5rem, 5.4vw, 4.15rem); font-weight: 500; line-height: 1.05; } h1 em { font-style: italic; font-weight: 300; color: var(--brass-lit); } h2 { font-size: clamp(1.8rem, 3.5vw, 2.75rem); font-weight: 500; line-height: 1.13; } h3 { font-family: var(--sans); font-size: 1.06rem; font-weight: 600; letter-spacing: 0.005em; } p { margin: 0 0 var(--s4); } .eyebrow { font: 500 0.72rem/1 var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass); margin: 0 0 var(--s4); } .lede, .bandhead__lede { font-size: clamp(1rem, 1.25vw, 1.115rem); line-height: 1.72; color: var(--bone-2); max-width: 54ch; } /* ---------------- dugmad ---------------- */ .btn { --btn-bg: var(--brass); --btn-fg: #17110A; display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); padding: 0.92rem 1.6rem; background: var(--btn-bg); color: var(--btn-fg); font: 600 0.95rem/1 var(--sans); letter-spacing: 0.01em; text-decoration: none; border: 1px solid var(--btn-bg); border-radius: 2px; cursor: pointer; transition: background 0.22s var(--ease), transform 0.22s var(--ease), box-shadow 0.22s var(--ease); } .btn:hover { --btn-bg: var(--brass-lit); transform: translateY(-1px); box-shadow: 0 8px 26px -14px rgba(226, 182, 116, 0.85); } .btn:active { transform: translateY(0); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--bone); border-color: var(--rule-strong); } .btn--ghost:hover { --btn-bg: rgba(192, 138, 62, 0.09); --btn-fg: var(--brass-lit); border-color: var(--rule-brass); box-shadow: none; } .btn--sm { padding: 0.6rem 1.05rem; font-size: 0.855rem; } .btn--lg { padding: 1.08rem 2rem; font-size: 1rem; } .btn--full { width: 100%; } /* ---------------- traka na vrhu ---------------- */ .topbar { position: sticky; top: 0; z-index: 40; background: rgba(10, 12, 17, 0.86); backdrop-filter: blur(14px); border-bottom: 1px solid var(--rule); } .topbar__in { display: flex; align-items: center; gap: var(--s6); min-height: 4.25rem; /* Bez ovoga flex stavke odbijaju da se skupe ispod sopstvenog sadržaja i traka gura stranicu u horizontalni skrol umesto da se prelomi. */ flex-wrap: nowrap; min-width: 0; } .topbar__in > * { min-width: 0; } .topbar .btn--sm { flex: none; } .mark { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--brass); text-decoration: none; } .mark__glyph { width: 30px; height: 30px; flex: none; } /* Na 30 px podeoci i venac perli postaju mrlja — u zaglavlju se izostavljaju. */ .topbar .mark__fine { display: none; } .mark__word { font: 500 1.42rem/1 var(--display); letter-spacing: 0.2em; text-transform: uppercase; color: var(--bone); white-space: nowrap; } .topnav { display: flex; gap: var(--s6); margin-left: auto; font-size: 0.9rem; } .topnav a { color: var(--bone-2); text-decoration: none; padding-block: 0.4rem; border-bottom: 1px solid transparent; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .topnav a:hover { color: var(--bone); border-bottom-color: var(--rule-brass); } /* prekidač jezika — kodovi, ne zastavice: zastavica označava državu, ne jezik */ .langs { display: flex; align-items: center; gap: 0.1rem; margin-left: var(--s5); padding-left: var(--s5); border-left: 1px solid var(--rule); font: 500 0.74rem/1 var(--mono); letter-spacing: 0.1em; } .langs a, .langs__now { padding: 0.42rem 0.44rem; text-decoration: none; border-radius: 2px; } .langs a { color: var(--bone-3); transition: color 0.18s var(--ease), background 0.18s var(--ease); } .langs a:hover { color: var(--brass-lit); background: rgba(192, 138, 62, 0.1); } .langs__now { color: var(--bone); background: rgba(233, 228, 217, 0.07); } @media (max-width: 72rem) { .topnav { display: none; } .topbar__in { gap: var(--s4); } .langs { margin-left: auto; } } @media (max-width: 34rem) { .langs { padding-left: var(--s3); margin-left: var(--s2); letter-spacing: 0.04em; } .langs a, .langs__now { padding: 0.42rem 0.28rem; } .topbar .btn--sm { padding: 0.55rem 0.8rem; font-size: 0.8rem; } } /* Na telefonu logo + pet jezika + dugme ne staju u jedan red: traka se širi preko ekrana i cela stranica dobija horizontalni skrol. Prebacivanje jezika nije radnja zbog koje se dolazi na sajt, pa na uskom ekranu silazi u podnožje (gde stoji i na širokom), a u traci ostaju ime i jedina radnja. Drugi red u lepljivoj traci bi pojeo previše visine ekrana. */ @media (max-width: 32rem) { .topbar .langs { display: none; } .topbar__in { gap: var(--s3); } .topbar .mark__word { font-size: 1.15rem; letter-spacing: 0.14em; } .topbar .mark { margin-right: auto; } } @media (max-width: 22rem) { .topbar .mark__glyph { display: none; } .topbar .mark__word { font-size: 1.02rem; letter-spacing: 0.1em; } } .langs--foot { margin: var(--s3) 0 0; padding: 0; border-left: 0; } /* ---------------- HERO ---------------- */ .hero { position: relative; padding-block: clamp(3.5rem, 8vw, 7rem) 0; overflow: hidden; /* Fotografija je sloj IZNAD zvezdanog polja, na 30% i u screen režimu — tamna leva strana pada pod naslov, mesing pod očitavanje desno. */ --hero-photo: url("../img/hero.jpg"); } /* Zvezdano polje: dve suptilne mreže tačaka, bez „galaksija“. Ako se doda fotografija, ide kao --hero-photo sloj ispod. */ .hero__field { position: absolute; inset: -10% -5% auto; height: 130%; /* Vidi se samo dok se fotografija ne učita ili ako je nema. */ background: radial-gradient(1.2px 1.2px at 20% 18%, rgba(233,228,217,0.55), transparent 100%), radial-gradient(1px 1px at 68% 12%, rgba(159,195,216,0.5), transparent 100%), radial-gradient(1.4px 1.4px at 82% 42%, rgba(233,228,217,0.4), transparent 100%), radial-gradient(1px 1px at 12% 62%, rgba(233,228,217,0.35), transparent 100%), radial-gradient(1.1px 1.1px at 44% 78%, rgba(159,195,216,0.4), transparent 100%), radial-gradient(1px 1px at 92% 72%, rgba(233,228,217,0.3), transparent 100%), radial-gradient(120% 80% at 78% 8%, rgba(192,138,62,0.10), transparent 62%), radial-gradient(90% 70% at 8% 96%, rgba(159,195,216,0.06), transparent 60%); pointer-events: none; } /* Kad Aca ubaci sliku: .hero { --hero-photo: url("../img/hero.jpg"); } */ .hero__field::after { content: ""; position: absolute; inset: 0; background-image: var(--hero-photo, none); background-size: cover; background-position: 70% 30%; opacity: 1; } /* Zastor preko fotografije: tekst mora da stoji na tamnom bez obzira koja slika je ubačena. Ide iznad slike, ispod sadržaja. */ .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(96deg, rgba(10, 12, 17, 0.93) 0%, rgba(10, 12, 17, 0.86) 26%, rgba(10, 12, 17, 0.62) 46%, rgba(10, 12, 17, 0.16) 62%, transparent 74%), linear-gradient(to top, rgba(10, 12, 17, 0.80) 0%, transparent 36%); } .hero__in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; padding-bottom: clamp(3rem, 7vw, 5.5rem); } .hero__copy .lede { margin-block: var(--s5) var(--s6); } .hero__cta { display: flex; flex-wrap: wrap; gap: var(--s3); } .hero__note { margin-top: var(--s5); font: 400 0.83rem/1.6 var(--mono); color: var(--bone-3); letter-spacing: 0.01em; } @media (max-width: 62rem) { .hero__in { grid-template-columns: 1fr; } } /* ---------------- očitavanje efemeride ---------------- */ .readout { background: linear-gradient(168deg, var(--ground-3), var(--ground-2) 62%); border: 1px solid var(--rule); border-radius: 3px; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.95); position: relative; } /* mesingana nit po gornjoj ivici — instrument, ne kartica */ .readout::before { content: ""; position: absolute; inset: -1px -1px auto; height: 2px; background: linear-gradient(90deg, transparent, var(--brass) 22%, var(--brass-lit) 50%, var(--brass) 78%, transparent); opacity: 0.75; } .readout__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; padding: var(--s5) var(--s5) var(--s3); border-bottom: 1px solid var(--rule); } .readout__title { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--bone-2); } .readout__clock { margin: 0; font: 400 0.8rem/1 var(--mono); color: var(--starlight); font-variant-numeric: tabular-nums; } .readout__body { padding: var(--s3) var(--s5); } .eph { width: 100%; border-collapse: collapse; } .eph th { font: 500 0.68rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--bone-3); text-align: left; padding-bottom: var(--s3); font-weight: 500; } .eph__r, .eph td:last-child { text-align: right; } .eph td { padding-block: 0.5rem; border-top: 1px solid var(--rule); font-size: 0.92rem; vertical-align: baseline; } .eph tr:first-child td { border-top: none; } .eph__body { color: var(--bone); } .eph__glyph { display: inline-block; width: 1.35rem; color: var(--brass); font-size: 1.02rem; } .eph__pos { font: 400 0.92rem/1 var(--mono); color: var(--starlight); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .eph__sign { color: var(--bone-2); } .eph__motion { font: 400 0.76rem/1 var(--mono); color: var(--bone-3); letter-spacing: 0.04em; } .eph__motion[data-retro="1"] { color: var(--brass-lit); } .eph__skeleton td { color: var(--bone-3); font: 400 0.85rem/1 var(--mono); padding-block: var(--s5); text-align: center; } .readout__foot { padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--rule); } .moon { display: flex; align-items: center; gap: var(--s3); } .moon__dial { position: relative; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--bone); overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule-strong); } .moon__dial i { position: absolute; inset: 0; background: var(--ground-3); border-radius: 50%; transform: translateX(50%); } .moon__text { font: 400 0.85rem/1.4 var(--sans); color: var(--bone-2); } .moon__text span { color: var(--bone); } .readout__src { margin: var(--s3) 0 0; font-size: 0.76rem; line-height: 1.55; color: var(--bone-3); } /* ---------------- lenjir sa podelom (potpis dizajna) ---------------- */ .tickrule { position: relative; z-index: 2; height: 26px; border-top: 1px solid var(--rule); background-image: repeating-linear-gradient(90deg, var(--rule-strong) 0 1px, transparent 1px 100%); background-size: 8px 7px; background-repeat: repeat-x; background-position: 0 0; opacity: 0.75; } .tickrule::after { content: ""; display: block; height: 26px; background-image: repeating-linear-gradient(90deg, var(--rule-brass) 0 1px, transparent 1px 100%); background-size: 40px 13px; background-repeat: repeat-x; } /* ---------------- trake ---------------- */ .band { padding-block: clamp(4rem, 9vw, 7.5rem); } .band--alt { background: var(--ground-2); border-block: 1px solid var(--rule); } .band--dark { background: var(--ground-deep); border-block: 1px solid var(--rule); } .bandhead { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .bandhead h2 { margin-bottom: var(--s4); } .bandhead--center { margin-inline: auto; text-align: center; } .bandhead--center .eyebrow { } /* ---------------- metod ---------------- */ .method { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .method__item { background: var(--ground); padding: clamp(1.75rem, 3vw, 2.5rem); position: relative; } .method__no { display: block; font: 400 0.74rem/1 var(--mono); letter-spacing: 0.2em; color: var(--brass); margin-bottom: var(--s5); } .method__item h3 { margin-bottom: var(--s3); color: var(--bone); } .method__item p { color: var(--bone-2); font-size: 0.95rem; margin-bottom: var(--s3); } .method__item p:last-child { margin-bottom: 0; } .method__item strong { color: var(--starlight); font-weight: 500; font-family: var(--mono); font-size: 0.92em; } .method__item--flag { background: var(--ground-3); } .method__punch { border-left: 2px solid var(--brass); padding-left: var(--s4); color: var(--bone) !important; font-family: var(--display); font-size: 1.06rem !important; line-height: 1.5; } /* ---------------- podeljeni blokovi ---------------- */ .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .split--wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } @media (max-width: 62rem) { /* `1fr` je skraceno za `minmax(auto, 1fr)`, a to `auto` znaci min-content: traka odbija da se suzi ispod najsireg deteta (ovde numeroloske tabele), pa se grid rasiri preko ekrana i cela stranica dobije horizontalni skrol. Sirokoekranska pravila iznad vec koriste minmax(0, ...) — ovde je falilo. */ .split, .split--wide { grid-template-columns: minmax(0, 1fr); } } .specs { margin: var(--s6) 0 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .specs > div { display: flex; gap: var(--s4); justify-content: space-between; align-items: baseline; background: var(--ground-2); padding: 0.85rem var(--s4); } .band--alt .specs > div { background: var(--ground); } .specs dt { font: 500 0.7rem/1.4 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--bone-3); flex: none; } .specs dd { margin: 0; font-size: 0.92rem; color: var(--bone); text-align: right; } /* ---------------- sadržaj izveštaja ---------------- */ .toc { list-style: none; margin: 0; padding: 0; } .toc li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--rule); } .toc li:last-child { border-bottom: 1px solid var(--rule); } .toc__no { grid-row: span 2; font: 400 0.78rem/1.7 var(--mono); color: var(--brass); letter-spacing: 0.08em; } .toc__t { font-weight: 600; font-size: 0.99rem; color: var(--bone); } .toc__d { font-size: 0.875rem; color: var(--bone-3); line-height: 1.55; } .toc__hi { background: linear-gradient(90deg, rgba(192,138,62,0.09), transparent 70%); } .toc__hi .toc__t { color: var(--brass-lit); } /* ---------------- paketi ---------------- */ .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(16.5rem, 1fr)); gap: var(--s5); align-items: stretch; } .plan { display: flex; flex-direction: column; background: var(--ground-2); border: 1px solid var(--rule); border-radius: 3px; padding: clamp(1.6rem, 2.6vw, 2.2rem); } .plan--lead { background: var(--ground-3); border-color: var(--rule-brass); position: relative; } .plan--lead::before { content: ""; position: absolute; inset: -1px -1px auto; height: 2px; background: linear-gradient(90deg, transparent, var(--brass) 50%, transparent); } .plan__flag { font: 500 0.68rem/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass); margin: 0 0 var(--s3); } .plan__name { font-family: var(--display); font-size: 1.45rem; font-weight: 500; margin-bottom: var(--s3); } .plan__price { font: 400 1rem/1 var(--mono); color: var(--bone-3); margin-bottom: var(--s3); } .plan__price span { font-family: var(--display); font-size: 2.45rem; font-weight: 400; color: var(--bone); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; margin-right: 0.34rem; } .plan__for { font-size: 0.92rem; color: var(--bone-2); margin-bottom: var(--s5); min-height: 2.9em; } .plan__for em { color: var(--brass-lit); font-style: italic; } .plan__list { list-style: none; margin: 0 0 var(--s6); padding: 0; flex: 1; } .plan__list li { position: relative; padding-left: 1.3rem; font-size: 0.9rem; color: var(--bone-2); padding-block: 0.32rem; } .plan__list li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 7px; height: 1px; background: var(--brass); } .plan__save { margin: -0.35rem 0 var(--s3); font: 400 0.76rem/1 var(--mono); color: var(--bone-3); } .plan__save s { color: var(--bone-3); text-decoration-thickness: 1px; } .plans__foot { margin: var(--s6) auto 0; max-width: 44rem; text-align: center; font-size: 0.9rem; color: var(--bone-3); } /* ---------------- radar ---------------- */ .bullets { list-style: none; margin: 0 0 var(--s6); padding: 0; } .bullets li { position: relative; padding-left: 1.5rem; padding-block: 0.34rem; color: var(--bone-2); font-size: 0.95rem; } .bullets li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 9px; height: 1px; background: var(--brass); } .price-inline { font: 400 0.95rem/1 var(--mono); color: var(--starlight); margin-bottom: var(--s5); } .radar { margin: 0; } .radar__grid { aspect-ratio: 1; border: 1px solid var(--rule); border-radius: 50%; position: relative; background: repeating-radial-gradient(circle at 50% 50%, transparent 0 calc(12.5% - 1px), var(--rule) calc(12.5% - 1px) 12.5%), conic-gradient(from 0deg, rgba(192,138,62,0.20) 0 12deg, transparent 12deg 44deg, rgba(159,195,216,0.13) 44deg 58deg, transparent 58deg 132deg, rgba(192,138,62,0.32) 132deg 149deg, transparent 149deg 214deg, rgba(159,195,216,0.10) 214deg 231deg, transparent 231deg 300deg, rgba(192,138,62,0.14) 300deg 313deg, transparent 313deg 360deg); } .radar__grid::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background-image: repeating-conic-gradient(from 0deg, var(--rule) 0 0.35deg, transparent 0.35deg 15deg); } .radar__grid::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; margin: -4.5px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 6px rgba(192,138,62,0.16); } .radar__cap { margin-top: var(--s4); font-size: 0.8rem; line-height: 1.6; color: var(--bone-3); } /* ---------------- kalkulator karte ---------------- */ .calc { margin-top: var(--s6); display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s5); } .calc .field--full, .calc .calc__send, .calc .calc__note { grid-column: 1 / -1; } @media (max-width: 40rem) { .calc { grid-template-columns: 1fr; } } .calc__send { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin: 0; } .calc__status { font-size: 0.88rem; color: var(--bone-3); } .calc__status[data-kind="err"] { color: #E08A6E; } .calc__note { margin: 0; font-size: 0.82rem; line-height: 1.6; color: var(--bone-3); } .calc__chosen { font: 400 0.78rem/1.5 var(--mono); color: var(--starlight); } .calc .field--full { position: relative; } .calc__places { position: absolute; top: 100%; left: 0; right: 0; z-index: 5; margin: 0.3rem 0 0; padding: 0; list-style: none; max-height: 15rem; overflow-y: auto; background: var(--ground-3); border: 1px solid var(--rule-brass); border-radius: 2px; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.95); } .calc__places li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); padding: 0.6rem var(--s4); cursor: pointer; border-top: 1px solid var(--rule); font-size: 0.92rem; } .calc__places li:first-child { border-top: none; } .calc__places li:hover, .calc__places li:focus-visible { background: rgba(192, 138, 62, 0.12); color: var(--brass-lit); outline: none; } .calc__places small { font: 400 0.72rem/1 var(--mono); color: var(--bone-3); } /* --- panel sa rezultatom: isti registar kao očitavanje u herou --- */ .result { background: linear-gradient(168deg, var(--ground-3), var(--ground-2) 62%); border: 1px solid var(--rule); border-radius: 3px; padding: var(--s5); position: relative; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.95); } .result::before { content: ""; position: absolute; inset: -1px -1px auto; height: 2px; background: linear-gradient(90deg, transparent, var(--brass) 22%, var(--brass-lit) 50%, var(--brass) 78%, transparent); opacity: 0.75; } .result__wheel svg { width: 100%; height: auto; display: block; margin-bottom: var(--s5); } .result__label { margin: 0 0 0.3rem; font: 500 0.7rem/1 var(--mono); letter-spacing: 0.17em; text-transform: uppercase; color: var(--bone-3); } .result__zone { margin: 0 0 var(--s3); font: 400 1.9rem/1 var(--mono); color: var(--starlight); letter-spacing: -0.01em; } .result__warn, .result__ok { margin: 0 0 var(--s3); font-size: 0.9rem; line-height: 1.6; padding-left: var(--s4); border-left: 2px solid var(--brass); color: var(--bone-2); } .result__ok { border-left-color: var(--rule-strong); color: var(--bone-3); } .result__warn b { color: var(--brass-lit); font-weight: 500; } .result__bodies { width: 100%; border-collapse: collapse; margin: var(--s4) 0; } .result__bodies td { padding: 0.45rem 0; border-top: 1px solid var(--rule); font-size: 0.93rem; } .result__bodies tr:first-child td { border-top: none; } .result__body { color: var(--bone); } .result__pos { font: 400 0.95rem/1 var(--mono); color: var(--starlight); text-align: right; padding-right: var(--s4) !important; } .result__sign { color: var(--bone-2); text-align: right; } .result__next { display: flex; flex-direction: column; gap: 0.25rem; padding: var(--s4) 0; border-top: 1px solid var(--rule); } .result__transit { font: 400 0.95rem/1.4 var(--mono); color: var(--brass-lit); } .result__locked { padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--rule); font-size: 0.85rem; line-height: 1.6; color: var(--bone-3); } /* --- točak karte --- */ .wheel { font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", sans-serif; } .wheel__ring { stroke: var(--rule-strong); stroke-width: 1.2; } .wheel__ring--soft { stroke: var(--rule); } .wheel__spoke { stroke: var(--rule); stroke-width: 1; } .wheel__ticks path { stroke: var(--rule-strong); stroke-width: 1; } .wheel__sign { font-size: 19px; text-anchor: middle; dominant-baseline: central; } .wheel__sign[data-element="fire"] { fill: #D9924A; } .wheel__sign[data-element="earth"] { fill: #8FA36B; } .wheel__sign[data-element="air"] { fill: #9FC3D8; } .wheel__sign[data-element="water"] { fill: #7FA6C4; } .wheel__houses path { stroke: var(--rule); stroke-width: 1; } .wheel__houses .wheel__cusp--angular { stroke: var(--brass); stroke-width: 1.6; opacity: 0.8; } .wheel__housenum { fill: var(--bone-3); font: 10px var(--mono); text-anchor: middle; dominant-baseline: central; } .wheel__aspects path { stroke: var(--rule-strong); stroke-width: 1; opacity: 0.3; } .wheel__aspects [data-aspect="Trigon"], .wheel__aspects [data-aspect="Sekstil"] { stroke: var(--starlight); opacity: 0.5; } .wheel__aspects [data-aspect="Kvadrat"], .wheel__aspects [data-aspect="Opozicija"] { stroke: #C0703E; opacity: 0.5; } .wheel__aspects [data-aspect="Konjunkcija"] { stroke: var(--brass); opacity: 0.5; } .wheel__angle { stroke: var(--brass); stroke-width: 1.6; } .wheel__anglelabel { fill: var(--brass); font: 10px var(--mono); text-anchor: middle; dominant-baseline: central; } .wheel__stem { stroke: var(--rule-strong); stroke-width: 0.8; } .wheel__body { fill: var(--bone); font-size: 20px; text-anchor: middle; dominant-baseline: central; } .wheel__body[data-retro="1"] { fill: var(--brass); } .wheel__locked { fill: var(--bone-3); font: 600 24px var(--mono); text-anchor: middle; dominant-baseline: central; } /* ---------------- numerološki panel ---------------- */ .numpanel { background: linear-gradient(168deg, var(--ground-3), var(--ground-2) 62%); border: 1px solid var(--rule); border-radius: 3px; position: relative; box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.95); } /* ista mesingana nit kao na očitavanju u herou — isti registar, isto obećanje */ .numpanel::before { content: ""; position: absolute; inset: -1px -1px auto; height: 2px; background: linear-gradient(90deg, transparent, var(--brass) 22%, var(--brass-lit) 50%, var(--brass) 78%, transparent); opacity: 0.75; } .numpanel__head { padding: var(--s5) var(--s5) var(--s3); border-bottom: 1px solid var(--rule); } .numpanel__title { font-family: var(--sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.19em; text-transform: uppercase; color: var(--bone-2); } .numpanel__person { margin: var(--s2) 0 0; font: 400 0.8rem/1.5 var(--mono); color: var(--starlight); } /* Ako tabela ipak ne stane (duži prevod, veći font), skrola SAMA — nikad stranica. Vodoravni skrol celog dokumenta je kvar, u tabeli je alat. */ .numpanel__scroll { overflow-x: auto; } .num { width: 100%; border-collapse: collapse; } .num td { padding: 0.52rem var(--s5); border-top: 1px solid var(--rule); font-size: 0.93rem; vertical-align: baseline; } .num tr:first-child td { border-top: none; padding-top: var(--s4); } @media (max-width: 30rem) { .num td { padding-left: var(--s3); padding-right: var(--s3); font-size: 0.88rem; } .num td:first-child { padding-left: var(--s4); } .num td:last-child { padding-right: var(--s4); } } .num__label { color: var(--bone); } .num__value { font: 400 1rem/1 var(--mono); color: var(--starlight); font-variant-numeric: tabular-nums; white-space: nowrap; } .num__r { text-align: right; } .num__flag { font: 500 0.68rem/1 var(--mono); letter-spacing: 0.09em; text-transform: uppercase; padding: 0.25rem 0.45rem; border-radius: 2px; white-space: nowrap; } .num__flag[data-kind="1"] { color: var(--brass-lit); background: rgba(192, 138, 62, 0.14); } .num__flag[data-kind="2"] { color: #E0A08A; background: rgba(224, 138, 110, 0.12); } .numpanel__note { margin: 0; padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--rule); font-size: 0.82rem; line-height: 1.6; color: var(--bone-3); } .numpanel__note b { color: var(--starlight); font-family: var(--mono); font-size: 0.94em; font-weight: 400; } /* ---------------- forma ---------------- */ .order { max-width: 46rem; } .form__grid { display: grid; /* Jedini par u pola reda je datum | vreme; datumu treba više jer nosi ime meseca. minmax(0, …) sprečava da min-content razvuče trake. */ grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s5); } .field { margin: 0; display: flex; flex-direction: column; gap: 0.42rem; } .field--full { grid-column: 1 / -1; } @media (max-width: 40rem) { .form__grid { grid-template-columns: 1fr; } } label, .label { font: 500 0.78rem/1.3 var(--mono); letter-spacing: 0.11em; text-transform: uppercase; color: var(--bone-2); } .req { color: var(--brass); } .opt { text-transform: none; letter-spacing: 0; color: var(--bone-3); font-weight: 400; } input[type="text"], select, textarea { width: 100%; background: var(--ground-2); border: 1px solid var(--rule-strong); border-radius: 2px; color: var(--bone); font: 400 1rem/1.5 var(--sans); padding: 0.78rem 0.9rem; transition: border-color 0.2s var(--ease), background 0.2s var(--ease); color-scheme: dark; } textarea { resize: vertical; min-height: 5rem; } input:hover, select:hover, textarea:hover { border-color: var(--rule-brass); } input:focus, select:focus, textarea:focus { border-color: var(--brass); background: var(--ground-3); outline: none; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--brass-lit); outline-offset: 2px; } ::placeholder { color: var(--bone-3); opacity: 1; } .field--check { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.65rem; background: var(--ground-2); border: 1px solid var(--rule); padding: var(--s4); border-radius: 2px; } .field--check input { width: 1.05rem; height: 1.05rem; accent-color: var(--brass); flex: none; } .field--check label { text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 0.95rem; color: var(--bone); font-weight: 400; } .field--check .hint { flex-basis: 100%; } /* --- Datum i vreme rođenja ------------------------------------------------- Sopstvena polja umesto , jer se ona ispisuju po regionalnom formatu operativnog sistema (06/05/1975, 04:25 PM), pa isti unos dve publike čitaju različito. Dan i godina su brojevi, mesec je reč, sat ide 0–23. Grid, ne flex: kolone se drže i kad se font uveća. */ .dmy, .hm { display: grid; gap: 0.4rem; align-items: center; min-width: 0; } .dmy { grid-template-columns: 3.2rem minmax(0, 1fr) 4.3rem; } .hm { grid-template-columns: 3.6rem auto 3.6rem; justify-content: start; } .dmy input, .dmy select, .hm input { min-width: 0; padding-left: 0.55rem; padding-right: 0.55rem; } .dmy__num, .hm__num { text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .hm__sep { font: 500 1.1rem/1 var(--mono); color: var(--bone-3); text-align: center; padding: 0 0.1rem; } /* Mesec je jedini segment koji sme da se širi — imena mu se razlikuju po dužini između jezika (maj / septembar / сентябрь). */ .dmy__month { width: 100%; font-size: 0.95rem; padding-left: 0.5rem; padding-right: 0.25rem; } /* Placeholder je reč („dan", „godina"), pa mora da stane; kad se polje popuni, tekst se centrira kao broj. */ .dmy__num::placeholder, .hm__num::placeholder { font-family: var(--sans); font-size: 0.82rem; letter-spacing: 0; } .dmy.is-off, .hm.is-off { opacity: 0.45; } .dmy.is-off input, .dmy.is-off select, .hm.is-off input { cursor: not-allowed; } /* Greška se crta oko cele grupe — skriveno polje se ne vidi. */ .dmy[aria-invalid="true"] input, .dmy[aria-invalid="true"] select, .hm[aria-invalid="true"] input { border-color: #E08A6E; } @media (max-width: 26rem) { .dmy { grid-template-columns: 3.2rem minmax(0, 1fr) 4.2rem; gap: 0.3rem; } } .hint { font-size: 0.82rem; line-height: 1.55; color: var(--bone-3); } .err { font-size: 0.82rem; color: #E08A6E; } input[aria-invalid="true"], select[aria-invalid="true"] { border-color: #E08A6E; } .form__send { margin-top: var(--s6); } .form__legal { margin: var(--s3) 0 0; font-size: 0.82rem; color: var(--bone-3); } .preview { display: block; margin-top: var(--s6); border: 1px solid var(--rule); background: var(--ground-deep); border-radius: 2px; } .preview__label { margin: 0; padding: 0.7rem var(--s4); border-bottom: 1px solid var(--rule); font: 500 0.68rem/1 var(--mono); letter-spacing: 0.17em; text-transform: uppercase; color: var(--bone-3); } .preview pre { margin: 0; padding: var(--s4); font: 400 0.84rem/1.75 var(--mono); color: var(--bone-2); white-space: pre-wrap; word-break: break-word; } .fallback { margin-top: var(--s5); font-size: 0.9rem; color: var(--bone-3); } .fallback a { color: var(--brass-lit); } /* ---------------- FAQ ---------------- */ .faq { max-width: 48rem; } .faq__list { border-top: 1px solid var(--rule); } .faq details { border-bottom: 1px solid var(--rule); } .faq summary { cursor: pointer; list-style: none; padding: var(--s5) 2.5rem var(--s5) 0; position: relative; font-family: var(--display); font-size: 1.22rem; line-height: 1.4; color: var(--bone); transition: color 0.2s var(--ease); } .faq summary::-webkit-details-marker { display: none; } .faq summary:hover { color: var(--brass-lit); } .faq summary::after { content: ""; position: absolute; right: 0.35rem; top: 50%; width: 11px; height: 11px; margin-top: -6px; border-right: 1px solid var(--brass); border-bottom: 1px solid var(--brass); transform: rotate(45deg); transition: transform 0.25s var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg); } .faq details p { margin: 0 0 var(--s5); padding-right: 2.5rem; color: var(--bone-2); font-size: 0.95rem; } /* ---------------- podnožje ---------------- */ .foot { border-top: 1px solid var(--rule); background: var(--ground-deep); padding-block: var(--s8) var(--s6); } .foot__in { display: grid; gap: var(--s5); } .foot__brand { display: flex; align-items: flex-start; gap: var(--s5); } .foot__mark { display: block; flex: none; width: 82px; height: 82px; margin-top: 0.2rem; color: var(--brass); } .foot__mark svg { width: 100%; height: 100%; display: block; } .foot__brand .mark__word { font-size: 1.85rem; letter-spacing: 0.22em; } @media (max-width: 34rem) { .foot__brand { gap: var(--s4); } .foot__mark { width: 60px; height: 60px; } } .foot__brand p { margin: var(--s2) 0 0; color: var(--bone-3); font-size: 0.9rem; max-width: 34ch; } .foot__gloss { max-width: none !important; font-family: var(--display); font-size: 1.02rem !important; color: var(--bone-2) !important; letter-spacing: 0.01em; } .foot__gloss span[lang="grc"] { color: var(--brass-lit); font-size: 1.12em; } .foot__contact { display: flex; flex-wrap: wrap; gap: var(--s5); } .foot__contact a { color: var(--bone-2); text-decoration: none; font: 400 0.88rem/1 var(--mono); letter-spacing: 0.03em; border-bottom: 1px solid var(--rule-brass); padding-bottom: 0.3rem; } .foot__contact a:hover { color: var(--brass-lit); } .foot__legal { margin: var(--s4) 0 0; padding-top: var(--s5); border-top: 1px solid var(--rule); font-size: 0.8rem; line-height: 1.65; color: var(--bone-3); max-width: 62ch; } .foot__sig { margin: 0; font: 500 0.66rem/1 var(--mono); letter-spacing: 0.3em; color: var(--bone-3); } /* ---------------- pojava na skrolu ---------------- */ @media (prefers-reduced-motion: no-preference) { [data-rise] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); } [data-rise].is-in { opacity: 1; transform: none; } }