/* ===================================================================== About Applicaa — page-specific styles Loaded site-wide (global) but every rule is scoped under `.about-page`, so it is completely inert on any page that doesn't use that class. Component classes (.btn, .badge, .section-title, .orange-title, .lead, .h1/.h2, .page-container) come from the global design system; this file only adds the bespoke layout (hero, stats overflow band, story timeline, value cards) plus a private token bridge so the inline styles resolve. ===================================================================== */ /* ---- Private token bridge (scoped; cannot leak to other pages) -------- */ .about-page{ --ink-deep:#0F1A4F; --ink-royal:#263C91; --ink-soft:#4D5B7F; --ink-mute:#8893B0; --paper:#FFFFFF; --page-bg:#F4F5F9; --page-bg-soft:#F8F9FB; --rule:#E6E8EF; --secondary-100:#FFE7DD; --secondary-500:#EC634B; --secondary-600:#D44A33; --secondary-700:#B23D2A; --accent-coral:#CA4136; --info-blue:#3478F7; --info-blue-soft:#DFEAFB; --light-blue:#E9F1FE; --ok-green:#1A8A3F; --ok-green-soft:#DFF1E5; --light-yellow:#FEF7E7; --g-page:linear-gradient(180deg,#F4F5F9 0%,#FFFFFF 70%); --g-warm-cta:linear-gradient(180deg,#EC634B 0%,#D44A33 100%); --font-display:"Proxima Nova","Inter",system-ui,sans-serif; --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --t-h2:40px; --t-h3:24px; --t-body-l:18px; --t-body:16px; --t-small:14px; --lh-body:1.5; --s-xs:4px; --s-s:6px; --s-m:8px; --s-l:12px; --s-xl:16px; --s-2xl:24px; --s-3xl:32px; --s-4xl:40px; --s-5xl:48px; --s-6xl:64px; --s-7xl:80px; --s-8xl:96px; --s-9xl:128px; --r-input:8px; --r-card:16px; --r-card-l:24px; --r-card-xl:32px; --r-pill:999px; --shadow-card:0 8px 24px rgba(15,26,79,.08); --shadow-mock:0 16px 48px rgba(15,26,79,.14); --t-base:200ms; --easing:cubic-bezier(0.2,0.8,0.2,1); } /* ---- Hover / micro-interactions -------------------------------------- */ .about-page a.lnk{transition:color var(--t-base) var(--easing);} .about-page a.lnk:hover{color:var(--secondary-500);text-decoration:none;} .about-page .fwd{text-decoration:none;} .about-page .fwd svg{transition:transform var(--t-base) var(--easing);} .about-page .fwd:hover svg{transform:translateX(4px);} .about-page .vcard{transition:transform var(--t-base) var(--easing),box-shadow var(--t-base) var(--easing),border-color var(--t-base) var(--easing);} .about-page .vcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-mock);} .about-page .ph{transition:transform var(--t-base) var(--easing),box-shadow var(--t-base) var(--easing);} .about-page .founder:hover .ph{transform:translateY(-4px);box-shadow:var(--shadow-mock);} /* ---- Section titles in royal navy ------------------------------------ */ .about-page .section-title{color:var(--ink-royal);} /* ---- Stats band: white top, navy lower layer behind the white card --- */ .about-page.stats-section::after{ content:"";position:absolute;left:0;right:0;bottom:0;top:64px; background:var(--ink-royal);z-index:0; } /* ---- Evolution timeline section: navy bg, white text ----------------- */ .about-page.tl-section .section-title{color:#fff;} .about-page.tl-section .section-description{color:rgba(255,255,255,0.8);} .about-page.tl-section h3{color:#fff;} .about-page.tl-section [data-tl-step] p{color:rgba(255,255,255,0.8);} .about-page.tl-section .badge{color:#fff;border-color:rgba(255,255,255,0.5);} /* ===================================================================== Motion Default = everything visible (so the page is correct with no JS and under prefers-reduced-motion). The script adds `about-js` + `about-anim` to ; only then do reveals/timeline start hidden and get driven. ===================================================================== */ .about-page [data-reveal]{opacity:1;transform:none; transition:opacity .6s var(--easing),transform .6s var(--easing);} .about-page [data-tl-step]{opacity:1;transform:none; transition:opacity .12s linear,transform .12s linear;} .about-page [data-tl-fill]{transform-origin:top;transform:scaleY(1);} .about-page [data-tl-dot]{background:var(--secondary-500);border:2px solid var(--secondary-500); box-shadow:0 0 0 4px rgba(255,255,255,0.12);box-sizing:border-box; transition:background var(--t-base) var(--easing),border-color var(--t-base) var(--easing),box-shadow var(--t-base) var(--easing);} html.about-js.about-anim .about-page [data-reveal]{opacity:0;transform:translateY(28px);} html.about-js.about-anim .about-page [data-reveal].is-in{opacity:1;transform:none;} html.about-js.about-anim .about-page [data-tl-step]{opacity:0;transform:translateY(20%);} html.about-js.about-anim .about-page [data-tl-fill]{transform:scaleY(0);} html.about-js.about-anim .about-page [data-tl-dot]{background:var(--ink-royal); border-color:rgba(255,255,255,0.4);box-shadow:none;} /* ---- Responsive ------------------------------------------------------ */ @media (max-width:992px){ .about-page .hero-grid{grid-template-columns:1fr !important;gap:var(--s-4xl) !important;} .about-page .values-grid,.about-page .founders-grid{grid-template-columns:1fr 1fr !important;} } @media (max-width:768px){ .about-page .stats-grid{grid-template-columns:1fr 1fr !important;gap:var(--s-3xl) var(--s-m) !important;} .about-page .stats-grid > div{border-right:none !important;} } @media (max-width:640px){ .about-page .values-grid,.about-page .founders-grid{grid-template-columns:1fr !important;} }