/* ============================================================ UnitedWellness.com — Global Stylesheet v1.0 One file controls the look of every page on the site. Edit here to update fonts, colors, or spacing globally. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,800;1,600;1,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap'); /* ── DESIGN TOKENS ── */ :root { --bg: #F6F2EB; --bg2: #FDFAF6; --dark: #1A1710; --border: #DDD7CC; --body-txt: #1E1E1E; --mid-txt: #2E3038; --lo-txt: #484E58; --accent: #8B6914; --accent-dk: #6F5210; --accent-lt: #F5EDD5; --hot: #8B6914; --hot-lt: #F5EDD5; --gold: #8B6914; /* Category tokens — overridden per page */ --cat-accent: #8B6914; --cat-accent-dk: #6F5210; --cat-accent-lt: #F5EDD5; --cat-hot: #8B6914; --cat-hot-lt: #F5EDD5; --cat-dark: #1A1710; --cat-gold: #8B6914; --page-max: 1200px; --pad-h: 52px; --nav-h: 66px; } /* Category overrides — add class to tag */ body.cat-glp1 { --cat-accent:#4A7A1A; --cat-accent-dk:#366010; --cat-accent-lt:#E4F0D0; --cat-hot:#C0501A; --cat-hot-lt:#FAE5D8; --cat-dark:#162208; --cat-gold:#8FC24A; } body.cat-hormone { --cat-accent:#C04A1A; --cat-accent-dk:#963810; --cat-accent-lt:#FAE5D8; --cat-hot:#8B3210; --cat-hot-lt:#FDF0E8; --cat-dark:#1E0C04; --cat-gold:#E07848; } body.cat-mental { --cat-accent:#5040B8; --cat-accent-dk:#3D3090; --cat-accent-lt:#E8E5F5; --cat-hot:#9E3068; --cat-hot-lt:#F5E0EC; --cat-dark:#100830; --cat-gold:#8878E0; } body.cat-longevity { --cat-accent:#1A7070; --cat-accent-dk:#105858; --cat-accent-lt:#D5EDEC; --cat-hot:#B87820; --cat-hot-lt:#FDF2DC; --cat-dark:#071818; --cat-gold:#48B0B0; } body.cat-sleep { --cat-accent:#3A5890; --cat-accent-dk:#2C4470; --cat-accent-lt:#DDE4F2; --cat-hot:#6A3A8A; --cat-hot-lt:#F0E5F8; --cat-dark:#0A1020; --cat-gold:#7898D0; } /* ── RESET ── */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family:'DM Sans',system-ui,sans-serif; background:var(--bg); color:var(--body-txt); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; } img { max-width:100%; height:auto; display:block; } a { color:var(--cat-accent); text-decoration:none; } a:hover { text-decoration:underline; } ul,ol { padding-left:20px; } li { margin-bottom:6px; font-size:16px; color:var(--mid-txt); line-height:1.75; } /* ── NAV ── */ .site-nav { position:fixed; top:0; left:0; right:0; z-index:400; background:rgba(253,250,246,0.96); backdrop-filter:blur(16px); border-bottom:1px solid #DDD7CC; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad-h); } .nav-logo { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; letter-spacing:-0.01em; color:var(--body-txt); text-decoration:none; flex-shrink:0; } .nav-logo span { color:#8B6914; } .nav-links { display:flex; gap:28px; align-items:center; } .nav-links a { font-size:14px; font-weight:500; color:var(--mid-txt); text-decoration:none; transition:color 0.2s; white-space:nowrap; } .nav-links a:hover { color:var(--body-txt); text-decoration:none; } .nav-links a.current { color:var(--cat-accent); font-weight:600; } .nav-cta { background:#8B6914!important; color:#fff!important; padding:10px 22px; border-radius:3px; font-size:13px!important; font-weight:600!important; letter-spacing:0.04em!important; transition:background 0.2s!important; } .nav-cta:hover { background:#6F5210!important; text-decoration:none!important; } .nav-ham { display:none; background:none; border:none; cursor:pointer; padding:8px; flex-direction:column; gap:5px; } .nav-ham span { display:block; width:22px; height:2px; background:var(--body-txt); border-radius:2px; transition:all 0.3s; } .nav-ham.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); } .nav-ham.open span:nth-child(2) { opacity:0; width:0; } .nav-ham.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); } /* ── BREADCRUMB ── */ .breadcrumb { padding:calc(var(--nav-h) + 18px) var(--pad-h) 0; max-width:var(--page-max); margin:0 auto; font-size:13px; color:var(--lo-txt); display:flex; gap:8px; align-items:center; } .breadcrumb a { color:var(--lo-txt); } .breadcrumb a:hover { color:var(--cat-accent); } .bc-sep { color:var(--border); } /* ── LAYOUT ── */ .page-body { padding-top:var(--nav-h); } .wrap { max-width:var(--page-max); margin:0 auto; padding:0 var(--pad-h); } .section-block { padding:80px 0; } .section-block-sm { padding:52px 0; } .divider-line { border:none; border-top:1px solid var(--border); } /* ── TYPOGRAPHY ── */ .section-label { font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--cat-hot); margin-bottom:14px; } .section-title { font-family:'Playfair Display',serif; font-size:46px; font-weight:700; line-height:1.1; color:var(--body-txt); } .section-title-lg { font-size:58px; } .section-title-sm { font-size:34px; } .lead { font-size:18px; color:var(--mid-txt); line-height:1.75; } h1 { font-family:'Playfair Display',serif; font-size:56px; font-weight:800; line-height:1.06; color:var(--body-txt); } h2 { font-family:'Playfair Display',serif; font-size:34px; font-weight:700; line-height:1.15; margin-bottom:14px; color:var(--body-txt); } h3 { font-size:20px; font-weight:600; margin-bottom:10px; color:var(--body-txt); } h4 { font-size:16px; font-weight:600; color:var(--body-txt); } p { font-size:16px; color:var(--mid-txt); line-height:1.85; margin-bottom:16px; } p:last-child { margin-bottom:0; } /* ── BUTTONS ── */ .btn-primary { display:inline-block; background:var(--cat-accent); color:#fff; padding:15px 32px; border:none; border-radius:3px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; letter-spacing:0.04em; cursor:pointer; transition:background 0.2s; text-decoration:none; } .btn-primary:hover { background:var(--cat-accent-dk); color:#fff; text-decoration:none; } .btn-outline { display:inline-block; background:transparent; color:var(--body-txt); padding:15px 28px; border:2px solid var(--border); border-radius:3px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:500; cursor:pointer; transition:border-color 0.2s; text-decoration:none; } .btn-outline:hover { border-color:var(--body-txt); text-decoration:none; } .btn-sm { padding:10px 20px!important; font-size:13px!important; } /* ── PILLOWED ICONS ── */ .icon-pill { display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 5px 14px rgba(0,0,0,.18),0 2px 4px rgba(0,0,0,.12),inset 0 1px 1px rgba(255,255,255,.70),inset 0 -1px 1px rgba(0,0,0,.07); } .ip-sm { width:36px; height:36px; border-radius:10px; font-size:17px; } .ip-md { width:52px; height:52px; border-radius:14px; font-size:24px; } .ip-lg { width:64px; height:64px; border-radius:18px; font-size:30px; } .ip-tag { width:28px; height:28px; border-radius:7px; font-size:13px; } .ip-dk { box-shadow:0 6px 16px rgba(0,0,0,.35),0 2px 5px rgba(0,0,0,.2),inset 0 1px 1px rgba(255,255,255,.55),inset 0 -1px 1px rgba(0,0,0,.10); } .ip-home { background:linear-gradient(145deg,#E8D498,#C8A840); } .ip-glp1 { background:linear-gradient(145deg,#BCDE88,#8CC040); } .ip-hormone { background:linear-gradient(145deg,#F8C8A8,#EA8850); } .ip-mental { background:linear-gradient(145deg,#C8C0F0,#9088D8); } .ip-longevity { background:linear-gradient(145deg,#90D8D4,#58B0AC); } .ip-sleep { background:linear-gradient(145deg,#A8C0E4,#6890C8); } /* ── IMAGE PLACEHOLDERS ── */ .img-ph { background:var(--border); border-radius:6px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--lo-txt); font-size:13px; font-weight:500; text-align:center; padding:20px; position:relative; overflow:hidden; } .img-ph::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(255,255,255,.15) 10px,rgba(255,255,255,.15) 11px); } .img-ph .ph-icon { font-size:32px; position:relative; z-index:1; } .img-ph .ph-label { position:relative; z-index:1; line-height:1.4; } .img-ph .ph-size { font-size:11px; opacity:.7; position:relative; z-index:1; } .ph-hero { min-height:420px; } .ph-cat { min-height:320px; } .ph-card { min-height:200px; } .ph-thumb { min-height:140px; } .ph-glp1 { background:#C8E4A8; } .ph-hormone { background:#F4C8A8; } .ph-mental { background:#C8C4F0; } .ph-longevity{ background:#A4D8D4; } .ph-sleep { background:#A8C0E0; } /* ── HERO ── */ .hero { padding:130px var(--pad-h) 80px; max-width:var(--page-max); margin:0 auto; display:grid; grid-template-columns:1.1fr 1fr; gap:72px; align-items:center; } .hero-label { font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--cat-hot); margin-bottom:16px; } .hero h1 { letter-spacing:-0.02em; margin-bottom:22px; } .hero h1 em { font-style:italic; color:var(--cat-accent); } .hero-sub { font-size:18px; color:var(--mid-txt); line-height:1.7; margin-bottom:36px; max-width:440px; } .hero-actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center; } /* Goal card */ .goal-card { background:var(--bg2); border-radius:6px; padding:30px; border:1px solid var(--border); box-shadow:0 16px 52px rgba(0,0,0,.09); } .goal-card-head { font-size:13px; color:var(--lo-txt); margin-bottom:6px; } .goal-card-title { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; margin-bottom:20px; } .goal-opts { display:flex; flex-direction:column; gap:9px; } .goal-opt { display:flex; align-items:center; gap:13px; padding:12px 15px; border:1.5px solid var(--border); border-radius:5px; cursor:pointer; transition:all 0.2s; background:var(--bg); text-decoration:none; } .goal-opt:hover { text-decoration:none; } .goal-opt-body { flex:1; } .goal-opt-title { font-size:14px; font-weight:600; color:var(--body-txt); } .goal-opt-sub { font-size:13px; color:var(--lo-txt); margin-top:2px; } .goal-opt-arrow { font-size:20px; font-weight:600; margin-left:auto; color:#bbb; transition:color 0.2s; } .go-glp1:hover { border-color:#4A7A1A; background:#E4F0D0; } .go-glp1:hover .goal-opt-arrow { color:#4A7A1A; } .go-hormone:hover { border-color:#C04A1A; background:#FAE5D8; } .go-hormone:hover .goal-opt-arrow { color:#C04A1A; } .go-mental:hover { border-color:#5040B8; background:#E8E5F5; } .go-mental:hover .goal-opt-arrow { color:#5040B8; } .go-longevity:hover { border-color:#1A7070; background:#D5EDEC; } .go-longevity:hover .goal-opt-arrow { color:#1A7070; } /* ── HOW IT WORKS ── */ .how-section { max-width:var(--page-max); margin:0 auto; padding:80px var(--pad-h); } .how-head { text-align:center; margin-bottom:56px; } .steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:44px; } .step-num { font-family:'Playfair Display',serif; font-size:72px; font-weight:700; color:var(--border); line-height:1; margin-bottom:14px; } .step h3 { font-size:18px; font-weight:600; margin-bottom:10px; } .step p { font-size:15px; color:var(--mid-txt); line-height:1.75; } /* ── CATEGORY TILES ── */ .cats-section { padding:80px var(--pad-h); background:var(--cat-dark); } .cats-inner { max-width:var(--page-max); margin:0 auto; } .cats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; } .cats-bottom { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; max-width:66.67%; margin:16px auto 0; } .cat-tile { background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:5px; padding:28px 24px; display:block; text-decoration:none; transition:all 0.25s; position:relative; overflow:hidden; } .cat-tile::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; transform:scaleX(0); transition:transform 0.25s; } .cat-tile:hover::after { transform:scaleX(1); } .cat-tile:hover { background:rgba(255,255,255,.10); text-decoration:none; } .ct-glp1::after { background:#7CB342; } .ct-glp1 .ct-link { color:#A5D264; } .ct-hormone::after { background:#E0693A; } .ct-hormone .ct-link { color:#F0896A; } .ct-mental::after { background:#7B72D8; } .ct-mental .ct-link { color:#A09AE8; } .ct-longevity::after { background:#2A9D8A; } .ct-longevity .ct-link { color:#5ABFB0; } .ct-sleep::after { background:#5C7ABE; } .ct-sleep .ct-link { color:#8AAAE0; } .ct-name { font-family:'Playfair Display',serif; font-size:18px; font-weight:700; color:#fff; margin-bottom:10px; } .ct-desc { font-size:15px; color:rgba(255,255,255,.7); line-height:1.65; } .ct-link { display:inline-block; margin-top:16px; font-size:14px; font-weight:600; } .ct-soon { display:inline-block; font-size:10px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; background:rgba(255,255,255,.12); color:rgba(255,255,255,.5); padding:3px 10px; border-radius:2px; margin-bottom:12px; } /* ── TRUST ── */ .trust-section { max-width:var(--page-max); margin:0 auto; padding:80px var(--pad-h); } .trust-head { text-align:center; margin-bottom:52px; } .trust-head .lead { max-width:680px; margin:18px auto 0; } .trust-body-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; } .trust-points { display:flex; flex-direction:column; gap:14px; } .trust-pt { display:flex; gap:14px; align-items:flex-start; } .trust-check { width:24px; height:24px; background:var(--cat-accent-lt); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--cat-accent); flex-shrink:0; margin-top:2px; font-weight:700; } .trust-pt-text { font-size:16px; color:var(--mid-txt); line-height:1.65; } .stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .stat-box { background:var(--bg2); border:1px solid var(--border); border-radius:5px; padding:28px; } .stat-num { font-family:'Playfair Display',serif; font-size:52px; font-weight:800; color:var(--cat-accent); line-height:1; margin-bottom:8px; } .stat-lbl { font-size:14px; color:var(--mid-txt); } /* ── CAT HUB ── */ .cat-hero { max-width:var(--page-max); margin:0 auto; padding:24px var(--pad-h) 56px; } .cat-hero-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:start; } .cat-tag { display:inline-flex; align-items:center; gap:10px; background:var(--cat-hot-lt); color:var(--cat-hot); padding:8px 16px; border-radius:3px; font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:18px; } .cat-hero h1 { font-size:50px; margin-bottom:18px; } .cat-hero-body { font-size:17px; color:var(--mid-txt); line-height:1.8; margin-bottom:20px; } .tag-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; } .tag { padding:6px 14px; border-radius:3px; font-size:13px; border:1px solid var(--border); color:var(--mid-txt); } /* ── SIDEBAR ── */ .sidebar-sticky { position:sticky; top:calc(var(--nav-h) + 18px); display:flex; flex-direction:column; gap:16px; } .sidebar-box { background:var(--bg2); border:1px solid var(--border); border-radius:5px; padding:22px; } .sb-title { font-size:14px; font-weight:600; color:var(--body-txt); margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); } .provider-list { display:flex; flex-direction:column; gap:9px; } .provider-link { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border:1.5px solid var(--border); border-radius:4px; text-decoration:none; transition:all 0.2s; } .provider-link:hover { border-color:var(--cat-accent); background:var(--cat-accent-lt); text-decoration:none; } .pl-name { font-size:14px; font-weight:600; color:var(--body-txt); } .pl-sub { font-size:12px; color:var(--lo-txt); margin-top:2px; } .pl-arrow { font-size:20px; color:var(--cat-accent); font-weight:600; } .sb-note { font-size:12px; color:var(--lo-txt); margin-top:12px; padding-top:12px; border-top:1px solid var(--border); line-height:1.65; } .sidebar-box.promo { background:linear-gradient(140deg,var(--cat-accent) 0%,var(--cat-accent-dk) 100%); border:none; } .sidebar-box.promo .sb-title { color:rgba(255,255,255,.75); border-bottom-color:rgba(255,255,255,.15); } .promo-body { font-size:15px; color:rgba(255,255,255,.88); line-height:1.65; margin-bottom:14px; } .promo-btn { width:100%; background:#fff; color:var(--cat-accent); border:none; padding:13px; border-radius:3px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; cursor:pointer; display:block; text-align:center; text-decoration:none; } .toc-link { display:block; font-size:14px; color:var(--mid-txt); padding:8px 0; border-bottom:1px solid var(--border); text-decoration:none; transition:color 0.2s; } .toc-link:last-child { border-bottom:none; } .toc-link:hover { color:var(--cat-accent); } /* ── CONTENT ── */ .content-area { max-width:var(--page-max); margin:0 auto; padding:0 var(--pad-h) 80px; } .content-grid { display:grid; grid-template-columns:1fr 300px; gap:52px; align-items:start; } .content-block { margin-bottom:48px; } .alert-box { padding:14px 18px; border-radius:3px; font-size:14px; line-height:1.65; margin-bottom:20px; } .alert-info { background:var(--cat-hot-lt); border:1px solid var(--border); border-left:4px solid var(--cat-hot); color:var(--body-txt); } .alert-warning { background:#FFF8F0; border:1px solid #F0D4B0; border-left:4px solid #C04A1A; color:#3A1A08; } .alert-crisis { background:#F5E8F5; border:1px solid #D4A8D4; border-left:4px solid #6A3A8A; color:#2A0A2A; } .alert-box strong { font-weight:600; } /* ── COMPARISON TABLE ── */ .table-wrap { overflow-x:auto; margin-top:18px; } .compare-table { width:100%; border-collapse:collapse; font-size:14px; } .compare-table th { background:var(--cat-dark); color:#fff; padding:13px 16px; text-align:left; font-weight:600; font-size:13px; white-space:nowrap; } .compare-table td { padding:13px 16px; border-bottom:1px solid var(--border); color:var(--mid-txt); vertical-align:top; } .compare-table tr:last-child td { border-bottom:none; } .compare-table tr:nth-child(even) td { background:rgba(0,0,0,.02); } .compare-table td:first-child { font-weight:600; color:var(--body-txt); white-space:nowrap; } .badge { display:inline-block; padding:3px 9px; border-radius:3px; font-size:11px; font-weight:600; } .badge-yes { background:var(--cat-accent-lt); color:var(--cat-accent); } .badge-no { background:var(--cat-hot-lt); color:var(--cat-hot); } .badge-neu { background:#EBEBEB; color:#444; } .table-note { font-size:12.5px; color:var(--lo-txt); margin-top:10px; } /* ── FAQ ── */ .faq-list { display:flex; flex-direction:column; margin-top:8px; } .faq-item { border-bottom:1px solid var(--border); } .faq-item:first-child { border-top:1px solid var(--border); } .faq-q { width:100%; text-align:left; background:none; border:none; padding:18px 0; font-family:'DM Sans',sans-serif; font-size:16px; font-weight:600; color:var(--body-txt); cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; } .faq-q:hover { color:var(--cat-accent); } .faq-icon { font-size:20px; color:var(--cat-accent); flex-shrink:0; transition:transform 0.2s; } .faq-item.open .faq-icon { transform:rotate(45deg); } .faq-a { display:none; padding:0 0 18px; font-size:15px; color:var(--mid-txt); line-height:1.8; } .faq-item.open .faq-a { display:block; } /* ── QUIZ ── */ .quiz-shell { min-height:100vh; display:flex; flex-direction:column; padding-top:var(--nav-h); } .quiz-banner { background:var(--cat-dark); color:#fff; padding:36px var(--pad-h) 32px; display:flex; align-items:flex-start; justify-content:space-between; gap:32px; } .quiz-banner h2 { font-family:'Playfair Display',serif; font-size:34px; font-weight:700; margin-bottom:8px; color:#fff; } .quiz-banner p { font-size:15px; color:rgba(255,255,255,.65); max-width:400px; line-height:1.65; } .quiz-steps-row { display:flex; gap:6px; align-items:center; flex-shrink:0; padding-top:4px; } .qstep { display:flex; align-items:center; gap:7px; } .qstep-num { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:rgba(255,255,255,.12); color:rgba(255,255,255,.45); transition:all 0.3s; } .qstep-lbl { font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:rgba(255,255,255,.4); white-space:nowrap; } .qstep.done .qstep-num { background:var(--cat-accent); color:#fff; } .qstep.active .qstep-num { background:#fff; color:var(--cat-dark); } .qstep.done .qstep-lbl, .qstep.active .qstep-lbl { color:rgba(255,255,255,.75); } .qstep-line { width:24px; height:2px; background:rgba(255,255,255,.15); margin:0 2px; } .quiz-body { flex:1; display:flex; align-items:center; justify-content:center; padding:44px var(--pad-h); } .quiz-container { max-width:700px; width:100%; } .quiz-step-label { font-size:11px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--cat-hot); margin-bottom:10px; } .quiz-q { font-family:'Playfair Display',serif; font-size:40px; font-weight:700; line-height:1.18; margin-bottom:8px; } .quiz-sub { font-size:16px; color:var(--mid-txt); margin-bottom:32px; } .quiz-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; } .quiz-card { background:var(--bg2); border:2px solid var(--border); border-radius:6px; padding:22px; display:block; text-decoration:none; transition:all 0.22s; } .quiz-card:hover { border-color:var(--cat-accent); box-shadow:0 6px 24px rgba(0,0,0,.1); transform:translateY(-2px); text-decoration:none; } .qcard-icon { font-size:26px; margin-bottom:12px; display:block; } .qcard-title { font-size:15px; font-weight:600; margin-bottom:5px; color:var(--body-txt); } .qcard-sub { font-size:13px; color:var(--lo-txt); line-height:1.55; } .priority-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; } .priority-card { background:var(--bg2); border:2px solid var(--border); border-radius:6px; padding:22px 24px; cursor:pointer; transition:all 0.22s; display:flex; gap:16px; align-items:flex-start; } .priority-card:hover, .priority-card.sel { border-color:var(--cat-accent); } .priority-card.sel { background:var(--cat-accent-lt); } .pc-num { width:36px; height:36px; border-radius:50%; background:var(--cat-accent-lt); color:var(--cat-accent); display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:700; flex-shrink:0; margin-top:2px; } .pc-title { font-size:15px; font-weight:600; margin-bottom:4px; color:var(--body-txt); } .pc-sub { font-size:13px; color:var(--lo-txt); line-height:1.55; } .quiz-nav { display:flex; justify-content:space-between; align-items:center; margin-top:28px; } .quiz-back { background:none; border:none; color:var(--lo-txt); font-family:'DM Sans',sans-serif; font-size:14px; cursor:pointer; font-weight:500; } .quiz-back:hover { color:var(--body-txt); } /* ── RESULTS ── */ .results-list { display:flex; flex-direction:column; gap:14px; } .result-card { background:var(--bg2); border:1.5px solid var(--border); border-radius:6px; padding:22px 26px; display:grid; grid-template-columns:52px 1fr auto; gap:18px; align-items:center; transition:all 0.22s; } .result-card.top { border-color:var(--cat-accent); background:var(--cat-accent-lt); } .result-card:hover { box-shadow:0 4px 20px rgba(0,0,0,.09); transform:translateX(3px); } .rc-rank { font-family:'Playfair Display',serif; font-size:40px; font-weight:800; color:var(--border); line-height:1; } .result-card.top .rc-rank { color:var(--cat-accent); } .rc-name { font-family:'Playfair Display',serif; font-size:20px; font-weight:700; margin-bottom:5px; } .rc-tags { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:8px; } .rc-tag { padding:3px 10px; border-radius:3px; font-size:11px; font-weight:600; background:var(--bg); border:1px solid var(--border); color:var(--mid-txt); } .result-card.top .rc-tag { background:#fff; } .rc-desc { font-size:14px; color:var(--mid-txt); line-height:1.65; } .rc-right { text-align:right; flex-shrink:0; } .rc-price { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:var(--cat-accent); } .rc-plbl { font-size:11px; color:var(--lo-txt); } .rc-cta { display:block; margin-top:10px; background:var(--cat-accent); color:#fff; padding:9px 16px; border-radius:3px; font-size:13px; font-weight:600; text-align:center; transition:background 0.2s; border:none; font-family:'DM Sans',sans-serif; white-space:nowrap; text-decoration:none; } .rc-cta:hover { background:var(--cat-accent-dk); text-decoration:none; color:#fff; } .result-card:not(.top) .rc-cta { background:transparent; border:1.5px solid var(--border); color:var(--body-txt); } .result-card:not(.top) .rc-cta:hover { border-color:var(--cat-accent); color:var(--cat-accent); } .results-note { font-size:12.5px; color:var(--lo-txt); text-align:center; margin-top:16px; line-height:1.7; } /* ── DISCLOSURE BAR ── */ .disc-bar { background:var(--bg); border-top:1px solid var(--border); padding:18px var(--pad-h); text-align:center; } .disc-bar p { font-size:12.5px; color:var(--lo-txt); max-width:960px; margin:0 auto; line-height:1.75; } /* ── FOOTER ── */ .site-footer { background:var(--cat-dark); padding:64px var(--pad-h) 32px; } .footer-inner { max-width:var(--page-max); margin:0 auto; } .footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:52px; margin-bottom:44px; } .footer-logo { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; color:#fff; margin-bottom:12px; display:block; text-decoration:none; } .footer-logo span { color:var(--cat-gold); } .footer-tagline { font-size:14px; color:rgba(255,255,255,.55); line-height:1.7; } .footer-col h4 { font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:rgba(255,255,255,.32); margin-bottom:16px; font-family:'DM Sans',sans-serif; font-weight:600; } .footer-col a { display:block; font-size:14px; color:rgba(255,255,255,.58); text-decoration:none; margin-bottom:10px; transition:color 0.2s; } .footer-col a:hover { color:#fff; text-decoration:none; } .footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:22px; display:flex; justify-content:space-between; font-size:12px; color:rgba(255,255,255,.32); flex-wrap:wrap; gap:8px; } /* ── EDITORIAL / LEGAL ── */ .editorial-wrap { max-width:800px; margin:0 auto; padding:56px var(--pad-h) 96px; } .editorial-title { font-family:'Playfair Display',serif; font-size:48px; font-weight:800; margin-bottom:10px; margin-top:20px; } .editorial-meta { font-size:13px; color:var(--lo-txt); margin-bottom:40px; } .editorial-wrap h2 { margin-top:44px; } .editorial-wrap h3 { margin-top:28px; } .editorial-wrap p { margin-bottom:16px; } .callout-box { background:var(--accent-lt); border-left:3px solid var(--accent); padding:16px 20px; border-radius:3px; margin:24px 0; font-size:15px; color:var(--mid-txt); line-height:1.7; } .warning-box { background:#FFF8F0; border-left:3px solid #C04A1A; padding:16px 20px; border-radius:3px; margin:24px 0; font-size:15px; color:#3A1A08; line-height:1.7; } .toc-box { background:var(--bg2); border:1px solid var(--border); border-radius:5px; padding:24px 28px; margin-bottom:40px; } .toc-box h4 { font-size:13px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--lo-txt); margin-bottom:14px; font-family:'DM Sans',sans-serif; } .toc-box li { font-size:14px; margin-bottom:6px; } .section-rule { border:none; border-top:1px solid var(--border); margin:36px 0; } /* Legal tab strip */ .legal-tabs { position:sticky; top:var(--nav-h); z-index:100; background:var(--bg2); border-bottom:1px solid var(--border); display:flex; overflow-x:auto; } .legal-tab { padding:16px 24px; font-size:13px; font-weight:500; color:var(--lo-txt); cursor:pointer; border-bottom:2px solid transparent; transition:all 0.2s; white-space:nowrap; background:none; border-top:none; border-left:none; border-right:none; font-family:'DM Sans',sans-serif; } .legal-tab:hover { color:var(--body-txt); } .legal-tab.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; } /* ── CONTACT ── */ .contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; margin-top:40px; } .form-group { margin-bottom:20px; } .form-label { display:block; font-size:14px; font-weight:600; color:var(--body-txt); margin-bottom:7px; } .form-input, .form-select, .form-textarea { width:100%; padding:13px 16px; border:1.5px solid var(--border); border-radius:4px; font-family:'DM Sans',sans-serif; font-size:15px; color:var(--body-txt); background:var(--bg2); outline:none; transition:border-color 0.2s; } .form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--accent); } .form-textarea { min-height:140px; resize:vertical; } .form-note { font-size:12px; color:var(--lo-txt); margin-top:6px; line-height:1.6; } .cib-item h4 { font-size:15px; font-weight:600; margin-bottom:4px; } .cib-item p { font-size:14px; color:var(--lo-txt); line-height:1.65; margin-bottom:0; } /* ── WAITLIST ── */ .waitlist-card { background:var(--bg2); border:1px solid var(--border); border-radius:6px; padding:32px; box-shadow:0 12px 40px rgba(0,0,0,.08); } .wc-label { font-size:11px; font-weight:600; letter-spacing:0.15em; text-transform:uppercase; color:var(--cat-hot); margin-bottom:10px; } .wc-title { font-family:'Playfair Display',serif; font-size:22px; font-weight:700; margin-bottom:8px; } .wc-sub { font-size:14px; color:var(--mid-txt); line-height:1.6; margin-bottom:20px; } .wc-row { display:flex; gap:10px; margin-bottom:12px; } .wc-input { flex:1; padding:13px 16px; border:1.5px solid var(--border); border-radius:4px; font-family:'DM Sans',sans-serif; font-size:14px; color:var(--body-txt); background:var(--bg); outline:none; transition:border-color 0.2s; } .wc-input:focus { border-color:var(--cat-accent); } .wc-submit { background:var(--cat-accent); color:#fff; padding:13px 22px; border:none; border-radius:4px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; transition:background 0.2s; } .wc-submit:hover { background:var(--cat-accent-dk); } .wc-note { font-size:12px; color:var(--lo-txt); line-height:1.6; } /* ── 404 ── */ .not-found { min-height:calc(100vh - var(--nav-h)); display:flex; align-items:center; justify-content:center; padding:80px var(--pad-h); } .nf-inner { max-width:600px; text-align:center; } .nf-num { font-family:'Playfair Display',serif; font-size:120px; font-weight:800; color:var(--border); line-height:1; margin-bottom:8px; } .nf-title { font-size:32px; margin-bottom:16px; } .nf-body { font-size:17px; color:var(--mid-txt); margin-bottom:36px; line-height:1.7; } .nf-cats { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:32px; } /* ── RESPONSIVE ── */ @media (max-width:1060px) { :root { --pad-h:24px; } .nav-ham { display:flex; } .nav-links { display:none; position:fixed; top:var(--nav-h); left:0; right:0; background:#FDFAF6; flex-direction:column; padding:8px 24px 20px; border-bottom:1px solid #DDD7CC; box-shadow:0 8px 24px rgba(0,0,0,.1); gap:0; z-index:300; } .nav-links.open { display:flex; } .nav-links a { padding:15px 0; border-bottom:1px solid #DDD7CC; font-size:16px; width:100%; } .nav-links a:last-child { border-bottom:none; padding-top:18px; } .nav-cta { display:block; text-align:center; margin-top:4px; } } @media (max-width:900px) { h1 { font-size:40px; } .section-title { font-size:34px; } .hero { grid-template-columns:1fr; gap:36px; padding-top:100px; } .cat-hero-grid,.content-grid,.trust-body-grid,.contact-grid { grid-template-columns:1fr; gap:36px; } /* Category tiles — keep consistent 16px gap at ALL breakpoints */ .cats-grid { grid-template-columns:1fr 1fr; } .cats-bottom { max-width:100%; grid-template-columns:1fr 1fr; margin-top:16px; } /* Goal strip — collapse 4-across to 2x2 */ .goal-strip-grid { grid-template-columns:1fr 1fr !important; } .steps-grid { grid-template-columns:1fr; gap:28px; } .footer-grid { grid-template-columns:1fr 1fr; gap:28px; } .quiz-cards-grid { grid-template-columns:1fr 1fr; } .priority-grid { grid-template-columns:1fr; } .stat-grid { grid-template-columns:1fr 1fr; } .result-card { grid-template-columns:40px 1fr; } .rc-right { display:none; } .sidebar-sticky { position:static; } .quiz-steps-row { display:none; } .wc-row { flex-direction:column; } } @media (max-width:540px) { /* Single column for all tile grids at phone width */ .cats-grid,.cats-bottom,.quiz-cards-grid { grid-template-columns:1fr; } /* cats-bottom inherits margin-top:16px from 900px rule — stays consistent */ .goal-strip-grid { grid-template-columns:1fr 1fr !important; } .nf-num { font-size:80px; } }