#ssk-app{ --primary-purple:#C7A8F8; --primary-purple-dark:#8B5CF6; --accent-teal:#21D4C6; --accent-teal-dark:#10B3A7; --accent-pink:#FF4FD8; --ssk-ink:#1A1022; --ssk-soft:rgba(26,16,34,.70); --ssk-nav-offset:88px; } #ssk-app{position:relative;overflow-x:hidden;} @supports (overflow: clip){ #ssk-app{overflow-x:clip;} } #ssk-app .ssk-page{position:relative;z-index:1;} /* Astra layout guardrails (SSK templates only; body class is added by the child theme). */ body.ssk-context .site-content .ast-container{ max-width:none !important; padding-left:0 !important; padding-right:0 !important; } body.ssk-context #primary.content-area{ float:none !important; width:100% !important; margin:0 !important; } body.ssk-context #secondary, body.ssk-context .ast-sidebar-wrapper{ display:none !important; } /* Woo wrappers sometimes constrain width/padding; we provide our own container inside #ssk-app. */ body.ssk-context.woocommerce .woocommerce, body.ssk-context.woocommerce-page .woocommerce{ max-width:none !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; } /* Defensive reset: * Astra uses body classes like `columns-4` on Woo archives to control product grid columns. * Tailwind also defines `columns-*` utilities (CSS multi-column), which can accidentally apply * to if Tailwind isn't properly scoped and collapse the whole layout into narrow columns. */ body.woocommerce[class*="columns-"], body.woocommerce-page[class*="columns-"]{ columns:auto !important; column-count:auto !important; column-width:auto !important; column-gap:normal !important; } /* Standard centered shell (works even if Tailwind fails to load). */ #ssk-app .ssk-container{ max-width:72rem; margin:0 auto; padding:0 1rem; } @media (min-width:480px){ #ssk-app .ssk-container{padding:0 1.25rem;} } @media (min-width:1024px){ #ssk-app .ssk-container{padding:0 1.5rem;} } /* Minimal Tailwind preflight substitute (scoped) */ #ssk-app, #ssk-app *, #ssk-app *::before, #ssk-app *::after{ box-sizing:border-box; } /* Anchor offset (sticky header safe) */ #ssk-app [id]{ scroll-margin-top:calc(var(--ssk-nav-offset) + 12px); } /* Consistent section spacing when templates use py-10 */ #ssk-app main > section.py-10{ padding-top:2.25rem; padding-bottom:2.25rem; } @media (min-width:768px){ #ssk-app main > section.py-10{padding-top:3rem;padding-bottom:3rem;} } /* Base typography inside SSK wrapper */ #ssk-app .ssk-page{ color:rgba(26,16,34,.92); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; } #ssk-app .text-tiny{font-size:.78rem;line-height:1.08rem;} #ssk-app .text-small{font-size:.92rem;line-height:1.35rem;} @media (min-width:768px){ #ssk-app .text-tiny{font-size:.8rem;line-height:1.1rem;} #ssk-app .text-small{font-size:.95rem;line-height:1.4rem;} } @media (min-width:1280px){ #ssk-app .text-tiny{font-size:.82rem;line-height:1.12rem;} #ssk-app .text-small{font-size:1rem;line-height:1.48rem;} } #ssk-app .ssk-h1{font-size:clamp(1.75rem, 3.2vw, 3.25rem);line-height:1.12;} #ssk-app .ssk-h2{font-size:clamp(1.25rem, 1.8vw, 1.85rem);line-height:1.2;} /* Consistent media sizing */ #ssk-app .ssk-media{ border-radius:1rem; overflow:hidden; border:1px solid rgba(26,16,34,.10); background:rgba(26,16,34,.04); } #ssk-app .ssk-media img, #ssk-app .ssk-media iframe{ width:100%; height:100%; display:block; } /* Flexible media defaults (Tailwind preflight is disabled) */ #ssk-app img, #ssk-app svg, #ssk-app video, #ssk-app iframe, #ssk-app canvas{ max-width:100%; } #ssk-app img, #ssk-app video{ height:auto; } /* Accessible hiding utility (fallback if Tailwind utilities fail to load) */ #ssk-app .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Skip link */ #ssk-app .ssk-skip-link{ position:fixed; left:50%; top:0; z-index:99999; padding:.4rem .65rem; font-size:.82rem; line-height:1.2; border-radius:.75rem; background:#fff; color:var(--ssk-ink); border:1px solid rgba(26,16,34,.12); box-shadow:0 12px 30px rgba(26,16,34,.12); white-space:nowrap; max-width:calc(100vw - 24px); transform:translate(-50%, calc(-100% - 14px)); opacity:0; pointer-events:none; transition:transform .18s ease, opacity .18s ease; } #ssk-app .ssk-skip-link:focus, #ssk-app .ssk-skip-link:focus-visible{ transform:translate(-50%, calc(var(--ssk-nav-offset) + 10px)); opacity:1; pointer-events:auto; outline:3px solid rgba(16,179,167,.45); outline-offset:3px; } /* Focus-visible (scoped; won’t affect Astra header/footer) */ #ssk-app a:focus-visible, #ssk-app button:focus-visible, #ssk-app summary:focus-visible, #ssk-app input:focus-visible, #ssk-app select:focus-visible, #ssk-app textarea:focus-visible{ outline:3px solid rgba(16,179,167,.45); outline-offset:3px; border-radius:14px; } /* Shared components */ #ssk-app .hero-frame{ border-radius:1.5rem; border:1px solid rgba(26,16,34,.10); background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.60)); box-shadow:0 18px 60px rgba(26,16,34,.14); position:relative; overflow:hidden; } #ssk-app .hero-frame:before{ content:""; position:absolute; inset:-1px; background: radial-gradient(700px 420px at 10% 10%, rgba(199,168,248,.22), transparent 60%), radial-gradient(700px 420px at 90% 30%, rgba(33,212,198,.14), transparent 62%), radial-gradient(600px 360px at 50% 100%, rgba(255,79,216,.06), transparent 60%); pointer-events:none; } #ssk-app .hero-frame > *{position:relative;} #ssk-app .compact-card{ padding:1.25rem; border-radius:1rem; background:rgba(255,255,255,.92); box-shadow:0 10px 30px rgba(26,16,34,.08); border:1px solid rgba(199,168,248,.20); position:relative; overflow:hidden; } #ssk-app .card-hover{transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;} #ssk-app .card-hover:hover{transform:translateY(-2px);box-shadow:0 18px 45px rgba(26,16,34,.12);border-color:rgba(199,168,248,.35);} #ssk-app .ssk-product-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #ssk-app .woocommerce ul.products{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:1rem; margin:0; padding:0; list-style:none; } @media (min-width:1024px){ #ssk-app .woocommerce ul.products{grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));} } #ssk-app .woocommerce ul.products::before, #ssk-app .woocommerce ul.products::after{ content:none; } #ssk-app .woocommerce ul.products li.product{ float:none!important; width:auto!important; margin:0!important; padding:14px; background:rgba(255,255,255,.92); border:1px solid rgba(26,16,34,.10); border-radius:1.25rem; box-shadow:0 10px 30px rgba(26,16,34,.06); overflow:hidden; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; } #ssk-app .woocommerce ul.products li.product:hover{ transform:translateY(-2px); box-shadow:0 18px 45px rgba(26,16,34,.12); border-color:rgba(199,168,248,.35); } #ssk-app .woocommerce ul.products li.product a{ text-decoration:none; } #ssk-app .woocommerce ul.products li.product a img{ border-radius:1rem; width:100%; aspect-ratio:1/1; object-fit:cover; background:rgba(26,16,34,.04); } #ssk-app .woocommerce ul.products li.product .woocommerce-loop-product__title{ margin:.6rem 0 .25rem; font-weight:800; color:rgba(26,16,34,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #ssk-app .woocommerce ul.products li.product .price{ color:rgba(139,92,246,1); font-weight:800; } #ssk-app .woocommerce ul.products li.product .button{ border-radius:.9rem; background:linear-gradient(90deg, rgba(139,92,246,1), rgba(33,212,198,1)); border:none; color:#fff; font-weight:800; min-height:44px; width:100%; } #ssk-app .badge-glow{box-shadow:0 10px 25px rgba(139,92,246,.18);} #ssk-app .btn-sheen{position:relative;overflow:hidden;} #ssk-app .btn-sheen:after{ content:""; position:absolute; inset:-40%; background:linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.32), rgba(255,255,255,0)); transform:translateX(-60%) rotate(8deg); animation:sskSheen 5.2s linear infinite; pointer-events:none; } @keyframes sskSheen{to{transform:translateX(60%) rotate(8deg);}} /* Section rhythm helpers */ #ssk-app .ssk-tight{padding-top:2.25rem;padding-bottom:2.25rem;} @media (min-width:768px){ #ssk-app .ssk-tight{padding-top:3rem;padding-bottom:3rem;} } /* Blend sections without harsh dividers */ #ssk-app .ssk-blend{position:relative;} #ssk-app .ssk-blend::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:48px; pointer-events:none; background:linear-gradient( 180deg, rgba(255,255,255,0), rgba(124,58,237,.06), rgba(33,212,198,.05), rgba(255,255,255,0) ); filter:blur(10px); opacity:.9; } /* Hero spotlight (visual only) */ #ssk-app .ssk-hero-hotspot{position:relative;isolation:isolate;} #ssk-app .ssk-hero-hotspot::before{ content:""; position:absolute; inset:-24px -16px -18px -16px; z-index:-1; pointer-events:none; background: radial-gradient(540px 300px at 18% 18%, rgba(124,58,237,.14), transparent 60%), radial-gradient(540px 300px at 72% 18%, rgba(33,212,198,.12), transparent 62%), radial-gradient(760px 420px at 50% 100%, rgba(236,72,153,.06), transparent 65%); filter:blur(2px); } /* Utility clamps (Tailwind CDN may not include line-clamp plugin) */ #ssk-app .line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;} #ssk-app .line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} /* Product cards: prevent title wrapping (ellipsize) */ #ssk-app .woocommerce-loop-product__title, #ssk-app .wc-block-grid__product-title, #ssk-app .ssk-product-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Woo thumbnails: consistent square crop */ #ssk-app .woocommerce ul.products li.product a img, #ssk-app .woocommerce ul.products li.product img{ aspect-ratio:1 / 1; object-fit:cover; border-radius:1rem; background:rgba(26,16,34,.04); } /* Link cards (used by Connect/Home/Subscribe) */ #ssk-app .ssk-studio-link{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 14px; border-radius:18px; background:rgba(255,255,255,.92); border:1px solid rgba(26,16,34,.10); box-shadow:0 10px 30px rgba(26,16,34,.08); text-decoration:none; color:rgba(26,16,34,.92); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; min-height:64px; } #ssk-app .ssk-studio-link:hover{ transform:translateY(-2px); box-shadow:0 18px 45px rgba(26,16,34,.12); border-color:rgba(199,168,248,.35); } #ssk-app .ssk-studio-ico{ width:44px; height:44px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(139,92,246,.22), rgba(33,212,198,.18)); border:1px solid rgba(26,16,34,.06); flex:0 0 auto; } #ssk-app .ssk-studio-text{display:flex;flex-direction:column;gap:2px;min-width:0;} #ssk-app .ssk-studio-title{font-weight:800;line-height:1.15;} #ssk-app .ssk-studio-meta{font-size:.86rem;line-height:1.25;color:rgba(26,16,34,.70);} #ssk-app .ssk-studio-go{color:rgba(26,16,34,.55);flex:0 0 auto;} /* Quick link chips */ #ssk-app .ssk-chipbar{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem;} #ssk-app .ssk-chip{ display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.55rem .85rem; border-radius:999px; background:rgba(255,255,255,.75); border:1px solid rgba(26,16,34,.10); box-shadow:0 10px 22px rgba(26,16,34,.06); color:rgba(26,16,34,.88); text-decoration:none; font-weight:800; font-size:.86rem; } #ssk-app .ssk-chip:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(26,16,34,.10);} /* Details UX (keyboard-native) */ #ssk-app details summary{list-style:none;} #ssk-app details summary::-webkit-details-marker{display:none;} #ssk-app details summary i{transition:transform .18s ease;} #ssk-app details[open] summary i{transform:rotate(180deg);} /* Reduced motion */ @media (prefers-reduced-motion: reduce){ #ssk-app .btn-sheen:after{animation:none;} #ssk-app .card-hover{transition:none;} #ssk-app details summary i{transition:none;} #ssk-app .ssk-studio-link:hover{transform:none;} #ssk-app .ssk-chip:hover{transform:none;} } /* Rose garden decor overlay (scoped; does not affect layout) */ #ssk-app .ssk-decor{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; } #ssk-app .ssk-decor__item{ position:absolute; left:var(--ssk-x, 6%); top:var(--ssk-y, 12%); transform:translate(-50%, -50%) rotate(var(--ssk-r, -6deg)) scale(var(--ssk-s, 1)); opacity:var(--ssk-o, .26); filter:blur(var(--ssk-blur, 0px)) drop-shadow(0 18px 35px rgba(26,16,34,.10)); mix-blend-mode:multiply; } #ssk-app .ssk-decor__vine{width:160px;height:420px;} #ssk-app .ssk-decor__butterfly{width:220px;height:160px;} @keyframes sskFloat{ 0%{transform:translate(-50%, -50%) rotate(var(--ssk-r, 0deg)) scale(var(--ssk-s, 1)) translateY(0);} 50%{transform:translate(-50%, -50%) rotate(calc(var(--ssk-r, 0deg) + 3deg)) scale(var(--ssk-s, 1)) translateY(-10px);} 100%{transform:translate(-50%, -50%) rotate(var(--ssk-r, 0deg)) scale(var(--ssk-s, 1)) translateY(0);} } @keyframes sskSway{ 0%{transform:translate(-50%, -50%) rotate(var(--ssk-r, 0deg)) scale(var(--ssk-s, 1));} 50%{transform:translate(-50%, -50%) rotate(calc(var(--ssk-r, 0deg) + 2deg)) scale(var(--ssk-s, 1));} 100%{transform:translate(-50%, -50%) rotate(var(--ssk-r, 0deg)) scale(var(--ssk-s, 1));} } #ssk-app .ssk-decor__butterfly{animation:sskFloat 6.5s ease-in-out infinite;} #ssk-app .ssk-decor__vine{animation:sskSway 9.5s ease-in-out infinite;} @media (prefers-reduced-motion: reduce){ #ssk-app .ssk-decor__butterfly, #ssk-app .ssk-decor__vine{animation:none !important;} } /* Mini footer */ #ssk-app .ssk-mini-footer{ margin-top:2.5rem; padding:1.25rem 0 0.75rem; border-top:1px solid rgba(26,16,34,.08); } #ssk-app .ssk-mini-footer__inner{ max-width:72rem; margin:0 auto; padding:0 1rem; display:flex; flex-direction:column; gap:.75rem; align-items:flex-start; } @media (min-width:768px){ #ssk-app .ssk-mini-footer__inner{flex-direction:row;align-items:center;justify-content:space-between;} } #ssk-app .ssk-mini-footer__nav{ display:flex; flex-wrap:wrap; gap:.85rem 1rem; font-size:.92rem; } #ssk-app .ssk-mini-footer__nav a{color:rgba(26,16,34,.78);text-decoration:none;} #ssk-app .ssk-mini-footer__nav a:hover{color:rgba(124,58,237,1);text-decoration:underline;} #ssk-app .ssk-mini-footer__connect{ display:flex; gap:.5rem; align-items:center; } #ssk-app .ssk-mini-footer__connect a{ width:2.25rem; height:2.25rem; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:rgba(26,16,34,.06); color:rgba(26,16,34,.78); text-decoration:none; } #ssk-app .ssk-mini-footer__connect a:hover{background:rgba(124,58,237,.12);color:rgba(124,58,237,1);} #ssk-app .ssk-mini-footer__meta{ font-size:.78rem; color:rgba(26,16,34,.60); }