/* ========================================================================== Krishna Children's Hospital — design system Plain CSS. No framework, no build step. Edit the tokens below to re-skin. ========================================================================== */ /* --- 1. Tokens ----------------------------------------------------------- */ :root{ /* Modernized Brand Colors - Rich, Vibrant, Deep */ --blue-900: #0B1130; --blue-800: #141E55; --blue-700: #1D2A7A; --blue-600: #293CB4; --blue-500: #4258E6; --blue-200: #B8C3FF; --blue-100: #DEE4FF; --blue-50: #F2F5FF; --teal-600: #087A6E; --teal-500: #0FA394; --teal-100: #C7F2ED; --teal-50: #E6FBF9; --coral-600: #B5225E; --coral-500: #E63578; /* vibrant baby pink */ --coral-100: #FCD2E3; --coral-50: #FDECF3; --sun-500: #F7B801; --sun-100: #FDF3CD; --red-600: #D9251B; --red-50: #FDEDED; /* Playful dot palette */ --dot-red: #E03131; --dot-blue: #293CB4; --dot-yellow: #F5C518; --dot-teal: #0FA394; --dot-pink: #E63578; /* Text and scrims on dark surfaces (footer, topbar, navy bands) */ --on-dark: #DCE6F8; --on-dark-2: #B9C9E8; --scrim: rgba(11, 32, 80, .82); /* Neutrals */ --ink: #0A0F24; --ink-2: #323A52; --ink-3: #5C6784; --ink-4: #8B96B5; --line: #E2E8F4; --line-2:#EEF2FA; --white: #FFFFFF; --bg: #FCFDFF; --bg-soft: #F4F7FB; --bg-cream:#FEFAF5; /* Typography */ --font: "Outfit", "Inter", system-ui, -apple-system, sans-serif; --fs-hero: clamp(2.5rem, 2rem + 4.5vw, 5rem); --fs-h2: clamp(1.8rem, 1.4rem + 2.5vw, 3.2rem); --fs-h3: clamp(1.2rem, 1.1rem + 0.6vw, 1.6rem); --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem); --fs-sm: 0.9rem; --fs-xs: 0.8rem; /* Space + shape */ --wrap: 1200px; --gutter: clamp(1.2rem, 5vw, 3rem); --section: clamp(4rem, 8vw, 7.5rem); --r-sm: 12px; --r: 20px; --r-lg: 32px; --r-xl: 40px; --r-full: 999px; /* State-of-the-art Shadows */ --sh-1: 0 2px 4px rgba(11, 17, 48, .04), 0 4px 12px rgba(11, 17, 48, .04); --sh-2: 0 8px 24px rgba(11, 17, 48, .08), 0 16px 40px rgba(11, 17, 48, .06); --sh-3: 0 20px 40px rgba(11, 17, 48, .12), 0 32px 80px rgba(11, 17, 48, .10); /* Glassmorphism */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: 1px solid rgba(255, 255, 255, 0.5); --ease: cubic-bezier(.25, .8, .25, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); --bar-h: 64px; } /* --- 2. Reset ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px} body{ margin:0;font-family:var(--font);color:var(--ink);background:var(--bg); font-size:1rem;line-height:1.65;-webkit-font-smoothing:antialiased; /* `clip`, not `hidden`: `hidden` would make a scroll container and break `position:sticky` on the header. Every decorative overflow (the dot fields) is already clipped by its own section. */ overflow-x:clip; } img,svg,video{max-width:100%;height:auto;display:block} h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;font-weight:800;letter-spacing:-.022em;color:var(--blue-900)} h1{font-size:var(--fs-hero);letter-spacing:-.032em} h2{font-size:var(--fs-h2);letter-spacing:-.028em} h3{font-size:var(--fs-h3)} p{margin:0 0 1rem} a{color:var(--blue-600);text-decoration-thickness:1px;text-underline-offset:3px} ul,ol{margin:0 0 1rem;padding-left:1.15rem} li{margin-bottom:.35rem} button{font:inherit;color:inherit} :focus-visible{outline:3px solid var(--blue-500);outline-offset:3px;border-radius:6px} ::selection{background:var(--blue-100);color:var(--blue-900)} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:absolute;left:50%;top:-100px;transform:translateX(-50%);z-index:200;background:var(--blue-700);color:#fff;padding:.7rem 1.2rem;border-radius:0 0 var(--r) var(--r);font-weight:700;text-decoration:none;transition:top .2s} .skip:focus{top:0} /* --- 3. Layout ----------------------------------------------------------- */ .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)} .wrap-wide{max-width:1360px} .section{padding-block:var(--section)} .section--soft{background:var(--bg-soft)} .section--cream{background:var(--bg-cream)} .section--navy{background:var(--blue-900);color:var(--on-dark)} .section--navy h2,.section--navy h3{color:#fff} .grid{display:grid;gap:clamp(1rem,2.5vw,1.8rem)} @media(min-width:700px){.g-2{grid-template-columns:repeat(2,1fr)}} @media(min-width:700px){.g-3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.g-3{grid-template-columns:repeat(3,1fr)}} @media(min-width:640px){.g-4{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.g-4{grid-template-columns:repeat(4,1fr)}} /* --- 4. Section headers -------------------------------------------------- */ .eyebrow{ display:inline-flex;align-items:center;gap:.5rem; font-size:var(--fs-xs);font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:var(--teal-600);margin-bottom:.85rem; } .eyebrow::before{content:"";width:22px;height:2px;background:var(--teal-500);border-radius:2px} .section--navy .eyebrow{color:var(--blue-200)} .section--navy .eyebrow::before{background:var(--blue-500)} .s-head{max-width:640px;margin-bottom:clamp(2rem,4vw,3.2rem)} .s-head.center{margin-inline:auto;text-align:center} .s-head.center .eyebrow{justify-content:center} .lead{font-size:var(--fs-lead);color:var(--ink-2);line-height:1.62} .section--navy .lead{color:var(--on-dark-2)} .muted{color:var(--ink-3)} .small{font-size:var(--fs-sm)} /* --- 5. Buttons ---------------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; padding:.85rem 1.5rem;border-radius:var(--r-full);border:1.5px solid transparent; font-weight:700;font-size:.95rem;text-decoration:none;cursor:pointer; transition:transform .22s var(--ease),box-shadow .22s var(--ease),background-color .22s,color .22s,border-color .22s; } .btn svg{width:18px;height:18px;flex:none} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn--primary{background:var(--blue-700);color:#fff;box-shadow:var(--sh-2)} .btn--primary:hover{background:var(--blue-800);box-shadow:var(--sh-3)} .btn--ghost{background:#fff;color:var(--blue-800);border-color:var(--line)} .btn--ghost:hover{border-color:var(--blue-200);background:var(--blue-50)} .btn--emergency{background:var(--red-600);color:#fff;box-shadow:0 6px 18px rgba(212,42,32,.28)} .btn--emergency:hover{background:#b8231a} .btn--teal{background:var(--teal-500);color:#fff} .btn--teal:hover{background:var(--teal-600)} .btn--onnavy{background:#fff;color:var(--blue-800)} .btn--lg{padding:1.05rem 2rem;font-size:1.02rem} .btn--sm{padding:.55rem 1.1rem;font-size:.86rem;border-radius:var(--r-full)} .btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center} /* --- 6. Header ----------------------------------------------------------- */ /* Emergency strip. Scrolls away with the page; only .site-head is sticky. */ .topbar{background:var(--blue-900);color:var(--on-dark-2);font-size:var(--fs-xs)} .topbar .wrap{display:flex;gap:.4rem 1.4rem;align-items:center;justify-content:space-between;padding-block:.45rem} .topbar a{color:#fff;text-decoration:none;font-weight:700} .topbar a:hover{text-decoration:underline} .topbar__item{display:inline-flex;align-items:center;gap:.4rem} /* The address/hours line would wrap the strip onto two rows on a phone. */ .topbar__item--meta{display:none} @media(min-width:760px){.topbar__item--meta{display:inline-flex}} .pulse-dot{width:7px;height:7px;border-radius:50%;background:#FF6B5E;flex:none;animation:pulse 2.2s var(--ease) infinite} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,94,.6)}50%{box-shadow:0 0 0 6px rgba(255,107,94,0)}} .site-head{ position:sticky;top:0;z-index:100; background:rgba(255,255,255,.9);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid transparent; transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease); } .site-head.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px rgba(16,32,70,.07); background:rgba(255,255,255,.96); } .site-head .wrap{ display:flex;align-items:center;gap:1rem; padding-block:.62rem;transition:padding-block .3s var(--ease); } /* Condense once the page starts moving, so the bar takes less of a phone screen. */ .site-head.is-stuck .wrap{padding-block:.4rem} .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit;min-width:0} .brand__logo{ position:relative;display:grid;flex:none; width:54px;height:54px; transition:width .3s var(--ease),height .3s var(--ease); } .site-head.is-stuck .brand__logo{width:44px;height:44px} .brand__logo>*{grid-area:1/1;width:100%;height:100%;object-fit:contain;animation:logo-float 5s var(--ease-out) infinite} /* The inline mark is a fallback only — it appears if logo.jpg is ever missing. */ .brand__logo svg{display:none} .brand__logo.no-img svg{display:block} @keyframes logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}} .brand__text{min-width:0} .brand__name{ display:block;font-weight:800;line-height:1.16;color:var(--blue-900); font-size:clamp(.9rem,.84rem + .3vw,1.06rem);letter-spacing:-.022em;transition:color .25s; } .brand:hover .brand__name{color:var(--blue-600)} .brand__sub{ display:block;margin-top:3px;color:var(--ink-3); font-size:.63rem;font-weight:700;letter-spacing:.085em;text-transform:uppercase; } @media(max-width:400px){.brand__sub{font-size:.58rem;letter-spacing:.06em}} /* Everything on the right travels as one cluster. */ .head-right{margin-left:auto;display:flex;align-items:center;gap:.85rem} .nav{display:none} @media(min-width:1080px){ .nav{display:flex;align-items:center;gap:.1rem} .nav a{ position:relative;padding:.5rem .72rem;border-radius:var(--r-full);white-space:nowrap; font-weight:600;font-size:.9rem;color:var(--ink-2);text-decoration:none;transition:color .2s,background-color .2s; } .nav a:hover{color:var(--blue-800);background:var(--blue-50)} .nav a[aria-current="page"]{color:var(--blue-800);background:var(--blue-50)} .nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:16px;height:2.5px;border-radius:2px;background:var(--coral-500)} } .head-cta{display:none} @media(min-width:1080px){.head-cta{display:inline-flex}} .burger{ display:inline-flex;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;padding:0 11px;border:1px solid var(--line);border-radius:12px; background:#fff;cursor:pointer;flex:none;transition:border-color .2s,background-color .2s; } .burger:hover{border-color:var(--blue-200);background:var(--blue-50)} @media(min-width:1080px){.burger{display:none}} .burger span{display:block;height:2px;background:var(--blue-900);border-radius:2px;transition:transform .3s var(--ease),opacity .2s} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .drawer{ position:fixed;inset:0;z-index:150;background:#fff;padding:1.2rem var(--gutter) 2rem; display:flex;flex-direction:column;gap:.2rem;overflow-y:auto; transform:translateY(-100%);visibility:hidden;transition:transform .4s var(--ease-out),visibility .4s; } .drawer.is-open{transform:translateY(0);visibility:visible} .drawer__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.4rem} .drawer a.drawer__link{ padding:.95rem .25rem;border-bottom:1px solid var(--line-2); font-size:1.18rem;font-weight:700;color:var(--blue-900);text-decoration:none; display:flex;align-items:center;justify-content:space-between; } .drawer a.drawer__link::after{content:"\2192";color:var(--blue-200);font-weight:400} .drawer__actions{margin-top:1.6rem;display:grid;gap:.6rem} @media(min-width:1080px){.drawer{display:none}} /* --- 7. Hero ------------------------------------------------------------- */ /* The hero is sized to sit inside one screen: on a laptop the whole banner is visible without scrolling, with the quick-action card just peeking in below to invite the scroll. --chrome is the topbar + sticky header above it. */ :root{--chrome:110px} .hero{position:relative;overflow:hidden;background:linear-gradient(168deg,var(--blue-50) 0%,#fff 46%,var(--coral-50) 100%)} .hero__inner{ position:relative;z-index:2;display:grid; gap:clamp(1.5rem,3vw,2.75rem); padding-block:clamp(1.4rem,3vw,2.25rem) clamp(2.25rem,4vw,3.25rem); } @media(min-width:960px){ .hero{display:flex;align-items:center;min-height:min(calc(100svh - var(--chrome)),820px)} .hero__inner{width:100%;grid-template-columns:1.05fr .95fr;align-items:center} } /* Deliberately smaller than the global --fs-hero: this headline sits beside a photograph and has to share one screen with it. */ .hero h1{font-size:clamp(1.85rem,1.3rem + 2.2vw,3rem);line-height:1.1;margin-bottom:.85rem} .hero h1 .accent{ background:linear-gradient(102deg,var(--blue-600),var(--teal-500) 60%,var(--coral-500)); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero__telugu{font-size:.95rem;font-weight:700;color:var(--teal-600);margin-bottom:.6rem} .hero__lead{max-width:46ch;font-size:clamp(.95rem,.92rem + .18vw,1.06rem);line-height:1.55} .hero__ctas{margin:1.3rem 0 1.1rem} .trust-strip{display:flex;flex-wrap:wrap;gap:.4rem} .chip{ display:inline-flex;align-items:center;gap:.4rem;padding:.34rem .7rem; background:rgba(255,255,255,.82);border:1px solid var(--line);border-radius:var(--r-full); font-size:.75rem;font-weight:700;color:var(--ink-2);white-space:nowrap; } .chip__dot{width:7px;height:7px;border-radius:50%;flex:none} .hero__art{position:relative} .hero__photo{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-3);aspect-ratio:4/3.2;max-height:calc(100svh - var(--chrome) - 5rem)} .hero__badge{ position:absolute;z-index:3;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:var(--glass-border);border-radius:var(--r-lg);padding:.85rem 1.1rem; box-shadow:var(--sh-3);display:flex;align-items:center;gap:.7rem; } .hero__badge b{display:block;font-size:1.35rem;line-height:1;color:var(--blue-900)} .hero__badge span{font-size:var(--fs-xs);color:var(--ink-2);font-weight:800} .hero__badge--a{left:-8%;bottom:12%;animation:float 7s var(--ease) infinite} .hero__badge--b{right:-6%;top:9%;animation:float 8.5s var(--ease) .8s infinite} @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}} @media(max-width:720px){.hero__badge--a{left:0}.hero__badge--b{right:0}} /* Dot field — the hospital's painted-wall motif, abstracted */ .dots{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden} .dots span{position:absolute;border-radius:50%;opacity:.5;animation:drift linear infinite} .cartoon-animal { pointer-events: auto; cursor: pointer; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); display: flex; align-items: center; justify-content: center; animation: drift linear infinite; } @keyframes drift{ 0%{transform:translate3d(0,0,0) scale(1)} 50%{transform:translate3d(14px,-22px,0) scale(1.12)} 100%{transform:translate3d(0,0,0) scale(1)} } /* --- 8. Quick actions ---------------------------------------------------- */ .qa{position:relative;z-index:5;margin-top:calc(-1 * clamp(1.5rem,3vw,2.6rem))} .qa__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:clamp(.6rem,1.6vw,1rem);display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem} @media(min-width:620px){.qa__card{grid-template-columns:repeat(3,1fr)}} @media(min-width:1000px){.qa__card{grid-template-columns:repeat(6,1fr)}} .qa__item{ display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center; padding:1rem .55rem;border-radius:var(--r);text-decoration:none;color:var(--ink); transition:background-color .22s,transform .22s var(--ease); } .qa__item:hover{background:var(--blue-50);transform:translateY(-3px)} .qa__ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none;transition:transform .3s var(--ease)} .qa__item:hover .qa__ico{transform:scale(1.08) rotate(-4deg)} .qa__ico svg{width:21px;height:21px} .qa__label{font-size:.82rem;font-weight:700;line-height:1.25} /* --- 9. Cards ------------------------------------------------------------ */ .card{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.3rem,2.4vw,1.9rem); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s; position:relative;overflow:hidden; } .card:hover{transform:translateY(-5px);box-shadow:var(--sh-2);border-color:var(--blue-100)} .card__ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:1.05rem} .card__ico svg{width:25px;height:25px} .card h3{margin-bottom:.45rem} .card p{color:var(--ink-2);margin-bottom:0;font-size:.96rem} .card__link{display:inline-flex;align-items:center;gap:.35rem;margin-top:1rem;font-weight:700;font-size:.9rem;text-decoration:none} .card__link::after{content:"\2192";transition:transform .25s var(--ease)} .card:hover .card__link::after{transform:translateX(4px)} .t-blue{background:var(--blue-50);color:var(--blue-600)} .t-teal{background:var(--teal-50);color:var(--teal-600)} .t-coral{background:var(--coral-50);color:var(--coral-600)} .t-sun{background:var(--sun-100);color:#9A6B04} .t-red{background:var(--red-50);color:var(--red-600)} /* --- 10. Media placeholders --------------------------------------------- */ /* If the real photo is missing the frame still reads as intentional. */ .media{ position:relative;overflow:hidden;border-radius:var(--r-lg); background:linear-gradient(135deg,var(--blue-50),var(--teal-50) 55%,var(--coral-50)); display:grid;place-items:center; } .media img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2;grid-area:1/1} .media::after{ content:attr(data-label);grid-area:1/1;z-index:1;align-self:center;justify-self:center; padding:.55rem 1rem;border:1.5px dashed var(--blue-200);border-radius:var(--r-full); font-size:var(--fs-xs);font-weight:800;letter-spacing:.06em;color:var(--blue-600); background:rgba(255,255,255,.75);text-align:center;max-width:82%; } .media.is-loaded::after{display:none} .media--tall{aspect-ratio:3/4} .media--wide{aspect-ratio:16/9} .media--sq{aspect-ratio:1} .media--4x3{aspect-ratio:4/3} /* Facility photo strip (services page) --------------------------------- */ .fac-shots{display:grid;gap:clamp(.8rem,2vw,1.2rem);margin-bottom:clamp(2rem,4vw,3rem)} @media(min-width:620px){.fac-shots{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.fac-shots{grid-template-columns:repeat(4,1fr)}} .fac-shot{margin:0} .fac-shot .media{border-radius:var(--r);box-shadow:var(--sh-1)} .fac-shot img{transition:transform .5s var(--ease)} .fac-shot:hover img{transform:scale(1.04)} .fac-shot figcaption{ margin-top:.6rem;font-size:.85rem;font-weight:700;color:var(--ink-2);text-align:center;line-height:1.35; } /* --- 11. Stats ----------------------------------------------------------- */ .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} @media(min-width:860px){.stats{grid-template-columns:repeat(4,1fr)}} .stat{background:#fff;padding:clamp(1.4rem,3vw,2.2rem) 1.1rem;text-align:center} .stat__n{font-size:clamp(2.1rem,1.4rem + 2.4vw,3.1rem);font-weight:800;line-height:1;color:var(--blue-800);letter-spacing:-.04em} .stat__n .suf{color:var(--coral-500)} .stat__l{font-size:var(--fs-sm);font-weight:700;color:var(--ink-3);margin-top:.55rem;display:block} /* --- 12. Legacy timeline ------------------------------------------------- */ .tl{position:relative;padding-left:2.4rem} @media(min-width:900px){.tl{padding-left:0}} .tl__line{position:absolute;left:11px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px} @media(min-width:900px){.tl__line{left:50%;transform:translateX(-1px)}} .tl__fill{position:absolute;left:0;top:0;width:100%;background:linear-gradient(180deg,var(--blue-500),var(--teal-500),var(--coral-500));border-radius:2px;height:0} .tl__item{position:relative;margin-bottom:clamp(2rem,4vw,3.2rem)} @media(min-width:900px){ .tl__item{width:calc(50% - 2.6rem)} .tl__item:nth-child(even){margin-left:calc(50% + 2.6rem)} } .tl__dot{ position:absolute;left:-2.4rem;top:.35rem;width:24px;height:24px;border-radius:50%; background:#fff;border:3px solid var(--blue-200);display:grid;place-items:center; transition:border-color .4s var(--ease),transform .4s var(--ease); } .tl__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--blue-200);transition:background-color .4s} @media(min-width:900px){ .tl__dot{left:auto;right:-3.45rem} .tl__item:nth-child(even) .tl__dot{right:auto;left:-3.45rem} } .tl__item.is-in .tl__dot{border-color:var(--teal-500);transform:scale(1.12)} .tl__item.is-in .tl__dot::after{background:var(--teal-500)} .tl__year{display:inline-block;font-size:var(--fs-xs);font-weight:800;letter-spacing:.11em;color:var(--coral-600);background:var(--coral-50);padding:.28rem .7rem;border-radius:var(--r-full);margin-bottom:.6rem} .tl__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.2rem,2.2vw,1.7rem)} .tl__card p:last-child{margin-bottom:0} .gen{display:grid;gap:1.4rem} @media(min-width:800px){.gen{grid-template-columns:repeat(3,1fr)}} .gen__card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .gen__card:hover{transform:translateY(-5px);box-shadow:var(--sh-2)} .gen__badge{font-size:var(--fs-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-600)} .gen__body{padding:1.3rem} .gen__body h3{margin-bottom:.2rem} /* --- 13. Services tabs --------------------------------------------------- */ .tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem} .tab{ padding:.7rem 1.25rem;border-radius:var(--r-full);border:1.5px solid var(--line); background:#fff;font-weight:700;font-size:.92rem;color:var(--ink-2);cursor:pointer; transition:background-color .25s,border-color .25s,color .25s,box-shadow .25s; } .tab:hover{border-color:var(--blue-200);color:var(--blue-700)} .tab[aria-selected="true"]{background:var(--blue-700);border-color:var(--blue-700);color:#fff;box-shadow:var(--sh-1)} .panel[hidden]{display:none} .panel{animation:panelIn .45s var(--ease-out) both} @keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .svc-list{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.55rem} @media(min-width:620px){.svc-list{grid-template-columns:repeat(2,1fr)}} .svc-list li{ display:flex;align-items:flex-start;gap:.6rem;margin:0;padding:.7rem .9rem; background:var(--bg-soft);border-radius:var(--r-sm);font-size:.93rem;font-weight:600;color:var(--ink-2); } .svc-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal-500);flex:none;margin-top:.55rem} /* --- 14. Accordion (immunisation / FAQ) --------------------------------- */ .acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;margin-bottom:.7rem;transition:border-color .25s,box-shadow .25s} .acc:hover{border-color:var(--blue-200)} .acc[open]{border-color:var(--blue-200);box-shadow:var(--sh-1)} .acc summary{ list-style:none;cursor:pointer;padding:1.05rem 1.25rem;display:flex;align-items:center;gap:.9rem; font-weight:700;color:var(--blue-900); } .acc summary::-webkit-details-marker{display:none} .acc summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2.5px solid var(--ink-3);border-bottom:2.5px solid var(--ink-3);transform:rotate(45deg);transition:transform .3s var(--ease);flex:none} .acc[open] summary::after{transform:rotate(-135deg)} .acc__age{ flex:none;min-width:96px;padding:.34rem .7rem;border-radius:var(--r-full);text-align:center; font-size:var(--fs-xs);font-weight:800;letter-spacing:.03em; } .acc__body{padding:0 1.25rem 1.35rem} .vax{list-style:none;padding:0;margin:0;display:grid;gap:.5rem} @media(min-width:620px){.vax{grid-template-columns:repeat(2,1fr)}} .vax li{display:flex;align-items:center;gap:.65rem;margin:0;padding:.65rem .85rem;background:var(--bg-soft);border-radius:var(--r-sm);font-weight:600;font-size:.93rem} .vax li svg{width:17px;height:17px;color:var(--teal-500);flex:none} /* --- 15. Doctors --------------------------------------------------------- */ .doc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .doc:hover{transform:translateY(-6px);box-shadow:var(--sh-3)} .doc__photo{position:relative;aspect-ratio:1/1.02;overflow:hidden} .doc__photo img{transition:transform .6s var(--ease)} .doc:hover .doc__photo img{transform:scale(1.05)} .doc__tag{position:absolute;z-index:3;left:.9rem;top:.9rem;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:.3rem .75rem;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:800;color:var(--blue-800)} .doc__body{padding:1.25rem;display:flex;flex-direction:column;flex:1} .doc__body h3{margin-bottom:.15rem;font-size:1.16rem} .doc__qual{font-size:.86rem;font-weight:700;color:var(--teal-600);margin-bottom:.5rem} .doc__role{font-size:.9rem;color:var(--ink-3);margin-bottom:1rem} .doc__body .btn{margin-top:auto;width:100%} /* Portrait photos in portrait frames ------------------------------------- */ /* The doctor photographs are tall (roughly 9:16). A centred crop would cut through the face, so the generation cards get a portrait frame and every portrait sits high in its box, where the head actually is. */ .gen__card .media{aspect-ratio:4/5} .gen__card .media img, .doc__photo img{object-position:center 12%} /* --- 16. Gallery --------------------------------------------------------- */ .gal-filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem} .gal{columns:1;column-gap:1rem} @media(min-width:560px){.gal{columns:2}} @media(min-width:960px){.gal{columns:3}} .gal__item{break-inside:avoid;margin-bottom:1rem;position:relative;border-radius:var(--r);overflow:hidden;cursor:zoom-in;display:block;width:100%;padding:0;border:0;background:none;text-align:left} .gal__item .media{border-radius:var(--r)} .gal__cap{ position:absolute;inset:auto 0 0 0;z-index:4;padding:2.2rem .9rem .85rem; background:linear-gradient(transparent,var(--scrim));color:#fff; font-size:.86rem;font-weight:700;opacity:0;transform:translateY(8px); transition:opacity .3s var(--ease),transform .3s var(--ease); } .gal__item:hover .gal__cap,.gal__item:focus-visible .gal__cap{opacity:1;transform:none} .gal__item[hidden]{display:none} .lb{position:fixed;inset:0;z-index:200;background:rgba(9,18,42,.93);display:none;place-items:center;padding:clamp(1rem,4vw,3rem)} .lb.is-open{display:grid;animation:fade .28s ease both} @keyframes fade{from{opacity:0}to{opacity:1}} .lb__fig{margin:0;max-width:1100px;width:100%;animation:zoomIn .35s var(--ease-out) both} @keyframes zoomIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}} .lb__fig img{max-height:76vh;width:auto;margin-inline:auto;border-radius:var(--r);box-shadow:var(--sh-3)} .lb__cap{color:var(--on-dark);text-align:center;padding-top:1rem;font-size:.95rem} .lb__x,.lb__nav{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:1.3rem;transition:background-color .2s} .lb__x:hover,.lb__nav:hover{background:rgba(255,255,255,.25)} .lb__x{top:1.1rem;right:1.1rem} .lb__nav.prev{left:1.1rem;top:50%;transform:translateY(-50%)} .lb__nav.next{right:1.1rem;top:50%;transform:translateY(-50%)} /* --- 17. Forms ----------------------------------------------------------- */ .form{display:grid;gap:1.05rem} @media(min-width:680px){.form-2{grid-template-columns:repeat(2,1fr)}.span-2{grid-column:1/-1}} .field label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.4rem;color:var(--blue-900)} .field .req{color:var(--coral-600)} .field input,.field select,.field textarea{ width:100%;padding:.85rem 1rem;border:1.5px solid var(--line);border-radius:var(--r-sm); font:inherit;font-size:.97rem;color:var(--ink);background:#fff; transition:border-color .2s,box-shadow .2s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px var(--blue-50); } .field textarea{resize:vertical;min-height:110px} .field .hint{font-size:var(--fs-xs);color:var(--ink-3);margin-top:.35rem} /* Honeypot: off-screen rather than display:none, because some bots skip fields they can tell are hidden. Never shown to a person or a screen reader (the wrapper carries aria-hidden). */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* Shown when a submission could not be sent, so nobody is told their booking went through when it did not. */ .form-error{ margin-top:.7rem;padding:.75rem 1rem;border-radius:var(--r-sm); background:#FDECEF;border:1px solid var(--coral-600);color:var(--coral-700,#B3124A); font-size:.92rem; } .field.has-error input,.field.has-error select{border-color:var(--coral-600)} .err{display:none;font-size:var(--fs-xs);font-weight:700;color:var(--coral-600);margin-top:.35rem} .field.has-error .err{display:block} .form-note{background:var(--blue-50);border:1px solid var(--blue-100);border-radius:var(--r);padding:1rem 1.15rem;font-size:.9rem;color:var(--blue-800)} .success{display:none;text-align:center;padding:clamp(2rem,5vw,3.5rem) 1.5rem;background:var(--teal-50);border:1px solid var(--teal-100);border-radius:var(--r-lg)} .success.is-on{display:block;animation:panelIn .5s var(--ease-out) both} .success__ico{width:64px;height:64px;margin:0 auto 1.1rem;border-radius:50%;background:var(--teal-500);color:#fff;display:grid;place-items:center} .success__ico svg{width:30px;height:30px} /* --- 18. Alerts, info rows, floor guide --------------------------------- */ .alert{border-radius:var(--r-lg);padding:clamp(1.2rem,2.5vw,1.8rem);border:1px solid;display:flex;gap:1rem;align-items:flex-start} .alert svg{width:24px;height:24px;flex:none;margin-top:2px} .alert p:last-child{margin-bottom:0} .alert--red{background:var(--red-50);border-color:#F6C9C5;color:#8E1E17} .alert--red strong{color:var(--red-600)} .alert--blue{background:var(--blue-50);border-color:var(--blue-100);color:var(--blue-800)} .alert--sun{background:#FFFAEC;border-color:#F7E3AE;color:#7A5504} .info-row{display:flex;gap:1rem;align-items:flex-start;padding:1.15rem 0;border-bottom:1px solid var(--line-2)} .info-row:last-child{border-bottom:0} .info-row__ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none} .info-row__ico svg{width:20px;height:20px} .info-row h3{font-size:1rem;margin-bottom:.15rem} .info-row p{margin:0;color:var(--ink-2);font-size:.95rem} .info-row a{font-weight:700;text-decoration:none} .info-row a:hover{text-decoration:underline} .floors{display:grid;gap:.6rem} .floor{display:flex;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:.95rem 1.1rem;transition:border-color .25s,transform .25s var(--ease)} .floor:hover{border-color:var(--blue-200);transform:translateX(4px)} .floor__n{width:42px;height:42px;border-radius:12px;background:var(--blue-700);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.1rem;flex:none} .floor__t{font-weight:700;font-size:.96rem;color:var(--blue-900)} .floor__d{font-size:.87rem;color:var(--ink-3)} /* Contact page: the map column stretches to match the details column, so the two sides finish level instead of leaving a gap under the map. */ .contact-grid{align-items:start} @media(min-width:700px){ .contact-grid{align-items:stretch} .contact-grid > *{min-width:0} } /* --- 19. CTA band + footer ---------------------------------------------- */ .cta-band{position:relative;overflow:hidden;background:linear-gradient(125deg,var(--blue-800),var(--blue-600) 55%,var(--teal-600));color:#fff;border-radius:var(--r-xl);padding:clamp(2.2rem,5vw,3.6rem)} .cta-band h2{color:#fff} .cta-band p{color:#CFE0FA} .cta-band .dots span{opacity:.16} .cta-band__inner{position:relative;z-index:2} .site-foot{background:var(--blue-900);color:var(--on-dark-2);padding-block:clamp(3rem,6vw,4.5rem) 2rem} .site-foot h4{color:#fff;font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem} .site-foot a{color:var(--on-dark);text-decoration:none;font-size:.93rem} .site-foot a:hover{color:#fff;text-decoration:underline} .foot-grid{display:grid;gap:2.2rem} @media(min-width:760px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1.3fr}} .foot-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem} .foot-list li{margin:0} .foot-bottom{ margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(255,255,255,.12); display:flex;flex-direction:column;align-items:center;gap:.45rem; text-align:center;font-size:var(--fs-xs); } .foot-credit{color:var(--on-dark-2)} .foot-credit a{font-weight:800;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35)} .foot-credit a:hover{border-bottom-color:#fff;text-decoration:none} .foot-brand__name{color:#fff;font-weight:800;font-size:1.05rem} /* --- 20. Sticky mobile action bar --------------------------------------- */ .mbar{ position:fixed;left:0;right:0;bottom:0;z-index:120;display:grid;grid-template-columns:repeat(4,1fr); background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px); border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -4px 20px rgba(16,32,70,.08); } .mbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.22rem;padding:.6rem .2rem;height:var(--bar-h);text-decoration:none;color:var(--ink-2);font-size:.68rem;font-weight:800} .mbar a svg{width:20px;height:20px} .mbar a.is-accent{color:var(--red-600)} .mbar a.is-primary{color:var(--blue-700)} .mbar a:active{background:var(--blue-50)} @media(min-width:1040px){.mbar{display:none}} @media(max-width:1039px){body{padding-bottom:var(--bar-h)}} /* Kids Zone dropdown ---------------------------------------------------- */ .nav-group{position:relative;display:none} @media(min-width:1080px){.nav-group{display:block}} .nav-group__btn{ display:inline-flex;align-items:center;gap:.35rem;cursor:pointer; padding:.55rem .8rem;border:0;border-radius:var(--r-full);background:none; font-weight:600;font-size:.92rem;color:var(--ink-2);white-space:nowrap; transition:color .2s,background-color .2s; } .nav-group__btn svg{width:14px;height:14px;flex:none;transition:transform .25s var(--ease)} .nav-group__btn:hover{color:var(--blue-800);background:var(--blue-50)} .nav-group__btn[aria-expanded="true"]{color:var(--blue-800);background:var(--blue-50)} .nav-group__btn[aria-expanded="true"] svg{transform:rotate(180deg)} .nav-group.is-current .nav-group__btn{color:var(--blue-800);background:var(--blue-50)} .nav-group.is-current .nav-group__btn::after{ content:"";position:absolute;left:50%;bottom:1px;transform:translateX(-50%); width:16px;height:2.5px;border-radius:2px;background:var(--coral-500); } /* The outer box is transparent and starts flush against the button, so the pointer never crosses a dead zone on its way to the panel. The visible card is the inner .nav-group__panel, offset by this box's top padding. */ .nav-group__menu{ position:absolute;top:100%;left:50%;transform:translateX(-50%); padding-top:.6rem;z-index:110; /* No animation here: panelIn finishes on `transform:none`, which would wipe out the translateX(-50%) that centres this box. The inner panel animates instead, so positioning and motion never fight. */ } .nav-group__menu[hidden]{display:none} .nav-group__panel{ min-width:270px;padding:.5rem; background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3); display:grid;gap:.15rem; animation:panelIn .22s var(--ease-out) both; } .nav-group__panel a{ display:block;padding:.85rem 1.1rem;border-radius:var(--r-sm);white-space:nowrap; font-weight:600;font-size:1rem;color:var(--ink-2);text-decoration:none; transition:background-color .15s,color .15s; } .nav-group__panel a:hover{background:var(--blue-50);color:var(--blue-800)} .nav-group__panel a[aria-current="page"]{background:var(--blue-50);color:var(--blue-800)} /* Drawer sub-group */ .drawer__group{ display:block;padding:1.1rem .25rem .3rem; font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3); } .drawer__link--sub{padding-left:1rem!important;font-size:1.05rem!important} /* Feeding page --------------------------------------------------------- */ .feed-stages{display:grid;gap:1rem} @media(min-width:700px){.feed-stages{grid-template-columns:repeat(2,1fr)}} @media(min-width:1080px){.feed-stages{grid-template-columns:repeat(4,1fr)}} .feed-stage{ background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; transition:transform .3s var(--ease),box-shadow .3s var(--ease); } .feed-stage:hover{transform:translateY(-4px);box-shadow:var(--sh-2)} .feed-stage__age{ display:block;padding:.7rem 1.1rem;background:var(--blue-700);color:#fff; font-weight:800;font-size:.9rem; } .feed-stage__body{padding:1.1rem} .feed-stage dl{margin:0} .feed-stage dt{ font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--teal-600);margin-top:.9rem; } .feed-stage dt:first-child{margin-top:0} .feed-stage dd{margin:.2rem 0 0;font-size:.94rem;color:var(--ink-2);font-weight:600} /* Shared data table ----------------------------------------------------- */ .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff} .data-table{border-collapse:collapse;width:100%;min-width:640px;font-size:.93rem} .data-table th,.data-table td{padding:.85rem 1.1rem;text-align:left;border-bottom:1px solid var(--line-2)} .data-table thead th{ background:var(--blue-50);color:var(--blue-900);font-weight:800; font-size:.72rem;letter-spacing:.09em;text-transform:uppercase; } .data-table tbody th{font-weight:800;color:var(--blue-900);white-space:nowrap} .data-table tbody tr:last-child th,.data-table tbody tr:last-child td{border-bottom:0} .data-table tbody tr:hover{background:var(--bg-soft)} /* Growth chart tool ----------------------------------------------------- */ .gc-langbar,.lang-bar{ display:flex;align-items:center;gap:.7rem;flex-wrap:wrap; margin-bottom:1.4rem;padding-bottom:1.1rem;border-bottom:1px solid var(--line); } .gc-langbar__label,.lang-bar__label{ font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3); } .gc-langs,.lang-opts{display:flex;gap:.3rem} .gc-lang,.lang-opt{ cursor:pointer;padding:.42rem .95rem;border:1.5px solid var(--line); border-radius:var(--r-full);background:#fff;font-weight:700;font-size:.85rem;color:var(--ink-2); transition:border-color .2s,background-color .2s,color .2s; } .gc-lang:hover,.lang-opt:hover{border-color:var(--blue-200)} .gc-lang[aria-checked="true"],.lang-opt[aria-checked="true"]{border-color:var(--blue-500);background:var(--blue-50);color:var(--blue-800)} .lang-bar{margin-bottom:1.2rem;padding-bottom:0;border-bottom:0} /* Telugu script needs a little more line height to breathe. */ [lang="te"]{line-height:1.75} [lang="te"] .gc-pctline,[lang="te"] h3{line-height:1.4} .gc-sex{border:0;padding:0;margin:0 0 .3rem;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center} .gc-sex legend{font-weight:700;font-size:.88rem;color:var(--blue-900);margin-bottom:.4rem;padding:0} .gc-radio{ display:inline-flex;align-items:center;gap:.45rem;cursor:pointer; padding:.6rem 1.1rem;border:1.5px solid var(--line);border-radius:var(--r-full); background:#fff;font-weight:700;font-size:.92rem;transition:border-color .2s,background-color .2s; } .gc-radio:hover{border-color:var(--blue-200)} .gc-radio:has(input:checked){border-color:var(--blue-500);background:var(--blue-50);color:var(--blue-800)} .gc-out{margin-top:clamp(2rem,4vw,3rem);display:grid;gap:1.2rem} .gc-out[hidden]{display:none} .gc-out--error{ background:var(--coral-50);border:1px solid var(--coral-100); border-radius:var(--r-lg);padding:1.2rem 1.4rem;color:var(--coral-600);font-weight:600; } .gc-age{font-size:1.02rem;color:var(--ink-2);margin:0} /* Age is entered as years + months, so the two boxes sit side by side under one heading. The inner .field elements keep the ordinary input styling. */ .gc-age{display:grid;grid-template-columns:1fr 1fr;gap:.7rem} .gc-age .field{margin-bottom:0} .gc-age .field label{font-weight:600;font-size:.8rem;color:var(--ink-2)} .gc-age__legend{display:block;font-weight:700;font-size:.88rem;margin-bottom:.4rem;color:var(--blue-900)} .gc-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(1.2rem,2.5vw,1.8rem)} .gc-card h3{margin-bottom:.5rem} /* Explains why an indicator is absent — no result of its own, so it reads as a note rather than a card that failed to fill in. */ .gc-card--note{background:var(--bg-soft);border-style:dashed} /* BMI, kept deliberately plain: the number, the band it falls in, one line. No percentile, z-score or curve — those say the same thing three more times, and a parent only wants the short answer. */ .gc-bmi{text-align:center} /* The verdict is the headline — it is what a parent came to find out. */ .gc-bmi__word{ display:block;margin:.6rem 0 .5rem; font-size:clamp(1.6rem,1.2rem + 1.8vw,2.3rem);font-weight:800; line-height:1.15;letter-spacing:-.02em; } .gc-bmi__note{color:var(--ink-2);font-size:1.05rem;margin-bottom:.9rem} .gc-bmi__num{ font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:0; padding-top:.8rem;border-top:1px solid var(--line); } /* Band colours. Green only for the healthy band, so it cannot be misread. */ .gc-bmi--b0 .gc-bmi__word{color:#8A6500} .gc-bmi--b1 .gc-bmi__word{color:var(--teal-600)} .gc-bmi--b2 .gc-bmi__word{color:#8A6500} .gc-bmi--b3 .gc-bmi__word{color:var(--coral-600)} .gc-bmi--b1{background:var(--teal-50);border-color:var(--teal-100)} .gc-pctline{font-size:1.35rem;color:var(--blue-800);margin-bottom:.35rem} .gc-mean{color:var(--ink-2);margin-bottom:.4rem} .gc-note{ background:var(--bg-soft);border-left:3px solid var(--teal-500); padding:.7rem 1rem;border-radius:0 var(--r-sm) var(--r-sm) 0; font-size:.94rem;color:var(--ink-2);margin-bottom:1.2rem; } /* Printed growth charts (Kids Zone) -------------------------------------- */ .chart-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem} .chart-sheet{margin:0} .chart-sheet__frame{ position:relative;display:block;text-decoration:none; background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(.6rem,1.5vw,1.1rem);box-shadow:var(--sh-1); transition:box-shadow .3s var(--ease),border-color .3s; } .chart-sheet__frame:hover{box-shadow:var(--sh-3);border-color:var(--blue-200)} .chart-sheet .media{ border-radius:var(--r);min-height:280px; /* Charts are portrait and detailed — show the whole sheet, never crop it. */ background:var(--bg-soft); } .chart-sheet .media img{object-fit:contain;max-height:78vh} .chart-sheet__zoom{ position:absolute;right:clamp(1.1rem,2.5vw,1.8rem);bottom:clamp(1.1rem,2.5vw,1.8rem); display:inline-flex;align-items:center;gap:.4rem; padding:.5rem 1rem;border-radius:var(--r-full); background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid var(--line);box-shadow:var(--sh-1); font-size:.82rem;font-weight:700;color:var(--blue-800); opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease),transform .25s var(--ease); } .chart-sheet__frame:hover .chart-sheet__zoom, .chart-sheet__frame:focus-visible .chart-sheet__zoom{opacity:1;transform:none} @media(hover:none){.chart-sheet__zoom{opacity:1;transform:none}} .chart-sheet figcaption{ margin-top:.9rem;font-size:.9rem;color:var(--ink-2);font-weight:600;text-align:center; } /* --- 21. Advanced Scroll & Stagger reveal --------------------------------- */ .js [data-rv]{opacity:0;transform:translateY(40px);transition:opacity 0.8s var(--ease-bounce),transform 0.8s var(--ease-bounce)} .js [data-rv="left"]{transform:translateX(-50px) translateY(0)} .js [data-rv="right"]{transform:translateX(50px) translateY(0)} .js [data-rv="scale"]{transform:scale(.9) translateY(0)} .js [data-rv].is-in{opacity:1;transform:translate(0, 0) scale(1)} [data-rv-d="1"]{transition-delay:.1s} [data-rv-d="2"]{transition-delay:.2s} [data-rv-d="3"]{transition-delay:.3s} [data-rv-d="4"]{transition-delay:.4s} [data-rv-d="5"]{transition-delay:.5s} /* Staggered children animation (used for lists/cards) */ .js .stagger-grid > * { opacity:0; transform:translateY(30px); transition:opacity 0.7s var(--ease-bounce), transform 0.7s var(--ease-bounce); } .js .stagger-grid.is-in > * { opacity:1; transform:translateY(0); } .js .stagger-grid.is-in > *:nth-child(1) { transition-delay: .1s; } .js .stagger-grid.is-in > *:nth-child(2) { transition-delay: .2s; } .js .stagger-grid.is-in > *:nth-child(3) { transition-delay: .3s; } .js .stagger-grid.is-in > *:nth-child(4) { transition-delay: .4s; } .js .stagger-grid.is-in > *:nth-child(5) { transition-delay: .5s; } /* --- 22. Interior page header ------------------------------------------- */ .phead{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--blue-50),#fff 60%,var(--teal-50));padding-block:clamp(2.6rem,6vw,4.6rem)} .phead__inner{position:relative;z-index:2;max-width:760px} .crumbs{display:flex;gap:.45rem;align-items:center;font-size:var(--fs-xs);font-weight:700;color:var(--ink-3);margin-bottom:1rem;flex-wrap:wrap} .crumbs a{color:var(--ink-3);text-decoration:none} .crumbs a:hover{color:var(--blue-600)} .crumbs span[aria-current]{color:var(--blue-700)} /* --- 23. Utilities ------------------------------------------------------- */ .stack>*+*{margin-top:1rem} .mt-0{margin-top:0}.mb-0{margin-bottom:0} .mt-1{margin-top:.75rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.25rem} .center{text-align:center} .rule{height:1px;background:var(--line);border:0;margin-block:clamp(2rem,4vw,3rem)} .tag-verify{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.06em;color:#9A6B04;background:var(--sun-100);border-radius:4px;padding:.1rem .38rem;vertical-align:middle} .ph{color:var(--blue-600);background:var(--blue-50);border:1px dashed var(--blue-200);border-radius:5px;padding:.05rem .4rem;font-size:.86em;font-weight:700} /* --- 24. Reduced motion + print ----------------------------------------- */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} .js [data-rv]{opacity:1!important;transform:none!important} .dots{display:none} } @media print{ .site-head,.topbar,.mbar,.drawer,.qa,.cta-band,.site-foot,.dots,.btn,.gal-filters{display:none!important} body{padding:0;font-size:11pt;color:#000} .section{padding-block:1rem} .acc{break-inside:avoid;border-color:#999;box-shadow:none} .acc summary::after{display:none} .acc__body{display:block!important} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555} } /* --- 25. Story Section Redesign --- */ .story-showcase { background: radial-gradient(circle at top right, var(--bg-cream) 0%, var(--bg) 100%); position: relative; overflow: hidden; } .story-showcase::before { content: ""; position: absolute; top: -10%; left: -5%; width: 40vw; height: 40vw; background: var(--blue-50); border-radius: 50%; filter: blur(80px); z-index: 0; } .story-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; position: relative; z-index: 2; } @media(min-width: 900px) { .story-grid { grid-template-columns: 1fr 1.1fr; } .story-grid--reverse { grid-template-columns: 1.1fr 1fr; } .story-grid--reverse .story-text { grid-row: 1; grid-column: 2; } .story-grid--reverse .story-visual { grid-row: 1; grid-column: 1; } } .story-text { padding: 1.5rem; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.6); border-radius: var(--r-lg); box-shadow: 0 4px 20px rgba(11, 17, 48, 0.02); } .story-text p { color: var(--ink-2); line-height: 1.7; } .story-text p.lead { color: var(--blue-900); font-weight: 500; font-size: 1.1rem; } .story-visual { position: relative; } .story-media-main { box-shadow: var(--sh-3); border-radius: var(--r-xl); transition: transform 0.4s var(--ease); } .story-media-main:hover { transform: scale(1.02); } .glass-panel { background: rgba(255,255,255,0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 1rem 1.4rem; border-radius: var(--r-lg); box-shadow: var(--sh-2); border: 1px solid rgba(255,255,255,0.5); } .story-media-float { position: absolute; bottom: -20px; right: -20px; z-index: 3; text-align: center; } .story-media-float--left { right: auto; left: -20px; } .stats--glass { background: rgba(255,255,255,0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.8); box-shadow: var(--sh-2); position: relative; z-index: 2; } .stats--glass .stat { background: transparent; }