/* ============================================================ Teknoble design system Loaded AFTER Bootstrap so these rules win. Theme is driven entirely by [data-theme] on , set by an inline script in (default: light). All components are namespaced .tk-* to avoid colliding with Bootstrap. ============================================================ */ /* ---- self-hosted fonts (no external calls from the server) ---- */ @font-face{ font-family:"Sen"; src:url("/fonts/Sen-var.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } @font-face{ font-family:"IBM Plex Sans"; src:url("/fonts/PlexSans-var.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; } /* ---- tokens ---- */ :root{ --paper:#FFFFFF; --card:#FFFFFF; --sink:#F6F7F9; --ink:#0B0B0C; --muted:#565C6B; --rule:#E4E7EC; --faint:#F1F3F7; --accent:#1B3FAE; --accent-text:#1B3FAE; --accent-wash:#EDF1FC; --on-accent:#FFFFFF; --display:"Sen",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --body:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --measure:64ch; --wrap:1120px; --radius:4px; --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06); } :root[data-theme="dark"]{ --paper:#0C0D10; --card:#15171B; --sink:#101216; --ink:#EDEEF1; --muted:#9AA0AD; --rule:#262A31; --faint:#181B20; --accent:#7E9CF2; --accent-text:#95AEF6; --accent-wash:#141A2B; --on-accent:#0A1020; --shadow:0 1px 2px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.5); } /* ---- base ---- */ *{box-sizing:border-box} html{scroll-behavior:smooth;font-size:16px} body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .2s ease, color .2s ease; } h1,h2,h3,h4{font-family:var(--display); font-weight:800; letter-spacing:-.02em; line-height:1.1; margin:0; text-wrap:balance;} p{margin:0} a{color:var(--accent-text); text-decoration:none} a:hover{text-decoration:underline} img{max-width:100%; height:auto; display:block} :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:2px} .tk-wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px} .tk-measure{max-width:var(--measure)} .tk-dim{color:var(--muted)} .tk-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* ---- eyebrow / section heads ---- */ .tk-eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)} .tk-eyebrow::before{content:"";width:22px;height:2px;background:var(--accent)} .tk-kick{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)} /* ---- buttons ---- */ .tk-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--body);font-size:14px;font-weight:600; padding:12px 22px;border-radius:2px;cursor:pointer;border:1px solid transparent;text-decoration:none; transition:background .15s ease,border-color .15s ease,color .15s ease,filter .15s ease;white-space:nowrap} .tk-btn:hover{text-decoration:none} .tk-btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .tk-btn-primary:hover{filter:brightness(1.07);color:var(--on-accent)} .tk-btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule)} .tk-btn-ghost:hover{border-color:var(--muted);color:var(--ink)} .tk-btn-sm{padding:9px 16px;font-size:13px} .tk-btn svg{width:15px;height:15px} /* ============================================================ NAV ============================================================ */ .tk-nav{position:sticky;top:0;z-index:40; background:color-mix(in srgb,var(--paper) 88%,transparent); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--rule)} .tk-nav-inner{display:flex;align-items:center;gap:20px;height:64px;position:relative} .tk-brand{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.045em;line-height:1; color:var(--ink);text-decoration:none;transform:scaleX(.84);transform-origin:left center;display:inline-block} .tk-brand:hover{text-decoration:none;color:var(--ink)} .tk-brand i{color:var(--accent);font-style:normal} .tk-nav-links{display:flex;align-items:center;gap:4px;margin-left:14px} .tk-nav-link{font-size:14px;font-weight:500;color:var(--muted);padding:8px 12px;border-radius:3px;text-decoration:none; transition:color .15s ease,background .15s ease} .tk-nav-link:hover{color:var(--ink);background:var(--faint);text-decoration:none} .tk-nav-link.active{color:var(--ink)} .tk-nav-spacer{flex:1 1 auto} .tk-nav-tools{display:flex;align-items:center;gap:8px} .tk-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px; border:1px solid var(--rule);background:var(--card);color:var(--ink);border-radius:2px;cursor:pointer;padding:0} .tk-iconbtn:hover{border-color:var(--muted)} .tk-iconbtn svg{width:16px;height:16px} .tk-navtoggle{display:none} @media (max-width:860px){ .tk-nav-links{position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0; background:var(--paper);border-bottom:1px solid var(--rule);padding:8px 20px 16px;margin:0; display:none;box-shadow:var(--shadow)} .tk-nav-links.open{display:flex} .tk-nav-link{padding:12px 8px;border-radius:0} .tk-nav-link+.tk-nav-link{border-top:1px solid var(--faint)} .tk-navtoggle{display:inline-flex} .tk-nav-cta-desktop{display:none} } /* ============================================================ HERO ============================================================ */ .tk-hero{padding:66px 0 24px} .tk-hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center} @media (max-width:940px){.tk-hero-grid{grid-template-columns:1fr;gap:34px}.tk-hero{padding:46px 0 12px}} .tk-hero h1{font-size:clamp(32px,5vw,52px);line-height:1.03;letter-spacing:-.03em;margin-top:16px} .tk-hero p.lead{margin-top:20px;font-size:18px;color:var(--muted);max-width:52ch} .tk-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .tk-hero-note{margin-top:22px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px} .tk-hero-note svg{width:15px;height:15px;color:var(--accent-text);flex:none} /* ============================================================ INTEGRATION DIAGRAM ============================================================ */ .tk-diagram{border:1px solid var(--rule);border-radius:var(--radius);background:var(--sink);padding:22px; display:grid;grid-template-columns:1fr auto 1.15fr;gap:16px;align-items:center;box-shadow:var(--shadow)} @media (max-width:560px){.tk-diagram{grid-template-columns:1fr;gap:18px}} .tk-dcol{display:flex;flex-direction:column;gap:10px} .tk-colhead{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1px} .tk-dnode{background:var(--card);border:1px solid var(--rule);border-radius:3px;padding:12px 13px; display:flex;align-items:center;gap:10px} .tk-dnode .val{font-family:var(--display);font-weight:700;font-size:14px} .tk-dnode .ico{width:16px;height:16px;color:var(--muted);flex:none} .tk-mid{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:108px} .tk-api{font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-text); background:var(--accent-wash);border:1px solid var(--accent);border-radius:100px;padding:4px 11px;white-space:nowrap} .tk-flow{width:100%;height:1px;background:repeating-linear-gradient(90deg,var(--muted) 0 5px,transparent 5px 10px);opacity:.5} @media (max-width:560px){.tk-flow{display:none}.tk-mid{flex-direction:row;flex-wrap:wrap;justify-content:center}} .tk-suiteframe{border:1.5px solid var(--accent);border-radius:var(--radius);overflow:hidden} .tk-sfhead{background:var(--accent);color:var(--on-accent);padding:11px 14px} .tk-sfname{display:block;font-family:var(--display);font-weight:800;font-size:15px;line-height:1.1} .tk-sfsub{display:block;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;opacity:.82;margin-top:3px} .tk-sfbody{background:var(--card);padding:7px} .tk-prow{display:flex;align-items:center;gap:10px;padding:10px} .tk-prow+.tk-prow{border-top:1px solid var(--faint)} .tk-pdot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none} .tk-prow .pn{font-family:var(--display);font-weight:700;font-size:13.5px} .tk-prow em{margin-left:auto;font-style:normal;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600} .tk-dcap{grid-column:1/-1;border-top:1px dashed var(--rule);margin-top:4px;padding-top:13px; font-size:12px;color:var(--muted);text-align:center;line-height:1.55} /* ============================================================ SECTIONS ============================================================ */ .tk-section{padding:64px 0;border-top:1px solid var(--rule)} .tk-section-head{display:flex;flex-direction:column;gap:12px;max-width:60ch;margin-bottom:34px} .tk-section-head h2{font-size:clamp(24px,3.2vw,32px)} .tk-section-head p{font-size:17px;color:var(--muted)} /* product cards */ .tk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule); border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden} @media (max-width:860px){.tk-cards{grid-template-columns:1fr}} .tk-card{background:var(--card);padding:28px 24px;display:flex;flex-direction:column;gap:11px; transition:background .15s ease;text-decoration:none;color:inherit} .tk-card:hover{background:var(--sink);text-decoration:none} .tk-card .num{font-size:10px;font-weight:600;letter-spacing:.12em;color:var(--accent-text);text-transform:uppercase} .tk-card h3{font-size:19px;line-height:1.25} .tk-card .sub{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-top:-4px} .tk-card p{font-size:14px;color:var(--muted);line-height:1.6} .tk-card ul{margin:2px 0 0;padding-left:16px;font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:5px} .tk-card .more{margin-top:auto;padding-top:8px;font-size:13px;font-weight:600;color:var(--accent-text); display:inline-flex;align-items:center;gap:6px} .tk-card .more svg{width:13px;height:13px;transition:transform .15s ease} .tk-card:hover .more svg{transform:translateX(3px)} /* key capabilities — the persuasive core of a product page */ .tk-keys{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule); border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden} @media (max-width:760px){.tk-keys{grid-template-columns:1fr}} .tk-key{background:var(--card);padding:28px 26px;display:flex;flex-direction:column;gap:11px} .tk-key::before{content:"";width:22px;height:2px;background:var(--accent);border-radius:1px} .tk-key h3{font-size:18px;line-height:1.3} .tk-key p{font-size:14.5px;color:var(--muted);line-height:1.65} /* module chips — breadth of a suite, stated at a glance rather than in cards */ .tk-chips{display:flex;flex-wrap:wrap;gap:8px} .tk-chip{font-size:13px;font-weight:500;color:var(--ink);background:var(--card); border:1px solid var(--rule);border-radius:100px;padding:7px 14px} /* capability overview — breadth, deliberately quieter than the key capabilities above */ .tk-caps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px 36px} @media (max-width:860px){.tk-caps{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.tk-caps{grid-template-columns:1fr}} .tk-cap h3{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--accent-text);margin-bottom:12px} .tk-cap ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px} .tk-cap li{font-size:13.5px;color:var(--muted);line-height:1.55;padding-left:15px;position:relative} .tk-cap li::before{content:"";position:absolute;left:0;top:7px;width:5px;height:5px;border-radius:50%; background:var(--rule)} .tk-capsnote{margin-top:28px;font-size:13.5px;color:var(--muted)} /* services strip */ .tk-services{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule); border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden} @media (max-width:640px){.tk-services{grid-template-columns:1fr}} .tk-service{background:var(--card);padding:26px 24px;display:flex;flex-direction:column;gap:9px} .tk-service .n{font-family:var(--display);font-weight:800;font-size:13px;color:var(--accent-text);font-variant-numeric:tabular-nums} .tk-service h3{font-size:16px} .tk-service p{font-size:14px;color:var(--muted);line-height:1.6} /* managed-hosting value props */ .tk-props{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} @media (max-width:860px){.tk-props{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.tk-props{grid-template-columns:1fr}} .tk-prop{display:flex;flex-direction:column;gap:9px} .tk-prop .pico{width:34px;height:34px;border-radius:3px;background:var(--accent-wash);color:var(--accent-text); display:inline-flex;align-items:center;justify-content:center} .tk-prop .pico svg{width:18px;height:18px} .tk-prop h3{font-size:16px} .tk-prop p{font-size:14px;color:var(--muted);line-height:1.6} /* stats band — deliberately dark in both themes. Numbers alone read as decoration; the intro gives them something to be evidence of. */ .tk-band{background:#0B0B0C;color:#F2F0EC;border-radius:var(--radius);padding:44px 40px; display:flex;flex-direction:column;gap:34px} @media (max-width:760px){.tk-band{padding:32px 26px;gap:26px}} .tk-band-intro{display:flex;flex-direction:column;gap:11px;max-width:50ch} .tk-band-kick{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#95AEF6} .tk-band-intro h2{font-size:clamp(21px,2.7vw,28px);line-height:1.25;color:#F2F0EC} .tk-band-intro p{font-size:15px;line-height:1.65;opacity:.72} /* Column count follows the number of stats (set inline as --stat-count), so adding or removing a figure never leaves an orphan on a second row. Collapses 2-up, then 1-up. */ .tk-band-stats{display:grid;grid-template-columns:repeat(var(--stat-count,3),1fr);gap:30px 28px; border-top:1px solid rgba(242,240,236,.14);padding-top:32px} @media (max-width:920px){.tk-band-stats{grid-template-columns:repeat(2,1fr);gap:26px}} @media (max-width:460px){.tk-band-stats{grid-template-columns:1fr;gap:22px;padding-top:26px}} .tk-stat strong{display:block;font-family:var(--display);font-weight:800;font-size:40px;line-height:1; font-variant-numeric:tabular-nums;letter-spacing:-.02em} .tk-stat .lbl{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase; margin-top:10px;opacity:.6;font-weight:600;line-height:1.45} .tk-stat .pending{display:inline-block;font-size:9px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:#95AEF6;border:1px dashed #95AEF6;border-radius:2px;padding:2px 7px;margin-top:8px} /* CTA strip */ .tk-cta{background:var(--accent);color:var(--on-accent);border-radius:var(--radius);padding:44px 40px; display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px} .tk-cta h2{font-size:clamp(22px,3vw,30px);color:var(--on-accent);max-width:20ch} .tk-cta p{color:var(--on-accent);opacity:.85;margin-top:8px;font-size:16px} .tk-cta .tk-btn-primary{background:var(--on-accent);color:var(--accent);border-color:var(--on-accent)} .tk-cta .tk-btn-primary:hover{filter:none;opacity:.92;color:var(--accent)} /* ============================================================ PRODUCT DETAIL header ============================================================ */ .tk-phead{padding:56px 0 8px} .tk-phead .cat{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)} .tk-phead h1{font-size:clamp(30px,4.4vw,44px);margin-top:14px} .tk-phead p{font-size:18px;color:var(--muted);margin-top:16px;max-width:60ch} .tk-breadcrumb{font-size:13px;color:var(--muted)} .tk-breadcrumb a{color:var(--muted)} .tk-breadcrumb a:hover{color:var(--ink)} /* ============================================================ STATEMENT BLOCK (short, high-emphasis passages such as a vision) ============================================================ */ .tk-statement{border-left:3px solid var(--accent);padding:2px 0 2px 30px; display:flex;flex-direction:column;gap:14px} .tk-statement h2{font-size:clamp(23px,3.2vw,32px);line-height:1.2;max-width:26ch} .tk-statement p{font-size:16px;color:var(--muted);line-height:1.7;max-width:62ch} @media (max-width:640px){.tk-statement{padding-left:20px}} /* ============================================================ FORMS (contact) ============================================================ */ .tk-form{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media (max-width:640px){.tk-form{grid-template-columns:1fr}} .tk-field{display:flex;flex-direction:column;gap:7px} .tk-field.full{grid-column:1/-1} .tk-field label{font-size:13px;font-weight:600;color:var(--ink)} .tk-field input,.tk-field textarea,.tk-field select{ font-family:var(--body);font-size:15px;color:var(--ink);background:var(--card); border:1px solid var(--rule);border-radius:3px;padding:11px 13px;width:100%} .tk-field input:focus,.tk-field textarea:focus,.tk-field select:focus{outline:2px solid var(--accent);outline-offset:0;border-color:var(--accent)} .tk-field textarea{min-height:130px;resize:vertical} .tk-field .err{font-size:12px;color:#C0362C} :root[data-theme="dark"] .tk-field .err{color:#F19890} /* ============================================================ PROSE (privacy / legal long-form) ============================================================ */ .tk-prose{max-width:74ch} .tk-prose h2{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.01em;margin:36px 0 12px} .tk-prose h2:first-child{margin-top:0} .tk-prose p{margin:0 0 14px;font-size:15px;line-height:1.7} .tk-prose ul{margin:0 0 16px;padding-left:20px;display:flex;flex-direction:column;gap:7px} .tk-prose li{font-size:15px;line-height:1.65} .tk-prose a{color:var(--accent-text)} .tk-draftnote{background:var(--accent-wash);border-left:3px solid var(--accent);border-radius:0 2px 2px 0; padding:15px 18px;font-size:14px;line-height:1.6;margin-bottom:28px} .tk-draftnote b{color:var(--accent-text)} /* ============================================================ FOOTER ============================================================ */ .tk-footer{border-top:1px solid var(--rule);background:var(--sink);margin-top:8px} .tk-footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;padding:52px 0 40px} @media (max-width:860px){.tk-footer-grid{grid-template-columns:1fr 1fr;gap:28px}} @media (max-width:520px){.tk-footer-grid{grid-template-columns:1fr}} .tk-footer h4{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .tk-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px} .tk-footer a{color:var(--muted);font-size:14px} .tk-footer a:hover{color:var(--ink)} .tk-footer-brand .tk-brand{font-size:26px;margin-bottom:12px} .tk-footer-brand p{font-size:14px;color:var(--muted);max-width:36ch} .tk-footer-bar{border-top:1px solid var(--rule);padding:18px 0;display:flex;flex-wrap:wrap;gap:10px; justify-content:space-between;font-size:13px;color:var(--muted)} /* ---- utilities ---- */ .tk-stack{display:flex;flex-direction:column} .tk-mt-lg{margin-top:44px} @media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important;scroll-behavior:auto!important} }