@font-face { font-family: Outfit; src: url('assets/Outfit-Regular.woff2') format('woff2'), url('assets/Outfit-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; } @font-face { font-family: Outfit; src: url('assets/Outfit-Medium.woff2') format('woff2'), url('assets/Outfit-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; } @font-face { font-family: Outfit; src: url('assets/Outfit-Bold.woff2') format('woff2'), url('assets/Outfit-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; } @font-face { font-family: Sequel; src: url('assets/Sequel-Wide.woff2') format('woff2'), url('assets/Sequel-Wide.otf') format('opentype'); font-weight: 400; font-display: swap; } /* --blue/--pink are display and fill colours. --blue-ink/--pink-ink are their text-safe counterparts: both clear 4.5:1 on paper, cream, pink-soft and yellow. */ :root { color-scheme:light; --ink:#191518; --paper:#fffdf8; --cream:#fff5e7; --yellow:#ffca2c; --pink:#f4a5cd; --pink-ink:#c52675; --pink-soft:#fbe7f2; --blue:#2867dd; --blue-ink:#1551c1; --mint:#c7efc4; --orange:#ff7c43; --muted:#5f565c; --line:#ded7d0; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:Outfit,Arial,sans-serif; font-size:16px; line-height:1.5; } img { display:block; max-width:100%; } picture { display:contents; } a { color:inherit; text-decoration:none; } button,input { font:inherit; } button { cursor:pointer; } button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid var(--blue-ink); outline-offset:4px; border-radius:4px; } .app :focus-visible,.today-card :focus-visible,.rhythm-intro :focus-visible,.site-footer :focus-visible { outline-color:var(--yellow); } .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; } .skip-link { position:fixed; z-index:100; top:10px; left:10px; padding:10px 14px; color:#fff; background:var(--ink); border-radius:8px; transform:translateY(-150%); } .skip-link:focus { transform:translateY(0); } main:focus { outline:none; } .site-header { position:sticky; z-index:20; top:0; display:flex; align-items:center; justify-content:space-between; min-height:76px; padding:12px clamp(24px,5vw,82px); background:rgba(255,253,248,.92); border-bottom:1px solid transparent; backdrop-filter:blur(15px); transition:border-color .2s ease,box-shadow .2s ease; } .site-header.is-scrolled { border-color:rgba(25,21,24,.1); box-shadow:0 8px 28px rgba(25,21,24,.07); } .brand { display:flex; align-items:center; gap:9px; min-width:190px; } .brand-icon { display:grid; place-items:center; width:34px; height:34px; color:var(--yellow); background:var(--ink); border-radius:11px 11px 11px 4px; font-size:20px; font-weight:700; } .brand-type { font-family:Sequel,Georgia,serif; font-size:17px; line-height:.9; letter-spacing:-.05em; } .brand-note { color:var(--muted); font-size:9px; line-height:1.08; text-transform:uppercase; letter-spacing:.06em; } .main-nav { display:flex; align-items:center; gap:clamp(14px,2.2vw,38px); color:#453d43; font-size:13px; font-weight:500; } .main-nav>a:not(.nav-button) { position:relative; padding:4px 0; } .main-nav>a:not(.nav-button):hover { color:var(--blue-ink); } .main-nav>a[aria-current='true'] { color:var(--blue-ink); font-weight:700; } .main-nav>a[aria-current='true']::after { content:''; position:absolute; right:0; bottom:-2px; left:0; height:2px; background:var(--blue-ink); border-radius:999px; } .nav-button,.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; border:0; border-radius:999px; font-size:13px; font-weight:700; transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease; } .nav-button { padding:12px 17px; color:#fff; background:var(--ink); } .nav-button:hover,.button:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(25,21,24,.15); } .menu-button { display:none; place-items:center; width:42px; height:42px; padding:0; border:1px solid var(--line); border-radius:50%; background:transparent; } .menu-lines { display:grid; gap:5px; } .menu-lines i { display:block; width:18px; height:2px; background:var(--ink); transition:transform .2s ease; } .menu-button[aria-expanded='true'] .menu-lines i:first-child { transform:translateY(3.5px) rotate(45deg); } .menu-button[aria-expanded='true'] .menu-lines i:last-child { transform:translateY(-3.5px) rotate(-45deg); } .hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); min-height:min(760px,calc(100vh - 76px)); background:var(--yellow); } .hero-copy { display:flex; flex-direction:column; justify-content:center; min-width:0; padding:clamp(58px,7vw,104px) clamp(24px,5.2vw,84px); } .eyebrow,.section-label { display:flex; align-items:center; gap:9px; margin:0 0 21px; color:var(--blue-ink); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.16em; } .eyebrow span { width:25px; height:3px; background:currentColor; border-radius:999px; } h1,h2,h3 { margin:0; overflow-wrap:break-word; font-family:Sequel,Georgia,serif; font-weight:400; letter-spacing:-.01em; line-height:1.08; } h1 { max-width:620px; font-size:clamp(40px,5.3vw,76px); line-height:1.08; } h1 em { color:var(--blue); font-style:normal; } .hero-intro { max-width:455px; margin:29px 0 0; color:rgba(25,21,24,.8); font-size:clamp(17px,1.55vw,21px); line-height:1.38; } .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:34px; } .button { min-height:49px; padding:13px 20px; } .button-ink { color:#fff; background:var(--ink); } .button-ink:hover { background:var(--blue-ink); } .button-yellow { color:var(--ink); background:var(--yellow); } .button-paper { color:var(--ink); background:var(--paper); } .plain-button { display:inline-flex; align-items:center; gap:8px; padding:10px 0; color:var(--ink); background:transparent; border:0; font-size:13px; font-weight:700; } .plain-button:hover { color:var(--blue-ink); transform:translateX(3px); } .play-dot { display:grid; place-items:center; width:20px; height:20px; padding-left:1px; color:#fff; background:var(--blue-ink); border-radius:50%; font-size:8px; } .hero-footnote { display:flex; align-items:center; gap:8px; max-width:325px; margin:47px 0 0; color:rgba(25,21,24,.75); font-size:11px; line-height:1.35; } .hero-footnote span { flex:0 0 auto; width:8px; height:8px; background:var(--blue-ink); border-radius:50%; } .hero-media { position:relative; min-width:0; min-height:clamp(560px,calc(100vh - 76px),760px); overflow:hidden; background:#e3ad16; } .hero-media img { width:100%; height:100%; object-fit:cover; object-position:center; } .hero-carousel { position:absolute; inset:0; } .hero-carousel-viewport { position:absolute; inset:0; overflow:hidden; } .hero-slides { position:relative; height:100%; } .hero-slide { position:absolute; inset:0; display:block; margin:0; opacity:0; visibility:hidden; background:#e3ad16; transform:scale(1.025); transition:opacity .55s ease,transform .7s ease,visibility 0s linear .55s; } .hero-slide.is-active { opacity:1; visibility:visible; transform:scale(1); transition-delay:0s; } .hero-slide picture,.hero-slide img { display:block; width:100%; height:100%; min-height:100%; object-fit:cover; object-position:center; } .hero-carousel-ui { position:absolute; z-index:5; left:clamp(22px,4vw,64px); right:auto; bottom:clamp(20px,3vw,44px); display:flex; align-items:center; gap:12px; width:max-content; max-width:calc(100% - 44px); padding:8px 10px; color:#fff; background:rgba(25,21,24,.78); border:1px solid rgba(255,255,255,.24); border-radius:999px; backdrop-filter:blur(10px); } .hero-carousel-count { flex:0 0 auto; color:rgba(255,255,255,.78); font-size:10px; font-weight:700; letter-spacing:.11em; } .hero-carousel-controls { display:flex; align-items:center; gap:6px; } .carousel-button { display:grid; place-items:center; width:32px; height:32px; padding:0; color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); border-radius:50%; font-size:15px; line-height:1; } .carousel-button:hover { color:var(--ink); background:var(--yellow); } .carousel-button:focus-visible,.hero-carousel-dot:focus-visible { outline-color:#fff; outline-offset:3px; } .hero-carousel-dots { display:flex; align-items:center; gap:6px; padding:0 3px; } .hero-carousel-dot { width:7px; height:7px; padding:0; background:rgba(255,255,255,.45); border:0; border-radius:50%; } .hero-carousel-dot[aria-selected="true"] { width:20px; background:var(--yellow); border-radius:999px; } .sun-sticker { position:absolute; right:clamp(22px,4vw,64px); bottom:44px; display:flex; flex-direction:column; align-items:center; min-width:120px; padding:16px 13px; color:#fff; background:var(--blue-ink); border-radius:50%; text-align:center; transform:rotate(7deg); box-shadow:0 13px 23px rgba(25,21,24,.16); } .sun-sticker strong { font-size:25px; line-height:1; } .sun-sticker span,.sun-sticker small { font-size:9px; line-height:1.18; text-transform:uppercase; letter-spacing:.08em; } .hero-side-note { position:absolute; top:31px; right:clamp(21px,4vw,64px); max-width:190px; margin:0; padding:13px 16px; color:#fff; background:var(--ink); border-radius:16px 16px 4px 16px; font-size:13px; line-height:1.25; text-align:right; box-shadow:0 12px 26px rgba(25,21,24,.22); } .hero-side-note b { display:block; margin-top:2px; color:var(--yellow); font-size:16px; } .ticker { overflow:hidden; padding:13px 0; color:#fff; background:var(--ink); white-space:nowrap; } .ticker-track { display:inline-flex; align-items:center; gap:30px; min-width:max-content; animation:ticker 25s linear infinite; font-family:Sequel,Georgia,serif; font-size:17px; letter-spacing:-.01em; } .ticker-track b { color:var(--yellow); font-family:Outfit,sans-serif; } @keyframes ticker { to { transform:translateX(-25%); } } .section { padding:clamp(84px,10vw,154px) clamp(24px,7.4vw,120px); } .story { display:grid; grid-template-columns:.95fr 1.05fr; align-items:center; gap:clamp(44px,9vw,145px); } .story-copy { max-width:545px; } h2 { font-size:clamp(37px,4.65vw,64px); } .story h2 em,.gallery-caption em { color:var(--pink-ink); font-style:normal; } .today h2 em,.app h2 em,.join h2 em { font-style:normal; } .story-copy>p:not(.section-label),.family-copy>p:not(.section-label),.app-copy>p:not(.section-label),.join>p:not(.section-label):not(.form-note):not(.join-error) { max-width:515px; margin:27px 0 0; color:var(--muted); font-size:17px; line-height:1.56; } .arrow-link { display:inline-flex; align-items:center; gap:9px; margin-top:29px; color:var(--blue-ink); font-size:13px; font-weight:700; } .arrow-link:hover { gap:13px; text-decoration:underline; text-underline-offset:4px; } .story-photo { margin:0; padding:12px; background:var(--pink-soft); border-radius:28px; } .story-photo img { width:100%; aspect-ratio:1.77; object-fit:cover; border-radius:20px; } .story-photo figcaption { display:flex; justify-content:space-between; gap:15px; padding:14px 6px 2px; color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.09em; } .story-photo figcaption span:last-child { color:var(--pink-ink); } .rhythm { background:var(--pink-soft); } .centered { display:flex; flex-direction:column; align-items:center; text-align:center; } .centered h2 em { color:var(--blue-ink); font-style:normal; } .centered>p:last-child { max-width:545px; margin:25px 0 0; color:var(--muted); font-size:17px; } .rhythm-layout { display:grid; grid-template-columns:.64fr 1.36fr; gap:clamp(35px,7.5vw,102px); max-width:1050px; margin:64px auto 0; } .rhythm-intro { align-self:start; padding:29px; color:#fff; background:var(--ink); border-radius:25px; box-shadow:0 17px 31px rgba(25,21,24,.11); } .tiny-number { color:var(--yellow); font-size:12px; font-weight:700; letter-spacing:.14em; } .rhythm-intro h3 { max-width:260px; margin-top:51px; font-size:29px; } .rhythm-intro>p { margin:22px 0 0; color:rgba(255,255,255,.72); font-size:14px; line-height:1.55; } .rhythm-total { display:flex; justify-content:space-between; align-items:baseline; gap:20px; margin-top:42px; padding-top:17px; border-top:1px solid rgba(255,255,255,.18); } .rhythm-total span { color:rgba(255,255,255,.66); font-size:10px; text-transform:uppercase; letter-spacing:.1em; } .rhythm-total strong { color:var(--yellow); font-size:18px; } .rhythm-steps { display:flex; flex-direction:column; gap:10px; margin:0; padding:0; list-style:none; } .rhythm-steps li { display:grid; grid-template-columns:46px minmax(min-content,1fr) minmax(0,.9fr) auto; align-items:center; gap:12px; min-height:70px; padding:11px 17px 11px 10px; background:#fff; border:1px solid rgba(25,21,24,.11); border-radius:999px; } .number { display:grid; place-items:center; width:42px; height:42px; color:#fff; background:var(--ink); border-radius:50%; font-size:12px; font-weight:700; } .rhythm-steps li:nth-child(even) .number { color:var(--ink); background:var(--yellow); } .step-title { font-family:Sequel,Georgia,serif; font-size:16px; letter-spacing:-.02em; } .step-detail,.step-time { color:var(--muted); font-size:12px; } .step-time { color:var(--pink-ink); font-weight:700; } .today { display:grid; grid-template-columns:.93fr 1.07fr; align-items:center; gap:clamp(43px,9vw,146px); background:var(--paper); } .today-card { padding:clamp(28px,4vw,49px); background:var(--ink); border-radius:29px; } .today-card .section-label { color:var(--yellow); } .today-card h2 { color:#fff; } .today-card h2 em { color:var(--pink); } .scripture { margin:26px 0 0; padding:0 0 0 18px; border-left:3px solid var(--yellow); } .scripture p { margin:0; font-family:Sequel,Georgia,serif; font-size:17px; line-height:1.36; letter-spacing:-.015em; } .scripture cite { display:block; margin-top:10px; color:var(--blue-ink); font-size:11px; font-style:normal; font-weight:700; text-transform:uppercase; letter-spacing:.09em; } .today-card .scripture p { color:#fff; } .today-card .scripture cite { color:var(--yellow); } .today-copy { margin:24px 0 0; color:rgba(255,255,255,.76); font-size:16px; line-height:1.58; } .today-prompt { display:flex; flex-direction:column; gap:4px; margin:29px 0; padding:17px; background:rgba(255,255,255,.09); border-radius:15px; } .today-prompt span,.dialog-prompt span { color:var(--yellow); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; } .today-prompt strong { color:#fff; font-size:14px; } .today-gallery { position:relative; display:grid; grid-template-columns:1.15fr .85fr; align-items:end; gap:17px; min-height:500px; } .today-gallery figure { margin:0; overflow:hidden; border-radius:24px; } .today-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; } .today-gallery figure:hover img { transform:scale(1.04); } .gallery-large { height:440px; } .gallery-small { height:270px; margin-bottom:25px!important; } .gallery-small.pink { background:var(--pink-soft); } .gallery-burst { position:absolute; top:15px; right:5%; display:grid; place-items:center; width:108px; height:108px; color:#fff; background:var(--blue-ink); border-radius:50%; font-family:Sequel,Georgia,serif; font-size:19px; line-height:1.02; letter-spacing:-.01em; text-align:center; transform:rotate(9deg); } .gallery-section { padding:0 clamp(24px,7.4vw,120px) clamp(84px,10vw,150px); } .gallery-caption { padding:clamp(50px,7vw,91px) 0 clamp(38px,5vw,67px); text-align:center; } .gallery-caption p { margin:0; font-family:Sequel,Georgia,serif; font-size:clamp(28px,4vw,54px); line-height:1.1; letter-spacing:-.01em; } .photo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; } .photo-grid figure { position:relative; min-height:350px; margin:0; overflow:hidden; border-radius:24px; background:var(--cream); } .photo-grid img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; } .photo-grid figure:hover img { transform:scale(1.04); } .photo-grid figcaption { position:absolute; bottom:15px; left:15px; padding:9px 12px; color:var(--ink); background:var(--paper); border-radius:999px; font-size:11px; font-weight:700; } .family { display:grid; grid-template-columns:1.18fr .82fr; align-items:center; gap:clamp(42px,8vw,130px); background:var(--yellow); } .family-images { position:relative; display:grid; place-items:center; min-height:440px; padding:44px 24px 54px; overflow:hidden; background:var(--pink-soft); border-radius:29px; } /* The app screen is real text, not a screenshot: it stays sharp at any zoom, can be selected and translated, and is read out in full by a screen reader. */ .phone-wrap { display:flex; flex-direction:column; align-items:flex-end; width:min(100%,318px); } .phone { width:100%; padding:9px; background:var(--ink); border-radius:34px; box-shadow:0 22px 44px rgba(25,21,24,.24); } .phone-bar { display:grid; place-items:center; height:19px; } .phone-bar span { width:74px; height:5px; background:rgba(255,255,255,.28); border-radius:999px; } .phone-screen { padding:20px 19px 24px; background:var(--paper); border-radius:26px; } .phone-day { margin:0; color:var(--blue-ink); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.13em; } .phone-eyebrow { margin:16px 0 0; color:var(--muted); font-size:12px; } .phone-topic { margin:5px 0 0; font-family:Sequel,Georgia,serif; font-size:22px; line-height:1.12; letter-spacing:-.01em; } .phone-topic em { color:var(--pink-ink); font-style:normal; } .phone-roles-label { margin:21px 0 0; padding-top:15px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.11em; } .phone-roles { display:flex; flex-direction:column; gap:9px; margin:13px 0 0; padding:0; list-style:none; counter-reset:role; } .phone-roles li { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:500; } .phone-dot { display:grid; place-items:center; width:21px; height:21px; flex:0 0 auto; background:var(--yellow); border-radius:7px 7px 7px 2px; counter-increment:role; font-size:9px; font-weight:700; } .phone-dot::before { content:counter(role,decimal-leading-zero); } .phone-roles li:nth-child(even) .phone-dot { color:#fff; background:var(--blue-ink); } .family-note { position:relative; z-index:1; margin:-18px -12px 0 0; display:flex; flex-direction:column; gap:3px; max-width:172px; padding:12px 15px; color:#fff; background:var(--blue-ink); border-radius:16px 16px 4px 16px; font-size:12px; line-height:1.35; box-shadow:0 12px 26px rgba(25,21,24,.22); } .family-note b { color:var(--yellow); font-size:10px; text-transform:uppercase; letter-spacing:.09em; } .family-copy h2 { max-width:520px; } .family-copy h2 em { color:var(--blue); font-style:normal; } .family-copy>p:not(.section-label) { color:rgba(25,21,24,.78); } .family-copy ul { display:flex; flex-direction:column; gap:12px; margin:28px 0 0; padding:0; list-style:none; font-size:14px; } .family-copy li { display:flex; align-items:center; gap:10px; } .family-copy li span { display:grid; place-items:center; width:20px; height:20px; flex:0 0 auto; color:#fff; background:var(--blue-ink); border-radius:50%; font-size:11px; font-weight:700; } .app { display:grid; grid-template-columns:.84fr 1.16fr; align-items:center; gap:clamp(42px,8vw,130px); color:#fff; background:var(--ink); } .app .section-label { color:var(--yellow); } .app h2 em { color:var(--yellow); } .app-copy>p:not(.section-label) { color:rgba(255,255,255,.75); } .app-check { display:flex; align-items:flex-start; gap:13px; margin-top:27px; } .app-check>span { display:grid; place-items:center; width:38px; height:38px; flex:0 0 auto; color:var(--ink); background:var(--yellow); border-radius:12px 12px 12px 4px; font-size:11px; font-weight:700; } .app-check div { display:flex; flex-direction:column; gap:3px; } .app-check b { font-size:14px; } .app-check small { color:rgba(255,255,255,.68); font-size:12px; } .app-copy .button { margin-top:33px; } .app-image { overflow:hidden; border-radius:29px; background:#282228; } .app-image img { width:100%; aspect-ratio:1.77; object-fit:cover; } .faq { background:var(--cream); } .faq .centered { margin-bottom:clamp(38px,5vw,60px); } .faq-list { display:flex; flex-direction:column; gap:12px; max-width:820px; margin:0 auto; } .faq-list details { background:var(--paper); border:1px solid rgba(25,21,24,.1); border-radius:22px; transition:border-color .2s ease,box-shadow .2s ease; } .faq-list details[open] { border-color:rgba(25,21,24,.16); box-shadow:0 12px 28px rgba(25,21,24,.07); } .faq-list summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px clamp(20px,3vw,30px); font-family:Sequel,Georgia,serif; font-size:clamp(17px,1.7vw,21px); letter-spacing:-.015em; line-height:1.25; list-style:none; cursor:pointer; } .faq-list summary::-webkit-details-marker { display:none; } .faq-list summary::after { content:'+'; display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; color:var(--ink); background:var(--yellow); border-radius:50%; font-family:Outfit,sans-serif; font-size:19px; font-weight:700; transition:transform .25s ease; } .faq-list details[open] summary::after { transform:rotate(45deg); } .faq-list summary:hover { color:var(--blue-ink); } .faq-list details>p { margin:0; padding:0 clamp(20px,3vw,30px) 25px; color:var(--muted); font-size:16px; line-height:1.6; } .join { display:flex; flex-direction:column; align-items:center; text-align:center; background:var(--pink-soft); } .join-icon { display:grid; place-items:center; width:50px; height:50px; margin-bottom:25px; color:var(--yellow); background:var(--ink); border-radius:16px 16px 16px 5px; font-size:24px; } .join h2 em { color:var(--blue-ink); } .join>p:not(.section-label):not(.form-note):not(.join-error) { max-width:510px; } .join-form { display:flex; width:min(100%,540px); gap:10px; margin-top:33px; } .join-form input { flex:1; min-width:0; padding:13px 17px; color:var(--ink); background:#fff; border:1px solid rgba(25,21,24,.28); border-radius:999px; } .join-form input::placeholder { color:#6f666d; } .join-form input[aria-invalid='true'] { border-color:var(--pink-ink); box-shadow:0 0 0 3px rgba(197,38,117,.16); } .join-error { margin:14px 0 0; color:var(--pink-ink); font-size:13px; font-weight:700; } .join-success { margin-top:33px; padding:14px 18px; color:var(--ink); background:var(--yellow); border-radius:999px; font-size:13px; font-weight:700; } .form-note { margin:14px 0 0; color:var(--muted); font-size:11px; } .site-footer { display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:52px; padding:63px clamp(24px,7.4vw,120px) 25px; color:#fff; background:var(--ink); } .footer-brand>p { margin:25px 0 0; color:var(--yellow); font-family:Sequel,Georgia,serif; font-size:19px; line-height:1.15; letter-spacing:-.015em; } .site-footer .brand-icon { background:var(--yellow); color:var(--ink); } .footer-links { display:grid; grid-template-columns:1fr 1fr; gap:28px; } .footer-links div { display:flex; flex-direction:column; align-items:flex-start; gap:9px; } .footer-links strong { margin-bottom:7px; color:var(--pink); font-size:10px; text-transform:uppercase; letter-spacing:.12em; } .footer-links a { color:rgba(255,255,255,.72); font-size:12px; } .footer-links a:hover { color:var(--yellow); text-decoration:underline; text-underline-offset:3px; } .footer-note { display:flex; flex-direction:column; justify-content:space-between; gap:28px; } .footer-note p { max-width:260px; margin:0; color:rgba(255,255,255,.66); font-size:12px; line-height:1.55; } .footer-note span { padding-top:18px; color:rgba(255,255,255,.55); border-top:1px solid rgba(255,255,255,.2); font-size:10px; } .sample-dialog { width:min(100% - 36px,550px); max-height:calc(100vh - 36px); padding:clamp(30px,5vw,48px); color:var(--ink); background:var(--paper); border:0; border-radius:27px; box-shadow:0 27px 75px rgba(25,21,24,.32); } .sample-dialog::backdrop { background:rgba(25,21,24,.65); backdrop-filter:blur(7px); } .sample-dialog h2 { font-size:clamp(34px,5vw,53px); } .sample-dialog>p:not(.section-label) { margin:22px 0 0; color:var(--muted); font-size:16px; line-height:1.58; } .dialog-close { position:absolute; top:17px; right:17px; display:grid; place-items:center; width:34px; height:34px; padding:0; color:var(--ink); background:var(--pink-soft); border:0; border-radius:50%; font-size:24px; line-height:1; } .dialog-close:hover { background:var(--yellow); } .dialog-prompt { display:flex; flex-direction:column; gap:4px; margin-top:20px; padding:15px 16px; background:var(--pink-soft); border-radius:15px; } .dialog-prompt span { color:var(--blue-ink); } .dialog-prompt strong { font-size:14px; } .sample-dialog .button { margin-top:28px; } /* Reveal-on-scroll is opt-in: without JS (or with reduced motion) everything stays visible, so no content depends on the observer running. */ .js .reveal { opacity:0; transform:translateY(25px); transition:opacity .6s ease,transform .6s ease; } .js .reveal-delay { transition-delay:.12s; } .js .reveal.is-visible { opacity:1; transform:translateY(0); } .page-center { min-height:100vh; justify-content:center; } .legal { max-width:760px; margin:0 auto; } .legal h1 { margin-bottom:8px; font-size:clamp(29px,6.4vw,62px); } .legal h2 { margin-top:48px; font-size:clamp(24px,2.6vw,32px); } .legal p,.legal li { color:var(--muted); font-size:16px; line-height:1.68; } .legal p { margin:18px 0 0; } .legal ul { margin:18px 0 0; padding-left:22px; } .legal li { margin-top:9px; } .legal a:not(.button) { color:var(--blue-ink); font-weight:500; text-decoration:underline; text-underline-offset:3px; } .legal .button { margin-top:44px; } .legal .updated { margin-top:14px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.09em; } @media (max-width:920px) { .site-header { min-height:68px; } .brand-note { display:none; } .menu-button { display:grid; } .main-nav:not(.main-nav-plain) { position:absolute; top:calc(100% + 1px); right:18px; left:18px; display:none; flex-direction:column; align-items:stretch; gap:0; padding:12px; background:var(--paper); border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 42px rgba(25,21,24,.13); } .main-nav.is-open { display:flex; } .main-nav>a:not(.nav-button) { padding:12px 10px; } .main-nav>a[aria-current='true']::after { display:none; } .main-nav:not(.main-nav-plain) .nav-button { justify-content:center; margin-top:5px; } .hero { grid-template-columns:1fr; } .hero-copy { min-height:575px; } .hero-media,.hero-media img { min-height:490px; } .story,.today,.family,.app { grid-template-columns:1fr; } .rhythm-layout { grid-template-columns:1fr; margin-top:48px; } .rhythm-intro h3 { margin-top:34px; } .photo-grid { grid-template-columns:repeat(2,1fr); } .site-footer { grid-template-columns:1fr 1fr; } .footer-note { grid-column:span 2; } } @media (max-width:700px) { .section { padding:78px 24px; } h1 { font-size:clamp(34px,9.6vw,56px); } h2 { font-size:clamp(30px,8.4vw,48px); } .hero-copy { min-height:555px; padding:65px 24px 56px; } .hero-media,.hero-media img { min-height:365px; } .hero-media img { object-position:55% center; } .sun-sticker { right:18px; bottom:19px; min-width:98px; padding:12px 10px; } .hero-side-note { top:19px; right:20px; max-width:160px; padding:10px 13px; font-size:11px; } .hero-side-note b { font-size:13px; } .story,.today,.family,.app { gap:44px; } .rhythm-steps li { grid-template-columns:39px minmax(0,1fr) auto; gap:9px; min-height:65px; padding-right:13px; } .rhythm-steps .number { width:37px; height:37px; font-size:11px; } .step-detail { display:none; } .step-title { font-size:14px; } .step-time { font-size:10px; } .today-gallery { min-height:375px; } .gallery-large { height:337px; } .gallery-small { height:200px; margin-bottom:0!important; } .gallery-burst { width:86px; height:86px; font-size:16px; } .photo-grid { grid-template-columns:1fr; } .photo-grid figure,.photo-grid figure:last-child { grid-column:auto; min-height:325px; } .family-images { min-height:auto; padding:34px 18px 40px; } .family-note { margin-right:-4px; max-width:158px; } .app-image img { aspect-ratio:1.26; } .faq-list summary { padding:19px 20px; } .join-form { flex-direction:column; } .join-form input,.join-form .button { width:100%; } .site-footer { grid-template-columns:1fr; gap:42px; padding-top:53px; } .footer-note { grid-column:auto; } .footer-links { grid-template-columns:1fr 1fr; } } @media (max-width:920px) { .hero-carousel-ui { left:22px; right:auto; bottom:22px; } } @media (max-width:700px) { .hero-carousel-ui { left:18px; right:auto; bottom:18px; max-width:calc(100% - 36px); padding:7px 8px; gap:8px; } .hero-carousel-count { font-size:9px; } .carousel-button { width:31px; height:31px; } .hero-carousel-controls { gap:5px; } .hero-carousel-dots { gap:5px; } } /* --------------------------------------------------------------------------- Devotional pages (generated by build.mjs) Colour rule from README: --blue and --pink are display fills. Text on paper, cream or yellow uses --blue-ink / --pink-ink, which clear 4.5:1. Type rule from README: Sequel never goes below -.01em tracking or 1.08 leading. --------------------------------------------------------------------------- */ /* Language switcher — three links, not a select. A