/* ========================================================== LUMEN SANUS POSTAVI PITANJE •TAROT• JUNG.HTML • POSTAVI PITANJETAROT• JUNG· CARL GUSTAV JUNG CSS BEZ KARTICA I MANDALA ========================================================== */ /* ========================================================== OSNOVNO ========================================================== */ .analytic-main { position: relative; width: 100%; margin-top: 110px; overflow: hidden; background: var(--paper); color: var(--ink); } /* ========================================================== HERO ========================================================== */ .analytic-hero { position: relative; min-height:75vh; display:flex; align-items:center; justify-content:center; padding: 120px 30px 110px; background: radial-gradient( circle at 50% 45%, var(--paper-dark) 0%, var(--paper) 58%, var(--paper) 100% ); text-align:center; overflow:hidden; } .analytic-hero::before { content:""; position:absolute; width: 680px; height: 680px; top:50%; left:50%; transform: translate(-50%,-50%); border-radius:50%; border: 1px solid rgba(176,138,82,.18); box-shadow: 0 0 70px rgba(176,138,82,.08), inset 0 0 70px rgba(176,138,82,.05); pointer-events:none; } .analytic-hero::after { content:"✦"; position:absolute; bottom:35px; left:50%; transform: translateX(-50%); color: var(--gold); font-size: 14px; opacity:.65; } .analytic-hero-inner { position:relative; z-index:2; width: min(900px,100%); margin:auto; } /* ========================================================== EYEBROW ========================================================== */ .analytic-main .eyebrow { margin: 0 0 18px; color: var(--gold); font-size: .72rem; font-weight: 600; letter-spacing: .24em; line-height: 1.5; text-transform: uppercase; } /* ========================================================== HERO NASLOV ========================================================== */ .analytic-hero h1 { margin: 0 0 30px; color: var(--ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(3.3rem,8vw,6.4rem); font-weight: 400; line-height: .95; letter-spacing: .02em; } .analytic-lead { width: min(750px,100%); margin: 0 auto 30px; color: var(--brown); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.35rem,2.5vw,1.8rem); line-height: 1.55; } .analytic-intro-text { width: min(760px,100%); margin:auto; color: var(--brown); font-size: .97rem; line-height: 1.9; } /* ========================================================== POSTAVI PITANJE ========================================================== */ .question-main{ margin-top:110px; background: rgba(248,242,231,.65); min-height:100vh; padding:100px 7%; } .tarot-question{ text-align:center; } .question-box h2{ font-family:"Cormorant Garamond",serif; font-size:55px; color:var(--gold); } .question-box p{ font-family:"Cormorant Garamond",serif; font-size:24px; max-width:700px; margin:30px auto; } #questionInput{ width:500px; max-width:90%; padding:18px; font-size:18px; border:1px solid var(--gold); background:#fffaf0; } .question-box button{ display:block; margin:35px auto; padding:18px 50px; background:linear-gradient( 135deg, #fffaf0, #e8d2a2 ); border:1px solid var(--gold); font-family:"Cormorant Garamond",serif; font-size:22px; cursor:pointer; } .tarot-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:50px; max-width:1100px; margin:80px auto; } .draw-card{ background: linear-gradient( 135deg, #fffaf0, #ead7af ); padding:30px; border:1px solid var(--gold); box-shadow:0 30px 70px rgba(70,40,20,.25); } .draw-card h3{ font-size:35px; color:var(--gold); } .card-back{ height:320px; display:flex; align-items:center; justify-content:center; font-size:90px; color:var(--gold); background: radial-gradient( circle, #fff, #d8b878 ); cursor:pointer; transition:.8s; } .card-back.flip{ transform:rotateY(360deg); } .draw-card p{ font-family:"Cormorant Garamond",serif; font-size:22px; line-height:1.5; margin-top:20px; } @media(max-width:900px){ .tarot-cards{ grid-template-columns:1fr; } } /* ===================================================== UNUTRAŠNJOST TAROT TUMAČENJA ===================================================== */ #pastText, #presentText, #futureText { margin-top:35px; text-align:left; color:var(--brown); } /* naziv karte */ #pastText h4, #presentText h4, #futureText h4 { font-family: "Cormorant Garamond", serif; font-size:38px; font-weight:500; text-align:center; color:var(--gold); margin: 0 0 25px; letter-spacing:.04em; } /* glavna poruka karte */ .tarot-message { font-family: "Cormorant Garamond", serif; font-size:26px !important; font-style:italic; text-align:center; color:var(--ink); line-height:1.5; padding: 20px 10px 35px; border-bottom: 1px solid rgba(176,138,82,.35); } /* naslovi sekcija */ #pastText h5, #presentText h5, #futureText h5 { margin-top:35px; margin-bottom:10px; font-family: "Cormorant Garamond", serif; font-size:22px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); } /* tekst objašnjenja */ #pastText p:not(.tarot-message), #presentText p:not(.tarot-message), #futureText p:not(.tarot-message){ font-family: "Cormorant Garamond", serif; font-size:21px; line-height:1.75; color:var(--brown); } /* Jung deo */ #pastText h5:nth-of-type(2), #presentText h5:nth-of-type(2), #futureText h5:nth-of-type(2){ position:relative; } #pastText h5:nth-of-type(2)::before, #presentText h5:nth-of-type(2)::before, #futureText h5:nth-of-type(2)::before{ content:"✦"; margin-right:10px; color:var(--gold); } /* Senka */ .shadow { margin-top:15px; padding:18px 22px; background: rgba(70,40,20,.06); border-left: 2px solid var(--gold); font-style:italic; } /* mala animacija pojavljivanja */ #pastText, #presentText, #futureText { animation: fadeText .8s ease; } @keyframes fadeText { from{ opacity:0; transform:translateY(15px); } to{ opacity:1; transform:translateY(0); } } /* velicina teksta kartice */ .tarot-cards { align-items: stretch; } .draw-card { display:flex; flex-direction:column; height:100%; } #pastText, #presentText, #futureText { flex:1; }