/* Global variables overriding for the Tarot page context */ :root { --tarot-bg-dark: #070b0e; --tarot-bg-panel: #0f141c; --tarot-bg-card: #131922; --tarot-gold: #c5a880; --tarot-gold-muted: rgba(197, 168, 128, 0.12); --tarot-border: 1px solid rgba(197, 168, 128, 0.08); --tarot-text: #e5e9f0; --tarot-text-muted: #8a99ad; } body.page-template-page-tarot { background-color: var(--tarot-bg-dark); color: var(--tarot-text); font-family: 'Montserrat', sans-serif; } /* Main Page Wrapper centering */ .tarot-page-wrapper-outer { background-color: var(--tarot-bg-dark); width: 100%; padding: 0; box-sizing: border-box; } /* Outer Grid Layout */ .tarot-dashboard-container { display: grid; grid-template-columns: 285px 1fr; min-height: calc(100vh - 80px); max-width: 100%; width: 100%; padding: 120px 40px 40px; gap: 30px; box-sizing: border-box; } @media (max-width: 1200px) { .tarot-dashboard-container { grid-template-columns: 1fr; padding: 110px 20px 30px; gap: 30px; } } /* --- SIDEBAR LEFT STYLING --- */ .tarot-sidebar { background-color: var(--tarot-bg-panel); border: var(--tarot-border); border-radius: 12px; padding: 35px 20px; display: flex; flex-direction: column; gap: 30px; box-sizing: border-box; position: sticky; top: 110px; height: fit-content; } @media (max-width: 1200px) { .tarot-sidebar { position: static; width: 100%; } } .sidebar-section-title { font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tarot-text-muted); margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; } .badge-oficial { background-color: var(--tarot-gold-muted); border: 1px solid var(--tarot-gold); color: var(--tarot-gold); font-size: 0.6rem; padding: 2px 6px; border-radius: 4px; font-weight: 600; letter-spacing: 0.05em; } .sidebar-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .sidebar-menu-item a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--tarot-text-muted); text-decoration: none; font-size: 0.85rem; font-weight: 500; border-radius: 6px; transition: all 0.3s; border: 1.5px solid transparent; } .sidebar-menu-item a svg { width: 16px; height: 16px; stroke-width: 1.5; color: var(--tarot-gold); flex-shrink: 0; } .sidebar-menu-item a:hover { color: #fff; background-color: rgba(255, 255, 255, 0.02); } .sidebar-menu-item.active a { color: #fff; background-color: rgba(197, 168, 128, 0.08); border: 1px solid var(--tarot-gold); } /* Premium Box */ .sidebar-premium-box { background-color: var(--tarot-bg-panel); border: var(--tarot-border); border-radius: 8px; padding: 24px 20px; text-align: center; } .premium-box-title { font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.1em; color: var(--tarot-gold); margin: 0 0 10px 0; font-weight: bold; } .premium-box-desc { font-size: 0.75rem; color: var(--tarot-text-muted); line-height: 1.5; margin: 0 0 18px 0; } /* Statistics Box */ .sidebar-stats-box { background-color: var(--tarot-bg-panel); border: var(--tarot-border); border-radius: 8px; padding: 24px 20px; } .stats-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .stats-row { display: flex; justify-content: space-between; font-size: 0.8rem; } .stats-label { color: var(--tarot-text-muted); } .stats-val { font-weight: 600; color: #fff; } /* Arcano do Dia Box */ .sidebar-arcano-box { border: var(--tarot-border); border-radius: 8px; padding: 24px 20px; background-color: var(--tarot-bg-panel); } .arcano-thumb-container { display: flex; gap: 15px; align-items: center; margin-bottom: 18px; } .arcano-thumb-img { width: 48px; height: 76px; border-radius: 4px; border: 1px solid rgba(197, 168, 128, 0.2); object-fit: cover; flex-shrink: 0; } .arcano-thumb-right { display: flex; flex-direction: column; gap: 4px; } .arcano-thumb-title { font-family: 'Cinzel', serif; font-size: 0.8rem; color: var(--tarot-gold); margin: 0; font-weight: bold; } .arcano-thumb-desc { font-size: 0.7rem; color: var(--tarot-text-muted); line-height: 1.4; margin: 0; } /* Quote Box */ .sidebar-quote-box { border: var(--tarot-border); border-radius: 8px; padding: 20px; background-color: var(--tarot-bg-card); } .sidebar-quote-text { font-family: 'Cinzel', serif; font-size: 0.8rem; line-height: 1.6; color: var(--tarot-text-muted); font-style: italic; margin: 0 0 8px 0; } .sidebar-quote-author { font-size: 0.7rem; color: var(--tarot-gold); text-transform: uppercase; letter-spacing: 0.05em; display: block; } /* --- MAIN CONTENT PANEL STYLING --- */ .tarot-main-panel { display: flex; flex-direction: column; gap: 30px; box-sizing: border-box; overflow-x: hidden; } @media (max-width: 768px) { .tarot-main-panel { gap: 20px; } } .tarot-dashboard-content-box { background-color: var(--tarot-bg-panel); border: var(--tarot-border); border-radius: 12px; padding: 40px; display: flex; flex-direction: column; gap: 45px; box-shadow: 0 15px 35px rgba(0,0,0,0.15); box-sizing: border-box; } @media (max-width: 768px) { .tarot-dashboard-content-box { padding: 25px 15px; gap: 35px; } } /* Hero Dashboard Box */ .tarot-hero-dashboard { background-color: var(--tarot-bg-panel); background-image: linear-gradient(to top, rgba(15, 20, 28, 0.85) 0%, rgba(15, 20, 28, 0.3) 10%, transparent 22%), linear-gradient(to right, rgba(15, 20, 28, 0.92) 20%, rgba(15, 20, 28, 0.5) 50%, transparent 85%), url('/assets/images/hero.png'); background-position: left bottom, left top, right -60px; background-size: 100% 100%, 100% 100%, cover; background-repeat: no-repeat, no-repeat, no-repeat; border: var(--tarot-border); border-radius: 12px; padding: 100px 60px; position: relative; box-shadow: 0 15px 35px rgba(0,0,0,0.2); display: flex; flex-direction: column; justify-content: center; min-height: 560px; box-sizing: border-box; overflow: hidden; } @media (max-width: 992px) { .tarot-hero-dashboard { background-image: linear-gradient(to top, rgba(15, 20, 28, 0.85) 0%, rgba(15, 20, 28, 0.3) 15%, transparent 30%), linear-gradient(to bottom, rgba(15, 20, 28, 0.92) 50%, rgba(15, 20, 28, 0.6) 85%), url('/assets/images/hero.png'); background-position: left bottom, left top, right 30% -40px; background-size: 100% 100%, 100% 100%, cover; padding: 70px 30px; min-height: 440px; } } .hero-dash-left { max-width: 65%; display: flex; flex-direction: column; gap: 15px; } @media (max-width: 992px) { .hero-dash-left { max-width: 100%; } } .hero-dash-title { font-family: 'Cinzel', serif; font-size: 2.5rem; color: #fff; margin: 0; letter-spacing: 0.05em; line-height: 1.1; font-weight: 500; } .hero-dash-subtitle { font-size: 0.95rem; color: var(--tarot-text-muted); margin: 0; font-weight: 300; letter-spacing: 0.02em; } /* Horizontal features list matching mockup */ .hero-dash-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 25px; } @media (max-width: 992px) { .hero-dash-features { grid-template-columns: 1fr 1fr; } } @media (max-width: 576px) { .hero-dash-features { grid-template-columns: 1fr; } } .hero-feature-item { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .hero-feature-icon { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--tarot-gold); background-color: rgba(197, 168, 128, 0.03); display: flex; align-items: center; justify-content: center; color: var(--tarot-gold); flex-shrink: 0; } .hero-feature-icon svg { width: 12px; height: 12px; stroke-width: 1.5; } .hero-feature-text { display: flex; flex-direction: column; gap: 4px; } .hero-feature-title { font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.05em; color: #fff; margin: 0; font-weight: bold; } .hero-feature-desc { font-size: 0.68rem; color: var(--tarot-text-muted); line-height: 1.35; } /* Section Titles styling */ .section-header-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; border-bottom: 1px solid rgba(197, 168, 128, 0.08); padding-bottom: 12px; } .section-title-wrap { display: flex; flex-direction: column; gap: 4px; } .panel-section-title { font-family: 'Cinzel', serif; font-size: 1.25rem; letter-spacing: 0.05em; color: #fff; margin: 0; font-weight: bold; } .panel-section-subtitle { font-size: 0.8rem; color: var(--tarot-text-muted); margin: 0; } /* NOVA LEITURA: Spreads Grid */ .spreads-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } @media (max-width: 1100px) { .spreads-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .spreads-grid { grid-template-columns: repeat(2, 1fr); } } .spread-card { background-color: var(--tarot-bg-card); border: var(--tarot-border); border-radius: 12px; padding: 35px 20px; text-align: center; cursor: pointer; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; gap: 18px; min-height: 220px; justify-content: center; } .spread-card:hover { transform: translateY(-3px); border-color: var(--tarot-gold); box-shadow: 0 10px 20px rgba(197, 168, 128, 0.06); } .spread-card.active { border-color: var(--tarot-gold) !important; box-shadow: 0 0 25px rgba(197, 168, 128, 0.2) !important; background-color: rgba(197, 168, 128, 0.06) !important; transform: translateY(-4px); } .reading-result-view { display: none; animation: fadeInView 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } #reading-views-wrapper { display: none; } #interpretacao-completa { display: none; } @keyframes fadeInView { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* INICIAR LEITURA PRE-DRAW BOX & SHUFFLE ANIMATION */ .iniciar-leitura-box { background-color: var(--tarot-bg-card); border: var(--tarot-border); border-radius: 12px; padding: 50px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 25px; animation: fadeInView 0.4s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .deck-cards-stack { position: relative; width: 120px; height: 180px; margin: 15px auto 25px; } .stack-card { position: absolute; width: 100%; height: 100%; border-radius: 10px; border: 1.5px solid var(--tarot-gold); background-color: #0b1014; box-shadow: 0 8px 25px rgba(0,0,0,0.6); background-image: radial-gradient(circle, rgba(197, 168, 128, 0.2) 1px, transparent 1px); background-size: 8px 8px; transition: all 0.4s ease; } .stack-card.card-1 { transform: rotate(-10deg) translateX(-15px) translateY(-5px); z-index: 1; } .stack-card.card-2 { transform: rotate(-5deg) translateX(-8px); z-index: 2; } .stack-card.card-3 { transform: rotate(0deg); z-index: 3; } .stack-card.card-4 { transform: rotate(5deg) translateX(8px); z-index: 4; } .stack-card.card-5 { transform: rotate(10deg) translateX(15px) translateY(-5px); z-index: 5; } .iniciar-deck-area.shuffling .stack-card.card-1 { animation: shuffle1 0.4s infinite alternate ease-in-out; } .iniciar-deck-area.shuffling .stack-card.card-2 { animation: shuffle2 0.4s infinite alternate ease-in-out 0.1s; } .iniciar-deck-area.shuffling .stack-card.card-3 { animation: shuffle3 0.4s infinite alternate ease-in-out 0.15s; } .iniciar-deck-area.shuffling .stack-card.card-4 { animation: shuffle4 0.4s infinite alternate ease-in-out 0.2s; } .iniciar-deck-area.shuffling .stack-card.card-5 { animation: shuffle5 0.4s infinite alternate ease-in-out 0.25s; } @keyframes shuffle1 { 0% { transform: rotate(-10deg) translateX(-15px); } 100% { transform: rotate(-35deg) translateX(-70px) translateY(-20px); } } @keyframes shuffle2 { 0% { transform: rotate(-5deg) translateX(-8px); } 100% { transform: rotate(-15deg) translateX(-35px) translateY(-10px); } } @keyframes shuffle3 { 0% { transform: rotate(0deg); } 100% { transform: scale(1.12) translateY(-15px); } } @keyframes shuffle4 { 0% { transform: rotate(5deg) translateX(8px); } 100% { transform: rotate(15deg) translateX(35px) translateY(-10px); } } @keyframes shuffle5 { 0% { transform: rotate(10deg) translateX(15px); } 100% { transform: rotate(35deg) translateX(70px) translateY(-20px); } } .spread-card * { pointer-events: none !important; } /* HIGH CONTRAST & VISIBILITY FOR SPREAD CARDS */ .spreads-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 15px; } @media (max-width: 1200px) { .spreads-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 850px) { .spreads-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 550px) { .spreads-grid { grid-template-columns: 1fr; } } .spread-card { background-color: #121824 !important; border: 1.5px solid rgba(197, 168, 128, 0.4) !important; border-radius: 14px !important; padding: 28px 18px !important; text-align: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; flex-direction: column; align-items: center; gap: 14px; min-height: 230px; justify-content: space-between; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4); } .spread-card:hover { transform: translateY(-5px); border-color: #e5c192 !important; box-shadow: 0 12px 30px rgba(197, 168, 128, 0.25) !important; background-color: #182030 !important; } .spread-card.active { border-color: #e5c192 !important; box-shadow: 0 0 30px rgba(197, 168, 128, 0.4) !important; background-color: rgba(197, 168, 128, 0.14) !important; transform: translateY(-5px); } .spread-icon-circle { width: 60px; height: 60px; border-radius: 50%; background-color: rgba(197, 168, 128, 0.14); border: 1.5px solid #c5a880; display: flex; align-items: center; justify-content: center; color: #e5c192; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .spread-card-title { font-family: 'Cinzel', serif; font-size: 1.05rem !important; font-weight: 700 !important; color: #f7e7ce !important; /* Extremely high contrast gold */ margin: 0 !important; letter-spacing: 0.05em; text-shadow: 0 2px 4px rgba(0,0,0,0.6); } .spread-card-desc { font-size: 0.85rem !important; color: #e0e6ed !important; /* Bright crisp text */ line-height: 1.45 !important; margin: 0 !important; opacity: 0.95; } .spread-card-features { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin-top: 4px; } .spread-feat-pill { font-size: 0.7rem !important; font-weight: 600 !important; color: #f7e7ce !important; background-color: rgba(197, 168, 128, 0.22) !important; border: 1px solid rgba(197, 168, 128, 0.45) !important; padding: 4px 10px !important; border-radius: 20px !important; letter-spacing: 0.03em; } /* ASTROLOGICAL SPREAD (13 HOUSES GRID) */ .astro-grid-13 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; width: 100%; } .astro-card-slot { height: 180px; } @media (max-width: 900px) { .astro-grid-13 { grid-template-columns: repeat(3, 1fr); } } /* PURE FULL CARD DISPLAY (SEM TEXTO OU OBSERVAÇÕES SOBRE A CARTA) */ .drawn-card-pure { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; animation: fadeInView 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); } /* TETRAKTYS PYRAMID DIAGRAM */ .tetraktys-pyramid-container { display: flex; flex-direction: column; gap: 15px; align-items: center; width: 100%; padding: 20px 0; } .tetraktys-row { display: flex; justify-content: center; gap: 20px; width: 100%; } /* CROSS & TRIANGLE DIAGRAM */ .crosstriangle-container { display: flex; flex-direction: column; gap: 30px; align-items: center; width: 100%; } .crosstriangle-top-cross { display: grid; grid-template-columns: repeat(3, 130px); grid-template-rows: repeat(3, auto); gap: 12px; justify-content: center; } .crosstriangle-bottom-triangle { display: flex; flex-direction: column; gap: 15px; align-items: center; } /* PLANET SPREAD DIAGRAM */ .planet-grid-8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; } /* PASTLIFE & BIRTHDAY GRIDS */ .pastlife-grid-8 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; width: 100%; } .birthday-grid-9 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; } .drawn-card-frame-full { width: 100%; height: 100%; border-radius: 10px; border: 1.5px solid rgba(197, 168, 128, 0.4); box-shadow: 0 10px 25px rgba(0,0,0,0.5); overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; background-color: #0b1014; } .drawn-card-frame-full img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 9px; } .drawn-card-frame-full:hover { transform: translateY(-5px) scale(1.03); border-color: var(--tarot-gold); box-shadow: 0 15px 30px rgba(197, 168, 128, 0.25); } /* AUTHENTIC GEOMETRIC SPREAD DIAGRAMS */ /* 1. CRUZ CELTA DIAGRAM */ .celtic-cross-spread-container { display: flex; gap: 35px; align-items: center; justify-content: center; width: 100%; margin-bottom: 20px; } .celtic-cross-diagram { display: grid; grid-template-columns: repeat(3, 120px); grid-template-rows: repeat(3, 190px); gap: 15px; align-items: center; justify-items: center; } .celtic-center-slot { grid-column: 2; grid-row: 2; position: relative; width: 100%; height: 100%; } .celtic-center-slot .card-1-base { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .celtic-center-slot .card-2-crossed { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; transform: rotate(90deg) scale(0.92); filter: drop-shadow(0 6px 15px rgba(0,0,0,0.8)); } .celtic-staff-column { display: flex; flex-direction: column-reverse; gap: 12px; width: 120px; } .celtic-staff-column .drawn-card-pure { height: 140px; } /* 2. FERRADURA HORSESHOE ARC DIAGRAM */ .horseshoe-arc-container { display: flex; justify-content: center; align-items: flex-end; gap: 10px; padding: 40px 10px 20px; width: 100%; } .horseshoe-card-wrapper { width: 125px; height: 200px; } .horseshoe-card-wrapper:nth-child(1) { transform: translateY(-45px) rotate(-12deg); } .horseshoe-card-wrapper:nth-child(2) { transform: translateY(-18px) rotate(-7deg); } .horseshoe-card-wrapper:nth-child(3) { transform: translateY(8px) rotate(-3deg); } .horseshoe-card-wrapper:nth-child(4) { transform: translateY(24px) rotate(0deg); } .horseshoe-card-wrapper:nth-child(5) { transform: translateY(8px) rotate(3deg); } .horseshoe-card-wrapper:nth-child(6) { transform: translateY(-18px) rotate(7deg); } .horseshoe-card-wrapper:nth-child(7) { transform: translateY(-45px) rotate(12deg); } /* 3. RELACIONAMENTO MIRROR DIAGRAM */ .relationship-spread-container { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 20px; align-items: center; width: 100%; } .rel-col-side { display: flex; flex-direction: column; gap: 15px; background: rgba(197, 168, 128, 0.03); border: 1px dashed rgba(197, 168, 128, 0.2); padding: 15px; border-radius: 12px; } .rel-col-center { display: flex; flex-direction: column; gap: 15px; background: rgba(197, 168, 128, 0.06); border: 1px solid rgba(197, 168, 128, 0.3); padding: 20px 15px; border-radius: 12px; } .rel-col-header { font-family: 'Cinzel', serif; font-size: 0.85rem; color: var(--tarot-gold); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; margin-bottom: 5px; } .rel-card-slot { height: 200px; } /* 4. ÁRVORE DA VIDA KABBALAH DIAGRAM */ .tree-of-life-container { display: flex; flex-direction: column; gap: 15px; align-items: center; padding: 20px 0; width: 100%; } .tree-row { display: flex; justify-content: center; gap: 35px; width: 100%; } .tree-card-slot { width: 115px; height: 180px; } /* 5. PERSONALIZADA DIAMOND SPREAD */ .diamond-spread-container { display: grid; grid-template-columns: repeat(3, 130px); grid-template-rows: repeat(3, 200px); gap: 15px; justify-content: center; align-items: center; width: 100%; } .diamond-slot-top { grid-column: 2; grid-row: 1; height: 200px; } .diamond-slot-left { grid-column: 1; grid-row: 2; height: 200px; } .diamond-slot-right { grid-column: 3; grid-row: 2; height: 200px; } .diamond-slot-bottom { grid-column: 2; grid-row: 3; height: 200px; } /* 6. 3 CARTAS TRIPTYCH */ .triptych-card-slot { height: 260px; } @media (max-width: 992px) { .celtic-cross-spread-container { flex-direction: column; } .celtic-cross-diagram { grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 160px); } .celtic-staff-column { flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: center; } .celtic-staff-column .drawn-card-pure { width: 100px; height: 160px; } .horseshoe-arc-container { flex-wrap: wrap; } .horseshoe-card-wrapper { transform: none !important; width: 110px; height: 170px; } .relationship-spread-container { grid-template-columns: 1fr; } .diamond-spread-container { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; } .diamond-slot-top, .diamond-slot-left, .diamond-slot-right, .diamond-slot-bottom { grid-column: auto; grid-row: auto; height: 180px; } } /* NOVA LEITURA: Spreads Grid */ .spreads-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } @media (max-width: 1100px) { .spreads-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .spreads-grid { grid-template-columns: repeat(2, 1fr); } } .spread-card { background-color: var(--tarot-bg-card); border: var(--tarot-border); border-radius: 12px; padding: 35px 20px; text-align: center; cursor: pointer; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; gap: 18px; min-height: 220px; justify-content: center; } .spread-card:hover { transform: translateY(-3px); border-color: var(--tarot-gold); box-shadow: 0 10px 20px rgba(197, 168, 128, 0.06); } .spread-card.active { border-color: var(--tarot-gold) !important; box-shadow: 0 0 25px rgba(197, 168, 128, 0.2) !important; background-color: rgba(197, 168, 128, 0.06) !important; transform: translateY(-4px); } .reading-result-view { display: none; animation: fadeInView 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } #reading-views-wrapper { display: none; } #interpretacao-completa { display: none; } @keyframes fadeInView { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* INICIAR LEITURA PRE-DRAW BOX & SHUFFLE ANIMATION */ .iniciar-leitura-box { background-color: var(--tarot-bg-card); border: var(--tarot-border); border-radius: 12px; padding: 50px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 25px; animation: fadeInView 0.4s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .deck-cards-stack { position: relative; width: 120px; height: 180px; margin: 15px auto 25px; } .stack-card { position: absolute; width: 100%; height: 100%; border-radius: 10px; border: 1.5px solid var(--tarot-gold); background-color: #0b1014; box-shadow: 0 8px 25px rgba(0,0,0,0.6); background-image: radial-gradient(circle, rgba(197, 168, 128, 0.2) 1px, transparent 1px); background-size: 8px 8px; transition: all 0.4s ease; } .stack-card.card-1 { transform: rotate(-10deg) translateX(-15px) translateY(-5px); z-index: 1; } .stack-card.card-2 { transform: rotate(-5deg) translateX(-8px); z-index: 2; } .stack-card.card-3 { transform: rotate(0deg); z-index: 3; } .stack-card.card-4 { transform: rotate(5deg) translateX(8px); z-index: 4; } .stack-card.card-5 { transform: rotate(10deg) translateX(15px) translateY(-5px); z-index: 5; } .iniciar-deck-area.shuffling .stack-card.card-1 { animation: shuffle1 0.4s infinite alternate ease-in-out; } .iniciar-deck-area.shuffling .stack-card.card-2 { animation: shuffle2 0.4s infinite alternate ease-in-out 0.1s; } .iniciar-deck-area.shuffling .stack-card.card-3 { animation: shuffle3 0.4s infinite alternate ease-in-out 0.15s; } .iniciar-deck-area.shuffling .stack-card.card-4 { animation: shuffle4 0.4s infinite alternate ease-in-out 0.2s; } .iniciar-deck-area.shuffling .stack-card.card-5 { animation: shuffle5 0.4s infinite alternate ease-in-out 0.25s; } @keyframes shuffle1 { 0% { transform: rotate(-10deg) translateX(-15px); } 100% { transform: rotate(-35deg) translateX(-70px) translateY(-20px); } } @keyframes shuffle2 { 0% { transform: rotate(-5deg) translateX(-8px); } 100% { transform: rotate(-15deg) translateX(-35px) translateY(-10px); } } @keyframes shuffle3 { 0% { transform: rotate(0deg); } 100% { transform: scale(1.12) translateY(-15px); } } @keyframes shuffle4 { 0% { transform: rotate(5deg) translateX(8px); } 100% { transform: rotate(15deg) translateX(35px) translateY(-10px); } } @keyframes shuffle5 { 0% { transform: rotate(10deg) translateX(15px); } 100% { transform: rotate(35deg) translateX(70px) translateY(-20px); } } /* 3D TAROT FLIP CARD SYSTEM */ .tarot-flip-card { perspective: 1200px; cursor: pointer; width: 100%; min-height: 250px; user-select: none; } .tarot-flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); transform-style: preserve-3d; } .tarot-flip-card.flipped .tarot-flip-inner { transform: rotateY(180deg); } .tarot-card-face { width: 100%; height: 100%; border-radius: 12px; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-sizing: border-box; } .card-back-face { background: radial-gradient(circle, #1a222f 0%, #0b1014 100%); border: 1.5px solid var(--tarot-gold); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 15px 10px; min-height: 240px; box-shadow: 0 8px 25px rgba(0,0,0,0.5); text-align: center; gap: 12px; position: relative; } .card-back-pattern { width: 50px; height: 75px; border: 1px solid rgba(197, 168, 128, 0.4); border-radius: 6px; display: flex; align-items: center; justify-content: center; background-image: radial-gradient(circle, rgba(197, 168, 128, 0.25) 1px, transparent 1px); background-size: 8px 8px; } .tap-to-flip-badge { font-size: 0.65rem; color: var(--tarot-gold); border: 1px solid var(--tarot-gold-dim); padding: 3px 8px; border-radius: 20px; letter-spacing: 0.05em; text-transform: uppercase; background-color: rgba(197, 168, 128, 0.08); animation: pulseGold 2s infinite ease-in-out; } @keyframes pulseGold { 0%, 100% { box-shadow: 0 0 5px rgba(197, 168, 128, 0.2); } 50% { box-shadow: 0 0 15px rgba(197, 168, 128, 0.5); } } .card-front-face { position: absolute; top: 0; left: 0; transform: rotateY(180deg); background-color: var(--tarot-bg-card); border: var(--tarot-border); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; box-shadow: 0 10px 25px rgba(0,0,0,0.3); } /* AUTHENTIC GEOMETRIC SPREAD DIAGRAMS */ /* 1. CRUZ CELTA DIAGRAM */ .celtic-cross-spread-container { display: flex; gap: 30px; align-items: center; justify-content: center; width: 100%; margin-bottom: 20px; } .celtic-cross-diagram { display: grid; grid-template-columns: repeat(3, 130px); grid-template-rows: repeat(3, 230px); gap: 15px; align-items: center; justify-items: center; } .celtic-center-slot { grid-column: 2; grid-row: 2; position: relative; width: 100%; height: 100%; } .celtic-center-slot .card-1-base { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 1; } .celtic-center-slot .card-2-crossed { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 2; transform: rotate(90deg) scale(0.92); filter: drop-shadow(0 6px 15px rgba(0,0,0,0.8)); } .celtic-staff-column { display: flex; flex-direction: column-reverse; gap: 15px; width: 130px; } /* 2. FERRADURA HORSESHOE ARC DIAGRAM */ .horseshoe-arc-container { display: flex; justify-content: center; align-items: flex-end; gap: 10px; padding: 40px 10px 20px; width: 100%; } .horseshoe-card-wrapper { width: 125px; } .horseshoe-card-wrapper:nth-child(1) { transform: translateY(-45px) rotate(-12deg); } .horseshoe-card-wrapper:nth-child(2) { transform: translateY(-18px) rotate(-7deg); } .horseshoe-card-wrapper:nth-child(3) { transform: translateY(8px) rotate(-3deg); } .horseshoe-card-wrapper:nth-child(4) { transform: translateY(24px) rotate(0deg); } .horseshoe-card-wrapper:nth-child(5) { transform: translateY(8px) rotate(3deg); } .horseshoe-card-wrapper:nth-child(6) { transform: translateY(-18px) rotate(7deg); } .horseshoe-card-wrapper:nth-child(7) { transform: translateY(-45px) rotate(12deg); } /* 3. RELACIONAMENTO MIRROR DIAGRAM */ .relationship-spread-container { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 20px; align-items: center; width: 100%; } .rel-col-side { display: flex; flex-direction: column; gap: 15px; background: rgba(197, 168, 128, 0.03); border: 1px dashed rgba(197, 168, 128, 0.2); padding: 15px; border-radius: 12px; } .rel-col-center { display: flex; flex-direction: column; gap: 15px; background: rgba(197, 168, 128, 0.06); border: 1px solid rgba(197, 168, 128, 0.3); padding: 20px 15px; border-radius: 12px; } .rel-col-header { font-family: 'Cinzel', serif; font-size: 0.85rem; color: var(--tarot-gold); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; margin-bottom: 5px; } /* 4. ÁRVORE DA VIDA KABBALAH DIAGRAM */ .tree-of-life-container { display: flex; flex-direction: column; gap: 15px; align-items: center; padding: 20px 0; width: 100%; } .tree-row { display: flex; justify-content: center; gap: 35px; width: 100%; } .tree-card-slot { width: 125px; } /* 5. PERSONALIZADA DIAMOND SPREAD */ .diamond-spread-container { display: grid; grid-template-columns: repeat(3, 130px); grid-template-rows: repeat(3, 230px); gap: 15px; justify-content: center; align-items: center; width: 100%; } .diamond-slot-top { grid-column: 2; grid-row: 1; } .diamond-slot-left { grid-column: 1; grid-row: 2; } .diamond-slot-right { grid-column: 3; grid-row: 2; } .diamond-slot-bottom { grid-column: 2; grid-row: 3; } @media (max-width: 992px) { .celtic-cross-spread-container { flex-direction: column; } .celtic-cross-diagram { grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3, 170px); } .celtic-staff-column { flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: center; } .horseshoe-arc-container { flex-wrap: wrap; } .horseshoe-card-wrapper { transform: none !important; width: 120px; } .relationship-spread-container { grid-template-columns: 1fr; } .diamond-spread-container { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; } .diamond-slot-top, .diamond-slot-left, .diamond-slot-right, .diamond-slot-bottom { grid-column: auto; grid-row: auto; } } /* NOVA LEITURA: Spreads Grid */ .spreads-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; } @media (max-width: 1100px) { .spreads-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .spreads-grid { grid-template-columns: repeat(2, 1fr); } } .spread-card { background-color: var(--tarot-bg-card); border: var(--tarot-border); border-radius: 12px; padding: 35px 20px; text-align: center; cursor: pointer; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; gap: 18px; min-height: 220px; justify-content: center; } .spread-card:hover { transform: translateY(-3px); border-color: var(--tarot-gold); box-shadow: 0 10px 20px rgba(197, 168, 128, 0.06); } .spread-card.active { border-color: var(--tarot-gold) !important; box-shadow: 0 0 25px rgba(197, 168, 128, 0.2) !important; background-color: rgba(197, 168, 128, 0.06) !important; transform: translateY(-4px); } .reading-result-view { display: none; animation: fadeInView 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); } #reading-views-wrapper { display: none; } #interpretacao-completa { display: none; } @keyframes fadeInView { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* INICIAR LEITURA PRE-DRAW BOX & SHUFFLE ANIMATION */ .iniciar-leitura-box { background-color: var(--tarot-bg-card); border: var(--tarot-border); border-radius: 12px; padding: 50px 30px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 25px; animation: fadeInView 0.4s ease; box-shadow: 0 10px 30px rgba(0,0,0,0.2); } .deck-cards-stack { position: relative; width: 110px; height: 170px; margin: 10px auto 20px; } .stack-card { position: absolute; width: 100%; height: 100%; border-radius: 8px; border: 1.5px solid var(--tarot-gold); background-color: #0b1014; box-shadow: 0 8px 20px rgba(0,0,0,0.5); background-image: radial-gradient(circle, rgba(197, 168, 128, 0.18) 1px, transparent 1px); background-size: 10px 10px; transition: transform 0.4s ease; } .stack-card.card-1 { transform: rotate(-6deg) translateX(-8px); } .stack-card.card-2 { transform: rotate(0deg); z-index: 2; } .stack-card.card-3 { transform: rotate(6deg) translateX(8px); z-index: 3; } .iniciar-deck-area.shuffling .stack-card.card-1 { animation: shuffleLeft 0.5s infinite alternate ease-in-out; } .iniciar-deck-area.shuffling .stack-card.card-3 { animation: shuffleRight 0.5s infinite alternate ease-in-out; } .iniciar-deck-area.shuffling .stack-card.card-2 { animation: shuffleCenter 0.5s infinite alternate ease-in-out; } @keyframes shuffleLeft { 0% { transform: rotate(-6deg) translateX(-8px); } 100% { transform: rotate(-22deg) translateX(-50px) translateY(-10px); } } @keyframes shuffleRight { 0% { transform: rotate(6deg) translateX(8px); } 100% { transform: rotate(22deg) translateX(50px) translateY(-10px); } } @keyframes shuffleCenter { 0% { transform: scale(1); } 100% { transform: scale(1.08) translateY(-5px); } } /* MULTI-CARD LAYOUT GRIDS */ .cards-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; } .cards-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .cards-grid-6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .cards-grid-7 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .cards-grid-10 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; } .drawn-card-wrapper-sm .drawn-card-frame { height: 180px; } .drawn-card-wrapper-sm .card-title-badge { font-size: 0.68rem; padding: 2px 6px; } .drawn-card-wrapper-sm .drawn-card-label { font-size: 0.65rem; } .drawn-card-wrapper-sm .drawn-card-meaning-text { font-size: 0.7rem; line-height: 1.3; } @media (max-width: 1200px) { .cards-grid-7 { grid-template-columns: repeat(4, 1fr); } .cards-grid-10 { grid-template-columns: repeat(5, 1fr); } } @media (max-width: 768px) { .cards-grid-3 { grid-template-columns: repeat(1, 1fr); } .cards-grid-4 { grid-template-columns: repeat(2, 1fr); } .cards-grid-6 { grid-template-columns: repeat(2, 1fr); } .cards-grid-7 { grid-template-columns: repeat(2, 1fr); } .cards-grid-10 { grid-template-columns: repeat(2, 1fr); } } .spread-icon-box { width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid rgba(197, 168, 128, 0.25); display: flex; align-items: center; justify-content: center; color: var(--tarot-gold); background-color: rgba(197, 168, 128, 0.03); margin-bottom: 5px; } .spread-icon-box svg { width: 32px; height: 32px; stroke-width: 1.2; } .spread-title { font-family: 'Cinzel', serif; font-size: 0.9rem; letter-spacing: 0.08em; color: #fff; margin: 0; font-weight: bold; } .spread-desc { font-size: 0.76rem; color: var(--tarot-text-muted); line-height: 1.45; margin: 0; } /* RESULT: SUA LEITURA – 3 CARTAS */ .reading-result-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; align-items: start; } @media (max-width: 1100px) { .reading-result-layout { grid-template-columns: 1fr; } } .reading-cards-col { display: flex; flex-direction: column; gap: 25px; } .reading-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 576px) { .reading-cards-row { grid-template-columns: 1fr; } } .drawn-card-wrapper { background-color: var(--tarot-bg-card); border: var(--tarot-border); border-radius: 10px; padding: 20px 15px; text-align: center; display: flex; flex-direction: column; align-items: center; } .drawn-card-frame { width: 100%; aspect-ratio: 1 / 1.58; border-radius: 6px; overflow: hidden; border: 1px solid rgba(197, 168, 128, 0.15); background-color: #0b1014; } .drawn-card-frame img { width: 100%; height: 100%; object-fit: cover; } .card-title-badge { border: 1px solid var(--tarot-gold); padding: 5px 15px; font-family: 'Cinzel', serif; font-size: 0.78rem; color: var(--tarot-gold); letter-spacing: 0.05em; margin-top: 15px; margin-bottom: 12px; display: inline-block; font-weight: 500; } .drawn-card-label { font-size: 0.65rem; font-weight: bold; text-transform: uppercase; color: #fff; background-color: rgba(255, 255, 255, 0.05); padding: 3px 10px; border-radius: 3px; letter-spacing: 0.05em; margin-bottom: 10px; } .drawn-card-meaning-text { font-size: 0.76rem; line-height: 1.45; color: var(--tarot-text-muted); margin: 0; } /* Interpretation Right Card */ .reading-interpretation-card { background-color: var(--tarot-bg-card); border: var(--tarot-border); border-radius: 10px; padding: 30px; } .interpretation-card-title { font-family: 'Cinzel', serif; font-size: 1.05rem; letter-spacing: 0.08em; color: #fff; margin-top: 0; margin-bottom: 15px; border-bottom: 1px dashed rgba(197, 168, 128, 0.15); padding-bottom: 10px; font-weight: bold; } .interpretation-text { font-size: 0.8rem; line-height: 1.6; color: var(--tarot-text-muted); margin-top: 0; margin-bottom: 20px; } .interpretation-attributes-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 25px; } .interpretation-attr-row { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; border-bottom: 1px dashed rgba(197, 168, 128, 0.15); padding: 12px 0; } .interpretation-attr-row:last-child { border-bottom: none; } .interpretation-attr-label { color: var(--tarot-text-muted); } .interpretation-attr-val { color: #fff; font-weight: 500; } .interpretation-attr-val.gold { color: var(--tarot-gold); } /* FERRAMENTAS EXCLUSIVAS Grid */ .tools-ex-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; } @media (max-width: 1100px) { .tools-ex-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 768px) { .tools-ex-grid { grid-template-columns: repeat(2, 1fr); } } .tool-ex-card { background-color: var(--tarot-bg-card); border: var(--tarot-border); border-radius: 12px; padding: 35px 20px; text-align: center; transition: all 0.3s; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 18px; min-height: 220px; justify-content: center; } .tool-ex-card:hover { transform: translateY(-3px); border-color: var(--tarot-gold); box-shadow: 0 10px 20px rgba(197, 168, 128, 0.06); } .tool-ex-icon { width: 72px; height: 72px; border-radius: 50%; border: 1.5px solid rgba(197, 168, 128, 0.25); display: flex; align-items: center; justify-content: center; color: var(--tarot-gold); background-color: rgba(197, 168, 128, 0.03); margin-bottom: 5px; } .tool-ex-icon svg { width: 32px; height: 32px; stroke-width: 1.2; } .tool-ex-title { font-family: 'Cinzel', serif; font-size: 0.9rem; letter-spacing: 0.08em; color: #fff; margin: 0; font-weight: bold; } .tool-ex-desc { font-size: 0.76rem; color: var(--tarot-text-muted); line-height: 1.45; margin: 0; } /* LOWER LAYOUT: LEITURAS RECENTES & RIGTH BLOCKS */ .lower-dashboard-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } @media (max-width: 1100px) { .lower-dashboard-layout { grid-template-columns: 1fr; } } /* Recent readings list */ .recent-readings-box { background-color: var(--tarot-bg-card); border: var(--tarot-border); border-radius: 10px; padding: 30px; display: flex; flex-direction: column; } .recent-reading-row { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(197, 168, 128, 0.08); gap: 20px; } .recent-reading-row:last-child { border-bottom: none; } .recent-reading-left { display: flex; align-items: center; gap: 15px; } .recent-reading-icon { color: var(--tarot-gold); display: flex; align-items: center; justify-content: center; } .recent-reading-icon svg { width: 18px; height: 18px; stroke-width: 1.5; } .recent-reading-meta { display: flex; flex-direction: column; gap: 4px; } .recent-reading-title { font-family: 'Cinzel', serif; font-size: 0.85rem; color: #fff; margin: 0; font-weight: bold; } .recent-reading-desc { font-size: 0.72rem; color: var(--tarot-text-muted); margin: 0; } .recent-reading-center { display: flex; align-items: center; gap: 20px; } .badge-time { font-size: 0.62rem; font-weight: bold; text-transform: uppercase; border-radius: 4px; padding: 3px 8px; letter-spacing: 0.05em; background-color: rgba(255, 255, 255, 0.03); color: var(--tarot-text-muted); } .badge-time.active-badge { background-color: rgba(197, 168, 128, 0.12); color: var(--tarot-gold); } .recent-reading-thumbs { display: flex; gap: 4px; } .recent-reading-thumbs img { width: 18px; height: 28px; border-radius: 2px; border: 1px solid rgba(197, 168, 128, 0.15); object-fit: cover; } /* Right column support cards */ .right-support-column { display: flex; flex-direction: column; gap: 30px; } /* Tarot Message Card */ .support-card-message { background-color: var(--tarot-bg-card); border: var(--tarot-border); border-radius: 10px; padding: 30px; text-align: center; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 15px; } .support-msg-header { font-family: 'Cinzel', serif; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--tarot-gold); display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: bold; margin: 0; } .support-msg-header svg { color: var(--tarot-gold); width: 16px; height: 16px; } .support-msg-text { font-size: 0.76rem; line-height: 1.5; color: var(--tarot-text-muted); margin: 0; } /* Mystical Geometric Card Back SVG Container */ .tarot-card-back-graphic { width: 90px; height: 145px; border-radius: 6px; border: 1.5px solid var(--tarot-gold); background-color: #0b1014; box-shadow: 0 8px 16px rgba(0,0,0,0.3); margin: 5px 0; overflow: hidden; } /* Events Card */ .support-card-events { background-color: var(--tarot-bg-card); border: var(--tarot-border); border-radius: 10px; padding: 30px; } .events-list { display: flex; flex-direction: column; gap: 15px; margin-bottom: 20px; } .event-item { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; } .event-left { display: flex; align-items: center; gap: 10px; color: var(--tarot-text); } .event-left svg { color: var(--tarot-gold); width: 14px; height: 14px; } .event-date { font-size: 0.72rem; color: var(--tarot-text-muted); } /* BTN GOLD STYLES RE-DECLARATION TO ALIGN PERFECTLY */ .btn-gold { background: linear-gradient(135deg, #c5a880 0%, #b49368 100%); color: #070b0e !important; font-weight: 600; font-size: 0.8rem; border: none; border-radius: 6px; padding: 10px 20px; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; display: inline-block; box-shadow: 0 4px 12px rgba(197, 168, 128, 0.15); } .btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(197, 168, 128, 0.25); opacity: 0.95; } .btn-gold-outline { border: 1px solid var(--tarot-gold); background-color: transparent; color: var(--tarot-gold) !important; font-weight: 600; font-size: 0.8rem; border-radius: 6px; padding: 9px 20px; cursor: pointer; transition: all 0.3s; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; display: inline-block; } .btn-gold-outline:hover { background-color: rgba(197, 168, 128, 0.05); border-color: #fff; color: #fff !important; } .btn-gold-sm { padding: 8px 16px; font-size: 0.72rem; border-radius: 4px; } .btn-gold-outline-sm { padding: 7px 16px; font-size: 0.72rem; border-radius: 4px; } /* ENHANCED CONTAINER & RESPONSIVE FIT FOR ALL 13 DIAGRAMS */ .reading-cards-col { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: auto !important; } .celtic-cross-diagram { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 25px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .celtic-cross-left-grid { display: grid !important; grid-template-columns: repeat(3, minmax(75px, 105px)) !important; grid-template-rows: repeat(3, minmax(120px, 165px)) !important; gap: 10px !important; align-items: center !important; justify-items: center !important; } .celtic-staff-column { display: flex !important; flex-direction: column !important; gap: 10px !important; width: clamp(75px, 12vw, 105px) !important; } .horseshoe-arc-container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: flex-end !important; gap: 10px !important; padding: 20px 5px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .horseshoe-card-wrapper { width: clamp(70px, 11vw, 100px) !important; height: clamp(115px, 18vw, 160px) !important; flex-shrink: 0 !important; } .relationship-spread-container { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; align-items: flex-start !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .tree-of-life-container { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: center !important; padding: 15px 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .tree-card-slot { width: clamp(70px, 11vw, 100px) !important; height: clamp(115px, 18vw, 160px) !important; } .astro-grid-13 { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(85px, 1fr)) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .birthday-grid-9 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .tetraktys-pyramid-container { display: flex !important; flex-direction: column !important; gap: 10px !important; align-items: center !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 15px 0 !important; } .tetraktys-row .drawn-card-pure { width: clamp(70px, 11vw, 100px) !important; height: clamp(115px, 18vw, 160px) !important; } /* --- AUTHENTIC SACRED GEOMETRY FOR ALL 13 TAROT SPREADS --- */ .reading-cards-col { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: auto !important; padding: 10px 5px !important; } /* 1. 3 CARTAS */ .triptych-row-3 { display: flex !important; justify-content: center !important; gap: 20px !important; width: 100% !important; } .triptych-row-3 .drawn-card-pure { width: clamp(85px, 14vw, 125px) !important; height: clamp(140px, 22vw, 200px) !important; } /* 2. CRUZ CELTA (CORTESIA GEOMÉTRICA DA CRUZ + O CETRO) */ .celtic-cross-authentic-container { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 35px !important; width: 100% !important; max-width: 100% !important; padding: 20px 0 !important; } .celtic-cross-shape { position: relative !important; width: 310px !important; height: 370px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .celtic-slot-center-1 { position: absolute !important; width: 82px !important; height: 132px !important; z-index: 1 !important; } .celtic-slot-center-2 { position: absolute !important; width: 82px !important; height: 132px !important; z-index: 2 !important; transform: rotate(90deg) !important; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.6)) !important; } .celtic-slot-below-3 { position: absolute !important; bottom: 0 !important; width: 82px !important; height: 132px !important; } .celtic-slot-left-4 { position: absolute !important; left: 0 !important; width: 82px !important; height: 132px !important; } .celtic-slot-top-5 { position: absolute !important; top: 0 !important; width: 82px !important; height: 132px !important; } .celtic-slot-right-6 { position: absolute !important; right: 0 !important; width: 82px !important; height: 132px !important; } .celtic-staff-shape { display: flex !important; flex-direction: column-reverse !important; gap: 10px !important; width: 82px !important; flex-shrink: 0 !important; } .celtic-staff-shape .drawn-card-pure { width: 82px !important; height: 132px !important; } /* 3. FERRADURA (ARCO EM U) */ .horseshoe-arc-authentic { display: flex !important; justify-content: center !important; align-items: flex-end !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; padding: 40px 0 20px !important; } .horseshoe-slot { width: clamp(65px, 10vw, 95px) !important; height: clamp(105px, 16vw, 150px) !important; transition: transform 0.3s !important; } .hs-1 { transform: translateY(35px) rotate(-14deg) !important; } .hs-2 { transform: translateY(15px) rotate(-7deg) !important; } .hs-3 { transform: translateY(-4px) rotate(-2deg) !important; } .hs-4 { transform: translateY(-22px) rotate(0deg) !important; } /* Topo */ .hs-5 { transform: translateY(-4px) rotate(2deg) !important; } .hs-6 { transform: translateY(15px) rotate(7deg) !important; } .hs-7 { transform: translateY(35px) rotate(14deg) !important; } /* 4. RELACIONAMENTO (ESPELHO DO CASAL) */ .relationship-mirror-authentic { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 15px !important; align-items: flex-start !important; width: 100% !important; } .rel-col-box { display: flex !important; flex-direction: column !important; gap: 12px !important; background: rgba(197, 168, 128, 0.03) !important; border: 1px solid rgba(197, 168, 128, 0.15) !important; border-radius: 10px !important; padding: 12px !important; align-items: center !important; } .rel-col-box .drawn-card-pure { width: clamp(75px, 11vw, 105px) !important; height: clamp(120px, 18vw, 165px) !important; } /* 5. ÁRVORE DA VIDA (10 SEPHIROT CABALÍSTICAS) */ .tree-of-life-authentic { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; width: 100% !important; padding: 15px 0 !important; } .tree-level-1 { display: flex !important; justify-content: center !important; width: 100% !important; } .tree-level-2 { display: flex !important; justify-content: space-between !important; width: min(240px, 90%) !important; } .tree-level-3 { display: flex !important; justify-content: space-between !important; width: min(330px, 100%) !important; } .tree-level-4 { display: flex !important; justify-content: space-between !important; width: min(330px, 100%) !important; } .tree-level-5 { display: flex !important; justify-content: center !important; width: 100% !important; } .tree-of-life-authentic .drawn-card-pure { width: clamp(65px, 10vw, 90px) !important; height: clamp(105px, 16vw, 140px) !important; } /* 6. TAROT ASTROLÓGICO (RODA DO ZODÍACO 13 CASAS) */ .astro-wheel-authentic { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)) !important; gap: 10px !important; width: 100% !important; } .astro-wheel-authentic .drawn-card-pure { width: clamp(70px, 10vw, 95px) !important; height: clamp(110px, 16vw, 150px) !important; } /* 7. TETRAKTYS (PIRÂMIDE DE PITÁGORAS 1-2-3-4) */ .tetraktys-pyramid-authentic { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 15px 0 !important; } .tet-row-1 { display: flex !important; justify-content: center !important; gap: 8px !important; } .tet-row-2 { display: flex !important; justify-content: center !important; gap: 8px !important; } .tet-row-3 { display: flex !important; justify-content: center !important; gap: 8px !important; } .tet-row-4 { display: flex !important; justify-content: center !important; gap: 8px !important; } .tetraktys-pyramid-authentic .drawn-card-pure { width: clamp(65px, 10vw, 90px) !important; height: clamp(105px, 16vw, 140px) !important; } /* 8. ANÁLISE DE ANIVERSÁRIO (MATRIZ DO RETORNO SOLAR 3X3) */ .birthday-matrix-3x3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; width: 100% !important; } .birthday-matrix-3x3 .drawn-card-pure { width: clamp(75px, 11vw, 105px) !important; height: clamp(120px, 18vw, 165px) !important; } /* --- REGRA DE SEGURANÇA GLOBAL CONTRA VAZAMENTO --- */ .reading-cards-col { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: auto !important; padding: 15px 5px !important; } /* 1. TIRAGEM DE 3 CARTAS */ .spread-3-cartas-layout { display: flex !important; justify-content: center !important; gap: 15px !important; width: 100% !important; } .spread-3-cartas-layout .drawn-card-pure { width: clamp(80px, 13vw, 115px) !important; height: clamp(130px, 21vw, 185px) !important; } /* 2. CRUZ CELTA (10 CARTAS) */ .celtic-cross-full-layout { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 30px !important; width: 100% !important; max-width: 100% !important; padding: 15px 0 !important; } .celtic-cross-diagram-box { position: relative !important; width: 300px !important; height: 360px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .celtic-slot-1 { position: absolute !important; width: 78px !important; height: 125px !important; z-index: 1 !important; } .celtic-slot-2 { position: absolute !important; width: 78px !important; height: 125px !important; z-index: 2 !important; transform: rotate(90deg) !important; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.7)) !important; } .celtic-slot-3 { position: absolute !important; top: 0 !important; width: 78px !important; height: 125px !important; } .celtic-slot-4 { position: absolute !important; bottom: 0 !important; width: 78px !important; height: 125px !important; } .celtic-slot-5 { position: absolute !important; left: 0 !important; width: 78px !important; height: 125px !important; } .celtic-slot-6 { position: absolute !important; right: 0 !important; width: 78px !important; height: 125px !important; } .celtic-staff-diagram-box { display: flex !important; flex-direction: column-reverse !important; gap: 8px !important; width: 78px !important; flex-shrink: 0 !important; } .celtic-staff-diagram-box .drawn-card-pure { width: 78px !important; height: 125px !important; } /* 3. TAROT ASTROLÓGICO (13 CARTAS - RODA DE 12 AO REDOR DA 13) */ .astro-wheel-diagram-box { position: relative !important; width: clamp(320px, 90vw, 440px) !important; height: clamp(320px, 90vw, 440px) !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .astro-center-slot { position: absolute !important; width: clamp(65px, 10vw, 85px) !important; height: clamp(105px, 16vw, 135px) !important; z-index: 10 !important; box-shadow: 0 0 20px rgba(197, 168, 128, 0.4) !important; } .astro-pos-1 { position: absolute !important; left: 0; width: clamp(55px, 8vw, 72px) !important; height: clamp(90px, 13vw, 115px) !important; } /* Casa 1 - Ascendente */ .astro-pos-2 { position: absolute !important; left: 10%; bottom: 15%; width: clamp(55px, 8vw, 72px) !important; height: clamp(90px, 13vw, 115px) !important; } .astro-pos-3 { position: absolute !important; left: 28%; bottom: 3%; width: clamp(55px, 8vw, 72px) !important; height: clamp(90px, 13vw, 115px) !important; } .astro-pos-4 { position: absolute !important; bottom: 0; width: clamp(55px, 8vw, 72px) !important; height: clamp(90px, 13vw, 115px) !important; } /* Casa 4 - Família (Baixo) */ .astro-pos-5 { position: absolute !important; right: 28%; bottom: 3%; width: clamp(55px, 8vw, 72px) !important; height: clamp(90px, 13vw, 115px) !important; } .astro-pos-6 { position: absolute !important; right: 10%; bottom: 15%; width: clamp(55px, 8vw, 72px) !important; height: clamp(90px, 13vw, 115px) !important; } .astro-pos-7 { position: absolute !important; right: 0; width: clamp(55px, 8vw, 72px) !important; height: clamp(90px, 13vw, 115px) !important; } /* Casa 7 - Relacionamentos (Direita) */ .astro-pos-8 { position: absolute !important; right: 10%; top: 15%; width: clamp(55px, 8vw, 72px) !important; height: clamp(90px, 13vw, 115px) !important; } .astro-pos-9 { position: absolute !important; right: 28%; top: 3%; width: clamp(55px, 8vw, 72px) !important; height: clamp(90px, 13vw, 115px) !important; } .astro-pos-10 { position: absolute !important; top: 0; width: clamp(55px, 8vw, 72px) !important; height: clamp(90px, 13vw, 115px) !important; } /* Casa 10 - Carreira (Topo) */ .astro-pos-11 { position: absolute !important; left: 28%; top: 3%; width: clamp(55px, 8vw, 72px) !important; height: clamp(90px, 13vw, 115px) !important; } .astro-pos-12 { position: absolute !important; left: 10%; top: 15%; width: clamp(55px, 8vw, 72px) !important; height: clamp(90px, 13vw, 115px) !important; } /* 4. TAROT DO AMOR (6 CARTAS - LOSANGO DO AMOR) */ .love-diamond-layout { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; width: 100% !important; } .love-row-top { display: flex !important; justify-content: center !important; } .love-row-mid { display: flex !important; justify-content: space-between !important; width: min(320px, 100%) !important; align-items: center !important; } .love-row-center { display: flex !important; justify-content: center !important; margin: -20px 0 !important; } .love-row-bottom { display: flex !important; justify-content: space-between !important; width: min(240px, 90%) !important; margin-top: 10px !important; } .love-diamond-layout .drawn-card-pure { width: clamp(70px, 11vw, 95px) !important; height: clamp(110px, 17vw, 150px) !important; } /* 5. FERRADURA / MANDALAS (7 CARTAS ARCO EM U) */ .horseshoe-u-layout { display: flex !important; justify-content: center !important; align-items: flex-end !important; gap: 6px !important; width: 100% !important; padding: 35px 0 15px !important; } .hs-card { width: clamp(60px, 9.5vw, 90px) !important; height: clamp(100px, 15vw, 145px) !important; } /* 6. TAROT DE SONHOS (3 CARTAS) */ .dream-triptych-layout { display: flex !important; justify-content: center !important; gap: 15px !important; width: 100% !important; } .dream-triptych-layout .drawn-card-pure { width: clamp(80px, 13vw, 115px) !important; height: clamp(130px, 21vw, 185px) !important; } /* 7. ÁRVORE DA VIDA (10 CARTAS - COLUNAS CABALÍSTICAS) */ .tree-cabala-layout { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; width: 100% !important; padding: 10px 0 !important; } .tree-row-kether { display: flex !important; justify-content: center !important; width: 100% !important; } .tree-row-upper { display: flex !important; justify-content: space-between !important; width: min(220px, 90%) !important; } .tree-row-middle { display: flex !important; justify-content: space-between !important; width: min(310px, 100%) !important; } .tree-row-lower { display: flex !important; justify-content: space-between !important; width: min(310px, 100%) !important; } .tree-row-malkuth { display: flex !important; justify-content: center !important; width: 100% !important; } .tree-cabala-layout .drawn-card-pure { width: clamp(62px, 9.5vw, 88px) !important; height: clamp(100px, 15vw, 138px) !important; } /* 8. TAROT ANIVERSÁRIO (MATRIZ 3X3) */ .birthday-matrix-layout { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; width: 100% !important; max-width: 380px !important; margin: 0 auto !important; } .birthday-matrix-layout .drawn-card-pure { width: clamp(75px, 11vw, 105px) !important; height: clamp(120px, 18vw, 165px) !important; } /* 9. PASSADO & KARMAS (8 CARTAS - 2 LINHAS X 4 COLUNAS) */ .pastlife-grid-2x4 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 10px !important; width: 100% !important; max-width: 480px !important; margin: 0 auto !important; } .pastlife-grid-2x4 .drawn-card-pure { width: clamp(65px, 10vw, 95px) !important; height: clamp(105px, 16vw, 150px) !important; } /* 10. TAROT TETRAKTYS (PIRÂMIDE DE 10 CARTAS: 1-2-3-4) */ .tetraktys-pyramid-layout { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; width: 100% !important; padding: 10px 0 !important; } .tet-lvl-1 { display: flex !important; justify-content: center !important; gap: 8px !important; } .tet-lvl-2 { display: flex !important; justify-content: center !important; gap: 8px !important; } .tet-lvl-3 { display: flex !important; justify-content: center !important; gap: 8px !important; } .tet-lvl-4 { display: flex !important; justify-content: center !important; gap: 8px !important; } .tetraktys-pyramid-layout .drawn-card-pure { width: clamp(60px, 9vw, 85px) !important; height: clamp(95px, 14.5vw, 135px) !important; } /* 11. TAROT PLANETÁRIO (8 CARTAS - RODA DE 7 AO REDOR DA 8) */ .planet-wheel-layout { position: relative !important; width: clamp(300px, 85vw, 400px) !important; height: clamp(300px, 85vw, 400px) !important; margin: 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; } .planet-center-slot { position: absolute !important; width: clamp(65px, 10vw, 85px) !important; height: clamp(105px, 16vw, 135px) !important; z-index: 10 !important; box-shadow: 0 0 20px rgba(197, 168, 128, 0.4) !important; } .planet-pos-1 { position: absolute !important; top: 0; width: clamp(55px, 8vw, 75px) !important; height: clamp(90px, 13vw, 120px) !important; } .planet-pos-2 { position: absolute !important; top: 12%; left: 12%; width: clamp(55px, 8vw, 75px) !important; height: clamp(90px, 13vw, 120px) !important; } .planet-pos-3 { position: absolute !important; top: 12%; right: 12%; width: clamp(55px, 8vw, 75px) !important; height: clamp(90px, 13vw, 120px) !important; } .planet-pos-4 { position: absolute !important; left: 0; width: clamp(55px, 8vw, 75px) !important; height: clamp(90px, 13vw, 120px) !important; } .planet-pos-5 { position: absolute !important; right: 0; width: clamp(55px, 8vw, 75px) !important; height: clamp(90px, 13vw, 120px) !important; } .planet-pos-6 { position: absolute !important; bottom: 12%; left: 12%; width: clamp(55px, 8vw, 75px) !important; height: clamp(90px, 13vw, 120px) !important; } .planet-pos-7 { position: absolute !important; bottom: 12%; right: 12%; width: clamp(55px, 8vw, 75px) !important; height: clamp(90px, 13vw, 120px) !important; } /* 12. CRUZ E TRIÂNGULO (9 CARTAS - CRUZ ACIMA + TRIÂNGULO ABAIXO) */ .crosstriangle-layout { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 15px !important; width: 100% !important; } .ct-cross-part { display: grid !important; grid-template-columns: repeat(3, 80px) !important; grid-template-rows: repeat(3, 125px) !important; gap: 8px !important; align-items: center !important; justify-items: center !important; } .ct-triangle-part { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 8px !important; } .ct-tri-row-1 { display: flex !important; justify-content: center !important; gap: 8px !important; } .ct-tri-row-2 { display: flex !important; justify-content: space-between !important; width: 180px !important; } .crosstriangle-layout .drawn-card-pure { width: 75px !important; height: 120px !important; } /* 13. ORÁCULO GONG (32 CARTAS - 4 LINHAS X 8 COLUNAS) */ .gong-board-authentic-grid { display: grid !important; grid-template-columns: repeat(8, minmax(65px, 1fr)) !important; gap: 8px !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-x: auto !important; }