/* ============================================ Timeline Scan: /family-archive/ (page-scoped) Loaded after styles.css. Every selector is fam- prefixed so nothing here can be clobbered by (or clobber) the generic phone blocks in styles.css, which re-declare .hero / .section / .page-header near lines 5060 and 5190. Two page states live in one document: .fam-live the marketing page, ships with `hidden` (fails closed) .fam-closed the "not yet available" notice, visible while the flag is off An inline script in the page head stamps data-family-archive-state onto before paint, so the right state renders first rather than swapping under the reader once js/main.js runs. Structure: .fam-hub the hero graphic: the library, and the family around it .fam-head a section's kicker + heading + lead .fam-grid what the plan is, one screen of feature tiles .fam-feature one tile: glyph, name, one plain line .fam-coming what is being built next, one card each .fam-plans the three prices .fam-included the 90 days a dating run keeps the library on .fam-band the one-line Family Library offer under the home cards .fam-close the closed-state notice ============================================ */ /* ---------- Page state ---------- styles.css hides [data-family-archive][hidden] with !important, so the "on" rule has to out-specify it: html + attribute + class + attribute beats two attributes, and this file loads second either way. */ html[data-family-archive-state="on"] .fam-live[hidden] { display: block !important; } html[data-family-archive-state="on"] .fam-close { display: none !important; } /* ---------- Hero ---------- */ .fam-hero { padding: 3.25rem 0 3rem; } .fam-hero h1 { font-size: clamp(1.8rem, 0.95rem + 3.5vw, 2.9rem); line-height: 1.2; margin-bottom: 0.9rem; } .fam-hero__subtitle { font-family: var(--font-body); font-size: clamp(1rem, 0.95rem + 0.3vw, 1.12rem); line-height: 1.75; color: var(--text-secondary); max-width: 40rem; margin: 0 auto 1.9rem; } /* ---------- The hub ---------- The hero graphic (plan section 46.5). One library in the middle, four of the family around it, each doing one thing the product actually does. A hairline runs from every person to the card, which is the only element here carrying a solid background and a real shadow: the library is the subject, the people are the evidence. Markup rules this depends on: the whole graphic is one role="img", so no word inside it has to stand on its own for a screen reader, and every word that is here is a value or a name. There is no script: the picture, including the two prints a search has found, is complete in the HTML. */ .fam-hub { --hub-gap: clamp(0.9rem, 2.4vw, 2.1rem); --hub-line: rgba(141, 102, 8, 0.38); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px) minmax(0, 1fr); grid-template-rows: 1fr 1fr; align-items: center; column-gap: var(--hub-gap); row-gap: 1.4rem; max-width: 940px; margin: 0 auto 2.2rem; text-align: left; } /* ---------- The library ---------- */ .fam-hub__card { grid-column: 2; grid-row: 1 / span 2; padding: 0.85rem 0.95rem 1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .fam-hub__cardhead { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.7rem; padding-bottom: 0.55rem; border-bottom: 1px solid var(--border-light); font-family: var(--font-ui); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.01em; color: var(--text-secondary); } .fam-hub__cardhead svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--accent); } .fam-hub__rows { display: grid; gap: 0.55rem; } .fam-hub__row { display: flex; align-items: center; gap: 0.6rem; } /* The year is the one piece of display type inside the graphic: it is the thing the library is built on, so it is set like a date, not a label. */ .fam-hub__year { flex: 0 0 auto; width: 2.9rem; font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; } .fam-hub__prints { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .fam-hub__print { position: relative; display: block; aspect-ratio: 1; border-radius: 3px; overflow: hidden; background: var(--photo-bg); box-shadow: var(--shadow-sm); } .fam-hub__print img { display: block; width: 100%; height: 100%; object-fit: cover; } /* The two prints the search found. Marked in the still picture as well, so the story survives prefers-reduced-motion and a browser with no support for the animation below. */ .fam-hub__print--match { outline: 2px solid var(--accent); outline-offset: 1px; } /* ---------- One of the family ---------- */ .fam-hub__person { position: relative; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; } .fam-hub__person--name { grid-column: 1; grid-row: 1; align-items: flex-end; } .fam-hub__person--year { grid-column: 1; grid-row: 2; align-items: flex-end; } .fam-hub__person--search { grid-column: 3; grid-row: 1; align-items: flex-start; } .fam-hub__person--phone { grid-column: 3; grid-row: 2; align-items: flex-start; } /* The spoke. It is what makes this a hub rather than three columns: every person is attached to the same card. Faded at the card end so it never collides with the card's own border. */ .fam-hub__person::after { content: ''; position: absolute; top: 50%; width: var(--hub-gap); height: 1px; } .fam-hub__person--name::after, .fam-hub__person--year::after { right: calc(-1 * var(--hub-gap)); background: linear-gradient(to right, var(--hub-line), rgba(141, 102, 8, 0)); } .fam-hub__person--search::after, .fam-hub__person--phone::after { left: calc(-1 * var(--hub-gap)); background: linear-gradient(to left, var(--hub-line), rgba(141, 102, 8, 0)); } .fam-hub__who { display: flex; align-items: center; gap: 0.5rem; margin: 0; min-width: 0; } .fam-hub__person--name .fam-hub__who, .fam-hub__person--year .fam-hub__who { flex-direction: row-reverse; } .fam-hub__avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.05rem; height: 2.05rem; border-radius: 50%; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; line-height: 1; } .fam-hub__avatar--ochre { background: #F6EDD6; color: #7A5807; box-shadow: inset 0 0 0 1px #E6D6AE; } .fam-hub__avatar--sage { background: #E7F0E8; color: #456A4C; box-shadow: inset 0 0 0 1px #CDDFD0; } .fam-hub__avatar--clay { background: #F9E8E5; color: #9E3B30; box-shadow: inset 0 0 0 1px #EBCFCA; } .fam-hub__avatar--cocoa { background: #EFE8E0; color: #59493C; box-shadow: inset 0 0 0 1px #DCD0C3; } .fam-hub__name { font-family: var(--font-ui); font-size: 0.84rem; font-weight: 600; line-height: 1.25; color: var(--text-primary); white-space: nowrap; } /* One component, four contents: whatever a person is doing, it arrives in the same pill, so the eye compares the doing and not the packaging. */ .fam-hub__chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.9rem; max-width: 100%; padding: 0.3rem 0.6rem; background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: 999px; box-shadow: var(--shadow-sm); font-family: var(--font-ui); font-size: 0.8rem; color: var(--text-secondary); } .fam-hub__glyph { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-muted); } /* A name going onto a face. The print is zoomed on the face being named so that at 40px the reader sees a face in a box rather than a crowd: the scale and the box's numbers are two halves of one measurement, so move them together or not at all. */ .fam-hub__facepic { position: relative; display: block; flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 4px; overflow: hidden; background: var(--photo-bg); } .fam-hub__facepic img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(2); transform-origin: 40% 30%; } .fam-hub__facebox { position: absolute; left: 22%; top: 8%; width: 38%; height: 52%; border: 1.5px solid var(--accent); border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 253, 248, 0.55); } .fam-hub__tag { padding: 0.12rem 0.5rem 0.18rem; border-radius: 999px; background: var(--accent); color: #FFFDF8; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.01em; } /* A search, and the query in the reader's own words */ .fam-hub__chip--search { border-color: var(--accent); } .fam-hub__chip--search .fam-hub__glyph { color: var(--accent); } .fam-hub__query { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; color: var(--text-primary); } /* A year corrected */ .fam-hub__was { position: relative; color: var(--text-muted); font-variant-numeric: tabular-nums; } .fam-hub__was::after { content: ''; position: absolute; left: -2px; right: -2px; top: 52%; height: 1px; background: var(--text-muted); } .fam-hub__now { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; } /* The same library, away from home. This one is a thing rather than something done, so it drops the pill and is the phone itself. */ .fam-hub__chip--phone { min-height: 0; padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; } .fam-hub__phone { position: relative; display: block; width: 2.6rem; padding: 0.55rem 0.26rem 0.3rem; background: var(--card-bg); border: 2px solid rgba(107, 91, 77, 0.42); border-radius: 0.55rem; box-shadow: var(--shadow-sm); } .fam-hub__phone::before { content: ''; position: absolute; top: 0.22rem; left: 50%; transform: translateX(-50%); width: 0.8rem; height: 2.5px; border-radius: 2px; background: rgba(107, 91, 77, 0.32); } .fam-hub__minis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5px; } .fam-hub__mini { display: block; aspect-ratio: 1; border-radius: 1.5px; overflow: hidden; background: var(--photo-bg); } .fam-hub__mini img { display: block; width: 100%; height: 100%; object-fit: cover; } /* One loop, one idea: the search asks, and a moment later the two prints it found lift off the page. Nothing else on the graphic moves. */ @media (prefers-reduced-motion: no-preference) { .fam-hub__chip--search { animation: fam-hub-ask 9s ease-in-out infinite; } .fam-hub__print--match { animation: fam-hub-found 9s ease-in-out infinite; } .fam-hub__print--match:nth-child(2) { animation-delay: 0.14s; } @keyframes fam-hub-ask { 0%, 8% { box-shadow: var(--shadow-sm); } 18%, 44% { box-shadow: 0 0 0 4px var(--accent-glow); } 58%, 100% { box-shadow: var(--shadow-sm); } } @keyframes fam-hub-found { 0%, 20% { transform: none; box-shadow: var(--shadow-sm); } 32%, 50% { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(141, 102, 8, 0.26); } 64%, 100% { transform: none; box-shadow: var(--shadow-sm); } } } /* ---------- The hub on a narrow screen ---------- One column: the library first, because it is what the page is selling, then the four of them under it, one line each. The spokes go, because at this width the card sitting above everyone is the connection. A person's chip wraps under their name if the name ever outgrows the room. */ @media (max-width: 760px) { .fam-hub { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 0.75rem; max-width: 27rem; } .fam-hub__card { grid-column: 1; grid-row: auto; margin-bottom: 0.35rem; } .fam-hub__person { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.8rem; } .fam-hub__person::after { content: none; } .fam-hub__person--name .fam-hub__who, .fam-hub__person--year .fam-hub__who { flex-direction: row; } .fam-hub__who { gap: 0.45rem; } .fam-hub__avatar { width: 1.8rem; height: 1.8rem; font-size: 0.86rem; } .fam-hub__name { font-size: 0.8rem; } .fam-hub__chip { min-height: 2.5rem; padding: 0.25rem 0.55rem; gap: 0.4rem; font-size: 0.76rem; } .fam-hub__facepic { width: 2.2rem; height: 2.2rem; } .fam-hub__tag { font-size: 0.7rem; padding: 0.1rem 0.42rem 0.16rem; } .fam-hub__query { font-size: 0.78rem; } .fam-hub__phone { width: 2.4rem; } .fam-hub__year { width: 2.6rem; font-size: 0.95rem; } } .fam-hero__trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.4rem; font-family: var(--font-ui); font-size: 0.82rem; color: var(--text-muted); } .fam-hero__trust li { display: flex; align-items: center; gap: 0.4rem; } .fam-hero__trust li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* ---------- Section heads ---------- */ .fam-head { max-width: 44rem; margin: 0 auto 2.4rem; text-align: center; } .fam-head__kicker { font-family: var(--font-ui); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; } .fam-head h2 { font-size: clamp(1.5rem, 1rem + 2.1vw, 2.15rem); line-height: 1.25; margin-bottom: 0.7rem; } .fam-head p { color: var(--text-secondary); font-size: 1.02rem; line-height: 1.75; margin: 0; } /* ---------- What the plan is: one screen of tiles ---------- */ /* Column counts are explicit rather than auto-fit: auto-fit sized the shipped band at four columns for six tiles, which left two dead cells staring at the reader. Six tiles want three columns. */ .fam-grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; max-width: 1080px; } @media (max-width: 960px) { .fam-grid { grid-template-columns: repeat(2, 1fr); } } .fam-feature { background: var(--card-bg); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.35rem 1.3rem 1.4rem; box-shadow: var(--shadow-sm); } .fam-feature__glyph { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: 0.85rem; border-radius: var(--radius-sm); background: var(--accent-glow); color: var(--accent); } .fam-feature__glyph svg { width: 1.35rem; height: 1.35rem; } .fam-feature__name { display: block; font-family: var(--font-display); font-size: 1.17rem; font-weight: 600; line-height: 1.3; color: var(--text-primary); margin-bottom: 0.35rem; } .fam-feature__line { margin: 0; font-size: 0.94rem; line-height: 1.65; color: var(--text-secondary); } /* The seventh tile (plan section 47.2) runs the whole width instead of sitting alone in a third row, and lays its glyph beside the words rather than above them so a full-width card is not mostly empty. Phones drop back to the stacked tile, where every card is full width anyway. */ .fam-feature--wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; align-items: center; } .fam-feature--wide .fam-feature__glyph { grid-row: 1 / span 2; margin-bottom: 0; } /* ---------- Coming soon (plan section 48.4) ---------- Five cards on the same grid as the band above, so the section reads as part of the page rather than a bolt-on. Three wide would leave a hole in the last row, so the grid is counted in sixths: the first three take two columns each, the last two take three each and share the row. */ .fam-coming { grid-template-columns: repeat(6, 1fr); } .fam-coming__item { grid-column: span 2; background: var(--card-bg); border: 1px solid var(--border-light); border-radius: var(--radius-md); padding: 1.35rem 1.3rem 1.4rem; box-shadow: var(--shadow-sm); } .fam-coming__item:nth-child(4), .fam-coming__item:nth-child(5) { grid-column: span 3; } /* The same pill the closed-state notice uses, so "Soon" reads as a label rather than a word in the sentence. */ .fam-coming__badge { display: inline-block; margin-bottom: 0.8rem; padding: 0.22rem 0.7rem; border-radius: 999px; background: var(--accent-glow); color: var(--accent); font-family: var(--font-ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .fam-coming__name { display: block; font-family: var(--font-display); font-size: 1.17rem; font-weight: 600; line-height: 1.3; color: var(--text-primary); margin-bottom: 0.35rem; } .fam-coming__line { margin: 0; font-size: 0.94rem; line-height: 1.65; color: var(--text-secondary); } /* Tablets: two across, and the fifth card takes the last row on its own. */ @media (max-width: 960px) { .fam-coming { grid-template-columns: repeat(4, 1fr); } .fam-coming__item, .fam-coming__item:nth-child(4) { grid-column: span 2; } .fam-coming__item:nth-child(5) { grid-column: span 4; } } /* ---------- Plans ---------- */ .fam-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 940px; margin: 0 auto; align-items: stretch; } .fam-plan { position: relative; display: flex; flex-direction: column; text-align: center; padding: 2rem 1.5rem 1.8rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .fam-plan--best { border: 2px solid var(--accent); box-shadow: var(--shadow-warm); } .fam-plan__flag { position: absolute; top: -0.72rem; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 0.2rem 0.85rem; border-radius: 999px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%); color: #FFFDF8; font-family: var(--font-ui); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .fam-plan__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; margin-bottom: 0.7rem; color: var(--text-primary); } .fam-plan__price { display: flex; align-items: baseline; justify-content: center; gap: 0.25rem; margin-bottom: 0.35rem; } .fam-plan__amount { font-family: var(--font-display); font-size: clamp(2rem, 1.4rem + 2vw, 2.6rem); font-weight: 700; line-height: 1; color: var(--accent); } .fam-plan__per { font-family: var(--font-ui); font-size: 0.85rem; color: var(--text-muted); } .fam-plan__line { margin: 0; font-size: 0.92rem; line-height: 1.6; color: var(--text-secondary); } .fam-plan__spacer { flex: 1 1 auto; min-height: 1.2rem; } .fam-plan .btn { width: 100%; } .fam-plans__note { max-width: 44rem; margin: 1.8rem auto 0; text-align: center; font-size: 0.94rem; line-height: 1.7; color: var(--text-muted); } /* ---------- One line under the tiles ---------- What the library writes into every file, and where to read the detail. */ .fam-included { max-width: 44rem; margin: 1.5rem auto 0; text-align: center; font-size: 0.94rem; line-height: 1.7; color: var(--text-muted); } /* ---------- The Family Library line on the homepage ---------- Family Library is not a way of getting photos back, so it left the delivery card grid in #integrations (plan section 43.11 W3) and reads as one quiet strip under it: glyph, one sentence, one link. Ships hidden behind FAMILY_ARCHIVE_ENABLED like every other surface. */ .fam-band { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem 1.1rem; max-width: 860px; margin: 1.6rem auto 0; padding: 1rem 1.4rem; background: var(--card-bg); border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-align: left; } /* Phones: one centered column, the link under the sentence. */ @media (max-width: 620px) { .fam-band { grid-template-columns: 1fr; justify-items: center; text-align: center; } } .fam-band__glyph { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.1rem; height: 2.1rem; border-radius: var(--radius-sm); background: var(--accent-glow); color: var(--accent); } .fam-band__glyph svg { width: 1.2rem; height: 1.2rem; } .fam-band__text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--text-secondary); } .fam-band__text b { color: var(--text-primary); } /* Two links share the third column: the plan page, and the demo (which opens in a new tab, there is no way back from it). */ .fam-band__links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem; } .fam-band__link { display: inline-flex; align-items: center; gap: 0.35rem; flex: 0 0 auto; font-family: var(--font-ui); font-size: 0.88rem; font-weight: 600; color: var(--accent); white-space: nowrap; } .fam-band__link:hover { color: var(--accent-hover); } .fam-band__arrow { transition: transform 0.25s ease; } .fam-band__link:hover .fam-band__arrow { transform: translateX(3px); } /* ---------- The days a pack keeps its photos online, on /pricing ---------- One gated line per pack card. Not fam- prefixed because it belongs to the pack card it sits in; it is a Family Library surface all the same, so it lives here with the rest of the gated styling. */ .pricing-card__hosting { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.1rem 0 0.9rem; font-family: var(--font-ui); font-size: 0.78rem; line-height: 1.45; color: var(--text-muted); } .pricing-card__hosting::before { content: ''; flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); } /* ---------- "Store your photos with us" on /pricing ---------- The same plan cards, compact, sitting under the one-time photo packs. Its own band so a reader can tell at a glance that it is not a fourth pack. */ .pricing-keep { max-width: 1100px; margin: 3.2rem auto 0; padding-top: 2.6rem; border-top: 1px solid var(--border-light); } .pricing-keep__head { max-width: 44rem; margin: 0 auto 2rem; text-align: center; } .pricing-keep__head h2 { font-size: clamp(1.4rem, 1rem + 1.7vw, 1.9rem); margin-bottom: 0.7rem; } .pricing-keep__head p { color: var(--text-secondary); font-size: 0.98rem; line-height: 1.75; margin: 0; } .fam-plans--compact .fam-plan { padding: 1.6rem 1.2rem 1.4rem; } .pricing-keep__more { margin-top: 1.6rem; text-align: center; font-family: var(--font-ui); font-size: 0.95rem; } /* ---------- Closed-state notice ---------- */ .fam-close { max-width: 40rem; margin: 0 auto; text-align: center; } .fam-close__badge { display: inline-block; margin-bottom: 1rem; padding: 0.25rem 0.9rem; border-radius: 999px; background: var(--accent-glow); color: var(--accent); font-family: var(--font-ui); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .fam-close p { color: var(--text-secondary); line-height: 1.8; } .fam-close p + p { margin-top: 1rem; } /* ---------- Phones ---------- */ @media (max-width: 768px) { .fam-hero { padding: 2.4rem 0 2.2rem; } .fam-hub { margin-bottom: 1.5rem; } .fam-plans { grid-template-columns: 1fr; gap: 1.2rem; max-width: 26rem; } .fam-grid { grid-template-columns: 1fr; gap: 0.9rem; } .fam-feature { padding: 1.15rem 1.1rem 1.2rem; } .fam-feature--wide { display: block; } .fam-feature--wide .fam-feature__glyph { margin-bottom: 0.85rem; } /* One column, so the sixths go away entirely. */ .fam-coming { grid-template-columns: 1fr; } .fam-coming__item, .fam-coming__item:nth-child(4), .fam-coming__item:nth-child(5) { grid-column: auto; padding: 1.15rem 1.1rem 1.2rem; } }