/* cathie.myasiannanny.com — palette and type shared with akim. and rainy.myasiannanny.com, so the three caregiver pages read as one system. Differences from Rainy's sheet are the agency mark in the masthead and the .reviews grid; everything else is carried over intact. .reviews / .review are unused on THIS page - there are no testimonials in Cathie's assets. They are kept so the sheet stays byte-identical across the three profiles, and so a reviews section can be added here later without a CSS change. */ :root{ --ivory:#FBF4EE; --ivory-deep:#F5E9E2; --card:#FFFDFB; --plum:#3F1D36; --plum-soft:#6B4460; --blush:#C9647F; --blush-light:#D67A94; --blush-tint:#F7E7EB; --muted:#8A7684; --line:#EBDCE0; --shadow:0 18px 44px -22px rgba(72,40,62,.42); --shadow-sm:0 8px 22px -14px rgba(72,40,62,.38); --display:"Fraunces","Noto Serif SC",Georgia,"Songti SC",serif; --body:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; --wrap:1180px; --r:14px; } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:108px} body{ margin:0; font-family:var(--body); color:var(--plum); background:var(--ivory); line-height:1.68; -webkit-font-smoothing:antialiased; } body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:0; background: radial-gradient(900px 620px at 12% -8%, rgba(255,246,232,.95), transparent 62%), radial-gradient(760px 560px at 96% 4%, rgba(247,231,235,.85), transparent 60%); } main,.masthead,.foot{position:relative;z-index:1} img{max-width:100%;height:auto;display:block} a{color:var(--blush);text-underline-offset:3px} a:hover{color:var(--plum)} .wrap{width:min(var(--wrap),calc(100% - 48px));margin-inline:auto} .narrow{max-width:820px} /* ── language toggle ───────────────────────────────────────── */ /* English is the default here; Rainy and Akim default to 中文. Both states are keyed off an explicit [data-lang] rather than one being "no attribute", so flipping the default on a future profile is a one-line change to and nothing else. */ .zh{display:none} .en{display:inline} html[data-lang="zh"] .en{display:none} html[data-lang="zh"] .zh{display:inline} /* block-level language swaps (the rules above only cover inline spans) */ .lang-zh{display:none} .lang-en{display:block} html[data-lang="zh"] .lang-en{display:none} html[data-lang="zh"] .lang-zh{display:block} .skip{position:absolute;left:-9999px;top:0;background:var(--plum);color:#fff;padding:10px 18px;z-index:99} .skip:focus{left:12px;top:12px} /* ── masthead ──────────────────────────────────────────────── */ .masthead{ position:sticky;top:0;z-index:40; background:rgba(251,244,238,.92); backdrop-filter:saturate(150%) blur(12px); border-bottom:1px solid var(--line); } .masthead-in{display:flex;align-items:center;gap:20px;min-height:86px} /* The agency lockup is a stacked wordmark with a mascot, so it has to be sized by width rather than height - below about 96px the two text rows stop being readable. That is what sets the 86px masthead height, and html{scroll-padding-top} follows it. */ .brand-agency{flex:0 0 auto;display:flex;align-items:center;line-height:0} .brand-logo{width:96px;height:auto;opacity:.94;transition:opacity .18s} .brand-agency:hover .brand-logo{opacity:1} .brand{flex:0 0 auto;display:flex;align-items:baseline;gap:8px;text-decoration:none; padding-left:20px;border-left:1px solid var(--line)} .brand-name{font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--plum);letter-spacing:-.01em} .brand-sub{font-size:1rem;font-weight:500;color:var(--blush)} .brand:hover .brand-name{color:var(--blush)} .tabs{ flex:1 1 auto;display:flex;gap:4px;overflow-x:auto; scrollbar-width:none;-ms-overflow-style:none; } .tabs::-webkit-scrollbar{display:none} .tabs a{ position:relative;white-space:nowrap; padding:9px 14px;border-radius:999px; font-size:.94rem;font-weight:500;color:var(--plum-soft); text-decoration:none;transition:background .18s,color .18s; } .tabs a:hover{background:var(--blush-tint);color:var(--plum)} .tabs a.active{background:var(--plum);color:#fff} .lang{ flex:0 0 auto;cursor:pointer; font-family:var(--body);font-size:.86rem;font-weight:700;letter-spacing:.04em; padding:9px 16px;border-radius:999px; color:var(--plum);background:transparent;border:1.5px solid var(--line); transition:border-color .18s,background .18s; } .lang:hover{border-color:var(--blush);background:var(--blush-tint)} /* ── shared type ───────────────────────────────────────────── */ .kicker{ display:flex;align-items:center;gap:12px; margin:0 0 10px;font-size:.82rem;font-weight:700;letter-spacing:.11em; text-transform:uppercase;color:var(--blush); } .kicker::before{content:"";width:34px;height:3px;border-radius:2px;background:var(--blush);flex:0 0 auto} h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.22;margin:0} h1{font-size:clamp(2.6rem,6vw,4.1rem);letter-spacing:-.01em} h1 em{font-style:italic;font-size:.6em;color:var(--plum-soft);display:block;margin-top:.18em} h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:34px} h3{font-size:1.12rem} .section{padding:96px 0} .band{padding:96px 0;background:var(--ivory-deep);border-block:1px solid var(--line)} .note{margin-top:14px;font-size:.9rem;color:var(--muted)} /* ── hero ──────────────────────────────────────────────────── */ .hero{padding:84px 0 0} .hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center} .role{margin:16px 0 0;font-size:1.22rem;color:var(--plum-soft);font-weight:500} .lede{margin:22px 0 0;font-size:1.08rem;max-width:52ch;color:var(--plum-soft)} .chips{list-style:none;display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:28px 0 0} .chips li{ padding:8px 16px;border-radius:999px; background:var(--blush-tint);color:var(--plum); font-size:.9rem;font-weight:500; } .chips.accent li{background:#EAF0E8;color:#33512F} .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px} .btn{ display:inline-block;padding:14px 30px;border-radius:999px; font-weight:700;font-size:.98rem;text-decoration:none; transition:transform .16s,box-shadow .16s,background .16s,color .16s; } .btn-primary{background:var(--plum);color:#fff;box-shadow:var(--shadow-sm)} .btn-primary:hover{background:var(--blush);color:#fff;transform:translateY(-2px)} .btn-ghost{border:1.5px solid var(--line);color:var(--plum);background:var(--card)} .btn-ghost:hover{border-color:var(--blush);color:var(--plum);transform:translateY(-2px)} .hero-photo{margin:0;position:relative} /* offset must stay inside the 24px page gutter or it widens the document */ .hero-photo::after{ content:"";position:absolute;inset:auto -16px -16px auto;width:62%;height:62%; border:1px solid var(--blush-light);border-radius:var(--r);opacity:.5;z-index:-1; } .hero-photo img{ border-radius:var(--r); border:12px solid #fff; box-shadow:var(--shadow); } .facts{ display:grid;grid-template-columns:repeat(4,1fr);gap:2px; margin:76px 0 0;padding:0; background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden; } .facts>div{background:var(--ivory);padding:26px 24px} .facts dt{font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 8px} .facts dd{margin:0;font-family:var(--display);font-size:1.7rem;font-weight:600;color:var(--plum)} .facts dd small{font-family:var(--body);font-size:.9rem;font-weight:500;color:var(--plum-soft)} /* ── video ─────────────────────────────────────────────────── */ .video-frame{ border-radius:var(--r);overflow:hidden; border:10px solid #fff;box-shadow:var(--shadow);background:#000; } .video-frame video{display:block;width:100%;height:auto} /* ── about ─────────────────────────────────────────────────── */ .about-grid{display:grid;grid-template-columns:1fr 380px;gap:56px;align-items:start;margin-top:8px} .about-photo{margin:0;position:sticky;top:110px} .about-photo img{border-radius:var(--r);border:10px solid #fff;box-shadow:var(--shadow)} .about-photo figcaption, .philosophy-photo figcaption{ margin-top:12px;font-size:.86rem;color:var(--muted);text-align:center; } .philosophy{display:grid;grid-template-columns:1fr 420px;gap:40px;align-items:center;margin-top:52px} .philosophy-photo{margin:0} .philosophy-photo img{border-radius:var(--r);border:9px solid #fff;box-shadow:var(--shadow-sm)} /* ── prose ─────────────────────────────────────────────────── */ .prose p{margin:0 0 20px;font-size:1.05rem;color:var(--plum-soft)} .pull{ margin:0;padding:34px 38px; background:var(--blush-tint);border-radius:var(--r); border-left:4px solid var(--blush); } .pull p{margin:0;font-family:var(--display);font-size:1.5rem;line-height:1.4;color:var(--plum)} .pull cite{display:block;margin-top:14px;font-style:normal;font-size:.84rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--blush)} /* ── grids ─────────────────────────────────────────────────── */ .grid{display:grid;gap:20px} .cards{grid-template-columns:repeat(4,1fr)} .card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:28px 26px;transition:transform .18s,box-shadow .18s,border-color .18s; } .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-sm);border-color:var(--blush-light)} .card h3{margin-bottom:10px} .card p{margin:0;font-size:.95rem;color:var(--plum-soft)} .split{display:grid;grid-template-columns:1.35fr .65fr;gap:56px;align-items:start} .sub{font-size:1rem;letter-spacing:.02em;margin:0 0 14px;color:var(--plum)} .sub:not(:first-child){margin-top:38px} .wrap-chips{margin-top:0} .gallery-col{display:grid;gap:18px} .gallery-col img{border-radius:var(--r);border:8px solid #fff;box-shadow:var(--shadow-sm)} .gallery-col figure{margin:0} /* Expertise photos, two up. The inherited 1.35fr/.65fr split gives a 365px photo column, so four stacked 4:3 figures ran 1166px against a 507px chip column - a 659px hole in the middle of the section. A slightly wider right column carrying two photos per row lands the two within ~145px of each other. min-width, NOT an unguarded rule: an #id selector outranks the .split override in the max-width:1000px block below, so unguarded it kept the two-column split on phones and squeezed the photos to 63px wide. Under 1000px the responsive block already collapses .split and sets .gallery-col two-up, which is what we want there anyway. */ @media (min-width:1001px){ #expertise .split{grid-template-columns:1fr .9fr} #expertise .gallery-col{grid-template-columns:repeat(2,1fr)} } .meals{grid-template-columns:repeat(4,1fr)} .meals figure{margin:0} .meals img{ border-radius:var(--r);border:7px solid #fff;box-shadow:var(--shadow-sm); transition:transform .2s; } .meals figure:hover img{transform:translateY(-4px)} /* ── reviews ───────────────────────────────────────────────── */ .reviews{grid-template-columns:repeat(3,1fr);align-items:start} .review{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:30px 28px;display:flex;flex-direction:column;height:100%; } .review blockquote{margin:0 0 18px;font-size:1rem;line-height:1.72;color:var(--plum-soft)} .review blockquote p{margin:0 0 12px} .review blockquote p:last-child{margin-bottom:0} .review .who{ margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line); font-size:.86rem;color:var(--muted); } .review .who strong{ display:block;margin-bottom:3px; font-family:var(--display);font-size:1rem;font-weight:600;color:var(--plum); } /* The signed reference letter is the strongest single asset on the page, so it gets two columns and the display face rather than sitting in the run of cards. */ .review.featured{grid-column:span 2;background:var(--blush-tint);border-color:var(--blush-light)} .review.featured blockquote{font-family:var(--display);font-size:1.2rem;line-height:1.56;color:var(--plum)} /* ── credentials ───────────────────────────────────────────── */ .certs{grid-template-columns:repeat(3,1fr)} .cert{ background:var(--card);border:1px solid var(--line);border-radius:var(--r); padding:18px 18px 24px;display:flex;flex-direction:column; } .cert-shot{ display:block;border-radius:10px;overflow:hidden;background:var(--ivory-deep); margin-bottom:18px;aspect-ratio:4/3; } .cert-shot img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .3s} .cert-shot:hover img{transform:scale(1.035)} .cert h3{font-size:1.02rem;margin-bottom:8px;padding-inline:6px} .cert .issuer{margin:0 0 4px;padding-inline:6px;font-size:.92rem;font-weight:500;color:var(--plum-soft)} .cert .meta{margin:0;padding-inline:6px;font-size:.84rem;color:var(--muted)} .cert-note{background:var(--blush-tint);border-color:var(--blush-light);justify-content:center} .cert-note h3{padding-inline:0} .cert-note p{padding-inline:0;font-size:.94rem;color:var(--plum-soft);margin:0 0 12px} /* ── contact ───────────────────────────────────────────────── */ .contact-in{display:grid;grid-template-columns:300px 1fr;gap:56px;align-items:center} .qr{margin:0;text-align:center} .qr img{border-radius:var(--r);border:10px solid #fff;box-shadow:var(--shadow)} .qr figcaption{margin-top:14px;font-size:.9rem;color:var(--muted)} .contact-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .contact-list li{background:var(--card);display:flex;align-items:center;gap:24px;padding:22px 28px;flex-wrap:wrap} .contact-list .label{flex:0 0 130px;font-size:.8rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .contact-list .value{font-family:var(--display);font-size:1.32rem;font-weight:600;color:var(--plum);text-decoration:none;word-break:break-word} a.value:hover{color:var(--blush)} /* ── footer ────────────────────────────────────────────────── */ .foot{padding:56px 0;background:var(--plum);color:#EFE0E6} .foot-in{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center} .foot-mark{font-family:var(--display);font-size:1.5rem;font-weight:600;color:#fff} /* the lockup is full colour on a plum footer; a white card keeps it from muddying */ .foot-logo{display:inline-block;background:#fff;padding:14px 18px;border-radius:var(--r)} .foot-logo img{width:200px;height:auto} .foot p{margin:0;font-size:.95rem} .foot .fine{font-size:.84rem;color:#C4A8B6} .foot a{color:#F3D9E1} .foot a:hover{color:#fff} /* ── lightbox ──────────────────────────────────────────────── */ .lightbox{ position:fixed;inset:0;z-index:80; display:flex;align-items:center;justify-content:center;padding:5vmin; background:rgba(45,18,38,.92);backdrop-filter:blur(3px); } .lightbox[hidden]{display:none} .lightbox img{max-width:100%;max-height:90vh;border-radius:8px;box-shadow:0 30px 80px -30px #000} .lightbox-close{ position:absolute;top:18px;right:24px; width:46px;height:46px;border-radius:50%;cursor:pointer; font-size:1.9rem;line-height:1;color:#fff; background:rgba(255,255,255,.14);border:0;transition:background .18s; } .lightbox-close:hover{background:rgba(255,255,255,.28)} /* ── responsive ────────────────────────────────────────────── */ @media (max-width:1000px){ .hero-in{grid-template-columns:1fr;gap:44px} .hero-photo{max-width:440px} .cards{grid-template-columns:repeat(2,1fr)} .certs{grid-template-columns:repeat(2,1fr)} .reviews{grid-template-columns:repeat(2,1fr)} .split{grid-template-columns:1fr;gap:40px} .about-grid{grid-template-columns:1fr 300px;gap:38px} .about-photo{position:static} .philosophy{grid-template-columns:1fr 320px;gap:30px} .gallery-col{grid-template-columns:repeat(2,1fr)} .meals{grid-template-columns:repeat(3,1fr)} .facts{grid-template-columns:repeat(2,1fr)} } @media (max-width:720px){ .wrap{width:calc(100% - 32px)} .section,.band{padding:64px 0} .hero{padding:56px 0 0} .masthead-in{flex-wrap:wrap;gap:12px;padding:12px 0;min-height:0} .tabs{order:3;flex-basis:100%;padding-bottom:2px} .brand-name{font-size:1.2rem} .brand{padding-left:14px} .brand-logo{width:76px} .cards,.certs{grid-template-columns:1fr} .reviews{grid-template-columns:1fr} .review.featured{grid-column:span 1} .meals{grid-template-columns:repeat(2,1fr)} .gallery-col{grid-template-columns:repeat(2,1fr)} .about-grid,.philosophy{grid-template-columns:1fr;gap:32px} .about-photo{max-width:340px;margin-inline:auto} .contact-in{grid-template-columns:1fr;gap:34px} .qr{max-width:260px;margin-inline:auto} .contact-list li{gap:6px} .contact-list .label{flex-basis:100%} .facts{margin-top:48px} .pull{padding:26px 24px} /* the offset outline sits 26px right of the photo and pushes the page wider than the viewport once the hero stacks */ .hero-photo::after{display:none} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} } /* ── print: this page is also a resume ─────────────────────── */ @media print{ body{background:#fff} body::before,.masthead,.lang,.cta,#video,.lightbox{display:none!important} .band{background:#fff;border:0} .section,.band{padding:18px 0;break-inside:avoid} .hero{padding:0} .hero-in{grid-template-columns:1fr 240px;gap:24px} .card,.cert,.contact-list li{break-inside:avoid} a{color:var(--plum);text-decoration:none} }