/* ============================================================ ROYAL THEME LAYER · Tri Stone Industries Palette of authority: royal navy + champagne gold + ivory. Elegant serif display, restrained accents, tight alignment. Loaded LAST in so it overrides the base tokens. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&display=swap'); /* ---------- 1. TOKENS ---------- */ :root{ --accent:#17335F; /* royal navy-blue (primary) */ --accent2:#254A85; /* lighter royal (depth) */ --royal-deep:#0B1B3A; /* midnight (dark surfaces) */ --gold:#C2A15B; /* champagne gold (decorative) */ --gold-bright:#D8BC7E; --gold-ink:#8A6C2C; /* readable gold text on light */ --accent-light:#eef1f7; /* cool navy tint */ --accent-light2:#f6f2e9; /* warm gold tint */ --dark:#0B1B3A;--dark2:#132648; --bg:#ffffff;--bg2:#f8f7f3;--bg3:#eef0f4;--bg4:#e1e5ee; --border:rgba(20,30,60,.12);--border2:rgba(20,30,60,.075); --text:#161A26;--text2:#48506180;--text2:#485061;--text3:#8b91a1; --r:14px;--r2:10px;--r3:8px; --shadow:0 1px 2px rgba(20,30,60,.06),0 10px 26px rgba(20,30,60,.06); --shadow-md:0 6px 18px rgba(20,30,60,.08),0 20px 46px rgba(23,51,95,.10); --shadow-lg:0 28px 74px rgba(23,51,95,.18); --tr:all .34s cubic-bezier(.22,1,.36,1); } ::selection{background:rgba(23,51,95,.14);color:var(--text)} ::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px} #sp{background:linear-gradient(90deg,var(--accent),var(--gold))!important;height:2px!important} /* ---------- 2. ELEGANT SERIF DISPLAY ---------- */ .s-title,.ph h1{ font-family:'Playfair Display',Georgia,serif!important; font-weight:700!important;letter-spacing:-.01em!important;line-height:1.1!important; color:var(--accent)!important;-webkit-text-fill-color:currentColor!important; background:none!important; } .section-dark .s-title{color:#fff!important} /* eyebrows in gold — the jewel accent */ .eyebrow,.ph-eyebrow{color:var(--gold-ink)!important;font-weight:600} .eyebrow::before,.ph-eyebrow::before{background:var(--gold)!important;height:1.5px!important;width:26px!important} .section-dark .eyebrow{color:var(--gold-bright)!important} .section-dark .eyebrow::before{background:var(--gold)!important} /* ---------- 3. NAV (clean full-width bar, aligned to 5% grid) ---------- */ .nav{ background:rgba(255,255,255,.86)!important; border-bottom:1px solid var(--border2)!important; backdrop-filter:blur(20px) saturate(160%)!important; } .nav.scrolled{background:rgba(255,255,255,.97)!important;box-shadow:0 1px 14px rgba(20,30,60,.09)!important} .nav-brand{color:var(--accent)!important} .nav-links a{color:var(--text2)!important} .nav-links a:hover,.nav-links a.active{color:var(--accent)!important} .nav-links a::after{background:var(--gold)!important;height:2px!important} .nav-cta{ background:linear-gradient(135deg,var(--gold-bright),var(--gold))!important; color:var(--royal-deep)!important; border-radius:9px!important;padding:9px 22px!important; font-weight:800!important;letter-spacing:.01em; box-shadow:0 4px 14px rgba(194,161,91,.42)!important; border:1px solid rgba(138,108,44,.35)!important; } .nav-cta:hover{background:var(--royal-deep)!important;color:#fff!important;border-color:var(--gold)!important;transform:translateY(-1px);box-shadow:0 6px 20px rgba(11,27,58,.4)!important} .nav-mob a:hover{background:var(--accent-light)!important;color:var(--accent)!important} /* ---------- 4. BUTTONS (crisp, confident) ---------- */ .btn{border-radius:9px!important;font-weight:600!important} .btn-primary{ background:var(--accent)!important;color:#fff!important; box-shadow:0 3px 14px rgba(23,51,95,.26)!important; border:1px solid transparent!important; } .btn-primary:hover{background:var(--royal-deep)!important;border-color:var(--gold)!important;transform:translateY(-2px);box-shadow:0 8px 24px rgba(23,51,95,.34)!important} .btn-outline{background:#fff!important;color:var(--accent)!important;border:1.5px solid var(--accent)!important} .btn-outline:hover{background:var(--accent)!important;color:#fff!important;transform:translateY(-2px)} .btn-dark{background:var(--royal-deep)!important} /* ---------- 5. CARDS (structured, gold on hover) ---------- */ .card{border-radius:var(--r)!important;border:1px solid var(--border2)!important;box-shadow:var(--shadow)!important;position:relative;overflow:hidden} .card::before{content:'';position:absolute;inset:0 0 auto 0;height:2px;background:var(--gold);opacity:0;transition:opacity .34s ease} .card:hover{transform:translateY(-4px)!important;box-shadow:var(--shadow-md)!important;border-color:rgba(23,51,95,.22)!important} .card:hover::before{opacity:1} .card-icon{border-radius:11px!important;background:var(--accent-light)!important;border:1px solid rgba(23,51,95,.12)!important;color:var(--accent)!important} .card:hover .card-icon{background:var(--accent)!important;color:var(--gold-bright)!important;border-color:transparent!important} /* ---------- 6. PAGE HERO BANNER (ivory + subtle single-tone glow) ---------- */ .ph{ background:linear-gradient(135deg,#f3f5fa 0%,#faf9f5 60%,#f8f7f3 100%)!important; border-bottom:1px solid var(--border2)!important;position:relative;overflow:hidden; } .ph::before{ content:'';position:absolute;right:-3%;top:50%;transform:translateY(-50%); width:460px;height:460px;border-radius:50%; background:radial-gradient(circle,rgba(23,51,95,.07),transparent 66%);pointer-events:none; } .ph::after{ content:'';position:absolute;left:20%;bottom:-45%;width:360px;height:360px;border-radius:50%; background:radial-gradient(circle,rgba(194,161,91,.10),transparent 62%);pointer-events:none; } .ph>*{position:relative;z-index:1} /* ---------- 7. BADGES (navy / gold / muted jewel tones) ---------- */ .badge{font-weight:600} .badge-blue{background:var(--accent-light)!important;color:var(--accent)!important;border:1px solid rgba(23,51,95,.16)!important} .badge-purple{background:#f1eef6!important;color:#4b3579!important;border:1px solid rgba(75,53,121,.18)!important} .badge-green{background:#edf3ee!important;color:#2f5e46!important;border:1px solid rgba(47,94,70,.18)!important} .badge-orange{background:var(--accent-light2)!important;color:var(--gold-ink)!important;border:1px solid rgba(194,161,91,.3)!important} /* ---------- 8. FORMS ---------- */ .nl-form button{background:var(--accent)!important} .nl-form button:hover{background:var(--royal-deep)!important} input:focus,select:focus,textarea:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px rgba(23,51,95,.13)!important} /* ---------- 9. AI WIDGET ---------- */ .ai-fab{background:var(--accent)!important;box-shadow:0 5px 20px rgba(23,51,95,.4)!important} .ai-fab:hover{background:var(--royal-deep)!important} .ai-av{background:linear-gradient(135deg,var(--accent),var(--accent2))!important} .ai-msg.user{background:var(--accent)!important} .ai-send{background:var(--accent)!important} .ai-send:hover{background:var(--royal-deep)!important} .ai-sug:hover{border-color:var(--accent)!important;color:var(--accent)!important;background:var(--accent-light)!important} /* ---------- 10. FOOTER (midnight + gold hairline) ---------- */ .footer{background:var(--royal-deep)!important;position:relative} .footer::before{content:'';position:absolute;top:0;left:5%;right:5%;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.8} .section-dark{background:var(--royal-deep)!important} /* ---------- 11. HOMEPAGE HERO ---------- */ section[style*="min-height:100vh"]{position:relative} section[style*="min-height:100vh"]::before{ content:'';position:absolute;left:-5%;top:6%;width:480px;height:480px;border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle,rgba(23,51,95,.09),transparent 62%); } section[style*="min-height:100vh"]::after{ content:'';position:absolute;right:-3%;bottom:6%;width:420px;height:420px;border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle,rgba(194,161,91,.10),transparent 62%); } /* hero headline → elegant serif; emphasised line in gold */ section[style*="min-height:100vh"] h1{ font-family:'Playfair Display',Georgia,serif!important;font-weight:700!important; letter-spacing:-.01em!important;color:var(--text)!important; } section[style*="min-height:100vh"] h1 span[style*="background:linear-gradient"]{ background:none!important;-webkit-text-fill-color:var(--gold-ink)!important;color:var(--gold-ink)!important; } section[style*="min-height:100vh"] #hero-cards>div{border-radius:12px!important} section[style*="min-height:100vh"] #hero-cards>div:last-child{background:var(--accent)!important} .sc-chip.active{background:var(--accent)!important;color:#fff!important;border-color:transparent!important} /* ---------- 12. POLISH ---------- */ .grad-line{background:linear-gradient(90deg,transparent,var(--gold),transparent)!important;opacity:.6!important} a{-webkit-tap-highlight-color:transparent} @media(prefers-reduced-motion:reduce){.card:hover,.btn:hover,.nav-cta:hover{transform:none!important}} /* ═══════════ NAV PRICING DROPDOWN (Pricing ▸ Software/Hardware ▸ products) ═══════════ */ .nav-dd{position:relative} .nav-dd>.nav-dd-top{display:inline-flex;align-items:center;gap:4px;cursor:pointer} .nav-dd>.nav-dd-top .nav-dd-caret{font-size:1.05em;transition:transform .25s ease} .nav-dd:hover>.nav-dd-top .nav-dd-caret{transform:rotate(180deg)} .nav-dd-panel{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:220px;background:#fff;border:1px solid var(--border2);border-radius:14px;box-shadow:0 16px 46px rgba(0,0,0,.14);padding:8px;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .2s ease;z-index:1200} .nav-dd-panel::before{content:'';position:absolute;top:-12px;left:0;right:0;height:14px} .nav-dd:hover .nav-dd-panel{opacity:1;visibility:visible;transform:translateX(-50%) translateY(6px)} .nav-dd-row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border-radius:9px;font-family:var(--font-d);font-size:.86rem;font-weight:600;color:var(--text2);cursor:pointer;transition:var(--tr)} .nav-dd-row>span{display:inline-flex;align-items:center;gap:9px} .nav-dd-row>span>i:first-child{font-size:1.05rem;color:var(--accent)} .nav-dd-row .nav-dd-arr{font-size:1.05rem;color:var(--text3)} .nav-dd-row:hover{background:var(--accent-light);color:var(--accent)} .nav-dd-row:hover .nav-dd-arr{color:var(--accent)} .nav-dd-fly{position:absolute;top:-8px;left:calc(100% + 8px);min-width:238px;background:#fff;border:1px solid var(--border2);border-radius:14px;box-shadow:0 16px 46px rgba(0,0,0,.14);padding:8px;opacity:0;visibility:hidden;transform:translateX(8px);transition:opacity .2s ease,transform .2s ease;z-index:1300} .nav-dd-fly::before{content:'';position:absolute;left:-12px;top:0;bottom:0;width:14px} .nav-dd-row:hover .nav-dd-fly{opacity:1;visibility:visible;transform:translateX(0)} .nav-dd-fly a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;font-family:var(--font-d);font-size:.84rem;font-weight:600;color:var(--text2);transition:var(--tr);text-decoration:none} .nav-dd-fly a>i{font-size:1.05rem;color:var(--accent);flex-shrink:0} .nav-dd-fly a:hover{background:var(--accent-light);color:var(--accent)} .nav-dd-fly a::after{display:none!important} .nav-dd-fly a small{display:block;font-family:var(--font-m);font-size:.62rem;font-weight:500;color:var(--text3);letter-spacing:.02em;margin-top:1px} .nav-dd-fly a .nav-dd-soon{margin-left:auto;font-family:var(--font-m);font-size:.56rem;font-weight:700;letter-spacing:.06em;background:#e2e8f0;color:#64748b;padding:2px 7px;border-radius:100px} /* Mobile nested dropdown (uses
) */ .nmob-dd{border-radius:8px} .nmob-dd>summary,.nmob-dd2>summary{list-style:none;cursor:pointer;padding:11px 14px;border-radius:8px;color:var(--text2);font-size:.9rem;font-weight:600;font-family:var(--font-d);display:flex;align-items:center;justify-content:space-between;transition:var(--tr)} .nmob-dd>summary::-webkit-details-marker,.nmob-dd2>summary::-webkit-details-marker{display:none} .nmob-dd>summary::after,.nmob-dd2>summary::after{content:'\ea4e';font-family:'remixicon';font-size:1.1rem;color:var(--text3);transition:transform .25s ease} .nmob-dd[open]>summary::after,.nmob-dd2[open]>summary::after{transform:rotate(180deg)} .nmob-dd>summary:hover,.nmob-dd2>summary:hover{background:var(--accent-light);color:var(--accent)} .nmob-dd-body{padding:2px 0 4px 8px;margin-left:6px;border-left:2px solid var(--border2);display:flex;flex-direction:column;gap:2px} .nmob-dd2{margin:0} .nmob-dd2 .nmob-dd2-body{padding:2px 0 4px 8px;margin-left:6px;border-left:2px solid var(--border2);display:flex;flex-direction:column} .nmob-dd-body a,.nmob-dd2 a{padding:9px 14px;border-radius:8px;color:var(--text2);font-size:.85rem;font-weight:600;font-family:var(--font-d);display:flex;align-items:center;justify-content:space-between;gap:8px;transition:var(--tr);text-decoration:none} .nmob-dd-body a:hover,.nmob-dd2 a:hover{background:var(--accent-light);color:var(--accent)} .nmob-dd a .nav-dd-soon{font-family:var(--font-m);font-size:.56rem;font-weight:700;letter-spacing:.06em;background:#e2e8f0;color:#64748b;padding:2px 7px;border-radius:100px}