/* ========= Softre Global Theme (Hello + Elementor) ========= */ /* Color tokens */ :root{ --brand-900:#0B1220; --brand-800:#0F2F7A; --brand-700:#1546B2; --brand-600:#1A56DB; --brand-500:#2F6FE8; --accent-600:#D97706; --accent-500:#F59E0B; --neutral-000:#FFFFFF; --neutral-100:#F7F9FC; --neutral-200:#EEF2F7; --neutral-300:#D8E1EB; --neutral-600:#6B778A; --neutral-800:#2B3648; --success-500:#16A34A; --warning-500:#D97706; --danger-500:#DC2626; --hero-gradient: linear-gradient(135deg,#0B1220 0%,#1546B2 60%,#1A56DB 100%); /* Type scale (fluid) */ --step--1: clamp(.875rem,.82rem + .2vw,.975rem); --step-0: clamp(1rem,.95rem + .3vw,1.1rem); --step-1: clamp(1.125rem,1.02rem + .6vw,1.35rem); --step-2: clamp(1.375rem,1.2rem + 1vw,1.75rem); --step-3: clamp(1.75rem,1.45rem + 1.7vw,2.25rem); --step-4: clamp(2.25rem,1.8rem + 2.5vw,3rem); --step-5: clamp(3rem,2.2rem + 3.7vw,4rem); --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --shadow-1:0 4px 16px rgba(11,18,32,.08); --shadow-2:0 10px 30px rgba(11,18,32,.12); --ring:0 0 0 3px rgba(26,86,219,.35); --transition:220ms cubic-bezier(.2,.6,.2,1); } /* Base */ body{ color:var(--neutral-800); background:var(--neutral-000); font:400 16px/1.55 Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif; text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; } h1,h2,h3{ color:var(--brand-900); line-height:1.15; margin:0 0 .5em; } h1{ font-size:var(--step-5); font-weight:800; letter-spacing:-.02em; } h2{ font-size:var(--step-3); font-weight:700; } h3{ font-size:var(--step-2); font-weight:700; } p{ font-size:var(--step-0); margin:0 0 1rem; } .muted{ color:var(--neutral-600); } /* Links & focus */ a{ color:var(--brand-600); text-decoration:none; } a:hover{ color:var(--brand-700); } :focus-visible{ outline:none; box-shadow:var(--ring); border-radius:6px; } /* Buttons */ .btn{ display:inline-flex; align-items:center; gap:.6rem; padding:.85rem 1.2rem; border-radius:var(--radius-sm); font-weight:700; font-size:var(--step-0); transition:var(--transition); border:2px solid transparent; } .btn--primary{ background:var(--brand-600); color:#fff; box-shadow:var(--shadow-1); } .btn--primary:hover{ background:var(--brand-700); transform:translateY(-1px); } .btn--secondary{ background:var(--accent-500); color:var(--brand-900); box-shadow:var(--shadow-1); } .btn--secondary:hover{ background:var(--accent-600); color:#fff; } .btn:focus-visible{ box-shadow:var(--ring); } /* Map Elementor button look to brand */ .elementor-button{ background:var(--brand-600); color:#fff; border-radius:var(--radius-sm); transition:var(--transition); } .elementor-button:hover{ background:var(--brand-700); transform:translateY(-1px); } /* Sections & Cards */ .section{ padding:clamp(46px,6vw,96px) 0; } .section--alt{ background:var(--neutral-100); } .card{ background:var(--neutral-000); border:1px solid var(--neutral-200); border-radius:var(--radius-md); box-shadow:var(--shadow-1); padding:clamp(18px,2.2vw,28px); } /* Forms / inputs */ input, select, textarea{ border:1.5px solid var(--neutral-300); border-radius:10px; padding:.75rem .9rem; font-size:var(--step-0); transition:var(--transition); background:#fff; color:var(--neutral-800); } input::placeholder, textarea::placeholder{ color:var(--neutral-600); } input:focus, select:focus, textarea:focus{ border-color:var(--brand-600); box-shadow:var(--ring); } /* Hero helper */ .hero--softre{ background:var(--hero-gradient); color:#fff; } .hero--softre h1{ color:#fff; } .hero--softre p{ color:#E6EEFF; font-size:var(--step-1); } /* Dark preference */ @media (prefers-color-scheme: dark){ body{ color:#E6E8EE; background:#0F1422; } h1,h2,h3{ color:#fff; } .section--alt{ background:#0F1422; } .card{ background:#0F1422; border-color:#1A2238; } }
Skip to content