/* ─── DESIGN TOKENS ──────────────────────────────────────────── */ :root { /* ── BRAND THEME — "Plum & Champagne" ───────────────────────── Cream grounds with Midnight Plum ink, Dusty Rose surfaces, Soft Lavender highlights and Champagne Gold detailing. Raw primitives live in brand.css (--tsb-*), the single token layer shared with admin.css. This block maps them onto this theme's historical names (inverted on purpose): --void is the LIGHTEST surface and --stardust the DARKEST ink. Names are kept — they are referenced in ~40 places across views; renaming would be riskier than tolerating the odd naming. */ --void: #F8F2EA; /* page ground (was darkest) */ --midnight: #F1EBE1; /* section ground */ --veil: #FCF7F0; /* raised surface */ --arcane: var(--tsb-cream-arcane); /* strongest surface */ --gold: #7E6039; /* accent: text, borders, button grounds */ /* --gold-light is used as the colour of ~25 small headings (.service-title, .tcard-name, .zcard-name ...). On cream it must stay dark to remain readable, so it maps to the deep lavender tone; inside dark panels the inverse-surface block below restores a genuinely light value. */ --gold-light: var(--tsb-lavender-deep); --gold-dim: var(--tsb-gold-dim); --violet: var(--tsb-lavender-deep); --rose: var(--tsb-rose); --rose-deep: var(--tsb-rose-deep); /* rose usable as text on cream */ --gold-bright: var(--tsb-gold); /* champagne: icons, stars, borders */ --gold-soft: var(--tsb-gold-soft); --danger: var(--tsb-danger); --success: var(--tsb-success); --warning: var(--tsb-warning); --info: var(--tsb-info); --stardust: var(--tsb-plum); /* primary ink (was lightest) */ --mist: var(--tsb-ink-mist); /* secondary ink */ --border: var(--tsb-border-ink); --ff-display: 'Cinzel Decorative', serif; --ff-heading: 'Cinzel', serif; --ff-body: 'EB Garamond', serif; --ff-ui: 'Inter', sans-serif; /* Premium-rounded, not playful: buttons/inputs 10px, cards 16px, modals 20px. */ --radius-btn: 10px; --radius-card: 16px; --radius-modal: 20px; /* On a light ground a heavy black shadow reads as dirt. These are shallow, violet-tinted and low-opacity; the glows become soft haloes rather than the light-emitting effect they had against near-black. */ --shadow-card: 0 6px 22px rgba(33,23,43,0.10), 0 0 0 1px var(--border); --glow-gold: 0 0 24px rgba(216,184,120,0.22), 0 0 56px rgba(185,169,214,0.10); --glow-violet: 0 0 24px rgba(185,169,214,0.25); } /* ── INVERSE SURFACES ──────────────────────────────────────────── The navbar, footer, mobile booking bar, home CTA and the About portrait panel stay Midnight Plum on the cream page. That is not decoration: logo-stacked-light.png and logo-horizontal-light.png are LIGHT artwork (mean luminance 213/255) with no dark variant in the repo, so they are only legible on a dark ground. Keeping these panels dark also gives the light page anchoring contrast at the top and bottom. Rather than rewrite every child rule, the tokens are redefined here. Anything inside these panels that reads --stardust / --mist / --gold picks up the light-on-dark values automatically. Text values are kept high — near-white body, bright lavender accent — because muted lavender-on-violet technically passes contrast but reads washed out (low hue contrast). The reveal overlays and tarot card faces (.hero-result-wrap, .ask-face-*, .ask-answer-inner) are also listed here: they stay dramatically dark by design and need the same light text. */ .navbar-tsb, .site-footer, footer, .mobile-book-bar, .cta-section, .split-left, .hero-result-wrap, .hero-rc-front, .hero-rc-back, .ask-face-front, .ask-face-back, .ask-answer-inner { --stardust: var(--tsb-cream); --mist: var(--tsb-lavender-pale); --gold: var(--tsb-gold); --gold-light: var(--tsb-gold-soft); --gold-dim: var(--tsb-gold-dim-dark); --void: var(--tsb-plum); /* ink on accent-filled buttons inside dark panels */ --border: rgba(216,184,120,0.28); } *, *::before, *::after { box-sizing: border-box; margin: 0; } html { scroll-behavior: smooth; } body { background: var(--void); color: var(--stardust); font-family: var(--ff-body); font-size: 1.1rem; line-height: 1.75; overflow-x: hidden; } ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--void); } ::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; } /* ─── STARFIELD ─────────────────────────────────────────────── */ .starfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 20% 50%, rgba(185,169,214,0.08) 0%, transparent 60%), radial-gradient(ellipse at 80% 20%, rgba(185,169,214,0.05) 0%, transparent 50%); } .starfield::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 10% 15%, rgba(33,23,43,0.33) 0%, transparent 100%), radial-gradient(1px 1px at 30% 5%, rgba(33,23,43,0.24) 0%, transparent 100%), radial-gradient(1px 1px at 50% 25%, rgba(33,23,43,0.30) 0%, transparent 100%), radial-gradient(1px 1px at 70% 10%, rgba(33,23,43,0.18) 0%, transparent 100%), radial-gradient(1px 1px at 85% 40%, rgba(33,23,43,0.33) 0%, transparent 100%), radial-gradient(1px 1px at 15% 60%, rgba(33,23,43,0.24) 0%, transparent 100%), radial-gradient(1px 1px at 42% 70%, rgba(33,23,43,0.30) 0%, transparent 100%), radial-gradient(1px 1px at 65% 55%, rgba(33,23,43,0.18) 0%, transparent 100%), radial-gradient(1px 1px at 90% 75%, rgba(33,23,43,0.33) 0%, transparent 100%), radial-gradient(1px 1px at 5% 85%, rgba(33,23,43,0.24) 0%, transparent 100%), radial-gradient(1px 1px at 25% 90%, rgba(33,23,43,0.18) 0%, transparent 100%), radial-gradient(1px 1px at 55% 95%, rgba(33,23,43,0.30) 0%, transparent 100%), radial-gradient(1px 1px at 78% 88%, rgba(33,23,43,0.24) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 38% 45%, rgba(185,169,214,0.7) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 62% 30%, rgba(185,169,214,0.5) 0%, transparent 100%), radial-gradient(1.5px 1.5px at 88% 60%, rgba(185,169,214,0.6) 0%, transparent 100%); } /* ─── SPACING SCALE ──────────────────────────────────────────── */ :root { --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2rem; --space-xl: 2.5rem; --space-2xl: 3rem; --space-3xl: 4rem; --space-4xl: 5rem; } /* ─── TYPOGRAPHY ─────────────────────────────────────────────── */ .ff-display { font-family: var(--ff-display); } .ff-heading { font-family: var(--ff-heading); } .ff-body { font-family: var(--ff-body); } .ff-ui { font-family: var(--ff-ui); } .text-gold { color: var(--gold); } .text-gold-light { color: var(--gold-light); } .text-mist { color: var(--mist); } .text-violet { color: var(--violet); } .text-rose { color: var(--rose-deep); } /* Standardized typography margins */ h1, h2, h3, h4, h5, h6 { margin-bottom: var(--space-md); } p { margin-bottom: var(--space-md); } .ornament { display: flex; align-items: center; gap: 1rem; color: var(--gold); font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; font-family: var(--ff-ui); } .ornament::before, .ornament::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); } .section-eyebrow { font-family: var(--ff-ui); font-size: 0.7rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-md); font-weight: 500; } /* ─── NAVBAR ────────────────────────────────────────────────── */ /* Solid rather than fading to transparent. The original faded out because it sat over a near-black hero; over the light Moonstone hero a fade would leave the light logo and light nav links stranded on a light ground. */ .navbar-tsb { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 1.25rem 0; background: rgba(33,23,43,0.93); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: all 0.4s ease; } .navbar-tsb.scrolled { background: rgba(33,23,43,0.97); border-bottom-color: var(--border); padding: 0.9rem 0; } .navbar-brand-tsb { font-family: var(--ff-heading); font-size: 1.1rem; letter-spacing: 0.12em; color: var(--gold-light) !important; text-decoration: none; } .navbar-brand-text { font-family: var(--ff-heading); font-size: 1.1rem; letter-spacing: 0.12em; color: var(--gold-light) !important; text-decoration: none; } .nav-link-tsb { font-family: var(--ff-ui); font-size: 0.72rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--mist) !important; text-decoration: none; padding: 0.4rem 1rem !important; transition: color 0.3s; position: relative; } .nav-link-tsb::after { content: ''; position: absolute; bottom: 0; left: 50%; right: 50%; height: 1px; background: var(--gold); transition: left 0.3s, right 0.3s; } .nav-link-tsb:hover { color: var(--gold-light) !important; } .nav-link-tsb:hover::after { left: 1rem; right: 1rem; } .nav-link-tsb.active { color: var(--gold-light) !important; } .nav-link-tsb.active::after { left: 1rem; right: 1rem; background: var(--gold); } .btn-nav-book { font-family: var(--ff-ui); font-size: 0.65rem; letter-spacing: 0.3em; text-transform: uppercase; color: #F8F2EA !important; background: linear-gradient(135deg, var(--tsb-plum-button), #21172B); border: 1px solid rgba(216,184,120,0.5); padding: 0.55rem 1.5rem; border-radius: var(--radius-btn); text-decoration: none; transition: box-shadow 0.3s, transform 0.3s; } .btn-nav-book:hover { box-shadow: 0 0 20px rgba(216,184,120,0.4); transform: translateY(-1px); color: #F8F2EA !important; } .navbar-toggler-tsb { background: none; border: 1px solid var(--border); padding: 0.4rem 0.6rem; color: var(--gold); } .navbar-toggler-tsb:focus { box-shadow: none; } /* Soft action — Rose/Lavender surface + Plum text; tertiary weight, used for selective in-card actions that shouldn't compete with the primary CTA. */ .btn-soft-tsb { font-family: var(--ff-ui); font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; padding: 0.7rem 1.75rem; border: 1px solid transparent; background: rgba(185,169,214,0.18); color: #21172B; border-radius: var(--radius-btn); cursor: pointer; display: inline-block; text-decoration: none; transition: background 0.3s, transform 0.3s; } .btn-soft-tsb:hover, .btn-soft-tsb:focus-visible { background: rgba(201,155,165,0.28); transform: translateY(-1px); } /* Focus states for accessibility */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* ─── HERO ──────────────────────────────────────────────────── */ .hero { min-height: min(92vh, 780px); padding: 6.5rem 0 3rem; display: flex; align-items: center; position: relative; background: radial-gradient(ellipse 140% 80% at 50% -20%, rgba(185,169,214,0.30) 0%, transparent 55%), radial-gradient(ellipse 80% 60% at 80% 30%, rgba(201,155,165,0.18) 0%, transparent 50%), radial-gradient(ellipse 60% 50% at 15% 70%, rgba(185,169,214,0.16) 0%, transparent 55%), radial-gradient(ellipse 120% 40% at 50% 110%, rgba(248,242,234,1) 0%, transparent 60%), linear-gradient(160deg,var(--tsb-cream-deep) 0%,var(--tsb-cream) 40%,var(--tsb-cream-deep) 100%); overflow: hidden; } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--gold-dim) 30%, var(--gold) 50%, var(--gold-dim) 70%, transparent 100%); } #nebulaCanvas { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .7; } .hero .container { position: relative; z-index: 2; } .hero-bg-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-family: var(--ff-display); font-size: clamp(5rem,18vw,16rem); font-weight: 900; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(185,169,214,0.06); white-space: nowrap; pointer-events: none; z-index: 1; user-select: none; line-height: 1; } .hero-card-visual { position: relative; z-index: 2; } .tarot-card-3d { width: 260px; height: 440px; background: linear-gradient(160deg, var(--arcane) 0%, var(--midnight) 100%); border: 1px solid var(--border); border-radius: 12px; margin: 0 auto; position: relative; box-shadow: var(--shadow-card), var(--glow-violet); animation: float 6s ease-in-out infinite; overflow: hidden; } .tarot-card-3d::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(185,169,214,0.3); border-radius: 8px; } .tarot-card-3d::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 30%, rgba(185,169,214,0.10) 0%, transparent 60%), radial-gradient(ellipse at 50% 80%, rgba(185,169,214,0.12) 0%, transparent 50%); } .tarot-card-inner { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem; } .tarot-star { font-size: 5rem; line-height: 1; filter: drop-shadow(0 0 20px rgba(185,169,214,0.6)); animation: pulse-glow 3s ease-in-out infinite; } .tarot-card-title { font-family: var(--ff-heading); font-size: 0.85rem; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); text-align: center; } .tarot-roman { font-family: var(--ff-display); font-size: 1.4rem; color: var(--gold-light); margin-top: auto; } .tarot-card-label { font-family: var(--ff-heading); font-size: 0.7rem; letter-spacing: 0.5em; color: var(--mist); text-align: center; margin-bottom: 0.5rem; } .tarot-card-back { width: 220px; height: 370px; background: linear-gradient(140deg, #F3EADC, #FCF7F0); border: 1px solid rgba(185,169,214,0.3); border-radius: 10px; position: absolute; top: 30px; right: -30px; animation: float 6s ease-in-out 1.5s infinite; box-shadow: 0 8px 26px rgba(33,23,43,0.16), var(--glow-violet); overflow: hidden; } .tarot-card-back::before { content: ''; position: absolute; inset: 6px; border: 1px solid rgba(185,169,214,0.25); border-radius: 6px; background: repeating-linear-gradient(45deg, transparent, transparent 8px, rgba(185,169,214,0.05) 8px, rgba(185,169,214,0.05) 9px); } @keyframes float { 0%, 100% { transform: translateY(0px) rotate(-2deg); } 50% { transform: translateY(-18px) rotate(-2deg); } } @keyframes pulse-glow { 0%, 100% { filter: drop-shadow(0 0 15px rgba(185,169,214,0.5)); } 50% { filter: drop-shadow(0 0 35px rgba(185,169,214,0.9)); } } .hero-content { position: relative; z-index: 2; } .hero-eyebrow { font-family: var(--ff-ui); font-size: 0.65rem; letter-spacing: 0.5em; text-transform: uppercase; color: #75552E; font-weight: 600; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 1rem; } .hero-eyebrow span { opacity: 0.5; } .hero-headline { font-family: var(--ff-display); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; line-height: 1.1; color: var(--stardust); margin-bottom: 0.5rem; } .hero-headline .accent { display: block; background: linear-gradient(135deg, var(--gold), var(--gold-light), var(--gold)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subhead { font-family: var(--ff-heading); font-size: 1rem; letter-spacing: 0.2em; color: var(--mist); margin-bottom: 1.5rem; } .hero-desc { font-family: var(--ff-body); font-size: 1.1rem; color: rgba(33,23,43,0.88); max-width: 480px; margin-bottom: 2.5rem; font-style: italic; } .btn-primary-tsb { font-family: var(--ff-ui); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: #F8F2EA; background: linear-gradient(135deg, var(--tsb-plum-button) 0%, #21172B 55%, #150D1C 100%); background-size: 200%; border: 1px solid rgba(216,184,120,0.5); padding: 1rem 2.5rem; border-radius: var(--radius-btn); text-decoration: none; display: inline-block; transition: background-position 0.4s, box-shadow 0.4s, transform 0.3s; box-shadow: 0 4px 20px rgba(33,23,43,0.35); } .btn-primary-tsb:hover { background-position: right; box-shadow: 0 6px 40px rgba(216,184,120,0.45); transform: translateY(-2px); color: #F8F2EA; } /* Secondary — Cream/transparent surface, Plum text, Gold border. Plum text (rather than gold-on-transparent) keeps this readable wherever it sits, including directly on cream section backgrounds. */ .btn-ghost-tsb { font-family: var(--ff-ui); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: #21172B; font-weight: 600; background: transparent; border: 1px solid var(--gold-dim); padding: 1rem 2.5rem; border-radius: var(--radius-btn); text-decoration: none; display: inline-block; transition: border-color 0.3s, box-shadow 0.3s, background 0.3s; } .btn-ghost-tsb:hover { border-color: var(--gold); background: rgba(216,184,120,0.12); box-shadow: 0 0 20px rgba(185,169,214,0.15); } .hero-stats { display: flex; gap: 2.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); } .hero-stat-num { font-family: var(--ff-display); font-size: 1.8rem; color: var(--gold); line-height: 1; } .hero-stat-label { font-family: var(--ff-ui); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--mist); margin-top: 0.3rem; } .hero-scroll-hint { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; font-family: var(--ff-ui); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: #75552E; animation: bounce 2s ease-in-out infinite; } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(6px); } } /* ─── MARQUEE ───────────────────────────────────────────────── */ .marquee-belt { background: linear-gradient(135deg, #FCF7F0, var(--arcane), #FCF7F0); padding: 0.75rem 0; overflow: hidden; border-top: 1px solid rgba(185,169,214,0.15); border-bottom: 1px solid rgba(185,169,214,0.15); } .marquee-track { display: flex; gap: 0; width: max-content; animation: marquee 25s linear infinite; } .marquee-item { font-family: var(--ff-ui); font-size: 0.65rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--mist); padding: 0 2.5rem; white-space: nowrap; } .marquee-sep { color: rgba(92,80,96,0.35); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ─── SECTIONS ───────────────────────────────────────────────── */ section { position: relative; z-index: 1; } .section-pad { padding: 6rem 0; } .section-pad-lg { padding: 8rem 0; } /* ─── ABOUT ──────────────────────────────────────────────────── */ .about-section { background: linear-gradient(180deg, var(--void) 0%, var(--midnight) 100%); } .about-portrait { width: 100%; max-width: 400px; aspect-ratio: 3/4; background: linear-gradient(160deg, var(--arcane) 0%, var(--veil) 100%); border: 1px solid var(--border); border-radius: 4px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .about-portrait::before { content: '✦'; font-size: 8rem; color: rgba(185,169,214,0.15); position: absolute; } .about-portrait-placeholder { font-size: 6rem; filter: drop-shadow(0 0 30px rgba(185,169,214,0.5)); z-index: 1; } .about-portrait-frame { position: absolute; top: -12px; left: -12px; right: -12px; bottom: -12px; border: 1px solid rgba(185,169,214,0.15); border-radius: 4px; pointer-events: none; } .about-portrait-frame::before { content: '✦'; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); color: var(--gold); font-size: 0.9rem; background: var(--void); padding: 0 0.5rem; } .about-badge { position: absolute; bottom: -20px; right: -20px; width: 90px; height: 90px; background: linear-gradient(135deg, var(--violet), var(--rose)); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(185,169,214,0.4); } .about-badge-num { font-family: var(--ff-display); font-size: 1.3rem; color: var(--stardust); line-height: 1; } .about-badge-text { font-family: var(--ff-ui); font-size: 0.45rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(33,23,43,0.8); text-align: center; } .about-headline { font-family: var(--ff-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); color: var(--stardust); line-height: 1.2; margin-bottom: 1.5rem; } .about-skills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0; } .skill-chip { font-family: var(--ff-ui); font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); padding: 0.3rem 0.85rem; background: rgba(185,169,214,0.05); } /* ─── SERVICES ───────────────────────────────────────────────── */ .services-section { background: var(--midnight); } .services-section::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); } .services-section::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-dim), transparent); } .service-card { background: var(--arcane); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.5rem; position: relative; transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s; overflow: hidden; height: 100%; display: flex; flex-direction: column; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: 0; transition: opacity 0.4s; } .service-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(185,169,214,0.07) 0%, transparent 60%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card), var(--glow-gold); border-color: rgba(185,169,214,0.35); } .service-card:hover::before, .service-card:hover::after { opacity: 1; } .service-icon { font-size: 1.75rem; margin-bottom: 0.85rem; display: block; color: var(--gold); filter: drop-shadow(0 0 10px rgba(185,169,214,0.4)); } .service-num { font-family: var(--ff-heading); font-size: 0.65rem; letter-spacing: 0.4em; color: var(--gold-dim); margin-bottom: 1rem; display: block; } .service-title { font-family: var(--ff-heading); font-size: 1.05rem; line-height: 1.3; color: var(--gold-light); margin-bottom: 0.5rem; letter-spacing: 0.05em; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .service-desc-wrap { margin-bottom: 0.85rem; min-height: calc(1.6em * 2); } .service-desc { font-size: 0.85rem; color: rgba(33,23,43,0.8); line-height: 1.55; margin-bottom: 0; } .service-desc.is-clamped { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .service-desc.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; } .service-desc-toggle { display: block; background: none; border: none; padding: 0; margin-top: 0.4rem; color: var(--gold); font-family: var(--ff-ui); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; } .service-desc-toggle:hover, .service-desc-toggle:focus-visible { color: var(--gold-light); text-decoration: underline; } .service-price { font-family: var(--ff-heading); font-size: 1.15rem; color: var(--gold); font-weight: 600; } .service-price-label { font-family: var(--ff-ui); font-size: 0.6rem; letter-spacing: 0.2em; color: var(--mist); text-transform: uppercase; display: block; margin-top: 0.2rem; } .service-card-actions { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .service-cta { font-family: var(--ff-ui); font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 0.5rem; background: none; border: none; padding: 0; cursor: pointer; transition: gap 0.3s, color 0.3s; } .service-cta:hover, .service-cta:focus-visible { gap: 1rem; color: var(--gold-light); } .service-cta:focus-visible, .service-desc-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .badge-popular { position: absolute; top: 1rem; right: 1rem; font-family: var(--ff-ui); font-size: 0.55rem; letter-spacing: 0.3em; text-transform: uppercase; color: #21172B; background: linear-gradient(135deg, var(--gold-bright), var(--gold-soft)); padding: 0.25rem 0.75rem; border-radius: 999px; } /* Controlled card-to-card colour variation across the reading grid — cream+gold border by default, every 2nd card a soft rose surface, every 3rd a soft lavender surface. Text stays plum throughout; only the surface shifts. */ .row.g-4 > div:nth-of-type(3n+2) .service-card:not(.service-card-viewall) { background: rgba(201,155,165,0.12); border-color: rgba(201,155,165,0.35); } .row.g-4 > div:nth-of-type(3n) .service-card:not(.service-card-viewall) { background: rgba(185,169,214,0.14); border-color: rgba(185,169,214,0.35); } /* View All Services — 6th card in the homepage grid, styled as a CTA rather than a reading */ .service-card-viewall { align-items: center; text-align: center; justify-content: center; text-decoration: none; border-style: dashed; background: var(--midnight); } .service-card-viewall .service-icon { margin-bottom: 0.65rem; } .service-card-viewall .service-title { color: var(--gold-light); min-height: 0; -webkit-line-clamp: unset; } .service-card-viewall .service-desc { text-align: center; -webkit-line-clamp: unset; } .service-card-actions-viewall { border-top: none; padding-top: 0.9rem; justify-content: center; } .service-card-viewall:hover { border-color: var(--gold); } .service-card-viewall:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ─── TESTIMONIALS ───────────────────────────────────────────── */ /* Homepage QA: process-section above is flat --midnight, and this gradient used to start on that exact same --midnight, so the seam between the two sections vanished (identical color both sides). Starting on --veil instead keeps the existing token but restores a visible boundary. */ .testimonials-section { background: linear-gradient(180deg, var(--veil) 0%, var(--midnight) 55%, var(--veil) 100%); position: relative; } .testimonials-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 100% 50% at 20% 50%, rgba(185,169,214,0.10) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 80% 50%, rgba(201,155,165,0.07) 0%, transparent 60%); pointer-events: none; } .testimonial-card { background: rgba(185,169,214,0.22); border: 1px solid var(--border); padding: var(--space-lg); position: relative; height: 100%; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease; border-radius: var(--radius-card); } .testimonial-card::before { content: '"'; font-family: var(--ff-display); font-size: 5rem; color: var(--gold); opacity: 0.15; position: absolute; top: 0.5rem; left: 1.5rem; line-height: 1; } .testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); } .testimonial-text { font-style: italic; font-size: 1rem; color: rgba(33,23,43,0.8); line-height: 1.8; margin-bottom: 1.5rem; position: relative; z-index: 1; } .testimonial-author { display: flex; align-items: center; gap: 1rem; } .testimonial-avatar { width: 44px; height: 44px; background: linear-gradient(135deg, var(--tsb-plum-light), var(--tsb-rose-deep)); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--ff-heading); font-size: 1rem; color: var(--tsb-cream-card); flex-shrink: 0; } .testimonial-name { font-family: var(--ff-heading); font-size: 0.85rem; color: var(--gold-light); letter-spacing: 0.05em; } .testimonial-loc { font-family: var(--ff-ui); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); } .stars { color: var(--gold); font-size: 0.8rem; letter-spacing: 0.1em; } /* ─── HOW IT WORKS ───────────────────────────────────────────── */ .process-section { background: var(--midnight); } .process-connector { position: absolute; top: 3.5rem; left: calc(50% + 3rem); right: calc(-50% + 3rem); height: 1px; background: linear-gradient(90deg, var(--gold-dim), transparent); } .process-num-wrap { width: 72px; height: 72px; border: 1px solid var(--gold-dim); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; position: relative; background: var(--arcane); box-shadow: var(--glow-violet); } .process-num { font-family: var(--ff-display); font-size: 1.3rem; color: var(--gold); } .process-step { text-align: center; padding: 2rem 1rem; position: relative; } .process-title { font-family: var(--ff-heading); font-size: 1rem; color: var(--stardust); margin-bottom: 0.5rem; letter-spacing: 0.05em; } .process-desc { font-size: 0.9rem; color: var(--mist); line-height: 1.6; } /* ─── ZODIAC WHEEL ───────────────────────────────────────────── */ .zodiac-section { background: var(--void); overflow: hidden; } .zodiac-wheel { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; } .zodiac-item { text-align: center; padding: 2rem 1rem; border: 1px solid var(--border); cursor: default; transition: background 0.3s, border-color 0.3s; margin: -1px 0 0 -1px; } .zodiac-item:hover { background: rgba(185,169,214,0.05); border-color: rgba(185,169,214,0.3); z-index: 1; } .zodiac-glyph { font-size: 2rem; display: block; margin-bottom: 0.5rem; } .zodiac-name { font-family: var(--ff-heading); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mist); } /* ════════════════════════════════════════════════════════════════ CONTACT PAGE - PROFESSIONAL BOOTSTRAP DESIGN ════════════════════════════════════════════════════════════════ */ /* ─── RESPONSIVE PADDING ────────────────────────────────────────────── */ .py-7 { padding-top: 5rem !important; padding-bottom: 5rem !important; } @media (max-width: 991.98px) { .py-lg-7 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; } } /* ─── TYPOGRAPHY ────────────────────────────────────────────────────── */ .fw-300 { font-weight: 300; } .fw-600 { font-weight: 600; } .text-gold { color: var(--gold) !important; } .display-4 { font-family: var(--ff-heading); letter-spacing: -0.02em; } .h2 { font-family: var(--ff-heading); } /* ─── CONTACT — two-column composition (channels + form) ─────────────── Left: contact channels as a simple linked list (not stacked cards) plus a short reassurance line and a subtle celestial line-art detail. Right: the booking-style form, uncluttered, no ticket-system chrome. */ .contact-channels-col { position: relative; height: 100%; } .contact-celestial-deco { position: absolute; top: -1.5rem; right: -1rem; width: 120px; height: 120px; opacity: 0.5; pointer-events: none; z-index: 0; } .contact-reassurance { color: var(--mist); font-size: 1rem; line-height: 1.7; max-width: 34rem; margin-bottom: var(--space-xl); position: relative; z-index: 1; } .contact-channel-list { margin: 0 0 var(--space-xl); padding: 0; border-top: 1px solid var(--border); } .contact-channel-item { border-bottom: 1px solid var(--border); } .contact-channel-link { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) 0.25rem; color: inherit; text-decoration: none; transition: padding-left 0.25s ease, color 0.25s ease; } .contact-channel-link:hover { color: inherit; padding-left: 0.5rem; } .contact-channel-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-btn); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--gold); background: var(--veil); border: 1px solid var(--border); transition: border-color 0.25s ease, box-shadow 0.25s ease; } .contact-channel-link:hover .contact-channel-icon { border-color: var(--gold-dim); box-shadow: var(--glow-gold); } .contact-channel-label { display: block; font-family: var(--ff-heading); font-size: 1rem; color: var(--stardust); margin-bottom: 0.15rem; } .contact-channel-detail { display: block; font-size: 0.85rem; color: var(--mist); } .contact-hours { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: baseline; font-size: 0.85rem; color: var(--mist); } .contact-hours-label { font-family: var(--ff-ui); font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); } .contact-form-col { background: var(--veil); border: 1px solid var(--border); border-radius: var(--radius-card); padding: var(--space-xl) var(--space-xl); box-shadow: var(--shadow-card); } .tsb-form .form-label { font-family: var(--ff-ui); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: 0.4rem; } .tsb-form .form-control { background: var(--void); border: 1px solid var(--border); color: var(--stardust); border-radius: var(--radius-btn); padding: 0.65rem 0.9rem; } .tsb-form .form-control:focus { border-color: var(--gold-dim); box-shadow: 0 0 0 0.2rem rgba(216,184,120,0.15); background: var(--void); color: var(--stardust); } .tsb-form .form-control::placeholder { color: rgba(33,23,43,0.4); } .tsb-form button[type="submit"] { border: 1px solid rgba(216,184,120,0.5); cursor: pointer; } /* ─── RESPONSIVE ADJUSTMENTS ────────────────────────────────────────── */ @media (max-width: 767.98px) { .hero-section { padding: 3rem 0 !important; } .display-4 { font-size: 1.75rem; } .lead { font-size: 0.95rem !important; } .contact-form-col { padding: var(--space-lg); } .contact-celestial-deco { display: none; } } /* ─── FAQ SECTION — Bootstrap 5 Accordion ─────────────────────────────── Rebuilt on Bootstrap's native accordion component (data-bs-toggle= "collapse") instead of a hand-rolled .open toggle. Cream collapsed surface, Plum heading, Gold divider, soft Lavender/Rose tint on the expanded item — same brand tokens as the rest of the page. */ .tsb-faq-accordion .accordion-item { background-color: var(--veil); border: 1px solid var(--border); border-radius: var(--radius-card) !important; overflow: hidden; margin-bottom: 1rem; } .tsb-faq-accordion .accordion-item:last-child { margin-bottom: 0; } .tsb-faq-accordion .accordion-button { font-family: var(--ff-heading); font-size: 1rem; font-weight: 500; color: var(--stardust); background-color: transparent; padding: 1.25rem 1.5rem; box-shadow: none; } .tsb-faq-accordion .accordion-button:focus { box-shadow: none; outline: 2px solid var(--gold); outline-offset: -2px; } .tsb-faq-accordion .accordion-button:hover { color: var(--gold); } .tsb-faq-accordion .accordion-button:not(.collapsed) { color: var(--gold); background: linear-gradient(135deg, rgba(185,169,214,0.14), rgba(201,155,165,0.10)); box-shadow: inset 0 -1px 0 var(--gold-dim); } /* Custom plus/rotate marker instead of Bootstrap's default chevron image, so the accent colour stays on-brand (gold) in both states. */ .tsb-faq-accordion .accordion-button::after { background-image: none; content: '+'; font-size: 1.3rem; line-height: 1; color: var(--gold); width: auto; height: auto; transform: none; transition: transform 0.3s ease; } .tsb-faq-accordion .accordion-button:not(.collapsed)::after { content: '+'; transform: rotate(45deg); } .tsb-faq-accordion .accordion-body { padding: 0 1.5rem 1.5rem; font-size: 0.95rem; color: var(--mist); line-height: 1.75; border-top: 1px solid var(--border); padding-top: 0.9rem; } /* ─── CTA ────────────────────────────────────────────────────── */ .cta-section { background: linear-gradient(135deg, rgba(185,169,214,0.18) 0%, transparent 50%, rgba(185,169,214,0.08) 100%), linear-gradient(180deg,#2A1D36 0%,#21172B 100%); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); text-align: center; padding: 6rem 0; } .cta-title { font-family: var(--ff-display); font-size: clamp(1.8rem, 4vw, 3.2rem); color: var(--stardust); margin-bottom: 1rem; } .cta-subtitle { font-family: var(--ff-body); font-style: italic; font-size: 1.2rem; color: var(--mist); margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; } .cta-note { font-family: var(--ff-ui); font-size: 0.65rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold-dim); margin-top: 1.5rem; } /* ─── FOOTER ────────────────────────────────────────────────── */ footer { background: linear-gradient(180deg, #2A1D36 0%, #21172B 100%); border-top: 1px solid var(--border); padding: 4rem 0 2rem; } footer .container { padding-left: clamp(1.5rem, 5vw, 3rem) !important; padding-right: clamp(1.5rem, 5vw, 3rem) !important; } /* --void is the LIGHT page ground under Moonstone, so the footer sets its own deep-violet background explicitly - inheriting var(--void) here would have produced a light footer carrying light-on-dark text and a light logo. */ .footer-brand { font-family: var(--ff-heading); font-size: 1.4rem; color: var(--gold-light); letter-spacing: 0.08em; margin-bottom: 1rem; } .footer-tagline { font-size: 0.95rem; font-style: italic; color: var(--mist); max-width: 280px; line-height: 1.65; font-weight: 500; } .footer-heading { font-family: var(--ff-ui); font-size: 0.6rem; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.25rem; } .footer-links { list-style: none; padding: 0; } .footer-links li { margin-bottom: 0.6rem; } .footer-links a { font-family: var(--ff-ui); font-size: 0.8rem; color: var(--mist); font-weight: 500; text-decoration: none; letter-spacing: 0.05em; transition: color 0.3s; } .footer-links a:hover { color: var(--gold-light); } .footer-social { display: flex; gap: 1rem; margin-top: 1.5rem; } .footer-social-link { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--mist); text-decoration: none; font-size: 1rem; transition: border-color 0.3s, color 0.3s, background 0.3s, box-shadow 0.3s; } .footer-social-link:hover { border-color: var(--gold-dim); color: var(--gold); background: rgba(185,169,214,0.08); box-shadow: 0 0 15px rgba(185,169,214,0.15); } .footer-bottom { padding-top: 2rem; margin-top: 3rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } .footer-copy { font-family: var(--ff-ui); font-size: 0.65rem; letter-spacing: 0.15em; color: rgba(243,237,230,0.9); } .footer-magic { font-family: var(--ff-heading); font-size: 0.7rem; letter-spacing: 0.3em; color: var(--gold-dim); } /* ─── CONTAINER & LAYOUT ─────────────────────────────────────── */ .container { padding-left: clamp(1.5rem, 5vw, 3rem) !important; padding-right: clamp(1.5rem, 5vw, 3rem) !important; max-width: 1200px !important; } .section-pad { padding: clamp(3rem, 8vh, 5rem) 0; } .section-pad-lg { padding: clamp(4rem, 10vh, 7rem) 0; } /* ─── UTILITIES ──────────────────────────────────────────────── */ .section-title { font-family: var(--ff-display); font-size: clamp(1.8rem, 3.5vw, 2.8rem); color: var(--stardust); line-height: 1.2; margin-bottom: var(--space-lg); } .section-intro { font-size: 1.05rem; font-style: italic; color: rgba(33,23,43,0.72); max-width: 560px; line-height: 1.8; } .gold-line { width: 60px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); margin: var(--space-lg) 0; } .w-100 { width: 100% !important; } /* ─── ANIMATIONS ────────────────────────────────────────────── */ .fade-up { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; } .fade-up.visible { opacity: 1; transform: translateY(0); } .fade-up-delay-1 { transition-delay: 0.1s; } .fade-up-delay-2 { transition-delay: 0.2s; } .fade-up-delay-3 { transition-delay: 0.3s; } .fade-up-delay-4 { transition-delay: 0.4s; } .fade-up-delay-5 { transition-delay: 0.5s; } /* Single-page checkout animations */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.2,.8,.2,1); } .fade-in[style*="display: block"] { opacity: 1; transform: translateY(0); } /* ─── PRELOADER ──────────────────────────────────────────────── */ .preloader { position: fixed; inset: 0; z-index: 9999; background: var(--void); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; transition: opacity 0.6s ease, visibility 0.6s ease; } .preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .preloader-card { width: 56px; height: 90px; border: 1px solid var(--gold); border-radius: 6px; position: relative; animation: preloader-flip 1.6s ease-in-out infinite; box-shadow: var(--glow-gold); } .preloader-card::before { content: '✦'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--gold); font-size: 1.3rem; } @keyframes preloader-flip { 0%, 100% { transform: rotateY(0deg); } 50% { transform: rotateY(180deg); } } .preloader-text { font-family: var(--ff-ui); font-size: 0.6rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--mist); } /* ─── SCROLL PROGRESS ───────────────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--violet), var(--gold), var(--rose)); width: 0%; z-index: 1100; box-shadow: 0 0 12px rgba(185,169,214,0.6); transition: width 0.1s linear; } /* ─── GEO BANNER ────────────────────────────────────────────── */ .geo-banner { background: linear-gradient(90deg, var(--arcane), var(--veil), var(--arcane)); color: var(--stardust); font-family: var(--ff-ui); font-size: 0.72rem; letter-spacing: 0.05em; text-align: center; padding: 0.55rem 1rem; position: relative; z-index: 1050; display: flex; align-items: center; justify-content: center; gap: 0.6rem; flex-wrap: wrap; } .geo-banner strong { font-weight: 700; color: var(--gold-light); } .geo-banner-close { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--stardust); opacity: 0.6; cursor: pointer; font-size: 0.9rem; line-height: 1; padding: 0.2rem; } .geo-banner-close:hover { opacity: 1; } /* ─── CURSOR ORB ─────────────────────────────────────────────── */ .cursor-orb { position: fixed; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(185,169,214,0.08) 0%, rgba(185,169,214,0.05) 40%, transparent 70%); pointer-events: none; z-index: 1; transform: translate(-50%, -50%); transition: opacity 0.4s ease; opacity: 0; } .cursor-orb.active { opacity: 1; } /* ─── LIVE STRIP ─────────────────────────────────────────────── */ .live-strip { background: rgba(185,169,214,0.26); border-top: 1px solid rgba(201,155,165,0.2); border-bottom: 1px solid rgba(201,155,165,0.2); padding: 0.7rem 0; text-align: center; position: relative; z-index: 1; } .live-dot { width: 8px; height: 8px; background: #D8B878; border-radius: 50%; display: inline-block; margin-right: 0.5rem; animation: live-pulse 1.5s ease-in-out infinite; box-shadow: 0 0 8px #D8B878; } @keyframes live-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } } .live-text { font-family: var(--ff-ui); font-size: 0.75rem; letter-spacing: 0.05em; color: var(--mist); } .live-text strong { color: var(--gold-light); } /* ─── FLOAT WHATSAPP ─────────────────────────────────────────── */ .float-whatsapp { position: fixed; bottom: 1.75rem; right: 1.75rem; width: 60px; height: 60px; background: linear-gradient(135deg, #25D366, #1FAF53); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; text-decoration: none; box-shadow: 0 6px 24px rgba(37,211,102,0.45); z-index: 999; animation: float-wa-pulse 2.4s ease-in-out infinite; transition: transform 0.3s; } .float-whatsapp:hover { transform: scale(1.1); color: #fff; } .float-whatsapp::before { content: ''; position: absolute; inset: -6px; border: 1px solid rgba(37,211,102,0.4); border-radius: 50%; animation: float-wa-ring 2.4s ease-out infinite; } @keyframes float-wa-pulse { 0%, 100% { box-shadow: 0 6px 24px rgba(37,211,102,0.45); } 50% { box-shadow: 0 6px 32px rgba(37,211,102,0.75); } } @keyframes float-wa-ring { 0% { transform: scale(1); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } } /* ─── MOBILE BOOK BAR ────────────────────────────────────────── */ .mobile-book-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(33,23,43,0.94); backdrop-filter: blur(12px); border-top: 1px solid var(--border); padding: 0.7rem 1rem; z-index: 998; align-items: center; justify-content: center; } /* ─── REVEAL VARIANTS ────────────────────────────────────────── */ .reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(.2,.8,.2,1); } .reveal-scale.visible { opacity: 1; transform: scale(1); } .reveal-blur { opacity: 0; filter: blur(10px); transform: translateY(20px); transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease; } .reveal-blur.visible { opacity: 1; filter: blur(0); transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1); } .reveal-left.visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2,.8,.2,1); } .reveal-right.visible { opacity: 1; transform: translateX(0); } .gold-line.shimmer { position: relative; overflow: hidden; } .gold-line.shimmer::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); animation: shimmer-sweep 2.5s ease-in-out infinite; } @keyframes shimmer-sweep { 0% { left: -100%; } 50% { left: 100%; } 100% { left: 100%; } } .service-card .service-icon { transition: transform 0.5s cubic-bezier(.2,.8,.2,1); display: inline-block; } .service-card:hover .service-icon { transform: rotate(-8deg) scale(1.15); } .skill-chip { transition: background 0.3s, color 0.3s, transform 0.3s, box-shadow 0.3s; cursor: default; } .skill-chip:hover { background: var(--gold); color: var(--void); transform: translateY(-3px); box-shadow: 0 6px 18px rgba(185,169,214,0.3); } .testi-dots { display: flex; gap: 0.5rem; justify-content: center; margin-top: 2.5rem; } .testi-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold-dim); cursor: pointer; transition: background 0.3s, transform 0.3s; border: none; padding: 0; } .testi-dot.active { background: var(--gold); transform: scale(1.3); } .testimonial-card { transition: transform 0.5s ease, opacity 0.5s ease, box-shadow 0.4s ease; } .testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); } /* ─── REDUCED MOTION ─────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .tarot-card-3d, .tarot-card-back, .tarot-star, .hero-scroll-hint, .marquee-track, .float-whatsapp, .float-whatsapp::before, .live-dot, .chart-ring, .ornate-symbol, .portrait-glyph, .strip-scroll { animation: none; } .fade-up, .reveal-scale, .reveal-blur, .reveal-left, .reveal-right { opacity: 1; transform: none; filter: none; transition: none; } .stack-section { position: static; } .crystal-cursor { display: none !important; } } /* ─── RESPONSIVE ─────────────────────────────────────────────── */ @media (max-width: 991.98px) { .tarot-card-back { display: none; } .process-connector { display: none; } .zodiac-wheel { grid-template-columns: repeat(4, 1fr); } .hero-stats { gap: 1.5rem; } .container { padding-left: 2rem !important; padding-right: 2rem !important; } } @media (max-width: 767.98px) { .section-pad { padding: 2.5rem 0; } .section-pad-lg { padding: 3.5rem 0; } .zodiac-wheel { grid-template-columns: repeat(3, 1fr); } .hero-card-visual { display: none; } .hero-stats { flex-wrap: wrap; gap: 1.5rem; } /* ── Homepage QA: hero was min(92vh,780px) + flex vertical-centering, which on short mobile screens pushed the Book a Reading CTA below the fold even though the section itself fit. Let content set the height and start from the top so eyebrow → headline → CTA reach the fold. ── */ .hero { min-height: 0; padding: 2.5rem 0 2.25rem; align-items: flex-start; } .hero-eyebrow { margin-bottom: 1rem; } .hero-headline { margin-bottom: 0.75rem; } .hero-desc { margin-bottom: 1.5rem; } .hero-ask-wrap { margin-bottom: 1.25rem; } .footer-bottom { flex-direction: column; text-align: center; } .mobile-book-bar { display: flex; } body { padding-bottom: 76px; } .float-whatsapp { bottom: 5.5rem; width: 52px; height: 52px; font-size: 1.4rem; } .cursor-orb { display: none; } .stack-section { position: static !important; } .split-left { min-height: 50vw; } .service-card { padding: 1.4rem 1.25rem; } .service-icon { font-size: 1.6rem; margin-bottom: 0.85rem; } .service-title { font-size: 1rem; margin-bottom: 0.5rem; } .service-desc { font-size: 0.82rem; line-height: 1.55; } .service-desc.is-clamped { -webkit-line-clamp: 3; } .service-desc-wrap { margin-bottom: 0.85rem; } .service-price { margin-bottom: 0.85rem; } .service-cta { font-size: 0.65rem; } .services-section { padding: 3rem 0 4rem; } /* Single-page booking mobile */ .reading-grid { grid-template-columns: 1fr; } .reading-card-inner { flex-direction: column; text-align: center; gap: 1rem; } .reading-card-price { text-align: center; } .reading-detail-row { flex-direction: column; align-items: flex-start; gap: .5rem; } .detail-value { text-align: left; } .container { padding-left: 1.25rem !important; padding-right: 1.25rem !important; } } @media (max-width: 575.98px) { .zodiac-wheel { grid-template-columns: repeat(3, 1fr); } .service-card { padding: 1.1rem 1rem; } .service-title { font-size: 0.95rem; } .service-desc { font-size: 0.78rem; } } @media (min-width: 768px) { .mobile-book-bar { display: none !important; } } /* ════════════════════════════════════════════════════════════════ AUGURY + SYNASTRY ADDITIONS ════════════════════════════════════════════════════════════════ */ /* ── BIRTH CHART ─────────────────────────────────────────────── */ .birth-chart-section { background: linear-gradient(180deg, var(--midnight) 0%, var(--veil) 100%); padding: 6rem 0; position: relative; overflow: hidden; } .birth-chart-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(185,169,214,0.08) 0%, transparent 70%); } .chart-wheel-wrap { position: relative; width: 380px; height: 380px; margin: 0 auto; } .chart-ring { position: absolute; border-radius: 50%; border: 1px solid; top: 50%; left: 50%; transform: translate(-50%,-50%); } .chart-ring-1 { width: 100%; height: 100%; border-color: rgba(185,169,214,0.25); animation: spin-slow 60s linear infinite; } .chart-ring-2 { width: 80%; height: 80%; border-color: rgba(185,169,214,0.30); animation: spin-slow 40s linear infinite reverse; } .chart-ring-3 { width: 60%; height: 60%; border-color: rgba(201,155,165,0.25); animation: spin-slow 25s linear infinite; } .chart-ring-4 { width: 40%; height: 40%; border-color: rgba(185,169,214,0.20); animation: spin-slow 15s linear infinite reverse; } .chart-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(185,169,214,0.15) 0%, transparent 70%); display: flex; align-items: center; justify-content: center; font-size: 2rem; box-shadow: 0 0 40px rgba(185,169,214,0.2), 0 0 80px rgba(185,169,214,0.1); } @keyframes spin-slow { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } } .chart-glyph { position: absolute; top: 50%; left: 50%; font-size: 1rem; color: var(--gold); transform-origin: 0 0; font-family: var(--ff-heading); filter: drop-shadow(0 0 6px rgba(185,169,214,0.5)); } /* ── PORTRAIT ───────────────────────────────────────────────── */ .portrait-svg-wrap { position: relative; max-width: 330px; margin: 0 auto; } /* The corner-bracket frame is decorative and must sit ON TOP of the portrait. With no rule at all it flowed inline and added ~520px of blank height above the image, which is what made the About section span more than one screen. */ .portrait-frame-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; } .portrait-bg { width: 100%; aspect-ratio: 4/5; background: linear-gradient(160deg, var(--tsb-plum-light) 0%, var(--tsb-plum-soft) 100%); border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .portrait-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(185,169,214,0.3) 0%, transparent 60%), radial-gradient(ellipse at 50% 100%, rgba(185,169,214,0.1) 0%, transparent 50%); } .portrait-orbs { position: absolute; inset: 0; background-image: radial-gradient(circle 2px at 20% 30%, rgba(185,169,214,0.6) 0%, transparent 100%), radial-gradient(circle 1px at 70% 15%, rgba(248,242,234,0.5) 0%, transparent 100%), radial-gradient(circle 1.5px at 85% 60%, rgba(185,169,214,0.4) 0%, transparent 100%), radial-gradient(circle 1px at 40% 80%, rgba(248,242,234,0.32) 0%, transparent 100%), radial-gradient(circle 2px at 10% 75%, rgba(185,169,214,0.5) 0%, transparent 100%), radial-gradient(circle 1px at 60% 45%, rgba(248,242,234,0.4) 0%, transparent 100%); } .portrait-silhouette { position: relative; z-index: 1; text-align: center; } .portrait-glyph { font-size: clamp(5rem, 12vw, 9rem); filter: drop-shadow(0 0 30px rgba(185,169,214,0.5)) drop-shadow(0 0 60px rgba(185,169,214,0.3)); display: block; animation: portrait-float 5s ease-in-out infinite; } @keyframes portrait-float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-12px) scale(1.03); } } /* ── HOROSCOPE WIDGET ───────────────────────────────────────── */ .horoscope-panel { background: var(--arcane); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 0; overflow: hidden; } .hp-tab-row { display: flex; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: none; } .hp-tab-row::-webkit-scrollbar { display: none; } .hp-tab { flex-shrink: 0; padding: .65rem 1rem; font-family: var(--ff-ui); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--mist); cursor: pointer; border-right: 1px solid var(--border); transition: background .3s, color .3s; white-space: nowrap; } .hp-tab:last-child { border-right: none; } .hp-tab.active { color: var(--gold); background: rgba(185,169,214,.06); } .hp-content { padding: 2rem; min-height: 200px; } .hp-panel { display: none; } .hp-panel.active { display: block; } .hp-sign-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .hp-glyph { font-size: 2.5rem; filter: drop-shadow(0 0 12px rgba(185,169,214,0.5)); } .hp-sign-name { font-family: var(--ff-heading); font-size: 1.2rem; color: var(--gold-light); } .hp-dates { font-family: var(--ff-ui); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--mist); } .hp-text { font-style: italic; color: rgba(33,23,43,.75); line-height: 1.85; font-size: .97rem; } .hp-energy-row { display: flex; gap: 1.5rem; margin-top: 1.25rem; } .hp-energy { text-align: center; } .hp-energy-label { font-family: var(--ff-ui); font-size: .55rem; letter-spacing: .3em; text-transform: uppercase; color: var(--mist); margin-bottom: .3rem; } .hp-energy-bar { width: 50px; height: 3px; background: var(--arcane); border-radius: 2px; overflow: hidden; } .hp-energy-fill { height: 100%; border-radius: 2px; } /* ── LOVE COMPATIBILITY ─────────────────────────────────────── */ .compat-section { background: var(--void); padding: 6rem 0; position: relative; overflow: hidden; } .compat-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 50%, rgba(201,155,165,0.10) 0%, transparent 60%), radial-gradient(ellipse at 70% 50%, rgba(185,169,214,0.10) 0%, transparent 60%); } /* Card surface holding the whole tool — Cream ground, Gold detail, so the selects/button/result read as one composed instrument instead of loose controls sitting directly on the section background. */ .compat-card { background: var(--veil); border: 1px solid rgba(216,184,120,.3); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: var(--space-2xl) var(--space-xl); position: relative; overflow: hidden; } .compat-select-label { font-family: var(--ff-ui); font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; display: block; margin-bottom: .5rem; } .compat-select-label-lavender { color: var(--gold-light); } .compat-select-label-rose { color: var(--rose-deep); } .compat-orbs { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 3rem; } .compat-orb { width: 160px; height: 160px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; } .compat-orb-1 { background: radial-gradient(circle at 60% 40%, rgba(201,155,165,0.5), rgba(185,169,214,0.6)); border: 1px solid rgba(201,155,165,0.4); box-shadow: -20px 0 60px rgba(201,155,165,0.2); z-index: 2; transform: translateX(30px); } .compat-orb-2 { background: radial-gradient(circle at 40% 60%, rgba(185,169,214,0.5), rgba(185,169,214,0.30)); border: 1px solid rgba(185,169,214,0.4); box-shadow: 20px 0 60px rgba(185,169,214,0.2); z-index: 1; transform: translateX(-30px); } .compat-orb-icon { font-size: 2.8rem; } .compat-score { font-family: var(--ff-display); font-size: 3rem; color: var(--gold); text-align: center; line-height: 1; text-shadow: 0 0 40px rgba(185,169,214,0.5); } .compat-score-label { font-family: var(--ff-ui); font-size: .6rem; letter-spacing: .4em; text-transform: uppercase; color: var(--mist); text-align: center; margin-top: .5rem; } /* Custom select — replaces the native widget's flat corners/arrow so it matches the rest of the premium system instead of reading as a stock Bootstrap/browser