/* ============================================================ Design tokens ============================================================ */ :root{ --bg:#f5f5f5; --wash:#f6faf3; /* matches the process-GIF backgrounds */ --ink:#242424; --muted:#5f6368; --line:#dedede; --card:#fff; --green:#5d8e48; --green-dark:#335f2c; --yellow:#efbd2d; --nav-h:80px; /* sticky-header height, used for anchor scroll offset */ --radius:28px; --shadow-sm:0 8px 28px rgba(0,0,0,.05); --shadow-md:0 18px 45px rgba(0,0,0,.12); --shadow-lg:0 26px 70px rgba(0,0,0,.10); } /* ============================================================ Base / reset ============================================================ */ *{box-sizing:border-box} /* Stop sideways scroll WITHOUT breaking the sticky header. `overflow-x:hidden` on (or ) turns it into a SCROLL CONTAINER, so position:sticky on .topbar sticks to — which never scrolls — instead of the viewport, and the nav scrolls away with the page. `overflow-x:clip` clips the exact same horizontal overflow but is NOT a scroll container, so the sticky header keeps pinning to the viewport. is left fully visible for the same reason. This is what makes the top navigation stay fixed while scrolling. */ html{scroll-behavior:smooth} body{ margin:0;overflow-x:clip; background:var(--bg);color:var(--ink); font-family:"Segoe UI",SegoeUI,Arial,sans-serif; -webkit-font-smoothing:antialiased;text-rendering:geometricPrecision; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,p{margin:0} :focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:6px} /* Centered content column */ .shell{width:min(1240px,100%);margin-inline:auto;padding-inline:clamp(18px,4vw,32px)} /* ============================================================ Header / navigation ============================================================ */ .topbar{ position:sticky;top:0;z-index:100; background:rgba(245,245,245,.9);backdrop-filter:blur(18px); border-bottom:1px solid var(--line); } /* Equal 1fr side columns keep the centre column pinned to the true page centre, so the nav links stay put no matter how wide the logo or CTA get. */ .nav{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center; gap:clamp(16px,2vw,24px);min-height:var(--nav-h); } .nav .logo{justify-self:start} /* Logo — icon + a VECTOR wordmark (assets/ayunik-wordmark.svg). "AYUNIK" and "STORIES THAT TRAVEL" are locked to the same width inside the SVG, so their edges stay aligned at every size — the alignment can't break responsively the way live text does. Both parts scale with clamp(), no per-breakpoint hacks. */ .logo{display:inline-flex;align-items:center;gap:clamp(10px,1.3vw,14px);min-width:0} .logo-icon{height:clamp(46px,5.1vw,58px);width:auto;flex:none} .logo-word{height:clamp(44px,5vw,58px);width:auto;flex:none} .navlinks{ justify-self:center; display:flex;align-items:center;gap:4px; padding:6px 10px;border-radius:999px; background:#fff;border:1px solid rgba(0,0,0,.08);box-shadow:var(--shadow-sm); } .navlinks a,.nav-link{ display:inline-flex;align-items:center; padding:10px 15px;border-radius:999px; font-size:16px;font-weight:700;color:#2b2f2a;white-space:nowrap; transition:background .15s ease,color .15s ease; } .navlinks a:hover,.nav-link:hover,.nav-item:hover .nav-link{ background:rgba(93,142,72,.1);color:var(--green); } /* Dropdown */ .nav-item{position:relative;display:inline-flex} .nav-item::after{content:"";position:absolute;inset:100% -18px auto;height:20px} /* hover bridge */ .dropdown-menu{ position:absolute;left:50%;top:calc(100% + 10px); transform:translateX(-50%) translateY(6px); min-width:178px;padding:10px;border-radius:20px; background:rgba(255,255,255,.98);border:1px solid rgba(0,0,0,.1); box-shadow:var(--shadow-md);backdrop-filter:blur(14px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .16s ease,transform .16s ease,visibility .16s ease; } .dropdown-menu a{padding:11px 14px;border-radius:14px;font-size:15px;font-weight:700;color:#2f4f2b} .dropdown-menu a:hover,.dropdown-menu a:focus{background:rgba(93,142,72,.12);color:var(--green)} .nav-item:hover .dropdown-menu, .nav-item:focus-within .dropdown-menu{ opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0); } .navcta{ justify-self:end; background:var(--green);color:#fff;border-radius:14px; padding:13px 20px;font-size:15px;font-weight:700; box-shadow:0 8px 22px rgba(93,142,72,.22); transition:background .15s ease; } .navcta:hover{background:var(--green-dark)} .menu-toggle{ display:none;justify-self:end; border:1px solid rgba(0,0,0,.1);background:#fff;color:#2b2f2a; border-radius:999px;padding:10px 16px;font:inherit;font-weight:800;font-size:15px; box-shadow:var(--shadow-sm);cursor:pointer; } /* ============================================================ Hero ============================================================ */ .hero{ display:grid;grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); column-gap:clamp(28px,4vw,54px);align-items:start; padding:clamp(16px,2.4vw,28px) 0 clamp(24px,3.5vw,40px); } h1{ max-width:760px;margin:0 0 16px; font-size:clamp(54px,6.5vw,88px);line-height:.96;letter-spacing:-.06em;font-weight:750; } .lead{max-width:650px;color:var(--muted);font-size:clamp(19px,2.1vw,24px);line-height:1.38} .actions{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap} .btn{ display:inline-flex;align-items:center;justify-content:center; background:var(--green);color:#fff;border:1px solid var(--green);border-radius:10px; padding:15px 21px;font:inherit;font-size:16px;font-weight:750;cursor:pointer; } .btn.secondary{background:#fff;color:#4f7f3f;border-color:rgba(93,142,72,.28)} /* Collapsible video showreel (See it in Action). It lives inside the hero and spans the full width below both columns on desktop; on narrower screens it is reordered to sit directly under the buttons, before the sample box. */ .demo-panel{ grid-column:1 / -1; display:grid;grid-template-rows:0fr;opacity:0; transition:grid-template-rows .5s ease,opacity .4s ease,margin .45s ease; } .demo-panel.open{grid-template-rows:1fr;opacity:1;margin-top:clamp(10px,2vw,18px)} .demo-inner{overflow:hidden;min-height:0} .demo-frame{ position:relative;width:100%;aspect-ratio:16 / 9; border-radius:var(--radius);overflow:hidden; background:#07120d;border:1px solid var(--line);box-shadow:var(--shadow-lg); } .demo-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* Hero preview card */ .sample-card{ width:100%;background:#fff;border:1px solid rgba(0,0,0,.1); border-radius:32px;padding:18px;box-shadow:var(--shadow-lg); } .sample-hero{padding:20px 24px;border-radius:24px;background:linear-gradient(135deg,#fff,#eaf3e4)} .sample-hero h3{margin-bottom:10px;font-size:clamp(28px,3vw,40px);line-height:1.05;letter-spacing:-.04em} .sample-hero p{color:var(--muted);font-size:18px;line-height:1.5} .sample-ribbon{height:10px;margin-top:16px;border-radius:999px; background:linear-gradient(90deg,var(--green-dark),var(--green),#83c252,var(--yellow))} .sample-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px} .sample-box{padding:16px;border:1px solid rgba(0,0,0,.08);border-radius:18px;background:#fff} .sample-box strong{display:block;margin-bottom:8px} .sample-box p{color:var(--muted);font-size:14px;line-height:1.45} /* ============================================================ Sections ============================================================ */ .section{padding:clamp(26px,4vw,44px) 0} /* Anchor targets sit on the heading/content itself (not the padded
), so an in-page link lands the heading right under the sticky header — no gap above. */ #services,#start{scroll-margin-top:calc(var(--nav-h) + 14px)} .sectionhead{margin-bottom:clamp(16px,2vw,24px)} .section h2{font-size:clamp(38px,5vw,64px);letter-spacing:-.052em;line-height:1} /* Shared pill label */ .chip{ align-self:flex-start;display:inline-block; padding:6px 13px;border-radius:999px; background:rgba(93,142,72,.12);color:var(--green-dark); font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase; } /* ---- What We Offer: full-width stacked cards, 40% text / 60% animation ---- */ .offer-list{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,26px)} .offer-card{ display:grid;grid-template-columns:40% 60%;align-items:stretch; background:var(--card);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;box-shadow:var(--shadow-sm); } .offer-text{ display:flex;flex-direction:column;justify-content:center;gap:14px; padding:clamp(26px,3vw,40px); } .offer-text h3{font-size:clamp(24px,2.6vw,32px);line-height:1.1;letter-spacing:-.035em} .offer-text p{color:var(--muted);font-size:clamp(16px,1.5vw,18px);line-height:1.55} .offer-text .offer-link{align-self:flex-start;color:var(--green-dark);font-weight:800;font-size:15.5px} .offer-text .offer-link:hover{color:var(--green)} .offer-media{background:var(--wash);border-left:1px solid var(--line);min-height:240px} .offer-media img{width:100%;height:100%;object-fit:cover} /* ---- Start: request-a-sample form (inlined from start.html) ---- */ .start-card{ display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(24px,3vw,40px);align-items:center; background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:clamp(26px,3.2vw,44px);box-shadow:var(--shadow-lg); } .start-copy{display:flex;flex-direction:column;gap:14px} .start-card h2{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.04em;line-height:1.04} .start-card p{color:var(--muted);font-size:clamp(16px,1.6vw,19px);line-height:1.5} .form{display:grid;grid-template-columns:1fr 1fr;gap:12px} .form input,.form select,.form textarea{ width:100%;padding:14px 15px;border:1px solid #d1d1d1;border-radius:12px; background:#fff;font:inherit;font-size:16px;color:var(--ink); } .form input::placeholder,.form textarea::placeholder{color:#9aa09a} .form input:focus,.form select:focus,.form textarea:focus{ outline:2px solid var(--green);outline-offset:1px;border-color:var(--green); } .form select,.form textarea{grid-column:1 / -1} .form textarea{resize:vertical;min-height:150px} .form button{ grid-column:1 / -1;justify-self:start;border:0;cursor:pointer; background:var(--green);color:#fff;border-radius:12px;padding:15px 26px; font:inherit;font-weight:750;font-size:16px;transition:background .15s ease; } .form button:hover{background:var(--green-dark)} .form-note{grid-column:1 / -1;margin:0;font-size:14px;font-weight:600;line-height:1.4;color:#c0392b} .form-note.ok{color:var(--green-dark)} .form .invalid{border-color:#e05a4a;box-shadow:0 0 0 3px rgba(224,90,74,.16)} .form .invalid:focus{outline-color:#e05a4a;border-color:#e05a4a} .form .hp{position:absolute;left:-9999px;width:1px;height:1px;padding:0;border:0;opacity:0} /* ============================================================ Footer ============================================================ */ .footer{ border-top:1px solid var(--line);padding:28px 0 40px; color:var(--muted);font-size:14px; display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; } .footer a:hover{color:var(--green)} .footer-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .socials{display:inline-flex;align-items:center;gap:10px} .social{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:999px; color:var(--muted);background:#fff;border:1px solid var(--line); transition:color .15s ease,background .15s ease,border-color .15s ease; } .social:hover{color:#fff;background:var(--green);border-color:var(--green)} .social svg{width:17px;height:17px;fill:currentColor} /* ============================================================ Responsive ============================================================ */ @media(max-width:1120px){ .hero{grid-template-columns:1fr} /* Stacked order: text + buttons, then the video, then the sample box. */ .hero-copy{order:1} #demoPanel{order:2} .sample-card{order:3;max-width:840px;margin-top:clamp(20px,4vw,28px)} } @media(max-width:820px){ /* Nav collapses to a toggle menu */ .nav{grid-template-columns:1fr auto;gap:12px;min-height:auto;padding-block:14px} .menu-toggle{display:inline-flex} .navcta{display:none} .navlinks{ grid-column:1 / -1;display:none;flex-direction:column;align-items:stretch;gap:8px; width:100%;padding:12px;border-radius:24px;margin-top:4px; } .nav-open .navlinks{display:flex} .navlinks a,.nav-link{width:100%;justify-content:space-between;padding:13px 14px;border-radius:16px} .nav-item{flex-direction:column;align-items:stretch} .nav-item::after{display:none} .dropdown-menu{ position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto; min-width:0;margin:2px 4px 6px;padding:8px;border-radius:18px;box-shadow:none; background:rgba(93,142,72,.07);border-color:rgba(93,142,72,.14); } /* Sections stack */ .actions{flex-direction:column} .actions .btn{width:100%} .sample-grid{grid-template-columns:1fr} .offer-card{grid-template-columns:1fr} .offer-media{border-left:0;border-top:1px solid var(--line);aspect-ratio:86 / 47;min-height:0} .start-card{grid-template-columns:1fr} .form{grid-template-columns:1fr} .footer{flex-direction:column;align-items:flex-start} } @media(max-width:420px){ h1{font-size:42px} } /* ============================================================ Story pages (case-studies / medical / education / other) Simple article column reusing the tokens above. ============================================================ */ .page-head{padding:clamp(24px,4vw,48px) 0 clamp(12px,2vw,20px);max-width:820px} .page-head h1{font-size:clamp(44px,5.6vw,72px);margin-bottom:14px} .page-head .lead{font-size:clamp(18px,2vw,22px)} .story-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(16px,2.2vw,24px);padding-bottom:clamp(26px,4vw,44px); } .story-card{ display:flex;flex-direction:column;gap:12px; background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow-sm); } .story-card h2{font-size:clamp(22px,2.3vw,28px);line-height:1.15;letter-spacing:-.035em} .story-card p{color:var(--muted);font-size:16px;line-height:1.55} .placeholder-note{ margin:0 0 clamp(20px,3vw,32px);padding:16px 18px;border-radius:18px; background:rgba(239,189,45,.12);border:1px solid rgba(239,189,45,.4); color:#6b5410;font-size:15px;line-height:1.5; } /* ============================================================ Legal pages (privacy policy / disclaimer) ============================================================ */ .legal-page .section{padding:clamp(30px,5vw,52px) 0} .legal-page .section h2{font-size:clamp(34px,5vw,60px);letter-spacing:-.05em;line-height:1} .legal{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,3.6vw,48px);box-shadow:var(--shadow-sm)} .legal .updated{color:var(--muted);font-size:14px;margin:0 0 22px} .legal .intro{color:var(--ink);font-size:clamp(15.5px,1.5vw,17px);line-height:1.7;margin:0 0 18px} .legal h3{font-size:clamp(18px,1.9vw,22px);letter-spacing:-.02em;line-height:1.25;margin:28px 0 10px;color:var(--ink)} .legal h3:first-of-type{margin-top:6px} .legal p{color:var(--muted);font-size:clamp(15px,1.4vw,16.5px);line-height:1.72;margin:0 0 14px} .legal ul{margin:0 0 16px;padding-left:22px} .legal li{color:var(--muted);font-size:clamp(15px,1.4vw,16.5px);line-height:1.7;margin:0 0 9px} .legal a{color:var(--green);text-decoration:underline} .legal strong{color:var(--ink)}