:root { --ink:#2d3553; --cream:#fffaf1; --pink:#ff579f; --blush:#ffc6d8; --aqua:#12bac7; --lime:#a5d616; --lavender:#d9c7ef; --gold:#e5ad34; --line:#2d355333; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font:400 17px/1.55 "DM Sans",sans-serif; } .hero { overflow:hidden; background:linear-gradient(145deg,#fff7ec 5%,#ffe4d7 100%); } .nav, .hero-grid, .story, .contact, footer { max-width:1160px; margin:auto; padding-left:32px; padding-right:32px; } .nav { height:92px; display:flex; align-items:center; justify-content:space-between; } .brand { color:var(--ink); text-decoration:none; font:700 20px/1 "Fraunces",serif; letter-spacing:.04em; } .brand span { display:block; margin-top:3px; color:var(--pink); font-size:.62em; letter-spacing:.22em; } .nav-link,.text-link { color:var(--ink); font-weight:700; text-decoration:none; } .nav-link span,.text-link span { color:var(--pink); font-size:1.3em; vertical-align:-.04em; } .hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center; min-height:570px; padding-top:42px; padding-bottom:68px; } .eyebrow { margin:0 0 12px; color:#d21f71; font-weight:700; font-size:.75rem; letter-spacing:.16em; text-transform:uppercase; } h1,h2 { font-family:"Fraunces",serif; line-height:.99; letter-spacing:-.04em; } h1 { max-width:620px; margin:0; font-size:clamp(3.4rem,6.7vw,5.9rem); } h1 em { color:var(--pink); font-style:normal; } .intro { max-width:500px; font-size:1.1rem; margin:26px 0 34px; } .button { display:inline-flex; align-items:center; gap:18px; padding:15px 22px; background:var(--pink); color:white; border:2px solid var(--ink); border-radius:999px; box-shadow:4px 4px 0 var(--ink); font-weight:700; text-decoration:none; transition:transform .15s,box-shadow .15s; } .button:hover { transform:translate(3px,3px); box-shadow:1px 1px 0 var(--ink); } .button span { font-size:1.3em; } .hero-photo-wrap { position:relative; justify-self:center; width:min(100%,440px); } .hero-photo { position:relative; z-index:1; display:block; width:100%; aspect-ratio:1/1.04; object-fit:cover; object-position:center; border:3px solid var(--ink); border-radius:48% 52% 48% 52% / 41% 45% 55% 59%; box-shadow:9px 9px 0 var(--aqua); transform:rotate(3deg); } .sunburst { position:absolute; z-index:0; width:110%; height:110%; top:-5%; left:-5%; border-radius:50%; background:repeating-conic-gradient(from 10deg,#ffd756 0deg 10deg,transparent 10deg 20deg); opacity:.75; } .photo-note { position:absolute; z-index:2; right:-15px; bottom:4px; margin:0; padding:7px 12px; transform:rotate(-7deg); background:var(--lime); border:2px solid var(--ink); border-radius:6px; font:700 1.05rem "Fraunces",serif; } .photo-note span { color:var(--pink); } .ribbon { display:flex; justify-content:center; flex-wrap:wrap; gap:9px 30px; padding:14px 24px; color:var(--ink); background:var(--lime); border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); font-weight:700; font-size:.88rem; text-transform:uppercase; letter-spacing:.05em; } .story { display:grid; grid-template-columns:.93fr 1.07fr; gap:clamp(42px,9vw,112px); align-items:center; padding-top:112px; padding-bottom:112px; } .story-image { position:relative; } .story-image:before { content:""; position:absolute; z-index:-1; width:90%; height:89%; top:-18px; left:-19px; background:var(--lavender); border:2px solid var(--ink); transform:rotate(-5deg); } .story-image img { display:block; width:100%; border:3px solid var(--ink); border-radius:10px; } h2 { margin:0 0 25px; font-size:clamp(2.7rem,5vw,4.4rem); } .steps { margin:30px 0; padding:0; list-style:none; } .steps li { display:flex; gap:18px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line); } .steps li:last-child { border-bottom:1px solid var(--line); } .steps b { color:var(--pink); font-size:.85rem; } .promise { padding:85px 30px; background:var(--aqua); color:#fff; text-align:center; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); } .promise p { max-width:850px; margin:0 auto; font:600 clamp(2rem,4vw,3.6rem)/1.12 "Fraunces",serif; letter-spacing:-.03em; } .promise-stars { margin-top:23px; color:#fff063; font-size:1.6rem; letter-spacing:.8em; } .contact { display:flex; gap:32px; align-items:center; justify-content:space-between; padding-top:100px; padding-bottom:100px; } .contact h2 { margin-bottom:14px; } .contact p:not(.eyebrow) { max-width:550px; margin:0; } .button-dark { flex:none; background:var(--ink); box-shadow:4px 4px 0 var(--gold); } footer { display:flex; justify-content:space-between; align-items:center; gap:25px; padding-top:28px; padding-bottom:28px; border-top:2px solid var(--ink); } footer p { margin:0; font-size:.85rem; } @media (max-width:760px) { .nav,.hero-grid,.story,.contact,footer { padding-left:22px; padding-right:22px; } .nav { height:78px; } .nav-link { font-size:.9rem; } .hero-grid,.story { grid-template-columns:1fr; gap:42px; } .hero-grid { min-height:0; padding-top:36px; } .hero-photo-wrap { width:min(86%,390px); } .story { padding-top:72px; padding-bottom:72px; } .story-image { order:2; } .contact,footer { align-items:flex-start; flex-direction:column; padding-top:64px; padding-bottom:64px; } footer { padding-top:27px; padding-bottom:27px; } .button-dark { align-self:flex-start; } }