/* Templates Palace — Style Layer Customize primary brand colors and basic scales below. This file is safe to edit/update via child theme or plugin updates. */ :root { --tp-primary: #2563eb; --tp-accent: #6d28d9; --tp-bg: #ffffff; --tp-surface: #f7f8fa; --tp-text: #0f172a; --tp-muted: #64748b; --tp-success: #16a34a; --tp-warning: #f59e0b; --tp-danger: #ef4444; --tp-radius: 1rem; --tp-radius-sm: .625rem; --tp-shadow: 0 10px 20px rgba(2, 6, 23, .08); --tp-ring: 0 0 0 3px rgba(37, 99, 235, .25); --tp-maxw: 1200px; --tp-gap: 1rem; --tp-gap-lg: 1.5rem; --tp-spacing: 1rem; --tp-line: 1.7; } /* Dark mode (toggle by adding data-theme="dark" on or ) */ [data-theme="dark"] { --tp-bg: #0b1020; --tp-surface: #0f172a; --tp-text: #e5e7eb; --tp-muted: #94a3b8; --tp-shadow: 0 10px 20px rgba(0,0,0,.35); --tp-ring: 0 0 0 3px rgba(99, 102, 241, .35); } /* Global reset-ish improvements without being destructive */ html { scroll-behavior: smooth; } body { background: var(--tp-bg); color: var(--tp-text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; line-height: var(--tp-line); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--tp-primary); text-decoration: none; } a:hover { text-decoration: underline; } /* Typography scale */ h1, .tp-h1 { font-size: clamp(2rem, 2.2vw + 1.2rem, 3rem); line-height: 1.15; letter-spacing: -0.01em; } h2, .tp-h2 { font-size: clamp(1.5rem, 1.6vw + 1rem, 2.25rem); line-height: 1.2; } h3, .tp-h3 { font-size: clamp(1.25rem, 1vw + .9rem, 1.5rem); line-height: 1.25; } p { color: var(--tp-text); } .lead { font-size: clamp(1.05rem, .7vw + .9rem, 1.25rem); color: var(--tp-muted); } /* Container helpers */ .container, .wrap, .site-container { max-width: var(--tp-maxw); margin-inline: auto; padding-inline: 1.25rem; } /* Cards */ .card { background: var(--tp-surface); border-radius: var(--tp-radius); box-shadow: var(--tp-shadow); padding: clamp(1rem, 1.5vw, 2rem); border: 1px solid rgba(2,6,23,.06); } /* Buttons (works with Elementor buttons too) */ .button, .btn, .wp-element-button, .elementor-button, .elementor-button-link .elementor-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--tp-primary); color: #fff; border: none; border-radius: var(--tp-radius-sm); padding: .75rem 1rem; font-weight: 600; box-shadow: var(--tp-shadow); transition: transform .15s ease, box-shadow .2s ease, background .2s ease; } .button:hover, .btn:hover, .wp-element-button:hover, .elementor-button:hover { transform: translateY(-1px); text-decoration: none; box-shadow: 0 12px 22px rgba(2,6,23,.12); } .button.is-outline, .btn.is-outline, .elementor-button.elementor-size-sm.is-outline { background: transparent; color: var(--tp-primary); border: 2px solid var(--tp-primary); } .button.is-ghost { background: transparent; color: var(--tp-primary); } .button.is-danger { background: var(--tp-danger); } .button.is-success { background: var(--tp-success); } /* Badges */ .badge { display:inline-block; border-radius: 999px; padding:.25rem .6rem; font-weight:600; font-size:.8rem; background:var(--tp-surface); border:1px solid rgba(2,6,23,.08); } .badge.primary { background:rgba(37,99,235,.1); color:#1e3a8a; border-color:transparent; } /* Forms */ input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], textarea, select { width: 100%; padding: .7rem .9rem; border-radius: .6rem; border: 1px solid rgba(15,23,42,.15); background: #fff; color: var(--tp-text); transition: box-shadow .15s ease, border-color .15s ease; } textarea { min-height: 140px; resize: vertical; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--tp-primary); box-shadow: var(--tp-ring); } label { font-weight: 600; display:block; margin-bottom:.35rem; color: var(--tp-muted); } /* Tables */ table { width: 100%; border-collapse: collapse; } th, td { padding: .8rem 1rem; border-bottom: 1px solid rgba(15,23,42,.08); } thead th { background: var(--tp-surface); text-align: left; } /* Hero / section helpers */ .section { padding: clamp(2rem, 3vw, 4rem) 0; } .section .section-title { margin-bottom: 1rem; } .section .section-subtitle { color: var(--tp-muted); margin-bottom: 1.25rem; } /* Utility classes */ .mt-0{margin-top:0}.mb-0{margin-bottom:0} .mt-2{margin-top:.5rem}.mb-2{margin-bottom:.5rem} .mt-4{margin-top:1rem}.mb-4{margin-bottom:1rem} .mt-6{margin-top:1.5rem}.mb-6{margin-bottom:1.5rem} .mt-8{margin-top:2rem}.mb-8{margin-bottom:2rem} .p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem} .grid { display:grid; gap: var(--tp-gap); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px){ .grid-3,.grid-4{ grid-template-columns: repeat(2, 1fr);} } @media (max-width: 640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns: 1fr; } } .flex { display:flex; gap: var(--tp-gap); } .items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center} .rounded{ border-radius: var(--tp-radius); } .shadow { box-shadow: var(--tp-shadow); } /* Header shrink effect (works with Hello header element) */ .site-header, header.elementor-location-header { position: sticky; top: 0; z-index: 999; backdrop-filter: saturate(1.1) blur(6px); background: color-mix(in srgb, var(--tp-bg) 82%, transparent); transition: padding .2s ease, box-shadow .2s ease, background .2s ease; } body.tp-scrolled .site-header, body.tp-scrolled header.elementor-location-header { box-shadow: var(--tp-shadow); background: color-mix(in srgb, var(--tp-bg) 94%, transparent); } /* Elementor niceties */ .elementor-widget-heading .elementor-heading-title { letter-spacing:-.01em; } .elementor-button { border-radius: var(--tp-radius-sm) !important; } .elementor-nav-menu--dropdown { border-radius: var(--tp-radius); box-shadow: var(--tp-shadow); } /* Footer */ .site-footer { background: var(--tp-surface); border-top:1px solid rgba(2,6,23,.06); padding: 2rem 0; } .footer-links a { color: var(--tp-muted); } .footer-links a:hover { color: var(--tp-primary); } /* WooCommerce basics (if used) */ .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background: var(--tp-primary); color:#fff; border-radius: var(--tp-radius-sm); padding:.7rem 1rem; } .woocommerce div.product .product_title{ letter-spacing: -.01em; }