/* ========================================================================== CREDAI FAIRPRO 2026 — stylesheet ========================================================================== */ /* ---------- DESIGN TOKENS ---------- */ :root{ /* palette taken from the 2026 banner: deep maroon + golden orange */ --brand:#9e1b34; --brand-2:#c42847; --brand-deep:#7a1428; --brand-ink:#3b0f1c; --gold:#f7b32b; --gold-2:#e8890c; --orange:#f7a11a; --cream:#fff9f0; --ink:#241318; --muted:#7c6a6e; --line:rgba(158,27,52,.16); --radius:20px; --shadow-sm:0 4px 18px rgba(59,15,28,.10); --shadow-md:0 18px 50px rgba(59,15,28,.16); --shadow-lg:0 30px 80px rgba(59,15,28,.28); --maxw:1180px; --ease:cubic-bezier(.22,1,.36,1); --nav-h:70px; } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink);background:var(--cream);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:"Sora","Inter",system-ui,sans-serif;line-height:1.1;margin:0} img{max-width:100%;display:block;height:auto} a{color:inherit;text-decoration:none} button{font-family:inherit} .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:"Sora";font-weight:700;font-size:.72rem; letter-spacing:.18em;text-transform:uppercase;color:var(--brand-2);padding:7px 14px;border:1px solid var(--line); border-radius:999px;background:rgba(196,40,71,.06)} .section{padding:clamp(64px,9vw,120px) 0} .center{text-align:center} .grad-text{background:linear-gradient(100deg,var(--brand-2),var(--brand) 40%,var(--gold)); -webkit-background-clip:text;background-clip:text;color:transparent} /* ---------- BUTTONS ---------- */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:"Sora"; font-weight:700;font-size:1rem;padding:15px 30px;border-radius:999px;border:0;cursor:pointer; transition:transform .35s var(--ease),box-shadow .35s var(--ease);will-change:transform} .btn-primary{color:#7a1428;background:linear-gradient(100deg,var(--gold),var(--gold-2));box-shadow:0 10px 30px rgba(231,154,28,.45)} .btn-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 45px rgba(231,154,28,.6)} .btn-dark{color:#fff;background:linear-gradient(100deg,var(--brand-2),var(--brand))} .btn-dark:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 18px 45px rgba(158,27,52,.5)} .btn .shine{position:absolute;inset:0;border-radius:inherit;overflow:hidden} .btn .shine::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg)} .btn:hover .shine::after{animation:shine 1s var(--ease)} @keyframes shine{to{left:140%}} /* ---------- SCROLL PROGRESS ---------- */ .progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;transform:scaleX(0);transform-origin:left; background:linear-gradient(90deg,var(--brand-2),var(--gold));box-shadow:0 0 12px rgba(245,185,63,.6)} /* ========================================================================== HERO — full banner shown at its natural ratio; form sits in the banner's white box ========================================================================== */ .hero{position:relative;background:var(--orange);isolation:isolate} /* --- banner slider --- */ .hero__slider{position:relative;z-index:0} /* all slides share one grid cell => container height = tallest slide, no layout jump */ .slides{display:grid} .slide{grid-area:1/1;opacity:0;transition:opacity .8s var(--ease);pointer-events:none} .slide.on{opacity:1;pointer-events:auto} .slide img{width:100%;height:auto;display:block} /* arrows: vertically centred on the left and right edges of the banner */ .sl-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3; width:46px;height:46px;display:grid;place-items:center;cursor:pointer;border:0; font-size:1.7rem;line-height:1;font-weight:700;color:#fff;background:rgba(59,15,28,.55); transition:background .25s var(--ease),box-shadow .25s var(--ease)} .sl-arrow:hover{background:var(--brand);box-shadow:0 8px 22px rgba(59,15,28,.45)} .sl-prev{left:16px} .sl-next{right:10px} /* the form occupies the banner's right zone from 68.5% - keep the next-arrow clear of it */ @media(min-width:1100px){ .sl-next{right:6px;width:38px;height:38px;font-size:1.4rem} } @media(max-width:560px){ .sl-arrow{width:34px;height:34px;font-size:1.25rem} .sl-prev{left:8px}.sl-next{right:8px} } /* --- the registration panel (compact card) --- */ .hero__form-in{background:#fff;border:1px solid rgba(158,27,52,.18);box-shadow:var(--shadow-lg);padding:20px} .hero__form-in .tag{display:block;color:var(--brand-2);font-weight:800;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase} .hero__form-in h3{font-size:1.15rem;font-weight:800;color:var(--brand-ink);margin:2px 0 2px} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px} /* DESKTOP + LAPTOP (>=1100px): the card sits in the banner's blank orange zone. Measured from the artwork: plain orange spans x 69%->96%, y 21%->71%. All values are % of the banner, so the card stays locked to that zone at EVERY resolution (1100, 1280, 1440, 1600, 1920, 2560...). The form's own sizing is vw-based so it shrinks with the banner instead of overflowing. */ @media(min-width:1100px){ /* smaller card, right-aligned inside the blank zone (zone = x 69%-96%, y 21%-71%) */ .hero__form{position:absolute;left:74.5%;top:24%;width:21%;height:44%; z-index:2;display:flex;align-items:stretch} /* centre the form block vertically inside the card */ .hero__form-in{width:100%;max-height:100%;overflow-y:auto; padding:clamp(8px,.8vw,16px) clamp(9px,.85vw,17px); display:flex;flex-direction:column;justify-content:center} /* fluid + compact: every dimension tracks the viewport so it always fits */ .hero__form-in .cdl h3{font-size:clamp(11px,.9vw,17px);margin:0 0 clamp(2px,.3vw,6px)} .hero__form-in .cdl{margin-top:0} .hero__form-in .cdl .cedilla-form{gap:clamp(3px,.35vw,7px)} .hero__form-in .cdl .cedilla-field::before{left:clamp(7px,.6vw,12px);width:clamp(10px,1vw,18px); font-size:clamp(8px,.6vw,12px)} .hero__form-in .cdl .cedilla-form input, .hero__form-in .cdl .cedilla-form select{ padding:clamp(5px,.45vw,9px) clamp(7px,.55vw,12px) clamp(5px,.45vw,9px) clamp(21px,1.7vw,32px) !important; font-size:clamp(9px,.68vw,13px)} .hero__form-in .cdl .cedilla-form select{padding-right:clamp(18px,1.5vw,26px) !important} .hero__form-in .cdl .cedilla-form .cedilla-submit, .hero__form-in .cdl .cedilla-form button[type="submit"]{ padding:clamp(6px,.55vw,10px) 12px !important; font-size:clamp(10px,.7vw,13px);margin-top:clamp(1px,.2vw,4px);box-shadow:none} .hero__form-in .reg-note{font-size:clamp(7px,.48vw,10px);margin-top:clamp(2px,.3vw,6px)} } /* TABLET / MOBILE (<1100px): the banner is too small to hold a usable form — show the FULL banner, then the form beneath it. */ @media(max-width:1099px){ .hero{background:var(--cream);padding-bottom:clamp(30px,5vw,52px)} .slide img{width:100%;height:auto} /* whole artwork visible, never cropped */ .hero__form{position:relative;z-index:2;width:100%;max-width:520px; margin:clamp(22px,4vw,34px) auto 0;padding-inline:clamp(16px,4vw,24px)} .hero__form-in{width:100%;padding:clamp(22px,4vw,30px)} .hero__form-in h3{font-size:1.32rem} .field input{padding:14px 14px 14px 42px;font-size:.95rem} } /* ---------- DECORATIVE BLOBS (why / cta) ---------- */ .mesh{position:absolute;inset:0;overflow:hidden;pointer-events:none} .blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;mix-blend-mode:screen;animation:blob 18s ease-in-out infinite} .blob.b1{width:46vw;height:46vw;left:-10vw;top:-10vw;background:radial-gradient(circle,#f7a11a,transparent 65%)} .blob.b2{width:40vw;height:40vw;right:-8vw;top:10vh;background:radial-gradient(circle,#f7b32b,transparent 65%);opacity:.4;animation-delay:-6s} .blob.b3{width:34vw;height:34vw;left:30vw;bottom:-12vw;background:radial-gradient(circle,#c42847,transparent 65%);animation-delay:-11s} @keyframes blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(4vw,3vh) scale(1.08)}66%{transform:translate(-3vw,5vh) scale(.96)}} /* ---------- MARQUEE ---------- */ .marquee{background:linear-gradient(100deg,var(--brand-2),var(--brand));color:#fff;padding:16px 0;overflow:hidden;white-space:nowrap} .marquee__track{display:inline-flex;gap:44px;animation:scroll 26s linear infinite;will-change:transform} .marquee:hover .marquee__track{animation-play-state:paused} .marquee span{font-family:"Sora";font-weight:700;font-size:1rem;display:inline-flex;align-items:center;gap:44px} .marquee span::after{content:"\2726";color:var(--gold)} @keyframes scroll{to{transform:translateX(-50%)}} /* ---------- SECTION HEAD ---------- */ .sec-head{max-width:640px;margin:0 auto clamp(38px,6vw,60px)} .sec-head h2{font-size:clamp(1.9rem,4.2vw,3rem);font-weight:800;letter-spacing:-.02em;margin:16px 0 14px} .sec-head p{color:var(--muted);font-size:1.06rem} /* ---------- FORM FIELDS (used by the hero registration panel) ---------- */ .field{position:relative;margin-top:10px} .field input{width:100%;padding:11px 12px 11px 36px;border:1.5px solid var(--line);font-size:.88rem;font-family:inherit; background:#fffaf3;transition:border .25s,box-shadow .25s;color:var(--ink)} .field input:focus{outline:0;border-color:var(--brand-2);box-shadow:0 0 0 3px rgba(196,40,71,.14);background:#fff} .field .fic{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:.9rem;opacity:.6} .field.err input{border-color:#e5484d;box-shadow:0 0 0 3px rgba(229,72,77,.12)} .field .msg{color:#e5484d;font-size:.7rem;margin-top:3px;display:none;font-weight:600} .field.err .msg{display:block} .hero__form-in .btn{width:100%;margin-top:14px;padding:12px 20px;font-size:.9rem} .reg-note{text-align:center;font-size:.68rem;color:var(--muted);margin-top:8px} .reg-success{display:none;text-align:center;padding:16px 4px} .reg-success.show{display:block;animation:pop .5s var(--ease)} .reg-success .check{width:54px;height:54px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#38e08a,#12b76a);color:#fff;font-size:1.7rem;box-shadow:0 12px 30px rgba(18,183,106,.4)} .reg-success .rs-tag{font-family:"Sora";font-weight:800;font-size:.78rem;line-height:1.35;color:var(--brand-2);margin:0 0 8px} .reg-success h3{font-size:1.08rem;line-height:1.25;color:var(--brand-deep)} .reg-success p{font-size:.78rem;line-height:1.5;color:var(--muted);margin:6px 0 0} .reg-success .rs-note{margin-top:12px;padding:9px 10px;font-weight:700;color:var(--brand-ink); background:rgba(247,179,43,.16);border:1px solid rgba(231,137,12,.35)} .reg-success .rs-sign{margin-top:10px;color:var(--brand-ink);font-weight:600} .reg-success .rs-sign b{color:var(--brand)} /* if the confirmation message is taller than the card, scroll inside it instead of spilling over the banner */ @keyframes pop{0%{transform:scale(.8);opacity:0}100%{transform:scale(1);opacity:1}} /* ---------- BENEFITS (what you get — replaces the old form section) ---------- */ .benefits{position:relative;overflow:hidden;background:linear-gradient(180deg,#fffdf9,#ffeeda)} .benefits::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(42vw 42vw at 6% 10%,rgba(247,161,26,.20),transparent 60%), radial-gradient(40vw 40vw at 96% 92%,rgba(196,40,71,.14),transparent 60%)} .benefits::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.55; background-image:radial-gradient(rgba(158,27,52,.10) 1.1px,transparent 1.1px);background-size:24px 24px; -webkit-mask-image:radial-gradient(circle at 50% 40%,#000,transparent 72%); mask-image:radial-gradient(circle at 50% 40%,#000,transparent 72%)} .benefits .container{position:relative;z-index:1} .reg-perks{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:14px 26px;max-width:820px} .reg-perks li{display:flex;align-items:center;gap:12px;font-weight:600;color:var(--brand-ink);text-align:left} .reg-perks .tick{flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(135deg,var(--gold),var(--gold-2));color:#7a1428;font-size:.8rem;font-weight:800} .reg-stats{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:40px auto 0;max-width:820px} .reg-stats .rs{flex:1 1 190px;text-align:center;background:rgba(255,255,255,.78);border:1px solid var(--line); padding:20px 18px;box-shadow:var(--shadow-sm)} .reg-stats b{display:block;font-family:"Sora";font-weight:800;font-size:1.9rem;line-height:1;color:var(--brand)} .reg-stats b i{font-style:normal;color:var(--gold-2)} .reg-stats span{font-size:.84rem;font-weight:600;color:var(--muted)} .benefits .btn{display:flex;margin:34px auto 0;width:max-content} /* ---------- WHY / FEATURES ---------- */ .why{background:var(--brand-ink);color:#fff;position:relative;overflow:hidden} .why .blob{opacity:.25} .why .sec-head p{color:rgba(255,255,255,.72)} .why .eyebrow{color:#ffd77a;border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)} /* flex + centre so the final row (5 cards = 3 + 2) is centred, never left-hanging */ .feat-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;position:relative;z-index:2} .feat{flex:0 1 calc((100% - 44px) / 3);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius);padding:30px 26px;transition:transform .45s var(--ease),background .45s,border .45s} .feat:hover{transform:translateY(-8px);background:rgba(255,255,255,.09);border-color:rgba(245,185,63,.4)} .feat .fi{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px;color:#ffd77a; background:linear-gradient(135deg,rgba(245,185,63,.24),rgba(196,40,71,.26));border:1px solid rgba(255,255,255,.14);transition:transform .45s var(--ease)} .feat:hover .fi{transform:translateY(-2px) scale(1.06)} .feat .fi svg{width:28px;height:28px} .feat h3{font-size:1.22rem;font-weight:700;margin-bottom:8px} .feat p{color:rgba(255,255,255,.7);font-size:.96rem;margin:0} /* ---------- STATS ---------- */ .stats{background:linear-gradient(180deg,#fff,#fff2e2)} .stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 22px;text-align:center;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s;position:relative;overflow:hidden} .stat:hover{transform:translateY(-6px);box-shadow:var(--shadow-md)} .stat img{width:56px;height:56px;object-fit:contain;margin:0 auto 14px} .stat .num{font-family:"Sora";font-size:clamp(2.1rem,4vw,2.8rem);font-weight:800;color:var(--brand);line-height:1;font-variant-numeric:tabular-nums} .stat .num .plus{color:var(--gold-2)} .stat p{margin:8px 0 0;font-weight:600;color:var(--muted)} /* ---------- CATEGORIES ---------- */ .cats .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .cat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px 22px;text-align:center;transition:transform .45s var(--ease),box-shadow .45s,background .45s;position:relative;overflow:hidden;cursor:default} .cat::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--brand-2),var(--brand));opacity:0;transition:opacity .45s;z-index:0} .cat:hover{transform:translateY(-8px);box-shadow:var(--shadow-md)} .cat:hover::before{opacity:1} .cat>*{position:relative;z-index:1;transition:color .4s} .cat .cat-ic{width:74px;height:74px;margin:0 auto 16px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#fff2e2,#ffe4c7);transition:background .4s} .cat:hover .cat-ic{background:rgba(255,255,255,.16)} .cat .cat-ic img{width:42px;height:42px;object-fit:contain} .cat .cat-ic img.w{display:none} .cat:hover .cat-ic img.c{display:none} .cat:hover .cat-ic img.w{display:block} .cat h3{font-size:1.1rem;font-weight:700;color:var(--brand-ink)} .cat:hover h3{color:#fff} /* clickable "& many more..." tile -> jumps to the registration form */ .cat--cta{display:grid;place-content:center;gap:8px;cursor:pointer; background:linear-gradient(135deg,var(--brand-2),var(--brand))} .cat--cta h3,.cat--cta:hover h3{color:#fff} .cat--cta .cat__go{font-family:"Sora";font-weight:700;font-size:.82rem;letter-spacing:.06em;color:#ffd77a; transition:transform .35s var(--ease)} .cat--cta:hover .cat__go{transform:translateX(4px)} /* ---------- PARTICIPATING DEVELOPERS (uniform tiles, alphabetical order) ---------- */ .sponsors{background:linear-gradient(180deg,#fff,#fff2e2)} .dev-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px} /* each logo file is pre-rendered big + centred on an identical 600x400 (3:2) white tile, so no CSS padding is needed here — that would only shrink them again */ .dev{background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);overflow:hidden;padding:0; transition:transform .4s var(--ease),box-shadow .4s,border-color .4s} .dev:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(196,40,71,.35)} .dev img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:contain; transition:transform .45s var(--ease)} .dev:hover img{transform:scale(1.06)} /* ---------- CTA BAND ---------- */ .cta-band{background:radial-gradient(120% 140% at 50% 0%,#8e1a30,#3b0f1c);color:#fff;text-align:center;position:relative;overflow:hidden} .cta-band .blob{opacity:.3} .cta-band h2{font-size:clamp(2rem,5vw,3.4rem);font-weight:800;position:relative;z-index:2} .cta-band p{color:rgba(255,255,255,.8);font-size:1.12rem;max-width:52ch;margin:18px auto 30px;position:relative;z-index:2} .cta-band .btn{position:relative;z-index:2} /* ---------- FOOTER ---------- */ .footer{background:#2a0d15;color:rgba(255,255,255,.72);padding:60px 0 30px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;margin-bottom:40px} .footer .foot-logo{width:200px;height:auto;margin-bottom:16px} .footer h4{color:#fff;font-family:"Sora";font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:16px} .footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px} .footer a:hover{color:var(--gold)} .foot-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.86rem} /* ========================================================================== CEDILLA CRM FORM — restyled to match the site's existing form design (embed.js renders plain DOM, so we can theme it directly) ========================================================================== */ .cdl{text-align:left;margin-top:12px} .cdl .cedilla-form{display:grid;gap:10px} .cdl .cedilla-field{position:relative;display:grid;gap:4px} /* the CRM renders its own

title — style it as the card's header */ .cdl h3{font-family:"Sora";font-weight:800;font-size:1.05rem;color:var(--brand-ink); text-align:center;margin:0 0 4px;line-height:1.25} /* labels are visually hidden (inputs use placeholders + icons) but kept for screen readers */ .cdl label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} /* icon in front of each field (Name, Mobile, Email, Property type). Anchored to the top of the control, not the field's centre, so it can't drift. */ .cdl .cedilla-field::before{position:absolute;left:12px;top:50%;transform:translateY(-50%); width:18px;text-align:center;line-height:1; font-size:.95rem;opacity:.55;pointer-events:none;z-index:1;content:"✏️"} .cdl .cedilla-field:nth-of-type(1)::before{content:"👤"} .cdl .cedilla-field:nth-of-type(2)::before{content:"📱"} .cdl .cedilla-field:nth-of-type(3)::before{content:"✉️"} .cdl .cedilla-field:nth-of-type(4)::before{content:"🏠"} .cdl .cedilla-captcha::before{content:none} /* custom caret for the select (native arrow removed by appearance:none) */ .cdl .cedilla-field:has(select)::after{content:"";position:absolute;right:14px;top:50%; width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:translateY(-70%) rotate(45deg);pointer-events:none} /* NOTE: embed.js injects its own