/* AptiGuide main site, DEFERRED CSS. Loaded async on every page. Everything below the fold lives here. Tokens and above-the-fold rules are in critical.css, which is inlined. No em dashes anywhere, per Anshul's standing rule. */ /* ============================================================ 1. Layout and section rhythm ============================================================ */ .wrap{max-width:var(--wrap);margin:0 auto;padding-left:18px;padding-right:18px} .wrap-read{max-width:var(--read);margin:0 auto;padding-left:18px;padding-right:18px} main{display:block} .section{padding:clamp(38px,7vw,68px) 0} .section-tight{padding:clamp(26px,5vw,44px) 0} .section-cream{background:var(--cream)} .section-warm{background:var(--cream-warm)} .section-white{background:var(--white)} .section-navy{background:var(--navy-deep);color:#fff} .section-navy .section-title,.section-navy h2,.section-navy h3{color:#fff} .section-navy .section-label{color:var(--copper-light)} .section-navy .prose,.section-navy .section-sub{color:rgba(255,255,255,.80)} .divider{border:none;border-top:1px solid var(--border);margin:clamp(28px,5vw,42px) 0} /* ============================================================ 2. Typography ============================================================ */ .section-label{font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--navy-light);margin-bottom:12px} .section-title{font-family:var(--f-head);font-size:clamp(1.35rem,3.6vw,2rem);font-weight:700;color:var(--navy);line-height:1.24;margin-bottom:14px;letter-spacing:-.01em} .section-title em{font-style:normal;color:inherit} .section-sub{color:var(--muted);font-size:clamp(.9rem,2vw,.98rem);line-height:1.65;margin-bottom:24px;max-width:64ch} h3.block-title{font-family:var(--f-head);font-size:clamp(1.08rem,2.6vw,1.3rem);font-weight:700;color:var(--navy);line-height:1.3;margin-bottom:10px} h4.mini-title{font-size:.95rem;font-weight:700;color:var(--navy);margin-bottom:6px} .prose{color:var(--text-soft);font-size:clamp(.95rem,2.1vw,1.02rem);line-height:1.78;max-width:70ch} .prose+.prose{margin-top:14px} .prose b,.prose strong{color:var(--navy)} .prose a{color:var(--copper-deep);font-weight:600;text-underline-offset:3px} .prose ul,.prose ol{margin:14px 0 14px 22px} .prose li{margin-bottom:8px} .prose h2{font-family:var(--f-head);font-size:clamp(1.3rem,3.4vw,1.75rem);font-weight:700;color:var(--navy);line-height:1.26;margin:34px 0 12px} .prose h3{font-family:var(--f-head);font-size:clamp(1.08rem,2.6vw,1.28rem);font-weight:700;color:var(--navy);margin:26px 0 10px} .prose blockquote{border-left:4px solid var(--copper);background:var(--cream-warm);padding:16px 20px;margin:22px 0;border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:.97rem} .lede{font-size:clamp(1.02rem,2.4vw,1.12rem);color:var(--text-soft);line-height:1.72;max-width:64ch} .text-center{text-align:center} .mx-auto{margin-left:auto;margin-right:auto} /* ============================================================ 3. Breadcrumbs, byline, trust block ============================================================ */ .breadcrumbs{font-size:.76rem;color:var(--muted);padding:14px 0 0} .breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center} .breadcrumbs a{color:var(--navy-light);text-decoration:none;font-weight:600} .breadcrumbs a:hover{text-decoration:underline} .breadcrumbs li+li::before{content:'/';margin-right:6px;color:var(--border)} .byline{display:flex;align-items:flex-start;gap:10px;font-size:.82rem;color:var(--muted);line-height:1.6;margin:18px 0} .byline strong{color:var(--navy)} .byline a{color:var(--navy-light);font-weight:600} .byline .by-avatar{width:34px;height:34px;border-radius:50%;background:var(--cream-warm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0} .trust-block{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:18px 20px;margin:24px 0;font-size:.88rem;color:var(--text-soft);line-height:1.7} .trust-block b{color:var(--navy)} /* ============================================================ 4. Cards and grids ============================================================ */ .grid{display:grid;gap:14px} .grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} .grid-4{grid-template-columns:1fr 1fr} @media(min-width:600px){.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}} @media(min-width:920px){.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}.grid{gap:18px}} .card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:22px 20px;display:flex;flex-direction:column;gap:8px} .card-link{text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,transform .15s} .card-link:hover{border-color:var(--copper);box-shadow:var(--shadow-md);transform:translateY(-2px)} .card .c-icon{width:44px;height:44px;border-radius:var(--r-sm);background:var(--cream-warm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:4px} .card .c-title{font-family:var(--f-head);font-size:1.06rem;font-weight:700;color:var(--navy);line-height:1.3} .card .c-text{font-size:.87rem;color:var(--text-soft);line-height:1.6} .card .c-more{margin-top:auto;padding-top:10px;font-size:.8rem;font-weight:700;color:var(--copper-deep)} .card.card-accent{border-color:var(--copper);border-width:1.5px} /* Stat strip */ .stat-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:12px} @media(min-width:760px){.stat-strip{grid-template-columns:repeat(4,1fr)}} .stat{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:18px 14px;text-align:center} .section-navy .stat{background:var(--navy);border-color:var(--navy-light)} .stat .s-num{font-family:var(--f-head);font-size:clamp(1.4rem,4vw,1.9rem);font-weight:900;color:var(--copper);line-height:1.1} .section-navy .stat .s-num{color:var(--copper-light)} .stat .s-lab{font-size:.76rem;color:var(--muted);margin-top:4px;line-height:1.4} .section-navy .stat .s-lab{color:rgba(255,255,255,.72)} /* Numbered process steps */ .steps{list-style:none;counter-reset:step;display:grid;gap:12px} .steps li{counter-increment:step;background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:18px 20px 18px 62px;position:relative} .steps li::before{content:counter(step);position:absolute;left:18px;top:18px;width:30px;height:30px;border-radius:var(--r-sm);background:var(--copper-btn);color:#fff;font-family:var(--f-head);font-weight:900;font-size:.9rem;display:flex;align-items:center;justify-content:center} .steps b{display:block;font-family:var(--f-head);font-size:1.02rem;color:var(--navy);margin-bottom:4px} .steps span{font-size:.88rem;color:var(--text-soft);line-height:1.65} /* Checklist */ .ticks{list-style:none;display:grid;gap:10px} .ticks li{position:relative;padding-left:30px;font-size:.94rem;color:var(--text-soft);line-height:1.6} .ticks li::before{content:'';position:absolute;left:0;top:.42em;width:16px;height:9px;border-left:2.5px solid var(--copper);border-bottom:2.5px solid var(--copper);transform:rotate(-45deg)} .section-navy .ticks li{color:rgba(255,255,255,.84)} .section-navy .ticks li::before{border-color:var(--copper-light)} /* Testimonials */ .quote-card{background:var(--white);border:1px solid var(--border);border-left:4px solid var(--copper);border-radius:0 var(--r-md) var(--r-md) 0;padding:20px 22px;display:flex;flex-direction:column;gap:12px} .quote-card p{font-size:.94rem;color:var(--text-soft);line-height:1.72;font-style:italic} .quote-card cite{font-style:normal;font-size:.82rem;font-weight:700;color:var(--navy);margin-top:auto} .quote-card cite span{display:block;font-weight:400;color:var(--muted);font-size:.78rem;margin-top:2px} /* Highlight boxes */ .callout{background:var(--white);border:2px solid var(--copper);border-radius:var(--r-lg);padding:22px 24px;margin:26px 0;display:flex;gap:16px;flex-wrap:wrap;align-items:center} .callout .co-icon{font-size:1.6rem;flex-shrink:0} .callout .co-text{flex:1;min-width:200px} .callout .co-text strong{display:block;font-family:var(--f-head);font-size:1.05rem;color:var(--navy);margin-bottom:4px} .callout .co-text span{font-size:.88rem;color:var(--text-soft);line-height:1.6} .note-box{background:var(--cream-warm);border:1px dashed var(--border);border-radius:var(--r-md);padding:16px 18px;margin:22px 0;font-size:.88rem;color:var(--text-soft);line-height:1.68} .note-box b{color:var(--navy)} /* ============================================================ 5. Accordions, FAQ, tabs ============================================================ */ .faq-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:10px;overflow:hidden} .faq-item summary{padding:16px 18px;font-weight:600;font-size:.94rem;color:var(--navy);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:'+';font-size:1.4rem;color:var(--copper);font-weight:400;flex-shrink:0;line-height:1} .faq-item[open] summary::after{content:'\2212'} .faq-item .faq-a{padding:0 18px 18px;font-size:.9rem;color:var(--text-soft);line-height:1.7} .faq-item .faq-a a{color:var(--copper-deep);font-weight:600} .tabs{margin:20px 0} .tab-btns{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin} .tab-btns button{flex-shrink:0;background:var(--white);border:1px solid var(--border);border-radius:var(--r-pill);padding:10px 18px;min-height:44px;font:inherit;font-size:.84rem;font-weight:600;color:var(--navy);cursor:pointer;white-space:nowrap} .tab-btns button[aria-selected="true"]{background:var(--navy);color:#fff;border-color:var(--navy)} .tab-panel{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:20px 22px;margin-top:12px;font-size:.92rem;color:var(--text-soft);line-height:1.7} .tab-panel[hidden]{display:none} /* Tables that must not break narrow screens */ .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r-md);background:var(--white);margin:20px 0} .table-scroll table{border-collapse:collapse;width:100%;min-width:520px;font-size:.86rem} .table-scroll th,.table-scroll td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border)} .table-scroll th{background:var(--cream-warm);font-weight:700;color:var(--navy);font-size:.78rem;letter-spacing:.03em;text-transform:uppercase} .table-scroll tr:last-child td{border-bottom:none} /* ============================================================ 6. Enquiry form ============================================================ */ .contact-box{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:26px 22px;margin:22px 0;max-width:640px} .contact-form{display:flex;flex-direction:column;gap:15px} .contact-form label{display:flex;flex-direction:column;gap:6px;font-size:.82rem;font-weight:700;color:var(--navy)} .contact-form label>.lbl{display:block} .contact-form .req{color:var(--copper-deep)} .contact-form input,.contact-form select,.contact-form textarea{font-family:var(--f-body);font-size:1rem;padding:12px 13px;min-height:48px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:var(--cream);color:var(--text);font-weight:500;width:100%} .contact-form textarea{min-height:88px;resize:vertical;line-height:1.6} .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--copper);box-shadow:0 0 0 3px rgba(181,101,46,.16)} .contact-form input:user-invalid,.contact-form select:user-invalid{border-color:#B3261E} .field-hint{font-size:.74rem;font-weight:400;color:var(--muted)} .field-error{font-size:.78rem;font-weight:600;color:#B3261E} .field-error[hidden]{display:none} .form-submit-btn{margin-top:4px;background:var(--copper-btn);color:#fff;border:none;border-radius:var(--r-md);padding:15px 22px;min-height:52px;font-size:1rem;font-weight:700;cursor:pointer;font-family:var(--f-body);box-shadow:0 8px 20px rgba(181,101,46,.28)} .form-submit-btn:hover{background:var(--copper-btn-hover)} .form-submit-btn:disabled{background:var(--slate);box-shadow:none;cursor:progress} .form-note{font-size:.76rem;color:var(--muted);line-height:1.55;margin-top:2px} .form-success{text-align:center;padding:26px 12px} .form-success .fs-icon{font-size:30px;display:block;margin-bottom:8px} .form-success p{font-size:.92rem;color:var(--text-soft);line-height:1.7} .form-success strong{color:var(--navy)} /* ============================================================ 7. Connect cards ============================================================ */ .connect-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:20px} @media(min-width:560px){.connect-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.connect-grid{grid-template-columns:repeat(3,1fr)}} .connect-card{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);text-decoration:none;color:var(--text);min-height:64px;transition:border-color .2s,box-shadow .2s,transform .15s} .connect-card:hover{border-color:var(--copper);box-shadow:var(--shadow-md);transform:translateY(-2px)} .connect-card .cc-icon{width:42px;height:42px;border-radius:var(--r-sm);background:var(--cream);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;border:1px solid var(--border)} .connect-card .cc-label{font-size:.86rem;font-weight:700;color:var(--navy);display:block;margin-bottom:2px} .connect-card .cc-sub{font-size:.76rem;color:var(--muted);line-height:1.45} /* ============================================================ 8. Related links ============================================================ */ .related-list{list-style:none;display:grid;gap:10px;margin-top:16px} .related-list a{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-sm);padding:13px 16px;min-height:48px;font-size:.9rem;font-weight:600;color:var(--navy);text-decoration:none} .related-list a:hover{border-color:var(--copper);color:var(--copper-deep)} .related-list a::after{content:'\2192';margin-left:auto;color:var(--copper);flex-shrink:0} .sources-box{background:var(--cream-warm);border:1px solid var(--border);border-radius:var(--r-md);padding:18px 20px;margin:30px 0;font-size:.8rem;color:var(--muted);line-height:1.75} .sources-box a{color:var(--navy);text-decoration:underline} .sources-box .sb-intro{display:block;font-size:.86rem;color:var(--text-soft);font-weight:700;margin-bottom:8px} /* ============================================================ 9. Footer ============================================================ */ .site-footer{background:var(--navy);color:rgba(255,255,255,.70);font-size:.86rem;line-height:1.7} .footer-top{max-width:var(--wrap);margin:0 auto;padding:44px 18px 30px;display:grid;gap:30px} @media(min-width:760px){.footer-top{grid-template-columns:1.4fr 1fr 1fr;gap:36px}} .footer-brand .f-name{font-family:var(--f-head);font-size:1.25rem;color:#fff;font-weight:700;margin-bottom:8px} .footer-brand p{max-width:38ch} .footer-nap{margin-top:16px;font-style:normal;font-size:.84rem;line-height:1.75} .footer-nap a{color:var(--copper-light);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;min-height:44px} .footer-nap a:hover{text-decoration:underline} .footer-col h2{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:12px} .footer-col ul{list-style:none;display:grid;gap:2px} .footer-col a{color:rgba(255,255,255,.78);text-decoration:none;display:flex;align-items:center;padding:8px 0;min-height:44px} .footer-col a:hover{color:var(--copper-light)} .footer-bottom{border-top:1px solid rgba(255,255,255,.14)} .footer-bottom-inner{max-width:var(--wrap);margin:0 auto;padding:18px;display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;font-size:.78rem;color:rgba(255,255,255,.55)} .footer-bottom a{color:rgba(255,255,255,.72);text-decoration:underline} .footer-bottom a:hover{color:var(--copper-light)} /* ============================================================ 10. Sticky bottom bar ============================================================ */ .sticky-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--cream-warm);border-top:1px solid var(--border);box-shadow:0 -4px 14px rgba(34,30,26,.08);padding:8px 36px 8px 8px;display:grid;grid-template-columns:1fr 1fr;gap:6px;transition:transform .3s ease} .sticky-bar.hidden{transform:translateY(110%)} .sticky-bar a{display:flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;font-weight:700;font-size:.72rem;line-height:1.2;padding:10px 6px;min-height:44px;border-radius:var(--r-md)} .sticky-bar a.sb-primary{background:var(--copper-btn);color:#fff} .sticky-bar a.sb-primary:hover{background:var(--copper-btn-hover)} .sticky-bar a.sb-touch{background:#fff;color:var(--navy);border:1.5px solid var(--navy)} .sticky-bar a.sb-touch:hover{background:var(--cream)} .sticky-bar a.sb-alt{background:#fff;color:var(--navy);border:1.5px solid var(--navy)} .sticky-bar a.sb-alt:hover{background:var(--cream)} .sticky-bar a.sb-call{background:var(--navy);color:#fff;border:0} .sticky-bar a.sb-call:hover{background:var(--navy-deep)} .sticky-bar .sb-close{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--navy);font-size:1.15rem;cursor:pointer;padding:8px 10px;line-height:1;min-height:44px} .sticky-bar .sb-close:hover{color:var(--navy-deep)} @media(min-width:520px){.sticky-bar{grid-template-columns:repeat(4,1fr);padding:9px 42px 9px 10px}.sticky-bar a{font-size:.76rem;border-radius:var(--r-pill)}} @media(min-width:700px){.sticky-bar a{font-size:.86rem;padding:11px 16px}} /* ============================================================ 11. Article template extras ============================================================ */ .article-head{padding:clamp(26px,5vw,44px) 0 0} .article-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:.78rem;color:var(--muted);margin-top:12px} .toc{background:var(--cream-warm);border:1px solid var(--border);border-radius:var(--r-md);padding:18px 20px;margin:26px 0} .toc h2{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--navy-light);margin-bottom:10px} .toc ol{margin-left:20px;font-size:.9rem} .toc li{margin-bottom:7px} .toc a{color:var(--navy);text-decoration:none;font-weight:600} .toc a:hover{color:var(--copper-deep);text-decoration:underline} figure{margin:26px 0} figure img{border-radius:var(--r-md);width:100%} figcaption{font-size:.78rem;color:var(--muted);margin-top:8px;line-height:1.55} /* ============================================================ 13. Google reviews Real reviews from the AptiGuide Google Business listing, baked into the page HTML by _kit/tools/build-reviews.py. Never hand-edit the text of a review. ============================================================ */ .rev-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:22px} .rev-score{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--f-head);font-weight:900;font-size:1.9rem;color:var(--navy);line-height:1} .rev-score span{font-family:var(--f-body);font-size:.82rem;font-weight:600;color:var(--muted)} .rev-stars{display:inline-flex;gap:2px;color:var(--copper-deep);font-size:1rem;letter-spacing:1px} .rev-link{display:inline-flex;align-items:center;min-height:44px;font-size:.82rem;font-weight:700;color:var(--copper-deep);text-decoration:none} .rev-link:hover{text-decoration:underline} .rev-grid{display:grid;grid-template-columns:1fr;gap:14px} @media(min-width:640px){.rev-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.rev-grid{grid-template-columns:repeat(3,1fr)}} .rev-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r-md);padding:20px 20px 18px;display:flex;flex-direction:column;gap:10px} .rev-card .rc-stars{color:var(--copper-deep);font-size:.9rem;letter-spacing:1px;line-height:1} .rev-card blockquote{font-size:.9rem;color:var(--text-soft);line-height:1.7} .rev-card figcaption{margin-top:auto;padding-top:6px;font-size:.82rem;font-weight:700;color:var(--navy);border-top:1px solid var(--border)} .rev-card figcaption span{display:block;font-weight:400;color:var(--muted);font-size:.75rem;margin-top:3px} .rev-note{font-size:.76rem;color:var(--muted);margin-top:16px;line-height:1.6} .rev-note a{color:var(--navy-light);font-weight:600} /* ============================================================ 14. Instagram reel marquee A row of reel cards that drifts sideways on its own and links out to Instagram. Pure CSS animation on a duplicated track, no JavaScript, no Instagram embed script. Thumbnails are local WebP. It pauses on hover, on keyboard focus, and for anyone who has asked their system for reduced motion, in which case it becomes a normal horizontal scroller they can swipe. ============================================================ */ .reels-marquee{position:relative;overflow:hidden;padding:4px 0 10px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)} .reels-track{display:flex;gap:14px;width:max-content;animation:reelDrift 64s linear infinite} .reels-marquee:hover .reels-track, .reels-marquee:focus-within .reels-track{animation-play-state:paused} @keyframes reelDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}} .reel-card{flex:0 0 auto;width:170px;display:flex;flex-direction:column;border-radius:var(--r-md);overflow:hidden;background:var(--navy-deep);text-decoration:none;border:1px solid rgba(255,255,255,.16);transition:transform .2s,box-shadow .2s,border-color .2s} .reel-card:hover,.reel-card:focus-visible{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--copper-light)} .reel-thumb{position:relative;display:block;line-height:0} .reel-card img{width:170px;height:302px;object-fit:cover;display:block} .reel-card .rl-play{display:flex;position:absolute;top:9px;right:9px;width:28px;height:28px;border-radius:50%;background:rgba(9,20,30,.62);border:1px solid rgba(255,255,255,.5);align-items:center;justify-content:center;color:#fff;font-size:.62rem;padding-left:2px;line-height:1} .reel-card .rl-body{display:block;padding:11px 12px 13px;color:#fff} .reel-card .rl-topic{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-pale);margin-bottom:5px} .reel-card .rl-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-family:var(--f-head);font-size:.84rem;font-weight:700;line-height:1.3;margin-bottom:6px;min-height:3.2em} .reel-card .rl-plays{display:block;font-size:.7rem;color:rgba(255,255,255,.72);font-weight:600} .reels-foot{margin-top:14px;font-size:.78rem;color:var(--muted);line-height:1.6} .reels-foot a{color:var(--copper-deep);font-weight:700} .section-navy .reels-foot{color:rgba(255,255,255,.76)} .section-navy .reels-foot a{color:var(--copper-pale)} @media(prefers-reduced-motion:reduce){ .reels-marquee{overflow-x:auto;-webkit-overflow-scrolling:touch;-webkit-mask-image:none;mask-image:none} .reels-track{animation:none;width:auto} .reels-track [data-clone]{display:none} } /* ============================================================ 15. Utilities ============================================================ */ .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .mt-0{margin-top:0}.mt-s{margin-top:12px}.mt-m{margin-top:22px}.mt-l{margin-top:34px} .mb-0{margin-bottom:0}.mb-s{margin-bottom:12px}.mb-m{margin-bottom:22px} [hidden]{display:none!important} /* ============================================================ 16. Showcase components Built for the homepage (Batch 2) and reusable on about-us, hubs and any page that needs proof shown richly. Everything here is below the fold, so it lives in the deferred file. ============================================================ */ /* Scroll reveal, CSS only, zero JavaScript. Browsers without scroll-driven animation support simply show the content, so nothing is ever hidden by default and nothing can get stuck invisible. */ @keyframes revealUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} @supports (animation-timeline:view()){ @media(prefers-reduced-motion:no-preference){ .reveal{animation:revealUp linear both;animation-timeline:view();animation-range:entry 0% entry 36%} } } /* Institution names that drift sideways, two rows in opposite directions. Duplicated list is aria-hidden, same trick as the reels. */ .names-cap{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-pale);margin:22px 0 6px} .names-row{overflow:hidden;padding:4px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .names-track{display:flex;width:max-content;animation:namesDrift 90s linear infinite} .names-row.rev .names-track{animation-direction:reverse;animation-duration:100s} .names-row:hover .names-track{animation-play-state:paused} .names-track ul{display:flex;list-style:none;flex-shrink:0} .names-track li{display:flex;align-items:center;white-space:nowrap;font-family:var(--f-head);font-style:normal;font-weight:700;font-size:clamp(1.2rem,3.8vw,1.75rem);line-height:1.5;color:#fff;padding-right:22px} .names-track li::after{content:'';width:7px;height:7px;margin-left:22px;background:var(--copper-light);transform:rotate(45deg);flex-shrink:0} @keyframes namesDrift{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){ .names-row{-webkit-mask-image:none;mask-image:none} .names-track{animation:none;width:auto} .names-track ul{flex-wrap:wrap;row-gap:2px} .names-track ul[aria-hidden]{display:none} } /* Top-score tiles on a navy section */ .score-head{font-family:var(--f-head);font-size:clamp(1.05rem,2.6vw,1.25rem);font-weight:700;color:#fff;margin:38px 0 14px} .score-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} @media(min-width:960px){.score-grid{grid-template-columns:repeat(4,1fr);gap:14px}} .score{position:relative;border:1px solid var(--navy-light);border-radius:var(--r-md);padding:18px 15px 16px;background:var(--navy-deep);overflow:hidden} .score::before{content:'';position:absolute;left:15px;right:15px;top:0;height:2px;background:var(--copper-light)} .score .sc-exam{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--copper-pale)} .score .sc-num{display:block;font-family:var(--f-head);font-weight:900;font-size:clamp(1.55rem,5.6vw,2.3rem);line-height:1.08;color:#fff;margin:7px 0 4px;letter-spacing:-.01em} .score .sc-num small{font-family:var(--f-body);font-size:.78rem;font-weight:600;color:rgba(255,255,255,.72);letter-spacing:0;margin-left:3px} .score .sc-who{display:block;font-size:.76rem;color:rgba(255,255,255,.74);line-height:1.45} .score .sc-who b{display:block;color:#fff;font-weight:600;font-size:.82rem} .names-note{font-size:.76rem;color:rgba(255,255,255,.68);margin-top:18px;line-height:1.6;max-width:70ch} .names-note a{color:var(--copper-pale);font-weight:700} /* Bento services grid. One lead card spans two rows on desktop. */ .bento{display:grid;gap:14px;grid-template-columns:1fr} @media(min-width:760px){.bento{grid-template-columns:repeat(2,1fr)}.bento .bx-lead{grid-column:1/-1}} @media(min-width:1020px){.bento{grid-template-columns:1.2fr 1fr 1fr;gap:18px}.bento .bx-lead{grid-column:auto;grid-row:span 2}} .bx{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:26px 22px 22px;text-decoration:none;color:inherit;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s} a.bx:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--copper)} .bx .bx-no{font-family:var(--f-body);font-style:normal;font-weight:700;font-size:.74rem;letter-spacing:.14em;color:var(--copper-deep)} .bx h3{font-family:var(--f-head);font-size:clamp(1.2rem,3vw,1.5rem);font-weight:700;color:var(--navy);line-height:1.2} .bx p{font-size:.9rem;color:var(--text-soft);line-height:1.65} .bx ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:2px} .bx li{font-size:.74rem;font-weight:600;color:var(--navy);background:var(--cream);border:1px solid var(--border);border-radius:var(--r-pill);padding:5px 11px} .bx .bx-more{margin-top:auto;padding-top:12px;font-size:.86rem;font-weight:700;color:var(--copper-deep);display:inline-flex;align-items:center;gap:6px} .bx .bx-more::after{content:'\2192';transition:transform .2s} a.bx:hover .bx-more::after{transform:translateX(4px)} .bx-lead{background:var(--navy-deep);border-color:var(--navy)} .bx-lead h3{color:#fff;font-size:clamp(1.4rem,3.6vw,1.9rem)} .bx-lead p{color:rgba(255,255,255,.84);font-size:.95rem} .bx-lead .bx-no,.bx-lead .bx-more{color:var(--copper-pale)} .bx-lead li{background:var(--navy);border-color:var(--navy-light);color:#fff} .bx-cta{background:var(--cream-warm);border-style:dashed} .bx-cta .bx-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px} .bx-cta .btn{flex:1 1 auto;padding:12px 16px;font-size:.86rem} /* Exam tiles inside tabs */ .exam-grid{display:grid;grid-template-columns:1fr;gap:10px} @media(min-width:620px){.exam-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:980px){.exam-grid{grid-template-columns:repeat(3,1fr);gap:12px}} .exam-tile{display:flex;gap:14px;align-items:flex-start;padding:15px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--cream);text-decoration:none;color:inherit;transition:border-color .2s,background .2s,box-shadow .2s} .exam-tile:hover{border-color:var(--copper);background:var(--white);box-shadow:var(--shadow-md)} .exam-tile .ex-abbr{flex-shrink:0;min-width:60px;height:56px;padding:0 8px;border-radius:12px;background:var(--navy);color:#fff;font-family:var(--f-head);font-weight:900;font-size:.9rem;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.1} .exam-tile .ex-name{display:block;font-size:.93rem;font-weight:700;color:var(--navy);margin-bottom:2px;line-height:1.35} .exam-tile .ex-txt{display:block;font-size:.82rem;color:var(--text-soft);line-height:1.55} .exam-note{font-size:.82rem;color:var(--muted);margin-top:14px;line-height:1.6} /* Student result cards. A swipeable row on phones, a grid above 720px. */ .stu-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,64%);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 14px;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .stu-grid>*{scroll-snap-align:start} @media(min-width:720px){.stu-grid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(3,1fr);overflow:visible;padding:0}} @media(min-width:1000px){.stu-grid{grid-template-columns:repeat(4,1fr);gap:16px}} .stu{background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 16px 18px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px;transition:transform .2s,box-shadow .2s} .stu:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)} .stu img{width:84px;height:84px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--white),0 0 0 5px var(--copper-light);margin-bottom:8px} .stu .st-tag{font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-deep)} .stu .st-name{font-family:var(--f-head);font-weight:700;font-size:1.04rem;color:var(--navy);line-height:1.25} .stu .st-out{font-size:.8rem;color:var(--text-soft);line-height:1.5} .res-counts{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .res-counts a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:8px 15px;border-radius:var(--r-pill);background:var(--white);border:1px solid var(--border);text-decoration:none;color:var(--navy);font-size:.82rem;font-weight:600} .res-counts a b{font-family:var(--f-head);font-weight:900;font-size:1.02rem;color:var(--copper-deep)} .res-counts a:hover{border-color:var(--copper)} /* Founder cards */ .founders{display:grid;gap:16px;grid-template-columns:1fr} @media(min-width:840px){.founders{grid-template-columns:1fr 1fr;gap:20px}} .founder{background:var(--cream);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px 22px;display:grid;grid-template-columns:92px 1fr;gap:18px;align-items:start} .founder img{width:92px;height:92px;border-radius:50%;object-fit:cover;object-position:50% 18%;box-shadow:0 0 0 3px var(--cream),0 0 0 5px var(--copper-light)} .founder h3{font-family:var(--f-head);font-size:1.3rem;font-weight:700;color:var(--navy);line-height:1.2} .founder .fd-role{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-deep);margin:5px 0 10px} .founder p{font-size:.9rem;color:var(--text-soft);line-height:1.7} .founder .fd-links{display:flex;flex-wrap:wrap;gap:0 18px;margin-top:6px} .founder .fd-links a{display:inline-flex;align-items:center;min-height:44px;font-size:.84rem;font-weight:700;color:var(--copper-deep)} @media(max-width:440px){.founder{grid-template-columns:1fr}} /* Process steps in a row on wide screens */ @media(min-width:980px){.steps.steps-row{grid-template-columns:repeat(4,1fr)}.steps.steps-row li{padding:62px 20px 20px}.steps.steps-row li::before{top:20px}} /* Nav submenu (e.g. Test Prep's exam list). Click-to-expand only, never hover-only, so it works the same on mobile and desktop. Selectors are prefixed with .site-nav so they reliably out-specificity the existing .site-nav ul / .site-nav a rules above (both descendant selectors of equal or higher specificity than a bare .sub-nav class), which would otherwise force this nested