/* ============================================================ site.css - non-critical styles (loaded normally; critical CSS is inline in ) ============================================================ */ .skip-link{position:absolute;left:-999px;top:0;background:#fff;padding:10px 16px;border-radius:0 0 8px 0;z-index:200} .skip-link:focus{left:0} /* ---------- Navigation ---------- */ .mainnav{margin-left:auto} .nav-toggle{display:inline-flex;flex-direction:column;gap:4px;background:none;border:0;padding:10px;cursor:pointer} .nav-toggle span{width:22px;height:2px;background:var(--ink);border-radius:2px} .navmenu{list-style:none;margin:0;padding:0} .submenu{list-style:none;margin:0;padding:0} .navgroup-btn{background:none;border:0;font:inherit;font-weight:600;color:var(--ink);cursor:pointer;padding:10px 0} .navmenu a{color:var(--ink);text-decoration:none;display:block} .submenu-main{list-style:none;margin:0;padding:0} .submenu-sub{margin-top:10px} .submenu-head{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#a99098;margin:0 0 4px;font-weight:700} .submenu-sub ul{list-style:none;margin:0;padding:0} @media(max-width:759px){ .navmenu{position:fixed;inset:60px 0 auto 0;background:var(--surface);border-bottom:1px solid var(--line); padding:0 18px;max-height:0;overflow:hidden;visibility:hidden;transition:max-height .25s ease,visibility .25s ease,padding .25s ease;box-shadow:var(--shadow)} .navmenu.open{max-height:84vh;overflow:auto;visibility:visible;padding:8px 18px 20px} .navgroup{border-bottom:1px solid var(--line)} .submenu{max-height:0;overflow:hidden;transition:max-height .3s ease} .navgroup.open .submenu{max-height:1600px;padding-bottom:10px} .submenu a{padding:8px 0 8px 12px;color:var(--muted)} .submenu-head{padding-left:12px;margin-top:8px} } @media(min-width:760px){ .nav-toggle{display:none} .navmenu{display:flex;gap:8px;align-items:center} .navgroup{position:static} .navgroup-btn{padding:8px 12px;border-radius:10px} .navgroup:hover .navgroup-btn,.navgroup:focus-within .navgroup-btn{background:#f3e9e4} .submenu{position:absolute;top:60px;left:0;right:0;max-width:var(--maxw);margin:0 auto; background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow); padding:20px 24px; opacity:0;visibility:hidden;transform:translateY(6px);transition:.15s ease;max-height:78vh;overflow:auto} .navgroup:hover .submenu,.navgroup:focus-within .submenu{opacity:1;visibility:visible;transform:none} .submenu-main{list-style:none;margin:0 0 6px;padding:0 0 14px; display:flex;flex-wrap:wrap;gap:8px 10px;border-bottom:1px solid var(--line)} .submenu-main a{font-weight:600;background:#f6ebe7;padding:7px 14px;border-radius:999px;font-size:.9rem} .submenu-main a:hover{background:#efddd6} .submenu-sub{margin-top:14px} .submenu-head{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase; color:#a07d88;font-weight:700;margin:0 0 8px} .submenu-sub ul{list-style:none;margin:0;padding:0;columns:230px;column-gap:24px} .submenu-sub li{margin:0 0 2px;break-inside:avoid} .submenu-sub a{padding:6px 8px;border-radius:8px;font-size:.92rem;white-space:normal} .submenu-sub a:hover{background:#f7efeb} } /* ---------- Ads ---------- */ .ad-wrap{margin:30px auto;text-align:center;max-width:var(--maxw)} .ad-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#b6a9a1;margin-bottom:6px} .ad-sidebar{position:sticky;top:80px} /* ---------- Footer ---------- */ .foot-top{margin-bottom:28px;padding-bottom:24px;border-bottom:1px solid #43394a} .foot-cats{display:grid;grid-template-columns:1fr;gap:30px} .foot-cat h3{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 14px; padding-bottom:8px;border-bottom:1px solid #43394a} .foot-cols{} .foot-cols>ul{columns:160px;column-gap:20px} .foot-subhead{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#9a8b93; margin:16px 0 8px;font-weight:700} .foot-cols .foot-subhead+ul{columns:108px;column-gap:16px} .foot-cols ul{list-style:none;margin:0;padding:0} .foot-cols li{margin:0 0 7px;break-inside:avoid} .foot-cat a{color:#d3c8ce;text-decoration:none;font-size:.9rem;white-space:normal} .foot-cat a:hover{color:#fff;text-decoration:underline} /* Mobile: footer link lists collapse to a single column (long descriptive titles overflow narrow columns) */ @media(max-width:759px){ .foot-cols>ul,.foot-cols .foot-subhead+ul{columns:auto} } .foot-legal{margin-top:30px;padding-top:20px;border-top:1px solid #43394a;color:#998b92;font-size:.85rem} .foot-legal a{color:#cabfc6} .foot-legal-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px} .foot-legal-links a{color:#bcaeb6;text-decoration:none;font-size:.85rem} .foot-legal-links a:hover{color:#fff;text-decoration:underline} @media(min-width:680px){.foot-brand{max-width:none}} /* Cookie consent */ #cookie-consent{position:fixed;left:14px;right:14px;bottom:14px;z-index:70;max-width:560px;margin:0 auto; background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 34px rgba(43,37,48,.22); padding:16px 18px;opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .3s ease} #cookie-consent.show{opacity:1;transform:none} #cookie-consent p{margin:0 0 12px;font-size:.9rem;color:var(--ink)} #cookie-consent .cc-actions{display:flex;gap:10px;justify-content:flex-end} #cookie-consent .btn{min-height:40px;padding:.5em 1.1em} /* ---------- Generic content ---------- */ .lede{font-size:1.12rem;color:var(--muted);max-width:62ch} .prose{max-width:none} .prose p{margin:0 0 1em} .grid{display:grid;gap:18px} .eyebrow{display:inline-block;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase; color:var(--rose-d);font-weight:700;background:#f6ebe7;padding:5px 11px;border-radius:999px} .meta-line{font-size:.85rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center} /* tool directory cards */ .tool-cards{grid-template-columns:1fr} .tool-card{padding:22px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px; transition:transform .14s ease,box-shadow .14s ease} .tool-card:hover{transform:translateY(-3px);box-shadow:0 10px 30px rgba(43,37,48,.10)} .tool-card h3{margin:0;font-size:1.15rem} .tool-card p{margin:0;color:var(--muted);font-size:.95rem} .tool-card .vol{font-size:.78rem;color:var(--rose-d);font-weight:700} .swatch-dots{display:flex;gap:4px;margin-top:4px} .swatch-dots i{width:16px;height:16px;border-radius:50%;display:block} @media(min-width:620px){.tool-cards{grid-template-columns:1fr 1fr}} @media(min-width:920px){.tool-cards{grid-template-columns:1fr 1fr 1fr}} /* ---------- Palette / swatches ---------- */ .palette{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media(min-width:520px){.palette{grid-template-columns:repeat(3,1fr)}} @media(min-width:820px){.palette{grid-template-columns:repeat(4,1fr)}} .swatch{position:relative;border:0;cursor:pointer;border-radius:12px;aspect-ratio:1/1; display:flex;align-items:flex-end;padding:10px;font:inherit;text-align:left; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);transition:transform .1s ease} .swatch:hover{transform:scale(1.03)} .swatch:active{transform:scale(.98)} .swatch .hex{font-size:.78rem;font-weight:700;letter-spacing:.02em; background:rgba(255,255,255,.82);padding:3px 7px;border-radius:6px;color:#2b2530} .swatch.dark .hex{background:rgba(0,0,0,.42);color:#fff} .swatch .copied{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(43,37,48,.78);color:#fff;border-radius:12px;font-weight:700;opacity:0;transition:opacity .15s} .swatch.is-copied .copied{opacity:1} .avoid-list{display:flex;flex-wrap:wrap;gap:10px} .avoid-chip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line); border-radius:999px;padding:6px 12px 6px 6px;font-size:.85rem} .avoid-chip i{width:20px;height:20px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)} /* ---------- Quiz engine ---------- */ .quiz{max-width:640px;margin:0 auto} .quiz-card{padding:26px 22px 30px} .progress{height:8px;background:#efe5e0;border-radius:999px;overflow:hidden;margin-bottom:22px} .progress>i{display:block;height:100%;background:linear-gradient(90deg,var(--rose),var(--gold)); width:0;border-radius:999px;transition:width .35s ease} .q-step{display:none;animation:fade .35s ease} .q-step.active{display:block} @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .q-count{font-size:.8rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:700} .q-title{font-size:1.35rem;margin:.3em 0 1em} .options{display:grid;gap:12px} .opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:#fff; border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;font:inherit;cursor:pointer; min-height:56px;transition:border-color .12s ease,background .12s ease,transform .08s ease} .opt:hover{border-color:var(--rose)} .opt:active{transform:scale(.99)} .opt.sel{border-color:var(--rose);background:#fbf1ee} .opt .sw{width:34px;height:34px;border-radius:9px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)} .opt .ot{font-weight:600} .opt .od{font-size:.85rem;color:var(--muted);font-weight:400} .quiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:22px} .quiz-nav .btn{flex:1} .toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0} /* result */ .result-head{display:flex;flex-direction:column;gap:6px;align-items:flex-start} .result-badge{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--rose-d);font-weight:700} .result-name{font-size:clamp(1.8rem,6vw,2.8rem);margin:0} .share-row{display:flex;flex-wrap:wrap;gap:10px} .email-capture{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#f7efeb; border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-top:18px} .email-capture input{flex:1;min-width:180px;min-height:46px;border:1px solid var(--line); border-radius:10px;padding:0 14px;font:inherit} .email-capture .dismiss{background:none;border:0;color:var(--muted);cursor:pointer;font-size:.85rem} /* interactive chart (mood ring etc.) */ .chip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px} .color-chip{border:0;cursor:pointer;border-radius:12px;padding:0;aspect-ratio:1/1;position:relative; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);transition:transform .1s} .color-chip:hover{transform:translateY(-2px)} .color-chip.sel{outline:3px solid var(--ink);outline-offset:2px} .color-chip span{position:absolute;left:8px;bottom:8px;font-size:.75rem;font-weight:700; background:rgba(255,255,255,.85);padding:2px 7px;border-radius:6px} .detail-panel{padding:22px;margin-top:16px} .detail-panel .swhead{width:100%;height:90px;border-radius:12px;margin-bottom:14px} /* season page layout */ .season-hero{display:grid;gap:18px} .season-strip{display:flex;height:80px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)} .season-strip i{flex:1} .with-side{display:grid;gap:30px} @media(min-width:980px){.with-side{grid-template-columns:1fr 300px}} .factbox{padding:18px 20px} .factbox dt{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--rose-d);margin-top:12px} .factbox dt:first-child{margin-top:0} .factbox dd{margin:.2em 0 0} .pill-row{display:flex;flex-wrap:wrap;gap:8px} .pill{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.85rem} .season-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(min-width:680px){.season-list{grid-template-columns:repeat(3,1fr)}} @media(min-width:980px){.season-list{grid-template-columns:repeat(4,1fr)}} .season-tile{text-decoration:none;color:inherit;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#fff;transition:transform .14s} .season-tile:hover{transform:translateY(-3px)} .season-tile .strip{display:flex;height:54px} .season-tile .strip i{flex:1} .season-tile .lbl{padding:10px 12px;font-weight:600;font-size:.95rem} /* FAQ */ .faq-list{display:grid;gap:10px;max-width:760px} .faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:4px 16px} .faq summary{cursor:pointer;font-weight:600;padding:12px 0;list-style:none} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";float:right;color:var(--rose);font-weight:700} .faq details[open] summary::after{content:"-"} .faq-a{padding:0 0 14px;color:var(--muted)} /* related tools */ .related{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:620px){.related{grid-template-columns:1fr 1fr 1fr}} .related a{display:block;padding:16px 18px;text-decoration:none;color:inherit} .related a:hover{box-shadow:0 8px 24px rgba(43,37,48,.10)} .related .k{font-size:.78rem;color:var(--rose-d);font-weight:700} .notice{background:#fff7ea;border:1px solid #ecd9b3;border-radius:12px;padding:14px 16px;font-size:.9rem;color:#7a6230} .hidden{display:none!important} .center{text-align:center} .mt0{margin-top:0} /* Table of contents */ .toc{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;margin:22px 0;max-width:72ch} .toc-title{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--rose-d);font-weight:700;margin:0 0 10px} .toc ol{margin:0;padding-left:1.2em;display:grid;gap:7px} .toc a{color:var(--ink);text-decoration:none} .toc a:hover{color:var(--rose-d);text-decoration:underline} /* Scroll-to-top button */ #to-top{position:fixed;right:18px;bottom:18px;z-index:60;width:46px;height:46px;border:0;border-radius:50%; background:var(--rose);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center; box-shadow:0 4px 14px rgba(43,37,48,.22);opacity:0;visibility:hidden;transform:translateY(10px); transition:opacity .2s ease,visibility .2s ease,transform .2s ease,background .15s ease} #to-top.show{opacity:1;visibility:visible;transform:none} #to-top:hover{background:var(--rose-d)} #to-top:active{transform:translateY(1px)} @media(min-width:760px){#to-top{right:26px;bottom:26px;width:50px;height:50px}} /* HTML sitemap page */ .sm-grid{display:grid;grid-template-columns:1fr;gap:30px;margin:20px 0 40px} @media(min-width:680px){.sm-grid{grid-template-columns:1fr 1fr}} @media(min-width:980px){.sm-grid{grid-template-columns:1fr 1fr 1fr}} .sm-grid h2{font-size:1.1rem;border-bottom:1px solid var(--line);padding-bottom:8px} .sm-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:7px} .sm-list a{color:var(--ink);text-decoration:none} .sm-list a:hover{color:var(--rose-d);text-decoration:underline}