/* Smile & Springs — design system v2 "Thermal Editorial" The world: mineral water at dusk. Near-black spruce depths, warm porcelain enamel, late-light amber. Fraunces (variable, optical) carries the voice. ink #081b16 deep water, page dark deep #0d2c25 shaded pool pool #1d7f6b mineral green pool-hi #2ea78c sunlit water porcelain #faf6ee enamel / paper limestone #efe7d8 travertine amber #e6a53f late light on water */ :root { --ink: #081b16; --deep: #0d2c25; --pool: #1d7f6b; --pool-hi: #2ea78c; --pool-deep: #0e5546; --porcelain: #faf6ee; --porcelain-dim: #f3ecdf; --limestone: #efe7d8; --amber: #e6a53f; --amber-hi: #f2bd63; --body-c: #23372f; --muted: #5f7168; --rule: rgba(8, 27, 22, 0.12); --rule-light: rgba(250, 246, 238, 0.14); --display: "Fraunces", "Iowan Old Style", Georgia, serif; --sans: "Public Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; --max: 1160px; --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --shadow-card: 0 2px 6px rgba(8, 27, 22, 0.05), 0 18px 40px -18px rgba(8, 27, 22, 0.18); --shadow-float: 0 28px 70px -18px rgba(4, 16, 13, 0.5); --ease: cubic-bezier(0.2, 0.7, 0.2, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.7; color: var(--body-c); background: var(--porcelain); -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* film grain — kills the flat digital look */ body::after { content: ""; position: fixed; inset: 0; z-index: 30; /* below the sticky header: texturing the nav made it shimmer on scroll */ pointer-events: none; opacity: 0.16; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E"); } img, svg { max-width: 100%; height: auto; } a { color: var(--pool-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 0.2s var(--ease); } a:hover { color: var(--pool); } ::selection { background: var(--amber); color: var(--ink); } :focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 2px; } .wrap { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; } .wrap--narrow { max-width: 780px; } /* ---------- type ---------- */ h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.06; font-weight: 560; letter-spacing: -0.015em; font-optical-sizing: auto; } h1 { font-size: clamp(2.6rem, 6.4vw, 4.9rem); } h2 { font-size: clamp(1.9rem, 4vw, 3rem); } h3 { font-size: 1.28rem; line-height: 1.25; } h1 em, h2 em { font-style: italic; font-weight: 480; } .eyebrow { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pool); display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.1rem; } .eyebrow::before { content: ""; width: 2rem; height: 1px; background: currentColor; opacity: 0.55; } .lede { font-size: clamp(1.12rem, 1.9vw, 1.32rem); line-height: 1.6; color: var(--muted); max-width: 52ch; } /* ---------- reveal-on-scroll (activated only when JS adds .js to ) ---------- */ html.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } html.js [data-reveal].revealed { opacity: 1; transform: none; } html.js [data-reveal="2"] { transition-delay: 0.12s; } html.js [data-reveal="3"] { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } html.js [data-reveal] { opacity: 1; transform: none; } } /* ---------- announcement + header ---------- */ .prelaunch-note { background: linear-gradient(90deg, var(--amber), var(--amber-hi), var(--amber)); color: var(--ink); text-align: center; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.02em; padding: 0.5rem 1rem; } .prelaunch-note a { color: inherit; } .site-head { position: sticky; top: 0; z-index: 50; /* solid paint, no backdrop-filter: blur on sticky re-samples the page every scroll frame and reads as vibration */ background: rgba(8, 27, 22, 0.97); border-bottom: 1px solid var(--rule-light); padding: 0.85rem 0; transform: translateZ(0); } .site-head .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .brand { font-family: var(--display); font-size: 1.35rem; font-weight: 600; color: #fff; text-decoration: none; letter-spacing: 0.005em; } .brand { display: inline-flex; align-items: center; gap: 0.55rem; } .brand img { display: block; } .brand .amp { color: var(--amber); font-style: italic; font-weight: 480; } .brand:hover { color: #fff; } .site-nav { display: flex; gap: 1.6rem; align-items: center; } .site-nav a { color: #c3d6cf; text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 0.2s var(--ease); } .site-nav a:hover, .site-nav a[aria-current] { color: #fff; } .site-nav a.nav-cta { background: var(--amber); color: var(--ink); font-weight: 700; padding: 0.5rem 1.15rem; border-radius: 999px; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease); } .site-nav a.nav-cta:hover { background: var(--amber-hi); transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(230, 165, 63, 0.55); } /* ---------- hero ---------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(110% 80% at 78% -10%, #17564779 0%, transparent 55%), radial-gradient(90% 70% at 12% 108%, #12463a99 0%, transparent 60%), linear-gradient(175deg, #0e3129 0%, var(--deep) 45%, var(--ink) 100%); color: #e7f1ec; padding: clamp(4rem, 9vh, 7rem) 0 clamp(7rem, 13vh, 10rem); isolation: isolate; } /* drifting light — steam over the pools at dusk */ /* dusk landscape behind the hero content */ .hero-scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .hero-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; } @media (max-width: 900px) { .hero-scene { opacity: 0.55; } } .blob { position: absolute; border-radius: 50%; filter: blur(90px); z-index: -1; will-change: transform; } .blob--teal { width: 560px; height: 560px; background: rgba(46, 167, 140, 0.34); top: -160px; left: -120px; animation: drift 21s ease-in-out infinite alternate; } .blob--amber { width: 460px; height: 460px; background: rgba(230, 165, 63, 0.17); bottom: -80px; right: 6%; animation: drift 17s ease-in-out infinite alternate-reverse; } @keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(70px, 46px, 0) scale(1.18); } } .hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; } @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } } .route { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #93b7ab; margin-bottom: 1.6rem; } .route .leg { border: 1px solid rgba(147, 183, 171, 0.35); border-radius: 999px; padding: 0.28rem 0.8rem; white-space: nowrap; } .route .leg--lit { border-color: rgba(230, 165, 63, 0.6); color: var(--amber-hi); } .route .sep { opacity: 0.6; letter-spacing: 0; } .hero h1 { color: #fdfaf3; font-size: clamp(2.3rem, 4.5vw, 3.55rem); margin-bottom: 1.4rem; } .hero h1 em { color: var(--amber-hi); } .hero .lede { color: #a9c4ba; margin-bottom: 2.2rem; } .trust-row { display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; font-size: 0.88rem; color: #93b7ab; } .trust-row strong { display: block; font-family: var(--display); font-size: 1.55rem; font-weight: 560; color: #fdfaf3; letter-spacing: -0.01em; } .trust-row strong .up { color: var(--amber-hi); font-style: italic; } /* glass signup card */ .signup { position: relative; background: rgba(250, 246, 238, 0.94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.55); border-radius: var(--r-lg); padding: 1.9rem; color: var(--body-c); box-shadow: var(--shadow-float); } .signup h3 { margin-bottom: 0.4rem; font-size: 1.45rem; } .signup > p { font-size: 0.93rem; color: var(--muted); margin-bottom: 1.2rem; line-height: 1.55; } .signup label { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.35rem; color: var(--ink); } .signup input[type="email"], .signup select { width: 100%; padding: 0.8rem 0.95rem; font-size: 1rem; font-family: var(--sans); border: 1.5px solid var(--rule); border-radius: var(--r-sm); background: #fff; color: var(--body-c); margin-bottom: 1rem; transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease); } .signup input[type="email"]:focus, .signup select:focus { border-color: var(--pool); outline: none; box-shadow: 0 0 0 4px rgba(29, 127, 107, 0.18); } .consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.8rem; line-height: 1.5; color: var(--muted); margin-bottom: 1.1rem; } .consent input { margin-top: 0.25rem; accent-color: var(--pool-deep); } .btn { display: inline-block; width: 100%; text-align: center; cursor: pointer; background: linear-gradient(135deg, var(--pool-deep), var(--pool)); color: #fff; font-weight: 700; font-size: 1.05rem; border: none; border-radius: var(--r-sm); padding: 0.95rem 1.5rem; font-family: var(--sans); letter-spacing: 0.01em; box-shadow: 0 10px 26px -10px rgba(14, 85, 70, 0.65); transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease); } .btn:hover { transform: translateY(-2px); filter: brightness(1.08); box-shadow: 0 16px 32px -10px rgba(14, 85, 70, 0.7); } .btn:active { transform: translateY(0); } .signup .privacy-line { font-size: 0.76rem; color: var(--muted); margin: 0.8rem 0 0; } /* living waterline at the hero's foot: three depth bands of the same water, drifting at different speeds and directions */ .waves { position: absolute; bottom: -2px; left: 0; right: 0; height: clamp(90px, 11vw, 150px); z-index: 1; pointer-events: none; overflow: hidden; } .waves svg { position: absolute; bottom: 0; left: 0; width: 201%; max-width: none; height: 100%; } .waves .w1 { animation: wave 34s linear infinite; } .waves .w2 { animation: wave 23s linear infinite reverse; } .waves .w3 { animation: wave 15s linear infinite; } @keyframes wave { from { transform: translateX(0); } to { transform: translateX(-49.75%); } } /* legacy single waterline (thanks page) */ .waterline { display: block; width: 100%; height: 56px; } /* ---------- sections ---------- */ .section { padding: clamp(4.5rem, 9vw, 7.5rem) 0; position: relative; } .section--limestone { background: linear-gradient(180deg, var(--limestone), var(--porcelain-dim)); } .section--mist { background: var(--porcelain-dim); } .section--dark { background: linear-gradient(180deg, var(--ink), var(--deep)); color: #cfe0d9; } .section--dark h2, .section--dark h3 { color: #fdfaf3; } .section-head { max-width: 680px; margin-bottom: clamp(2rem, 5vw, 3.5rem); } .section-head p { color: var(--muted); margin-top: 0.9rem; max-width: 56ch; } /* ---------- journey (signature) ---------- */ .journey { background: var(--porcelain); padding: clamp(4.5rem, 9vw, 7rem) 0; } .rail { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: clamp(2rem, 5vw, 3.5rem); position: relative; } .rail::before { content: ""; position: absolute; top: 31px; left: 9%; right: 9%; border-top: 2px dashed rgba(29, 127, 107, 0.45); } .rail li { position: relative; text-align: center; padding: 0 0.85rem; } .leg-num { position: absolute; top: -1.1rem; left: 50%; transform: translateX(-50%); font-family: var(--display); font-style: italic; font-size: 4.6rem; font-weight: 480; line-height: 1; color: rgba(29, 127, 107, 0.14); z-index: 0; pointer-events: none; } .rail .stop-dot { width: 62px; height: 62px; margin: 0 auto 1rem; border-radius: 50%; background: #fff; border: 2px solid var(--pool); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: 0 8px 22px -10px rgba(14, 85, 70, 0.4); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); } .rail li:hover .stop-dot { transform: translateY(-4px) scale(1.05); box-shadow: 0 16px 30px -10px rgba(14, 85, 70, 0.5); } .rail .stop-dot svg { width: 28px; height: 28px; stroke: var(--pool-deep); } .rail h3 { font-size: 1.05rem; margin-bottom: 0.35rem; position: relative; z-index: 1; } .rail p { font-size: 0.88rem; color: var(--muted); line-height: 1.55; position: relative; z-index: 1; } @media (max-width: 820px) { .rail { grid-template-columns: 1fr; gap: 1.9rem; } .rail::before { top: 31px; bottom: 31px; left: 30px; right: auto; border-top: none; border-left: 2px dashed rgba(29, 127, 107, 0.45); } .rail li { display: grid; grid-template-columns: 62px 1fr; gap: 1.1rem; text-align: left; align-items: start; } .rail .stop-dot { margin: 0; } .leg-num { left: auto; right: 0; top: -0.6rem; transform: none; font-size: 3.4rem; } .rail .stop-copy { padding-top: 0.3rem; } } /* ---------- savings ---------- */ .savings-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 900px) { .savings-grid { grid-template-columns: 1fr; } } .big-stat { font-family: var(--display); font-weight: 560; font-style: italic; font-size: clamp(5.5rem, 13vw, 9.5rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--pool-deep); text-shadow: 0 1px 0 #fff; } .big-stat .pct { font-size: 0.45em; color: var(--amber); } .stat-note { margin-top: 1rem; color: var(--muted); font-size: 0.95rem; max-width: 34ch; } .seg { display: inline-flex; margin: 1.6rem 0 0; border: 1.5px solid var(--rule); border-radius: 999px; background: #fff; padding: 3px; gap: 2px; } .seg button { font-family: var(--sans); font-size: 0.84rem; font-weight: 700; border: none; background: transparent; color: var(--muted); padding: 0.45rem 1.1rem; border-radius: 999px; cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .seg button[aria-pressed="true"] { background: var(--ink); color: var(--porcelain); } [data-currency="uk"] .ca-only { display: none; } [data-currency="ca"] .uk-only { display: none; } .table-scroll { overflow-x: auto; border-radius: var(--r-md); box-shadow: var(--shadow-card); } .price-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 0.98rem; } .price-table th, .price-table td { padding: 1rem 1.2rem; text-align: left; border-bottom: 1px solid var(--rule); } .price-table tbody tr:last-child td { border-bottom: none; } .price-table thead th { font-family: var(--sans); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: var(--porcelain); border-bottom: 1.5px solid var(--rule); } .price-table td { font-variant-numeric: tabular-nums; } .price-table td:first-child { font-weight: 500; color: var(--ink); } .price-table .hu { font-family: var(--display); font-size: 1.06em; font-weight: 560; color: var(--pool-deep); } .price-table td.save { color: var(--amber); font-weight: 700; white-space: nowrap; } .price-table tbody tr { transition: background 0.15s var(--ease); } .price-table tbody tr:hover { background: rgba(29, 127, 107, 0.05); } .footnote { font-size: 0.8rem; color: var(--muted); margin-top: 0.9rem; } /* ---------- cards ---------- */ .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 1.4rem; } .card { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 1.8rem; box-shadow: var(--shadow-card); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); } .card:hover { transform: translateY(-5px); border-color: rgba(29, 127, 107, 0.4); box-shadow: 0 6px 12px rgba(8, 27, 22, 0.06), 0 28px 50px -20px rgba(8, 27, 22, 0.25); } .card h3 { margin-bottom: 0.55rem; } .card p { font-size: 0.95rem; color: var(--muted); } .card .card-glyph { width: 40px; height: 40px; stroke: var(--pool); margin-bottom: 1rem; } /* ---------- FAQ ---------- */ .faq details { border-bottom: 1px solid var(--rule); } .faq summary { font-family: var(--display); font-size: clamp(1.1rem, 2vw, 1.3rem); font-weight: 560; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.35rem 0; transition: color 0.2s var(--ease); } .faq summary:hover { color: var(--pool-deep); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--display); font-weight: 400; color: var(--amber); font-size: 1.7rem; line-height: 1; flex: none; transition: transform 0.3s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding: 0 0 1.4rem; color: var(--muted); max-width: 64ch; } /* ---------- blog cards ---------- */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.4rem; } .post-card { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-md); padding: 1.7rem; display: flex; flex-direction: column; gap: 0.65rem; box-shadow: var(--shadow-card); transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease); } .post-card:hover { transform: translateY(-5px); border-color: rgba(29, 127, 107, 0.4); box-shadow: 0 6px 12px rgba(8, 27, 22, 0.06), 0 28px 50px -20px rgba(8, 27, 22, 0.25); } .post-card .eyebrow { margin-bottom: 0.1rem; } .post-card h3 a { text-decoration: none; color: var(--ink); } .post-card h3 a:hover { color: var(--pool-deep); } .post-card p { font-size: 0.92rem; color: var(--muted); flex: 1; } .post-card .readmore { font-size: 0.88rem; font-weight: 700; text-decoration: none; } .post-card .readmore:hover { text-decoration: underline; } /* ---------- article pages ---------- */ .article-head { background: radial-gradient(80% 120% at 90% -20%, rgba(46, 167, 140, 0.12) 0%, transparent 60%), linear-gradient(180deg, var(--porcelain-dim), var(--porcelain)); padding: clamp(3.5rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); } .article-head .crumbs { font-size: 0.84rem; margin-bottom: 1.4rem; color: var(--muted); } .article-head h1 { max-width: 24ch; font-size: clamp(2.1rem, 4.6vw, 3.4rem); } .article-head .meta { margin-top: 1.2rem; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; color: var(--muted); } .article-body { padding: clamp(2.5rem, 5vw, 4rem) 0 1rem; } .article-body h2 { margin: 2.8rem 0 1rem; font-size: clamp(1.55rem, 3vw, 2.1rem); } .article-body h3 { margin: 2rem 0 0.7rem; } .article-body p, .article-body ul, .article-body ol { margin-bottom: 1.15rem; max-width: 68ch; } .article-body ul, .article-body ol { padding-left: 1.4rem; } .article-body li { margin-bottom: 0.45rem; } .article-body blockquote { border-left: 3px solid var(--amber); padding: 0.5rem 0 0.5rem 1.4rem; font-family: var(--display); font-style: italic; font-weight: 480; font-size: 1.35rem; line-height: 1.4; color: var(--ink); margin: 2rem 0; max-width: 56ch; } .article-body .price-table { margin: 1.5rem 0 0.4rem; } /* ---------- CTA band ---------- */ .cta-band { position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(70% 120% at 85% 0%, rgba(46, 167, 140, 0.25) 0%, transparent 55%), radial-gradient(50% 90% at 10% 110%, rgba(230, 165, 63, 0.16) 0%, transparent 60%), linear-gradient(160deg, var(--deep), var(--ink)); border-radius: var(--r-lg); color: #e7f1ec; padding: clamp(1.8rem, 4vw, 2.8rem); margin: 3rem 0; box-shadow: var(--shadow-float); } .cta-band h2, .cta-band h3 { color: #fdfaf3; margin: 0 0 0.5rem; } .cta-band p { color: #a9c4ba; margin-bottom: 1.4rem; max-width: 58ch; } .cta-band form { display: flex; gap: 0.7rem; flex-wrap: wrap; max-width: 580px; } .cta-band input[type="email"] { flex: 1 1 240px; padding: 0.85rem 1rem; border-radius: var(--r-sm); border: 1px solid rgba(250, 246, 238, 0.25); background: rgba(250, 246, 238, 0.1); color: #fdfaf3; font-size: 1rem; font-family: var(--sans); transition: border-color 0.2s var(--ease), background 0.2s var(--ease); } .cta-band input[type="email"]::placeholder { color: #8aa89d; } .cta-band input[type="email"]:focus { outline: none; border-color: var(--amber); background: rgba(250, 246, 238, 0.16); } .cta-band .btn { width: auto; flex: 0 0 auto; background: linear-gradient(135deg, var(--amber), var(--amber-hi)); color: var(--ink); box-shadow: 0 10px 26px -10px rgba(230, 165, 63, 0.6); } .cta-band .consent { color: #8aa89d; } .cta-band .consent input { accent-color: var(--amber); } .cta-band a { color: #c3d6cf; } /* ---------- footer ---------- */ .site-foot { background: linear-gradient(180deg, var(--ink), #05130f); color: #8aa89d; padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; font-size: 0.9rem; position: relative; overflow: hidden; } .site-foot::before { content: "Smile & Springs"; position: absolute; left: 50%; bottom: -0.32em; transform: translateX(-50%); font-family: var(--display); font-style: italic; font-weight: 480; font-size: clamp(4rem, 13vw, 11rem); line-height: 1; white-space: nowrap; color: rgba(250, 246, 238, 0.04); pointer-events: none; } .site-foot .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; position: relative; } .site-foot h3 { color: #fdfaf3; font-size: 1.05rem; margin-bottom: 0.8rem; } .site-foot a { color: #c3d6cf; } .site-foot a:hover { color: #fff; } .site-foot ul { list-style: none; } .site-foot li { margin-bottom: 0.5rem; } .site-foot .legal { grid-column: 1 / -1; border-top: 1px solid var(--rule-light); padding-top: 1.5rem; font-size: 0.78rem; color: #6d877c; } @media (max-width: 640px) { .cta-band { padding: 1.5rem; } .site-nav { gap: 1rem; } .site-nav a:not(.nav-cta):not([href="/blog/"]) { display: none; } }