/* ========================================================= FrostPal — Drawer page styles Shared by all four drawer-*.html pages. Each page picks a theme by adding class="theme-frost|butter|blush|mint" on . ========================================================= */ /* ---------- Theme tokens (per-drawer accent) ---------- */ body.theme-frost { --drawer-bg: var(--frost); --drawer-solid: var(--ice); --drawer-blob: var(--frost); } body.theme-butter{ --drawer-bg: var(--butter); --drawer-solid: #f6a847; --drawer-blob: var(--butter);} body.theme-blush { --drawer-bg: var(--blush); --drawer-solid: var(--coral); --drawer-blob: var(--blush); } body.theme-mint { --drawer-bg: var(--mint); --drawer-solid: #6dc7a0; --drawer-blob: var(--mint); } /* ---------- Breadcrumb + drawer number strip ---------- */ .crumb{ max-width:1240px;margin:0 auto;padding:12px 32px 0; display:flex;align-items:center;gap:10px; font-size:13px;font-weight:600;color:var(--ink-soft); } .crumb a{ padding:5px 12px;background:#fff;border-radius:99px; color:var(--ink-soft); box-shadow:0 2px 0 rgba(30,42,74,.06); transition:.2s; } .crumb a:hover{color:var(--ink);transform:translateY(-1px)} .crumb .sep{opacity:.5} /* ---------- Drawer hero ---------- */ .drawer-hero{ max-width:1240px;margin:0 auto; padding:28px 32px 56px; display:grid;grid-template-columns:1.15fr .9fr; gap:56px;align-items:center; } .drawer-hero .eyebrow{ display:inline-flex;align-items:center;gap:10px; padding:6px 14px 6px 6px;background:#fff;border-radius:99px; font-size:12px;font-weight:700;color:var(--ink); letter-spacing:.06em;text-transform:uppercase; box-shadow:0 3px 0 rgba(30,42,74,.08); margin-bottom:22px; } .drawer-hero .eyebrow .num{ padding:4px 10px;background:var(--drawer-bg);color:var(--ink); border-radius:99px;font-family:'Caveat'; font-size:16px;font-weight:700;letter-spacing:0; } .drawer-hero h1{ font-family:'Quicksand';font-weight:700; font-size:clamp(42px,5.8vw,74px);line-height:1.02; letter-spacing:-.028em;margin-bottom:20px;text-wrap:balance; } .drawer-hero h1 em{ font-family:'Caveat';font-style:normal;font-weight:700; color:var(--drawer-solid);font-size:1.1em; } .drawer-hero p.lead{ font-size:19px;line-height:1.55;color:var(--ink-soft); max-width:520px;margin-bottom:28px;text-wrap:pretty; } .drawer-hero .quick{ display:flex;gap:10px;flex-wrap:wrap; } .drawer-hero .quick a{ padding:9px 16px;background:#fff;color:var(--ink); border-radius:99px;font-size:13px;font-weight:700; box-shadow:0 3px 0 rgba(30,42,74,.09); transition:.25s; display:inline-flex;align-items:center;gap:7px; } .drawer-hero .quick a:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(30,42,74,.11)} /* Big drawer illustration card */ .drawer-visual{ position:relative; width:100%;aspect-ratio:1/1;max-width:440px;justify-self:end; background:var(--drawer-bg);border-radius:36px; box-shadow:0 12px 0 rgba(30,42,74,.12); display:grid;place-items:center; transform:rotate(-2deg);transition:.4s; overflow:hidden; } .drawer-visual:hover{transform:rotate(0)} .drawer-visual .big-blob{ width:60%;aspect-ratio:1;background:#fff; border-radius:50% 48% 52% 50% / 48% 52% 48% 52%; display:grid;place-items:center; font-size:96px; box-shadow:0 8px 0 rgba(30,42,74,.1); animation:bounce 4s ease-in-out infinite; } /* Little corner stickers on the visual */ .drawer-visual .st{ position:absolute;background:#fff;border-radius:16px; padding:8px 14px;font-size:12px;font-weight:700;color:var(--ink); box-shadow:0 4px 0 rgba(30,42,74,.11); display:inline-flex;align-items:center;gap:7px; animation:floatBob 5s ease-in-out infinite; } .drawer-visual .st .dot{ width:8px;height:8px;border-radius:50%;background:var(--drawer-solid); } .drawer-visual .st.st-a{top:18px;left:18px;transform:rotate(-5deg);animation-delay:-1s} .drawer-visual .st.st-b{bottom:24px;right:18px;transform:rotate(4deg);animation-delay:-3s} @keyframes floatBob{50%{transform:translateY(-8px) rotate(var(--r,-3deg))}} .drawer-visual .st.st-a{--r:-5deg} .drawer-visual .st.st-b{--r:4deg} /* ---------- What's inside — 3 focus areas ---------- */ .inside{padding:60px 32px;max-width:1240px;margin:0 auto} .inside .s-head{margin-bottom:44px} .inside-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:22px; } .focus{ background:#fff;border-radius:28px;padding:28px 26px; box-shadow:var(--shadow-card);transition:.3s; border:2px solid transparent; display:flex;flex-direction:column; } .focus:hover{transform:translateY(-6px);box-shadow:var(--shadow-card-hover);border-color:rgba(91,141,239,.15)} .focus .tag-row{ display:flex;align-items:center;justify-content:space-between; margin-bottom:18px; } .focus .blob{ width:52px;height:52px;background:var(--drawer-bg); border-radius:50% 48% 52% 50% / 48% 52% 48% 52%; display:grid;place-items:center;font-size:24px; box-shadow:inset 0 -4px 0 rgba(0,0,0,.06); } .focus .idx{ font-family:'Caveat';font-weight:700; font-size:26px;color:var(--ink-soft);opacity:.55; } .focus h3{ font-family:'Quicksand';font-weight:700; font-size:20px;line-height:1.2;letter-spacing:-.015em; margin-bottom:10px; } .focus p{font-size:14.5px;line-height:1.55;color:var(--ink-soft);margin-bottom:14px;flex-grow:1} .focus ul.signals{list-style:none;font-size:13px;font-weight:600;padding-top:14px; border-top:1.5px dashed rgba(30,42,74,.12); } .focus ul.signals li{ padding:5px 0 5px 20px;position:relative;color:var(--ink); } .focus ul.signals li::before{ content:"✓";position:absolute;left:0;top:5px; color:var(--drawer-solid);font-weight:700; } /* ---------- Workflow / how to use it — 3 steps ---------- */ .workflow{ padding:80px 32px;max-width:1240px;margin:0 auto; } .wf-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:22px; counter-reset:step; } .wf-step{ padding:28px 26px;background:#fff;border-radius:28px; box-shadow:var(--shadow-card); position:relative; transition:.3s; } .wf-step:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)} .wf-step .num{ font-family:'Quicksand';font-weight:700; font-size:64px;line-height:.9;color:var(--drawer-solid); letter-spacing:-.04em;margin-bottom:10px;opacity:.85; } .wf-step h4{ font-family:'Quicksand';font-weight:700; font-size:20px;line-height:1.15;margin-bottom:10px; } .wf-step p{font-size:14.5px;line-height:1.55;color:var(--ink-soft)} .wf-step .try{ margin-top:16px;padding:12px 14px; background:var(--bg-warm);border-radius:14px; font-size:13px;line-height:1.5;color:var(--ink); font-family:'Caveat';font-weight:700;font-size:18px; border-left:4px solid var(--drawer-solid); } /* ---------- Prompts that live here ---------- */ .related{ padding:60px 32px;max-width:1240px;margin:0 auto; } .related-grid{ display:grid;grid-template-columns:repeat(2,1fr);gap:22px; } .rel{ background:#fff;border-radius:24px;padding:24px 26px; box-shadow:var(--shadow-card); transition:.3s;display:grid;grid-template-columns:auto 1fr auto; gap:18px;align-items:center;color:var(--ink); } .rel:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)} .rel .ic{ width:52px;height:52px;background:var(--drawer-bg); border-radius:50% 48% 52% 50% / 48% 52% 48% 52%; display:grid;place-items:center;font-size:24px; box-shadow:inset 0 -4px 0 rgba(0,0,0,.06); flex-shrink:0; } .rel .txt h5{ font-family:'Quicksand';font-weight:700; font-size:17px;letter-spacing:-.01em; margin-bottom:4px; } .rel .txt p{font-size:13.5px;color:var(--ink-soft);line-height:1.5} .rel .arr{ width:38px;height:38px;border-radius:50%; background:var(--ink);color:#fff; display:grid;place-items:center;font-size:16px;font-weight:700; box-shadow:0 3px 0 #0d1428; transition:.25s;flex-shrink:0; } .rel:hover .arr{background:var(--coral);transform:translateX(4px)} /* ---------- Do/Don't callouts ---------- */ .dodont{ padding:60px 32px;max-width:1240px;margin:0 auto; } .dd-grid{ display:grid;grid-template-columns:1fr 1fr;gap:22px; } .dd{ padding:32px 30px;border-radius:28px; box-shadow:var(--shadow-card); border:2px solid transparent; transition:.3s; } .dd:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)} .dd.do{background:#fff;border-color:rgba(109,199,160,.35)} .dd.dont{background:#fff;border-color:rgba(255,135,112,.35)} .dd .badge{ display:inline-flex;align-items:center;gap:8px; padding:6px 14px;border-radius:99px; font-size:12px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;margin-bottom:16px; } .dd.do .badge{background:var(--mint);color:var(--ink)} .dd.dont .badge{background:var(--blush);color:var(--ink)} .dd h4{ font-family:'Quicksand';font-weight:700; font-size:22px;letter-spacing:-.015em;margin-bottom:14px; } .dd ul{list-style:none;font-size:14.5px;font-weight:500;line-height:1.55;color:var(--ink)} .dd ul li{ padding:8px 0 8px 26px;position:relative; border-bottom:1px dashed rgba(30,42,74,.1); } .dd ul li:last-child{border-bottom:0} .dd.do ul li::before{ content:"✓";position:absolute;left:0;top:8px; width:18px;height:18px; color:#6dc7a0;font-weight:700;font-size:16px; } .dd.dont ul li::before{ content:"✗";position:absolute;left:0;top:8px; color:var(--coral);font-weight:700;font-size:16px; } /* ---------- Reflection block (Caveat pull-quote) ---------- */ .reflection{ padding:60px 32px;max-width:1000px;margin:0 auto; } .reflection-card{ padding:56px 44px;background:var(--drawer-bg); border-radius:36px;text-align:center;position:relative; box-shadow:0 10px 0 rgba(30,42,74,.1); overflow:hidden; } .reflection-card::before{ content:"";position:absolute;top:-40px;left:-30px; width:120px;height:120px;background:#fff;opacity:.4; border-radius:50%; } .reflection-card::after{ content:"";position:absolute;bottom:-30px;right:-30px; width:100px;height:100px;background:#fff;opacity:.5; border-radius:50%; } .reflection-card q{ position:relative;font-family:'Caveat';font-weight:700; font-size:clamp(30px,4vw,44px);line-height:1.15; color:var(--ink);letter-spacing:-.01em; display:block;quotes:"\201C" "\201D"; margin-bottom:16px;text-wrap:balance; } .reflection-card .cite{ position:relative;font-size:13.5px;font-weight:600; color:var(--ink);opacity:.7;letter-spacing:.04em; text-transform:uppercase; } /* ---------- Next drawer bar ---------- */ .next-drawer{ padding:40px 32px 80px;max-width:1240px;margin:0 auto; } .next-row{ display:grid;grid-template-columns:1fr 1fr;gap:20px; } .nav-card{ padding:26px 28px;background:#fff;border-radius:24px; box-shadow:var(--shadow-card); transition:.3s;color:var(--ink); display:flex;flex-direction:column;gap:6px; } .nav-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover)} .nav-card .lbl{ font-size:12px;font-weight:700;letter-spacing:.06em; text-transform:uppercase;color:var(--ink-soft); } .nav-card .ttl{ font-family:'Quicksand';font-weight:700; font-size:22px;letter-spacing:-.015em; display:flex;align-items:center;gap:10px; } .nav-card.prev{border-left:6px solid var(--drawer-solid)} .nav-card.next{border-right:6px solid var(--drawer-solid);text-align:right;align-items:flex-end} .nav-card .em{font-size:24px} /* ---------- Mobile ---------- */ @media(max-width:960px){ .drawer-hero{grid-template-columns:1fr;gap:40px;padding:20px 20px 40px} .drawer-visual{max-width:340px;justify-self:center;margin:0 auto} .inside,.workflow,.related,.dodont,.reflection,.next-drawer{padding-left:18px;padding-right:18px} .inside-grid,.wf-grid{grid-template-columns:1fr;gap:14px} .related-grid,.dd-grid,.next-row{grid-template-columns:1fr;gap:14px} .reflection-card{padding:40px 24px} .nav-card.next{text-align:left;align-items:flex-start;border-right:0;border-left:6px solid var(--drawer-solid)} }