/* Dollar Tree — Life Events Shared stylesheet for every page. Edit here once, not twelve times. Brand colours are the two approved Pantones plus a derived hover shade: --g355 #009639 Pantone 355C --g360 #6CC24A Pantone 360C --g355d #007A2E hover and focus states only No other greens. Use the variable, never the hex. */ :root{ --g355:#009639; --g360:#6CC24A; --ink:#231F20; --g355d:#007A2E; /* derived hover shade of 355C — interaction states only */ --tint:#EAF5E4; --tint2:#F5FAF2; --rule:#DCE7D8; --paper:#fff; --muted:#5C6659; --maxw:1160px; --font-display:"Futura PT","Futura Std","Futura","Century Gothic",Jost,"URW Gothic","Trebuchet MS",sans-serif; --font-body:"Century Gothic","URW Gothic",Jost,"Futura PT","Futura Std",Futura,"Trebuchet MS",sans-serif; --stripe:repeating-linear-gradient(45deg, var(--g355) 0 14px, var(--g360) 14px 28px); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--paper);color:var(--ink); font-family:var(--font-body); font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased; } /* Display heads take Futura first (brand primary); body takes Century Gothic first, mirroring the 2026 AE Guide. Jost is the cross-platform backstop for Mac/Android, where neither Futura nor Century Gothic is installed. */ h1,h2,h3,h4,.hero h1,.eyebrow,.btn,.pdf,.dl-top b,.steps b,.row b{font-family:var(--font-display)} a{color:inherit} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} /* ---------- header ---------- */ .shell{position:sticky;top:0;z-index:60;background:#fff;box-shadow:0 1px 0 var(--rule)} .head-in{display:flex;align-items:center;gap:20px;padding:18px 0 16px} .brand{display:flex;align-items:center;gap:18px;text-decoration:none} .brand img.logo{width:250px;height:auto} .brand .div{width:1px;height:30px;background:var(--rule)} .brand .site-name{font-family:var(--font-display);font-size:20px;font-weight:700; letter-spacing:-.015em;color:var(--ink);white-space:nowrap} .head-act{margin-left:auto;display:flex;align-items:center;gap:10px} .iconbtn{ width:42px;height:42px;border-radius:99px;border:1px solid var(--rule);background:#fff; display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0; transition:border-color .15s,background .15s } .iconbtn svg{width:18px;height:18px;stroke:var(--ink);fill:none;stroke-width:2} .iconbtn:hover{border-color:var(--g355);background:var(--tint2)} .iconbtn:hover svg{stroke:var(--g355)} .iconbtn:focus-visible{outline:3px solid var(--g355);outline-offset:2px} .guidebtn{ font-family:var(--font-display);font-size:14px;font-weight:700;text-decoration:none; color:var(--g355);border:2px solid var(--g355);border-radius:99px;padding:9px 18px; display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:background .15s,color .15s } .guidebtn:hover{background:var(--g355);color:#fff} .guidebtn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2} .guidebtn:focus-visible{outline:3px solid var(--ink);outline-offset:2px} /* search drawer */ .searchdrawer{display:none;border-top:1px solid var(--rule);background:var(--tint2);padding:16px 0} .searchdrawer.open{display:block} .searchdrawer .wrap{display:flex;gap:10px} .searchdrawer input{font:inherit;flex:1;padding:13px 16px;border:2px solid var(--rule); border-radius:8px;font-size:15px;background:#fff} .searchdrawer input:focus{outline:none;border-color:var(--g355)} /* nav */ .nav{border-top:1px solid var(--rule);background:#fff} .nav-in{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap} .navitem{position:relative} .navitem>a,.navitem>button{ font:inherit;font-family:var(--font-display);font-size:15px;font-weight:700; background:none;border:0;cursor:pointer;color:var(--ink);text-decoration:none; padding:15px 16px;display:inline-flex;align-items:center;gap:7px; border-bottom:3px solid transparent;transition:color .15s,border-color .15s } .navitem:first-child>a,.navitem:first-child>button{padding-left:0} .navitem>a:hover,.navitem>button:hover, .navitem>a[aria-current],.navitem.open>button{color:var(--g355);border-bottom-color:var(--g355)} .navitem>button:focus-visible,.navitem>a:focus-visible{outline:3px solid var(--g355);outline-offset:-3px} .caret{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.6;transition:transform .18s} .navitem.open .caret{transform:rotate(180deg)} .menu{ position:absolute;top:100%;left:0;min-width:290px;background:#fff;border:1px solid var(--rule); border-top:3px solid var(--g355);border-radius:0 0 12px 12px;box-shadow:0 16px 34px rgba(35,31,32,.14); padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .16s,transform .16s,visibility .16s;z-index:70 } .navitem.open .menu{opacity:1;visibility:visible;transform:translateY(0)} .menu a{ display:block;padding:10px 13px;border-radius:8px;text-decoration:none;color:var(--ink); font-size:14.5px;line-height:1.35 } .menu a small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px} .menu a:hover{background:var(--tint);color:var(--g355)} .menu a:focus-visible{outline:2px solid var(--g355);outline-offset:-2px} @media(max-width:900px){ .brand img.logo{width:180px} .brand .div,.brand .site-name{display:none} .nav-in{gap:0} .navitem>a,.navitem>button{padding:12px 11px;font-size:14px} .navitem:first-child>a,.navitem:first-child>button{padding-left:0} .menu{position:static;opacity:1;visibility:visible;transform:none;display:none; box-shadow:none;border-radius:8px;margin:0 0 8px} .navitem.open .menu{display:block} } /* stripe device */ .stripes{background:var(--stripe)} /* hero */ /* overflow:hidden lived here to contain the background image, but it also clipped the search results dropdown at the hero's bottom edge. Moved to .hero .bg so the image is still contained and results can escape. */ .hero{position:relative;background:var(--tint2);min-height:500px;display:flex;align-items:center} .hero .bg{position:absolute;inset:0;z-index:0;overflow:hidden} .hero .bg img{width:100%;height:100%;object-fit:cover;object-position:64% 50%} .hero .bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(95deg,#fff 0%,rgba(255,255,255,.94) 18%,rgba(255,255,255,.70) 30%,rgba(255,255,255,.20) 41%,rgba(255,255,255,0) 52%) } .hero-in{ max-width:var(--maxw);margin:0 auto;padding:74px 26px 70px;width:100%; position:relative;z-index:3 } .hero-copy{max-width:700px} .hero h1{ margin:0 0 16px;font-size:clamp(30px,4.4vw,52px);line-height:1.03; font-weight:700;letter-spacing:-.025em;color:var(--g355) } /* "Here's what to do next." is the longest line in the design — it must never wrap. Display size is capped to what .hero-copy can hold at 52px; below 480px the cap releases so the line can break rather than overflow. */ .hero h1 em{font-style:normal;color:var(--ink);display:block;white-space:nowrap} @media(max-width:479px){.hero h1 em{white-space:normal}} .hero .lede{margin:0 0 26px;font-size:17px;line-height:1.6;color:var(--muted);max-width:52ch} .hero-media{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 18px 44px rgba(35,31,32,.14)} .hero-media img{width:100%;height:100%;object-fit:cover} .hero-media .wash{position:absolute;inset:0;background:linear-gradient(200deg,rgba(0,150,57,.20),rgba(0,150,57,0) 58%)} @media(max-width:880px){ .hero{min-height:0} .hero-in{padding:52px 26px 54px} .hero .bg img{object-position:68% 46%} .hero .bg::after{background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.93) 62%,rgba(255,255,255,.80) 100%)} } .bigsearch{display:flex;gap:10px;max-width:520px} .bigsearch input{ font:inherit;flex:1;padding:14px 18px;border:2px solid var(--rule);border-radius:8px;font-size:15px } .bigsearch input:focus{outline:none;border-color:var(--g355)} .btn{ font:inherit;font-family:var(--font-display);font-weight:700;font-size:14.5px; border:2px solid var(--g355);background:var(--g355);color:#fff; padding:13px 24px;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-flex; align-items:center;justify-content:center;gap:8px;white-space:nowrap; transition:background .15s,border-color .15s,color .15s } .btn svg{width:15px;height:15px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2} .btn:hover{background:var(--g355d);border-color:var(--g355d)} .btn.ghost{background:transparent;color:var(--g355)} .btn.ghost:hover{background:var(--tint);color:var(--g355d)} .btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px} .chips{margin-top:16px;display:flex;gap:9px;flex-wrap:wrap;align-items:center} .chips span.lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .chips a{ font-size:13px;text-decoration:none;padding:6px 14px;border:1px solid var(--rule); border-radius:99px;background:#fff;color:var(--ink) } .chips a:hover{border-color:var(--g355);color:var(--g355);background:var(--tint2)} /* sections */ section.band{padding:66px 0} section.band.tinted{background:var(--tint2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} h2.sect{margin:0 0 8px;font-size:clamp(25px,3vw,33px);font-weight:700;letter-spacing:-.02em;color:var(--g355)} p.sect-sub{margin:0 0 30px;color:var(--muted);font-size:15.5px;max-width:60ch} /* tiles */ .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.grid{grid-template-columns:1fr}} .tile{ display:flex;flex-direction:column;background:#fff;border:1px solid var(--rule);border-radius:12px; overflow:hidden;text-decoration:none;color:inherit;transition:border-color .18s,box-shadow .18s,transform .18s } .tile:hover{border-color:var(--g355);box-shadow:0 12px 30px rgba(0,150,57,.16);transform:translateY(-3px)} .tile:focus-visible{outline:3px solid var(--g355);outline-offset:2px} .tile-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--g355)} .tile-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s} .tile:hover .tile-media img{transform:scale(1.045)} /* Photos run natural — no grade, no tint. Styling TBD. */ .tile-media .scrim{display:none} .tile-body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1} .tile h3{margin:0 0 8px;font-size:19px;font-weight:700;line-height:1.22;letter-spacing:-.012em;color:var(--g355)} .tile p{margin:0 0 16px;font-size:14px;line-height:1.5;color:var(--muted);flex:1} .pdf{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--g355); display:inline-flex;align-items:center;gap:7px} .pdf svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2} .tile.solid{background:var(--g355);border-color:var(--g355)} .tile.solid .tile-media{display:flex;align-items:center;justify-content:center;background:var(--g355);position:relative} .tile.solid .tile-media::before{ content:"";position:absolute;inset:0;background:var(--stripe);opacity:.42 } .tile.solid .mark{position:relative;z-index:2;width:96px;height:96px;border-radius:50%;background:#fff; display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.16)} .tile.solid .mark svg{width:44px;height:44px;stroke:var(--g355);fill:none;stroke-width:1.8} .tile.solid h3,.tile.solid:hover h3{color:#fff} .tile.solid p{color:#D9EFDC} .tile.solid .pdf{color:#fff} .tile.solid:hover{box-shadow:0 12px 30px rgba(0,150,57,.3)} /* wellbeing rows */ .rows{border-top:2px solid var(--g355)} .row{display:flex;align-items:center;gap:16px;padding:16px 4px;border-bottom:1px solid var(--rule); text-decoration:none;color:inherit} .row{transition:background .16s ease,padding .16s ease} /* Dark-green hover, restrained: a soft tint wash, a 3px dark-green rail and the title + icon chip picking up the dark green. --g355d is the shade already used for .btn:hover, so no new colour enters the palette. Keeping the text dark-on-light also sidesteps the contrast problem a solid green fill creates for the 13px meta line. */ .row:hover,.row:focus-visible{background:var(--tint); box-shadow:inset 3px 0 0 var(--g355d);padding-left:18px} .row:focus-visible{outline:2px solid var(--g355d);outline-offset:-2px} .row:hover b,.row:focus-visible b{color:var(--g355d)} .row:hover .go,.row:focus-visible .go{color:var(--g355d)} .row:hover .n,.row:focus-visible .n{background:var(--g355d)} .row:hover .n svg,.row:focus-visible .n svg{stroke:#fff} @media(prefers-reduced-motion:reduce){.row{transition:none}} .row .n{width:34px;height:34px;border-radius:50%;background:var(--tint);display:flex;align-items:center; justify-content:center;flex:none} .row .n svg{width:17px;height:17px;stroke:var(--g355);fill:none;stroke-width:2} .row b{font-size:16px;font-weight:700} .row .meta{font-size:13px;color:var(--muted)} .row .go{margin-left:auto;font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--g355)} /* CTA band */ .cta{position:relative;background:var(--g355);color:#fff;overflow:hidden} .cta .corner{position:absolute;right:0;bottom:0;width:150px;height:150px;background:var(--stripe); clip-path:polygon(100% 0,100% 100%,0 100%);opacity:.34} .cta-in{position:relative;z-index:2;display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:26px 0} .cta h3{margin:0 0 3px;font-size:19px;font-weight:700;letter-spacing:-.015em} .cta p{margin:0;color:#DCF0DF;font-size:14px;max-width:62ch} .cta .acts{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap} .cta .btn{background:#fff;color:var(--g355);border-color:#fff} .cta .btn:hover{background:var(--tint);border-color:var(--tint);color:var(--g355d)} .cta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)} .cta .btn.ghost:hover{background:rgba(255,255,255,.14);color:#fff;border-color:#fff} /* footer */ footer.site{background:var(--ink);color:#C9D2C6;padding:44px 0 30px;font-size:14px} footer.site .top{height:5px;background:var(--stripe)} .f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px} @media(max-width:820px){.f-grid{grid-template-columns:1fr 1fr}} footer.site img{width:180px;margin-bottom:14px} footer.site h4{margin:0 0 12px;font-size:10.5px;letter-spacing:.19em;text-transform:uppercase;color:#8FA68C;font-weight:700} footer.site ul{list-style:none;margin:0;padding:0} footer.site li{margin-bottom:8px} footer.site a{color:#C9D2C6;text-decoration:none} footer.site a:hover{color:#fff;text-decoration:underline} .f-legal{margin-top:32px;padding-top:18px;border-top:1px solid rgba(255,255,255,.14); display:flex;gap:20px;flex-wrap:wrap;font-size:12px;color:#8FA68C} /* ---- interior ---- */ .page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--rule)} .page-hero .media{position:absolute;inset:0} .page-hero .media img{width:100%;height:100%;object-fit:cover} .page-hero .media::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.94) 60%,rgba(255,255,255,.42) 83%,rgba(0,150,57,.18) 100%)} .page-hero-in{position:relative;z-index:2;padding:46px 0 42px;max-width:1080px} .eyebrow{margin:0 0 10px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--g355);font-weight:700} /* H1 runs the full hero width so two-word-plus titles hold one line. text-wrap:balance keeps the break even if a longer page title does wrap. */ .page-hero h1{margin:0;font-size:clamp(30px,4.2vw,46px);line-height:1.06;font-weight:700; letter-spacing:-.025em;color:var(--ink);max-width:none;text-wrap:balance} .page-hero .lede{margin:0;font-size:17px;color:var(--muted);line-height:1.6;max-width:660px} @media(max-width:760px){.page-hero .media::after{background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.92))}} .layout{padding:44px 0 60px} /* Full-width column. Paragraph measure is capped for legibility; the checklist module, callouts and steps run the full width of the grid. */ .prose>p,.prose>h2{max-width:74ch} .prose h2{margin:36px 0 12px;font-size:24px;font-weight:700;letter-spacing:-.018em;color:var(--g355); padding-bottom:8px;border-bottom:2px solid var(--tint)} .prose h2:first-child{margin-top:0} .prose p{margin:0 0 14px;font-size:15.5px;line-height:1.68;letter-spacing:.002em;color:#3C443A} .callout{background:var(--tint);border-radius:12px;padding:20px 22px;margin:22px 0;display:flex;gap:14px} .callout .ic{width:34px;height:34px;border-radius:50%;background:#fff;flex:none;display:flex; align-items:center;justify-content:center} .callout .ic svg{width:18px;height:18px;stroke:var(--g355);fill:none;stroke-width:2} .callout b{display:block;font-size:16px;margin-bottom:4px} .callout p{margin:0;font-size:14.5px;color:#3C443A} .steps{list-style:none;margin:0;padding:0;counter-reset:s} .steps li{position:relative;padding:0 0 22px 52px;counter-increment:s} .steps li::before{ content:counter(s);position:absolute;left:0;top:-2px;width:34px;height:34px;border-radius:50%; background:var(--g355);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center } .steps li::after{content:"";position:absolute;left:16.5px;top:36px;bottom:2px;width:2px;background:var(--tint)} .steps li:last-child{padding-bottom:0} .steps li:last-child::after{display:none} .steps b{display:block;font-size:16.5px;margin-bottom:3px} .steps p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55} .dl{border:2px solid var(--g355);border-radius:14px;overflow:hidden;margin:26px 0} .dl-top{background:var(--g355);color:#fff;padding:18px 22px;display:flex;gap:16px;align-items:center;flex-wrap:wrap} .dl-top>div:first-child{min-width:0;flex:1 1 320px} .dl-top .lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#BFE6C6} .dl-top b{display:block;font-size:18px;font-weight:700;margin-top:2px} .dl-top .meta{font-size:12.5px;color:#CFEDD5;margin-top:3px} .dl-top .acts{margin-left:auto;display:flex;gap:9px;flex:none;align-items:center} .dl-top .btn{flex:none} .dl-top .btn{background:#fff;color:var(--g355);border-color:#fff;padding:11px 18px;font-size:13.5px} .dl-top .btn:hover{background:var(--tint);border-color:var(--tint)} .dl-top .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)} .dl-top .btn.ghost:hover{background:rgba(255,255,255,.15);border-color:#fff;color:#fff} .dl-body{padding:18px 22px;background:var(--tint2);font-size:14.5px;color:#3C443A} .dl-body ul{margin:10px 0 0;padding-left:20px} .dl-body li{margin-bottom:5px} .flag{display:inline-block;margin-top:12px;font-size:12px;color:var(--muted); background:#fff;border:1px dashed var(--rule);border-radius:6px;padding:6px 10px} /* accordion — "Your Next Steps" Built on native
/ so it works without JS, is keyboard operable, and is announced correctly by screen readers. Squarespace 7.1 has no native accordion block on non-Fluid sections; this drops into a code block unchanged. */ .acc{border-top:2px solid var(--g355);margin:20px 0 0} .ac{border-bottom:1px solid var(--rule)} .ac>summary{ list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px; padding:17px 4px;font-family:var(--font-display);font-size:16.5px;font-weight:700; line-height:1.3;color:var(--ink);transition:color .15s } .ac>summary::-webkit-details-marker{display:none} .ac>summary:hover{color:var(--g355)} .ac>summary:focus-visible{outline:3px solid var(--g355);outline-offset:-3px;border-radius:6px} .ac[open]>summary{color:var(--g355)} .ac .sig{ width:30px;height:30px;border-radius:50%;background:var(--tint);flex:none; display:flex;align-items:center;justify-content:center;margin-top:-2px } .ac .sig svg{width:15px;height:15px;stroke:var(--g355);fill:none;stroke-width:2.4; transition:transform .18s} .ac[open] .sig{background:var(--g355)} .ac[open] .sig svg{stroke:#fff;transform:rotate(180deg)} .ac-body{padding:0 4px 22px 48px;font-size:15px;line-height:1.65;color:#3C443A;max-width:78ch} .ac-body p{margin:0 0 12px;font-size:15px} .ac-body p:last-child{margin-bottom:0} .ac-body ul{list-style:none;margin:0;padding:0} .ac-body ul li{position:relative;padding-left:20px;margin-bottom:10px} .ac-body ul li:last-child{margin-bottom:0} .ac-body ul li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px; background:var(--g360)} .ac-body a{color:var(--g355);font-weight:700;text-decoration:underline; text-underline-offset:2px;text-decoration-thickness:1.5px} .ac-body a:hover{color:var(--g355d)} .ac-body .chips{margin-top:2px} /* group numbers — tabular, so the three Unum lines read as a reference block rather than more prose */ .glist{margin:12px 0 0;border-top:1px solid var(--rule)} .glist div{display:flex;gap:16px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:14.5px} .glist span{color:var(--muted)} .glist b{margin-left:auto;font-family:var(--font-display);color:var(--ink)} /* additional support */ .support{ margin-top:36px;background:var(--tint2);border:1px solid var(--rule); border-left:5px solid var(--g360);border-radius:12px;padding:24px 26px } .support h3{margin:0 0 4px;font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--g355)} .support>p{margin:0 0 16px;font-size:14.5px;color:var(--muted);max-width:70ch} .support ul{list-style:none;margin:0;padding:0} .support li{position:relative;padding-left:20px;margin-bottom:13px;font-size:14.5px; line-height:1.6;color:#3C443A;max-width:74ch} .support li:last-child{margin-bottom:0} .support li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;background:var(--g360)} .support b{font-family:var(--font-display)} .support a{color:var(--g355);font-weight:700;text-decoration:underline;text-underline-offset:2px} .support code{font-family:var(--font-display);font-weight:700;background:#fff; border:1px solid var(--rule);border-radius:5px;padding:1px 7px;font-size:13.5px} /* On narrow screens the body loses its indent and runs full width, but the caret stays — it is the only open/closed affordance. */ @media(max-width:600px){ .ac-body{padding-left:4px} .ac>summary{font-size:15.5px;gap:11px} .glist div{flex-wrap:wrap;gap:4px} .glist b{margin-left:0} } /* who to contact — full-width strip at the foot of the page */ .contact{border-top:2px solid var(--g355);padding-top:26px;margin-top:38px} .contact h2{margin:0 0 4px;font-size:22px;font-weight:700;letter-spacing:-.018em;color:var(--g355); font-family:var(--font-display)} .contact .sub{margin:0 0 20px;color:var(--muted);font-size:14.5px} .contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} @media(max-width:820px){.contact-grid{grid-template-columns:1fr}} .ccard{border:1px solid var(--rule);border-radius:12px;padding:18px 20px;background:#fff; display:flex;gap:14px;align-items:flex-start} .ccard .ic{width:36px;height:36px;border-radius:50%;background:var(--tint);flex:none; display:flex;align-items:center;justify-content:center} .ccard .ic svg{width:17px;height:17px;stroke:var(--g355);fill:none;stroke-width:2} .ccard .lbl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted); display:block;margin-bottom:3px} .ccard a{font-family:var(--font-display);font-size:16.5px;font-weight:700;color:var(--g355); text-decoration:none;display:block;line-height:1.25} .ccard a:hover{text-decoration:underline} .ccard .who{font-size:13px;color:var(--muted);display:block;margin-top:3px} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}} .tile-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--g355)} /* Contacts directory — full-width band under the 3x3 grid. Was a 10th tile, which broke the grid once the Moving / Spousal tiles were split. */ .dirband{position:relative;overflow:hidden;margin-top:22px;display:flex;align-items:center; gap:18px;padding:18px 26px;border-radius:14px;background:var(--g355);color:#fff; text-decoration:none;transition:box-shadow .18s ease,transform .18s ease} .dirband:hover{box-shadow:0 12px 30px rgba(0,150,57,.28);transform:translateY(-2px)} .dirband:focus-visible{outline:3px solid var(--g355);outline-offset:3px} .dirband-stripe{position:absolute;inset:0 0 0 auto;width:280px;background:var(--stripe); opacity:.5;pointer-events:none} .dirband-mark{position:relative;z-index:2;flex:0 0 auto;width:48px;height:48px;border-radius:50%; background:#fff;display:flex;align-items:center;justify-content:center} .dirband-mark svg{width:24px;height:24px;stroke:var(--g355);fill:none;stroke-width:1.8} .dirband-txt{position:relative;z-index:2;display:flex;flex-direction:column;gap:3px;flex:1} .dirband-h{font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.22} .dirband-go{position:relative;z-index:2;flex:0 0 auto;font-size:12px;font-weight:700; letter-spacing:.1em;text-transform:uppercase} @media(max-width:760px){ .dirband{flex-wrap:wrap;gap:14px;padding:20px} .dirband-stripe{width:150px} .dirband-go{margin-left:66px} } @media(prefers-reduced-motion:reduce){.dirband{transition:none}.dirband:hover{transform:none}} .row .meta{font-size:13px;color:var(--muted);margin-left:20px} @media(max-width:640px){.row .meta{display:block;margin-left:0;margin-top:3px}} .page-hero .media::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.93) 44%,rgba(255,255,255,.35) 72%,rgba(0,150,57,.18) 100%)} /* Removed: a duplicate .page-hero-in with max-width:660px used to sit here. It came in when the two stylesheets were merged and, being later in the file, silently overrode the 1080px rule above — which is what stops interior H1s wrapping. Only surfaced once a page title was long enough ("Marriage and Domestic Partnership"). Don't reintroduce a second rule. */ .page-hero h1{margin:0;font-size:clamp(30px,4.2vw,46px);line-height:1.06;font-weight:700; letter-spacing:-.025em;color:var(--ink)} .page-hero .lede{margin:0;font-size:17px;color:var(--muted);line-height:1.6} /* --------------------------------------------------------------------- Current-page state. The nav is one shared include, so the active item is driven off two attributes on rather than by editing markup per page. --------------------------------------------------------------------- */ body[data-active-group="life-moments"] .nav button[data-group="life-moments"], body[data-active-group="retirement"] .nav button[data-group="retirement"], body[data-active-group="leaves"] .nav button[data-group="leaves"], body[data-active-group="changing"] .nav button[data-group="changing"]{ color:var(--g355) } body[data-page="marriage"] .menu a[data-page-link="marriage"], body[data-page="divorce"] .menu a[data-page-link="divorce"], body[data-page="child"] .menu a[data-page-link="child"], body[data-page="death"] .menu a[data-page-link="death"], body[data-page="retirement"] .menu a[data-page-link="retirement"], body[data-page="medicare"] .menu a[data-page-link="medicare"], body[data-page="leaves"] .menu a[data-page-link="extended-leave"], body[data-page="leaves"] .menu a[data-page-link="military-leave"], body[data-page="moving"] .menu a[data-page-link="moving"], body[data-page="spousal"] .menu a[data-page-link="spousal"], body[data-page="contacts"] .menu a[data-page-link="contacts"]{ background:var(--tint);box-shadow:inset 3px 0 0 var(--g355d);color:var(--g355d) } /* Jump-link targets. The header is sticky, so an anchor without this scrolls the heading underneath it. */ .jump{scroll-margin-top:172px;padding-top:6px} .jump + .jump{margin-top:44px;padding-top:38px;border-top:1px solid var(--rule)} /* --------------------------------------------------------------------- Search results --------------------------------------------------------------------- */ .sresults{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:120; background:#fff;border:1px solid var(--rule);border-radius:12px;overflow:hidden; box-shadow:0 18px 40px rgba(35,31,32,.14)} .sresults.open{display:block} .sr-hit{display:block;padding:11px 16px;text-decoration:none;border-bottom:1px solid var(--rule)} .sr-hit:last-child{border-bottom:0} .sr-hit:hover,.sr-hit:focus-visible{background:var(--tint);box-shadow:inset 3px 0 0 var(--g355d);outline:none} .sr-t{display:block;font-family:var(--font-display);font-weight:700;font-size:15.5px;color:var(--g355d)} .sr-s{display:block;font-size:12.5px;color:var(--muted);margin-top:2px} .sr-none{margin:0;padding:14px 16px;font-size:13.5px;color:var(--muted)} .searchdrawer .wrap,.bigsearch{position:relative;z-index:120} /* ===================================================================== PRINT The "Print this page" button is the paper version of the checklist, so this has to read like a handout, not a screenshot of a website. ===================================================================== */ @media print{ /* Anything collapsed on screen must be open on paper. Written to cover
and aria-expanded patterns so accordions added later print expanded without anyone remembering to update this. */ /* Accordions must be open on paper regardless of screen state. */ details{display:block!important} details[open],details:not([open]){} details>*{display:revert!important} .acc{border:1pt solid #000!important;border-radius:0} .acc details{border-bottom:1pt solid #000!important;break-inside:avoid} .acc summary{background:#fff!important;color:#000!important; padding:8px 0 4px;font-size:12.5pt;break-after:avoid} .acc summary .chev{display:none!important} .acc .acc-body{padding:0 0 10px} .callout{background:#fff!important;border:0;border-left:2pt solid #000!important; padding:6px 0 6px 12px;margin-bottom:14px} .support{background:#fff!important;border:1pt solid #000!important; break-inside:avoid;padding:10px 12px} .support h2{color:#000!important;font-size:12.5pt} .acc-group-title{color:#000!important;font-size:13pt;break-after:avoid} [hidden],[aria-hidden="true"]{display:revert!important} .acc,.accordion,.collapse,.panel{display:block!important;height:auto!important; max-height:none!important;overflow:visible!important;opacity:1!important;visibility:visible!important} [aria-expanded="false"]+*{display:block!important;height:auto!important;max-height:none!important} /* Chrome the reader doesn't need on paper. */ .shell,.searchdrawer,.sresults,.nav,.cta,footer.site,.top, .dl .acts,.chips,.bigsearch,.iconbtn,.guidebtn,.dirband,.go, /* Tidio injects its widget into an iframe with an id we don't control, so target the container broadly. Otherwise it prints as a stray box. */ #tidio-chat,#tidio-chat-iframe,[id^="tidio"]{display:none!important} html,body{background:#fff!important;color:#000!important;font-size:11.5pt} *{box-shadow:none!important;text-shadow:none!important} .wrap{max-width:none;padding:0} .layout{display:block} /* Masthead so a loose page is identifiable. */ body::before{content:"Dollar Tree \00a0·\00a0 Benefits Hub";display:block; font-family:var(--font-display);font-weight:700;font-size:10pt;color:#000; border-bottom:2px solid #000;padding-bottom:6px;margin-bottom:16px; letter-spacing:.04em;text-transform:uppercase} /* Hero becomes a plain title — the photo wastes a third of page one. */ .page-hero{padding:0;background:none!important} .page-hero .media{display:none!important} .page-hero-in{padding:0;max-width:none} .page-hero h1{font-size:22pt;color:#000;margin:0 0 14px} /* Specific enough to beat the on-screen .prose rules. Black rather than brand green: these get printed on shared mono office printers, where 355C renders as mid grey and loses contrast against the body text. */ .prose h2,h2{font-size:14pt;color:#000!important;margin:18px 0 6px; page-break-after:avoid;break-after:avoid} .prose h3,h3{font-size:12pt;color:#000!important;page-break-after:avoid;break-after:avoid} .prose p,.prose li,.prose,p,li,.sub{color:#000!important} p,li{orphans:3;widows:3} /* Checklist module: solid green fills eat toner and hurt legibility. */ .dl{border:1.5pt solid #000!important;background:#fff!important; page-break-inside:avoid;break-inside:avoid;margin:0 0 16px} .dl-top{background:#fff!important;color:#000!important;border-bottom:1pt solid #000;padding:8px 10px} .dl-top b{color:#000!important;font-size:13pt} .dl-top .meta{color:#000!important} .dl-body{background:#fff!important;color:#000!important;padding:10px} .dl-body ul li{margin-bottom:9pt} /* Real check boxes — this is a checklist people tick off. */ .dl-body ul{list-style:none;padding-left:0} .dl-body ul li::before{content:"";display:inline-block;width:11pt;height:11pt; border:1pt solid #000;margin-right:8pt;vertical-align:-1pt} .jump{page-break-before:auto;border-top:1pt solid #000;padding-top:12px;margin-top:20px} .jump:first-of-type{border-top:0;margin-top:0;padding-top:0} .contact{page-break-inside:avoid;break-inside:avoid;border-top:1.5pt solid #000; margin-top:20px;padding-top:12px} .contact-grid{display:block} .ccard{display:block;border:0!important;background:#fff!important;padding:0;margin:0 0 8px} .ccard .ic{display:none} .ccard a{color:#000!important;text-decoration:none;font-size:11.5pt} .ccard .lbl{font-weight:700} /* Spell out links — a printed page can't be clicked. */ .prose a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all} .prose a[href^="tel:"]::after,.prose a[href^="mailto:"]::after{content:""} a{color:#000!important;text-decoration:underline} /* Scaffolding flags are for us, not for the printed page. */ .flag{display:none!important} @page{margin:14mm} } /* ===================================================================== COPY COMPONENTS Added for the real client copy, which marks up [callout], [accordion] and [drop down] blocks plus "Additional support" panels. ===================================================================== */ /* --- Callout -------------------------------------------------------- */ .callout{margin:0 0 26px;padding:18px 22px;border-radius:12px; background:#fff;border:1px solid var(--rule);border-left:4px solid var(--g355); box-shadow:0 2px 10px rgba(35,31,32,.05)} .callout p{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink)} .callout p + p{margin-top:10px} /* --- Accordion ------------------------------------------------------ Built on
/ so it works with no JavaScript, is keyboard operable and screen-reader announced for free, and is found by in-page browser search. The print stylesheet forces these open. */ .acc{margin:0 0 30px;border:1px solid var(--rule);border-radius:12px;overflow:hidden} .acc details{border-bottom:1px solid var(--rule)} .acc details:last-child{border-bottom:0} .acc summary{list-style:none;cursor:pointer;padding:16px 20px; display:flex;align-items:flex-start;gap:12px; font-family:var(--font-display);font-weight:700;font-size:16.5px; line-height:1.35;color:var(--ink);background:#fff; transition:background .15s ease} .acc summary::-webkit-details-marker{display:none} .acc summary:hover{background:var(--tint)} .acc summary:focus-visible{outline:3px solid var(--g355);outline-offset:-3px} .acc summary .chev{flex:0 0 auto;width:18px;height:18px;margin-left:auto; stroke:var(--g355);fill:none;stroke-width:2.4;transition:transform .18s ease} .acc details[open] > summary{background:var(--tint);color:var(--g355d)} .acc details[open] > summary .chev{transform:rotate(180deg)} .acc .acc-body{padding:4px 20px 20px} .acc .acc-body > *:first-child{margin-top:0} .acc .acc-body > *:last-child{margin-bottom:0} .acc .acc-body p{font-size:16px;line-height:1.62} .acc .acc-body ul{margin:12px 0;padding-left:22px} .acc .acc-body li{margin-bottom:9px;line-height:1.6} @media(prefers-reduced-motion:reduce){.acc summary,.acc summary .chev{transition:none}} /* Sub-heading inside a page that groups accordions (e.g. "Your Next Steps if Your Spouse Loses Other Coverage") */ .acc-group-title{margin:30px 0 12px;font-family:var(--font-display); font-weight:700;font-size:21px;line-height:1.3;color:var(--g355d)} .acc-group-title:first-child{margin-top:0} /* --- Additional support panel --------------------------------------- */ .support{margin:34px 0 0;padding:22px 24px;border-radius:12px; background:var(--tint2);border:1px solid var(--rule)} .support h2{margin:0 0 10px;font-size:19px;color:var(--g355d); border:0;padding:0} .support p{margin:0 0 10px;font-size:15.5px;line-height:1.6} .support ul{margin:10px 0 0;padding-left:22px} .support li{margin-bottom:10px;font-size:15.5px;line-height:1.6} .support li:last-child{margin-bottom:0} .support a{color:var(--g355d)} /* --- Contact directory grid (Contacts page) -------------------------- */ .dirgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 8px} .ccard.dir{display:block;padding:18px 20px;border:1px solid var(--rule); border-radius:12px;background:#fff} .ccard.dir .lbl{display:block;font-family:var(--font-display);font-weight:700; font-size:16px;line-height:1.3;color:var(--ink);margin-bottom:4px; text-transform:none;letter-spacing:-.01em} .ccard.dir .who{display:block;font-size:13.5px;color:var(--muted);margin-bottom:8px} .ccard.dir .cline{display:block;font-size:14px;line-height:1.5;margin-bottom:4px} .ccard.dir a{font-size:14px;color:var(--g355d);word-break:break-word} @media(max-width:900px){.dirgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.dirgrid{grid-template-columns:1fr}} @media print{ .dirgrid{display:block} .ccard.dir{border:0!important;padding:0;margin:0 0 10px;break-inside:avoid} .ccard.dir a{color:#000!important} /* .cdesc is a span, so the blanket p/li black rule misses it. */ .ccard.dir .cdesc{color:#000!important} } .lede-in{font-size:17.5px;line-height:1.6;margin:0 0 26px} /* ===================================================================== INTERIOR PAGE HERO — stripe band Photos removed from interior pages. They were cropped so short they read as texture rather than photography, cost 50–90KB each on a phone-first audience, and put a stock image between someone and the answer they came for. The homepage grid stays image-led; once you've chosen your situation the page gets out of the way. The band uses the diagonal stripe motif derived from the tree icon — the approved graphic device — so interior pages still read as part of the same site. ===================================================================== */ .page-hero{position:relative;overflow:hidden;background:var(--tint); border-bottom:1px solid var(--rule)} /* Stripe panel, right-hand side, fading out before it reaches the text. */ .page-hero::before{content:"";position:absolute;top:0;right:0;bottom:0; width:min(42%,520px);background:var(--stripe);opacity:.13; -webkit-mask-image:linear-gradient(90deg,transparent,#000 38%); mask-image:linear-gradient(90deg,transparent,#000 38%); pointer-events:none} /* Solid rule along the bottom edge, brand green, as a grounding line. */ .page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0; height:3px;background:var(--g355);pointer-events:none} .page-hero-in{padding:40px 0 36px} @media(max-width:760px){ .page-hero::before{width:58%;opacity:.11} .page-hero-in{padding:30px 0 26px} } /* Any .media left in the markup is ignored rather than half-rendered. */ .page-hero .media{display:none!important} @media print{ .page-hero{background:#fff!important} .page-hero::before,.page-hero::after{display:none!important} } /* ===================================================================== MOBILE HEADER Before: 225px of chrome on a 390px phone — nav wrapping to three rows, a 246px guide button, and the Dollar Tree logo crushed to 20x5px because it was a shrinkable flex item next to that button. This audience is mostly on personal phones, so the header has to earn its space. Logo is protected from shrinking, the nav collapses behind a hamburger, and the guide button moves into the panel. ===================================================================== */ /* The logo is content, not a flex filler. Never let it shrink. */ .brand img.logo{flex:0 0 auto;min-width:0} .menubtn{display:none} .navguide{display:none} @media(max-width:900px){ .menubtn{display:inline-flex} .menubtn svg{stroke-width:2.2} /* 44px is the comfortable minimum tap target; the shared .iconbtn size lands at 42, which is fine with a mouse and tight with a thumb. */ .iconbtn{width:44px;height:44px} /* Header guide button is redundant once it's in the panel. */ .head-act .guidebtn{display:none} .head-in{gap:12px;padding:12px 0} .brand{gap:12px;min-width:0;flex:1 1 auto} .brand img.logo{width:clamp(132px,42vw,180px)} /* Nav becomes a panel. Hidden by default, opened by the hamburger. */ .nav{display:none;border-top:1px solid var(--rule);background:#fff} .nav.open{display:block} .nav-in{display:block} .navitem{border-bottom:1px solid var(--rule)} .navitem:last-of-type{border-bottom:0} .navitem>button{width:100%;display:flex;align-items:center; justify-content:space-between;padding:15px 0;font-size:16px; border-bottom:0;text-align:left} .navitem:first-child>button{padding-left:0} .navitem .caret{margin-left:auto} /* Sub-menu opens inline rather than floating over the page. */ .menu{position:static;display:none;opacity:1;visibility:visible; transform:none;box-shadow:none;border:0;border-radius:0; min-width:0;padding:0 0 10px;background:transparent} .navitem.open .menu{display:block} .menu a{padding:11px 0 11px 14px;border-left:2px solid var(--rule)} .menu a:hover,.menu a:focus-visible{border-left-color:var(--g355d); box-shadow:none;background:var(--tint)} /* Guide button, full width at the foot of the panel. */ .navguide{display:flex;align-items:center;justify-content:center;gap:8px; margin:14px 0 18px;padding:13px 18px;border:2px solid var(--g355); border-radius:999px;font-family:var(--font-display);font-weight:700; font-size:15px;color:var(--g355);text-decoration:none} .navguide svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2} .navguide:active{background:var(--tint)} } @media print{.menubtn,.navguide{display:none!important}} /* A resource row with no document yet. Looks present but clearly inert — better than a live-looking link that goes nowhere. */ .row.is-soon{pointer-events:none;opacity:.62} .row.is-soon .meta{font-style:italic} /* Print action. Lives in the hero so it's on every interior page — the original lived inside the checklist module, which the final copy doesn't use, so it disappeared when the pages were rebuilt. */ /* Per-section checklist link on Leaves of Absence. That page is the one page with TWO checklists (Extended Leave and Military Leave), so each sits under its own H2 rather than as a single hero button that would not say which one it downloads. Reuses a.pdf for the icon and colour. */ .sect-dl{margin:-4px 0 18px} /* Hero button row. Checklist PDF is the primary (filled) action and print is secondary (outlined): the homepage promises "a checklist you can take with you", so the interior page leads with that. Flex-wrap rather than a media query breakpoint, so a long pair drops to two lines on its own. Contacts has no checklist and keeps a bare .printbtn, which is why the margin-top lives on .printbtn and gets zeroed out inside this row. */ .hero-actions{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center} .hero-actions .printbtn{margin-top:0} /* line-height is pinned on BOTH buttons on purpose. .dlbtn is an and inherits the page line-height, .printbtn is a