/* ============================================================ WP Relieve — responsive homepage styles Fluid type (clamp) + CSS-grid reflow at 1024 / 760 / 520. Palette presets on ; fonts on . Default = brand teal + orange. ============================================================ */ /* ---------- palette presets (LIGHT) ---------- */ body[data-wpr-palette="sunset"]{ /* #EE6A2E orange + warm neutrals (default) */ --ink:#FBF5F1; --ink2:#FFFFFF; --ink3:#F7EBE3; --line:#EEDFD5; --cream:#2A1509; --text:#3C2C22; --dim:#80675A; --dimmer:#AD9A8E; --accent:#DB571C; --accent-dk:#BE4814; --accent2:#EE6A2E; --accent2-dk:#D2531C; } body[data-wpr-palette="brand"]{ /* WP Relieve teal + orange */ --ink:#F2F7F5; --ink2:#FFFFFF; --ink3:#EAF2EF; --line:#DCE7E3; --cream:#0E1F1B; --text:#27332F; --dim:#5E6E69; --dimmer:#90A09A; --accent:#10A395; --accent-dk:#0B7F73; --accent2:#EE6A2E; --accent2-dk:#D2531C; } body[data-wpr-palette="indigo"]{ --ink:#F3F4FA; --ink2:#FFFFFF; --ink3:#ECEEF8; --line:#DEE1EE; --cream:#11152B; --text:#2A2F45; --dim:#5F6580; --dimmer:#9499AD; --accent:#4F63E0; --accent-dk:#3344C4; --accent2:#E0921C; --accent2-dk:#C57C12; } body[data-wpr-palette="magenta"]{ --ink:#FAF3F6; --ink2:#FFFFFF; --ink3:#F6EAF0; --line:#EBDDE4; --cream:#2A0F1C; --text:#3A2630; --dim:#7A6069; --dimmer:#A892A0; --accent:#D62D7A; --accent-dk:#B01F60; --accent2:#E0921C; --accent2-dk:#C57C12; } body[data-wpr-palette="forest"]{ --ink:#F1F6F2; --ink2:#FFFFFF; --ink3:#E9F2EC; --line:#DBE6DE; --cream:#0E1C14; --text:#27332B; --dim:#5E6E64; --dimmer:#93A097; --accent:#1E9E66; --accent-dk:#157A4C; --accent2:#D98A1A; --accent2-dk:#BC7512; } body[data-wpr-palette="teal"]{ --ink:#F0F8F7; --ink2:#FFFFFF; --ink3:#E6F3F1; --line:#D6E7E4; --cream:#08201D; --text:#23332F; --dim:#5A6E69; --dimmer:#8FA29D; --accent:#0FB0A2; --accent-dk:#0B8D82; --accent2:#F0A81C; --accent2-dk:#D08F12; } /* ---------- font presets ---------- */ body[data-wpr-font="dm-serif"]{ --serif:'DM Serif Display',Georgia,serif; --sans:'Inter Tight','Inter',system-ui,sans-serif; } body[data-wpr-font="instrument"]{ --serif:'Instrument Serif',Georgia,serif; --sans:'Inter Tight','Inter',system-ui,sans-serif; } body[data-wpr-font="fraunces"]{ --serif:'Fraunces',Georgia,serif; --sans:'Inter',system-ui,sans-serif; } body[data-wpr-font="grotesque"]{ --serif:'Bricolage Grotesque',system-ui,sans-serif; --sans:'Inter',system-ui,sans-serif; } /* ---------- base ---------- */ *,*::before,*::after{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ background:var(--ink); color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; } .wpr{ background:var(--ink); color:var(--text); overflow-x:hidden; --ts:.9; } .wpr-container{ width:100%; max-width:1240px; margin:0 auto; padding-left:clamp(20px,5vw,56px); padding-right:clamp(20px,5vw,56px); } .wpr-section{ padding-top:clamp(64px,9vw,112px); padding-bottom:clamp(64px,9vw,112px); } .wpr-section--alt{ background:var(--ink2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* ---------- type ---------- */ .wpr-h1{ font-family:var(--serif); font-weight:400; margin:0; color:var(--cream); font-size:calc(var(--ts,1) * clamp(40px,6.6vw,96px)); line-height:1.08; letter-spacing:-0.02em; padding-bottom:0.12em; } .wpr-h2{ font-family:var(--serif); font-weight:400; margin:0; color:var(--cream); font-size:calc(var(--ts,1) * clamp(30px,4.4vw,56px)); line-height:1.12; letter-spacing:-0.02em; padding-bottom:0.18em; } .wpr-h3{ font-family:var(--serif); font-weight:400; margin:0; color:var(--cream); font-size:calc(var(--ts,1) * clamp(22px,2.6vw,30px)); line-height:1.2; letter-spacing:-0.01em; } .wpr-h3--sans{ font-family:var(--sans); font-weight:600; font-size:calc(var(--ts,1) * clamp(18px,2vw,20px)); letter-spacing:-0.01em; } .wpr-display{ font-family:var(--serif); font-weight:400; margin:0; color:var(--cream); font-size:calc(var(--ts,1) * clamp(40px,6vw,78px)); line-height:1.06; letter-spacing:-0.02em; padding-bottom:0.14em; } .wpr-em{ font-style:italic; color:var(--accent); } .wpr-lead{ font-family:var(--sans); margin:0; color:var(--dim); font-size:calc(var(--ts,1) * clamp(17px,1.9vw,20px)); line-height:1.6; } .wpr-p{ font-family:var(--sans); margin:0; color:var(--dim); font-size:calc(var(--ts,1) * clamp(14.5px,1.6vw,16px)); line-height:1.6; } .wpr-eyebrow{ display:inline-flex; align-items:center; gap:9px; white-space:nowrap; font-family:var(--sans); font-size:calc(var(--ts,1) * 13px); font-weight:600; letter-spacing:0.04em; color:var(--accent); } .wpr-eyebrow::before{ content:""; width:7px; height:7px; border-radius:999px; background:currentColor; } /* ---------- buttons ---------- */ .wpr-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; white-space:nowrap; font-family:var(--sans); font-weight:600; font-size:calc(var(--ts,1) * 16px); text-decoration:none; cursor:pointer; padding:16px 28px; border-radius:999px; border:1px solid transparent; transition:transform .15s, box-shadow .2s; } .wpr-btn svg{ width:18px; height:18px; } .wpr-btn--primary{ background:var(--accent2); color:#fff; box-shadow:0 12px 30px -10px var(--accent2-dk); } .wpr-btn--primary:hover{ transform:translateY(-1px); } .wpr-btn--ghost{ background:transparent; color:var(--cream); border-color:var(--line); } .wpr-btn--block{ width:100%; } /* ---------- nav ---------- */ .wpr-nav{ position:sticky; top:0; z-index:40; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--ink) 86%, transparent); backdrop-filter:blur(10px); } .wpr-nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:16px; padding-bottom:16px; } .wpr-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; } .wpr-brand__logo{ height:34px; width:auto; display:block; } .wpr-brand__mark{ width:34px; height:34px; border-radius:10px; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; } .wpr-brand__name{ font-family:var(--sans); font-size:19px; font-weight:700; color:var(--cream); letter-spacing:-0.01em; white-space:nowrap; } .wpr-nav__links{ display:flex; gap:30px; } .wpr-nav__links a{ color:var(--dim); text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap; } .wpr-nav__links a:hover{ color:var(--cream); } .wpr-nav__actions{ display:flex; align-items:center; gap:12px; } .wpr-nav__signin{ color:var(--cream); text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap; } .wpr-nav__toggle{ display:none; width:42px; height:42px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--cream); align-items:center; justify-content:center; cursor:pointer; } .wpr-nav__toggle svg{ width:22px; height:22px; } .wpr-nav__drawer{ display:none; } /* ---------- hero ---------- */ .wpr-hero__grid{ display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(36px,5vw,72px); align-items:center; } .wpr-badge{ display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; border-radius:999px; background:color-mix(in srgb, var(--accent) 9%, transparent); border:1px solid var(--line); margin-bottom:28px; max-width:100%; } .wpr-badge__tag{ display:inline-flex; padding:3px 9px; border-radius:999px; background:var(--accent2); color:#fff; font-size:12px; font-weight:700; flex-shrink:0; } .wpr-badge__txt{ font-size:14px; color:var(--dim); } .wpr-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:34px; } .wpr-hero__social{ display:flex; align-items:center; gap:14px; margin-top:30px; color:var(--dimmer); font-size:14px; flex-wrap:wrap; } .wpr-avatars{ display:flex; } .wpr-avatars .wpr-avatar{ margin-left:-10px; border:2px solid var(--ink); } .wpr-avatars .wpr-avatar:first-child{ margin-left:0; } .wpr-avatar{ border-radius:999px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; font-family:var(--sans); font-weight:700; color:#fff; } /* hero thread card */ .wpr-thread{ background:var(--ink2); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:0 30px 70px -34px rgba(15,40,36,.30); } .wpr-thread__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); } .wpr-thread__id{ display:flex; align-items:center; gap:12px; min-width:0; } .wpr-thread__chip{ width:36px; height:36px; border-radius:10px; flex-shrink:0; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; } .wpr-thread__title{ font-size:15px; font-weight:600; color:var(--cream); } .wpr-thread__sub{ font-size:12.5px; color:var(--dimmer); } .wpr-status{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; white-space:nowrap; background:color-mix(in srgb, #1AA64F 16%, transparent); color:#157A3A; font-size:12.5px; font-weight:700; flex-shrink:0; } .wpr-thread__body{ padding:22px 20px; display:flex; flex-direction:column; gap:16px; } .wpr-msg{ display:flex; gap:12px; align-items:flex-start; } .wpr-msg--me{ flex-direction:row-reverse; } .wpr-bubble{ border-radius:4px 16px 16px 16px; padding:13px 16px; font-size:15px; line-height:1.5; color:var(--text); background:var(--ink3); max-width:340px; } .wpr-msg--me .wpr-bubble{ border-radius:16px 4px 16px 16px; background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid var(--line); color:var(--cream); } .wpr-msg__time{ font-size:12px; color:var(--dimmer); margin-top:6px; } .wpr-timeline{ margin:4px 20px 20px; padding:16px 18px; border-radius:14px; background:var(--ink); border:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; } .wpr-tl{ text-align:center; flex-shrink:0; } .wpr-tl__dot{ width:26px; height:26px; border-radius:999px; margin:0 auto 7px; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; } .wpr-tl__l{ font-size:13px; font-weight:600; color:var(--cream); } .wpr-tl__t{ font-size:11.5px; color:var(--dimmer); margin-top:2px; } .wpr-tl__bar{ flex:1; height:2px; background:var(--accent); opacity:.5; margin:13px 8px 0; } .wpr-thread__foot{ padding:15px 20px; background:color-mix(in srgb, var(--accent) 7%, transparent); border-top:1px solid var(--line); display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text); } .wpr-thread__foot svg{ width:16px; height:16px; color:var(--accent2); flex-shrink:0; } /* ---------- trust strip ---------- */ .wpr-trust{ padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--ink2); } .wpr-trust__row{ display:flex; align-items:center; gap:40px; flex-wrap:wrap; } .wpr-trust__label{ font-size:14px; color:var(--dimmer); width:150px; flex-shrink:0; line-height:1.4; } .wpr-trust__logos{ flex:1; display:flex; justify-content:space-between; gap:22px 28px; flex-wrap:wrap; } .wpr-trust__logos span{ font-family:var(--sans); font-size:clamp(15px,1.8vw,19px); font-weight:600; color:var(--text); opacity:.62; letter-spacing:-0.01em; } /* ---------- section headers ---------- */ .wpr-head{ margin-bottom:clamp(40px,5vw,56px); } .wpr-head--center{ text-align:center; max-width:760px; margin-left:auto; margin-right:auto; } .wpr-head--center .wpr-eyebrow{ margin-bottom:18px; } .wpr-head--split{ display:flex; align-items:flex-end; justify-content:space-between; gap:32px; flex-wrap:wrap; } .wpr-head--center .wpr-lead{ margin-top:20px; } .wpr-head__note{ max-width:320px; } /* ---------- grids ---------- */ .wpr-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; } .wpr-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; } .wpr-grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; } /* ---------- cards ---------- */ .wpr-card{ padding:clamp(26px,3vw,36px); border-radius:20px; background:var(--ink2); border:1px solid var(--line); } .wpr-icon{ width:54px; height:54px; border-radius:15px; background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; margin-bottom:22px; } .wpr-icon svg{ width:26px; height:26px; } /* service card */ .wpr-service{ padding:28px; border-radius:18px; background:var(--ink); border:1px solid var(--line); display:flex; flex-direction:column; min-height:228px; transition:border-color .2s, transform .2s; } .wpr-service:hover{ border-color:var(--accent); transform:translateY(-3px); } .wpr-service__icon{ width:50px; height:50px; border-radius:14px; margin-bottom:20px; background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; transition:all .2s; } .wpr-service:hover .wpr-service__icon{ background:var(--accent); color:#fff; } .wpr-service__icon svg{ width:24px; height:24px; } .wpr-service h3{ margin:0 0 10px; } .wpr-card h3{ margin-bottom:12px; } /* step */ .wpr-step{ padding:clamp(26px,3vw,36px); border-radius:20px; background:var(--ink2); border:1px solid var(--line); display:flex; flex-direction:column; min-height:280px; } .wpr-step__num{ width:52px; height:52px; border-radius:999px; margin-bottom:24px; font-family:var(--serif); font-size:22px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--accent); } .wpr-step:first-child .wpr-step__num{ background:var(--accent); color:#fff; border-color:var(--accent); } .wpr-step h3{ margin:0 0 12px; } .wpr-step__body{ flex:1; } .wpr-step__meta{ margin-top:24px; padding-top:18px; border-top:1px solid var(--line); display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--accent); font-weight:600; } .wpr-step__meta svg{ width:16px; height:16px; } /* comparison */ .wpr-compare{ border-radius:26px; background:var(--ink2); border:1px solid var(--line); padding:clamp(40px,6vw,72px) clamp(24px,4vw,56px); position:relative; overflow:hidden; } .wpr-stat{ padding:clamp(26px,3vw,36px); border-radius:20px; border:1px solid var(--line); } .wpr-stat--feature{ background:var(--ink); border-color:var(--accent); } .wpr-stat__label{ font-size:14px; font-weight:600; margin-bottom:22px; } .wpr-stat__n{ font-family:var(--serif); font-weight:400; font-size:calc(var(--ts,1) * clamp(52px,7vw,76px)); line-height:.95; letter-spacing:-0.02em; color:var(--cream); } .wpr-stat__n--strike{ text-decoration:line-through; text-decoration-color:var(--dimmer); text-decoration-thickness:2px; } .wpr-stat__t{ margin-top:10px; font-size:16px; font-style:italic; font-family:var(--serif); } .wpr-stat__s{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); font-size:14.5px; line-height:1.6; color:var(--dim); } /* pricing */ .wpr-plans{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start; } .wpr-plans--4{ grid-template-columns:repeat(4,1fr); gap:16px; } .wpr-plans--4 .wpr-plan{ padding:clamp(20px,1.9vw,28px); } .wpr-plans--4 .wpr-plan__name{ font-size:23px; } .wpr-plans--4 .wpr-plan__tagline{ min-height:42px; font-size:13.5px; margin-bottom:18px; } .wpr-plans--4 .wpr-plan__price b{ font-size:calc(var(--ts,1) * clamp(34px,3.4vw,42px)); } .wpr-plans--4 .wpr-plan__price span{ font-size:14px; } .wpr-plans--4 .wpr-checklist{ gap:11px; padding-top:18px; } .wpr-plans--4 .wpr-check{ font-size:14px; } .wpr-plan__price .wpr-cents{ font-size:0.5em; align-self:flex-start; margin-top:0.35em; color:var(--dim); letter-spacing:0; } .wpr-plan__setup{ font-size:13px; color:var(--dim); margin:-10px 0 18px; } @media (max-width:1040px){ .wpr-plans--4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .wpr-plans--4{ grid-template-columns:1fr; } } .wpr-plan{ padding:clamp(28px,3vw,38px); border-radius:22px; border:1px solid var(--line); position:relative; } .wpr-plan--feature{ background:var(--ink2); border-color:var(--accent); box-shadow:0 30px 70px -30px var(--accent-dk); } .wpr-plan__badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent2); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:0.04em; padding:6px 16px; border-radius:999px; white-space:nowrap; } .wpr-plan__name{ font-family:var(--serif); font-size:30px; color:var(--cream); margin-bottom:8px; } .wpr-plan__tagline{ font-size:15px; color:var(--dim); margin-bottom:24px; line-height:1.5; min-height:44px; } .wpr-plan__price{ display:flex; align-items:baseline; gap:6px; margin-bottom:24px; } .wpr-plan__price b{ font-family:var(--serif); font-weight:400; font-size:calc(var(--ts,1) * clamp(48px,6vw,60px)); color:var(--cream); line-height:1; letter-spacing:-0.02em; } .wpr-plan__price span{ font-size:16px; color:var(--dim); } .wpr-checklist{ display:flex; flex-direction:column; gap:14px; margin-top:26px; padding-top:24px; border-top:1px solid var(--line); } .wpr-check{ display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.45; color:var(--text); } .wpr-check svg{ width:18px; height:18px; color:var(--accent); flex-shrink:0; margin-top:1px; } /* testimonials */ .wpr-quote{ padding:clamp(26px,3vw,34px); border-radius:20px; background:var(--ink); border:1px solid var(--line); display:flex; flex-direction:column; } .wpr-quote__stars{ color:var(--accent2); font-size:17px; letter-spacing:2px; margin-bottom:18px; } .wpr-quote__q{ margin:0; font-family:var(--serif); font-size:calc(var(--ts,1) * clamp(18px,2.2vw,21px)); line-height:1.45; color:var(--cream); flex:1; } .wpr-quote__by{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); display:flex; align-items:center; gap:13px; } .wpr-quote__name{ font-family:var(--sans); font-size:15.5px; font-weight:600; color:var(--cream); } .wpr-quote__role{ font-size:13.5px; color:var(--dim); margin-top:2px; } /* faq */ .wpr-faq__grid{ display:grid; grid-template-columns:1fr 1.5fr; gap:clamp(36px,5vw,72px); align-items:start; } .wpr-faq__list{ border-top:1px solid var(--line); } .wpr-faq__item{ border-bottom:1px solid var(--line); } .wpr-faq__q{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px; text-align:left; padding:24px 0; background:transparent; border:none; cursor:pointer; font-family:var(--serif); font-size:calc(var(--ts,1) * clamp(20px,2.4vw,25px)); letter-spacing:-0.01em; color:var(--cream); } .wpr-faq__plus{ width:38px; height:38px; flex-shrink:0; border-radius:999px; border:1px solid var(--line); color:var(--text); display:inline-flex; align-items:center; justify-content:center; font-size:22px; transition:all .2s; } .wpr-faq__item[data-open="true"] .wpr-faq__plus{ background:var(--accent); color:#fff; border-color:var(--accent); transform:rotate(45deg); } .wpr-faq__a{ padding:0 0 26px; font-size:16px; line-height:1.65; color:var(--dim); max-width:640px; display:none; } .wpr-faq__item[data-open="true"] .wpr-faq__a{ display:block; } /* cta */ .wpr-cta{ border-radius:28px; padding:clamp(56px,8vw,88px) clamp(28px,5vw,64px); text-align:center; position:relative; overflow:hidden; background:linear-gradient(160deg, var(--ink2) 0%, var(--ink) 100%); border:1px solid var(--line); } .wpr-cta__glow{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:760px; height:760px; pointer-events:none; background:radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%); } .wpr-cta__inner{ position:relative; max-width:760px; margin:0 auto; } .wpr-cta__inner .wpr-actions{ justify-content:center; } /* footer */ .wpr-foot{ background:var(--ink2); border-top:1px solid var(--line); padding-top:64px; padding-bottom:40px; } .wpr-foot__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; } .wpr-foot__col h4{ font-family:var(--sans); font-size:13px; font-weight:700; color:var(--cream); margin:0 0 18px; } .wpr-foot__links{ display:flex; flex-direction:column; gap:11px; } .wpr-foot__links a{ color:var(--dim); text-decoration:none; font-size:14.5px; } .wpr-foot__links a:hover{ color:var(--cream); } .wpr-foot__bottom{ border-top:1px solid var(--line); padding-top:24px; display:flex; justify-content:space-between; gap:16px; font-size:13.5px; color:var(--dimmer); flex-wrap:wrap; } /* misc helpers */ .wpr-spark{ position:absolute; pointer-events:none; border-radius:999px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1024px){ .wpr-grid-4{ grid-template-columns:repeat(2,1fr); } } @media (max-width:900px){ .wpr-hero__grid{ grid-template-columns:1fr; } .wpr-grid-3{ grid-template-columns:1fr; } .wpr-plans{ grid-template-columns:1fr; } .wpr-plan--feature{ box-shadow:none; } .wpr-faq__grid{ grid-template-columns:1fr; } .wpr-timeline{ margin-left:0; margin-right:0; } /* mobile nav */ .wpr-nav__links, .wpr-nav__signin{ display:none; } .wpr-nav__toggle{ display:inline-flex; } .wpr-nav__drawer{ display:block; border-top:1px solid var(--line); background:var(--ink); } .wpr-nav__drawer[hidden]{ display:none; } .wpr-nav__drawer a{ display:block; padding:15px clamp(20px,5vw,56px); color:var(--text); text-decoration:none; font-size:16px; border-bottom:1px solid var(--line); } .wpr-nav__drawer .wpr-btn{ margin:16px clamp(20px,5vw,56px); width:calc(100% - 2*clamp(20px,5vw,56px)); } } @media (max-width:760px){ .wpr-head--split{ flex-direction:column; align-items:flex-start; gap:20px; } .wpr-head__note{ max-width:none; } .wpr-foot__grid{ grid-template-columns:1fr 1fr; gap:28px; } .wpr-foot__col--brand{ grid-column:1 / -1; } .wpr-trust__label{ width:100%; } .wpr-trust__logos{ justify-content:flex-start; } .wpr-bubble{ max-width:74vw; } .wpr-stat__s{ } } @media (max-width:520px){ .wpr-grid-4{ grid-template-columns:1fr; } .wpr-grid-2{ grid-template-columns:1fr; } .wpr-foot__grid{ grid-template-columns:1fr; } .wpr-actions .wpr-btn{ width:100%; } .wpr-foot__bottom{ flex-direction:column; gap:8px; } } /* ============================================================ IN-PAGE CUSTOMIZE CONTROL PANEL ============================================================ */ .wpr-cp{ position:fixed; right:22px; bottom:22px; z-index:80; font-family:var(--sans); } .wpr-cp__fab{ width:56px; height:56px; border-radius:999px; border:1px solid var(--line); cursor:pointer; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 14px 32px -10px rgba(15,40,36,.40); transition:transform .18s; } .wpr-cp__fab:hover{ transform:translateY(-2px) rotate(-8deg); } .wpr-cp__fab svg{ width:26px; height:26px; } .wpr-cp__panel{ position:absolute; right:0; bottom:70px; width:312px; max-width:calc(100vw - 44px); max-height:calc(100vh - 104px); display:flex; flex-direction:column; background:var(--ink2); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 30px 70px -28px rgba(15,40,36,.34); transform-origin:bottom right; transition:opacity .18s, transform .18s; } .wpr-cp__panel[hidden]{ display:none; } .wpr-cp--closing{ opacity:0; transform:scale(.94); } .wpr-cp__head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line); } .wpr-cp__title{ font-size:15px; font-weight:700; color:var(--cream); } .wpr-cp__title small{ display:block; font-size:12px; font-weight:400; color:var(--dimmer); margin-top:2px; } .wpr-cp__x{ width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--dim); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:18px; } .wpr-cp__x:hover{ color:var(--cream); } .wpr-cp__body{ padding:18px; display:flex; flex-direction:column; gap:20px; overflow-y:auto; } .wpr-cp__group{ } .wpr-cp__label{ font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--dimmer); margin-bottom:11px; } .wpr-cp__swatches{ display:flex; gap:10px; flex-wrap:wrap; } .wpr-cp__sw{ width:38px; height:38px; border-radius:999px; cursor:pointer; border:2px solid transparent; padding:0; position:relative; display:inline-flex; align-items:center; justify-content:center; transition:transform .12s; } .wpr-cp__sw:hover{ transform:scale(1.08); } .wpr-cp__sw[aria-pressed="true"]{ border-color:var(--cream); } .wpr-cp__sw[aria-pressed="true"]::after{ content:""; width:12px; height:12px; border-radius:999px; background:#fff; mix-blend-mode:difference; } .wpr-cp__hint{ font-size:11.5px; color:var(--dimmer); margin-top:10px; } .wpr-cp__sw--custom{ position:relative; overflow:hidden; color:#fff; background:conic-gradient(from 210deg, #FF5BA1, #F0A81C, #3FD89A, #0FB0A2, #4F63E0, #D62D7A, #FF5BA1); } .wpr-cp__sw--custom svg{ position:relative; z-index:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.4)); } .wpr-cp__sw--custom input[type=color]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; border:none; padding:0; margin:0; cursor:pointer; } .wpr-cp__sw--custom::after{ display:none !important; } .wpr-cp__fonts{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .wpr-cp__font{ padding:11px 12px; border-radius:10px; border:1px solid var(--line); background:var(--ink); color:var(--text); cursor:pointer; text-align:left; transition:border-color .15s, background .15s; } .wpr-cp__font:hover{ border-color:var(--accent); } .wpr-cp__font[aria-pressed="true"]{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); } .wpr-cp__font b{ display:block; font-size:20px; line-height:1; color:var(--cream); margin-bottom:5px; } .wpr-cp__font span{ font-size:11px; line-height:1.25; color:var(--dim); display:block; } .wpr-cp__size{ display:flex; align-items:center; gap:10px; } .wpr-cp__sizebtn{ width:40px; height:40px; flex-shrink:0; border-radius:10px; border:1px solid var(--line); background:var(--ink); color:var(--cream); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; } .wpr-cp__sizebtn:hover{ border-color:var(--accent); } .wpr-cp__sizebtn:disabled{ opacity:.35; cursor:default; } .wpr-cp__sizetrack{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; } .wpr-cp__sizedots{ display:flex; gap:6px; align-items:center; } .wpr-cp__sizedot{ width:8px; height:8px; border-radius:999px; background:var(--line); transition:background .15s, transform .15s; } .wpr-cp__sizedot[data-on="true"]{ background:var(--accent); transform:scale(1.25); } .wpr-cp__sizename{ font-size:12.5px; color:var(--dim); font-weight:600; } .wpr-cp__reset{ width:100%; padding:11px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--dim); font-size:13px; font-weight:600; cursor:pointer; } .wpr-cp__reset:hover{ color:var(--cream); border-color:var(--dim); } @media (max-width:520px){ .wpr-cp{ right:14px; bottom:14px; } .wpr-cp__fab{ width:50px; height:50px; } } /* ============================================================ BLOG / ARTICLE / FORMS (theme) ============================================================ */ .wpr-card__thumb{ display:block; margin-bottom:16px; border-radius:12px; overflow:hidden; } .wpr-card__thumb img{ width:100%; height:auto; display:block; } .wpr-card__more{ display:inline-block; margin-top:16px; color:var(--accent); font-weight:600; font-size:14px; text-decoration:none; } .wpr-card__more:hover{ text-decoration:underline; } .wpr-article{ max-width:760px; margin-left:auto; margin-right:auto; } .wpr-article__hero{ width:100%; height:auto; border-radius:18px; display:block; } .wpr-prose{ font-family:var(--sans); color:var(--text); font-size:calc(var(--ts,1) * 17px); line-height:1.75; } .wpr-prose > * + *{ margin-top:1.1em; } .wpr-prose h2{ font-family:var(--serif); color:var(--cream); font-size:calc(var(--ts,1) * 30px); line-height:1.2; margin-top:1.6em; letter-spacing:-0.01em; } .wpr-prose h3{ font-family:var(--serif); color:var(--cream); font-size:calc(var(--ts,1) * 23px); margin-top:1.4em; } .wpr-prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; } .wpr-prose img{ border-radius:12px; height:auto; } .wpr-prose blockquote{ border-left:3px solid var(--accent); padding-left:20px; margin-left:0; color:var(--dim); font-style:italic; } .wpr-prose ul, .wpr-prose ol{ padding-left:22px; } .wpr-prose li{ margin-top:.4em; } .wpr-prose code{ background:var(--ink3); padding:2px 6px; border-radius:5px; font-size:.9em; } .wpr-prose pre{ background:var(--ink3); padding:18px; border-radius:12px; overflow:auto; } .wpr-prose pre code{ background:none; padding:0; } .wpr-pagination{ margin-top:48px; text-align:center; } .wpr-pagination .page-numbers{ display:inline-flex; align-items:center; justify-content:center; min-width:42px; height:42px; padding:0 12px; margin:0 4px; border-radius:10px; border:1px solid var(--line); color:var(--text); text-decoration:none; font-weight:600; } .wpr-pagination .page-numbers.current{ background:var(--accent); color:#fff; border-color:var(--accent); } .wpr-pagination .page-numbers:hover{ border-color:var(--accent); } .search-form{ display:flex; gap:10px; } .search-form .search-field{ flex:1; padding:13px 16px; border-radius:10px; border:1px solid var(--line); background:var(--ink2); color:var(--text); font-family:var(--sans); font-size:15px; } .search-form .search-submit{ padding:13px 22px; border-radius:10px; border:none; background:var(--accent2); color:#fff; font-weight:600; cursor:pointer; } /* a plain content table/figure niceties */ .wpr-prose figure{ margin:0; } .wpr-prose figcaption{ font-size:13px; color:var(--dimmer); margin-top:8px; text-align:center; } /* ============================================================ DROPDOWN MENU · FORMS · CONTACT (theme) ============================================================ */ .wpr-nav__item{ position:relative; } .wpr-has-sub > .wpr-nav__parent{ display:inline-flex; align-items:center; gap:6px; color:var(--dim); text-decoration:none; font-size:15px; font-weight:500; white-space:nowrap; cursor:pointer; } .wpr-has-sub:hover > .wpr-nav__parent, .wpr-has-sub:focus-within > .wpr-nav__parent{ color:var(--cream); } .wpr-nav__parent[aria-current="page"]{ color:var(--cream); } .wpr-caret{ transition:transform .18s; flex-shrink:0; } .wpr-has-sub:hover .wpr-nav__parent > .wpr-caret{ transform:rotate(180deg); } .wpr-nav__sub{ position:absolute; top:100%; left:50%; transform:translateX(-50%) translateY(4px); min-width:236px; background:var(--ink2); border:1px solid var(--line); border-radius:14px; padding:8px; box-shadow:0 26px 54px -26px rgba(15,40,36,.34); opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease; z-index:50; } .wpr-nav__sub::before{ content:""; position:absolute; left:0; right:0; top:-10px; height:10px; } .wpr-has-sub:hover .wpr-nav__sub, .wpr-has-sub:focus-within .wpr-nav__sub{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(8px); } .wpr-nav__sub a{ display:block; padding:10px 14px; border-radius:9px; color:var(--text); text-decoration:none; font-size:14.5px; font-weight:500; white-space:nowrap; } .wpr-nav__sub a:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--cream); } .wpr-nav__sub a[aria-current="page"]{ color:var(--accent); } /* ---- current page / section — prominent active state ---- */ .wpr-nav__links > a[aria-current="page"], .wpr-has-sub > .wpr-nav__parent.is-current{ color:var(--accent); font-weight:600; position:relative; } .wpr-nav__links > a[aria-current="page"]::after, .wpr-has-sub > .wpr-nav__parent.is-current::after{ content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:2px; background:var(--accent); } .wpr-has-sub > .wpr-nav__parent.is-current .wpr-caret{ color:var(--accent); } /* dropdown sub item */ .wpr-nav__sub a[aria-current="page"]{ font-weight:600; background:color-mix(in srgb, var(--accent) 12%, transparent); } /* mobile drawer */ .wpr-nav__drawer > a[aria-current="page"]{ color:var(--accent); font-weight:700; box-shadow:inset 3px 0 0 var(--accent); } .wpr-drawer__parent.is-current{ color:var(--accent); font-weight:700; } .wpr-drawer__parent.is-current .wpr-caret{ color:var(--accent); } .wpr-drawer__sub a[aria-current="page"]{ color:var(--accent); font-weight:700; box-shadow:inset 3px 0 0 var(--accent); } /* drawer submenu (mobile) */ .wpr-drawer__group{ border-bottom:1px solid var(--line); } .wpr-drawer__parent{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px clamp(20px,5vw,56px); background:transparent; border:none; color:var(--text); font-family:var(--sans); font-size:16px; font-weight:500; cursor:pointer; text-align:left; } .wpr-drawer__parent .wpr-caret{ transition:transform .2s; } .wpr-drawer__parent[aria-expanded="true"] .wpr-caret{ transform:rotate(180deg); } .wpr-drawer__sub{ background:color-mix(in srgb, var(--accent) 5%, transparent); padding:2px 0 10px; } .wpr-drawer__sub[hidden]{ display:none; } .wpr-drawer__sub a{ display:block; padding:11px clamp(34px,8vw,72px); color:var(--dim); text-decoration:none; font-size:15px; border-bottom:none !important; } .wpr-drawer__sub a:hover{ color:var(--cream); } /* forms */ .wpr-form{ display:flex; flex-direction:column; gap:16px; } .wpr-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .wpr-form label{ display:flex; flex-direction:column; gap:8px; font-size:14px; font-weight:600; color:var(--cream); } .wpr-form input, .wpr-form textarea, .wpcf7-form input:not([type=submit]):not([type=checkbox]):not([type=radio]), .wpcf7-form textarea, .wpcf7-form select{ padding:13px 15px; border-radius:10px; border:1px solid var(--line); background:var(--ink); color:var(--text); font-family:var(--sans); font-size:15px; width:100%; } .wpr-form input::placeholder, .wpr-form textarea::placeholder{ color:var(--dimmer); } .wpr-form textarea{ resize:vertical; } .wpr-form button{ align-self:flex-start; border:none; margin-top:4px; } .wpcf7-form{ display:flex; flex-direction:column; gap:14px; } .wpcf7-form .wpcf7-submit{ padding:15px 28px; border-radius:999px; border:none; background:var(--accent2); color:#fff; font-weight:600; font-size:16px; cursor:pointer; } /* contact layout */ .wpr-contact{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(32px,5vw,56px); align-items:start; } .wpr-contact__points{ display:flex; flex-direction:column; gap:14px; margin-top:28px; } .wpr-contact__point{ display:flex; align-items:center; gap:12px; font-size:15px; color:var(--text); font-weight:500; } .wpr-contact__ic{ display:inline-flex; width:40px; height:40px; border-radius:11px; background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); align-items:center; justify-content:center; flex-shrink:0; } .wpr-checklist2{ display:grid; grid-template-columns:1fr 1fr; gap:16px 28px; } @media (max-width:860px){ .wpr-contact{ grid-template-columns:1fr; } } @media (max-width:560px){ .wpr-form__row{ grid-template-columns:1fr; } .wpr-checklist2{ grid-template-columns:1fr; } } /* task examples */ .wpr-task{ display:flex; gap:14px; align-items:flex-start; padding:20px 22px; background:var(--ink2); border:1px solid var(--line); border-radius:14px; } .wpr-task__check{ width:30px; height:30px; border-radius:999px; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; } .wpr-task__t{ font-size:15.5px; font-weight:600; color:var(--cream); line-height:1.4; } .wpr-task__meta{ display:flex; gap:7px; margin-top:6px; font-size:12.5px; color:var(--dimmer); font-family:var(--mono); } .wpr-task__meta span{ white-space:nowrap; } /* ============================================================ AGENCY PAGE ADDITIONS hero fact row · problem cards · task category lists · 4-step row · client dashboard mock · compare table · objections ============================================================ */ /* hero quick-fact row */ .wpr-facts{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px 26px; margin-top:34px; } .wpr-fact{ display:inline-flex; align-items:center; gap:9px; font-size:15px; font-weight:600; color:var(--text); } .wpr-fact svg{ width:18px; height:18px; color:var(--accent); flex-shrink:0; } .wpr-fact + .wpr-fact::before{ content:""; } /* card with secondary (warning) accent — used for "money on the table" problems */ .wpr-card--warn .wpr-icon{ background:color-mix(in srgb, var(--accent2) 14%, transparent); color:var(--accent2-dk); } .wpr-punch{ margin:clamp(36px,4vw,52px) auto 0; max-width:820px; text-align:center; font-family:var(--serif); font-weight:400; color:var(--cream); letter-spacing:-0.01em; font-size:calc(var(--ts,1) * clamp(22px,3vw,32px)); line-height:1.3; } .wpr-punch em{ font-style:italic; color:var(--accent); } /* task category cards */ .wpr-cat{ padding:clamp(26px,3vw,34px); border-radius:20px; background:var(--ink2); border:1px solid var(--line); } .wpr-cat__head{ display:flex; align-items:center; gap:13px; margin-bottom:22px; padding-bottom:20px; border-bottom:1px solid var(--line); } .wpr-cat__ic{ width:46px; height:46px; border-radius:13px; flex-shrink:0; background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; } .wpr-cat__ic svg{ width:23px; height:23px; } .wpr-tasklist{ display:grid; grid-template-columns:1fr 1fr; gap:11px 22px; } .wpr-tasklist li{ list-style:none; display:flex; align-items:flex-start; gap:9px; font-size:14.5px; line-height:1.4; color:var(--text); } .wpr-tasklist{ margin:0; padding:0; } .wpr-tasklist svg{ width:15px; height:15px; color:var(--accent); flex-shrink:0; margin-top:3px; } /* numbered step row (4-up) */ .wpr-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; counter-reset:flow; } .wpr-flow__step{ padding:clamp(24px,2.6vw,32px); border-radius:20px; background:var(--ink2); border:1px solid var(--line); display:flex; flex-direction:column; position:relative; } .wpr-flow__num{ width:46px; height:46px; border-radius:999px; margin-bottom:20px; font-family:var(--serif); font-size:20px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); color:var(--accent); } .wpr-flow__step:first-child .wpr-flow__num{ background:var(--accent); color:#fff; border-color:var(--accent); } .wpr-flow__step h3{ margin:0 0 10px; } /* client dashboard mock (white-label) */ .wpr-dash{ background:var(--ink2); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:0 30px 70px -34px rgba(15,40,36,.30); } .wpr-dash__bar{ display:flex; align-items:center; gap:11px; padding:16px 20px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--accent) 6%, transparent); } .wpr-dash__logo{ display:inline-flex; align-items:center; gap:9px; font-weight:700; color:var(--cream); font-size:15px; } .wpr-dash__logo span{ width:26px; height:26px; border-radius:7px; background:var(--accent); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:13px; } .wpr-dash__tag{ margin-left:auto; font-size:11.5px; font-weight:600; color:var(--dimmer); } .wpr-dash__body{ padding:18px 20px; display:flex; flex-direction:column; gap:12px; } .wpr-dash__row{ display:flex; align-items:center; gap:13px; padding:14px 15px; border-radius:13px; background:var(--ink); border:1px solid var(--line); } .wpr-dash__dot{ width:34px; height:34px; border-radius:9px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); } .wpr-dash__dot svg{ width:17px; height:17px; } .wpr-dash__t{ font-size:14.5px; font-weight:600; color:var(--cream); line-height:1.3; } .wpr-dash__s{ font-size:12.5px; color:var(--dimmer); margin-top:2px; } .wpr-dash__pill{ margin-left:auto; flex-shrink:0; font-size:11.5px; font-weight:700; padding:5px 11px; border-radius:999px; white-space:nowrap; } .wpr-dash__pill--done{ background:color-mix(in srgb, #1AA64F 16%, transparent); color:#157A3A; } .wpr-dash__pill--prog{ background:color-mix(in srgb, var(--accent2) 18%, transparent); color:var(--accent2-dk); } .wpr-dash__pill--queue{ background:var(--ink3); color:var(--dim); } /* comparison table */ .wpr-ctable__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:22px; border:1px solid var(--line); } .wpr-ctable{ width:100%; border-collapse:collapse; background:var(--ink2); min-width:720px; } .wpr-ctable th, .wpr-ctable td{ text-align:left; padding:18px 22px; border-bottom:1px solid var(--line); font-size:14.5px; } .wpr-ctable thead th{ font-family:var(--sans); font-weight:700; color:var(--cream); font-size:14px; vertical-align:bottom; } .wpr-ctable tbody th{ font-weight:600; color:var(--cream); width:200px; } .wpr-ctable td{ color:var(--dim); } .wpr-ctable tbody tr:last-child th, .wpr-ctable tbody tr:last-child td{ border-bottom:none; } .wpr-ctable .wpr-ctable__hl{ background:color-mix(in srgb, var(--accent) 7%, transparent); border-left:1px solid var(--line); border-right:1px solid var(--line); color:var(--cream); font-weight:600; } .wpr-ctable thead .wpr-ctable__hl{ color:var(--accent); border-top:1px solid var(--line); border-top-left-radius:0; } .wpr-ctable__cap{ display:block; font-size:11.5px; font-weight:600; color:var(--accent); letter-spacing:0.04em; margin-bottom:4px; } /* objection cards */ .wpr-obj{ padding:clamp(24px,2.6vw,32px); border-radius:20px; background:var(--ink2); border:1px solid var(--line); } .wpr-obj__q{ font-family:var(--serif); font-style:italic; color:var(--cream); letter-spacing:-0.01em; font-size:calc(var(--ts,1) * clamp(19px,2.2vw,23px)); line-height:1.35; } .wpr-obj__q::before{ content:"\201C"; color:var(--accent); } .wpr-obj__q::after{ content:"\201D"; color:var(--accent); } .wpr-obj__a{ margin-top:14px; font-size:15px; line-height:1.6; color:var(--dim); } /* limited-slots notice */ .wpr-notice{ margin:30px auto 0; max-width:600px; display:flex; align-items:flex-start; gap:12px; padding:16px 20px; border-radius:14px; text-align:left; background:color-mix(in srgb, var(--accent2) 9%, transparent); border:1px solid color-mix(in srgb, var(--accent2) 30%, var(--line)); } .wpr-notice svg{ width:20px; height:20px; color:var(--accent2-dk); flex-shrink:0; margin-top:1px; } .wpr-notice b{ color:var(--cream); } .wpr-notice span{ font-size:14px; line-height:1.55; color:var(--dim); } /* ============================================================ BUSINESS PAGE ADDITIONS feature list · negative cross list · industries columns · hours ============================================================ */ /* feature list — small icon + bold title + description */ .wpr-feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .wpr-feats--2{ grid-template-columns:repeat(2,1fr); } .wpr-feat{ display:flex; gap:14px; padding:22px 22px; border-radius:16px; background:var(--ink2); border:1px solid var(--line); } .wpr-feat__ic{ width:40px; height:40px; border-radius:11px; flex-shrink:0; background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; } .wpr-feat__ic svg{ width:20px; height:20px; } .wpr-feat b{ display:block; font-family:var(--sans); font-size:15.5px; font-weight:600; color:var(--cream); margin-bottom:5px; letter-spacing:-0.01em; } .wpr-feat span{ font-size:14px; line-height:1.55; color:var(--dim); } /* negative / pain checklist (red X marks) */ .wpr-tasklist--cross svg{ color:var(--accent2-dk); } /* two-choices */ .wpr-choice{ padding:clamp(28px,3vw,38px); border-radius:22px; border:1px solid var(--line); background:var(--ink2); display:flex; flex-direction:column; } .wpr-choice--bad{ background:var(--ink); } .wpr-choice--good{ border-color:var(--accent); box-shadow:0 30px 70px -34px var(--accent-dk); } .wpr-choice__tag{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; font-size:12.5px; font-weight:700; letter-spacing:0.04em; padding:6px 14px; border-radius:999px; margin-bottom:20px; } .wpr-choice--bad .wpr-choice__tag{ background:color-mix(in srgb, var(--accent2) 14%, transparent); color:var(--accent2-dk); } .wpr-choice--good .wpr-choice__tag{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); } /* industries — dense multi-column link list */ .wpr-industries{ columns:4 190px; column-gap:30px; padding:clamp(24px,3vw,36px); border-radius:22px; background:var(--ink2); border:1px solid var(--line); } .wpr-industries span{ display:block; break-inside:avoid; padding:8px 0; font-size:13.5px; color:var(--dim); line-height:1.4; border-bottom:1px solid color-mix(in srgb, var(--line) 55%, transparent); } /* working hours */ .wpr-hours{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; } .wpr-hours__card{ padding:26px 28px; border-radius:18px; background:var(--ink2); border:1px solid var(--line); display:flex; gap:16px; align-items:flex-start; } .wpr-hours__ic{ width:46px; height:46px; border-radius:13px; flex-shrink:0; background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--accent); display:inline-flex; align-items:center; justify-content:center; } .wpr-hours__ic svg{ width:23px; height:23px; } .wpr-hours__k{ font-size:13px; font-weight:700; letter-spacing:0.04em; color:var(--accent); text-transform:uppercase; margin-bottom:7px; } .wpr-hours__v{ font-family:var(--serif); font-size:calc(var(--ts,1) * 21px); color:var(--cream); line-height:1.3; } .wpr-hours__s{ font-size:13.5px; color:var(--dim); margin-top:4px; } @media (max-width:980px){ .wpr-feats{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .wpr-feats, .wpr-feats--2, .wpr-hours{ grid-template-columns:1fr; } } @media (max-width:1024px){ .wpr-flow{ grid-template-columns:repeat(2,1fr); } } @media (max-width:760px){ .wpr-tasklist{ grid-template-columns:1fr; } } @media (max-width:520px){ .wpr-flow{ grid-template-columns:1fr; } }