/* pastel.css — Oraculus shared design system (cosmic pastel) v1 */ /* Body class hook: */ body.pastel{ --bg-warm:#fbf4e9; --bg-cool:#eef0fb; --cream:#fff8ed; --ink:#2b2547; --ink-soft:#5d557d; --muted:#8b85a8; --line:rgba(43,37,71,.10); --accent:#7d5fff; --accent-deep:#5a3fd6; --accent-soft:#e3dcff; --rose:#ffd4e3; --rose-deep:#ff9bbc; --peach:#ffd8c2; --lemon:#fff2c2; --mint:#caf0d8; --sky:#c9e4ff; --lavender:#e0d4ff; --blush:#ffe7dc; --apricot:#ffc8a1; --radius-lg:24px; --radius-md:18px; --radius-sm:12px; --shadow-card:0 12px 32px -16px rgba(80,60,140,.18); --shadow-hover:0 18px 44px -16px rgba(80,60,140,.32); background:var(--bg-warm) !important; color:var(--ink) !important; font-family:'Quicksand','Nunito',system-ui,-apple-system,sans-serif !important; font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh; overflow-x:hidden; } body.pastel{ background: radial-gradient(900px 600px at -10% -10%, rgba(255,210,225,.55), transparent 60%), radial-gradient(800px 600px at 110% 10%, rgba(200,210,255,.55), transparent 60%), radial-gradient(900px 700px at 50% 110%, rgba(255,235,200,.55), transparent 60%), linear-gradient(180deg, #fbf4e9 0%, #f5edff 100%) !important; background-attachment:fixed !important; } body.pastel a{color:inherit;text-decoration:none} body.pastel button{font-family:inherit;cursor:pointer} /* ── Top nav (pastel) ─────────────────────────────────────────────────── */ body.pastel .pastel-topbar{ position:sticky;top:0;z-index:50; display:flex;align-items:center;justify-content:space-between; padding:14px clamp(20px,4vw,48px); background:rgba(251,244,233,.78); backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px); border-bottom:1px solid var(--line); } body.pastel .pastel-brand{ display:flex;align-items:center;gap:10px; font-family:'Fraunces',serif;font-weight:600; font-size:1.3rem;letter-spacing:.01em;color:var(--ink); } body.pastel .pastel-brand-mark{ width:34px;height:34px;border-radius:12px; background:linear-gradient(135deg,var(--accent) 0%,var(--rose-deep) 100%); display:grid;place-items:center;color:#fff;font-size:1.25rem;line-height:1; box-shadow:0 6px 18px -8px rgba(125,95,255,.6); } body.pastel .pastel-nav-links{display:flex;gap:6px;align-items:center;flex-wrap:wrap;list-style:none} body.pastel .pastel-nav-link{ padding:8px 14px;border-radius:999px; font-size:.92rem;font-weight:600;color:var(--ink-soft); transition:background .2s,color .2s; } body.pastel .pastel-nav-link:hover, body.pastel .pastel-nav-link.active{background:rgba(125,95,255,.12);color:var(--accent-deep)} body.pastel .pastel-nav-cta{ padding:9px 18px;border-radius:999px; background:var(--ink);color:#fff;font-weight:600;font-size:.9rem; transition:transform .2s,box-shadow .2s; } body.pastel .pastel-nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(43,37,71,.5)} body.pastel .pastel-menu-toggle{ display:none;font-size:1.5rem;padding:6px 10px;border-radius:10px; background:none;border:none;color:var(--ink); } @media(max-width:760px){ body.pastel .pastel-nav-links{ display:none; position:absolute;top:100%;left:0;right:0; flex-direction:column;align-items:stretch; background:rgba(251,244,233,.96); backdrop-filter:blur(12px); padding:14px 18px 18px; border-bottom:1px solid var(--line); gap:4px; } body.pastel .pastel-nav-links.open{display:flex} body.pastel .pastel-nav-link{text-align:center} body.pastel .pastel-menu-toggle{display:inline-block} } /* ── Layout containers ─────────────────────────────────────────────────── */ body.pastel .pastel-page{ max-width:1200px;margin:0 auto; padding:clamp(28px,4vw,52px) clamp(18px,4vw,40px); position:relative; } body.pastel .pastel-hero{ text-align:center; padding:clamp(32px,5vw,64px) clamp(16px,3vw,32px) clamp(24px,4vw,40px); } body.pastel .pastel-eyebrow{ display:inline-flex;align-items:center;gap:8px; padding:6px 14px;border-radius:999px; background:rgba(125,95,255,.10);color:var(--accent-deep); font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; margin-bottom:18px; } body.pastel .pastel-h1{ font-family:'Fraunces',serif;font-weight:600; font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.18; color:var(--ink);margin-bottom:14px;letter-spacing:-.01em; } body.pastel .pastel-h1 .accent{ background:linear-gradient(120deg,var(--accent) 0%,var(--rose-deep) 60%,var(--apricot) 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } body.pastel .pastel-lead{ max-width:640px;margin:0 auto 28px; font-size:clamp(.98rem,1.4vw,1.1rem); color:var(--ink-soft);line-height:1.7; } body.pastel .pastel-h2{ font-family:'Fraunces',serif;font-weight:600; font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.2; color:var(--ink);letter-spacing:-.01em;margin-bottom:8px; } body.pastel .pastel-h3{ font-family:'Fraunces',serif;font-weight:600; font-size:1.2rem;color:var(--ink); } body.pastel .pastel-kicker{ display:inline-block; font-size:.78rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--accent-deep); margin-bottom:8px; } body.pastel .pastel-section{ position:relative;padding:48px clamp(18px,4vw,40px); max-width:1200px;margin:0 auto; } body.pastel .pastel-section-head{text-align:center;margin-bottom:36px} body.pastel .pastel-section-head p{max-width:600px;margin:0 auto;color:var(--ink-soft)} /* ── Buttons ──────────────────────────────────────────────────────────── */ body.pastel .pastel-btn, body.pastel .pastel-btn-primary, body.pastel .pastel-btn-ghost{ display:inline-flex;align-items:center;gap:10px; padding:13px 24px;border-radius:999px; font-weight:700;font-size:1rem;border:none; transition:transform .15s,box-shadow .2s,background .2s; } body.pastel .pastel-btn-primary{ background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%); color:#fff; box-shadow:0 14px 28px -12px rgba(125,95,255,.55); } body.pastel .pastel-btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 36px -14px rgba(125,95,255,.7)} body.pastel .pastel-btn-ghost{ background:#fff;color:var(--ink); border:1px solid var(--line); box-shadow:0 6px 18px -10px rgba(43,37,71,.18); } body.pastel .pastel-btn-ghost:hover{transform:translateY(-2px);background:var(--cream)} body.pastel .pastel-btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none} /* ── Card / panel ─────────────────────────────────────────────────────── */ body.pastel .pastel-card{ background:var(--cream); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:28px 26px; } body.pastel .pastel-card.compact{padding:20px 18px;border-radius:var(--radius-md)} body.pastel .pastel-glass{ background:rgba(255,255,255,.62); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.6); border-radius:var(--radius-lg); box-shadow:0 16px 40px -20px rgba(80,60,140,.25); } body.pastel .pastel-card .tone-rose, body.pastel .pastel-card.tone-rose {background:linear-gradient(160deg,var(--rose) 0%,#fff 95%)} body.pastel .pastel-card.tone-lavender {background:linear-gradient(160deg,var(--lavender) 0%,#fff 95%)} body.pastel .pastel-card.tone-peach {background:linear-gradient(160deg,var(--peach) 0%,#fff 95%)} body.pastel .pastel-card.tone-mint {background:linear-gradient(160deg,var(--mint) 0%,#fff 95%)} body.pastel .pastel-card.tone-sky {background:linear-gradient(160deg,var(--sky) 0%,#fff 95%)} body.pastel .pastel-card.tone-lemon {background:linear-gradient(160deg,var(--lemon) 0%,#fff 95%)} body.pastel .pastel-card.tone-blush {background:linear-gradient(160deg,var(--blush) 0%,#fff 95%)} /* ── Grid & feature cards ─────────────────────────────────────────────── */ body.pastel .pastel-grid{ display:grid;gap:22px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); } body.pastel .pastel-feat{ position:relative; padding:26px 24px; border-radius:var(--radius-lg); background:var(--cream); border:1px solid var(--line); box-shadow:var(--shadow-card); transition:transform .2s,box-shadow .2s; overflow:hidden; display:flex;flex-direction:column;gap:12px; min-height:220px; } body.pastel .pastel-feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)} body.pastel .pastel-feat .feat-icon{ width:52px;height:52px;border-radius:16px; display:grid;place-items:center;font-size:1.4rem; background:rgba(255,255,255,.85);border:1px solid var(--line); } body.pastel .pastel-feat h3{ font-family:'Fraunces',serif;font-weight:600; font-size:1.18rem;color:var(--ink); } body.pastel .pastel-feat p{color:var(--ink-soft);font-size:.92rem;line-height:1.6;flex:1} body.pastel .pastel-feat .feat-link{ display:inline-flex;align-items:center;gap:6px; font-weight:700;color:var(--accent-deep);font-size:.9rem;margin-top:auto; } body.pastel .pastel-feat .feat-link::after{content:"→";transition:transform .2s} body.pastel .pastel-feat:hover .feat-link::after{transform:translateX(4px)} body.pastel .pastel-feat.tone-rose {background:linear-gradient(160deg,var(--rose) 0%,#fff 95%)} body.pastel .pastel-feat.tone-lavender {background:linear-gradient(160deg,var(--lavender) 0%,#fff 95%)} body.pastel .pastel-feat.tone-peach {background:linear-gradient(160deg,var(--peach) 0%,#fff 95%)} body.pastel .pastel-feat.tone-mint {background:linear-gradient(160deg,var(--mint) 0%,#fff 95%)} body.pastel .pastel-feat.tone-sky {background:linear-gradient(160deg,var(--sky) 0%,#fff 95%)} body.pastel .pastel-feat.tone-lemon {background:linear-gradient(160deg,var(--lemon) 0%,#fff 95%)} body.pastel .pastel-feat.tone-blush {background:linear-gradient(160deg,var(--blush) 0%,#fff 95%)} body.pastel .pastel-feat .soon{ position:absolute;top:16px;right:16px; font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--ink-soft);padding:3px 10px;border-radius:999px; background:rgba(255,255,255,.75);border:1px solid var(--line); } /* ── Tool chips / tag pills ───────────────────────────────────────────── */ body.pastel .pastel-chip{ display:inline-flex;align-items:center;gap:8px; padding:9px 16px;border-radius:999px; background:#fff;border:1px solid var(--line); font-weight:600;font-size:.9rem;color:var(--ink); box-shadow:0 4px 12px -8px rgba(43,37,71,.12); transition:transform .15s,background .2s; } body.pastel .pastel-chip:hover{transform:translateY(-2px);background:var(--cream)} body.pastel .pastel-chip.lavender{background:linear-gradient(120deg,var(--lavender) 0%,#fff 90%)} body.pastel .pastel-chip.rose{background:linear-gradient(120deg,var(--rose) 0%,#fff 90%)} body.pastel .pastel-chip.mint{background:linear-gradient(120deg,var(--mint) 0%,#fff 90%)} body.pastel .pastel-chip.peach{background:linear-gradient(120deg,var(--peach) 0%,#fff 90%)} /* ── Sparkles + cosmic deco ──────────────────────────────────────────── */ body.pastel .pastel-deco{position:absolute;pointer-events:none;opacity:.75;user-select:none} body.pastel .pastel-deco svg{display:block} body.pastel .pastel-sparkle{ position:absolute;width:14px;height:14px; background:radial-gradient(circle,#fff 0%, #fff0 70%); border-radius:50%;animation:pastelTwinkle 3s ease-in-out infinite; } @keyframes pastelTwinkle{ 0%,100%{transform:scale(.6);opacity:.5} 50%{transform:scale(1.1);opacity:1} } /* ── Footer ───────────────────────────────────────────────────────────── */ body.pastel .pastel-foot{ margin-top:48px;padding:32px clamp(18px,4vw,40px) 40px; border-top:1px solid var(--line); background:rgba(255,255,255,.4); backdrop-filter:blur(8px); } body.pastel .pastel-foot-inner{ max-width:1180px;margin:0 auto; display:flex;flex-wrap:wrap;gap:20px; align-items:center;justify-content:space-between; color:var(--ink-soft);font-size:.9rem; } body.pastel .pastel-foot-links{display:flex;gap:18px;flex-wrap:wrap} body.pastel .pastel-foot-links a:hover{color:var(--accent-deep)} /* ── Form (pastel inputs) ─────────────────────────────────────────────── */ body.pastel .pastel-form-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); padding:24px; } body.pastel .pastel-form-card h2{ font-family:'Fraunces',serif;font-weight:600; font-size:1.1rem;color:var(--ink);margin-bottom:18px; } body.pastel .pastel-form-group{margin-bottom:14px} body.pastel .pastel-form-group label{ display:block;font-size:.78rem;font-weight:600; color:var(--ink-soft);margin-bottom:6px;letter-spacing:.02em; } body.pastel .pastel-form-group input, body.pastel .pastel-form-group select, body.pastel .pastel-form-group textarea{ width:100%; background:var(--cream); border:1px solid var(--line); color:var(--ink); padding:10px 12px; border-radius:12px; font-size:.95rem; font-family:inherit; transition:border-color .15s,background .15s; } body.pastel .pastel-form-group input:focus, body.pastel .pastel-form-group select:focus, body.pastel .pastel-form-group textarea:focus{ outline:none;border-color:var(--accent);background:#fff; box-shadow:0 0 0 3px rgba(125,95,255,.12); } body.pastel .pastel-form-group input[type="checkbox"]{ width:auto;margin-right:6px;accent-color:var(--accent); } body.pastel .pastel-tab-row{ display:flex;gap:6px;margin-bottom:18px; padding:5px;background:rgba(255,255,255,.6); border:1px solid var(--line);border-radius:14px; } body.pastel .pastel-tab-btn{ flex:1;padding:9px 12px;background:transparent;border:none; color:var(--ink-soft);border-radius:10px;cursor:pointer;font-size:.88rem; font-weight:600;transition:all .2s; } body.pastel .pastel-tab-btn:hover{background:rgba(125,95,255,.08);color:var(--accent-deep)} body.pastel .pastel-tab-btn.active{ background:linear-gradient(135deg,var(--accent) 0%,var(--accent-deep) 100%); color:#fff;font-weight:700; box-shadow:0 6px 16px -8px rgba(125,95,255,.55); } /* ── Utilities ───────────────────────────────────────────────────────── */ body.pastel .pastel-hint{font-size:.78rem;color:var(--muted);margin-top:4px} body.pastel .text-soft{color:var(--ink-soft)} body.pastel .text-muted{color:var(--muted)} body.pastel .text-accent{color:var(--accent-deep)} body.pastel .serif{font-family:'Fraunces',serif;font-weight:600} body.pastel hr.pastel-rule{ border:none;height:1px;background:var(--line);margin:24px 0; } /* ── Auth: login button + user chip + dropdown menu ──────────────────── */ body.pastel .pa-login-btn{ padding:9px 18px;border-radius:999px; background:var(--ink);color:#fff;font-weight:600;font-size:.9rem; border:none;cursor:pointer; transition:transform .2s,box-shadow .2s; } body.pastel .pa-login-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(43,37,71,.5)} body.pastel .pa-userwrap{position:relative} body.pastel .pa-user-btn{ display:inline-flex;align-items:center;gap:8px; padding:5px 14px 5px 5px;border-radius:999px; background:rgba(125,95,255,.08);border:1px solid rgba(125,95,255,.18); color:var(--ink);font-weight:600;font-size:.88rem;cursor:pointer; transition:background .2s,border-color .2s; } body.pastel .pa-user-btn:hover{background:rgba(125,95,255,.14);border-color:rgba(125,95,255,.28)} body.pastel .pa-avatar{ width:28px;height:28px;border-radius:999px; background:linear-gradient(135deg,var(--accent) 0%,var(--rose-deep) 100%); display:grid;place-items:center;color:#fff;font-weight:700;font-size:.82rem; } body.pastel .pa-user-label{ max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } body.pastel .pa-caret{font-size:.7rem;opacity:.55;margin-left:2px} body.pastel .pa-menu{ display:none;position:absolute;top:calc(100% + 8px);right:0; min-width:240px;padding:8px; background:#fff;border:1px solid var(--line);border-radius:14px; box-shadow:0 18px 40px -12px rgba(43,37,71,.22); z-index:60; } body.pastel .pa-menu.open{display:block} body.pastel .pa-menu-email{ padding:6px 10px 8px;font-size:.78rem;color:var(--ink-soft); border-bottom:1px solid var(--line);margin-bottom:6px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } body.pastel .pa-menu-item{ display:block;width:100%;text-align:left; padding:9px 10px;border-radius:10px;border:none;background:none; font-size:.88rem;color:var(--ink);cursor:pointer; font-family:inherit; } body.pastel .pa-menu-item:hover{background:rgba(125,95,255,.08)} body.pastel .pa-menu-item.danger{color:#b3434a} body.pastel .pa-menu-item.danger:hover{background:rgba(179,67,74,.08)} /* ── Auth modal ──────────────────────────────────────────────────────── */ body.pastel .pa-modal{ display:none;position:fixed;inset:0;z-index:1000; background:rgba(35,28,60,.42); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); align-items:center;justify-content:center;padding:20px; } body.pastel .pa-modal.open{display:flex} body.pastel .pa-modal-box{ position:relative; background:rgba(255,251,243,.98); border:1px solid var(--line);border-radius:24px; padding:36px 28px 28px;width:min(420px,100%); max-height:calc(100vh - 40px);overflow-y:auto; box-shadow:0 28px 60px -16px rgba(28,20,50,.35); animation:pa-pop .25s ease-out; } @keyframes pa-pop{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}} body.pastel .pa-modal-close{ position:absolute;top:14px;right:14px; width:34px;height:34px;border-radius:999px; background:rgba(43,37,71,.06);border:none;color:var(--ink); font-size:1rem;cursor:pointer; } body.pastel .pa-modal-close:hover{background:rgba(43,37,71,.12)} body.pastel .pa-modal-mark{ width:48px;height:48px;border-radius:16px;margin:0 auto 14px; background:linear-gradient(135deg,var(--accent) 0%,var(--rose-deep) 100%); display:grid;place-items:center;color:#fff;font-size:1.3rem; box-shadow:0 12px 28px -10px rgba(125,95,255,.55); } body.pastel .pa-modal-box h2{ font-family:'Fraunces',serif;font-weight:600; font-size:1.4rem;color:var(--ink);text-align:center; margin:0 0 6px; } body.pastel .pa-modal-lead{ font-size:.88rem;color:var(--ink-soft);text-align:center; margin:0 0 22px;line-height:1.5; } body.pastel .pa-google-slot{ display:flex;justify-content:center; min-height:44px;margin-bottom:14px; } body.pastel .pa-divider{ display:flex;align-items:center;gap:10px; font-size:.78rem;color:var(--ink-soft);margin:6px 0 16px; } body.pastel .pa-divider::before,body.pastel .pa-divider::after{ content:'';flex:1;height:1px;background:var(--line); } body.pastel .pa-tabs{ display:flex;gap:4px;margin-bottom:14px; border-bottom:1px solid var(--line); } body.pastel .pa-tab{ flex:1;padding:8px 12px; background:none;border:none;border-bottom:2px solid transparent; color:var(--ink-soft);font-weight:600;font-size:.9rem; cursor:pointer;font-family:inherit; transition:color .2s,border-color .2s; } body.pastel .pa-tab.active{color:var(--accent-deep);border-bottom-color:var(--accent)} body.pastel .pa-form{display:flex;flex-direction:column;gap:10px} body.pastel .pa-field{display:flex;flex-direction:column;gap:6px} body.pastel .pa-field span{ font-size:.78rem;color:var(--ink-soft);font-weight:600; letter-spacing:.02em; } body.pastel .pa-field input{ padding:10px 12px;border:1px solid var(--line);border-radius:10px; background:#fff;color:var(--ink);font-size:.94rem; font-family:inherit; transition:border-color .2s,box-shadow .2s; } body.pastel .pa-field input:focus{ outline:none;border-color:var(--accent); box-shadow:0 0 0 3px rgba(125,95,255,.15); } body.pastel .pa-submit{ margin-top:6px;padding:11px 16px;border-radius:999px;border:none; background:linear-gradient(135deg,var(--accent) 0%,var(--rose-deep) 100%); color:#fff;font-weight:700;font-size:.95rem;cursor:pointer; transition:transform .2s,box-shadow .2s; } body.pastel .pa-submit:hover{transform:translateY(-1px);box-shadow:0 10px 24px -10px rgba(125,95,255,.5)} body.pastel .pa-error{ font-size:.85rem;color:#b3434a;min-height:1.1em; margin-top:4px; } body.pastel .pa-register-note{ font-size:.88rem;color:var(--ink-soft);line-height:1.55; text-align:center;padding:14px 4px;margin:0; } body.pastel .pa-register-note a{color:var(--accent-deep);text-decoration:underline} @media(max-width:760px){ body.pastel .pa-menu{right:auto;left:0;min-width:220px} body.pastel .pa-user-label{max-width:120px} } /* Dark variant (Tarot page etc.) — override surfaces */ body.pastel.dark-shell .pa-login-btn{background:#fff;color:#1a1240} body.pastel.dark-shell .pa-login-btn:hover{box-shadow:0 10px 24px -8px rgba(255,255,255,.35)} body.pastel.dark-shell .pa-user-btn{ background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#f0e8ff; } body.pastel.dark-shell .pa-user-btn:hover{background:rgba(255,255,255,.2)} /* Print fallback */ @media print{ body.pastel{background:#fff !important} body.pastel .pastel-topbar,body.pastel .pastel-foot{display:none} body.pastel .pa-modal{display:none !important} }