/* ============================================================ headsight-design.css · INPS design system for headsight.de ------------------------------------------------------------ Target: Umbraco / uSkinned theme on Bootstrap 3.3.7 Include AFTER usn-global.css and AFTER /css/headsight.css (or append this file's content to /css/headsight.css). All new components are prefixed .hs- (consistent with the existing overrides). Fonts are loaded via Google Fonts: add the from README.md to the template. ============================================================ */ /* ---------- 1 · Design tokens ---------- */ :root{ --hs-navy:#242852; --hs-navy-900:#1B1F3E; --hs-navy-700:#3A4074; --hs-steel:#2F6C8A; --hs-orange:#F0561D; --hs-orange-deep:#C74312; --hs-paper:#FBFAF7; --hs-ink:#191C2E; --hs-mute:#5B5F78; --hs-line:#DCDEE8; --hs-surface:#EFF1F8; } /* ---------- 2 · Global typography (site-wide restyle) ---------- */ body{ font-family:'Inter',Helvetica,Arial,sans-serif; color:var(--hs-ink); } h1,h2,h3,h4,.h1,.h2,.h3,.h4{ font-family:'Sora','Inter',sans-serif; color:var(--hs-navy); letter-spacing:-.015em; font-weight:700; } code,pre,.hs-mono{ font-family:'IBM Plex Mono',monospace; } a{ color:var(--hs-orange-deep); } a:hover,a:focus{ color:var(--hs-orange); } /* Bootstrap button restyle */ .btn-primary, .hs-btn-primary{ background:var(--hs-orange); border:none; border-radius:0; font-weight:600; padding:12px 24px; } .btn-primary:hover,.btn-primary:focus,.hs-btn-primary:hover{ background:var(--hs-orange-deep); } .hs-btn-ghost{ display:inline-block; border:1.5px solid var(--hs-navy); color:var(--hs-navy); font-weight:600; padding:11px 22px; border-radius:0; background:transparent; } .hs-btn-ghost:hover{ background:var(--hs-navy); color:#fff; text-decoration:none; } /* ---------- 3 · Shared section primitives ---------- */ .hs-section{ padding:72px 0; background:var(--hs-paper); } .hs-section--white{ background:#fff; border-top:1px solid var(--hs-line); border-bottom:1px solid var(--hs-line); } .hs-eyebrow{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; font-weight:700; color:var(--hs-orange); margin-bottom:10px; } .hs-section h2{ font-size:32px; font-weight:800; margin:8px 0 18px; } .hs-lead{ font-size:17px; color:#33374E; max-width:760px; } /* key-point list (orange squares) */ ul.hs-kp{ list-style:none; padding:0; margin:22px 0 0; } ul.hs-kp li{ position:relative; padding-left:26px; margin-bottom:13px; font-size:15.5px; color:#33374E; } ul.hs-kp li:before{ content:''; position:absolute; left:0; top:7px; width:10px; height:10px; background:var(--hs-orange); } ul.hs-kp li b{ color:var(--hs-ink); } /* figure + caption */ .hs-figcap{ font-size:13px; color:var(--hs-mute); margin-top:12px; line-height:1.5; } .hs-figcap b{ color:var(--hs-ink); } /* ---------- 4 · Hero ---------- */ .hs-hero{ background:var(--hs-paper); padding:84px 0 96px; overflow:hidden; } .hs-hero h1{ font-size:52px; line-height:1.05; font-weight:800; margin:16px 0 24px; } .hs-hero h1 .hs-alt{ color:var(--hs-steel); } .hs-hero .hs-lead{ font-size:19px; margin-bottom:30px; } .hs-hero .hs-note{ margin-top:24px; font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--hs-mute); } @media (max-width:991px){ .hs-hero h1{ font-size:38px; } .hs-hero .hs-art{ display:none; } } /* ---------- 5 · Stat strip (navy band) ---------- */ .hs-stats{ background:var(--hs-navy); color:#fff; padding:40px 0; } .hs-stat .v{ font-family:'Sora',sans-serif; font-size:32px; font-weight:800; color:#fff; } .hs-stat.acc .v{ color:var(--hs-orange); } .hs-stat .l{ font-size:13.5px; color:#B9BDDB; margin-top:4px; line-height:1.45; } @media (max-width:767px){ .hs-stat{ margin-bottom:22px; } } /* ---------- 6 · Rail chips ---------- */ .hs-rails{ margin-top:24px; } .hs-rail{ display:inline-block; border:1.5px solid var(--hs-navy); padding:8px 15px; font-size:14px; font-weight:600; color:var(--hs-navy); margin:0 8px 10px 0; } .hs-rail small{ display:block; font-weight:400; font-size:11.5px; color:var(--hs-mute); } .hs-rail--hot{ border-color:var(--hs-orange); color:var(--hs-orange-deep); } /* ---------- 7 · Browser frame for product screenshots ---------- */ .hs-frame{ background:#fff; border:1px solid var(--hs-line); box-shadow:0 18px 50px rgba(18,21,43,.12); } .hs-frame .bar{ height:30px; background:var(--hs-navy-900); padding:0 14px; line-height:30px; } .hs-frame .bar i{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--hs-navy-700); margin-right:6px; vertical-align:middle; } .hs-frame .bar i:first-child{ background:var(--hs-orange); } .hs-frame .bar span{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8B90B5; margin-left:8px; } .hs-frame img{ width:100%; display:block; } /* ---------- 8 · Deployment cards ---------- */ .hs-card{ background:#fff; border:1px solid var(--hs-line); border-top:5px solid var(--hs-navy); padding:28px; margin-bottom:24px; min-height:300px; } .hs-card--acc{ border-top-color:var(--hs-orange); } .hs-card h3{ font-size:19px; margin:0 0 12px; } .hs-card p{ font-size:15px; color:#33374E; } .hs-card ul{ list-style:none; padding:0; margin:14px 0 0; } .hs-card li{ font-size:14px; color:#33374E; padding-left:20px; position:relative; margin-bottom:8px; } .hs-card li:before{ content:'\2014'; position:absolute; left:0; color:var(--hs-orange); } /* ---------- 9 · Insight / whitepaper cards ---------- */ .hs-ins{ background:#fff; border:1px solid var(--hs-line); padding:26px; margin-bottom:24px; min-height:280px; transition:box-shadow .15s; } .hs-ins:hover{ box-shadow:0 12px 34px rgba(18,21,43,.10); } .hs-ins .tag{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--hs-steel); margin-bottom:10px; } .hs-ins h3{ font-size:18px; line-height:1.3; margin:0 0 10px; } .hs-ins p{ font-size:14px; color:#33374E; } .hs-ins a.more{ font-weight:600; font-size:14px; color:var(--hs-orange-deep); } /* ---------- 10 · CTA band + footer ---------- */ .hs-cta{ background:var(--hs-navy-900); color:#fff; padding:70px 0; } .hs-cta h2{ color:#fff; font-size:32px; font-weight:800; } .hs-cta p{ color:#B9BDDB; font-size:16px; margin-top:12px; } .hs-cta .hs-mono{ font-size:14px; line-height:2; color:#B9BDDB; } /* darker text on the orange mail button for stronger contrast */ .btn-mail{color:var(--hs-navy-900)!important;font-weight:700}