/* ============================================================ ZENQUI design system — DARK PURPLE THEME Palette derived from the cover art (dusky purple + gradient orb). All colors flow from the :root tokens below — edit those to retune. ============================================================ */ :root{ /* --- Core accents (gradient-orb family) --- */ --ever:#C67AAB; /* Primary accent (pink) — buttons, links, active states */ --ever-dark:#B36AA0; /* Primary hover (deeper pink) */ --sage:#A46DB1; /* Secondary accent (periwinkle-purple) — borders, focus */ --clay:#DF7A84; /* Coral accent (logo end, badges) */ --lavender:#CDB7E9; /* Lavender mist */ --gold:#D6A65D; /* Golden beige (warm accent) */ /* --- Surfaces (dark plum family) --- */ --sand:#160826; /* Page background (deepest plum) */ --cloud:#241338; /* Card / surface (lifted plum) */ --mint:#2E1C49; /* Soft surface / hover bg (dusky purple) */ /* --- Text --- */ --text:#ECE6F6; /* Body text (soft lilac-white) */ --muted:#A99BC2; /* Muted text (lavender-grey) */ --line:#3A2A55; /* Borders / dividers */ --link:#C67AAB; /* Anchor text color (theme-tunable for contrast) */ --overlay:rgba(255,255,255,.07); /* Subtle hover/lock tint over surfaces */ --header-bg:rgba(22,8,38,.85); /* Sticky header backdrop */ --radius:20px; --radius-lg:24px; --radius-sm:14px; --shadow:0 8px 30px rgba(0,0,0,.45); --shadow-sm:0 2px 12px rgba(0,0,0,.35); --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --serif:'Fraunces','Cormorant Garamond',Georgia,serif; --maxw:1140px; /* Reusable brand gradient (orb + accents) */ --grad:linear-gradient(135deg,#6FA8DC 0%,#A46DB1 38%,#C67AAB 68%,#DF7A84 100%); --grad-orb:conic-gradient(from 200deg,#6FA8DC,#A46DB1,#C67AAB,#DF7A84,#6FA8DC); } /* ---- Light theme override (toggle via [data-theme] on , mirrors EN/ES pattern) ---- */ html[data-theme="light"]{ --sand:#FBF6FB; /* Page background (warm off-white) */ --cloud:#FFFFFF; /* Card / surface */ --mint:#F4ECFA; /* Soft surface / hover bg (light lavender tint) */ --text:#2B1240; /* Body text (deep plum) */ --muted:#7C6E92; /* Muted text */ --line:#E6DBF1; /* Borders / dividers */ --link:#9A3F80; /* Deeper pink for AA contrast on light bg */ --overlay:rgba(43,18,64,.05); --header-bg:rgba(255,255,255,.88); --shadow:0 8px 30px rgba(120,80,160,.14); --shadow-sm:0 2px 12px rgba(120,80,160,.10); /* Badges/chips/flashes use fixed pastel text designed for a dark backdrop — redefine to darker, more saturated tones so they stay legible on light surfaces. */ --lavender:#8A5EA8; } html[data-theme="light"] .state-free{background:rgba(164,109,177,.16);color:#7C4B96} html[data-theme="light"] .state-included{background:rgba(111,168,220,.16);color:#3568A0} html[data-theme="light"] .state-purchased{background:rgba(214,166,93,.20);color:#95701F} html[data-theme="light"] .state-preview{background:rgba(164,109,177,.16);color:#7C4B96} html[data-theme="light"] .chip-clay{background:rgba(223,122,132,.16);color:#B14856} html[data-theme="light"] .chip-gold{background:rgba(214,166,93,.20);color:#95701F} html[data-theme="light"] .chip-sage{background:rgba(164,109,177,.16);color:#7C4B96} html[data-theme="light"] .streak-pill{background:rgba(214,166,93,.20);color:#95701F} html[data-theme="light"] .flash-success{color:#5E3873} html[data-theme="light"] .flash-error{color:#9A2E38} html[data-theme="light"] .flash-info{color:#2A5580} *{box-sizing:border-box} html{scroll-behavior:smooth} body{transition:background .2s ease,color .2s ease} body{ margin:0;font-family:var(--font);color:var(--text); background:var(--sand);line-height:1.6;-webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.2;color:var(--text);margin:0 0 .5em} h1{font-size:clamp(2rem,5vw,3.2rem)} h2{font-size:clamp(1.5rem,3.5vw,2.3rem)} h3{font-size:1.3rem} p{margin:0 0 1em} .container{max-width:var(--maxw);margin:0 auto;padding:0 20px} .narrow{max-width:760px;margin:0 auto;padding:0 20px} .center{text-align:center} .muted{color:var(--muted)} .serif{font-family:var(--serif)} /* ---- Buttons ---- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:48px;padding:12px 26px;border-radius:18px;border:none;cursor:pointer; background:var(--ever);color:#1a0d2b;font-family:var(--font);font-size:1rem;font-weight:700; transition:transform .15s ease,background .2s ease,box-shadow .2s ease,filter .2s ease;text-decoration:none; } .btn:hover{background:var(--ever-dark);text-decoration:none;transform:translateY(-1px);filter:brightness(1.05)} .btn:active{transform:translateY(0)} .btn:focus-visible{outline:3px solid var(--sage);outline-offset:2px} .btn-lg{min-height:56px;padding:16px 34px;font-size:1.08rem;border-radius:22px} .btn-block{display:flex;width:100%} .btn-secondary{background:transparent;color:var(--text);border:1.5px solid var(--sage)} .btn-secondary:hover{background:var(--mint);color:#fff} .btn-clay{background:var(--clay);color:#2a0e12} .btn-clay:hover{background:#cf6f78} .btn-ghost{background:transparent;color:var(--ever);min-height:auto;padding:8px 12px} .btn[disabled]{opacity:.5;cursor:not-allowed} /* ---- Cards ---- */ .card{ background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow-sm);padding:24px; } .card-lg{padding:32px;border-radius:var(--radius-lg)} /* ---- Member panel (app pages): spacious, professional, admin-inspired ---- */ /* Scoped to .is-app so public marketing pages are untouched. */ .is-app main{padding-bottom:64px} /* Page header band: serif headline, generous spacing, subtle separator. */ .is-app .app-header{ padding:40px 0 24px; margin-bottom:32px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--cloud) 0%,transparent 100%); } .is-app .app-header .container{display:flex;flex-direction:column;gap:6px} .is-app .app-header h1{ font-family:var(--serif); font-size:clamp(1.7rem,3vw,2.3rem); font-weight:600; line-height:1.12; color:var(--text); margin:0; } .is-app .app-header p, .is-app .app-header .app-sub{ color:var(--muted);font-size:1rem;margin:0;max-width:60ch; } /* More breathing room between stacked sections on member pages. */ .is-app main > .container{margin-bottom:28px} .is-app main > .container:last-child{margin-bottom:0} /* Refined member cards: roomier padding, gentle hover lift like admin. */ .is-app .card{ padding:28px; border-radius:var(--radius-lg); transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease; } .is-app .card:hover{ box-shadow:var(--shadow); border-color:var(--line); } .is-app .card h2{ font-family:var(--serif); font-size:1.2rem; font-weight:600; color:var(--text); margin:0 0 14px; } .is-app .card h3{font-family:var(--serif);font-weight:600;color:var(--text)} /* Wider, cleaner grid gaps for multi-column member layouts. */ .is-app .account-grid, .is-app .home-grid, .is-app .lib-grid, .is-app .stat-grid, .is-app .journal-wrap, .is-app .routine-wrap, .is-app .player-wrap{gap:24px} /* Stat cards get a bolder, more polished number treatment. */ .is-app .stat-card{padding:24px;text-align:center} .is-app .stat-card b{ font-family:var(--serif); font-size:2rem; color:var(--text); display:block; line-height:1; margin-bottom:6px; } .is-app .stat-card span{color:var(--muted);font-size:.9rem} /* Pages without an .app-header band (journal, routine, player) still get comfortable top spacing and a polished serif page title. */ .is-app main > .container:first-child{padding-top:36px} .is-app main > .app-header:first-child + *, .is-app main > .app-header ~ .container{padding-top:0} .is-app .journal-toolbar{ display:flex;align-items:center;justify-content:space-between; flex-wrap:wrap;gap:14px;margin-bottom:8px; } .is-app .journal-toolbar h1, .is-app .home-hero h1, .is-app .routine-wrap > h1, .is-app .player-wrap > h1{ font-family:var(--serif);font-size:clamp(1.7rem,3vw,2.3rem); font-weight:600;line-height:1.12;color:var(--text);margin:0; } @media (max-width:640px){ .is-app .app-header{padding:28px 0 18px;margin-bottom:22px} .is-app .card{padding:22px} .is-app main > .container:first-child{padding-top:24px} } /* ---- Header / nav ---- */ .site-header{ position:sticky;top:0;z-index:50;background:var(--header-bg); backdrop-filter:blur(12px);border-bottom:1px solid var(--line); } .nav{display:flex;align-items:center;justify-content:space-between;height:68px} .brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--text)} .brand:hover{text-decoration:none} /* Single gradient-orb logo. Hide any bundled logo so only the orb shows. */ .brand .logo{display:none} .brand::before{ content:"";width:30px;height:30px;border-radius:50%;flex:0 0 auto; background:var(--grad-orb); box-shadow:0 0 14px rgba(198,122,171,.55),inset 0 0 6px rgba(255,255,255,.25); } .nav-links{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0} .nav-links a{padding:9px 14px;border-radius:12px;color:var(--text);font-weight:500;font-size:.96rem} .nav-links a:hover{background:var(--mint);color:var(--text);text-decoration:none} .nav-right{display:flex;align-items:center;gap:10px} .nav-right .btn,.nav-right .btn-ghost,.nav-right .btn-secondary{white-space:nowrap} .nav-right .btn-ghost{padding:8px 10px;font-size:.92rem} .lang-switch{display:flex;gap:2px;background:var(--mint);border-radius:10px;padding:3px} .lang-switch a{padding:5px 9px;border-radius:8px;font-size:.82rem;font-weight:600;color:var(--muted)} .lang-switch a.active{background:var(--ever);color:#1a0d2b;box-shadow:var(--shadow-sm)} .lang-switch a:hover{text-decoration:none;color:var(--text)} .theme-switch{display:inline-flex;background:var(--mint);border-radius:999px;padding:3px;gap:2px} .theme-switch a{padding:6px 10px;border-radius:999px;font-size:.85rem;line-height:1;color:var(--muted)} .theme-switch a.active{background:var(--ever);box-shadow:var(--shadow-sm)} .theme-switch a:hover{text-decoration:none} .cart-link{position:relative;color:var(--text)} .cart-badge{position:absolute;top:-4px;right:-4px;background:var(--clay);color:#fff;font-size:.68rem;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px} .menu-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--text)} /* ---- Footer ---- */ .site-footer{background:#120620;color:#C9BEDD;margin-top:80px;padding:48px 0 28px;border-top:1px solid var(--line)} .site-footer a{color:#C9BEDD} .site-footer a:hover{color:#fff} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px} .footer-grid h4{color:#fff;font-family:var(--font);font-size:.92rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px} .footer-grid ul{list-style:none;padding:0;margin:0} .footer-grid li{margin-bottom:9px;font-size:.94rem} .footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:20px;font-size:.85rem;color:#9b8fb6;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px} /* Footer brand also uses the orb; keep its bundled img hidden */ .site-footer .brand .logo{display:none} /* ---- Hero ---- */ .hero{padding:90px 0;text-align:center;background: radial-gradient(1100px 520px at 50% -10%, rgba(164,109,177,.45), transparent), radial-gradient(900px 500px at 80% 10%, rgba(223,122,132,.18), transparent), linear-gradient(180deg,#1d0d33,#160826);} .hero h1{color:#fff} .hero p.sub{font-size:1.18rem;color:var(--muted);max-width:620px;margin:0 auto 32px} .hero .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .hero .login-link{display:block;margin-top:18px;color:var(--muted);font-size:.95rem} /* ---- Sections ---- */ .section{padding:64px 0} .section-mint{background:var(--mint)} .section-cloud{background:var(--cloud)} .eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.8rem;font-weight:700;color:var(--clay);margin-bottom:8px} .grid{display:grid;gap:24px} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)} .feature .ico{width:54px;height:54px;border-radius:16px;background:var(--mint);display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:14px} /* ---- Badges / chips ---- */ .chip{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:999px;font-size:.8rem;font-weight:600;background:var(--mint);color:var(--lavender)} .chip-clay{background:rgba(223,122,132,.18);color:#f0a9af} .chip-lav{background:rgba(205,183,233,.18);color:var(--lavender)} .chip-gold{background:rgba(214,166,93,.18);color:#e7c178} .chip-sage{background:rgba(164,109,177,.18);color:#cba2d4} .badge-state{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:4px 9px;border-radius:8px} .state-free{background:rgba(164,109,177,.22);color:#cba2d4} .state-included{background:rgba(111,168,220,.20);color:#a8cbf0} .state-purchased{background:rgba(214,166,93,.20);color:#e7c178} .state-locked{background:var(--overlay);color:var(--muted)} .state-preview{background:rgba(205,183,233,.20);color:var(--lavender)} /* ---- Forms ---- */ .form-group{margin-bottom:16px} label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--text)} input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],select,textarea{ width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:1rem; font-family:var(--font);background:var(--mint);color:var(--text);min-height:48px; } input::placeholder,textarea::placeholder{color:var(--muted)} textarea{min-height:120px;resize:vertical} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(164,109,177,.35)} select option{background:var(--mint);color:var(--text)} /* ---- Flash ---- */ .flash{padding:13px 18px;border-radius:12px;margin-bottom:14px;font-size:.95rem} .flash-success{background:rgba(164,109,177,.18);border:1px solid var(--sage);color:#e2cdec} .flash-error{background:rgba(223,122,132,.16);border:1px solid #c9626c;color:#f3b4ba} .flash-info{background:rgba(111,168,220,.16);border:1px solid #5d7aa7;color:#bcd2ee} /* ---- Product / content cards ---- */ .tile{background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column} .tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .tile .thumb{aspect-ratio:4/3;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:#fff} .tile .thumb.sleep{background:linear-gradient(135deg,#5a4f8f,var(--lavender))} .tile .thumb.focus{background:linear-gradient(135deg,#7a5aa0,var(--gold))} .tile .thumb.beginner{background:linear-gradient(135deg,var(--sage),#df7a84)} .tile .body{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1} .tile .title{font-weight:600;font-family:var(--serif);font-size:1.08rem;color:var(--text)} .tile .meta{font-size:.85rem;color:var(--muted)} .tile .price{font-weight:700;color:var(--ever)} .tile .price .was{color:var(--muted);font-weight:400;text-decoration:line-through;margin-left:6px;font-size:.85rem} .tile .foot{margin-top:auto;padding-top:6px} /* ---- App layout (member area) ---- */ .app-shell{display:flex;min-height:calc(100vh - 68px)} .app-side{width:230px;flex-shrink:0;background:var(--cloud);border-right:1px solid var(--line);padding:24px 14px} .app-side a{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;color:var(--text);font-weight:500;margin-bottom:4px} .app-side a:hover{background:var(--mint);color:var(--text);text-decoration:none} .app-side a.active{background:var(--ever);color:#1a0d2b} .app-main{flex:1;padding:32px 28px;max-width:980px} .app-side .ico,.nav-links .ico{font-size:1.1rem} /* ---- Onboarding ---- */ .onb{min-height:100vh;display:flex;flex-direction:column;position:relative;background: radial-gradient(1000px 500px at 50% -5%, rgba(164,109,177,.4), transparent), linear-gradient(180deg,#1d0d33,var(--sand));} .onb-topbar{display:flex;align-items:center;gap:18px;padding:18px 24px} .onb-logo{display:inline-flex;align-items:center;gap:8px;font-family:var(--serif);font-weight:600;color:var(--text);text-decoration:none} .onb-logo img{display:none} .onb-logo::before{content:"";width:30px;height:30px;border-radius:50%;background:var(--grad-orb);box-shadow:0 0 12px rgba(198,122,171,.5)} .onb-progress{display:flex;flex-direction:column;gap:6px;flex:1;max-width:280px;margin:0 auto} .onb-step-label{font-size:.78rem;color:var(--muted);font-weight:600;letter-spacing:.04em;text-align:center} .onb-bar{height:4px;background:var(--mint);border-radius:4px;overflow:hidden;width:100%} .onb-bar-fill{display:block;height:100%;background:var(--grad);transition:width .4s ease} .onb-skip{color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500} .onb-skip:hover{color:var(--ever)} .onb-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:24px} .onb-panel{max-width:560px;width:100%;text-align:center;animation:fadeUp .5s ease} .onb-panel[hidden]{display:none} .onb-panel h1,.onb-panel h2{margin-bottom:14px;color:var(--text)} .onb-sub{font-size:1.08rem;color:var(--muted);margin-bottom:28px;line-height:1.6} .onb-commit-vow{font-family:var(--serif);font-style:italic;font-size:1.25rem;color:var(--lavender)} .onb-choices{display:flex;flex-direction:column;gap:12px;text-align:left} .onb-choice{display:flex;align-items:center;gap:14px;padding:18px 22px;border:1.5px solid var(--line);border-radius:18px;background:var(--cloud);cursor:pointer;transition:all .18s;font-size:1.05rem;font-weight:500;color:var(--text);font-family:inherit;width:100%} .onb-choice:hover{border-color:var(--sage);background:var(--mint);transform:translateY(-1px)} .onb-choice.selected{border-color:var(--ever);background:var(--mint)} .onb-choice .ico{font-size:1.5rem;flex-shrink:0;line-height:1} .onb-times{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:22px} .onb-time{flex:1;min-width:130px;display:flex;flex-direction:column;align-items:center;gap:8px;padding:22px 16px;border:1.5px solid var(--line);border-radius:18px;background:var(--cloud);cursor:pointer;font-size:1rem;font-weight:600;color:var(--text);font-family:inherit;transition:all .18s} .onb-time:hover{border-color:var(--sage);background:var(--mint)} .onb-time .ico{font-size:1.8rem;line-height:1} .onb-time.selected{border-color:var(--ever);background:var(--mint);color:#fff} .onb-optin{display:flex;align-items:flex-start;gap:12px;text-align:left;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--cloud);margin-bottom:22px;cursor:pointer} .onb-optin input{margin-top:3px;flex-shrink:0} .onb-form{display:flex;flex-direction:column;gap:16px;text-align:left;max-width:420px;margin:0 auto} .onb-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.92rem} .onb-form input{padding:13px 15px;border:1.5px solid var(--line);border-radius:12px;font-size:1rem;font-family:inherit;background:var(--mint);color:var(--text)} .onb-form input:focus{outline:none;border-color:var(--sage)} .breathe{width:120px;height:120px;border-radius:50%;margin:0 auto 28px;background:radial-gradient(circle at 35% 30%, var(--sage), var(--ever));animation:breathe 5s ease-in-out infinite} .breathe.small{width:84px;height:84px;margin-bottom:20px} @keyframes breathe{0%,100%{transform:scale(.88);opacity:.75}50%{transform:scale(1.06);opacity:1}} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} /* ---- Home (member) personalized ---- */ .home-greet{font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:6px;color:var(--text)} .home-section{margin-bottom:28px} .featured-card{display:flex;gap:20px;align-items:center;background:linear-gradient(135deg,var(--mint),var(--cloud));border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;flex-wrap:wrap} .featured-card .art{width:96px;height:96px;border-radius:18px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:#fff;flex-shrink:0} .streak-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(214,166,93,.18);color:#e7c178;padding:8px 16px;border-radius:999px;font-weight:600} .quote-block{font-family:var(--serif);font-size:1.25rem;font-style:italic;color:var(--lavender);border-left:3px solid var(--gold);padding:8px 0 8px 18px;margin:8px 0} .progress-ring{display:flex;align-items:center;gap:16px} .ring{--p:0;width:72px;height:72px;border-radius:50%;background:conic-gradient(var(--ever) calc(var(--p)*1%), var(--mint) 0);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative} .ring::after{content:'';width:54px;height:54px;border-radius:50%;background:var(--cloud)} .ring .label{position:absolute;font-weight:700;color:var(--text);font-size:.9rem} .widget-cta{background:linear-gradient(135deg,#3a2a5e,var(--mint));border-radius:var(--radius-lg);padding:24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap} /* ---- Audio player ---- */ .player{background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px;text-align:center;max-width:560px;margin:0 auto} .player .art{width:180px;height:180px;border-radius:24px;margin:0 auto 22px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:3.4rem;color:#fff} .player audio{width:100%;margin-top:18px} .play-btn,.play-ring{width:76px;height:76px;border-radius:50%;background:var(--ever);color:#1a0d2b;border:none;font-size:1.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;margin:0 auto} .play-btn:hover,.play-ring:hover{background:var(--ever-dark)} .doc-frame{width:100%;height:70vh;min-height:480px;border:1px solid var(--line);border-radius:14px;background:var(--mint)} .media-placeholder{background:var(--mint);border:1px dashed var(--line);border-radius:14px;padding:28px;text-align:center} /* ---- Tabs / filters ---- */ .tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px} .tabs a,.tabs button{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--cloud);color:var(--text);font-weight:500;cursor:pointer;font-size:.9rem} .tabs a.active,.tabs button.active{background:var(--ever);color:#1a0d2b;border-color:var(--ever)} .tabs a:hover,.tabs button:hover{text-decoration:none;border-color:var(--sage)} /* ---- Cart / table ---- */ .cart-row{display:flex;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)} .cart-row .img{width:64px;height:64px;border-radius:12px;background:var(--mint);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0} .summary{background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius);padding:24px} .summary .line{display:flex;justify-content:space-between;margin-bottom:10px;font-size:.96rem} .summary .total{font-size:1.2rem;font-weight:700;color:var(--text);border-top:1px solid var(--line);padding-top:12px;margin-top:6px} /* ---- Admin shell / sidebar ---- */ .admin-shell{display:flex;min-height:100vh;background:var(--sand)} .admin-side{width:240px;flex-shrink:0;background:var(--cloud);border-right:1px solid var(--line);padding:22px 14px;display:flex;flex-direction:column} .admin-brand{display:flex;align-items:center;gap:11px;padding:0 8px;margin-bottom:22px} .admin-avatar{width:38px;height:38px;border-radius:50%;background:var(--grad-orb);flex-shrink:0;box-shadow:var(--shadow-sm)} .admin-brand-text{display:flex;flex-direction:column;line-height:1.2} .admin-brand-text strong{font-family:var(--serif);font-size:1.15rem;color:var(--text);font-weight:600} .admin-brand-text small{font-size:.66rem;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase} .admin-nav{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto} .admin-nav-item{display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:999px;color:var(--muted);font-size:.92rem;font-weight:600;transition:background .15s,color .15s} .admin-nav-item .ico{font-size:1.02rem;width:20px;text-align:center;flex-shrink:0} .admin-nav-item:hover{background:var(--mint);color:var(--text);text-decoration:none} .admin-nav-item.active{background:var(--grad);color:#fff;box-shadow:var(--shadow-sm)} .admin-side-footer{margin-top:10px;padding-top:12px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px} /* ---- Admin content column / topbar ---- */ .admin-content-col{flex:1;display:flex;flex-direction:column;min-width:0} .admin-topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;border-bottom:1px solid var(--line);background:var(--cloud)} .admin-tagline{font-size:.7rem;font-weight:700;letter-spacing:.12em;color:var(--muted);text-transform:uppercase} .admin-topbar-actions{display:flex;align-items:center;gap:12px} .theme-toggle-btn{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--mint);font-size:1.05rem;transition:background .15s,transform .15s;flex-shrink:0} .theme-toggle-btn:hover{background:var(--ever);text-decoration:none;transform:scale(1.06)} .admin-main{flex:1;padding:32px;background:var(--sand);overflow-x:auto} /* ---- Admin page header (kicker + headline / list-page title) ---- */ .admin-hero{margin-bottom:26px} .admin-kicker{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ever-dark);margin:0 0 6px} .admin-headline{font-family:var(--serif);font-size:clamp(1.6rem,3vw,2.1rem);color:var(--text);margin:0} .admin-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:24px} .admin-head h1{font-family:var(--serif);font-size:1.5rem;color:var(--text);margin:0} /* ---- Admin stat cards ---- */ .admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:24px} .admin-stat{background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:3px} .admin-stat-ico{width:32px;height:32px;border-radius:10px;background:var(--mint);display:flex;align-items:center;justify-content:center;font-size:1rem;margin-bottom:8px} .admin-stat .l{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);order:2} .admin-stat .n{font-size:1.9rem;font-weight:700;font-family:var(--serif);color:var(--text);order:1} .admin-stat .sub{font-size:.78rem;color:var(--muted);order:3;margin-top:2px} .admin-stat.warn .admin-stat-ico{background:rgba(223,122,132,.22)} .admin-stat.warn .n{color:var(--clay)} /* ---- Admin cards / cols / table / pills ---- */ .admin-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start} .admin-card{background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm)} .admin-card h2,.admin-card h3{font-family:var(--serif);font-size:1.05rem;color:var(--text);margin:0 0 16px;display:flex;align-items:center;justify-content:space-between} .admin-card .view-all{font-size:.82rem;font-weight:600;color:var(--link)} .admin-table{width:100%;border-collapse:collapse;font-size:.88rem} .admin-table th{text-align:left;padding:9px 12px;font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)} .admin-table td{padding:12px 12px;border-bottom:1px solid var(--line);color:var(--text)} .admin-table tr:last-child td{border-bottom:none} .admin-table tr:hover td{background:var(--overlay)} .admin-table td a{color:var(--link);font-weight:600} .pill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;background:var(--mint);color:var(--muted)} .pill-active,.pill-published,.pill-paid,.pill-fulfilled,.pill-complete,.pill-delivered,.pill-shipped{background:#DCF3E7;color:#1F7A4F} .pill-pending,.pill-draft,.pill-processing,.pill-in_progress,.pill-scheduled,.pill-not_started{background:#FBEBC9;color:#92650E} .pill-failed,.pill-canceled,.pill-expired,.pill-archived,.pill-skipped,.pill-unfulfilled,.pill-revoked,.pill-none{background:#FBDDE1;color:#B0303F} .pill-free,.pill-premium,.pill-refunded{background:#E3E9FB;color:#3A4FA0} /* ---- Admin funnel bars ---- */ .funnel{display:flex;flex-direction:column;gap:12px} .funnel-row{display:grid;grid-template-columns:120px 1fr 34px;align-items:center;gap:10px} .funnel-label{font-size:.82rem;color:var(--muted)} .funnel-bar{height:9px;background:var(--mint);border-radius:6px;overflow:hidden} .funnel-fill{display:block;height:100%;background:var(--grad);border-radius:6px;transition:width .3s ease} .funnel-n{font-size:.85rem;font-weight:700;color:var(--text);text-align:right} /* ---- Admin action card (icon + title + description + button row) ---- */ .admin-action-card{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap} .admin-action-card .ico{width:48px;height:48px;border-radius:14px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;flex-shrink:0} .admin-action-card .body{flex:1;min-width:200px} .admin-action-card .body h2{margin-bottom:6px;justify-content:flex-start} .admin-action-card .body p{color:var(--muted);font-size:.92rem;margin:0 0 16px} .admin-action-card .actions{display:flex;gap:10px;flex-wrap:wrap} /* ---- Admin catalog card grid (Content / Products) ---- */ .admin-filter-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .admin-filter-pill{padding:7px 15px;border-radius:999px;font-size:.85rem;font-weight:600;border:1px solid var(--line);color:var(--muted);background:var(--cloud)} .admin-filter-pill:hover{text-decoration:none;border-color:var(--sage)} .admin-filter-pill.active{background:var(--ever);border-color:var(--ever);color:#1a0d2b} .admin-catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px} .admin-catalog-card{background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column} .admin-catalog-art{aspect-ratio:4/3;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:2.4rem;color:#fff;position:relative} .admin-catalog-art img{width:100%;height:100%;object-fit:cover} .admin-catalog-art .pill{position:absolute;top:10px;right:10px} .admin-catalog-body{padding:16px 18px;display:flex;flex-direction:column;gap:4px;flex:1} .admin-catalog-body h3{font-family:var(--serif);font-size:1.05rem;margin:0;color:var(--text)} .admin-catalog-body .subtitle{font-size:.85rem;color:var(--muted);margin:0 0 4px} .admin-catalog-body .category{font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ever-dark)} .admin-catalog-body .price-row{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-weight:700;color:var(--text)} .admin-catalog-body .price-row .stock{font-size:.78rem;font-weight:500;color:var(--muted)} .admin-catalog-actions{display:flex;gap:6px;padding:12px 18px;border-top:1px solid var(--line)} table.data{width:100%;border-collapse:collapse;background:var(--cloud);border-radius:12px;overflow:hidden;font-size:.92rem} table.data th,table.data td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);color:var(--text)} table.data th{background:var(--mint);color:var(--lavender);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.03em} table.data tr:hover td{background:var(--overlay)} .tag-pill{display:inline-block;padding:3px 9px;border-radius:8px;font-size:.76rem;font-weight:600;background:var(--mint);color:var(--lavender)} /* ---- Utility ---- */ .mt-0{margin-top:0}.mb-0{margin-bottom:0}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px} .flex{display:flex}.between{justify-content:space-between}.gap{gap:12px}.wrap{flex-wrap:wrap}.aic{align-items:center} .pill-row{display:flex;gap:8px;flex-wrap:wrap} .skip-link{position:absolute;left:-999px} .skip-link:focus{left:12px;top:12px;background:var(--ever);color:#1a0d2b;padding:10px 16px;border-radius:10px;z-index:200} .link-arrow{display:inline-flex;align-items:center;gap:6px} /* ---- Responsive ---- */ @media (max-width:900px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)} .footer-grid{grid-template-columns:1fr 1fr} .app-side{position:fixed;left:-260px;top:68px;bottom:0;transition:left .25s;z-index:40;box-shadow:var(--shadow)} .app-side.open{left:0} .app-main{padding:22px 18px} .menu-toggle{display:block} .nav-links{position:fixed;top:68px;left:0;right:0;background:var(--cloud);flex-direction:column;align-items:stretch;padding:12px;gap:2px;border-bottom:1px solid var(--line);display:none;box-shadow:var(--shadow)} .nav-links.open{display:flex} .nav-links a{padding:13px 16px} } @media (max-width:600px){ .grid-3,.grid-4,.grid-2{grid-template-columns:1fr} .admin-side{width:64px}.admin-side .label{display:none}.admin-side .brand{font-size:0} .section{padding:44px 0}.hero{padding:60px 0} } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .breathe{animation:none!important} } /* ===== Routine ===== */ .routine-wrap{max-width:720px;margin:0 auto;padding-bottom:48px} .routine-head{display:flex;align-items:center;justify-content:space-between;margin:18px 0} .routine-progress{display:inline-flex;align-items:center;gap:8px;font-weight:600} .routine-count{font-size:1.3rem;color:var(--ever)} .routine-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .routine-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px} .routine-item-main{display:flex;align-items:center;gap:14px;min-width:0} .routine-time{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.95rem;min-width:48px} .routine-item-title{margin:0;font-size:1.05rem} .routine-item-status{margin-top:4px} .routine-item-actions{display:flex;gap:8px;flex-shrink:0} .routine-item.status-complete{opacity:.7} .routine-item.status-complete .routine-item-title{text-decoration:line-through} .routine-item.status-skipped{opacity:.55} .routine-alldone{margin:18px 0} .btn-sm{padding:7px 13px;font-size:.9rem} /* ===== Setup / choice forms ===== */ .setup-wrap{max-width:640px;margin:0 auto;padding-bottom:48px} .setup-step{border:none;margin:0 0 18px;padding:0} .setup-step legend{font-family:var(--serif);font-size:1.25rem;margin-bottom:14px;padding:0} .choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px} .choice{display:flex;align-items:center;gap:10px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;background:var(--cloud);transition:border-color .2s,background .2s} .choice:hover{border-color:var(--sage)} .choice input{accent-color:var(--ever)} .choice input:checked+span{color:var(--ever);font-weight:600} .setup-nav{display:flex;gap:12px;justify-content:flex-end;margin-top:24px} /* ===== Journal ===== */ .journal-wrap{max-width:760px;margin:0 auto;padding-bottom:48px} .journal-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:16px 0} .journal-tabs{display:flex;gap:6px;flex-wrap:wrap} .mood-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px} .mood-chip{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--cloud);cursor:pointer} .mood-chip input{accent-color:var(--ever)} .mood-chip input:checked~span{color:var(--ever);font-weight:600} .journal-entry-card{padding:16px 18px;margin-bottom:12px} .journal-entry-card .meta{color:var(--muted);font-size:.9rem} .journal-gratitude-lines{display:flex;flex-direction:column;gap:8px} .journal-upgrade{border:1px dashed var(--sage);background:var(--mint)} .journal-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px} .journal-cal .day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);background:var(--cloud);font-size:.85rem} .journal-cal .day.has-entry{background:var(--ever);color:#160826;font-weight:600} /* ---- Home: Today's Zen Routine card + journal CTA ---- */ .home-routine .routine-progress-bar{height:8px;background:var(--mint);border-radius:6px;overflow:hidden;margin:10px 0 6px} .home-routine .routine-progress-bar span{display:block;height:100%;background:var(--grad);transition:width .4s ease} .home-routine-list{list-style:none;margin:14px 0 16px;padding:0;display:flex;flex-direction:column;gap:8px} .home-routine-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:var(--cloud)} .home-routine-item .home-routine-check{font-size:1.1rem;color:var(--sage);flex:0 0 auto;width:20px;text-align:center} .home-routine-item.status-complete .home-routine-check{color:var(--ever)} .home-routine-item.status-complete .home-routine-name{color:var(--muted);text-decoration:line-through} .home-routine-item.status-skipped .home-routine-name{color:var(--muted)} .home-routine-item .home-routine-name{flex:1;font-weight:500} .btn-sm{min-height:36px;padding:7px 14px;font-size:.85rem;border-radius:12px} .home-journal-cta h2{margin:.2em 0 .6em} /* ============================================================ Store — product grid, product detail, cart page, cart drawer ============================================================ */ /* ---- Store toolbar (search + filter pills) ---- */ .store-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:28px} .store-search{ flex:1 1 240px;min-width:200px;height:44px;padding:0 18px;border-radius:999px; border:1.5px solid var(--line);background:var(--cloud);color:var(--text);font-size:.92rem; } .store-search::placeholder{color:var(--muted)} .store-search:focus{outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(164,109,177,.18)} .store-filters{display:flex;gap:10px;flex-wrap:wrap} .chip{display:inline-flex;align-items:center;gap:5px;padding:8px 18px;border-radius:999px;font-size:.84rem;font-weight:600;background:var(--mint);color:var(--text);border:1.5px solid transparent;text-decoration:none} .chip:hover{text-decoration:none;border-color:var(--sage)} .chip.active{background:var(--grad);color:#fff} /* ---- Product grid cards ---- */ .product-card{padding:0;overflow:hidden;display:flex;flex-direction:column} .product-card-link{display:block;color:inherit;text-decoration:none} .product-card-link:hover{text-decoration:none} .product-art{ height:180px;display:flex;align-items:center;justify-content:center;font-size:3rem; background:linear-gradient(135deg,var(--mint),var(--cloud));position:relative; } .product-art img{width:100%;height:100%;object-fit:cover} .product-body{padding:18px 20px 4px} .product-body h3{margin:.4em 0 .3em;font-size:1.08rem} .tag-pill{display:inline-block;padding:3px 10px;border-radius:8px;font-size:.72rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;background:var(--mint);color:var(--lavender)} .product-price{display:flex;align-items:baseline;gap:8px;margin-top:8px} .product-price .price{font-weight:700;font-size:1.12rem;color:var(--text)} .product-price-lg .price{font-size:1.6rem} .price-was{color:var(--muted);text-decoration:line-through;font-size:.88rem} .product-card-add{padding:14px 20px 20px} /* ---- Product detail page ---- */ .product-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;margin-top:20px} .product-detail-art{ aspect-ratio:1/1;border-radius:var(--radius-lg);display:flex;align-items:center;justify-content:center; font-size:5rem;background:linear-gradient(135deg,var(--mint),var(--cloud));overflow:hidden; } .product-detail-art img{width:100%;height:100%;object-fit:cover} .product-detail-info h1{margin:.3em 0 .2em} .product-desc{margin:14px 0;line-height:1.65} .qty-field{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--muted);max-width:120px;margin-bottom:14px} .qty-field input{height:42px;border-radius:12px;border:1.5px solid var(--line);background:var(--cloud);color:var(--text);padding:0 14px;font-size:1rem} .add-actions{display:flex;gap:12px;flex-wrap:wrap} .product-extra{margin-top:36px;display:flex;flex-direction:column;gap:10px} .product-extra details{background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px} .product-extra summary{font-weight:600;cursor:pointer} .product-extra .prose{margin-top:10px;line-height:1.6} /* ---- Full cart page ---- */ .cart-layout{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:start;margin-top:20px} .cart-lines{display:flex;flex-direction:column;gap:14px} .cart-line{display:grid;grid-template-columns:76px 1fr auto auto;align-items:center;gap:16px} .cart-line-art{width:76px;height:76px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.8rem;background:var(--mint);overflow:hidden} .cart-line-art img{width:100%;height:100%;object-fit:cover} .cart-line-info h3{margin:0 0 .2em;font-size:1rem} .cart-line-info .price{font-weight:600;color:var(--text)} .qty-inline input{width:64px;height:38px;border-radius:10px;border:1.5px solid var(--line);background:var(--sand);color:var(--text);text-align:center} .cart-line-total{font-weight:700;white-space:nowrap} .cart-summary{position:sticky;top:88px;display:flex;flex-direction:column;gap:10px} .cart-summary .row{display:flex;justify-content:space-between;font-size:.95rem} .cart-summary .row.total{font-size:1.15rem;font-weight:700;border-top:1px solid var(--line);padding-top:12px;margin-top:4px} .cart-summary .btn{margin-top:8px} .empty-state{padding:60px 24px} /* ============================================================ Cart drawer — slide-out panel (mirrors zenqui.cloud reference) ============================================================ */ .cart-drawer{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none} .cart-drawer.open{visibility:visible;pointer-events:auto} .cart-drawer-backdrop{ position:absolute;inset:0;background:rgba(10,4,20,.55);opacity:0;transition:opacity .25s ease; } .cart-drawer.open .cart-drawer-backdrop{opacity:1} .cart-drawer-panel{ position:absolute;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--sand); box-shadow:var(--shadow);display:flex;flex-direction:column;transform:translateX(100%); transition:transform .3s cubic-bezier(.32,.72,0,1); } .cart-drawer.open .cart-drawer-panel{transform:translateX(0)} body.cart-drawer-lock{overflow:hidden} .cart-drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)} .cart-drawer-head h2{margin:0;font-size:1.2rem;display:flex;align-items:center;gap:8px} .cart-drawer-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 6px;border-radius:12px;background:var(--grad);color:#fff;font-size:.78rem;font-weight:700} .cart-drawer-close{background:none;border:none;font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:10px} .cart-drawer-close:hover{background:var(--mint);color:var(--text)} .cart-drawer-body{flex:1;overflow-y:auto;padding:20px 22px 28px;display:flex;flex-direction:column;gap:20px} .cart-drawer-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:60px 10px;text-align:center} .cart-drawer-empty-ico{font-size:2.4rem} .cart-drawer-lines{display:flex;flex-direction:column;gap:16px} .cart-drawer-line{display:grid;grid-template-columns:56px 1fr auto auto;align-items:center;gap:12px} .cart-drawer-line-art{width:56px;height:56px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:var(--mint);overflow:hidden;flex:0 0 auto} .cart-drawer-line-art img{width:100%;height:100%;object-fit:cover} .cart-drawer-line-info h4{margin:0 0 .2em;font-size:.94rem} .cart-drawer-line-info .price{margin:0 0 6px;font-size:.86rem;color:var(--muted)} .qty-stepper{display:inline-flex;align-items:center;gap:8px} .qty-stepper form{display:inline-flex} .qty-btn{ width:26px;height:26px;border-radius:8px;border:1.5px solid var(--line);background:var(--cloud); color:var(--text);font-size:1rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center; } .qty-btn:hover:not([disabled]){border-color:var(--sage);background:var(--mint)} .qty-btn[disabled]{opacity:.4;cursor:not-allowed} .qty-val{min-width:20px;text-align:center;font-weight:600;font-size:.88rem} .cart-drawer-line-total{font-weight:700;font-size:.9rem;white-space:nowrap} .cart-drawer-line-del{background:none;border:none;color:var(--muted);font-size:1rem;cursor:pointer;padding:6px;border-radius:8px} .cart-drawer-line-del:hover{background:var(--mint);color:var(--clay)} .cart-drawer-recs{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:12px} .cart-drawer-recs-title{margin:0;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .cart-drawer-rec{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px} .cart-drawer-rec-ico{ width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center; background:var(--grad-orb);font-size:.9rem;flex:0 0 auto; } .cart-drawer-rec-info h5{margin:0;font-size:.86rem} .cart-drawer-rec-info p{margin:0;font-size:.76rem} .cart-drawer-rec-add{ padding:6px 14px;border-radius:999px;border:1.5px solid var(--sage);background:transparent;color:var(--text); font-size:.78rem;font-weight:600;cursor:pointer; } .cart-drawer-rec-add:hover{background:var(--mint)} .cart-drawer-summary{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:8px} .cart-drawer-summary .row{display:flex;justify-content:space-between;font-size:.92rem;color:var(--muted)} .cart-drawer-summary .row.total{font-size:1.1rem;font-weight:700;color:var(--text);border-top:1px solid var(--line);padding-top:10px;margin-top:2px} .cart-drawer-cta{margin-top:8px} .cart-drawer-summary .link-arrow{margin-top:2px} @media (max-width:640px){ .product-detail-grid{grid-template-columns:1fr} .cart-layout{grid-template-columns:1fr} .cart-summary{position:static} .cart-line{grid-template-columns:56px 1fr auto;grid-template-areas:"art info total" "del del del"} .cart-drawer-panel{width:100vw} } /* ---- WhatsApp click-to-chat floating button ---- */ .wa-fab{ position:fixed;right:20px;bottom:20px;z-index:150; width:56px;height:56px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:#25D366;color:#fff; box-shadow:0 6px 20px rgba(37,211,102,.45); text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; } .wa-fab:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 10px 26px rgba(37,211,102,.55);filter:brightness(1.03)} .wa-fab:focus-visible{outline:3px solid #fff;outline-offset:3px} .wa-fab-icon{display:block} /* Nudge above the mobile bottom cart bar / safe-area if present */ @supports(padding:max(0px)){ .wa-fab{bottom:max(20px, env(safe-area-inset-bottom))} } @media (max-width:640px){ .wa-fab{width:52px;height:52px;right:16px;bottom:16px} } @media (prefers-reduced-motion:reduce){ .wa-fab{transition:none} .wa-fab:hover{transform:none} } /* ---- Inline admin edit button (front-of-site, admin-only) ---- */ .admin-inline-edit{ display:inline-flex;align-items:center;gap:8px; margin:0 0 14px;padding:6px 6px 6px 12px; background:color-mix(in srgb, var(--gold) 14%, transparent); border:1px dashed var(--gold);border-radius:var(--radius-sm); } .admin-inline-edit__badge{ font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--gold); } .admin-inline-edit .btn-sm{ padding:6px 12px;font-size:.85rem;border-radius:10px; } /* ============================================================ Member Sanctuary — spiritual home redesign ============================================================ */ /* Calming hero with a slow breathing orb behind the greeting */ .sanctuary-hero{position:relative;overflow:hidden;padding:16px 0 8px} .sanctuary-hero__inner{position:relative;z-index:1} .sanctuary-hero__orb{ position:absolute;top:-160px;right:-120px;width:420px;height:420px;border-radius:50%; background:var(--grad-orb);filter:blur(60px);opacity:.28;z-index:0; animation:sanctuaryBreath 12s ease-in-out infinite;pointer-events:none; } @keyframes sanctuaryBreath{0%,100%{transform:scale(.92);opacity:.22}50%{transform:scale(1.08);opacity:.34}} .sanctuary-hero .home-title{font-family:var(--serif);font-size:clamp(1.7rem,3.4vw,2.5rem);max-width:22ch;margin:.1em 0 .35em} .sanctuary-hero .home-streak-msg{display:inline-flex;align-items:center;gap:8px;background:rgba(214,166,93,.16);color:var(--gold);padding:7px 15px;border-radius:999px;font-weight:600;font-size:.95rem} .sanctuary-hero .streak-flame{filter:saturate(1.2)} /* Zone headers group the page into calm sections */ .zone-head{margin:34px 0 18px} .zone-head:first-of-type{margin-top:26px} .zone-title{font-family:var(--serif);font-size:1.5rem;margin:0 0 2px;color:var(--text)} .zone-title::before{content:"";display:inline-block;width:26px;height:2px;background:var(--grad);border-radius:2px;vertical-align:middle;margin-right:12px;opacity:.9} .zone-sub{color:var(--muted);font-size:.98rem;margin:0} /* Responsive sanctuary grid: 3 gentle columns that reflow on mobile */ .sanctuary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0} .sanctuary-grid .span-2{grid-column:span 2} .sanctuary-grid .span-3{grid-column:1 / -1} /* Zen cards — softer, warmer, with a quiet lift on hover */ .zen-card{ background:var(--cloud);border:1px solid var(--line);border-radius:var(--radius-lg); padding:26px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden; transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease,border-color .35s ease; animation:zenFadeUp .6s ease both; } .zen-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--sage)} .zen-card .eyebrow{color:var(--clay)} /* stagger the fade-up so cards settle in sequence */ .sanctuary-grid .zen-card:nth-child(2){animation-delay:.06s} .sanctuary-grid .zen-card:nth-child(3){animation-delay:.12s} .sanctuary-grid .zen-card:nth-child(4){animation-delay:.18s} @keyframes zenFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* Soft-tinted variant for the journal check-in */ .zen-card--soft{background:linear-gradient(160deg,var(--mint),var(--cloud))} .zen-card--soft h2{font-family:var(--serif);margin:.15em 0 .7em} /* Featured & store share the "media + text" body */ .home-featured-body,.home-store-body{display:flex;gap:22px;align-items:center;flex-wrap:wrap} .home-featured-text,.home-store-text{flex:1;min-width:220px} .home-featured-text h2,.home-store-text h3{font-family:var(--serif);margin:.15em 0 .35em} .zen-kind{display:inline-block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--lavender);background:rgba(164,109,177,.16);padding:3px 10px;border-radius:999px;margin-bottom:8px} /* ---- Themed art tiles (replace bare emoji) ---- */ .zen-art{ width:132px;height:132px;flex:0 0 auto;border-radius:22px;overflow:hidden; display:flex;align-items:center;justify-content:center;position:relative; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),var(--shadow-sm); } .zen-art img{width:100%;height:100%;object-fit:cover;display:block} .zen-art__glyph{font-size:3rem;line-height:1;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))} /* Soft grain-free glow overlay */ .zen-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),transparent 55%);pointer-events:none} /* Per-type calming gradients */ .zen-art--audio{background:linear-gradient(150deg,#6FA8DC,#A46DB1)} .zen-art--reading{background:linear-gradient(150deg,#A46DB1,#C67AAB)} .zen-art--course{background:linear-gradient(150deg,#7a5aa0,var(--gold))} .zen-art--physical{background:linear-gradient(150deg,#5a9e8f,#A46DB1)} .zen-art--digital{background:linear-gradient(150deg,#C67AAB,var(--gold))} /* Quote card — set apart as a moment of stillness */ .zen-card--quote{background:linear-gradient(135deg,var(--mint),var(--cloud));text-align:center} .zen-card--quote blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.45;color:var(--lavender);max-width:44ch;margin:12px auto 10px;border:0;padding:0} .zen-card--quote cite{color:var(--muted);font-style:normal;font-weight:600} /* Progress ring stat */ .home-progress .progress-rings{display:flex;justify-content:center;margin:8px 0 14px} .home-progress .stat{text-align:center} .home-progress .stat .num{font-family:var(--serif);font-size:2.8rem;font-weight:600;color:var(--ever);line-height:1} .home-progress .stat .lbl{color:var(--muted);font-size:.9rem;margin-top:4px} .home-progress .link-arrow{color:var(--ever);font-weight:600;display:inline-block;margin-top:4px} /* Library shortcut — full-width quiet invitation */ .home-library-cta{display:flex;align-items:center;justify-content:center;padding:22px;background:transparent;border-style:dashed} .home-library-cta .btn-ghost{font-size:1.05rem} /* Empty-state routine copy breathes a little more */ .zen-empty{margin-bottom:16px} /* Reduced-motion: honor the user's calm */ @media (prefers-reduced-motion:reduce){ .sanctuary-hero__orb{animation:none} .zen-card{animation:none;transition:none} .zen-card:hover{transform:none} } /* Responsive reflow */ @media (max-width:900px){ .sanctuary-grid{grid-template-columns:repeat(2,1fr)} .sanctuary-grid .span-2,.sanctuary-grid .span-3{grid-column:1 / -1} } @media (max-width:600px){ .sanctuary-grid{grid-template-columns:1fr} .sanctuary-grid .span-2{grid-column:1 / -1} .zen-art{width:100%;height:150px} .home-featured-body,.home-store-body{flex-direction:column;align-items:stretch;text-align:center} .sanctuary-hero__orb{width:280px;height:280px;top:-120px;right:-90px} }