/* ===================================================================== SufiKit Marketplace — Core Stylesheet Design tokens, reset, base typography, layout primitives, buttons, cards, badges, icon system, header, footer. Section-specific styles (home, shop, product, blog, dashboard) live in their own files and are loaded conditionally — see inc/enqueue.php. ===================================================================== */ /* --------------------------------------------------------------------- 1. DESIGN TOKENS Colors mirror the option defaults in inc/theme-options.php so an admin color change updates every stylesheet at once via :root override injected in wp_head (sk_options_frontend_css()). --------------------------------------------------------------------- */ :root { /* Brand — sampled directly from the reference screenshots (logo mark, header CTA button, hero button all consistently sample to this vivid blue). */ --sk-primary: #0a5cf5; --sk-primary-dark: #0847c2; --sk-primary-light: #eaf1ff; --sk-secondary: #6d3ff5; --sk-secondary-light: #f2eefe; --sk-gradient: linear-gradient(135deg, var(--sk-primary) 0%, var(--sk-secondary) 100%); /* Feedback */ --sk-success: #16a34a; --sk-success-light: #ecfdf5; --sk-warning: #f59e0b; --sk-warning-light: #fffbeb; --sk-danger: #ef4444; --sk-danger-light: #fef2f2; --sk-star: #fbbf24; /* Neutrals */ --sk-text: #111827; --sk-text-light: #6b7280; --sk-text-muted: #9ca3af; --sk-border: #e5e7eb; --sk-border-light: #f1f5f9; --sk-bg: #ffffff; --sk-bg-soft: #f8fafc; --sk-btn-text: #ffffff; /* Shape */ --sk-radius-sm: 8px; --sk-radius: 14px; --sk-radius-lg: 20px; --sk-radius-pill: 999px; --sk-btn-radius: 10px; /* Elevation */ --sk-shadow-sm: 0 1px 2px rgba(17, 24, 39, .05); --sk-shadow: 0 4px 16px rgba(17, 24, 39, .06); --sk-shadow-lg: 0 12px 32px rgba(17, 24, 39, .10); --sk-shadow-neu: 8px 8px 20px rgba(148, 163, 184, .18), -8px -8px 20px rgba(255, 255, 255, .8); /* Type */ --sk-font-heading: 'Plus Jakarta Sans', sans-serif; --sk-font-body: 'Inter', sans-serif; /* Layout */ --sk-container: 1280px; --sk-header-height: 76px; --sk-header-height-scrolled: 68px; --sk-gap: 28px; --sk-gutter: 24px; --sk-transition: 200ms cubic-bezier(.4, 0, .2, 1); } /* --------------------------------------------------------------------- 2. RESET & BASE --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; max-width: 100%; } /* Safety net: no single element (fixed-width dropdown, negative-margin carousel bleed, unconverted inline width, etc.) should ever be able to push the page wider than the viewport and force pinch-zoom on mobile. NOTE: this is intentionally kept on only, not . Setting overflow-x: hidden on BOTH elements turns into its own nested scroll container (per the CSS overflow spec, overflow-x: hidden forces the missing overflow-y to a used value of "auto"), and since is unbounded in height that container's "scrollport" ends up covering the whole page instead of just the visible window — which silently breaks position: sticky for every sticky element on the site (header, checkout sidebar, dashboard nav, blog sidebar, shop filters, cart summary). Keep this rule on only. */ body { max-width: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } body { margin: 0; font-family: var(--sk-font-body); font-size: 16px; line-height: 1.6; color: var(--sk-text); background: var(--sk-bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } input, select, textarea, button { font-family: inherit; font-size: inherit; } h1, h2, h3, h4, h5, h6 { font-family: var(--sk-font-heading); font-weight: 700; line-height: 1.25; margin: 0 0 .5em; color: var(--sk-text); } p { margin: 0 0 1em; } .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; } .sk-skip-link { position: fixed; top: -100px; left: 10px; z-index: 10000; background: var(--sk-primary); color: #fff; padding: 12px 20px; border-radius: var(--sk-radius-sm); transition: top var(--sk-transition); } .sk-skip-link:focus { top: 10px; } :focus-visible { outline: 2px solid var(--sk-primary); outline-offset: 2px; } /* --------------------------------------------------------------------- 3. LAYOUT PRIMITIVES --------------------------------------------------------------------- */ .sk-container { max-width: var(--sk-container); margin-inline: auto; padding-inline: var(--sk-gutter); } .sk-section { padding-block: 64px; } .sk-section__header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; } .sk-section__header--center { flex-direction: column; align-items: center; text-align: center; } .sk-section__title { font-size: 28px; margin: 0; } .sk-section__title--sm { font-size: 22px; } .sk-section__subtitle { color: var(--sk-text-light); max-width: 560px; margin-top: 8px; } .sk-section__link { color: var(--sk-primary); font-weight: 600; white-space: nowrap; } .sk-section__link:hover { text-decoration: underline; } .sk-section__title-squiggle { display: inline-flex; margin-left: 10px; color: var(--sk-primary); vertical-align: middle; } .sk-page-title { font-size: 32px; margin-bottom: 8px; } .sk-page-subtitle { color: var(--sk-text-light); } .sk-page-layout { padding-block: 48px; } .sk-page-body { margin-top: 24px; } /* --------------------------------------------------------------------- 4. ICON SYSTEM Lightweight mask-based icons: one per glyph, colored via currentColor, sized in em so it follows the parent's font-size. No icon font / JS library dependency. --------------------------------------------------------------------- */ .sk-icon { display: inline-block; width: 1.15em; height: 1.15em; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; vertical-align: middle; flex-shrink: 0; } /* Inline