/* ========================================================================== SUN ASSOCIATES — Madurai Debt Collection • Recovery • Repossession • Enforcement • Legal • Finance ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS -------------------------------------------------------------------------- */ :root { --sa-yellow: #FFD93D; --sa-amber: #FFB300; --sa-orange: #FF8C42; --sa-tangerine: #FF6B1A; --sa-red: #E63946; --sa-crimson: #C1272D; --sa-deep: #8B1A1F; --sa-ink: #1A0E0A; --sa-coal: #2B1810; --sa-slate: #5A3E35; --sa-cream: #FFF7E6; --sa-paper: #FFF9F2; --sa-white: #ffffff; --sa-line: rgba(26,14,10,0.08); --sa-grad-sun: linear-gradient(135deg, #FFD93D 0%, #FF8C42 45%, #E63946 100%); --sa-grad-warm: linear-gradient(135deg, #FF6B1A 0%, #C1272D 100%); --sa-grad-dark: linear-gradient(180deg, #2B1810 0%, #1A0E0A 100%); --sa-grad-glow: radial-gradient(circle at 50% 50%, #FFD93D 0%, #FF8C42 30%, #C1272D 60%, transparent 80%); --sa-font-display: 'Playfair Display', Georgia, serif; --sa-font-body: 'Outfit', system-ui, sans-serif; --sa-font-stamp: 'Bebas Neue', Impact, sans-serif; --sa-ease: cubic-bezier(.2,.8,.2,1); --sa-ease-out:cubic-bezier(.2,.6,.3,1); --sa-shadow-sm: 0 2px 10px rgba(193,39,45,.08); --sa-shadow-md: 0 10px 30px rgba(193,39,45,.12); --sa-shadow-lg: 0 25px 60px rgba(193,39,45,.18); --sa-shadow-sun:0 20px 60px rgba(255,140,66,.45); } /* -------------------------------------------------------------------------- 2. BASE -------------------------------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0; font-family:var(--sa-font-body); font-weight:400; color:var(--sa-ink); background:var(--sa-paper); line-height:1.65; overflow-x:hidden; } img,svg{max-width:100%;display:block} a{color:inherit;text-decoration:none;transition:color .3s var(--sa-ease)} a:hover{color:var(--sa-crimson)} h1,h2,h3,h4,h5,h6{font-family:var(--sa-font-display);font-weight:700;color:var(--sa-coal);margin:0 0 .6em;line-height:1.2} p{margin:0 0 1em} ::selection{background:var(--sa-tangerine);color:#fff} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--sa-paper)} ::-webkit-scrollbar-thumb{background:var(--sa-grad-warm);border-radius:10px;border:2px solid var(--sa-paper)} /* -------------------------------------------------------------------------- 3. REVEAL SYSTEM (CRITICAL FIX — elements are visible by default, JS adds .is-out to hide them briefly then .is-in to reveal. If JS never runs, content shows!) -------------------------------------------------------------------------- */ /* Default: fully visible — this is the BASELINE state */ [data-reveal]{ opacity:1; transform:none; transition:opacity .9s var(--sa-ease), transform .9s var(--sa-ease); } /* JS (if successful) adds .js-ready to , which ACTIVATES the hide-first behaviour */ html.js-ready [data-reveal]{opacity:0;transform:translateY(28px)} /* When element enters viewport, JS adds .is-in → revealed */ html.js-ready [data-reveal].is-in{opacity:1;transform:none} /* Hard safety: if anything goes wrong and content stays hidden 4+ seconds after load, force visible */ html.sa-force-show [data-reveal]{opacity:1 !important;transform:none !important} /* Reduced motion: skip animation entirely */ @media (prefers-reduced-motion: reduce){ [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important} *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important} } /* -------------------------------------------------------------------------- 4. UTILITIES -------------------------------------------------------------------------- */ .sa-hl{ background:var(--sa-grad-sun); -webkit-background-clip:text; background-clip:text; color:transparent; font-style:italic; } .sa-dash{display:inline-block;width:28px;height:2px;background:var(--sa-tangerine);vertical-align:middle;margin:0 10px} /* -------------------------------------------------------------------------- 5. BUTTONS -------------------------------------------------------------------------- */ .sa-btn{ display:inline-flex;align-items:center;justify-content:center;gap:.6rem; padding:.75rem 1.5rem; font-family:var(--sa-font-body);font-weight:600;font-size:.95rem;letter-spacing:.02em; border:none;border-radius:50px;cursor:pointer;position:relative;overflow:hidden; transition:all .4s var(--sa-ease);white-space:nowrap;text-transform:uppercase; } .sa-btn--lg{padding:1rem 2rem;font-size:1rem} .sa-btn--sun{background:var(--sa-grad-warm);color:#fff;box-shadow:var(--sa-shadow-sun)} .sa-btn--sun:hover{transform:translateY(-3px);box-shadow:0 25px 60px rgba(255,140,66,.55);color:#fff} .sa-btn--sun::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#FFD93D 0%, #FF8C42 100%);opacity:0;transition:opacity .4s} .sa-btn--sun:hover::before{opacity:1} .sa-btn--sun > *{position:relative;z-index:1} .sa-btn--ghost{background:transparent;color:var(--sa-ink);border:2px solid var(--sa-ink)} .sa-btn--ghost:hover{background:var(--sa-ink);color:#fff} .sa-btn--dark{background:var(--sa-ink);color:#fff} .sa-btn--dark:hover{background:var(--sa-crimson);color:#fff;transform:translateY(-2px)} /* -------------------------------------------------------------------------- 6. LOADER -------------------------------------------------------------------------- */ .sa-loader{ position:fixed;inset:0;z-index:9999; background:var(--sa-grad-dark); display:flex;flex-direction:column;align-items:center;justify-content:center; gap:2rem; transition:opacity .6s var(--sa-ease), visibility .6s; } .sa-loader.is-hidden{opacity:0;visibility:hidden;pointer-events:none} .sa-loader__sun{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center} .sa-loader__core{ width:60px;height:60px;border-radius:50%; background:var(--sa-grad-sun); box-shadow:0 0 60px var(--sa-orange); animation:sa-pulse-sun 1.4s ease-in-out infinite; } .sa-loader__ring{ position:absolute;inset:0;border-radius:50%; border:2px solid transparent; border-top-color:var(--sa-yellow);border-right-color:var(--sa-orange); animation:sa-spin 1.5s linear infinite; } .sa-loader__rays{position:absolute;inset:0;animation:sa-spin 12s linear infinite} .sa-loader__rays span{ position:absolute;left:50%;top:50%; width:2px;height:20px;background:var(--sa-yellow); transform-origin:center -40px;border-radius:2px; } .sa-loader__rays span:nth-child(1){transform:translate(-50%,-50%) rotate(0deg)} .sa-loader__rays span:nth-child(2){transform:translate(-50%,-50%) rotate(45deg)} .sa-loader__rays span:nth-child(3){transform:translate(-50%,-50%) rotate(90deg)} .sa-loader__rays span:nth-child(4){transform:translate(-50%,-50%) rotate(135deg)} .sa-loader__rays span:nth-child(5){transform:translate(-50%,-50%) rotate(180deg)} .sa-loader__rays span:nth-child(6){transform:translate(-50%,-50%) rotate(225deg)} .sa-loader__rays span:nth-child(7){transform:translate(-50%,-50%) rotate(270deg)} .sa-loader__rays span:nth-child(8){transform:translate(-50%,-50%) rotate(315deg)} .sa-loader__text{ font-family:var(--sa-font-stamp); font-size:1.8rem;letter-spacing:.4em; color:#fff;display:flex; } .sa-loader__text span{ display:inline-block; animation:sa-jump 1.2s ease-in-out infinite; background:var(--sa-grad-sun); -webkit-background-clip:text;background-clip:text;color:transparent; } .sa-loader__text span:nth-child(1){animation-delay:0s} .sa-loader__text span:nth-child(2){animation-delay:.06s} .sa-loader__text span:nth-child(3){animation-delay:.12s} .sa-loader__text span:nth-child(5){animation-delay:.18s} .sa-loader__text span:nth-child(6){animation-delay:.24s} .sa-loader__text span:nth-child(7){animation-delay:.30s} .sa-loader__text span:nth-child(8){animation-delay:.36s} .sa-loader__text span:nth-child(9){animation-delay:.42s} .sa-loader__text span:nth-child(10){animation-delay:.48s} .sa-loader__text span:nth-child(11){animation-delay:.54s} .sa-loader__text span:nth-child(12){animation-delay:.60s} .sa-loader__text span:nth-child(13){animation-delay:.66s} .sa-loader__text span:nth-child(14){animation-delay:.72s} .sa-loader__bar{ width:220px;height:3px;border-radius:2px; background:rgba(255,255,255,.12);overflow:hidden; } .sa-loader__progress{ width:0;height:100%; background:var(--sa-grad-sun); animation:sa-load 1.4s ease-in-out forwards; } @keyframes sa-spin{to{transform:rotate(360deg)}} @keyframes sa-pulse-sun{ 0%,100%{transform:scale(1);box-shadow:0 0 60px var(--sa-orange)} 50%{transform:scale(1.1);box-shadow:0 0 90px var(--sa-yellow)} } @keyframes sa-jump{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } @keyframes sa-load{to{width:100%}} /* -------------------------------------------------------------------------- 7. TOP BAR -------------------------------------------------------------------------- */ .sa-topbar{ background:var(--sa-grad-dark); color:#fff9f2;font-size:.85rem;padding:.6rem 0; border-bottom:1px solid rgba(255,217,61,.12); } .sa-topbar i{color:var(--sa-yellow);margin-right:.4rem} .sa-topbar a{color:#fff9f2} .sa-topbar a:hover{color:var(--sa-yellow)} /* -------------------------------------------------------------------------- 8. NAVBAR -------------------------------------------------------------------------- */ .sa-navbar{ top:42px; background:rgba(255,249,242,.92); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); transition:all .4s var(--sa-ease); padding:.8rem 0; border-bottom:1px solid transparent; } .sa-navbar.scrolled{ top:0; background:rgba(255,249,242,.98); box-shadow:var(--sa-shadow-md); border-bottom-color:var(--sa-line); } @media (max-width: 991.98px){.sa-navbar{top:0}} .sa-brand{display:flex;align-items:center;gap:.8rem;text-decoration:none} .sa-brand__mark{ width:52px;height:52px;border-radius:50%; background:radial-gradient(circle at 30% 30%, #FFF7E6, #FFD93D 40%, #FF8C42 80%); padding:8px;display:flex;align-items:center;justify-content:center; box-shadow:0 8px 24px rgba(255,107,26,.35); animation:sa-rotate 20s linear infinite;flex-shrink:0; } .sa-brand__text{display:flex;flex-direction:column;line-height:1} .sa-brand__text strong{ font-family:var(--sa-font-stamp); font-size:1.6rem;letter-spacing:.1em; background:var(--sa-grad-warm); -webkit-background-clip:text;background-clip:text;color:transparent; } .sa-brand__text em{ font-style:normal;font-size:.7rem; color:var(--sa-slate);letter-spacing:.15em;text-transform:uppercase; margin-top:2px; } @keyframes sa-rotate{to{transform:rotate(360deg)}} .sa-navbar .nav-link{ font-weight:500;color:var(--sa-ink); padding:.5rem 1rem !important;position:relative;transition:color .3s; } .sa-navbar .nav-link::after{ content:'';position:absolute;left:50%;bottom:4px; width:0;height:2px;background:var(--sa-grad-warm); transform:translateX(-50%);transition:width .3s var(--sa-ease); } .sa-navbar .nav-link:hover::after, .sa-navbar .nav-link.active::after{width:60%} .sa-navbar .nav-link:hover, .sa-navbar .nav-link.active{color:var(--sa-crimson)} .navbar-toggler{border:none;padding:.5rem} .navbar-toggler:focus{box-shadow:none} .sa-toggler-bar{ display:block;width:26px;height:3px;background:var(--sa-crimson); margin:5px 0;border-radius:3px;transition:.3s; } .navbar-toggler[aria-expanded="true"] .sa-toggler-bar:nth-child(1){transform:translateY(8px) rotate(45deg)} .navbar-toggler[aria-expanded="true"] .sa-toggler-bar:nth-child(2){opacity:0} .navbar-toggler[aria-expanded="true"] .sa-toggler-bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* -------------------------------------------------------------------------- 9. HERO -------------------------------------------------------------------------- */ .sa-hero{ position:relative;overflow:hidden; background: radial-gradient(ellipse at top right, rgba(255,140,66,.18), transparent 50%), radial-gradient(ellipse at bottom left, rgba(255,217,61,.22), transparent 55%), linear-gradient(180deg, #FFF9F2 0%, #FFE8CC 100%); padding-top:140px;padding-bottom:80px; min-height:100vh; } .sa-hero__noise{ position:absolute;inset:0;pointer-events:none;opacity:.4; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3CfeColorMatrix values='0 0 0 0 0.8 0 0 0 0 0.5 0 0 0 0 0.2 0 0 0 0.08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .sa-hero__sun{ position:absolute;top:-140px;right:-140px; width:520px;height:520px;pointer-events:none; } .sa-hero__sun-core{ position:absolute;inset:20%;border-radius:50%; background:radial-gradient(circle at 40% 40%, #FFF7E6, #FFD93D 30%, #FF8C42 65%, #C1272D 100%); box-shadow:0 0 120px rgba(255,140,66,.5), inset 0 0 80px rgba(255,255,255,.3); animation:sa-pulse-sun 4s ease-in-out infinite; } .sa-hero__sun-glow{ position:absolute;inset:0;border-radius:50%; background:radial-gradient(circle, rgba(255,217,61,.35), transparent 60%); animation:sa-pulse-sun 6s ease-in-out infinite reverse; } .sa-hero__rays{position:absolute;inset:0;animation:sa-spin 60s linear infinite} .sa-hero__rays span{ position:absolute;left:50%;top:50%; width:3px;height:90px; background:linear-gradient(180deg, rgba(255,140,66,.7), transparent); transform-origin:center -210px;border-radius:3px; } .sa-hero__rays span:nth-child(1){transform:translate(-50%,-50%) rotate(0deg)} .sa-hero__rays span:nth-child(2){transform:translate(-50%,-50%) rotate(30deg)} .sa-hero__rays span:nth-child(3){transform:translate(-50%,-50%) rotate(60deg)} .sa-hero__rays span:nth-child(4){transform:translate(-50%,-50%) rotate(90deg)} .sa-hero__rays span:nth-child(5){transform:translate(-50%,-50%) rotate(120deg)} .sa-hero__rays span:nth-child(6){transform:translate(-50%,-50%) rotate(150deg)} .sa-hero__rays span:nth-child(7){transform:translate(-50%,-50%) rotate(180deg)} .sa-hero__rays span:nth-child(8){transform:translate(-50%,-50%) rotate(210deg)} .sa-hero__rays span:nth-child(9){transform:translate(-50%,-50%) rotate(240deg)} .sa-hero__rays span:nth-child(10){transform:translate(-50%,-50%) rotate(270deg)} .sa-hero__rays span:nth-child(11){transform:translate(-50%,-50%) rotate(300deg)} .sa-hero__rays span:nth-child(12){transform:translate(-50%,-50%) rotate(330deg)} .sa-hero__eyebrow{ display:inline-flex;align-items:center;gap:.6rem; padding:.4rem 1rem;border-radius:50px; background:rgba(193,39,45,.08); border:1px solid rgba(193,39,45,.2); color:var(--sa-crimson);font-weight:500;font-size:.85rem; margin-bottom:1.5rem; } .sa-pulse{ width:8px;height:8px;border-radius:50%; background:var(--sa-red); box-shadow:0 0 0 rgba(230,57,70,.6); animation:sa-pulse 2s infinite; } @keyframes sa-pulse{ 0%{box-shadow:0 0 0 0 rgba(230,57,70,.6)} 70%{box-shadow:0 0 0 12px rgba(230,57,70,0)} 100%{box-shadow:0 0 0 0 rgba(230,57,70,0)} } .sa-hero__title{ font-size:clamp(2.2rem, 5.2vw, 4.6rem); font-weight:800;letter-spacing:-.02em; color:var(--sa-coal);margin-bottom:1.2rem; } .sa-hero__title-big{ font-family:var(--sa-font-display); font-style:italic;font-weight:900; background:var(--sa-grad-warm); -webkit-background-clip:text;background-clip:text;color:transparent; display:inline-block; } .sa-hero__sub{font-size:1.1rem;color:var(--sa-slate);max-width:580px;margin-bottom:2rem} .sa-hero__cta{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2.5rem} .sa-hero__trust{display:flex;flex-wrap:wrap;gap:1.8rem;padding-top:1.5rem;border-top:1px solid var(--sa-line)} .sa-trust-item{display:flex;align-items:center;gap:.6rem;font-size:.9rem;font-weight:500;color:var(--sa-coal)} .sa-trust-item i{ width:32px;height:32px;border-radius:50%; background:var(--sa-grad-sun);color:#fff; display:inline-flex;align-items:center;justify-content:center;font-size:.85rem; } .sa-hero__card{ position:relative;background:#fff;border-radius:24px;padding:2.2rem; box-shadow:var(--sa-shadow-lg); transition:transform .6s var(--sa-ease); } .sa-hero__card:hover{transform:translateY(-6px)} .sa-hero__card::before{ content:'';position:absolute;inset:-2px; background:var(--sa-grad-sun);border-radius:24px;z-index:-1; opacity:.7;filter:blur(20px); } .sa-hero__card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem} .sa-hero__card-label{font-family:var(--sa-font-stamp);font-size:.85rem;letter-spacing:.2em;color:var(--sa-slate)} .sa-hero__card-stamp{ font-family:var(--sa-font-stamp);font-size:.75rem;letter-spacing:.2em; color:var(--sa-crimson);border:2px dashed var(--sa-crimson); padding:.25rem .6rem;border-radius:4px;transform:rotate(-6deg); } .sa-hero__card h3{font-size:1.4rem;margin-bottom:.4rem;color:var(--sa-coal)} .sa-hero__card-list{list-style:none;padding:0;margin:1.2rem 0} .sa-hero__card-list li{padding:.5rem 0;color:var(--sa-slate);font-size:.95rem;border-bottom:1px dashed var(--sa-line)} .sa-hero__card-list li:last-child{border-bottom:none} .sa-hero__card-list i{color:var(--sa-tangerine);margin-right:.6rem} .sa-hero__card-foot{display:flex;align-items:center;gap:1rem;margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid var(--sa-line)} .sa-hero__card-foot i{ width:44px;height:44px;border-radius:50%; background:var(--sa-grad-warm);color:#fff; display:flex;align-items:center;justify-content:center;font-size:1.1rem; } .sa-hero__card-foot small{display:block;font-size:.75rem;color:var(--sa-slate);text-transform:uppercase;letter-spacing:.1em} .sa-hero__card-foot a{font-weight:700;color:var(--sa-coal);font-size:1.05rem} .sa-hero__scroll{ position:absolute;bottom:20px;left:50%; transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:.5rem; color:var(--sa-slate);font-size:.75rem;text-transform:uppercase;letter-spacing:.2em; z-index:2; } .sa-hero__scroll span{ display:block;width:2px;height:40px; background:linear-gradient(180deg,var(--sa-tangerine), transparent); animation:sa-drip 2s ease-in-out infinite; } @keyframes sa-drip{ 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} } /* -------------------------------------------------------------------------- 10. MARQUEE -------------------------------------------------------------------------- */ .sa-marquee{ background:var(--sa-grad-warm); color:#fff;padding:1rem 0;overflow:hidden; border-top:3px solid var(--sa-yellow); border-bottom:3px solid var(--sa-yellow); } .sa-marquee__track{ display:flex;gap:2rem;white-space:nowrap; animation:sa-marquee 30s linear infinite; font-family:var(--sa-font-display); font-style:italic;font-size:1.6rem;font-weight:700; align-items:center; } .sa-marquee__track i{color:var(--sa-yellow);font-style:normal;font-size:1rem} @keyframes sa-marquee{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* -------------------------------------------------------------------------- 11. SECTIONS -------------------------------------------------------------------------- */ .sa-section{padding:100px 0;position:relative} .sa-section__eyebrow{ display:inline-flex;align-items:center; color:var(--sa-crimson); font-weight:600;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase; margin-bottom:1rem; } .sa-section__eyebrow--center{justify-content:center;display:flex} .sa-section__eyebrow--light{color:var(--sa-yellow)} .sa-section__title{ font-size:clamp(1.8rem, 3.4vw, 2.8rem); font-weight:700;margin-bottom:1rem;letter-spacing:-.01em; } .sa-section__title--light{color:#fff} .sa-section__lead{font-size:1.1rem;color:var(--sa-slate);max-width:720px;margin-bottom:1rem} .sa-section__lead--light{color:rgba(255,249,242,.8);margin-left:auto;margin-right:auto} .sa-section__body{color:var(--sa-slate);margin-bottom:1rem} /* -------------------------------------------------------------------------- 12. ABOUT -------------------------------------------------------------------------- */ .sa-about__visual{ position:relative;aspect-ratio:1/1;max-width:440px;margin:0 auto; display:flex;align-items:center;justify-content:center; } .sa-about__circle{ width:85%;aspect-ratio:1/1;border-radius:50%; background:radial-gradient(circle at 40% 40%, #FFF7E6, #FFE8CC 50%, #FFC48A 100%); display:flex;align-items:center;justify-content:center; position:relative; box-shadow:0 30px 80px rgba(255,107,26,.25), inset 0 0 60px rgba(255,217,61,.4); } .sa-about__circle::before{ content:'';position:absolute;inset:-15px; border:2px dashed var(--sa-orange); border-radius:50%;opacity:.4; animation:sa-spin 40s linear infinite; } .sa-about__circle svg{width:70%;height:70%;animation:sa-float 6s ease-in-out infinite} @keyframes sa-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}} .sa-about__stat{ position:absolute; background:#fff;border-radius:16px;padding:1rem 1.3rem; box-shadow:var(--sa-shadow-md); display:flex;align-items:baseline;gap:.5rem; border:1px solid var(--sa-line); } .sa-about__stat strong{ font-family:var(--sa-font-display);font-weight:800; font-size:1.8rem;color:var(--sa-crimson);line-height:1; } .sa-about__stat span{font-size:.8rem;color:var(--sa-slate);font-weight:500} .sa-about__stat--1{top:5%;right:-8%} .sa-about__stat--2{bottom:10%;left:-10%} .sa-about__stat--3{bottom:20%;right:-5%} .sa-feat{ display:flex;gap:1rem;padding:1rem; background:#fff;border-radius:14px; border:1px solid var(--sa-line); transition:all .4s var(--sa-ease);height:100%; } .sa-feat:hover{transform:translateY(-4px);box-shadow:var(--sa-shadow-md);border-color:transparent} .sa-feat__icon{ flex:0 0 44px;width:44px;height:44px;border-radius:12px; background:var(--sa-grad-sun);color:#fff; display:flex;align-items:center;justify-content:center;font-size:1.1rem; } .sa-feat h5{font-size:1rem;margin-bottom:.25rem} .sa-feat p{font-size:.85rem;color:var(--sa-slate);margin:0} /* -------------------------------------------------------------------------- 13. SERVICES -------------------------------------------------------------------------- */ .sa-services{ background:linear-gradient(180deg, var(--sa-paper) 0%, #FFE8CC 100%); overflow:hidden; } .sa-services__bg{ position:absolute;top:-200px;left:-200px; width:500px;height:500px;border-radius:50%; background:radial-gradient(circle, rgba(255,217,61,.3), transparent 70%); pointer-events:none; } .sa-service{ position:relative; background:#fff;border-radius:20px;padding:2rem 1.8rem;height:100%; overflow:hidden; border:1px solid var(--sa-line); transition:all .5s var(--sa-ease); } .sa-service::before{ content:'';position:absolute;top:0;left:0;right:0; height:4px;background:var(--sa-grad-warm); transform:scaleX(0);transform-origin:left; transition:transform .5s var(--sa-ease); } .sa-service::after{ content:'';position:absolute;bottom:-40px;right:-40px; width:140px;height:140px;border-radius:50%; background:radial-gradient(circle, rgba(255,217,61,.3), transparent 70%); opacity:0;transition:opacity .5s;pointer-events:none; } .sa-service:hover{transform:translateY(-10px);box-shadow:var(--sa-shadow-lg);border-color:transparent} .sa-service:hover::before{transform:scaleX(1)} .sa-service:hover::after{opacity:1} .sa-service:hover .sa-service__icon{ background:var(--sa-grad-warm);color:#fff; transform:rotate(-8deg) scale(1.05); } .sa-service--featured{ background:linear-gradient(135deg, #FFF7E6 0%, #FFE8CC 100%); border-color:var(--sa-orange); } .sa-service--featured::before{transform:scaleX(1)} .sa-service__num{ position:absolute;top:1rem;right:1.5rem; font-family:var(--sa-font-display);font-weight:900;font-style:italic; font-size:3.5rem;color:transparent; -webkit-text-stroke:1px var(--sa-orange); opacity:.3;line-height:1;pointer-events:none; } .sa-service__icon{ width:64px;height:64px;border-radius:16px; background:rgba(255,140,66,.15);color:var(--sa-tangerine); display:flex;align-items:center;justify-content:center; font-size:1.6rem;margin-bottom:1.2rem; transition:all .5s var(--sa-ease); } .sa-service h3{font-size:1.3rem;margin-bottom:.6rem;position:relative;z-index:1;color:var(--sa-coal)} .sa-service > p{font-size:.9rem;color:var(--sa-slate);margin-bottom:1rem;position:relative;z-index:1} .sa-service ul{list-style:none;padding:0;margin:0 0 1.2rem;position:relative;z-index:1} .sa-service ul li{font-size:.85rem;color:var(--sa-coal);padding:.3rem 0} .sa-service ul li i{color:var(--sa-tangerine);margin-right:.5rem;font-size:.75rem} .sa-service__link{ display:inline-flex;align-items:center;gap:.4rem; font-weight:600;font-size:.85rem; color:var(--sa-crimson);text-transform:uppercase;letter-spacing:.1em; position:relative;z-index:1; } .sa-service__link i{transition:transform .3s} .sa-service__link:hover i{transform:translateX(4px)} /* -------------------------------------------------------------------------- 14. PROCESS -------------------------------------------------------------------------- */ .sa-process{ background:var(--sa-grad-dark); color:#fff;position:relative;overflow:hidden; } .sa-process::before{ content:'';position:absolute;top:-200px;right:-200px; width:500px;height:500px;border-radius:50%; background:radial-gradient(circle, rgba(255,140,66,.2), transparent 70%); pointer-events:none; } .sa-process::after{ content:'';position:absolute;bottom:-200px;left:-200px; width:500px;height:500px;border-radius:50%; background:radial-gradient(circle, rgba(255,217,61,.15), transparent 70%); pointer-events:none; } .sa-process__grid{position:relative} .sa-step{ position:relative;padding:2rem 1.5rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,217,61,.15); border-radius:20px;backdrop-filter:blur(10px); height:100%;transition:all .5s var(--sa-ease); } .sa-step:hover{background:rgba(255,255,255,.08);border-color:var(--sa-yellow);transform:translateY(-6px)} .sa-step:hover .sa-step__icon{background:var(--sa-grad-sun);color:var(--sa-coal);transform:rotate(10deg)} .sa-step__num{ font-family:var(--sa-font-display);font-style:italic;font-weight:900; font-size:3rem; background:var(--sa-grad-sun); -webkit-background-clip:text;background-clip:text;color:transparent; line-height:1;margin-bottom:1rem; } .sa-step__icon{ width:56px;height:56px;border-radius:50%; background:rgba(255,217,61,.12);color:var(--sa-yellow); display:flex;align-items:center;justify-content:center; font-size:1.4rem;margin-bottom:1rem; transition:all .4s var(--sa-ease); } .sa-step h4{color:#fff;font-size:1.2rem;margin-bottom:.5rem} .sa-step p{color:rgba(255,249,242,.7);font-size:.9rem;margin:0} /* -------------------------------------------------------------------------- 15. WHY US -------------------------------------------------------------------------- */ .sa-why{background:var(--sa-paper)} .sa-why__list{margin-top:1.5rem;display:flex;flex-direction:column;gap:1rem} .sa-why__item{display:flex;gap:1rem;align-items:flex-start} .sa-why__icon{ flex:0 0 40px;width:40px;height:40px;border-radius:50%; background:var(--sa-grad-sun);color:#fff; display:flex;align-items:center;justify-content:center;font-size:.9rem; box-shadow:0 6px 20px rgba(255,140,66,.35); } .sa-why__item h5{font-size:1.05rem;margin-bottom:.25rem} .sa-why__item p{font-size:.9rem;color:var(--sa-slate);margin:0} .sa-why__visual{ position:relative;display:grid; grid-template-columns:1fr 1fr;gap:1rem; max-width:520px;margin:0 auto; } .sa-why__card{ background:#fff;border-radius:18px;padding:1.5rem; border:1px solid var(--sa-line); transition:all .4s var(--sa-ease); position:relative;overflow:hidden; } .sa-why__card i{ font-size:1.6rem; background:var(--sa-grad-warm); -webkit-background-clip:text;background-clip:text;color:transparent; margin-bottom:.8rem;display:inline-block; } .sa-why__card h5{font-size:1rem;margin-bottom:.25rem} .sa-why__card span{font-size:.8rem;color:var(--sa-slate)} .sa-why__card:hover{transform:translateY(-6px);box-shadow:var(--sa-shadow-md);border-color:transparent} .sa-why__card--1{transform:translateY(20px)} .sa-why__card--2{transform:translateY(-20px)} .sa-why__card--3{transform:translateY(-20px)} .sa-why__card--4{transform:translateY(20px)} .sa-why__card--1:hover,.sa-why__card--4:hover{transform:translateY(14px)} .sa-why__card--2:hover,.sa-why__card--3:hover{transform:translateY(-26px)} .sa-why__center{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:120px;height:120px;border-radius:50%; background:var(--sa-grad-sun); display:flex;align-items:center;justify-content:center; box-shadow:0 20px 50px rgba(255,140,66,.4); animation:sa-pulse-sun 3s ease-in-out infinite; z-index:2; } .sa-why__center div{text-align:center;color:#fff} .sa-why__center strong{display:block;font-family:var(--sa-font-display);font-size:1.6rem;line-height:1} .sa-why__center span{font-size:.75rem;letter-spacing:.15em;text-transform:uppercase} /* -------------------------------------------------------------------------- 16. CTA BANNER -------------------------------------------------------------------------- */ .sa-cta{padding:40px 0} .sa-cta__box{ position:relative;overflow:hidden; background:var(--sa-grad-warm); border-radius:28px;padding:3rem; display:flex;justify-content:space-between;align-items:center;gap:2rem; flex-wrap:wrap;box-shadow:var(--sa-shadow-lg); } .sa-cta__box::before{ content:'';position:absolute;top:-50px;right:-50px; width:200px;height:200px;border-radius:50%; background:radial-gradient(circle, var(--sa-yellow), transparent 70%); opacity:.4; } .sa-cta__box::after{ content:'';position:absolute;bottom:-80px;left:20%; width:200px;height:200px;border-radius:50%; background:radial-gradient(circle, var(--sa-yellow), transparent 70%); opacity:.2; } .sa-cta__left{color:#fff;position:relative;z-index:1;flex:1;min-width:280px} .sa-cta__left h2{color:#fff;margin:0 0 .4rem;font-size:clamp(1.6rem, 3vw, 2.2rem)} .sa-cta__left h2 span{color:var(--sa-yellow);font-style:italic} .sa-cta__left p{color:rgba(255,255,255,.9);margin:0;font-size:1.05rem} .sa-cta__right{display:flex;flex-wrap:wrap;gap:1rem;position:relative;z-index:1} /* -------------------------------------------------------------------------- 17. CONTACT -------------------------------------------------------------------------- */ .sa-contact__info{ background:var(--sa-grad-dark); color:#fff9f2;border-radius:24px;padding:2.5rem; height:100%;position:relative;overflow:hidden; } .sa-contact__info::before{ content:'';position:absolute;top:-80px;right:-80px; width:250px;height:250px;border-radius:50%; background:radial-gradient(circle, rgba(255,140,66,.4), transparent 70%); } .sa-contact__info h3{color:#fff;font-size:1.6rem;margin-bottom:.4rem;position:relative} .sa-contact__info-sub{color:rgba(255,249,242,.7);margin-bottom:2rem;position:relative} .sa-contact__item{display:flex;gap:1rem;margin-bottom:1.6rem;position:relative} .sa-contact__icon{ flex:0 0 44px;width:44px;height:44px;border-radius:12px; background:var(--sa-grad-sun);color:var(--sa-coal); display:flex;align-items:center;justify-content:center;font-size:1.05rem; } .sa-contact__item h5{color:#fff;font-size:1rem;margin-bottom:.3rem} .sa-contact__item p{color:rgba(255,249,242,.75);font-size:.9rem;margin:0;line-height:1.6} .sa-contact__item a{color:var(--sa-yellow)} .sa-contact__item a:hover{color:#fff} .sa-contact__social{display:flex;gap:.8rem;margin-top:1rem;position:relative} .sa-contact__social a{ width:40px;height:40px;border-radius:50%; background:rgba(255,255,255,.08); display:flex;align-items:center;justify-content:center; color:#fff9f2;transition:all .3s; } .sa-contact__social a:hover{background:var(--sa-grad-sun);color:var(--sa-coal);transform:translateY(-3px)} .sa-contact__form{ background:#fff;border-radius:24px;padding:2.5rem; box-shadow:var(--sa-shadow-md);border:1px solid var(--sa-line); } .sa-contact__form label{ display:block;font-weight:500;font-size:.85rem; color:var(--sa-coal);margin-bottom:.4rem;letter-spacing:.02em; } .sa-contact__form input, .sa-contact__form select, .sa-contact__form textarea{ width:100%;padding:.85rem 1rem; background:var(--sa-paper); border:1px solid var(--sa-line);border-radius:12px; font-family:var(--sa-font-body);font-size:.95rem;color:var(--sa-ink); transition:all .3s; } .sa-contact__form input:focus, .sa-contact__form select:focus, .sa-contact__form textarea:focus{ outline:none;border-color:var(--sa-tangerine);background:#fff; box-shadow:0 0 0 4px rgba(255,140,66,.1); } .sa-contact__note{display:block;text-align:center;color:var(--sa-slate);font-size:.8rem;margin-top:.8rem} .sa-contact__map{ border-radius:20px;overflow:hidden; box-shadow:var(--sa-shadow-md); border:4px solid #fff; } /* -------------------------------------------------------------------------- 18. FOOTER -------------------------------------------------------------------------- */ .sa-footer{background:var(--sa-grad-dark);color:#fff9f2} .sa-footer__top{padding:80px 0 40px} .sa-brand--footer .sa-brand__text strong{background:var(--sa-grad-sun);-webkit-background-clip:text;background-clip:text;color:transparent} .sa-brand--footer .sa-brand__text em{color:rgba(255,249,242,.7)} .sa-footer__about{color:rgba(255,249,242,.7);font-size:.9rem;margin:1.2rem 0} .sa-footer__social{display:flex;gap:.6rem} .sa-footer__social a{ width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.06); display:flex;align-items:center;justify-content:center; color:#fff9f2;transition:all .3s; } .sa-footer__social a:hover{background:var(--sa-grad-sun);color:var(--sa-coal);transform:translateY(-3px)} .sa-footer__heading{ color:#fff;font-size:1.1rem;margin-bottom:1.2rem; position:relative;padding-bottom:.6rem; } .sa-footer__heading::after{ content:'';position:absolute;left:0;bottom:0; width:30px;height:2px;background:var(--sa-yellow); } .sa-footer__links{list-style:none;padding:0;margin:0} .sa-footer__links li{margin-bottom:.5rem} .sa-footer__links a{color:rgba(255,249,242,.7);font-size:.9rem;transition:all .3s;display:inline-block} .sa-footer__links a:hover{color:var(--sa-yellow);transform:translateX(4px)} .sa-footer__contact{list-style:none;padding:0;margin:0} .sa-footer__contact li{ padding:.5rem 0;color:rgba(255,249,242,.8);font-size:.9rem; display:flex;gap:.6rem;line-height:1.6; } .sa-footer__contact i{color:var(--sa-yellow);margin-top:4px;flex-shrink:0} .sa-footer__contact a{color:rgba(255,249,242,.8)} .sa-footer__contact a:hover{color:var(--sa-yellow)} .sa-footer__bottom{ border-top:1px solid rgba(255,217,61,.1); padding:1.2rem 0;font-size:.85rem; color:rgba(255,249,242,.6); } .sa-footer__bottom p{margin:0} .sa-footer__bottom i{color:var(--sa-red);animation:sa-heart 1.4s ease-in-out infinite} @keyframes sa-heart{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}} /* -------------------------------------------------------------------------- 19. FLOATING BUTTONS -------------------------------------------------------------------------- */ .sa-float{ position:fixed;right:20px; width:54px;height:54px;border-radius:50%; display:flex;align-items:center;justify-content:center; color:#fff;font-size:1.3rem; box-shadow:var(--sa-shadow-md); z-index:999;border:none;cursor:pointer; transition:all .3s var(--sa-ease); } .sa-float:hover{transform:translateY(-4px) scale(1.08);color:#fff} .sa-float--wa{bottom:148px;background:#25D366} .sa-float--call{bottom:86px;background:var(--sa-grad-warm);animation:sa-ring 2s ease-in-out infinite} .sa-float--top{ bottom:20px;background:var(--sa-ink);color:#fff; opacity:0;pointer-events:none; } .sa-float--top.visible{opacity:1;pointer-events:auto} @keyframes sa-ring{ 0%,100%{box-shadow:0 0 0 0 rgba(255,140,66,.6)} 50%{box-shadow:0 0 0 14px rgba(255,140,66,0)} } /* -------------------------------------------------------------------------- 20. RESPONSIVE -------------------------------------------------------------------------- */ @media (max-width: 1199.98px){ .sa-hero__sun{width:400px;height:400px;top:-100px;right:-100px} } @media (max-width: 991.98px){ .sa-navbar{padding:.8rem 0} .sa-navbar .navbar-collapse{ background:#fff;margin-top:.8rem;padding:1rem;border-radius:14px; box-shadow:var(--sa-shadow-md); } .sa-navbar .nav-link{padding:.8rem 0 !important} .sa-hero{padding-top:110px;padding-bottom:60px} .sa-hero__sun{width:300px;height:300px;top:-80px;right:-80px;opacity:.6} .sa-about__stat{font-size:.9rem;padding:.8rem 1rem} .sa-about__stat strong{font-size:1.4rem} .sa-section{padding:70px 0} .sa-why__visual{max-width:420px} } @media (max-width: 767.98px){ .sa-hero__title{font-size:2.4rem} .sa-hero__sub{font-size:1rem} .sa-hero__cta{flex-direction:column;align-items:stretch} .sa-hero__cta .sa-btn{width:100%} .sa-hero__trust{gap:1rem} .sa-hero__scroll{display:none} .sa-marquee__track{font-size:1.2rem} .sa-section{padding:60px 0} .sa-cta__box{padding:2rem;flex-direction:column;text-align:center} .sa-cta__right{justify-content:center;width:100%} .sa-cta__right .sa-btn{flex:1} .sa-contact__info,.sa-contact__form{padding:1.8rem} .sa-about__stat--1{top:0;right:0} .sa-about__stat--2{bottom:0;left:0} .sa-about__stat--3{bottom:10%;right:0} .sa-why__visual{gap:.6rem} .sa-why__card{padding:1rem} .sa-why__card--1,.sa-why__card--4{transform:translateY(10px)} .sa-why__card--2,.sa-why__card--3{transform:translateY(-10px)} .sa-why__center{width:80px;height:80px} .sa-why__center strong{font-size:1.2rem} .sa-why__center span{font-size:.6rem} .sa-footer__top{padding:60px 0 30px} .sa-float{width:46px;height:46px;font-size:1.1rem;right:12px} .sa-float--wa{bottom:124px} .sa-float--call{bottom:70px} } @media (max-width: 479.98px){ .sa-brand__text strong{font-size:1.3rem} .sa-brand__text em{font-size:.6rem} .sa-brand__mark{width:44px;height:44px} .sa-hero__title{font-size:2rem} .sa-hero__eyebrow{font-size:.75rem;padding:.35rem .8rem} .sa-section__title{font-size:1.6rem} .sa-about__stat{padding:.6rem .8rem} .sa-service{padding:1.6rem 1.2rem} .sa-service__num{font-size:2.8rem} .sa-loader__text{font-size:1.3rem;letter-spacing:.2em} } /* ========================================================================== 21. STATS BAND (new section between marquee & about) ========================================================================== */ .sa-stats{ padding:60px 0; background:linear-gradient(180deg, #FFF9F2 0%, #FFE8CC 100%); position:relative; border-bottom:1px solid rgba(255,140,66,.15); } .sa-stat{ position:relative;text-align:center; padding:1.5rem 1rem; background:#fff; border-radius:18px; border:1px solid var(--sa-line); transition:all .4s var(--sa-ease); height:100%; box-shadow:0 6px 18px rgba(193,39,45,.05); } .sa-stat:hover{ transform:translateY(-6px); border-color:transparent; box-shadow:var(--sa-shadow-md); } .sa-stat:hover .sa-stat__icon{ background:var(--sa-grad-warm);color:#fff; transform:rotate(-8deg); } .sa-stat__icon{ width:48px;height:48px;border-radius:50%; background:rgba(255,140,66,.15);color:var(--sa-tangerine); display:flex;align-items:center;justify-content:center; font-size:1.2rem;margin:0 auto .8rem; transition:all .4s var(--sa-ease); } .sa-stat strong{ display:inline-block; font-family:var(--sa-font-display);font-weight:800; font-size:2.2rem;line-height:1; background:var(--sa-grad-warm); -webkit-background-clip:text;background-clip:text;color:transparent; } .sa-stat__text{ font-family:var(--sa-font-stamp) !important; letter-spacing:.08em; } .sa-stat__plus{ display:inline-block; font-family:var(--sa-font-display);font-weight:700; font-size:1.4rem; background:var(--sa-grad-warm); -webkit-background-clip:text;background-clip:text;color:transparent; margin-left:2px; } .sa-stat small{ display:block; font-size:.8rem;font-weight:500; color:var(--sa-slate); text-transform:uppercase;letter-spacing:.1em; margin-top:.3rem; } @media (max-width:767.98px){ .sa-stats{padding:40px 0} .sa-stat{padding:1.2rem .6rem} .sa-stat strong{font-size:1.6rem} .sa-stat__plus{font-size:1.1rem} .sa-stat small{font-size:.7rem} .sa-stat__icon{width:40px;height:40px;font-size:1rem;margin-bottom:.5rem} } /* ========================================================================== 22. NATURE OF ACTIVITIES (inside about) ========================================================================== */ .sa-activities{ background:linear-gradient(135deg, #FFF7E6 0%, #FFFEFB 100%); border-radius:24px; padding:2.5rem; margin-top:1rem; border:1px solid var(--sa-line); position:relative;overflow:hidden; } .sa-activities::before{ content:'';position:absolute;top:-80px;right:-80px; width:220px;height:220px;border-radius:50%; background:radial-gradient(circle, rgba(255,217,61,.35), transparent 70%); pointer-events:none; } .sa-activities__head{position:relative;margin-bottom:1.8rem;max-width:640px} .sa-activities__title{font-size:1.6rem;margin-bottom:.4rem} .sa-activities__head p{color:var(--sa-slate);margin:0} .sa-activities__grid{ display:flex;flex-wrap:wrap;gap:.7rem; position:relative; } .sa-chip{ display:inline-flex;align-items:center;gap:.5rem; padding:.55rem 1rem; background:#fff; border:1px solid var(--sa-line); border-radius:50px; font-size:.85rem;font-weight:500; color:var(--sa-coal); transition:all .3s var(--sa-ease); cursor:default; } .sa-chip i{ color:var(--sa-tangerine);font-size:.8rem; transition:color .3s; } .sa-chip:hover{ background:var(--sa-grad-warm); color:#fff;border-color:transparent; transform:translateY(-2px); box-shadow:0 8px 20px rgba(255,107,26,.3); } .sa-chip:hover i{color:var(--sa-yellow)} @media (max-width:767.98px){ .sa-activities{padding:1.5rem} .sa-activities__title{font-size:1.3rem} .sa-chip{padding:.45rem .8rem;font-size:.8rem} } /* ========================================================================== 23. 7-STEP PROCESS FLOW (replaces old 4-col grid) ========================================================================== */ .sa-process__flow{ display:grid; grid-template-columns:repeat(7, 1fr); gap:1rem; margin-top:3rem; position:relative; } .sa-process__flow .sa-step{ padding:1.5rem 1rem; background:rgba(255,255,255,.04); border:1px solid rgba(255,217,61,.15); border-radius:18px; backdrop-filter:blur(10px); text-align:center; position:relative; transition:all .5s var(--sa-ease); } .sa-process__flow .sa-step::after{ content:'';position:absolute;top:50%;right:-1rem; width:1rem;height:2px; background:linear-gradient(90deg, var(--sa-yellow), transparent); transform:translateY(-50%); z-index:1; } .sa-process__flow .sa-step:last-child::after{display:none} .sa-process__flow .sa-step:hover{ background:rgba(255,255,255,.08); border-color:var(--sa-yellow); transform:translateY(-6px); } .sa-process__flow .sa-step:hover .sa-step__icon{ background:var(--sa-grad-sun);color:var(--sa-coal); transform:rotate(10deg); } .sa-process__flow .sa-step__num{ font-size:2.2rem;margin-bottom:.6rem; } .sa-process__flow .sa-step__icon{ width:48px;height:48px;font-size:1.2rem; margin:0 auto .8rem; } .sa-process__flow .sa-step h4{font-size:1rem;margin-bottom:.4rem} .sa-process__flow .sa-step p{font-size:.8rem;line-height:1.5} @media (max-width:1199.98px){ .sa-process__flow{grid-template-columns:repeat(4, 1fr)} .sa-process__flow .sa-step:nth-child(4)::after{display:none} } @media (max-width:991.98px){ .sa-process__flow{grid-template-columns:repeat(3, 1fr)} .sa-process__flow .sa-step::after{display:none} } @media (max-width:767.98px){ .sa-process__flow{grid-template-columns:repeat(2, 1fr);gap:.8rem} .sa-process__flow .sa-step{padding:1.2rem .8rem} .sa-process__flow .sa-step__num{font-size:1.8rem} .sa-process__flow .sa-step__icon{width:40px;height:40px;font-size:1rem} .sa-process__flow .sa-step h4{font-size:.95rem} .sa-process__flow .sa-step p{font-size:.75rem} } @media (max-width:479.98px){ .sa-process__flow{grid-template-columns:1fr} } /* ========================================================================== 24. INNER HERO (used on career page - shorter hero) ========================================================================== */ .sa-hero--inner{ min-height:auto; padding-top:180px; padding-bottom:80px; } .sa-hero--inner .sa-hero__title{font-size:clamp(2rem, 4.5vw, 3.8rem)} .sa-hero--inner .min-vh-100{min-height:auto !important} @media (max-width:767.98px){ .sa-hero--inner{padding-top:130px;padding-bottom:50px} } /* ========================================================================== 25. CAREER — Feat variant & Job cards ========================================================================== */ .sa-feat--career{ padding:1.5rem; background:#fff; flex-direction:column;gap:1rem; text-align:left; } .sa-feat--career .sa-feat__icon{ width:56px;height:56px;font-size:1.4rem; border-radius:16px;flex:0 0 56px; } .sa-feat--career h5{font-size:1.1rem;margin-bottom:.3rem} .sa-feat--career p{font-size:.9rem} .sa-jobs{ background:linear-gradient(180deg, #FFE8CC 0%, var(--sa-paper) 100%); } .sa-job{ position:relative; background:#fff; border-radius:20px; padding:1.8rem; height:100%; border:1px solid var(--sa-line); transition:all .5s var(--sa-ease); overflow:hidden; } .sa-job::before{ content:'';position:absolute;top:0;left:0; width:4px;height:100%; background:var(--sa-grad-warm); transform:scaleY(0);transform-origin:top; transition:transform .5s var(--sa-ease); } .sa-job:hover{ transform:translateY(-8px); box-shadow:var(--sa-shadow-lg); border-color:transparent; } .sa-job:hover::before{transform:scaleY(1)} .sa-job__tag{ display:inline-block; padding:.25rem .7rem; background:rgba(255,140,66,.15); color:var(--sa-tangerine); font-family:var(--sa-font-stamp); font-size:.75rem;letter-spacing:.15em; border-radius:50px; margin-bottom:1rem; } .sa-job__tag--alt{ background:rgba(193,39,45,.1); color:var(--sa-crimson); } .sa-job h4{ font-size:1.25rem;margin-bottom:.6rem; color:var(--sa-coal); } .sa-job__meta{ display:flex;flex-wrap:wrap;gap:.6rem 1rem; font-size:.8rem;color:var(--sa-slate); margin-bottom:1rem; } .sa-job__meta i{color:var(--sa-tangerine);margin-right:.3rem} .sa-job__req{ list-style:none;padding:0;margin:0 0 1.3rem; } .sa-job__req li{ padding:.35rem 0;font-size:.85rem;color:var(--sa-coal); } .sa-job__req li i{ color:var(--sa-tangerine);margin-right:.5rem;font-size:.7rem; } .sa-job__cta{ display:inline-flex;align-items:center;gap:.4rem; font-weight:600;font-size:.85rem; color:var(--sa-crimson); text-transform:uppercase;letter-spacing:.1em; } .sa-job__cta i{transition:transform .3s} .sa-job__cta:hover i{transform:translateX(4px)} @media (max-width:767.98px){ .sa-job{padding:1.4rem} .sa-job h4{font-size:1.1rem} } /* -------------------------------------------------------------------------- 21. ABOUT — 4th STAT (DRA Trained FOS) -------------------------------------------------------------------------- */ .sa-about__stat--4{ top:8%;left:-10%; display:flex;flex-direction:column;align-items:flex-start;gap:.15rem; } .sa-about__stat--4 strong{ font-family:var(--sa-font-stamp); font-size:1.6rem;letter-spacing:.08em; background:var(--sa-grad-warm); -webkit-background-clip:text;background-clip:text;color:transparent; } .sa-about__stat--4 span{font-weight:500} @media (max-width:991.98px){ .sa-about__stat--4{top:5%;left:0} } @media (max-width:767.98px){ .sa-about__stat--4{top:0;left:5%} } /* -------------------------------------------------------------------------- 22. NATURE OF ACTIVITIES -------------------------------------------------------------------------- */ .sa-nature{ background: radial-gradient(ellipse at top left, rgba(255,217,61,.15), transparent 55%), linear-gradient(180deg, var(--sa-paper) 0%, #FFF3DE 100%); overflow:hidden; } .sa-nat{ position:relative; background:#fff;border-radius:18px;padding:1.8rem; border:1px solid var(--sa-line); height:100%; transition:all .4s var(--sa-ease); overflow:hidden; } .sa-nat::before{ content:'';position:absolute;top:0;left:0;right:0; height:3px;background:var(--sa-grad-warm); transform:scaleX(0);transform-origin:left; transition:transform .5s var(--sa-ease); } .sa-nat:hover{ transform:translateY(-6px); box-shadow:var(--sa-shadow-md); border-color:transparent; } .sa-nat:hover::before{transform:scaleX(1)} .sa-nat:hover .sa-nat__head i{ background:var(--sa-grad-warm);color:#fff; transform:rotate(-6deg) scale(1.05); } .sa-nat__head{ display:flex;align-items:center;gap:1rem; margin-bottom:1.1rem;padding-bottom:1rem; border-bottom:1px dashed var(--sa-line); } .sa-nat__head i{ flex:0 0 48px;width:48px;height:48px;border-radius:12px; background:rgba(255,140,66,.15);color:var(--sa-tangerine); display:flex;align-items:center;justify-content:center; font-size:1.2rem; transition:all .4s var(--sa-ease); } .sa-nat__head h4{ font-size:1.1rem;margin:0;color:var(--sa-coal); line-height:1.3; } .sa-nat ul{list-style:none;padding:0;margin:0} .sa-nat ul li{ padding:.4rem 0;font-size:.9rem;color:var(--sa-coal); display:flex;align-items:flex-start;gap:.5rem; } .sa-nat ul li i{ flex:0 0 auto;margin-top:.25rem; color:var(--sa-tangerine);font-size:.75rem; } /* -------------------------------------------------------------------------- 23. 7-STEP HORIZONTAL TIMELINE (PROCESS) -------------------------------------------------------------------------- */ .sa-timeline{ position:relative; margin-top:4rem; display:flex;flex-wrap:nowrap; gap:.5rem; align-items:flex-start; justify-content:space-between; } .sa-timeline__line{ position:absolute; top:92px;left:7%;right:7%; height:2px; background:linear-gradient(90deg, transparent 0%, rgba(255,217,61,.4) 8%, rgba(255,140,66,.6) 50%, rgba(255,217,61,.4) 92%, transparent 100%); z-index:0; pointer-events:none; } .sa-timeline__line::before, .sa-timeline__line::after{ content:'';position:absolute;top:50%; width:8px;height:8px;border-radius:50%; background:var(--sa-yellow); transform:translateY(-50%); box-shadow:0 0 12px rgba(255,217,61,.6); } .sa-timeline__line::before{left:0} .sa-timeline__line::after{right:0} .sa-timeline__item{ position:relative;z-index:1; flex:1 1 0; min-width:0; text-align:center; padding:0 .4rem; } .sa-timeline__num{ font-family:var(--sa-font-display); font-style:italic;font-weight:900; font-size:2rem;line-height:1; background:var(--sa-grad-sun); -webkit-background-clip:text;background-clip:text;color:transparent; margin-bottom:.6rem; } .sa-timeline__icon{ width:70px;height:70px;border-radius:50%; background:var(--sa-grad-dark); border:2px solid var(--sa-yellow); box-shadow:0 0 0 4px rgba(255,217,61,.08), 0 10px 25px rgba(0,0,0,.3); color:var(--sa-yellow); display:flex;align-items:center;justify-content:center; font-size:1.4rem; margin:0 auto 1rem; transition:all .4s var(--sa-ease); } .sa-timeline__item:hover .sa-timeline__icon{ background:var(--sa-grad-sun); color:var(--sa-coal); transform:translateY(-4px) scale(1.05); box-shadow:0 0 0 4px rgba(255,217,61,.18), 0 15px 35px rgba(255,140,66,.35); } .sa-timeline__item h5{ color:#fff;font-size:1rem; margin-bottom:.4rem;line-height:1.3; } .sa-timeline__item p{ color:rgba(255,249,242,.65); font-size:.8rem;line-height:1.5; margin:0; } /* Tablet: 2 rows of 4 + last one alone, still horizontal line per row */ @media (max-width: 1199.98px){ .sa-timeline{flex-wrap:wrap;gap:1.5rem .5rem} .sa-timeline__item{flex:0 0 25%;max-width:25%} .sa-timeline__line{display:none} .sa-timeline__icon{width:64px;height:64px;font-size:1.2rem} .sa-timeline__num{font-size:1.8rem} .sa-timeline__item p{font-size:.78rem} } @media (max-width: 767.98px){ .sa-timeline__item{flex:0 0 50%;max-width:50%} } @media (max-width: 479.98px){ .sa-timeline{flex-direction:column;gap:2rem;padding-left:1rem} .sa-timeline::before{ content:'';position:absolute;left:46px;top:30px;bottom:30px; width:2px; background:linear-gradient(180deg, var(--sa-yellow) 0%, var(--sa-orange) 50%, var(--sa-yellow) 100%); opacity:.4; } .sa-timeline__item{ flex:1 1 auto;max-width:100%; display:flex;align-items:flex-start;gap:1rem; text-align:left;padding:0; } .sa-timeline__num{ display:none; } .sa-timeline__icon{ flex:0 0 60px;width:60px;height:60px; margin:0;font-size:1.1rem; } .sa-timeline__item h5{font-size:1.05rem;margin-bottom:.3rem} .sa-timeline__item p{font-size:.85rem} } /* ========================================================================== INNER-PAGE COMPONENTS (About / Services / Activities / Process / Contact) ========================================================================== */ /* --- Breadcrumb bar under the inner hero --- */ .sa-crumbs{ background:rgba(255,255,255,.08); backdrop-filter:blur(8px); padding:.8rem 0; border-top:1px solid rgba(255,255,255,.08); border-bottom:1px solid rgba(255,255,255,.08); } .sa-crumbs ol{ list-style:none;padding:0;margin:0; display:flex;flex-wrap:wrap;gap:.3rem .6rem; font-size:.85rem; } .sa-crumbs li{color:rgba(255,249,242,.65)} .sa-crumbs li + li::before{ content:'/';margin-right:.6rem;opacity:.5; } .sa-crumbs a{color:var(--sa-yellow);transition:color .3s} .sa-crumbs a:hover{color:#fff} /* --- Big stat strip (horizontal row) --- */ .sa-stripe{ background:var(--sa-grad-dark); color:#fff; padding:3rem 0; position:relative;overflow:hidden; } .sa-stripe::before{ content:'';position:absolute;top:-40%;right:-10%; width:380px;height:380px;border-radius:50%; background:radial-gradient(circle, rgba(255,140,66,.25), transparent 70%); } .sa-stripe__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;text-align:center; position:relative;z-index:1; } .sa-stripe__item strong{ display:block; font-family:var(--sa-font-display);font-style:italic;font-weight:900; font-size:clamp(2rem,4vw,3.4rem); background:var(--sa-grad-sun); -webkit-background-clip:text;background-clip:text;color:transparent; line-height:1;margin-bottom:.4rem; } .sa-stripe__item span{ font-size:.85rem;color:rgba(255,249,242,.75); letter-spacing:.1em;text-transform:uppercase; } @media (max-width:767.98px){ .sa-stripe__grid{grid-template-columns:repeat(2,1fr);gap:1.8rem} } /* --- Values / Principles grid (6 cards) --- */ .sa-values{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; } .sa-value{ background:#fff;border:1px solid var(--sa-line); border-radius:18px;padding:2rem 1.6rem; position:relative;overflow:hidden; transition:all .4s var(--sa-ease); } .sa-value::before{ content:'';position:absolute;top:0;left:0;width:4px;height:0; background:var(--sa-grad-warm); transition:height .4s var(--sa-ease); } .sa-value:hover{transform:translateY(-6px);box-shadow:var(--sa-shadow-md);border-color:transparent} .sa-value:hover::before{height:100%} .sa-value:hover .sa-value__icon{background:var(--sa-grad-warm);color:#fff;transform:rotate(-6deg)} .sa-value__icon{ width:54px;height:54px;border-radius:14px; background:rgba(255,140,66,.15);color:var(--sa-tangerine); display:flex;align-items:center;justify-content:center; font-size:1.3rem;margin-bottom:1rem; transition:all .4s var(--sa-ease); } .sa-value h5{font-size:1.1rem;margin-bottom:.5rem} .sa-value p{font-size:.9rem;color:var(--sa-slate);margin:0} @media (max-width:991.98px){.sa-values{grid-template-columns:repeat(2,1fr)}} @media (max-width:575.98px){.sa-values{grid-template-columns:1fr}} /* --- Milestones vertical timeline --- */ .sa-mile{ position:relative;padding-left:50px; } .sa-mile::before{ content:'';position:absolute;left:16px;top:8px;bottom:8px; width:3px;border-radius:3px; background:linear-gradient(180deg,var(--sa-yellow),var(--sa-crimson)); } .sa-mile__item{ position:relative;padding-bottom:2rem; } .sa-mile__item:last-child{padding-bottom:0} .sa-mile__dot{ position:absolute;left:-42px;top:4px; width:34px;height:34px;border-radius:50%; background:var(--sa-grad-sun); display:flex;align-items:center;justify-content:center; color:var(--sa-coal);font-size:.8rem;font-weight:700; box-shadow:0 0 0 4px var(--sa-paper), 0 6px 18px rgba(255,140,66,.4); } .sa-mile__year{ font-family:var(--sa-font-stamp); letter-spacing:.1em;font-size:.9rem;color:var(--sa-crimson); margin-bottom:.2rem; } .sa-mile__item h5{font-size:1.15rem;margin-bottom:.3rem} .sa-mile__item p{font-size:.95rem;color:var(--sa-slate);margin:0} /* --- Service detail blocks (for services.html deep dive) --- */ .sa-svc{ background:#fff;border:1px solid var(--sa-line); border-radius:22px;padding:2.5rem; margin-bottom:2rem; position:relative;overflow:hidden; transition:all .4s var(--sa-ease); } .sa-svc:hover{box-shadow:var(--sa-shadow-lg);border-color:transparent} .sa-svc__head{ display:flex;gap:1.2rem;align-items:flex-start; margin-bottom:1.4rem;padding-bottom:1.4rem; border-bottom:1px dashed var(--sa-line); } .sa-svc__icon{ flex:0 0 72px;width:72px;height:72px;border-radius:18px; background:var(--sa-grad-warm);color:#fff; display:flex;align-items:center;justify-content:center; font-size:1.8rem; box-shadow:0 10px 30px rgba(255,140,66,.3); } .sa-svc__head h3{margin:0 0 .3rem;font-size:1.6rem} .sa-svc__head p{margin:0;color:var(--sa-slate);font-size:.95rem} .sa-svc__body h5{ font-size:1rem;margin:1.2rem 0 .6rem; color:var(--sa-crimson); text-transform:uppercase;letter-spacing:.1em;font-weight:700; } .sa-svc__body h5:first-child{margin-top:0} .sa-svc__body > p{color:var(--sa-slate);font-size:.95rem;line-height:1.75} .sa-svc__body ul{padding-left:1.2rem;margin:0 0 1rem} .sa-svc__body ul li{padding:.3rem 0;color:var(--sa-coal);font-size:.9rem} .sa-svc__grid{ display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1rem; } @media (max-width:767.98px){ .sa-svc{padding:1.8rem} .sa-svc__grid{grid-template-columns:1fr;gap:1rem} .sa-svc__head{flex-direction:column;gap:1rem} .sa-svc__icon{width:56px;height:56px;font-size:1.4rem} .sa-svc__head h3{font-size:1.3rem} } /* --- Coverage / Cities grid --- */ .sa-cities{ display:grid;grid-template-columns:repeat(4,1fr);gap:1rem; } .sa-city{ background:#fff;border:1px solid var(--sa-line); border-radius:14px;padding:1.1rem; text-align:center;transition:all .3s; } .sa-city:hover{ background:var(--sa-grad-warm);color:#fff; transform:translateY(-4px);box-shadow:var(--sa-shadow-md);border-color:transparent; } .sa-city:hover i,.sa-city:hover span{color:#fff} .sa-city i{ font-size:1.4rem;color:var(--sa-tangerine);margin-bottom:.5rem; display:block;transition:color .3s; } .sa-city span{ font-size:.9rem;font-weight:600;color:var(--sa-coal); transition:color .3s; } @media (max-width:767.98px){.sa-cities{grid-template-columns:repeat(2,1fr)}} /* --- FAQ accordion (bootstrap-friendly overrides) --- */ .sa-faq .accordion-item{ background:#fff;border:1px solid var(--sa-line); border-radius:14px !important;margin-bottom:.8rem; overflow:hidden; } .sa-faq .accordion-button{ background:#fff;color:var(--sa-coal); font-family:var(--sa-font-body);font-weight:600;font-size:1rem; padding:1.2rem 1.5rem;border-radius:14px !important; box-shadow:none !important; } .sa-faq .accordion-button:not(.collapsed){ background:linear-gradient(135deg,#FFF7E6 0%, #FFE8CC 100%); color:var(--sa-crimson); } .sa-faq .accordion-button::after{ filter:invert(32%) sepia(82%) saturate(1590%) hue-rotate(348deg) brightness(85%) contrast(91%); } .sa-faq .accordion-body{ padding:0 1.5rem 1.4rem; color:var(--sa-slate);font-size:.95rem;line-height:1.75; } /* --- Big bordered CTA card for contact page --- */ .sa-box{ background:#fff;border:1px solid var(--sa-line); border-radius:18px;padding:1.8rem; height:100%;transition:all .4s var(--sa-ease); } .sa-box:hover{transform:translateY(-4px);box-shadow:var(--sa-shadow-md);border-color:transparent} .sa-box__icon{ width:52px;height:52px;border-radius:14px; background:var(--sa-grad-sun);color:var(--sa-coal); display:flex;align-items:center;justify-content:center; font-size:1.3rem;margin-bottom:1rem; } .sa-box h5{font-size:1.1rem;margin-bottom:.4rem} .sa-box p{font-size:.9rem;color:var(--sa-slate);margin:0 0 .6rem;line-height:1.6} .sa-box a{color:var(--sa-crimson);font-weight:600;font-size:.9rem} .sa-box a:hover{color:var(--sa-tangerine)} /* --- Process detail stepper (large vertical) --- */ .sa-step-big{ display:flex;gap:2rem; padding:2rem 0;border-bottom:1px dashed var(--sa-line); align-items:flex-start; } .sa-step-big:last-child{border-bottom:none} .sa-step-big__num{ flex:0 0 110px; font-family:var(--sa-font-display); font-style:italic;font-weight:900;font-size:5rem;line-height:1; background:var(--sa-grad-sun); -webkit-background-clip:text;background-clip:text;color:transparent; text-align:center; } .sa-step-big__body{flex:1} .sa-step-big__body h3{font-size:1.5rem;margin-bottom:.5rem} .sa-step-big__body p.lead{ font-size:1.05rem;color:var(--sa-slate);margin-bottom:1rem; } .sa-step-big__deliv{ background:var(--sa-paper);border-radius:12px;padding:1rem 1.2rem; display:flex;flex-wrap:wrap;gap:.4rem .6rem;margin-top:.8rem; } .sa-step-big__deliv span{ font-size:.8rem;padding:.3rem .7rem; background:#fff;border:1px solid var(--sa-line); border-radius:20px;color:var(--sa-coal); } .sa-step-big__deliv span i{ color:var(--sa-tangerine);margin-right:.3rem;font-size:.7rem; } @media (max-width:767.98px){ .sa-step-big{flex-direction:column;gap:.8rem;padding:1.6rem 0} .sa-step-big__num{flex:none;font-size:3.4rem;text-align:left} } /* -------------------------------------------------------------------------- 24. INNER-PAGE CONTENT BLOCKS -------------------------------------------------------------------------- */ /* Rich article body */ .sa-article{font-size:1.02rem;color:var(--sa-slate);line-height:1.8} .sa-article h3{ font-size:1.6rem;margin-top:2.5rem;margin-bottom:1rem; color:var(--sa-coal);position:relative;padding-left:1.2rem; } .sa-article h3::before{ content:'';position:absolute;left:0;top:.5rem; width:4px;height:1.3rem;border-radius:4px; background:var(--sa-grad-warm); } .sa-article h4{font-size:1.2rem;color:var(--sa-coal);margin-top:1.8rem;margin-bottom:.6rem} .sa-article p{margin-bottom:1rem} .sa-article ul{padding-left:1.2rem;margin-bottom:1rem} .sa-article ul li{margin-bottom:.4rem;position:relative;padding-left:.5rem;list-style:none} .sa-article ul li::before{ content:'\f0da';font-family:'Font Awesome 6 Free';font-weight:900; position:absolute;left:-1rem;color:var(--sa-tangerine); } .sa-article strong{color:var(--sa-coal);font-weight:600} /* Fact-strip / highlight box */ .sa-factstrip{ background:linear-gradient(135deg, #FFF7E6 0%, #FFE8CC 100%); border-left:4px solid var(--sa-tangerine); padding:1.4rem 1.6rem;border-radius:12px;margin:1.8rem 0; } .sa-factstrip h5{color:var(--sa-coal);font-size:1.05rem;margin-bottom:.3rem} .sa-factstrip p{color:var(--sa-slate);margin:0;font-size:.95rem} /* Page TOC sidebar */ .sa-toc{ position:sticky;top:110px; background:#fff;border-radius:16px;padding:1.4rem; border:1px solid var(--sa-line); box-shadow:var(--sa-shadow-sm); } .sa-toc h6{ font-family:var(--sa-font-stamp);font-size:.9rem;letter-spacing:.18em; color:var(--sa-crimson);margin-bottom:.8rem; } .sa-toc ul{list-style:none;padding:0;margin:0;font-family:var(--sa-font-body)} .sa-toc ul li{padding:.35rem 0;font-size:.88rem;border-bottom:1px dashed var(--sa-line)} .sa-toc ul li:last-child{border-bottom:none} .sa-toc ul li a{display:block;color:var(--sa-slate);transition:all .3s;padding-left:.6rem;border-left:2px solid transparent} .sa-toc ul li a:hover,.sa-toc ul li a.active{color:var(--sa-crimson);border-left-color:var(--sa-tangerine)} /* Two-column split inside service detail */ .sa-service-detail{ background:#fff;border-radius:18px;padding:2rem; border:1px solid var(--sa-line); box-shadow:var(--sa-shadow-sm); margin-bottom:2rem;scroll-margin-top:100px; } .sa-service-detail__head{ display:flex;align-items:center;gap:1.2rem;margin-bottom:1.4rem; padding-bottom:1.2rem;border-bottom:1px dashed var(--sa-line); } .sa-service-detail__icon{ flex:0 0 72px;width:72px;height:72px;border-radius:18px; background:var(--sa-grad-warm);color:#fff; display:flex;align-items:center;justify-content:center;font-size:1.8rem; box-shadow:0 10px 28px rgba(255,107,26,.35); } .sa-service-detail__num{ font-family:var(--sa-font-display);font-style:italic;font-weight:900; font-size:2.4rem; background:var(--sa-grad-sun); -webkit-background-clip:text;background-clip:text;color:transparent; line-height:1; } .sa-service-detail h2{font-size:1.7rem;margin:0;color:var(--sa-coal)} .sa-service-detail__meta{ font-size:.8rem;color:var(--sa-slate); text-transform:uppercase;letter-spacing:.12em;margin-top:.25rem; } /* FAQ accordion */ .sa-faq{background:#fff;border-radius:16px;border:1px solid var(--sa-line);overflow:hidden;margin-bottom:1rem} .sa-faq__q{ width:100%;padding:1.2rem 1.4rem;text-align:left; background:transparent;border:none;cursor:pointer; font-family:var(--sa-font-body);font-weight:600;color:var(--sa-coal); font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem; transition:background .25s; } .sa-faq__q:hover{background:var(--sa-paper)} .sa-faq__q i{ color:var(--sa-tangerine);transition:transform .3s;flex-shrink:0; } .sa-faq.is-open .sa-faq__q i{transform:rotate(180deg)} .sa-faq__a{ max-height:0;overflow:hidden; transition:max-height .4s var(--sa-ease), padding .3s; color:var(--sa-slate);font-size:.95rem;line-height:1.7; padding:0 1.4rem; } .sa-faq.is-open .sa-faq__a{ max-height:600px;padding:0 1.4rem 1.2rem; } /* Value / pillar cards */ .sa-pillar{ background:#fff;border-radius:16px;padding:1.8rem; border:1px solid var(--sa-line);height:100%; transition:all .4s var(--sa-ease);position:relative;overflow:hidden; } .sa-pillar::before{ content:'';position:absolute;top:-30px;right:-30px; width:120px;height:120px;border-radius:50%; background:radial-gradient(circle,rgba(255,217,61,.25),transparent 70%); opacity:0;transition:opacity .4s; } .sa-pillar:hover{transform:translateY(-6px);box-shadow:var(--sa-shadow-md);border-color:transparent} .sa-pillar:hover::before{opacity:1} .sa-pillar__num{ font-family:var(--sa-font-display);font-style:italic;font-weight:900; font-size:2.4rem; background:var(--sa-grad-sun); -webkit-background-clip:text;background-clip:text;color:transparent; line-height:1;display:block;margin-bottom:.8rem;position:relative; } .sa-pillar h4{font-size:1.15rem;margin-bottom:.6rem;color:var(--sa-coal);position:relative} .sa-pillar p{font-size:.93rem;color:var(--sa-slate);margin:0;position:relative} /* Process deep-dive step block */ .sa-step-detail{ display:flex;gap:2rem; padding:2rem;background:#fff;border-radius:18px; border:1px solid var(--sa-line); margin-bottom:1.5rem; transition:all .4s var(--sa-ease); } .sa-step-detail:hover{box-shadow:var(--sa-shadow-md);border-color:transparent;transform:translateX(6px)} .sa-step-detail__left{ flex:0 0 110px;text-align:center; } .sa-step-detail__num{ font-family:var(--sa-font-display);font-style:italic;font-weight:900; font-size:3rem; background:var(--sa-grad-sun); -webkit-background-clip:text;background-clip:text;color:transparent; line-height:1;margin-bottom:.5rem; } .sa-step-detail__icon{ width:64px;height:64px;border-radius:50%; background:var(--sa-grad-warm);color:#fff; display:flex;align-items:center;justify-content:center;font-size:1.4rem; margin:0 auto;box-shadow:0 10px 24px rgba(255,107,26,.35); } .sa-step-detail__body h3{font-size:1.3rem;color:var(--sa-coal);margin-bottom:.5rem} .sa-step-detail__body p{color:var(--sa-slate);font-size:.95rem;margin-bottom:1rem} .sa-step-detail__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .sa-step-detail__block{ background:var(--sa-paper);border-radius:10px;padding:.9rem 1rem;border:1px solid var(--sa-line); } .sa-step-detail__block h6{ font-size:.72rem;text-transform:uppercase;letter-spacing:.15em; color:var(--sa-crimson);margin-bottom:.35rem;font-weight:700; } .sa-step-detail__block p{color:var(--sa-coal);font-size:.88rem;margin:0;line-height:1.5} @media (max-width:767.98px){ .sa-step-detail{flex-direction:column;gap:1rem;padding:1.4rem} .sa-step-detail__left{display:flex;align-items:center;gap:1rem;text-align:left} .sa-step-detail__left .sa-step-detail__num{margin:0} .sa-step-detail__grid{grid-template-columns:1fr} } /* Team structure blocks */ .sa-team-block{ background:#fff;border-radius:16px;padding:1.6rem; border:1px solid var(--sa-line);height:100%; position:relative;transition:all .4s var(--sa-ease); } .sa-team-block:hover{box-shadow:var(--sa-shadow-md);transform:translateY(-4px);border-color:transparent} .sa-team-block i{ width:56px;height:56px;border-radius:14px; background:var(--sa-grad-warm);color:#fff; display:flex;align-items:center;justify-content:center;font-size:1.4rem; margin-bottom:1rem; } .sa-team-block h5{font-size:1.1rem;color:var(--sa-coal);margin-bottom:.5rem} .sa-team-block p{font-size:.9rem;color:var(--sa-slate);margin-bottom:.8rem} .sa-team-block__count{ display:inline-block;padding:.25rem .7rem;border-radius:50px; background:rgba(193,39,45,.08);color:var(--sa-crimson); font-size:.75rem;font-weight:600;letter-spacing:.05em; } /* Coverage list */ .sa-coverage{ display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1rem; } .sa-coverage span{ padding:.5rem 1rem;border-radius:50px; background:#fff;border:1px solid var(--sa-line); font-size:.88rem;color:var(--sa-coal);font-weight:500; transition:all .3s; } .sa-coverage span:hover{ background:var(--sa-grad-warm);color:#fff;border-color:transparent; transform:translateY(-2px); } .sa-coverage span i{color:var(--sa-tangerine);margin-right:.4rem} .sa-coverage span:hover i{color:#fff} /* ========================================================================== IMAGE CARDS, HERO IMAGES & CINEMATIC ANIMATIONS (Phase 4) ========================================================================== */ /* ---------- Inner page hero with background image ---------- */ .sa-hero--inner.sa-hero--img{ background:none; position:relative; overflow:hidden; } .sa-hero--img .sa-hero__bg{ position:absolute;inset:0; background-size:cover; background-position:center; z-index:0; filter:brightness(.55) saturate(1.1); animation:sa-kenburns 24s ease-in-out infinite alternate; } .sa-hero--img::after{ content:'';position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(ellipse at top right, rgba(255,140,66,.35), transparent 55%), linear-gradient(180deg, rgba(26,14,10,.4) 0%, rgba(26,14,10,.85) 100%); } .sa-hero--img > .container{position:relative;z-index:2} .sa-hero--img .sa-hero__title, .sa-hero--img .sa-hero__sub, .sa-hero--img .sa-breadcrumb, .sa-hero--img .sa-breadcrumb a, .sa-hero--img .sa-breadcrumb span{color:#fff} .sa-hero--img .sa-hero__sub{color:rgba(255,249,242,.85)} .sa-hero--img .sa-hero__eyebrow{ background:rgba(255,217,61,.15); border-color:rgba(255,217,61,.3); color:var(--sa-yellow); } .sa-hero--img .sa-hero__title-big{ background:linear-gradient(135deg, #FFD93D, #FF8C42); -webkit-background-clip:text;background-clip:text;color:transparent; } @keyframes sa-kenburns{ 0%{transform:scale(1) translate(0,0)} 100%{transform:scale(1.12) translate(-2%, -1%)} } /* ---------- Image card with frame & overlay ---------- */ .sa-img-card{ position:relative; border-radius:20px; overflow:hidden; background:var(--sa-coal); box-shadow:var(--sa-shadow-md); isolation:isolate; } .sa-img-card__media{ position:relative; aspect-ratio:16/10; overflow:hidden; } .sa-img-card__media img{ width:100%;height:100%;object-fit:cover; display:block; transform:scale(1.02); transition:transform 1.2s cubic-bezier(.2,.8,.2,1), filter .6s ease; will-change:transform; } .sa-img-card:hover .sa-img-card__media img{ transform:scale(1.12); } .sa-img-card__media::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg, transparent 40%, rgba(26,14,10,.8) 100%); opacity:.85; transition:opacity .4s ease; } .sa-img-card:hover .sa-img-card__media::after{opacity:1} .sa-img-card__badge{ position:absolute;top:14px;left:14px;z-index:2; font-family:var(--sa-font-stamp); font-size:.85rem;letter-spacing:.18em; background:var(--sa-grad-sun); color:var(--sa-coal); padding:.35rem .8rem; border-radius:6px; box-shadow:0 8px 20px rgba(255,140,66,.4); } .sa-img-card__caption{ position:absolute;left:0;right:0;bottom:0;z-index:2; padding:1.2rem 1.4rem; color:#fff; } .sa-img-card__caption h4{ color:#fff;font-size:1.2rem;margin:0 0 .25rem; font-family:var(--sa-font-display); } .sa-img-card__caption p{ color:rgba(255,249,242,.78); font-size:.85rem;margin:0;line-height:1.5; } /* ---------- About page split image ---------- */ .sa-img-split{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--sa-shadow-lg); } .sa-img-split img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform 8s linear; transform:scale(1); } .sa-img-split:hover img{transform:scale(1.08)} .sa-img-split::before{ content:'';position:absolute;inset:0;z-index:2; background:linear-gradient(135deg, rgba(255,140,66,.18), transparent 60%); pointer-events:none; } .sa-img-split__stamp{ position:absolute;bottom:24px;left:24px;z-index:3; background:var(--sa-grad-warm); color:#fff; padding:1rem 1.2rem; border-radius:14px; box-shadow:0 15px 40px rgba(193,39,45,.4); max-width:70%; } .sa-img-split__stamp strong{ display:block;font-family:var(--sa-font-display); font-style:italic;font-size:1.4rem;line-height:1.1;margin-bottom:.2rem; } .sa-img-split__stamp span{font-size:.8rem;opacity:.92} /* ---------- Service detail with image ---------- */ .sa-service-detail__image{ position:relative; border-radius:18px; overflow:hidden; margin-bottom:1.5rem; aspect-ratio:21/9; background:var(--sa-coal); } .sa-service-detail__image img{ width:100%;height:100%;object-fit:cover; transform:scale(1.04); transition:transform 6s linear; } .sa-service-detail:hover .sa-service-detail__image img{ transform:scale(1.12); } .sa-service-detail__image::after{ content:'';position:absolute;inset:0; background:linear-gradient(135deg, rgba(255,140,66,.15) 0%, transparent 50%, rgba(26,14,10,.5) 100%); } .sa-service-detail__image .sa-img-card__badge{ font-size:.95rem; top:18px;left:18px; } /* ---------- Activity card with image ---------- */ .sa-nat__media{ position:relative; margin:-1.8rem -1.8rem 1.4rem; aspect-ratio:16/9; overflow:hidden; border-radius:18px 18px 0 0; background:var(--sa-coal); } .sa-nat__media img{ width:100%;height:100%;object-fit:cover;display:block; transform:scale(1.03); transition:transform 1s var(--sa-ease); } .sa-nat:hover .sa-nat__media img{transform:scale(1.12)} .sa-nat__media::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg, rgba(26,14,10,.05) 0%, rgba(26,14,10,.5) 100%); transition:opacity .4s; } .sa-nat__media .sa-img-card__badge{ position:absolute;top:14px;right:14px; font-size:.7rem; } /* ---------- Image gallery / strip ---------- */ .sa-img-strip{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin-top:2rem; } .sa-img-strip__item{ position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden; } .sa-img-strip__item img{ width:100%;height:100%;object-fit:cover; transition:transform .8s var(--sa-ease), filter .4s; filter:grayscale(.2); } .sa-img-strip__item:hover img{transform:scale(1.1);filter:grayscale(0)} /* ---------- Cinematic reveal — clip-path image animation ---------- */ [data-reveal-img]{ opacity:1; -webkit-clip-path:inset(0 100% 0 0); clip-path:inset(0 100% 0 0); transition:clip-path 1.2s cubic-bezier(.65,.05,.35,1); } [data-reveal-img].is-in{ -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); } /* ---------- Floating accent dots ---------- */ .sa-floating-dots{ position:absolute; pointer-events:none; z-index:0; } .sa-floating-dots span{ position:absolute; width:8px;height:8px;border-radius:50%; background:var(--sa-yellow); opacity:.6; animation:sa-float-dot 4s ease-in-out infinite; } .sa-floating-dots span:nth-child(1){top:10%;left:20%;animation-delay:0s;background:var(--sa-yellow)} .sa-floating-dots span:nth-child(2){top:60%;left:80%;animation-delay:.5s;background:var(--sa-orange)} .sa-floating-dots span:nth-child(3){top:30%;left:75%;animation-delay:1s;background:var(--sa-tangerine)} .sa-floating-dots span:nth-child(4){top:75%;left:25%;animation-delay:1.5s;background:var(--sa-yellow)} .sa-floating-dots span:nth-child(5){top:45%;left:50%;animation-delay:2s;background:var(--sa-orange)} @keyframes sa-float-dot{ 0%,100%{transform:translate(0,0) scale(1);opacity:.6} 50%{transform:translate(20px,-30px) scale(1.4);opacity:.9} } /* ---------- Animated underline link effect ---------- */ .sa-link-anim{ position:relative;display:inline-block; } .sa-link-anim::after{ content:'';position:absolute;left:0;bottom:-2px; width:100%;height:2px; background:var(--sa-grad-warm); transform:scaleX(0);transform-origin:right; transition:transform .5s var(--sa-ease); } .sa-link-anim:hover::after{transform:scaleX(1);transform-origin:left} /* ---------- Image quote block ---------- */ .sa-quote-block{ position:relative;padding:3rem; background:var(--sa-grad-dark); border-radius:20px; overflow:hidden; color:#fff; } .sa-quote-block__bg{ position:absolute;inset:0; background-size:cover;background-position:center; filter:brightness(.25) saturate(1.2); z-index:0; } .sa-quote-block__content{position:relative;z-index:2} .sa-quote-block__content p{ font-family:var(--sa-font-display); font-style:italic;font-size:1.4rem;line-height:1.5; color:#fff;margin-bottom:1rem; } .sa-quote-block__author{ color:var(--sa-yellow);font-weight:600;letter-spacing:.05em; } /* ---------- Responsive image rules ---------- */ @media (max-width:991.98px){ .sa-img-split{aspect-ratio:16/12} .sa-img-strip{grid-template-columns:repeat(3,1fr);gap:.6rem} .sa-service-detail__image{aspect-ratio:16/9} } @media (max-width:575.98px){ .sa-hero--img .sa-hero__bg{filter:brightness(.45) saturate(1.1)} .sa-img-split__stamp{padding:.7rem .9rem;font-size:.9rem} .sa-img-split__stamp strong{font-size:1.1rem} .sa-quote-block{padding:2rem 1.5rem} .sa-quote-block__content p{font-size:1.1rem} } /* ---------- Homepage service card image ---------- */ .sa-service{ display:flex;flex-direction:column; } .sa-service__image{ position:relative; margin:-2rem -1.8rem 1.4rem; aspect-ratio:16/9; overflow:hidden; border-radius:20px 20px 0 0; background:var(--sa-coal); } .sa-service__image img{ width:100%;height:100%;object-fit:cover;display:block; transform:scale(1.04); transition:transform 1s var(--sa-ease), filter .4s; } .sa-service:hover .sa-service__image img{ transform:scale(1.14); filter:saturate(1.1); } .sa-service__image::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg, transparent 30%, rgba(26,14,10,.4) 100%); transition:opacity .4s; } .sa-service:hover .sa-service__image::after{ background:linear-gradient(180deg, rgba(255,140,66,.05) 30%, rgba(26,14,10,.55) 100%); } .sa-service__image .sa-img-card__badge{ top:12px;left:12px;font-size:.7rem; } /* Adjust num position since image is now at top */ .sa-service .sa-service__num{ top:12px;right:1.5rem; z-index:2;color:#fff; -webkit-text-stroke:1px rgba(255,255,255,.6); text-shadow:0 4px 12px rgba(0,0,0,.4); opacity:.7; } .sa-service:hover .sa-service__num{opacity:.9;-webkit-text-stroke-color:var(--sa-yellow)} /* ---------- Safety: never let homepage service cards stay invisible ---------- */ .sa-services .sa-service{ opacity:1 !important; visibility:visible !important; transform:none !important; } .sa-services .sa-service__image, .sa-services .sa-service__image img{ opacity:1 !important; visibility:visible !important; } html.js-ready .sa-services [data-reveal], .sa-services [data-reveal]{ opacity:1 !important; transform:none !important; visibility:visible !important; } /* ========================================================================== FOUNDER SECTION & REAL OFFICE PHOTO STRIP ========================================================================== */ .sa-founder{ background: radial-gradient(ellipse at top right, rgba(255,140,66,.08), transparent 60%), var(--sa-paper); } .sa-founder__photo{ position:relative; border-radius:20px; overflow:hidden; aspect-ratio:4/5; box-shadow:var(--sa-shadow-lg); background:var(--sa-coal); } .sa-founder__photo img{ width:100%;height:100%;object-fit:cover;display:block; transform:scale(1.02); transition:transform 6s linear; } .sa-founder__photo:hover img{transform:scale(1.08)} .sa-founder__photo::before{ content:'';position:absolute;inset:0;z-index:2; background:linear-gradient(135deg, rgba(255,140,66,.1), transparent 50%, rgba(26,14,10,.45) 100%); pointer-events:none; } .sa-founder__badge{ position:absolute;left:20px;bottom:20px;z-index:3; background:var(--sa-grad-warm); color:#fff; padding:.9rem 1.2rem; border-radius:14px; box-shadow:0 15px 40px rgba(193,39,45,.4); } .sa-founder__badge strong{ display:block;font-family:var(--sa-font-display); font-style:italic;font-size:1.3rem;line-height:1.1; } .sa-founder__badge span{ font-size:.8rem;opacity:.92;letter-spacing:.05em;text-transform:uppercase; } .sa-founder__quote{ position:relative; padding:2rem 2.2rem; background:#fff; border-radius:18px; box-shadow:var(--sa-shadow-md); border-left:4px solid var(--sa-tangerine); } .sa-founder__quote > i{ font-size:2rem; color:var(--sa-orange); opacity:.4; margin-bottom:.5rem; display:block; } .sa-founder__quote p{ color:var(--sa-coal); font-size:1rem; line-height:1.75; } .sa-founder__sign{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px dashed var(--sa-line); } .sa-founder__sign strong{ display:block; font-family:var(--sa-font-display); font-style:italic; font-size:1.3rem; background:var(--sa-grad-warm); -webkit-background-clip:text;background-clip:text;color:transparent; } .sa-founder__sign span{ font-size:.85rem;color:var(--sa-slate);letter-spacing:.05em; } .sa-real-strip{ padding:60px 0 30px; background:linear-gradient(180deg, var(--sa-paper) 0%, transparent 100%); } .sa-real-strip__card{ position:relative; aspect-ratio:4/3; border-radius:16px; overflow:hidden; background:var(--sa-coal); box-shadow:var(--sa-shadow-sm); transition:all .4s var(--sa-ease); } .sa-real-strip__card:hover{ transform:translateY(-6px); box-shadow:var(--sa-shadow-lg); } .sa-real-strip__card img{ width:100%;height:100%;object-fit:cover; transition:transform 1s var(--sa-ease), filter .4s; filter:saturate(1.05); } .sa-real-strip__card:hover img{ transform:scale(1.08); filter:saturate(1.15); } .sa-real-strip__card::after{ content:'';position:absolute;inset:0; background:linear-gradient(180deg, transparent 50%, rgba(26,14,10,.7) 100%); pointer-events:none; } .sa-real-strip__caption{ position:absolute;left:14px;bottom:14px;z-index:2; display:flex;align-items:center;gap:.5rem; color:#fff; font-weight:600;font-size:.9rem; letter-spacing:.03em; } .sa-real-strip__caption i{ width:32px;height:32px;border-radius:50%; background:var(--sa-grad-warm); display:flex;align-items:center;justify-content:center; font-size:.85rem; box-shadow:0 6px 16px rgba(193,39,45,.4); } @media (max-width:991.98px){ .sa-founder__photo{aspect-ratio:1/1} } @media (max-width:767.98px){ .sa-founder__quote{padding:1.5rem 1.4rem} .sa-founder__quote p{font-size:.95rem} .sa-real-strip{padding:40px 0 10px} .sa-real-strip__card{aspect-ratio:16/10} }