/* KIORY shared stylesheet — blog / journal section. Homepage keeps its own inline styles. */ :root{ --paper:#F4EFE6; --paper2:#EBE4D6; --ink:#23201C; --muted:#6E655A; --seal:#8C3A2E; --gold:#9A7B3F; --hairline:#D9CFBE; } *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{background:var(--paper);color:var(--ink); font-family:"Noto Serif TC","Songti TC",serif;line-height:1.85; overflow-x:hidden;font-size:17px} .wrap{max-width:1040px;margin:0 auto;padding:0 28px} .narrow{max-width:680px;margin:0 auto;padding:0 28px} .en-t{display:none} body.lang-en .zh-t{display:none} body.lang-en .en-t{display:revert} body.lang-en{font-family:Lora,Georgia,serif} body.lang-en h1,body.lang-en h2{font-family:Lora,Georgia,serif} header.site{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px; padding:26px clamp(22px,5vw,56px)} header.site .mark{font-family:Lora,Georgia,serif;font-size:12px;letter-spacing:.42em; color:var(--ink);text-decoration:none;flex-shrink:0} header.site nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap} header.site nav a{font-family:Lora,Georgia,serif;font-size:11px;letter-spacing:.2em; color:var(--muted);text-decoration:none;text-transform:uppercase;white-space:nowrap} header.site nav a:hover,header.site nav a.active{color:var(--seal)} .lang-btn{font-family:Lora,Georgia,serif;font-size:11px;letter-spacing:.25em;color:var(--muted); background:none;border:1px solid var(--hairline);padding:8px 13px;cursor:pointer;flex-shrink:0} .lang-btn:hover{background:var(--paper2)} /* article */ article{padding:20px 0 90px} .kicker{font-family:Lora,Georgia,serif;font-size:11px;letter-spacing:6px;color:var(--seal); text-transform:uppercase;display:block;margin-bottom:18px} article h1{font-size:clamp(28px,4vw,40px);font-weight:600;line-height:1.4;margin-bottom:10px} .subtitle{font-family:Lora,Georgia,serif;font-style:italic;color:var(--muted);font-size:16px; margin-bottom:44px} article p{margin-bottom:22px;font-size:17px} body.lang-en article p{font-family:Lora,Georgia,serif;font-size:16.5px;line-height:1.85} article h2{font-size:clamp(19px,2.2vw,22px);font-weight:600;line-height:1.5; margin:46px 0 18px} /* The date sits under the kicker, museum-label restraint, never shouting. */ .post-date{font-family:Lora,Georgia,serif;font-size:12px;letter-spacing:.14em; color:var(--muted);margin:0 0 26px} body.lang-en article p.post-date{font-size:12px;line-height:1.6} blockquote{margin:44px 0;text-align:center;break-inside:avoid} blockquote .q{font-size:clamp(20px,2.8vw,26px);color:var(--seal);font-weight:500;line-height:1.6} blockquote .hl{width:44px;height:1px;background:var(--hairline);margin:0 auto 20px} blockquote .tr{font-family:Lora,Georgia,serif;font-style:italic;color:var(--muted); font-size:14px;margin-top:14px} /* Comparison tables inside a post. Plain , hairline rules, no zebra, no fill: the register is a printed reference table, not a dashboard. It is also the one block written for machines as much as readers. A structured comparison IS an answer, which is why it is the shape an answer engine lifts most readily, so the markup is kept bare (thead, th scope, td) with nothing an extractor has to see through. The .tw wrapper scrolls horizontally rather than letting five columns crush the text column on a phone. */ .tw{margin:36px 0;overflow-x:auto;-webkit-overflow-scrolling:touch} .tw table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px} .tw th,.tw td{border-bottom:1px solid var(--hairline);padding:12px 14px; text-align:left;vertical-align:top;line-height:1.6} .tw thead th{font-family:Lora,Georgia,serif;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--muted);font-weight:500; border-bottom:1px solid var(--ink);white-space:nowrap} .tw tbody th{font-weight:600;white-space:nowrap} .tw tbody tr:last-child th,.tw tbody tr:last-child td{border-bottom:none} /* Citations at the foot of a post. Set as a quiet apparatus, deliberately smaller and muted: the sources have to be THERE and followable, but a wall of grey government URLs must never compete with the last line of the essay. Same museum-label restraint as .post-date. */ .sources{margin-top:56px;padding-top:24px;border-top:1px solid var(--hairline)} .sources h2{font-family:Lora,Georgia,serif;font-size:11px;letter-spacing:.24em; text-transform:uppercase;color:var(--muted);font-weight:500;margin:0 0 14px} .sources ul{list-style:none;padding:0;margin:0} .sources li{font-size:13.5px;line-height:1.7;color:var(--muted);margin-bottom:10px} .sources a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hairline)} .sources a:hover{color:var(--seal);border-bottom-color:var(--seal)} .cta-box{margin-top:60px;padding:40px 32px;background:var(--paper2);text-align:center} /* Journal lead illustration. One per post, Heritage Ink style, the same register as the carousels. Photography stays for the object (cover, spread, studio); illustration carries the essays, so the pages that have to prove the book is real never share a frame with a drawing. 900px wide, ~136KB average. */ .post-lead{margin:26px 0 34px} .post-lead img{width:100%;height:auto;display:block;border:1px solid var(--hairline)} /* Related posts. Internal links are how a crawler, and an LLM's retriever, finds the other 24 pieces instead of landing on one page and leaving. */ .related{margin-top:56px;padding-top:26px;border-top:1px solid var(--hairline);display:flex; flex-direction:column;gap:14px} .related .k{font-family:Lora,Georgia,serif;font-size:10.5px;letter-spacing:3px;color:var(--seal); text-transform:uppercase;margin-bottom:4px} .related a{color:var(--ink);text-decoration:none;font-size:17px;line-height:1.5; border-bottom:1px solid transparent} .related a:hover{color:var(--seal);border-bottom-color:var(--hairline)} .related a.all{font-family:Lora,Georgia,serif;font-size:11px;letter-spacing:2px; text-transform:uppercase;color:var(--muted);margin-top:6px} .cta-box p{font-size:15px;color:var(--muted);margin-bottom:20px} .btn{display:inline-flex;flex-direction:column;align-items:center;gap:3px; background:var(--seal);color:var(--paper);text-decoration:none;border:1px solid var(--seal); padding:17px 42px;font-size:15px;letter-spacing:.18em;transition:background .2s,color .2s} .btn:hover{background:transparent;color:var(--seal)} .price-card .btn{margin-top:28px} /* Secondary buttons: same shape, quieter, so the three edition cards stay the primary decision on the page. Nothing on /pricing uses it today; it stays for the next parked block. */ .btn-quiet{background:transparent;color:var(--seal);padding:13px 30px;font-size:13.5px} .btn-quiet:hover{background:var(--seal);color:var(--paper)} .btn small{font-family:Lora,Georgia,serif;font-size:10px;letter-spacing:.26em;opacity:.75} body.lang-en .btn small{display:none} /* blog index */ .post-list{padding-top:70px;padding-bottom:100px} .post-list h1{font-size:26px;font-weight:600;letter-spacing:2px;margin-bottom:50px} .post-card{display:block;text-decoration:none;color:var(--ink);border-top:1px solid var(--hairline); padding:32px 0} .post-card:last-child{border-bottom:1px solid var(--hairline)} .post-card .k{font-family:Lora,Georgia,serif;font-size:10.5px;letter-spacing:3px;color:var(--seal); text-transform:uppercase;display:block;margin-bottom:10px} .post-card h2{font-size:22px;font-weight:600;margin-bottom:8px} .post-card p{font-size:15px;color:var(--muted)} .post-card .post-date{margin:0 0 8px;font-size:11.5px} /* how it works */ /* ---- /how-it-works ---- Was four stacked steps carrying 499 Chinese characters between them, which is a page about a process that nobody finishes reading. The process is four words: ask, answer, chapter, book. It reads left to right now, one line each, and the detail that used to live in the paragraphs sits on /gallery and /pricing where someone goes looking for it. The connector is a hairline, not an arrow. Four arrows across a page about a hand-bound book would look like a slide deck. */ /* The page used to open on two left edges. The title, the kicker and the subtitle sat in the 680px .narrow column while the grid under them runs the full 1040px, so the h1 started 180px inside the first step and nothing on the page lined up with anything else. One column now, matching .flow's padding at every breakpoint. The subtitle caps its own measure rather than the whole block: a line of prose 984px wide is unreadable at any alignment, but that is a reason to shorten the line, not to indent the title. */ .flow-col{max-width:1040px;margin:0 auto;padding:0 28px} .flow-col .subtitle{max-width:620px} .flow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3.4vw,40px); max-width:1040px;margin:0 auto;padding:38px 28px 16px} .flow-step{position:relative} .flow-step .num{display:block;font-family:"Noto Serif TC",serif;font-size:26px; color:var(--hairline);line-height:1;margin-bottom:14px} .flow-step h3{font-size:18px;font-weight:600;margin-bottom:9px;letter-spacing:.06em} .flow-step p{font-size:14.5px;line-height:1.85;color:var(--muted);margin:0} /* Ask and Answer make ONE chapter, and that runs once per question. The book is not a fourth step in a line, it is what the chapters add up to. So the first three share a group and the book sits across a rule: the grid says what the words say. Still four equal columns, because the existing rhythm was the good part. */ .flow-cycle{grid-column:span 3;display:grid;grid-template-columns:repeat(3,1fr); gap:clamp(20px,3.4vw,40px)} .flow-cycle .flow-step:nth-child(-n+2)::after{content:"";position:absolute;top:14px; right:calc(clamp(20px,3.4vw,40px) / -2);width:1px;height:calc(100% - 26px); background:var(--hairline);opacity:.7} /* The sentence the page never said, and the one that removes the fear of effort: this is done a question at a time, and stopping is the family's call. */ .flow-repeat{grid-column:1 / -1;margin:24px 0 0;padding-top:18px; border-top:1px solid var(--hairline);font-size:13.5px;line-height:1.85; color:var(--muted);font-style:italic} .flow-out{padding-left:calc(clamp(20px,3.4vw,40px) * 1.9)} @media(max-width:860px){ .flow-col{padding:0 22px} .flow{grid-template-columns:1fr;padding:28px 22px 10px} .flow-cycle{grid-column:1} .flow-out{border-left:none;border-top:1px solid var(--hairline); padding:24px 0 0;margin-top:26px} } @media(max-width:520px){ .flow{gap:0} .flow-cycle{grid-template-columns:1fr;gap:0} .flow-step{padding:22px 0;border-top:1px solid var(--hairline)} .flow-out{margin-top:0;padding:22px 0 0} .flow .flow-out{border-bottom:1px solid var(--hairline)} .flow-cycle .flow-step::after{display:none!important} .flow-repeat{margin:18px 0 0} .flow-step .num{display:inline-block;margin:0 12px 0 0;vertical-align:-2px} .flow-step h3{display:inline-block;margin-bottom:7px} } /* The two objection-killers used to share one paragraph under the grid, which put a third way of doing step 壹 next to a printing guarantee and aligned to neither. Each now sits where it is answering something: the phone option under 壹, the proof directly above the buttons, where a person is deciding. */ .step-note{margin:14px 0 0;font-size:12.5px;line-height:1.8;color:var(--muted); padding-top:12px;border-top:1px solid var(--hairline);opacity:.9} /* Left, on the same edge as the grid and as .flow-repeat above it. It was the only centred text on a page that is left-aligned from the kicker down, which read as an accident rather than as emphasis. The measure is capped, the left edge is not: same treatment as the note under the grid, because this is the same kind of note. The .cta-box below stays centred, as it is on every page: it is a filled panel, a separate object, not a line of prose. */ .proof-line{max-width:620px;margin:34px 0 0; font-size:14px;line-height:1.9;color:var(--muted)} body.lang-en .step p{font-family:Lora,Georgia,serif;font-size:15px} /* pricing */ /* Two tiers side by side. They are deliberately the SAME card, same background, same weight: PRICING.md bans anything that makes the smaller tier read as the cheap one (the funeral-home upsell trap). What differs between them is scope, never construction, and the layout has to say that before the words do. Stacks on narrow screens with the hero tier first. */ /* The three tiers carry different numbers of lines, so align-items:start left the Order buttons at three different heights and the row read as broken rather than as three prices. The cards stretch to the tallest one and the button is pushed to the floor of each, which also puts the three prices on one line for the eye to compare. */ /* Every column answers every row, in the same order, the way a spec sheet does and a bullet list does not. A bullet list is the seller choosing what to boast about, and three lists of different lengths say "this one has less". Rows say the tiers are the same object at three levels of finish, which is what they are. subgrid is what makes it read: the cards share the row tracks of .price-row, so 本書 sits at the same height in all three even when the Heritage needs three lines and the Digital one. Without subgrid support it degrades to three independent cards, which is where it came from. */ .price-row{grid-template-rows:repeat(11,auto)} .price-row .price-card{grid-row:span 11;grid-template-rows:subgrid;gap:0} .spec{list-style:none;margin:0;padding:0;display:grid;grid-template-rows:subgrid; grid-row:span 7} .spec li{display:block;padding:13px 0;border-top:1px solid var(--hairline)} .spec li:first-child{border-top:none} .spec .k{display:block;font-family:Lora,Georgia,serif;font-size:9.5px;letter-spacing:.2em; text-transform:uppercase;color:var(--seal);margin-bottom:5px} body.lang-en .spec .k{font-size:9px} .spec .v{display:block;font-size:14px;line-height:1.7} .price-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1080px;margin:40px auto; align-items:stretch} .price-row .price-card{display:grid} .price-row .price-card ul{margin-bottom:28px} .price-row .price-card .btn{justify-self:center;align-self:end;margin-top:26px} .price-row .price-card{margin:0;max-width:none;padding:40px 26px} .price-row .price-card ul{max-width:none} /* Left to right the row climbs: Digital, Heritage, Two-Person. Source order is the same, so there is no `order` rule any more. The one that lived here existed only because the Keepsake sat between them in the markup. */ .price-card .amount .cur{font-size:20px;font-weight:400;color:var(--muted);margin-right:2px} .price-card .scope{font-size:13px;color:var(--muted);margin:-2px 0 22px;letter-spacing:.04em} /* Stacked, the entry rung goes first: on a phone whatever is on top is the default, and HK$398 is the rung the funnel aims at. */ @media(max-width:980px){ .price-row{grid-template-columns:repeat(3,minmax(250px,74vw));gap:14px;max-width:none; overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain; padding:0 20px 10px;margin:32px 0 0;scrollbar-width:none} .price-row::-webkit-scrollbar{display:none} .price-row .price-card{scroll-snap-align:center} /* Padding used to go UP here, 44px against the 40px of the wide layout, which made the cards taller on the screen with the least room. It goes down instead. */ .price-row .price-card{padding:26px 22px;scroll-snap-align:center} .price-card .amount{font-size:32px} } .price-card{max-width:480px;margin:40px auto;padding:44px 36px;background:var(--paper2);text-align:center} .price-card .tier{font-family:Lora,Georgia,serif;font-size:11px;letter-spacing:4px;color:var(--seal); text-transform:uppercase;margin-bottom:16px;display:block} .price-card .amount{font-size:38px;font-weight:600;margin-bottom:6px} .price-card .was{font-family:Lora,Georgia,serif;font-size:16px;color:var(--muted); text-decoration:line-through;font-weight:400;margin-right:10px} .price-card .note{font-size:13px;color:var(--muted);margin-bottom:28px} .price-card ul{list-style:none;text-align:left;margin:0 auto;max-width:340px} .price-card li{padding:11px 0;border-top:1px solid var(--hairline);font-size:14.5px} .price-card li:first-child{border-top:none} /* founder film, 9:16 */ .founder-video{max-width:320px;margin:0 auto;aspect-ratio:9/16;background:var(--paper2)} .founder-video iframe{width:100%;height:100%;border:0;display:block} .founder-films{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,3vw,32px); max-width:680px;margin:0 auto} .founder-films figure{margin:0} .founder-films .founder-video{max-width:none} .founder-films figcaption{margin-top:11px;font-size:11.5px;letter-spacing:.1em; color:var(--muted);text-align:center;line-height:1.6} @media(max-width:560px){ .founder-films{grid-template-columns:1fr;max-width:320px;gap:28px} } .price-note{max-width:520px;margin:0 auto;text-align:center;font-size:14px;color:var(--muted); padding:0 20px} /* faq */ .faq-list{max-width:680px;margin:0 auto;padding:20px 0 60px} .faq-item{border-top:1px solid var(--hairline);padding:28px 0} .faq-item:last-child{border-bottom:1px solid var(--hairline)} .faq-item h3{font-size:17px;font-weight:600;margin-bottom:10px} .faq-item p{font-size:15px;color:var(--muted);margin-bottom:0} .faq-item p + p{margin-top:12px} .faq-item p a{color:var(--seal);text-decoration:none;border-bottom:1px solid var(--hairline)} body.lang-en .faq-item p{font-family:Lora,Georgia,serif;font-size:14.5px} /* faq accordion: only when JS has added .faq-js, so no-JS readers and crawlers get the full page */ .faq-list.faq-js .faq-item{padding:20px 0} .faq-list.faq-js .faq-item h3{cursor:pointer;position:relative;padding-right:36px;margin-bottom:0} .faq-list.faq-js .faq-item h3::after{content:"+";position:absolute;right:2px;top:-3px;font-size:24px;font-weight:300;line-height:1;color:var(--seal)} .faq-list.faq-js .faq-item.is-open h3::after{content:"\2212"} .faq-list.faq-js .faq-item.is-open h3{margin-bottom:10px} .faq-list.faq-js .faq-item p{display:none} .faq-list.faq-js .faq-item.is-open p{display:block} .faq-list.faq-js .faq-item h3:focus-visible{outline:1px solid var(--seal);outline-offset:4px} /* gallery */ /* ---- /gallery ---- Was one full-bleed photograph per screen. gallery-cover is 1200x1600 with the book in the bottom third, so someone who clicked "see the book" scrolled past two thirds of a screen of out-of-focus gravel to reach it. Square tiles now, cropped around the book by build-images.js, three across: the whole object is comprehensible in one screen and the visitor decides what to look at. The hover scale is the only motion here on purpose. A gallery of a hand-bound book should not behave like a storefront carousel. */ .gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,22px); max-width:1040px;margin:0 auto;padding:24px 28px 20px} .gallery-grid figure{margin:0} .gallery-tile{aspect-ratio:1;overflow:hidden;background:var(--paper2); border:1px solid var(--hairline)} .gallery-tile img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s ease} .gallery-grid figure:hover .gallery-tile img{transform:scale(1.04)} .gallery-grid figcaption{margin-top:11px;font-size:12.5px;letter-spacing:.06em; color:var(--muted);line-height:1.65} @media(prefers-reduced-motion:reduce){ .gallery-tile img{transition:none} .gallery-grid figure:hover .gallery-tile img{transform:none} } @media(max-width:760px){ .gallery-grid{grid-template-columns:repeat(2,1fr);padding:18px 18px 12px} } /* The facts a visitor came for after looking. Every line is lifted from /pricing or /how-it-works rather than written fresh, so the three pages cannot drift into describing three different books. */ .specs{margin:6px 0 0} .specs > div{display:grid;grid-template-columns:120px 1fr;gap:18px; padding:15px 0;border-top:1px solid var(--hairline)} .specs > div:last-child{border-bottom:1px solid var(--hairline)} .specs dt{font-family:Lora,Georgia,serif;font-size:11px;letter-spacing:.18em; text-transform:uppercase;color:var(--seal);padding-top:3px} .specs dd{margin:0;font-size:15px;line-height:1.8} @media(max-width:560px){ .specs > div{grid-template-columns:1fr;gap:5px} } /* legal */ .legal{max-width:680px;margin:0 auto;padding:20px 0 80px} .legal h2{font-size:18px;font-weight:600;margin:36px 0 14px} .legal p{font-size:15px;color:var(--muted);margin-bottom:16px} .legal ul{margin:0 0 16px 20px;color:var(--muted);font-size:15px} .legal li{margin-bottom:8px} .legal a{color:var(--seal);text-decoration:none;border-bottom:1px solid var(--hairline)} .legal a:hover{border-bottom-color:var(--seal)} footer.site{border-top:1px solid var(--hairline);padding:50px clamp(22px,5vw,56px);text-align:center} footer.site a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--hairline); padding:6px 2px;font-size:14px} footer.site .fine{font-family:Lora,Georgia,serif;font-size:10px;letter-spacing:3px; color:#746B5F;margin-top:24px} /* ---- /visit, the studio ---- */ .visit{display:grid;grid-template-columns:1fr 1fr;min-height:80vh} .visit-info{display:flex;align-items:center;justify-content:center;padding:56px 32px} .visit-card{max-width:400px;text-align:center} .visit-card h1{font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:3px;margin-bottom:20px} .visit-lede{font-size:15px;color:var(--muted);margin-bottom:30px} .visit-addr{font-size:16px;line-height:1.9} .visit-addr a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline)} .visit-mtr{font-size:13px;color:var(--muted);margin-top:10px} .visit-tel{margin-top:20px;font-size:15px} .visit-tel a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline)} .visit-hours{list-style:none;margin:28px 0 0;font-size:14px;color:var(--muted)} .visit-hours li{display:flex;justify-content:center;gap:12px;line-height:2} .visit-hours li > span{min-width:62px;text-align:right} .visit-hours b{font-weight:400;min-width:136px;text-align:left} .visit-hours .byapp{color:var(--seal)} .visit-note{margin-top:18px;font-size:13px;color:var(--muted)} .visit-card .btn{margin-top:26px} .visit-photo{position:relative;min-height:440px;background:var(--paper2)} .visit-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} @media(max-width:820px){ .visit{grid-template-columns:1fr;min-height:0} .visit-photo{order:-1;min-height:56vh} .visit-info{padding:56px 24px 64px} } @media(max-width:640px){ body{font-size:16px} header.site{padding:22px 22px} article{padding:10px 0 70px} .cta-box{padding:32px 22px} /* Phone header. The nav already drops onto its own line under the mark, which is fine. What broke on Aug 6: adding 工作室 pushed the row past the viewport (346px of links and gaps for 331px of space), so the EN button wrapped a SECOND time and sat stranded on a third line, header 112px -> 154px, on every page. Park the language button in the empty space beside the mark (there is 226px of it doing nothing) and the links get the full width back: 187px of text + gaps, comfortable down to a 320px screen and with room for another nav item later. English is the tight case, its labels are ~40% wider than the Chinese ones, so the tracking comes in a touch on phones only. Below ~340px English still needs two rows; centring the nav means that reads as a designed two-line nav instead of one orphaned item. Aug 14: this comment used to close after "another nav item later", leaving the three lines below it as stray text. The parser then swallowed the next rule as part of an invalid selector, so header.site never got position:relative and the language button was anchored to the page instead of the header. */ header.site{position:relative} header.site nav{width:100%;justify-content:center;gap:14px;row-gap:8px} header.site nav a{letter-spacing:.14em} .lang-btn{position:absolute;top:17px;right:22px;padding:7px 11px} } /* Pricing page: the object, above the prices. Someone landing here from a reel has never seen the book; a price grid with nothing to price reads as abstract. */ .price-plates{display:grid;grid-template-columns:repeat(3,1fr);gap:14px; max-width:900px;margin:34px auto 0;padding:0 20px} .price-plates figure{margin:0;text-align:center} .price-plates .frame{border:1px solid var(--hairline);padding:8px;background:var(--paper)} .price-plates img{display:block;width:100%;height:auto;aspect-ratio:5/4;object-fit:cover;object-position:center} .price-plates figcaption{margin-top:11px;font-size:11.5px;letter-spacing:.12em; color:var(--muted);line-height:1.5} @media(max-width:620px){ /* Cover full width, the two details side by side: three stacked photos put 1500px of scroll between a bio-link visitor and the price he came for. */ .price-plates{grid-template-columns:1fr 1fr;gap:12px;max-width:430px} .price-plates figure:first-child{grid-column:1/-1} .price-plates figcaption{font-size:10.5px;letter-spacing:.08em} } /* ---- WhatsApp ---- This green is deliberately not our palette. Oxblood and paper belong to the book; this mark exists to be recognised in a quarter of a second, and a tastefully oxblood version of it would be recognised as nothing at all. So it is kept to the two places it earns and nowhere else: the Contact us buttons and the floating bubble. Duplicated in index.html, which carries its own copy of the stylesheet. Change one, change the other. */ .wa-mark{width:19px;height:19px;flex:0 0 auto;fill:#25D366;transition:fill .2s} .btn-wa{flex-direction:row;gap:10px;align-items:center; background:transparent;color:var(--seal);border-color:var(--seal)} .btn-wa:hover{background:var(--seal);color:var(--paper)} .btn-wa:hover .wa-mark{fill:var(--paper)} .wa-float{position:fixed;right:18px;bottom:18px;z-index:60; display:inline-flex;align-items:center;gap:10px; padding:11px 17px 11px 13px;border-radius:999px; background:var(--ink);color:var(--paper);text-decoration:none; font-size:13.5px;letter-spacing:.03em;line-height:1; box-shadow:0 6px 20px rgba(35,32,28,.22); transition:transform .2s,box-shadow .2s} .wa-float:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(35,32,28,.3)} .wa-float .wa-mark{fill:#25D366;width:22px;height:22px} /* The pill carries its question while the visitor is still at the top, then folds back to the mark. A label parked over the content for the whole page is a banner, not an offer. */ .wa-float .zh-t,.wa-float .en-t{max-width:14em;overflow:hidden;white-space:nowrap; transition:max-width .34s ease,opacity .22s ease} .wa-float[data-min]{padding:12px;gap:0} .wa-float[data-min] .zh-t,.wa-float[data-min] .en-t{max-width:0;opacity:0} body.lang-en .wa-float{font-family:Lora,Georgia,serif} @media(max-width:640px){ .wa-float{right:12px;bottom:12px;font-size:12.5px;padding:10px 14px 10px 11px;gap:8px} .wa-float .wa-mark{width:20px;height:20px} } @media(prefers-reduced-motion:reduce){ .wa-float{transition:none} .wa-float:hover{transform:none} .wa-float .zh-t,.wa-float .en-t{transition:none} } /* Two ways out of a page, side by side: one that keeps you here and one that opens a conversation. The order is deliberate. */ .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* The composing panel. Green only where WhatsApp needs to be recognised, the header and the send button; everything between them is paper and ink, because the visitor is reading and typing there, not looking for a logo. Duplicated in index.html and founding.html, which carry their own stylesheets. */ /* The panel is bounded by the screen, not by its contents. It used to cap .wa-panel-body at 72vh with no overflow set, so a category with four two-line questions pushed the compose box 51px past the panel's own bottom edge on a 640px screen: the send button drew outside the paper, below the border, and on anything shorter it left the screen entirely. The one thing that must never scroll away is the way out. */ .wa-panel{position:fixed;right:18px;bottom:80px;z-index:61; width:min(340px,calc(100vw - 36px));background:var(--paper); border:1px solid var(--hairline);box-shadow:0 14px 44px rgba(35,32,28,.24); display:none;flex-direction:column; max-height:calc(100vh - 104px);max-height:calc(100dvh - 104px)} .wa-panel[data-open]{display:flex} .wa-panel-head{display:flex;align-items:center;justify-content:space-between; gap:10px;padding:13px 10px 13px 16px;background:var(--ink);color:var(--paper)} .wa-panel-title{font-size:13px;letter-spacing:.12em} .wa-panel-x{background:none;border:0;color:var(--paper);font-size:22px;line-height:1; padding:0 8px;cursor:pointer;opacity:.85} .wa-panel-x:hover{opacity:1} .wa-panel-head{flex:0 0 auto} /* Thread and chips scroll together; the head stays put above and the compose box stays put below. overscroll-behavior stops a flick at the end of the list from scrolling the page behind the panel. */ .wa-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;position:relative; overscroll-behavior:contain;display:flex;flex-direction:column;gap:12px; padding:14px 14px 12px} /* The thread. Bot on the left in paper2, you on the right in seal. Every bubble carries both languages: the Chinese line, then the English under it, smaller and quieter. */ .wa-thread{display:flex;flex-direction:column;gap:9px;min-height:110px;flex:0 0 auto} .wa-msg{max-width:92%;padding:10px 13px;font-size:14px;line-height:1.6} .wa-bot{background:var(--paper2);align-self:flex-start} .wa-you{background:var(--seal);color:var(--paper);align-self:flex-end} .wa-msg .wa-zh{display:block} .wa-msg .wa-en{display:block;font-family:Lora,Georgia,serif;font-size:12.5px;line-height:1.55; margin-top:5px;opacity:.78} .wa-link{display:inline-block;margin-top:9px;font-size:12.5px;letter-spacing:.06em; color:var(--seal);text-decoration:none;border-bottom:1px solid var(--hairline)} .wa-link .wa-zh,.wa-link .wa-en{display:inline;font-size:inherit;margin:0} .wa-link .wa-en{margin-left:6px;opacity:.85} .wa-suggest{display:flex;flex-wrap:wrap;gap:7px} .wa-chip{background:transparent;border:1px solid var(--hairline);color:var(--seal); font:inherit;font-size:12.5px;line-height:1.35;padding:7px 11px;cursor:pointer;text-align:left; transition:background .15s,border-color .15s} .wa-chip .wa-zh{display:block} .wa-chip .wa-en{display:block;font-family:Lora,Georgia,serif;font-size:11px;opacity:.7;margin-top:2px} .wa-chip:hover{background:var(--paper2);border-color:var(--seal)} .wa-chip-wa{border-color:var(--seal)} .wa-compose{flex:0 0 auto;border-top:1px solid var(--hairline);padding:11px 14px 12px;background:var(--paper)} .wa-field{width:100%;font:inherit;font-size:14px;line-height:1.6;color:var(--ink); background:var(--paper);border:1px solid var(--hairline);padding:9px 12px; resize:vertical;min-height:52px;margin-bottom:9px} .wa-field:focus{outline:none;border-color:var(--seal)} .wa-send{width:100%;background:var(--seal);color:var(--paper);border:1px solid var(--seal); font:inherit;font-size:14px;letter-spacing:.1em;padding:11px;cursor:pointer; transition:background .2s,color .2s} .wa-send .wa-en{margin-left:8px;opacity:.85;font-size:12.5px} .wa-send:hover{background:transparent;color:var(--seal)} /* The typing dots and the quiet "anything else" line under an answer. */ .wa-typing{display:inline-flex;gap:5px;align-items:center;padding:13px 14px} .wa-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.35; animation:wa-dot 1s infinite} .wa-typing i:nth-child(2){animation-delay:.18s} .wa-typing i:nth-child(3){animation-delay:.36s} @keyframes wa-dot{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}} .wa-more{font-size:12px;color:var(--muted);text-align:center;letter-spacing:.04em;padding:4px 0 0} .wa-more .wa-zh,.wa-more .wa-en{display:inline} .wa-more .wa-en{margin-left:6px;font-family:Lora,Georgia,serif} @media(prefers-reduced-motion:reduce){ .wa-typing i{animation:none;opacity:.6} } @media(max-width:640px){ .wa-panel{right:12px;bottom:68px;max-height:calc(100vh - 92px);max-height:calc(100dvh - 92px)} }