/* ========================================================================= Scurix Design System · "Professional Tech" Source of truth: DESIGN.md Pillars: Precision · Professionalism · Performance Load Hanken Grotesk + Material Symbols in each page . ========================================================================= */ :root { /* Brand */ --navy-deep: #11224E; /* primary structure: nav text, headings, footer */ --navy-900: #000c31; /* deepest navy for gradients */ --action-orange: #F87B1B; /* CTAs, accents, progress, brand highlight */ --orange-soft: #fe8021; --sage-accent: #CBD99B; /* success / active states, soft highlights */ /* Text */ --text-main: #11224E; --text-muted: #5C6B89; --on-dark: #ffffff; --on-dark-muted: rgba(219, 225, 255, 0.78); /* inverse-primary @ ~80% */ /* Surfaces */ --surface: #f9f9f9; --surface-page: #EEEEEE; /* primary page background */ --surface-card: #ffffff; --surface-container: #eeeeee; --surface-high: #e8e8e8; /* Lines / status */ --outline: #E0E0E0; /* 1px card borders */ --outline-variant:#c5c6d0; --status-success: #4CAF50; --status-error: #D32F2F; /* Radius */ --r-sm: 0.25rem; --r: 0.5rem; /* buttons, inputs, small cards */ --r-md: 0.75rem; --r-lg: 1rem; /* large containers / banners */ --r-xl: 1.5rem; --r-full:9999px; /* Spacing (8px base) */ --sp-xs: 4px; --sp-sm: 12px; --sp: 8px; --sp-md: 24px; --sp-lg: 48px; --sp-xl: 80px; --gutter:24px; --container-max: 1200px; /* Elevation */ --shadow-soft: 0px 4px 20px rgba(17, 34, 78, 0.08); /* Gradients */ --hero-gradient: linear-gradient(135deg, #11224E 0%, #000c31 100%); } *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--text-main); background: var(--surface); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; } /* ---------- Layout ---------------------------------------------------- */ .sx-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-md); } .sx-section { padding-block: var(--sp-xl); } .sx-section--gray{ background: var(--surface-container); } /* ---------- Typography ------------------------------------------------ */ .sx-eyebrow { font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--action-orange); } .sx-h1 { font-size: clamp(2rem, 5vw, 48px); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .sx-h2 { font-size: clamp(1.6rem, 4vw, 32px); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--text-main); } .sx-h3 { font-size: 24px; font-weight: 600; line-height: 1.33; color: var(--navy-deep); } .sx-lead { font-size: 18px; line-height: 1.55; color: var(--text-muted); } .sx-body { font-size: 16px; color: var(--text-muted); } .sx-muted { color: var(--text-muted); } .sx-accent{ color: var(--action-orange); font-weight: 700; } .sx-rule { height: 4px; width: 64px; background: var(--action-orange); border-radius: var(--r-full); } /* ---------- Navigation (light) --------------------------------------- */ .sx-nav { position: sticky; top: 0; z-index: 50; background: #ffffff; border-bottom: 1px solid var(--outline-variant); box-shadow: 0 1px 2px rgba(17,34,78,0.04); } .sx-nav__inner { display: flex; align-items: center; gap: var(--sp-md); height: 72px; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--sp-md); } .sx-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.4rem; color: var(--navy-deep); letter-spacing: -0.02em; margin-right: auto; /* logo left, links + button grouped on the right */ } .sx-brand__mark { width: 36px; height: 36px; border-radius: var(--r); background: var(--navy-deep); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 1rem; } .sx-nav__links { display: flex; align-items: center; gap: var(--sp-md); } .sx-nav__links a { font-size: 14px; font-weight: 600; letter-spacing: 0.02em; color: var(--text-main); transition: color .2s ease; } .sx-nav__links a:hover { color: var(--action-orange); } .sx-nav__links a.is-active { color: var(--action-orange); border-bottom: 2px solid var(--action-orange); padding-bottom: 2px; } .sx-nav__toggle { display: none; } @media (max-width: 860px) { .sx-nav__links { display: none; } } /* ---------- Buttons --------------------------------------------------- */ .sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; padding: 12px 24px; border-radius: var(--r); border: 2px solid transparent; cursor: pointer; transition: transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; white-space: nowrap; } .sx-btn--primary { background: var(--action-orange); color: #fff; } .sx-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(248,123,27,0.30); } .sx-btn--secondary { background: transparent; border-color: var(--navy-deep); color: var(--navy-deep); } .sx-btn--secondary:hover { background: var(--navy-deep); color: #fff; } .sx-btn--ghost { color: var(--navy-deep); } .sx-btn--ghost:hover { color: var(--action-orange); } .sx-btn--on-dark { border-color: #fff; color: #fff; } .sx-btn--on-dark:hover { background: #fff; color: var(--navy-deep); } .sx-btn--lg { padding: 14px 36px; font-size: 15px; } /* ---------- Cards ----------------------------------------------------- */ .sx-card { background: var(--surface-card); border: 1px solid var(--outline); border-radius: var(--r-md); padding: var(--sp-lg); box-shadow: var(--shadow-soft); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } a.sx-card { display: block; color: inherit; } a.sx-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(17,34,78,0.12); border-color: var(--outline-variant); } .sx-card__icon { width: 56px; height: 56px; border-radius: var(--r-md); display: grid; place-items: center; margin-bottom: var(--sp-md); color: #fff; font-weight: 700; } .sx-card__icon--orange { background: var(--action-orange); box-shadow: 0 8px 16px rgba(248,123,27,0.20); } .sx-card__icon--navy { background: var(--navy-deep); box-shadow: 0 8px 16px rgba(17,34,78,0.20); } .sx-card__icon--sage { background: var(--sage-accent); color: var(--navy-deep); box-shadow: 0 8px 16px rgba(203,217,155,0.30); } /* ---------- Chips / badges ------------------------------------------- */ .sx-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 12px; border-radius: var(--r-full); } .sx-chip--success { background: var(--sage-accent); color: var(--navy-deep); } .sx-chip--neutral { background: rgba(17,34,78,0.08); color: var(--navy-deep); } /* ---------- Hero ------------------------------------------------------ */ .sx-hero { background: var(--hero-gradient); color: #fff; position: relative; overflow: hidden; padding-block: var(--sp-xl); } .sx-hero::after { content: ""; position: absolute; top: 0; right: 0; width: 38%; height: 100%; background: rgba(248,123,27,0.10); filter: blur(120px); border-radius: var(--r-full); transform: translate(40%, -25%); pointer-events: none; } .sx-hero__inner { position: relative; z-index: 1; } .sx-hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-lg); align-items: center; } .sx-hero__art { justify-self: end; width: 100%; max-width: 520px; } .sx-hero__art img { width: 100%; height: auto; } @media (max-width: 860px) { .sx-hero__grid { grid-template-columns: 1fr; gap: var(--sp-md); } .sx-hero__art { max-width: 420px; margin-inline: auto; } } /* ---------- Footer ---------------------------------------------------- */ .sx-footer { background: var(--navy-deep); color: var(--on-dark-muted); } .sx-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--gutter); max-width: var(--container-max); margin-inline: auto; padding: var(--sp-lg) var(--sp-md); } .sx-footer__brand { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: var(--sp-sm); } .sx-footer h4 { font-size: 14px; font-weight: 600; letter-spacing: 0.05em; color: #fff; margin-bottom: var(--sp-sm); } .sx-footer a { display: block; font-size: 14px; color: var(--on-dark-muted); margin-bottom: 8px; transition: color .2s ease; } .sx-footer a:hover { color: #fff; } .sx-footer__bottom { border-top: 1px solid rgba(255,255,255,0.10); padding: var(--sp-md); } .sx-footer__bottom p { text-align: center; font-size: 14px; color: rgba(241,241,241,0.55); } @media (max-width: 860px) { .sx-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .sx-footer__grid { grid-template-columns: 1fr; } } /* ---------- Utilities ------------------------------------------------- */ .sx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } .sx-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); } .sx-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-lg); align-items: center; } @media (max-width: 860px) { .sx-grid-3, .sx-grid-2 { grid-template-columns: 1fr; } .sx-grid-4 { grid-template-columns: repeat(2, 1fr); } .sx-section { padding-block: var(--sp-lg); } } .sx-center { text-align: center; } .sx-stack-sm > * + * { margin-top: var(--sp-sm); } .sx-mt-md { margin-top: var(--sp-md); } .sx-mt-lg { margin-top: var(--sp-lg); } /* ---------- Blog ----------------------------------------------------- */ .blog-badge { display:inline-flex; align-items:center; font-size:12px; font-weight:600; letter-spacing:0.04em; padding:4px 12px; border-radius: var(--r-full); } .blog-badge--eu { background: rgba(248,123,27,0.16); color:#b3540a; } .blog-badge--shopify { background: rgba(58,92,168,0.14); color:#2f4d8f; } .blog-badge--ecom { background: rgba(76,175,80,0.16); color:#2e7d32; } .blog-meta { font-size:13px; color: var(--text-muted); } .blog-card { padding:0; overflow:hidden; display:flex; flex-direction:column; } .blog-card__cover { width:100%; height:190px; flex:0 0 auto; object-fit:cover; background: var(--navy-deep); display:block; } .blog-card__body { padding: var(--sp-md); display:flex; flex-direction:column; gap:10px; flex:1; } .blog-card__title { font-size:19px; font-weight:700; color: var(--navy-deep); line-height:1.3; } .blog-card__excerpt { font-size:14px; color: var(--text-muted); flex:1; } .blog-cover { width:100%; height:auto; border-radius: var(--r-lg); border:1px solid var(--outline); display:block; } .blog-article { max-width: 760px; margin-inline:auto; } .blog-body { font-size:17px; line-height:1.8; color:#2c3a52; } .blog-body h2 { font-size:26px; font-weight:700; color: var(--navy-deep); line-height:1.3; margin: 1.6em 0 0.5em; letter-spacing:-0.01em; } .blog-body h3 { font-size:20px; font-weight:700; color: var(--navy-deep); margin: 1.4em 0 0.4em; } .blog-body p { margin: 0 0 1.15em; } .blog-body ul, .blog-body ol { margin: 0 0 1.2em 1.3em; } .blog-body li { margin-bottom: 0.5em; } .blog-body strong { color: var(--text-main); font-weight:700; } .blog-body a { color: var(--action-orange); font-weight:600; text-decoration: underline; text-underline-offset:2px; } .blog-body hr { border:none; border-top:1px solid var(--outline); margin: 2em 0; } .blog-body blockquote { border-left:3px solid var(--action-orange); margin:1.5em 0; padding:0.3em 0 0.3em 1.2em; color: var(--text-muted); font-style:italic; } /* Related-reading callout (app pages -> blog) */ .sx-related { display:flex; gap:20px; align-items:center; max-width:760px; margin-inline:auto; background: var(--surface-card); border:1px solid var(--outline); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); padding:18px; transition: transform .2s ease, box-shadow .2s ease; } .sx-related:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(17,34,78,0.12); } .sx-related img { width:150px; height:80px; object-fit:cover; border-radius: var(--r); flex-shrink:0; background: var(--navy-deep); } .sx-related__eyebrow { font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color: var(--action-orange); } .sx-related__title { font-size:18px; font-weight:700; color: var(--navy-deep); margin:4px 0 6px; line-height:1.3; } .sx-related__cta { font-size:14px; font-weight:600; color: var(--action-orange); } @media (max-width:560px){ .sx-related img { display:none; } }