/* ========================================================================= InfoCresting — Global Design System One stylesheet, shared by every page. Keep it small; it must load fast on shared hosting with no build step / no bundler. ========================================================================= */ /* ---- Design tokens ------------------------------------------------------ */ :root{ /* Light theme (default) */ --color-bg: #ffffff; --color-surface: #f6f7f9; --color-surface-hover: #eef0f3; --color-border: #e3e6eb; --color-text: #12151c; --color-text-secondary:#5b6472; --color-primary: #2451b0; --color-primary-dark: #1a3a82; --color-primary-light: #eaf0fc; --color-accent: #f5a623; --color-accent-dark: #c97f0e; --color-success: #1e8e5a; --color-danger: #c0392b; --font-display: 'Space Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(18,21,28,0.06); --shadow-md: 0 4px 16px rgba(18,21,28,0.08); --shadow-lg: 0 12px 32px rgba(18,21,28,0.12); --container-w: 1200px; --transition: 160ms ease; } /* Dark theme — toggled via [data-theme="dark"] on */ [data-theme="dark"]{ --color-bg: #0f1115; --color-surface: #171a21; --color-surface-hover: #1e222b; --color-border: #262b35; --color-text: #e8eaed; --color-text-secondary:#9aa3b2; --color-primary: #5b8def; --color-primary-dark: #3e6fd1; --color-primary-light: #182338; --color-accent: #f5a623; --color-accent-dark: #ffbf4d; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow-md: 0 4px 16px rgba(0,0,0,0.45); --shadow-lg: 0 12px 32px rgba(0,0,0,0.55); } /* ---- Reset --------------------------------------------------------------*/ *, *::before, *::after{ box-sizing: border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:16px; line-height:1.6; transition:background var(--transition), color var(--transition); } img,svg{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } ul{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4{ font-family:var(--font-display); line-height:1.2; margin:0 0 var(--space-3); } p{ margin:0 0 var(--space-4); color:var(--color-text-secondary); } ::selection{ background:var(--color-accent); color:#12151c; } /* Respect reduced-motion preference */ @media (prefers-reduced-motion: reduce){ *{ animation-duration:0.01ms !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } /* Visible keyboard focus everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{ outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Skip link for screen-reader / keyboard users */ .skip-link{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--color-primary); color:#fff; padding:var(--space-3) var(--space-4); border-radius:0 0 var(--radius-sm) 0; } .skip-link:focus{ left:0; } .container{ max-width:var(--container-w); margin:0 auto; padding:0 var(--space-5); } .visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px; } /* ---- Typography helpers -------------------------------------------------*/ .eyebrow{ font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-primary); font-weight:600; } .text-secondary{ color:var(--color-text-secondary); } .mono{ font-family:var(--font-mono); } /* ---- Buttons -------------------------------------------------------------*/ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); padding:12px 22px; border-radius:var(--radius-md); font-weight:600; font-size:15px; border:1px solid transparent; transition:transform var(--transition), background var(--transition), box-shadow var(--transition); white-space:nowrap; } .btn:active{ transform:translateY(1px); } .btn-primary{ background:var(--color-accent); color:#1a1300; box-shadow:var(--shadow-sm); } .btn-primary:hover{ background:var(--color-accent-dark); box-shadow:var(--shadow-md); } .btn-secondary{ background:transparent; border-color:var(--color-border); color:var(--color-text); } .btn-secondary:hover{ background:var(--color-surface-hover); } .btn-block{ width:100%; } .btn-sm{ padding:8px 14px; font-size:13px; } /* ---- Navbar ---------------------------------------------------------------*/ .navbar{ position:sticky; top:0; z-index:100; background:var(--color-bg); border-bottom:1px solid var(--color-border); backdrop-filter:saturate(180%) blur(6px); } .navbar-inner{ display:flex; align-items:center; gap:var(--space-5); padding:var(--space-3) 0; max-width:var(--container-w); margin:0 auto; padding-left:var(--space-5); padding-right:var(--space-5); } .brand{ display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:19px; flex-shrink:0; } .brand .brand-mark{ color:var(--color-primary); } .brand .brand-dot{ color:var(--color-accent); } .nav-links{ display:flex; gap:var(--space-5); align-items:center; } .nav-links a{ font-size:14px; font-weight:600; color:var(--color-text-secondary); padding:var(--space-2) 0; border-bottom:2px solid transparent; } .nav-links a:hover, .nav-links a.active{ color:var(--color-text); border-color:var(--color-accent); } .nav-search{ flex:1; max-width:340px; position:relative; } .nav-search input{ width:100%; padding:9px 14px 9px 36px; border-radius:var(--radius-pill); border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font-size:14px; } .nav-search svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--color-text-secondary); } .icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-pill); border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); flex-shrink:0; } .icon-btn:hover{ background:var(--color-surface-hover); } .icon-btn svg{ width:18px; height:18px; } .nav-toggle{ display:none; } /* ---- Hero ------------------------------------------------------------------*/ .hero{ padding:var(--space-9) 0 var(--space-8); } .hero-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:var(--space-8); align-items:center; } .hero h1{ font-size:clamp(32px,4.4vw,52px); font-weight:700; } .hero-sub{ font-size:18px; max-width:520px; } .hero-ctas{ display:flex; gap:var(--space-3); margin-top:var(--space-5); flex-wrap:wrap; } /* Signature element: a live, working demo sitting inside the hero itself */ .hero-demo{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); box-shadow:var(--shadow-lg); } .hero-demo-label{ display:flex; align-items:center; gap:8px; margin-bottom:var(--space-3); } .hero-demo-label .live-dot{ width:8px; height:8px; border-radius:50%; background:var(--color-success); box-shadow:0 0 0 0 rgba(30,142,90,.5); animation:pulse 2s infinite; } @keyframes pulse{ 0%{ box-shadow:0 0 0 0 rgba(30,142,90,.45); } 70%{ box-shadow:0 0 0 8px rgba(30,142,90,0); } 100%{ box-shadow:0 0 0 0 rgba(30,142,90,0); } } .hero-demo textarea{ width:100%; min-height:120px; resize:vertical; border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3); font-family:var(--font-body); font-size:14px; background:var(--color-bg); color:var(--color-text); } .hero-demo-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-2); margin-top:var(--space-3); } .stat-chip{ background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-3); text-align:center; } .stat-chip .stat-value{ display:block; font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--color-primary); } .stat-chip .stat-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-secondary); } /* ---- Category pills --------------------------------------------------------*/ .category-strip{ display:flex; gap:var(--space-2); flex-wrap:wrap; padding:var(--space-5) 0; } .pill{ display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:var(--radius-pill); border:1px solid var(--color-border); background:var(--color-surface); font-size:13px; font-weight:600; color:var(--color-text-secondary); font-family:var(--font-mono); transition:all var(--transition); } .pill:hover{ border-color:var(--color-primary); color:var(--color-text); } .pill.is-active{ background:var(--color-primary); border-color:var(--color-primary); color:#fff; } /* ---- Section headers --------------------------------------------------------*/ .section{ padding:var(--space-8) 0; } .section-head{ max-width:640px; margin:0 auto var(--space-6); text-align:center; } .section-head h2{ font-size:clamp(26px,3vw,34px); } /* ---- Tool cards -----------------------------------------------------------*/ .tool-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:var(--space-4); } .tool-card{ display:block; background:var(--color-bg); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .tool-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--color-primary); } .tool-card .tool-icon{ width:44px; height:44px; border-radius:var(--radius-md); background:var(--color-primary-light); color:var(--color-primary); display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-3); } .tool-card .tool-icon svg{ width:22px; height:22px; } .tool-card h3{ font-size:17px; margin-bottom:4px; } .tool-card p{ font-size:13.5px; margin-bottom:var(--space-3); } .tool-card .tool-tag{ font-family:var(--font-mono); font-size:11px; color:var(--color-text-secondary); text-transform:uppercase; letter-spacing:.05em; } .tool-card .tool-arrow{ margin-top:var(--space-3); font-size:13px; font-weight:700; color:var(--color-primary); display:flex; align-items:center; gap:4px; } /* ---- Generic content cards / panels -----------------------------------------*/ .card{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-6); } .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); align-items:start; } /* ---- Breadcrumb -------------------------------------------------------------*/ .breadcrumb{ display:flex; gap:6px; font-size:13px; color:var(--color-text-secondary); padding:var(--space-4) 0; flex-wrap:wrap; } .breadcrumb a:hover{ color:var(--color-primary); } .breadcrumb span{ opacity:.5; } /* ---- Tool page layout --------------------------------------------------------*/ .tool-header{ padding:var(--space-6) 0 var(--space-5); border-bottom:1px solid var(--color-border); } .tool-header h1{ font-size:clamp(26px,4vw,38px); } .tool-app{ background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:var(--space-5); margin:var(--space-6) 0; } .tool-app textarea{ width:100%; min-height:220px; resize:vertical; padding:var(--space-4); border-radius:var(--radius-md); border:1px solid var(--color-border); background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:15px; } .tool-app label{ font-weight:600; font-size:14px; display:block; margin-bottom:var(--space-2); } .tool-app .field{ margin-bottom:var(--space-4); } .tool-app input[type="text"], .tool-app input[type="date"], .tool-app input[type="number"], .tool-app select{ width:100%; padding:10px 12px; border-radius:var(--radius-md); border:1px solid var(--color-border); background:var(--color-bg); color:var(--color-text); font-size:15px; font-family:var(--font-body); } .tool-app input[type="range"]{ width:100%; } .field-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--space-4); } .output-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:var(--space-3); margin-top:var(--space-4); } .output-stats .stat-chip .stat-value{ font-size:26px; } .toolbar{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-4); } .dropzone{ border:2px dashed var(--color-border); border-radius:var(--radius-lg); padding:var(--space-7); text-align:center; cursor:pointer; transition:border-color var(--transition), background var(--transition); } .dropzone:hover, .dropzone.is-dragover{ border-color:var(--color-primary); background:var(--color-primary-light); } .dropzone svg{ margin:0 auto var(--space-3); width:36px; height:36px; color:var(--color-primary); } .compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); margin-top:var(--space-5); } .compare-grid figure{ margin:0; } .compare-grid img{ border-radius:var(--radius-md); border:1px solid var(--color-border); width:100%; height:auto; } .compare-grid figcaption{ font-size:13px; color:var(--color-text-secondary); margin-top:6px; text-align:center; } /* ---- Instructions / steps list ------------------------------------------------*/ .steps{ counter-reset:step; display:grid; gap:var(--space-3); } .steps li{ counter-increment:step; display:flex; gap:var(--space-3); align-items:flex-start; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); } .steps li::before{ content:counter(step); font-family:var(--font-mono); font-weight:700; color:#fff; background:var(--color-primary); width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0; margin-top:2px; } /* ---- FAQ accordion --------------------------------------------------------*/ .faq-item{ border-bottom:1px solid var(--color-border); } .faq-q{ width:100%; text-align:left; background:none; border:none; color:var(--color-text); padding:var(--space-4) 0; display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); font-weight:600; font-size:16px; } .faq-q .icon-plus{ flex-shrink:0; width:20px; height:20px; transition:transform var(--transition); color:var(--color-primary); } .faq-item.is-open .icon-plus{ transform:rotate(45deg); } .faq-a{ max-height:0; overflow:hidden; transition:max-height var(--transition); } .faq-item.is-open .faq-a{ max-height:400px; } .faq-a p{ padding-bottom:var(--space-4); margin:0; } /* ---- Ad placeholder ---------------------------------------------------------*/ .ad-slot{ border:1px dashed var(--color-border); border-radius:var(--radius-md); background:var(--color-surface); color:var(--color-text-secondary); font-size:12px; text-align:center; padding:var(--space-4); display:flex; align-items:center; justify-content:center; letter-spacing:.04em; text-transform:uppercase; font-family:var(--font-mono); } .ad-slot--leaderboard{ min-height:90px; margin:var(--space-6) 0; } .ad-slot--rectangle{ min-height:250px; } .ad-slot--inline{ min-height:100px; margin:var(--space-5) 0; } /* ---- Related tools --------------------------------------------------------*/ .related-tools{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--space-3); } .related-tools a{ display:block; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-md); padding:var(--space-3) var(--space-4); font-weight:600; font-size:14px; transition:border-color var(--transition); } .related-tools a:hover{ border-color:var(--color-primary); color:var(--color-primary); } /* ---- Newsletter --------------------------------------------------------------*/ .newsletter-form{ display:flex; gap:var(--space-2); max-width:420px; } .newsletter-form input{ flex:1; padding:10px 14px; border-radius:var(--radius-md); border:1px solid var(--color-border); background:var(--color-surface); color:var(--color-text); font-size:14px; } .form-note{ font-size:12px; margin-top:var(--space-2); } /* ---- Footer --------------------------------------------------------------*/ .site-footer{ border-top:1px solid var(--color-border); padding:var(--space-8) 0 var(--space-6); background:var(--color-surface); } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr; gap:var(--space-6); } .footer-grid h4{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-secondary); margin-bottom:var(--space-3); } .footer-grid ul li{ margin-bottom:var(--space-2); } .footer-grid a:hover{ color:var(--color-primary); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:var(--space-7); padding-top:var(--space-5); border-top:1px solid var(--color-border); font-size:13px; color:var(--color-text-secondary); flex-wrap:wrap; gap:var(--space-3); } /* ---- Responsive -----------------------------------------------------------*/ @media (max-width:900px){ .hero-grid{ grid-template-columns:1fr; } .two-col{ grid-template-columns:1fr; } .compare-grid{ grid-template-columns:1fr; } .footer-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:720px){ .nav-links{ position:fixed; top:64px; left:0; right:0; bottom:0; background:var(--color-bg); flex-direction:column; align-items:flex-start; padding:var(--space-5); gap:var(--space-4); transform:translateX(-100%); transition:transform var(--transition); overflow-y:auto; } .nav-links.is-open{ transform:translateX(0); } .nav-search{ order:3; max-width:none; } .nav-toggle{ display:inline-flex; } .footer-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:480px){ .footer-grid{ grid-template-columns:1fr; } .output-stats, .hero-demo-stats{ grid-template-columns:repeat(2,1fr); } }