/* ========================================================================== Alder Dental Studio — "Porcelain" theme Upshift dental template · hand-written CSS, no build step, no externals. HOW TO RE-SKIN: every color, radius and shadow lives in the :root token block directly below. Swap the values there and the whole site follows. ========================================================================== */ :root{ /* Ground */ --c-paper: #FAF8F5; /* warm porcelain off-white — page ground */ --c-white: #FFFFFF; /* cards, raised surfaces */ --c-sky: #DCEDF4; /* soft sky tint — alternating sections */ --c-sand: #EEE6DA; /* subtle sand tint — alternating sections */ /* Ink */ --c-ink: #16283B; /* ink navy — headings, primary text */ --c-muted: rgba(22, 40, 59, 0.72); /* secondary text */ --c-navy: #16283B; /* dark band background */ --c-navyDeep: #0F1D2C; /* footer / gradient partner */ /* Accent */ --c-teal: #0E7C6B; /* CTAs, fills, the smile-arc */ --c-tealDeep: #0B6155; /* teal for TEXT — AA on every tint */ --c-tealWash: rgba(14, 124, 107, 0.10); /* icon chips, soft fills */ /* On dark */ --c-light: #F2EEE7; /* text on navy */ --c-lightMuted: rgba(242, 238, 231, 0.75); /* Lines + form */ --c-hairline: #E3DCD1; --c-hairlineOnDark: rgba(242, 238, 231, 0.16); --c-error: #A93D33; --c-success:#2E6B4F; /* Shape + depth */ --r-card: 18px; --r-tile: 12px; --r-btn: 12px; --shadow-card: 0 18px 40px -24px rgba(22, 40, 59, 0.22); --shadow-btn: 0 10px 22px -12px rgba(14, 124, 107, 0.55); /* Type */ --f-display: 'Outfit', 'Avenir Next', 'Segoe UI', system-ui, sans-serif; --f-body: 'Source Sans 3', 'Seravek', 'Segoe UI', system-ui, sans-serif; } /* -------------------------------------------------------------------------- Reset + base -------------------------------------------------------------------------- */ *{margin:0;padding:0;box-sizing:border-box} /* scroll-behavior:smooth on makes Chrome DROP the scroll on a cross-document #fragment navigation — every "Details" link to another page landed the visitor at the top instead of the promised section. Verified: with smooth, scrollY stayed 0; with auto it lands exactly on scroll-margin-top. Keep this auto. A JS shim would fix smooth, but these templates ship with zero dependencies and that is the point. */ html{scroll-behavior:auto} body{background:var(--c-paper);color:var(--c-ink);font-family:var(--f-body); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img,svg{display:block;max-width:100%} a{text-decoration:none;color:inherit;transition:opacity 150ms ease,background-color 150ms ease,border-color 150ms ease,transform 150ms ease} a:hover{opacity:.86} :focus-visible{outline:2.5px solid var(--c-tealDeep);outline-offset:3px;border-radius:4px} .bg-navy :focus-visible,.site-footer :focus-visible{outline-color:var(--c-light)} ul{list-style:none} button{font:inherit;cursor:pointer} [id]{scroll-margin-top:96px} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} a{transition:none} } /* -------------------------------------------------------------------------- Type scale — t-* classes. Display = Outfit, body = Source Sans 3. -------------------------------------------------------------------------- */ .t-display{font-family:var(--f-display);font-weight:600;font-size:58px;line-height:1.04;letter-spacing:-0.022em;color:var(--c-ink)} .t-h2{font-family:var(--f-display);font-weight:600;font-size:40px;line-height:1.1;letter-spacing:-0.015em;color:var(--c-ink)} .t-h3{font-family:var(--f-display);font-weight:600;font-size:26px;line-height:1.18;letter-spacing:-0.01em;color:var(--c-ink)} .t-title{font-family:var(--f-display);font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-0.005em;color:var(--c-ink)} .t-eyebrow{font-family:var(--f-display);font-weight:600;font-size:12.5px;line-height:1.4;letter-spacing:0.15em;text-transform:uppercase;color:var(--c-tealDeep)} .t-lead{font-size:19px;line-height:1.55;color:var(--c-muted)} .t-body{font-size:16.5px;line-height:1.6;color:var(--c-muted)} .t-bodyStrong{font-weight:600;font-size:16.5px;line-height:1.5;color:var(--c-ink)} .t-small{font-size:14px;line-height:1.55;color:var(--c-muted)} .t-fine{font-size:12.5px;line-height:1.55;color:var(--c-muted)} .t-price{font-family:var(--f-display);font-weight:600;font-size:30px;line-height:1.1;letter-spacing:-0.01em;color:var(--c-ink)} .t-num{font-family:var(--f-display);font-weight:600;font-size:14px;letter-spacing:0.08em;color:var(--c-tealDeep)} .t-navLink{font-family:var(--f-display);font-weight:500;font-size:15px;line-height:1.2;color:var(--c-ink)} .t-quote{font-size:17.5px;line-height:1.6;color:var(--c-ink)} /* on-dark variants */ .t-h2Light,.t-titleLight{color:var(--c-light)} .t-h2Light{font-family:var(--f-display);font-weight:600;font-size:40px;line-height:1.1;letter-spacing:-0.015em} .t-titleLight{font-family:var(--f-display);font-weight:600;font-size:20px;line-height:1.25} .t-leadLight{font-size:19px;line-height:1.55;color:var(--c-lightMuted)} .t-bodyLight{font-size:16.5px;line-height:1.6;color:var(--c-lightMuted)} .t-smallLight{font-size:14px;line-height:1.55;color:var(--c-lightMuted)} .t-fineLight{font-size:12.5px;line-height:1.55;color:var(--c-lightMuted)} .t-eyebrowLight{font-family:var(--f-display);font-weight:600;font-size:12.5px;line-height:1.4;letter-spacing:0.15em;text-transform:uppercase;color:var(--c-sky)} @media (max-width:1099px){ .t-display{font-size:46px} .t-h2,.t-h2Light{font-size:33px} } @media (max-width:819px){ .t-display{font-size:36px} .t-h2,.t-h2Light{font-size:28px} .t-h3{font-size:22px} .t-lead,.t-leadLight{font-size:17px} } /* -------------------------------------------------------------------------- Buttons + chips -------------------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:15px 28px;border-radius:var(--r-btn);background:var(--c-teal); font-family:var(--f-display);font-weight:600;font-size:15.5px;color:#fff; box-shadow:var(--shadow-btn);border:none;width:fit-content} .btn:hover{background:var(--c-tealDeep);opacity:1} .btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13.5px 26px;border-radius:var(--r-btn);border:1.5px solid var(--c-teal); font-family:var(--f-display);font-weight:600;font-size:15.5px;color:var(--c-tealDeep);width:fit-content} .btn-ghost:hover{background:var(--c-tealWash);opacity:1} .btn-light{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:15px 28px;border-radius:var(--r-btn);background:var(--c-paper); font-family:var(--f-display);font-weight:600;font-size:15.5px;color:var(--c-ink);width:fit-content} .btn-lightGhost{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13.5px 26px;border-radius:var(--r-btn);border:1.5px solid var(--c-hairlineOnDark); font-family:var(--f-display);font-weight:600;font-size:15.5px;color:var(--c-light);width:fit-content} .btn-sm{padding:11px 20px;font-size:14.5px} .btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .textlink{font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--c-tealDeep)} .card-foot .textlink{white-space:nowrap} .chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px; background:var(--c-white);border:1px solid var(--c-hairline);border-radius:999px; font-size:14px;color:var(--c-ink)} .chip-row{display:flex;flex-wrap:wrap;gap:10px} /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header{position:sticky;top:0;z-index:100;background:var(--c-paper);border-bottom:1px solid var(--c-hairline)} .header-bar{display:flex;align-items:center;justify-content:space-between;gap:24px; max-width:1188px;margin:0 auto;padding:14px 24px} .wordmark{display:flex;flex-direction:column;gap:2px;width:fit-content} .wordmark-name{font-family:var(--f-display);font-weight:600;font-size:21px;letter-spacing:-0.01em;color:var(--c-ink);line-height:1.1} .wordmark-sub{font-family:var(--f-display);font-weight:600;font-size:10.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--c-tealDeep)} .wordmark .arc{margin:1px 0} .site-nav{display:flex;gap:26px;align-items:center} .header-actions{display:flex;gap:18px;align-items:center} .quicknav{display:none;gap:20px;align-items:center;overflow-x:auto;padding:0 24px 10px; -webkit-overflow-scrolling:touch} .quicknav a{font-family:var(--f-display);font-weight:500;font-size:14px;color:var(--c-tealDeep);white-space:nowrap} @media (max-width:819px){ .site-nav,.header-phone{display:none} .quicknav{display:flex} } /* -------------------------------------------------------------------------- Sticky mobile call/book bar -------------------------------------------------------------------------- */ .mobilebar{display:none} @media (max-width:819px){ .mobilebar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed; bottom:0;left:0;right:0;z-index:110;padding:10px 14px calc(10px + env(safe-area-inset-bottom)); background:rgba(250,248,245,0.96);border-top:1px solid var(--c-hairline);backdrop-filter:blur(8px)} .mobilebar .btn,.mobilebar .btn-ghost{width:100%;padding:13px 10px} body{padding-bottom:74px} } /* -------------------------------------------------------------------------- Sections + layout -------------------------------------------------------------------------- */ .section{display:flex;flex-direction:column;align-items:center;padding:104px 24px;background:var(--c-paper)} .section.tight{padding:72px 24px} .bg-white{background:var(--c-white)} .bg-sky{background:var(--c-sky)} .bg-sand{background:var(--c-sand)} .bg-navy{background:linear-gradient(165deg, var(--c-navy), var(--c-navyDeep))} .inner{width:100%;max-width:1120px;display:flex;flex-direction:column;gap:48px} .inner.narrow{max-width:780px} .section-head{display:flex;flex-direction:column;gap:14px;align-items:flex-start;max-width:680px} .section-head .arc{margin-top:2px} /* minmax(0,1fr), not 1fr: a bare 1fr track floors at min-content, so one long unbreakable word in a card pushes the whole row past the container. */ .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px} .grid-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px} .split{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center} .split.rev{grid-template-columns:6fr 5fr} @media (max-width:1099px){ .grid-4{grid-template-columns:repeat(2,1fr)} .split,.split.rev{gap:40px} } @media (max-width:819px){ .section{padding:72px 24px} .grid-2,.grid-3,.grid-4{grid-template-columns:1fr} .split,.split.rev{grid-template-columns:1fr;gap:36px} .split .visual-first{order:-1} } /* Trust strip */ .trust{display:grid;grid-template-columns:repeat(4,1fr);width:100%;max-width:1120px} .trust > div{display:flex;flex-direction:column;gap:5px;padding:22px 28px;border-left:1px solid var(--c-hairline)} .trust > div:first-child{border-left:none} @media (max-width:819px){ .trust{grid-template-columns:1fr} .trust > div{border-left:none;border-top:1px solid var(--c-hairline);padding:16px 0} .trust > div:first-child{border-top:none} } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card{display:flex;flex-direction:column;gap:14px;padding:28px;background:var(--c-white); border:1px solid var(--c-hairline);border-radius:var(--r-card);box-shadow:var(--shadow-card)} .card .rule{height:1px;background:var(--c-hairline);width:100%} .card-foot{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 12px;margin-top:auto} .price-wrap{display:flex;gap:5px 8px;align-items:baseline;flex-wrap:wrap;min-width:0} .price-wrap .t-price{white-space:nowrap} /* A card in the 4-up services row is only ~204px wide — "From $3,900" + "all-in" + "Details →" cannot share that line, and the link used to spill outside the card border. Stack the footer while the grid is 4-up so all four cards match; restore the side-by-side row at 2-up, where the cards are wide enough. HOW TO EDIT: raise the breakpoint if you lengthen the price or qualifier text. */ .grid-4 .card-foot{flex-direction:column;align-items:flex-start;gap:10px} @media (max-width:1099px){ .grid-4 .card-foot{flex-direction:row;align-items:flex-end;gap:10px 12px} } .icon-chip{display:flex;align-items:center;justify-content:center;width:46px;height:46px; border-radius:14px;background:var(--c-tealWash);flex-shrink:0} .feature-list{display:flex;flex-direction:column;gap:9px;padding:2px 0} .feature-list li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:var(--c-ink)} .feature-list li svg{flex-shrink:0;margin-top:3px} .feature-list.on-dark li{color:var(--c-lightMuted)} /* -------------------------------------------------------------------------- Photography One frame that works anywhere: drop .photo on a
and pick a crop. Every carries real width/height attributes so the browser reserves the space and nothing jumps around while the photo loads. HOW TO EDIT: swap the file in assets/img/ for your own. Keep roughly the same shape as the one you replace, or change the aspect-ratio below. -------------------------------------------------------------------------- */ .photo{margin:0;border-radius:var(--r-card);overflow:hidden; border:1px solid var(--c-hairline);box-shadow:var(--shadow-card);background:var(--c-sand)} .photo img{display:block;width:100%;height:auto} .photo.wide img{aspect-ratio:16/10;object-fit:cover} .photo.portrait img{aspect-ratio:4/5;object-fit:cover} .photo.band img{aspect-ratio:16/6;object-fit:cover} @media (max-width:819px){.photo.band img{aspect-ratio:16/9}} /* Steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px} .steps.four{grid-template-columns:repeat(4,1fr)} .step{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1px solid var(--c-hairline)} .bg-navy .step{border-top-color:var(--c-hairlineOnDark)} @media (max-width:819px){ .steps,.steps.four{grid-template-columns:1fr;gap:26px} } /* FAQ — native details/summary, no JS */ .faq{display:flex;flex-direction:column;width:100%} .faq details{border-top:1px solid var(--c-hairline)} .faq details:last-child{border-bottom:1px solid var(--c-hairline)} .faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px 4px;cursor:pointer;list-style:none;font-family:var(--f-display); font-weight:600;font-size:18px;color:var(--c-ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--f-display);font-weight:500;font-size:24px; color:var(--c-tealDeep);line-height:1;flex-shrink:0;transition:transform 150ms ease} .faq details[open] summary::after{transform:rotate(45deg)} .faq .faq-a{padding:0 4px 22px;max-width:640px} @media (prefers-reduced-motion: reduce){.faq summary::after{transition:none}} /* Reviews */ .review-card{display:flex;flex-direction:column;gap:12px;padding:26px 28px;background:var(--c-white); border:1px solid var(--c-hairline);border-radius:var(--r-card);box-shadow:var(--shadow-card)} .stars{color:var(--c-tealDeep);font-size:14px;letter-spacing:2px} .review-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap} /* -------------------------------------------------------------------------- Smile gallery Ships as .ba-shot — ONE studio photograph of the craft behind each treatment. That is deliberate: a before/after tile is a clinical results claim, and dental boards and the FTC expect those to be actual patients of yours. HOW TO SWAP IN REAL BEFORE/AFTERS: once you have patient photos with signed written consent, replace the .ba-shot div with the pair below — the tile styles are still here and ready. Keep the disclaimer under the gallery.
Before...
After...
-------------------------------------------------------------------------- */ .ba-card{display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--c-white); border:1px solid var(--c-hairline);border-radius:var(--r-card);box-shadow:var(--shadow-card)} .ba-shot{border-radius:var(--r-tile);overflow:hidden;background:var(--c-sand)} .ba-shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover} .ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px} .ba-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .ba-tile{position:relative;aspect-ratio:1;border-radius:var(--r-tile);overflow:hidden; display:flex;align-items:center;justify-content:center} .ba-tile.before{background: radial-gradient(120% 90% at 50% 0%, rgba(22,40,59,0.10), rgba(22,40,59,0) 55%), linear-gradient(165deg, #E7DFD2, #D9CEBC)} .ba-tile.after{background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.9), rgba(255,255,255,0) 60%), linear-gradient(165deg, #FDFCFA, #E9F3F0)} .ba-tile .tag{position:absolute;top:10px;left:10px;padding:4px 11px;border-radius:999px; background:rgba(22,40,59,0.78);color:var(--c-light);font-size:12px;line-height:1.4} .ba-tile svg{width:56%;height:auto} .ba-caption{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px 4px} @media (max-width:819px){.ba-tile svg{width:60%}} /* -------------------------------------------------------------------------- Hero — "the appointment book" The first thing a new patient wants is a TIME, so the hero is the book: a centred masthead, the week's real openings on a raised booking rail, and a panoramic operatory band the rail sits on. No floating stat cards — the trust strip directly below already carries the rating and the financing. HOW TO EDIT: the three entries are the openings. Swap the day/time/kind text, or wire each href to your scheduler's deep link. -------------------------------------------------------------------------- */ .hero-section{display:flex;flex-direction:column;align-items:center; padding:40px 24px 96px;background:linear-gradient(180deg, var(--c-sky), var(--c-paper) 78%)} .hero-section .inner{gap:26px} .hero-masthead{display:flex;flex-direction:column;align-items:center;gap:14px; text-align:center;max-width:780px;margin-inline:auto} .hero-masthead .t-display{max-width:560px} .hero-masthead .t-lead{max-width:740px} /* Booking rail — the signature move. Sits on the top edge of the band. */ .hero-book{position:relative;z-index:2;width:min(960px,100%);margin:0 auto -34px; display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px; padding:16px 20px;background:var(--c-white);border:1px solid var(--c-hairline); border-radius:var(--r-card);box-shadow:var(--shadow-card)} .hero-book-label{display:flex;flex-direction:column;gap:2px; padding-right:24px;border-right:1px solid var(--c-hairline)} .slot-list{display:flex;gap:10px;list-style:none} .slot{display:flex;flex-direction:column;gap:1px;padding:9px 15px;border-radius:var(--r-tile); background:var(--c-tealWash);border:1px solid transparent; transition:background .18s ease, border-color .18s ease} .slot:hover{background:var(--c-white);border-color:var(--c-teal);opacity:1} .slot-day{font-family:var(--f-display);font-weight:600;font-size:11.5px;line-height:1.3; letter-spacing:0.14em;text-transform:uppercase;color:var(--c-tealDeep)} .slot-time{font-family:var(--f-display);font-weight:600;font-size:17px;line-height:1.2; color:var(--c-ink);font-variant-numeric:tabular-nums} .slot-kind{font-size:12.5px;line-height:1.4;color:var(--c-muted)} .hero-book-act{display:flex;align-items:center;gap:12px} /* Panoramic operatory band */ .hero-band{position:relative;width:100%;aspect-ratio:2.25;border-radius:20px;overflow:hidden; background:linear-gradient(160deg, #F3EEE5 0%, #DCEDF4 52%, #BFDCE4 100%)} .hero-band .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:50% 30%} @media (max-width:1099px){ .hero-book{grid-template-columns:auto 1fr;gap:18px 22px} .hero-book-act{grid-column:1 / -1;padding-top:14px;border-top:1px solid var(--c-hairline)} } @media (max-width:819px){ .hero-section{padding:44px 24px 72px} .hero-book{grid-template-columns:minmax(0,1fr);gap:16px;margin-bottom:-28px;padding:16px} .hero-book-label{padding:0 0 12px;border-right:none;border-bottom:1px solid var(--c-hairline)} /* Three openings stay one even row on a phone rather than orphaning the third */ .slot-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .slot{padding:9px 10px} .hero-book-act{padding-top:0;border-top:none} .hero-book-act .btn,.hero-book-act .btn-ghost{flex:1} .hero-band{aspect-ratio:1.5} } /* Offer card */ .offer-card{display:flex;flex-direction:column;gap:10px;padding:24px 26px;background:var(--c-white); border:1.5px solid var(--c-teal);border-radius:var(--r-card);box-shadow:var(--shadow-card)} /* -------------------------------------------------------------------------- Comparison table (aligners page) -------------------------------------------------------------------------- */ .table-wrap{width:100%;overflow-x:auto;border:1px solid var(--c-hairline);border-radius:var(--r-card);background:var(--c-white)} .cmp{width:100%;border-collapse:collapse;min-width:560px} .cmp th,.cmp td{padding:16px 20px;text-align:left;font-size:15px;line-height:1.5; border-top:1px solid var(--c-hairline);vertical-align:top} .cmp thead th{border-top:none;font-family:var(--f-display);font-weight:600;font-size:15px;color:var(--c-ink)} .cmp thead th.us{color:var(--c-tealDeep)} .cmp td:first-child{font-weight:600;color:var(--c-ink);width:26%} .cmp td{color:var(--c-muted)} .cmp td.us{background:rgba(14,124,107,0.05);color:var(--c-ink)} /* Price rows (services page) */ .price-rows{display:flex;flex-direction:column;width:100%} .price-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px; padding:14px 4px;border-top:1px solid var(--c-hairline)} .price-row:last-child{border-bottom:1px solid var(--c-hairline)} /* -------------------------------------------------------------------------- Forms (book page) -------------------------------------------------------------------------- */ .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px} .form-grid .full{grid-column:1 / -1} .field{display:flex;flex-direction:column;gap:7px} .field label{font-family:var(--f-display);font-weight:600;font-size:14px;color:var(--c-ink)} .field input,.field select,.field textarea{padding:13px 14px;border:1px solid var(--c-hairline); border-radius:10px;background:var(--c-white);font:inherit;font-size:15.5px;color:var(--c-ink);width:100%} .field input::placeholder,.field textarea::placeholder{color:rgba(22,40,59,0.52)} .field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{ outline:2.5px solid var(--c-tealDeep);outline-offset:1px;border-color:var(--c-tealDeep)} .checkline{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--c-muted)} .checkline input{width:17px;height:17px;margin-top:2px;accent-color:var(--c-teal);flex-shrink:0} @media (max-width:819px){.form-grid{grid-template-columns:1fr}} /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer{display:flex;flex-direction:column;align-items:center; padding:64px 24px 28px;background:var(--c-navyDeep)} .footer-inner{width:100%;max-width:1120px;display:flex;flex-direction:column;gap:40px} .footer-cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;align-items:start} .footer-col{display:flex;flex-direction:column;gap:10px} .site-footer .wordmark-name{color:var(--c-light)} .site-footer .wordmark-sub{color:var(--c-sky)} .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px; padding-top:18px;border-top:1px solid var(--c-hairlineOnDark)} @media (max-width:819px){ .footer-cols{grid-template-columns:1fr;gap:30px} .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px} } /* -------------------------------------------------------------------------- Page-hero (interior pages) + prose (legal / read-me) -------------------------------------------------------------------------- */ .page-hero{display:flex;flex-direction:column;align-items:center; padding:72px 24px 64px;background:linear-gradient(180deg, var(--c-sand), var(--c-paper))} .page-hero.sky{background:linear-gradient(180deg, var(--c-sky), var(--c-paper))} .prose{display:flex;flex-direction:column;gap:18px;max-width:760px} .prose h2{font-family:var(--f-display);font-weight:600;font-size:24px;letter-spacing:-0.01em;color:var(--c-ink);padding-top:12px} .prose p,.prose li{font-size:16.5px;line-height:1.65;color:var(--c-muted)} .prose ul{list-style:disc;padding-left:22px;display:flex;flex-direction:column;gap:8px} .prose strong{color:var(--c-ink)} .notice{display:flex;flex-direction:column;gap:8px;padding:22px 24px;background:var(--c-sky);border-radius:14px} .readme-step{display:flex;gap:16px;align-items:flex-start;padding:18px 0;border-top:1px solid var(--c-hairline)} .readme-step .t-num{margin-top:2px;white-space:nowrap} .readme-step code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px; background:var(--c-sand);border-radius:6px;padding:2px 7px;color:var(--c-ink);overflow-wrap:anywhere} /* Smile-arc divider */ .divider-arc{display:flex;justify-content:center;padding:0 24px}