/* ============================================= SELSTA VILLAGE — POP theme layer Loads AFTER style.css. Scoped to . Vivid orange / yellow / blue, sticker & pop-art motifs. ============================================= */ :root{ --pop-orange:#f3892a; --pop-yellow:#f6c614; --pop-blue:#2f80c4; --pop-teal:#25b0c6; --pop-red:#e5554a; --pop-green:#79bf3c; --pop-ink:#3d3324; --pop-cream:#fff7ea; } body.pop{ background:var(--pop-cream); color:var(--pop-ink); } .pop ::selection{ background:var(--pop-yellow); } /* ---- section labels become pop chips ---- */ .pop .lbl{ display:inline-block; font-family:var(--ff-sans); font-weight:700; font-size:11px; letter-spacing:.14em; color:var(--pop-ink); background:var(--pop-yellow); border:2px solid var(--pop-ink); border-radius:100px; padding:5px 13px; margin-bottom:16px; box-shadow:2px 2px 0 var(--pop-ink); text-transform:uppercase; } /* ---- buttons: chunky sticker pills ---- */ .pop .btn{ border-radius:100px; font-weight:700; border:2.5px solid var(--pop-ink); box-shadow:3px 3px 0 var(--pop-ink); transition:transform .12s ease, box-shadow .12s ease; height:52px; } .pop .btn:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 var(--pop-ink); opacity:1; } .pop .btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--pop-ink); } .pop .btn--primary{ background:var(--pop-orange); color:#fff; } .pop .btn--outline-w{ background:#fff; color:var(--pop-ink); border-color:var(--pop-ink); } .pop .btn--outline{ background:#fff; color:var(--pop-ink); } .pop .hdr-cta{ border-radius:100px; font-weight:700; border:2px solid var(--pop-ink); box-shadow:2px 2px 0 var(--pop-ink); } .pop .hdr:not(.scrolled) .hdr-cta{ background:var(--pop-yellow); color:var(--pop-ink); border-color:var(--pop-ink); } .pop .hdr.scrolled .hdr-cta{ background:var(--pop-orange); color:#fff; } .pop .site-logo{ letter-spacing:.02em; } /* ---- decorative pop backgrounds ---- */ .pop-sun{ position:relative; overflow:hidden; } .pop-sun::before{ content:""; position:absolute; inset:-10% -10% auto -10%; height:150%; z-index:0; pointer-events:none; background:repeating-conic-gradient(from 0deg at 50% 22%, rgba(246,198,20,.20) 0deg 5deg, transparent 5deg 11deg); -webkit-mask:radial-gradient(circle at 50% 22%, #000 0, transparent 60%); mask:radial-gradient(circle at 50% 22%, #000 0, transparent 60%); } .pop-sun > *{ position:relative; z-index:1; } .pop-dots{ background-image:radial-gradient(var(--pop-orange) 21%, transparent 23%); background-size:15px 15px; } .pop-stripe{ height:16px; background:repeating-linear-gradient(-45deg, var(--pop-orange) 0 18px, var(--pop-yellow) 18px 36px, var(--pop-blue) 36px 54px, var(--pop-red) 54px 72px); border-top:2px solid var(--pop-ink); border-bottom:2px solid var(--pop-ink); } /* ---- sticker badge & sparkle ---- */ .pop-badge{ display:inline-grid; place-items:center; width:96px; height:96px; border-radius:50%; background:var(--pop-yellow); border:3px solid var(--pop-ink); box-shadow:4px 4px 0 var(--pop-ink); font-family:var(--ff-serif); font-weight:700; line-height:1; text-align:center; } .pop-badge small{ display:block; font-family:var(--ff-sans); font-size:11px; letter-spacing:.14em; margin-bottom:3px; } .pop-badge b{ font-size:26px; } /* ---- headings ---- */ .pop .sec-hd h2, .pop .about-headline{ font-weight:700; } .pop .about-headline{ word-break:keep-all; } .pop .hl{ background:linear-gradient(transparent 58%, var(--pop-yellow) 58% 92%, transparent 92%); padding:0 .12em; } .pop .mark-o{ color:var(--pop-orange); } .pop .mark-b{ color:var(--pop-blue); } /* ---- HERO pop ---- */ .pop .hero-eyebrow{ display:inline-block; background:var(--pop-blue); color:#fff; border:2px solid var(--pop-ink); border-radius:100px; padding:6px 15px; font-family:var(--ff-sans); font-weight:700; letter-spacing:.1em; text-transform:none; box-shadow:2px 2px 0 rgba(0,0,0,.35); } .pop .hero-headline{ text-shadow:3px 4px 0 rgba(30,20,10,.35); } .hero-stickers{ position:absolute; inset:0; z-index:2; pointer-events:none; } .hero-stickers .pop-badge{ position:absolute; top:96px; right:6%; transform:rotate(-11deg); } .spark{ position:absolute; color:var(--pop-yellow); filter:drop-shadow(1px 1px 0 rgba(0,0,0,.3)); font-size:26px; } /* ---- service / pillar cards ---- */ .pop .svc{ border:2.5px solid var(--pop-ink); border-radius:18px; box-shadow:5px 6px 0 var(--pop-ink); background:#fff; overflow:hidden; } .pop .svc:hover{ transform:translate(-2px,-3px); box-shadow:8px 10px 0 var(--pop-ink); } .pop .svc-tag{ background:var(--pop-blue); border:2px solid var(--pop-ink); color:#fff; border-radius:100px; height:26px; font-weight:700; box-shadow:2px 2px 0 var(--pop-ink); } .pop .svc:nth-child(2) .svc-tag{ background:var(--pop-red); } .pop .svc-num{ color:var(--pop-orange); font-weight:700; } .pop .svc-link{ color:var(--pop-ink); font-weight:700; } .pop .services--pillars{ max-width:940px; } /* connector band */ .pop .connector{ border:2.5px solid var(--pop-ink); border-radius:20px; box-shadow:6px 7px 0 var(--pop-ink); background:var(--pop-yellow); } .pop .connector-body .lbl{ background:#fff; } .pop .connector-body h3 em{ color:var(--pop-orange); font-style:normal; } /* ---- map / 3D feature ---- */ .featmap{ display:grid; grid-template-columns:1fr 1fr; gap:26px; } .featmap a{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:240px; padding:28px; border:2.5px solid var(--pop-ink); border-radius:20px; box-shadow:6px 7px 0 var(--pop-ink); color:var(--pop-ink); transition:transform .14s ease, box-shadow .14s ease; overflow:hidden; } .featmap a:hover{ transform:translate(-2px,-3px); box-shadow:9px 11px 0 var(--pop-ink); } .featmap a::before{ content:""; position:absolute; inset:0; z-index:0; background-image:radial-gradient(rgba(0,0,0,.10) 20%, transparent 22%); background-size:16px 16px; opacity:.5; } .featmap .fm-map{ background:linear-gradient(135deg,#ffd79b,#8fc44e); } .featmap .fm-3d{ background:linear-gradient(135deg,#8cc0e2,#f3892a); } .featmap .fm-emoji{ position:relative; z-index:1; font-size:52px; line-height:1; margin-bottom:auto; filter:drop-shadow(2px 2px 0 rgba(0,0,0,.18)); } .featmap h3{ position:relative; z-index:1; font-family:var(--ff-serif); font-size:24px; font-weight:700; margin-bottom:8px; } .featmap p{ position:relative; z-index:1; font-size:13.5px; color:var(--pop-ink); line-height:1.8; margin-bottom:14px; opacity:.9; } .featmap .fm-go{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:7px; font-weight:700; font-size:13px; background:#fff; border:2px solid var(--pop-ink); border-radius:100px; padding:7px 15px; align-self:flex-start; box-shadow:2px 2px 0 var(--pop-ink); } /* ---- gallery pop frames ---- */ .pop .gal-item{ border:2.5px solid var(--pop-ink); border-radius:12px; box-shadow:3px 4px 0 var(--pop-ink); } .pop .gal-item:nth-child(3n){ transform:rotate(-1.4deg); } .pop .gal-item:nth-child(4n){ transform:rotate(1.4deg); } .pop .gal-item:hover{ transform:rotate(0) scale(1.02); box-shadow:5px 6px 0 var(--pop-ink); z-index:2; } /* ---- CTA pop band ---- */ .pop .cta-band{ background:var(--pop-blue); } .pop .cta-band-bg{ opacity:.22; mix-blend-mode:luminosity; } .pop .cta-band::after{ background:linear-gradient(rgba(47,128,196,.72), rgba(37,176,198,.78)); } .pop .cta-band .lbl{ background:var(--pop-yellow); } /* ---- footer stripe ---- */ .pop .ftr{ border-top:none; } .pop .ftr-col h4{ color:var(--pop-yellow); } @media (max-width:900px){ .featmap{ grid-template-columns:1fr; } } @media (max-width:680px){ .hero-stickers .pop-badge{ width:74px; height:74px; top:78px; right:5%; } .hero-stickers .pop-badge b{ font-size:20px; } .spark{ font-size:20px; } }