/* ==============================================================
uicompose — homepage polish (premium + responsive)
Loaded last in ; overrides apply on top of theme styles.
============================================================== */
/* ==============================================================
Prevent static demo cards flashing before real products load.
--------------------------------------------------------------
The homepage template/component grids ship with placeholder
demo cards baked into the HTML. home-products.js fetches the
real products and swaps them in, stamping data-uic-hydrated
on the grid. Until that happens (or on fetch failure), the
demo cards used to flash in — visible at first paint, then
replaced — which read as "old design loads, then the real one
appears". Hide the grid children until the grid is hydrated.
A 4s animation fallback reveals them anyway if the fetch is
slow, fails, or JS never runs, so the section is never blank.
============================================================== */
body.home .elementor-element-54d758f .row.justify-content-center:not([data-uic-hydrated="true"]) > *,
body.home .elementor-element-a4661f7 .row.ht-carousel:not([data-uic-hydrated="true"]) > * {
opacity: 0;
animation: uic-static-card-fallback 0s linear 4s forwards;
}
@keyframes uic-static-card-fallback {
to { opacity: 1; }
}
/* ==============================================================
uicompose DESIGN TOKENS — single source of truth
--------------------------------------------------------------
Canonical brand system. Documented in /DESIGN.md. New work MUST
consume these vars instead of hardcoding values, so H2s stay one
size, body copy stays one gray, radii stay on the scale, etc.
Adding tokens is zero-risk: existing elements keep their current
look until intentionally migrated onto a token.
============================================================== */
:root {
/* ---- Brand color ---- */
--uic-brand: #8735ee; /* primary purple — CTAs, links, accents */
--uic-brand-hover: #6a26c2; /* darker press/hover */
--uic-brand-soft: #f2e9ff; /* tint — chips, selection, soft fills */
/* ---- Neutral ramp (one ink, one body, one muted — no duplicates) ---- */
--uic-ink: #0f0f14; /* headings, darkest text (canonical) */
--uic-body: #3a3a3d; /* body copy */
--uic-muted: #6b6b75; /* secondary / captions / meta */
--uic-faint: #9a9aa3; /* placeholders, disabled */
--uic-line: #e6e5e0; /* hairline borders */
--uic-bg: #ffffff; /* page surface */
--uic-bg-soft: #fafaf7; /* recessed / muted surface */
--uic-bg-tile: #f5f5f5; /* product preview tile */
/* ---- Semantic ---- */
--uic-success: #16a34a;
--uic-warning: #f6b100;
--uic-danger: #dc2626;
/* ---- Radius scale (5 steps + pill) ---- */
--uic-r-xs: 6px; /* tiny: small inputs, tag detail */
--uic-r-sm: 10px; /* buttons, inputs, small cards */
--uic-r-md: 14px; /* card inner image, panels */
--uic-r-lg: 20px; /* cards, modals, large surfaces */
--uic-r-xl: 24px; /* hero/feature containers */
--uic-r-pill: 999px;/* pills, chips, avatars */
/* ---- Type scale (modular, ~1.25 ratio, fluid headings) ---- */
--uic-fs-display: clamp(40px, 6vw, 64px); /* hero only */
--uic-fs-h1: clamp(32px, 5vw, 48px);
--uic-fs-h2: clamp(28px, 4vw, 36px); /* section headings */
--uic-fs-h3: 24px;
--uic-fs-h4: 20px;
--uic-fs-body-lg: 18px;
--uic-fs-body: 16px;
--uic-fs-sm: 14px;
--uic-fs-caption: 13px;
--uic-fs-micro: 11.5px; /* eyebrow labels, badges */
/* ---- Line-height ---- */
--uic-lh-tight: 1.1; /* display / headings */
--uic-lh-snug: 1.3; /* subheads */
--uic-lh-body: 1.6; /* paragraphs */
/* ---- Font weight (regular→heavy) ---- */
--uic-fw-regular: 400;
--uic-fw-medium: 500; /* buttons, emphasized body */
--uic-fw-semibold: 600; /* subheadings, labels */
--uic-fw-bold: 700; /* headings */
--uic-fw-heavy: 800; /* display, hero */
/* ---- Letter-spacing ---- */
--uic-tracking-display: -0.022em; /* tight display type */
--uic-tracking-heading: -0.018em;
--uic-tracking-label: 0.06em; /* uppercase eyebrows */
/* ---- Spacing scale (4px base) ---- */
--uic-space-1: 4px;
--uic-space-2: 8px;
--uic-space-3: 12px;
--uic-space-4: 16px;
--uic-space-5: 20px;
--uic-space-6: 24px;
--uic-space-8: 32px;
--uic-space-10: 40px;
--uic-space-12: 48px;
--uic-space-16: 64px;
--uic-space-20: 80px;
--uic-space-24: 96px;
}
/* ---------- Prevent horizontal overflow page-wide ----------
Use `clip` (not `hidden`) so it doesn't promote html/body to scroll
containers — that would break `position: sticky` on inner elements
like the product-details sidebar. */
html, body {
overflow-x: clip;
}
/* ---------- Page-level fade-in on load ----------
Single page fade: itself eases up to full opacity on first
paint. This includes the header so its auth-state hydration sits
INSIDE the same fade window — no second "auth buttons popping in"
animation after the page is otherwise loaded. Fixed-position dev
tools / mobile drawer aren't affected because we target body, not
children.
Translate is dropped so sticky elements (header, sidebars) don't
reposition mid-animation; pure opacity is the safest cross-page
effect. Honors prefers-reduced-motion. */
@keyframes uic-page-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
body {
animation: uic-page-fade-in 360ms cubic-bezier(.22, 1, .36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
body { animation: none !important; }
}
img, svg, video, canvas { max-width: 100%; }
/* ---------- Smoother global transitions ---------- */
a, button, .btn, [class*="elementor-button"] {
transition: background-color .18s ease, color .18s ease,
border-color .18s ease, transform .12s ease,
box-shadow .18s ease, opacity .18s ease !important;
}
a:active, button:active { transform: translateY(1px); }
/* ---------- Focus rings (a11y polish) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible,
[role="button"]:focus-visible {
outline: none !important;
box-shadow: 0 0 0 3px rgba(135, 53, 238, .25) !important;
border-radius: 6px;
}
/* ---------- Header: responsive cleanup ---------- */
.header .header-wrapper,
.header .header__inner,
.header .container,
.header .row {
flex-wrap: nowrap !important;
}
/* Tight auth group with consistent spacing */
.site-header-auth {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
}
.site-header-signin,
.site-header-signup {
white-space: nowrap !important;
height: 42px !important;
padding: 0 20px !important;
font-size: 15px !important;
font-weight: 600 !important;
}
/* Header nav text — bumped up for breathing room.
Selectors used to also list WP/elementor variants
(`.theme-main-menu .main-menu a`, `.header .menu-area nav a`); those
are dead now that the home page uses the same `.site-header .nav`
markup as the inner pages. */
.site-header .nav a {
letter-spacing: -0.005em !important;
}
/* Launch-stage CTA banner — shown above the newsletter on the home page. */
/* Product pages — full-width header (no centered 1180 max) */
body.page-product .site-header {
padding-inline: 20px !important;
}
@media (max-width: 640px) {
body.page-product .site-header { padding-inline: 14px !important; }
}
/* Logo swap: full wordmark on desktop, icon-only on mobile.
All pages use the same dual ![]()
markup
now (home included), so the old WordPress single-image fallback is
gone — restore from git if you ever need the .header-logo > .logo
variant back. */
.site-header .brand .logo-mark { display: none !important; }
.site-header .brand .logo-full { display: block !important; }
@media (max-width: 991px) {
.site-header .brand {
display: inline-flex !important;
align-items: center !important;
}
.site-header .brand .logo-full { display: none !important; }
.site-header .brand .logo-mark {
display: block !important;
width: 32px !important;
height: 32px !important;
}
}
/* Hide the categories section for now (no real category data yet) */
.uic-categories { display: none !important; }
/* Keep Sign in visible on tablet/mobile (override base style which hides @1180) */
@media (max-width: 1180px) {
.site-header-auth .site-header-signin { display: inline-flex !important; }
}
/* ---------- Mobile: clean header ---------- */
@media (max-width: 760px) {
/* Hide cart + ghost Sign in/out — keep only primary CTA + hamburger */
.site-header-cart,
.site-header-auth .site-header-signin { display: none !important; }
/* Logo doesn't shrink, no clipping */
.header .logo,
.header [class*="brand"] { flex-shrink: 0 !important; min-width: 0 !important; }
.header .logo img,
.header .logo svg,
.header [class*="brand"] img { max-width: 132px !important; height: auto !important; }
/* Compact primary CTA */
.site-header-signup {
height: 34px !important;
padding: 0 12px !important;
font-size: 13px !important;
border-radius: 8px !important;
}
.site-header-auth { gap: 6px !important; }
}
/* ---------- Hamburger button: matches site button style ---------- */
.hamburger-menu {
display: none;
width: 36px !important;
height: 36px !important;
padding: 0 !important;
margin: 0 !important;
background: #fff !important;
border: 1px solid rgba(10, 10, 11, .12) !important;
border-radius: 8px !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: border-color .2s ease, background .2s ease, transform .15s ease, box-shadow .2s ease !important;
}
@media (max-width: 991px) {
.hamburger-menu { display: inline-flex !important; }
}
/* Hover: keep the bg white so the purple bars + border read clearly.
The pale-purple bg looked nice in isolation but at the 36px button
size it visually merged with the brand-coloured bars. */
.hamburger-menu:hover,
.hamburger-menu:focus-visible {
border-color: var(--uic-brand) !important;
background: #ffffff !important;
}
.hamburger-menu:hover .bar-1,
.hamburger-menu:hover .bar-2,
.hamburger-menu:hover .bar-3,
.hamburger-menu:focus-visible .bar-1,
.hamburger-menu:focus-visible .bar-2,
.hamburger-menu:focus-visible .bar-3 {
background: var(--uic-brand) !important;
}
.hamburger-menu:active { transform: translateY(1px); }
.hamburger-menu .bar-wrap {
display: inline-flex !important;
flex-direction: column !important;
gap: 4px !important;
width: 16px !important;
align-items: stretch !important;
}
.hamburger-menu .bar-1,
.hamburger-menu .bar-2,
.hamburger-menu .bar-3 {
display: block !important;
height: 2px !important; /* slightly thicker so 36px chrome doesn't
swallow it on retina screens */
width: 100% !important;
background: var(--uic-ink) !important;
border-radius: 999px !important;
transition: width .2s ease, background .2s ease !important;
}
.hamburger-menu .bar-2 { width: 11px !important; }
.hamburger-menu:hover .bar-2,
.hamburger-menu:focus-visible .bar-2 { width: 16px !important; }
/* Bars stay ink on hover — ink-on-pale-purple is high contrast and
readable. Purple-on-pale-purple blends into the hover background. */
/* Hide on desktop ≥992 */
@media (min-width: 992px) {
.hamburger-menu { display: none !important; }
}
/* ---------- Mobile slide-out menu (.ht-menu-wrapper): redesign ---------- */
.ht-menu-wrapper {
/* Bottom-sheet: slides UP from the bottom edge, rounded top corners. */
position: fixed !important;
top: auto !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
max-height: 86vh !important;
background: #ffffff !important;
color: var(--uic-ink) !important;
z-index: 9999 !important;
border-radius: 24px 24px 0 0 !important;
transform: translateY(100%) !important;
transition: transform .4s cubic-bezier(.22, 1, .36, 1) !important;
visibility: hidden !important;
box-shadow: 0 -18px 48px rgba(10, 10, 11, .18) !important;
overflow-y: auto !important;
}
/* Grab-handle bar at the top of the sheet. */
.ht-menu-wrapper .ht-menu-area::before {
content: "";
display: block;
width: 40px;
height: 4px;
margin: 0 auto 14px;
border-radius: 999px;
background: rgba(10, 10, 11, .18);
}
.ht-menu-wrapper.active,
.ht-menu-wrapper.opened,
.ht-menu-wrapper.is-open {
transform: translateY(0) !important;
visibility: visible !important;
opacity: 1 !important;
}
.ht-menu-wrapper.active *,
.ht-menu-wrapper.active .ht-menu-area,
.ht-menu-wrapper.active .ht-mobile-menu,
.ht-menu-wrapper.active .mobile-logo,
.ht-menu-wrapper.active .search-header-wrap {
visibility: visible !important;
opacity: 1 !important;
}
.ht-menu-wrapper.active .mobile-logo.d-none {
display: flex !important;
}
/* Backdrop */
.ht-menu-wrapper::before {
content: "";
position: fixed;
inset: 0;
background: rgba(10, 10, 11, 0.35);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
z-index: -1;
opacity: 0;
transition: opacity .3s ease;
pointer-events: none;
}
.ht-menu-wrapper.active::before {
opacity: 1;
pointer-events: auto;
}
body.ht-menu-open { overflow: hidden; }
.ht-menu-wrapper::before,
.ht-menu-wrapper::after { background: transparent !important; }
.ht-menu-area,
.ht-menu-wrapper .ht-menu-area {
background: #ffffff !important;
color: var(--uic-ink) !important;
padding: 20px !important;
text-align: left !important;
}
.ht-menu-toggle {
width: 36px !important;
height: 36px !important;
border: 1px solid rgba(10, 10, 11, .12) !important;
background: #fff !important;
border-radius: 8px !important;
color: var(--uic-ink) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0 !important;
margin: 0 !important;
position: absolute !important;
top: 16px !important;
right: 16px !important;
cursor: pointer !important;
}
.ht-menu-toggle i { display: none !important; }
/* X glyph rendered as a Unicode character — bulletproof across
browsers, no SVG mask quirks. `color` drives the icon, so the hover
transition smoothly recolors the X from ink to brand purple. */
.ht-menu-toggle {
font-family: var(--uic-h-font, system-ui, -apple-system, "Segoe UI", sans-serif) !important;
font-size: 22px !important;
line-height: 1 !important;
color: var(--uic-ink) !important;
transition: border-color .15s ease, background .15s ease, color .15s ease !important;
}
.ht-menu-toggle::before {
content: "\2715" !important; /* ✕ heavy multiplication x — reads
better than the thin × glyph */
font-size: 18px !important;
line-height: 1 !important;
font-weight: 600 !important;
width: auto !important;
height: auto !important;
background: transparent !important;
background-image: none !important;
mask-image: none !important;
-webkit-mask-image: none !important;
display: inline-block !important;
color: inherit !important; /* picks up button's color, so the
parent :hover rule recolors us */
transform: translateY(-1px) !important; /* optical center */
}
/* Same reasoning as the hamburger above — keep the bg white so the
purple X reads as clearly purple. Purple-on-pale-purple was washing
out at the 36px button size. */
.ht-menu-toggle:hover,
.ht-menu-toggle:focus-visible {
border-color: var(--uic-brand) !important;
background: #ffffff !important;
color: var(--uic-brand) !important;
}
.mobile-logo {
background: #fff !important;
border-bottom: none !important;
padding-bottom: 16px !important;
margin-bottom: 16px !important;
display: flex !important;
align-items: center !important;
}
.mobile-logo .logo {
/* Use the exact same full wordmark SVG as the desktop header
(.site-header .brand img.logo-full → assets/brand/logo.svg)
so the drawer logo is pixel-identical to the main logo. The
mark-image + hand-set never matched the SVG's wordmark
font, so we render the SVG as a background and hide both. */
display: block !important;
width: 168px !important;
height: 32px !important;
background: url('/assets/brand/logo.svg') left center / contain no-repeat !important;
text-decoration: none !important;
font-size: 0 !important;
}
.mobile-logo .logo img,
.mobile-logo .logo span {
display: none !important;
}
/* Hide the search bar inside the mobile drawer — clean sidebar */
.ht-menu-wrapper .search-header-wrap,
.ht-menu-wrapper .uic-search-wrapper,
.ht-menu-wrapper .uic-shop-filter,
.ht-menu-wrapper .uic-category-dropdown {
display: none !important;
}
/* Mobile nav list */
.ht-mobile-menu { background: transparent !important; }
.ht-mobile-menu ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.ht-mobile-menu ul li { margin: 0 !important; border-bottom: 1px solid var(--uic-line) !important; }
.ht-mobile-menu ul li:last-child { border-bottom: 0 !important; }
.ht-mobile-menu ul li a {
display: flex !important;
align-items: center !important;
height: 48px !important;
padding: 0 4px !important;
color: var(--uic-ink) !important;
font-size: 15px !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
text-decoration: none !important;
background: transparent !important;
transition: color .15s ease, padding .15s ease !important;
}
.ht-mobile-menu ul li a:hover,
.ht-mobile-menu ul li.current-menu-item a {
color: var(--uic-brand) !important;
padding-left: 8px !important;
}
/* Sign in / Sign up — two side-by-side buttons (replace the plain text
rows). Sign in = ghost outline, Sign up = filled purple. */
.ht-mobile-auth {
display: flex !important;
gap: 12px !important;
margin-top: 18px !important;
padding-bottom: 6px !important;
}
.ht-mobile-auth .ht-auth-btn {
flex: 1 1 0 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 48px !important;
border-radius: 12px !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
text-decoration: none !important;
transition: background .18s ease, color .18s ease, border-color .18s ease !important;
}
.ht-mobile-auth .ht-auth-signin {
background: #fff !important;
color: var(--uic-ink, #0f0f14) !important;
border: 1.5px solid var(--uic-line, #e6e5e0) !important;
}
.ht-mobile-auth .ht-auth-signin:hover {
border-color: var(--uic-purple, #8735ee) !important;
color: var(--uic-purple, #8735ee) !important;
}
.ht-mobile-auth .ht-auth-signup {
background: var(--uic-purple, #8735ee) !important;
color: #fff !important;
border: 1.5px solid var(--uic-purple, #8735ee) !important;
}
.ht-mobile-auth .ht-auth-signup:hover {
background: #6a26c2 !important;
border-color: #6a26c2 !important;
}
/* Backdrop overlay */
.ht-menu-overlay,
.menu-overlay,
[class*="menu-overlay"] {
background: rgba(10, 10, 11, 0.35) !important;
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
}
/* ---------- Hero: corner-bracket frame (CSS-only, infinitely sharp).
Replaces the legacy stretched PNG which got blurry on large displays.
Two diagonal corner markers + thin connecting border — pixel-perfect
at any resolution because there's no raster involved.
Hard square corners (no border-radius), flat purple markers (no shadow),
and minimum 50px breathing room from the viewport edges on tablet+. */
.home-banner .banner-boundary {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 50px !important;
right: 50px !important;
width: auto !important;
height: auto !important;
z-index: -1 !important;
pointer-events: none !important;
border: 1px solid rgba(135, 53, 238, .18) !important;
border-radius: 0 !important;
background: transparent !important;
}
/* Hide the legacy raster image — we draw the frame in CSS instead */
.home-banner .banner-boundary > img,
.home-banner .banner-boundary .banner-boundary-line {
display: none !important;
}
/* Four corner squares on the banner boundary rectangle.
::before = top-left, ::after = bottom-right; the .uic-corner-tr and
.uic-corner-bl spans are injected by theme.js so we can hit all four
corners with the same coordinate space as the .banner-boundary itself
(regardless of how wide .home-banner is). */
.home-banner .banner-boundary::before,
.home-banner .banner-boundary::after,
.home-banner .banner-boundary .uic-corner-tr,
.home-banner .banner-boundary .uic-corner-bl {
content: "" !important;
position: absolute !important;
width: 14px !important;
height: 14px !important;
background: #a259ff !important;
border-radius: 0 !important;
box-shadow: none !important;
pointer-events: none !important;
z-index: 3 !important;
display: block !important;
}
.home-banner .banner-boundary::before { top: -7px !important; left: -7px !important; }
.home-banner .banner-boundary::after { bottom: -7px !important; right: -7px !important; }
.home-banner .banner-boundary .uic-corner-tr { top: -7px !important; right: -7px !important; }
.home-banner .banner-boundary .uic-corner-bl { bottom: -7px !important; left: -7px !important; }
/* Hide the corner-bracket frame on mobile — too much visual noise on small screens */
@media (max-width: 760px) {
.home-banner .banner-boundary {
display: none !important;
}
}
/* ---------- Hero: prevent crowding on mobile ---------- */
.home-banner,
.banner-section,
.hero {
padding-left: 16px;
padding-right: 16px;
}
@media (max-width: 760px) {
.home-banner h1,
.banner-section h1,
.hero h1,
.elementor-widget-heading h1.elementor-heading-title {
font-size: clamp(30px, 7.5vw, 44px) !important;
line-height: 1.08 !important;
letter-spacing: -0.03em !important;
}
.home-banner p,
.banner-section p,
.hero p {
font-size: 14.5px !important;
line-height: 1.55 !important;
}
}
/* ---------- Floating decorative badges: contain to viewport ---------- */
.home-banner .floating-badge,
.banner-section [class*="floating" i],
.banner-section .elementor-element[data-id]:where([style*="position"]),
.elementor-absolute,
[class*="absolute"][class*="components" i],
[class*="absolute"][class*="templates" i] {
/* prevent these from causing horizontal scroll on small screens */
max-width: calc(100vw - 16px) !important;
}
@media (max-width: 760px) {
/* On phones, hide the most-likely decorative tilted badges */
.home-banner .elementor-absolute,
.banner-section .elementor-absolute,
.home-banner [class*="rotate"],
.banner-section [class*="rotate"] {
display: none !important;
}
}
/* ---------- Section headings (rhythm + weight) ---------- */
h2, h3 { letter-spacing: -0.025em; }
@media (max-width: 760px) {
h2 { font-size: clamp(26px, 6vw, 36px) !important; line-height: 1.1 !important; }
h3 { font-size: clamp(18px, 4.5vw, 22px) !important; }
}
/* ---------- Buttons: premium pill / dark CTA ---------- */
.elementor-button,
.btn-default,
.btn-primary,
a.btn,
button.btn {
font-weight: 600 !important;
letter-spacing: -0.005em !important;
}
.elementor-button.btn-primary,
a.btn-primary,
.btn-primary {
background: var(--uic-ink) !important;
color: #fff !important;
border: 1px solid var(--uic-ink) !important;
}
.elementor-button.btn-primary:hover,
a.btn-primary:hover,
.btn-primary:hover {
background: #1f1f23 !important;
border-color: #1f1f23 !important;
}
/* ---------- Card hover: image zoom only, never lift the whole card ----------
Applies to home page (.template-card / .upcoming-card / .product-wrapper)
and the product listing (.product-link). The wrapper stays put; only the
inner image/placeholder scales — subtle, premium, less visual noise. */
.template-card,
.component-card,
.product-card,
[class*="card"] > a,
.elementor-image-box,
.upcoming-card,
.product-wrapper {
transition: border-color .2s ease !important;
}
.template-card:hover,
.component-card:hover,
.upcoming-card:hover,
.elementor-image-box:hover,
.product-wrapper:hover {
transform: none !important;
box-shadow: none !important;
}
/* Product listing cards (product.html): hover zoom removed */
/* Hide the New/Best badge on home page product cards — not needed here */
.product-img .product-badge,
.product-img .tag {
display: none !important;
}
/* Card inner padding: 50px top, 50px left/right, 0 bottom */
.img-wrap {
padding: 50px 50px 0 !important;
}
.img-wrap .product-img {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
border-radius: 12px 12px 0 0 !important;
overflow: hidden !important;
}
.img-wrap .product-img .uic-dynamic-placeholder,
.img-wrap .product-img > a {
margin-bottom: 0 !important;
}
/* Taller home page template cards */
body.home .elementor-widget-product-widget-post .product-wrapper.prstyle-2 .img-wrap {
height: clamp(560px, 54vw, 720px) !important;
}
/* ── Tablet (641–1024px) refinements ──────────────────────────
- Card preview tile: 30px side padding (desktop uses 50px, mobile
10px) so the image sits a touch closer to the card edge here.
- Hero subtitle: cap at 70% width so the line length stays tight
and readable instead of stretching the full container. */
@media (min-width: 641px) and (max-width: 1024px) {
/* ── One consistent side gutter for EVERY section ──────────────
Tablet had no shared gutter: Elementor sections sat at ~15px,
the UIC custom sections (features, FAQ) ran edge-to-edge at 0,
the newsletter box was stuck to the left edge, and blueprint was
full-bleed — so sections didn't line up. Mirror the mobile model:
the page wrapper owns ONE 32px horizontal gutter and every inner
section / Elementor container / bootstrap row / UIC section zeroes
its own side padding. (Bootstrap columns are single-column below
xl at this width, so collapsing the row gutter is safe.) */
body > main,
body > .main-page-wrapper,
.about-page, .blog-page, .contact-page, .pricing-page, .product-layout {
padding-left: 32px !important;
padding-right: 32px !important;
box-sizing: border-box !important;
}
body > main .container,
body > .main-page-wrapper .container,
.elementor-element.e-con,
.elementor-element.e-con-boxed,
.elementor-element.e-con > .e-con-inner,
.elementor-element.e-con-boxed > .e-con-inner,
.elementor-widget-container,
.e-con.upcoming-section,
.uic-features, .uic-faq, .uic-categories, .uic-cta-banner,
.uic-section, .uic-section-inner {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* NOTE: do NOT zero the bootstrap row/column gutters here — at tablet
the product grid is 2-up (col-md-6) and the column padding IS the
gap between cards. Zeroing it glued the cards together. Bootstrap's
row uses a balanced negative margin + column padding that nets to
zero at the section edges, so the cards stay inside the 32px gutter
while keeping the gap between them. */
/* Hero banner adds its own 16px side padding on top of the wrapper
gutter — zero it so the hero content lines up at 32px like every
other section. (body-prefixed to beat section.home-banner.) */
body section.home-banner {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Newsletter purple box: span the full gutter symmetrically. Its
base rule pins width to `min(1180px, 100% - 48px)` + auto margins
(0,1,1) which left it narrower and offset; override at higher
specificity. Internal content padding stays untouched. */
body section.newsletter {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Card preview tile padding + hero subtitle width. */
body.home .product-wrapper.prstyle-2 .img-wrap,
body.home .elementor-widget-product-widget-post .product-wrapper.prstyle-2 .img-wrap,
body.page-product .product-wrapper.prstyle-2 .img-wrap {
padding-left: 30px !important;
padding-right: 30px !important;
}
body.home .home-banner .home-description,
.home-banner .home-description {
max-width: 70% !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Quotebox / testimonial purple card ("Hello,"): the shared gutter
rule above zeroes every e-con's side padding, which let the quote
text touch the purple box edges. Give this colored box real inner
breathing room: 50px top/bottom, 30px left/right. Two-class
selector (.elementor-element.elementor-element-42b7d94 = 0,2,0)
matches the gutter rule's specificity and wins by source order. */
.elementor-element.elementor-element-42b7d94 {
padding: 50px 30px !important;
}
/* Component (showcase) card preview height +30% on tablet too
(170px -> 221px). Same column-flex-basis override as the mobile
rule; `html` prefix lifts specificity past the clamp. */
html body.home .product-slider-wrapper .showcase-component .product-img {
flex: 0 0 221px !important;
height: 221px !important;
}
/* Footer carried its own 32px side margin on top of the wrapper's
32px gutter, so footer content sat at 64px — twice the inset of
every other section. Zero its margin so the footer lines up at
the shared 32px gutter. */
body footer.footer {
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Blueprint section: the lavender gradient background should bleed
edge-to-edge (full viewport), but the cards inside should keep
their inset. The shared gutter rule contained the whole section
at 32px; bleed the bg back out by -32px AND add 32px padding so
the inner cards return to the same position. Net: full-width bg,
cards unchanged. (Desktop already full-bleeds this section.) */
.e-con.upcoming-section {
margin-left: -32px !important;
margin-right: -32px !important;
width: calc(100% + 64px) !important;
max-width: calc(100% + 64px) !important;
padding-left: 32px !important;
padding-right: 32px !important;
}
}
/* ==============================================================
Tablet (641-1024px): CROSS-PAGE section-gutter consistency.
----------------------------------------------------------------
The homepage wraps everything in .main-page-wrapper (one 32px
gutter) so every section lines up at 32px, INCLUDING the
newsletter box and footer. The standalone pages (about, contact,
faq, blog, pricing, legal) instead render the newsletter + footer
as direct children, and the earlier
`body section.newsletter` / `body footer.footer` rules forced them
to width:100% -> full-bleed (0px) while page content sat at a
different inset. Net result: each page had a different gutter.
Standardise on ONE 32px gutter everywhere. This block runs AFTER
the main tablet block above so it wins on equal specificity.
============================================================== */
@media (min-width: 641px) and (max-width: 1024px) {
/* (1) Body-level newsletter + footer -> 32px inset, centered.
The `body >` child combinator only matches the standalone pages
(homepage keeps these inside .main-page-wrapper, so it's
untouched and stays at its own 32px). */
body > section.newsletter,
body > section.uic-cta-banner,
body > footer.footer {
width: calc(100% - 64px) !important;
max-width: calc(100% - 64px) !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* (2) About page: each section carries its own
`width: min(1180px, calc(100% - 48px)); margin:0 auto` (24px)
gutter that STACKED on the .about-page 32px padding -> 56px
inset. Collapse the native gutter so content sits at the shared
32px page padding instead. */
.about-hero,
.about-stats,
.about-why,
.about-crew {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Hero's own 24px side padding also stacks on the 32px page gutter;
zero it so the hero text aligns with every other section. */
.about-hero {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* Home page cards (index.html): clip overflow on the wrapper. Hover zoom
removed — admin-picked hover image swap handles the hover state. */
.img-wrap .product-img,
.product-wrapper .product-img {
overflow: hidden !important;
}
.img-wrap .product-img .uic-dynamic-placeholder,
.img-wrap .product-img > img,
.product-wrapper .product-img .uic-dynamic-placeholder,
.product-wrapper .product-img > img {
display: block !important;
}
/* ---------- Tag chips (Free, BEST, NEW) ---------- */
.chip, .tag, .badge,
[class*="chip"], [class*="badge"], [class*="tag"] {
font-weight: 600 !important;
letter-spacing: -0.005em !important;
}
/* ---------- Search bar polish ---------- */
.search-header-wrap input,
.search-header-wrap select,
.uic-search-wrapper input {
font-size: 14.5px !important;
}
.search-header-wrap input:focus,
.search-header-wrap select:focus,
.uic-search-wrapper input:focus {
box-shadow: none !important;
outline: none !important;
}
/* ---------- Newsletter input/submit ---------- */
.newsletter input[type="email"] {
height: 48px !important;
border: 1px solid var(--uic-line) !important;
border-radius: 10px !important;
padding: 0 16px !important;
font-size: 14.5px !important;
background: var(--uic-bg) !important;
transition: border-color .15s, box-shadow .15s !important;
}
.newsletter input[type="email"]:focus {
border-color: var(--uic-ink) !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(10, 10, 11, .06) !important;
}
.newsletter button[type="submit"],
.newsletter .subscribe-btn,
.newsletter [class*="subscribe"] button {
height: 48px !important;
padding: 0 20px !important;
border-radius: 10px !important;
background: var(--uic-ink) !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 14px !important;
border: 0 !important;
}
.newsletter button[type="submit"]:hover {
background: #1f1f23 !important;
}
/* ---------- Footer: clean & minimal ---------- */
.footer,
footer.footer,
.footer .footer-bottom {
background: #ffffff !important;
border-top: 1px solid var(--uic-line) !important;
}
.footer .footer-bottom {
border-top: 0 !important;
padding-top: 56px !important;
padding-bottom: 24px !important;
margin-top: 0 !important;
}
/* Brand */
.footer .footer-bottom .brand img {
height: 26px !important;
width: auto !important;
}
/* Nav columns */
.footer .footer-nav {
font-size: 16px !important;
font-weight: 500 !important;
}
.footer .footer-nav a {
color: var(--uic-body) !important;
font-size: 16px !important;
font-weight: 500 !important;
letter-spacing: -0.005em !important;
transition: color .15s !important;
white-space: nowrap !important;
}
.footer .footer-nav a:hover { color: var(--uic-brand) !important; }
.footer .footer-nav > div { gap: 12px !important; }
/* ---------- Newsletter — flat brand-purple box, transparent input ---------- */
section.newsletter {
width: min(1220px, calc(100% - 48px)) !important;
margin: 24px auto 64px !important;
padding: 56px 48px !important;
grid-template-columns: 1fr 480px !important;
gap: 40px !important;
align-items: center !important;
background: #8735ee !important;
border: 0 !important;
border-radius: 22px !important;
box-shadow: none !important;
position: relative !important;
color: #ffffff !important;
}
section.newsletter::before {
content: none !important;
}
section.newsletter h2 {
color: #ffffff !important;
font-weight: 500 !important;
font-size: clamp(28px, 4vw, 44px) !important;
line-height: 1.05 !important;
}
section.newsletter h2 br { display: inline !important; content: " " !important; }
section.newsletter label {
color: rgba(255, 255, 255, .82) !important;
font-size: 14.5px !important;
font-weight: 500 !important;
margin-bottom: 12px !important;
}
/* Inner input wrapper — no background, just inline layout.
Heights live on the input + button themselves (not the wrapper) so
both always end up the SAME pixel height regardless of which page
loads us (about/blog/pricing/index). Earlier `.newsletter input`
rules higher up in this file ship a 48px height; the rules below
override them with higher specificity (`section.newsletter form > div input`)
and !important so WP/elementor styles on the home page can't sneak
a different size through either. */
section.newsletter form > div {
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
padding: 0 !important;
height: auto !important;
display: grid !important;
grid-template-columns: 1fr auto !important;
align-items: stretch !important;
gap: 10px !important;
}
section.newsletter form > div input,
section.newsletter input[type="email"] {
height: 56px !important;
min-height: 56px !important;
box-sizing: border-box !important;
background: #ffffff !important;
border: 1px solid rgba(255, 255, 255, .18) !important;
border-radius: 10px !important;
padding: 0 18px !important;
color: var(--uic-ink, #19181f) !important;
font-size: 15px !important;
line-height: 1 !important;
width: 100% !important;
}
section.newsletter input::placeholder { color: var(--uic-muted, #918b99) !important; }
section.newsletter form > div input:focus,
section.newsletter input[type="email"]:focus {
outline: 0 !important;
border-color: #ffffff !important;
background: #ffffff !important;
box-shadow: none !important;
color: var(--uic-ink, #19181f) !important;
}
section.newsletter form > div button,
section.newsletter button[type="submit"],
section.newsletter button[type="button"] {
height: 56px !important;
min-height: 56px !important;
box-sizing: border-box !important;
background: var(--uic-ink, #0a0a0b) !important;
color: #ffffff !important;
font-weight: 600 !important;
font-size: 14.5px !important;
border-radius: 10px !important;
border: 0 !important;
padding: 0 24px !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
transition: background .15s ease !important;
}
section.newsletter form > div button:hover,
section.newsletter button[type="submit"]:hover,
section.newsletter button[type="button"]:hover {
background: #1f1f23 !important;
}
@media (max-width: 820px) {
section.newsletter {
grid-template-columns: 1fr !important;
padding: 40px 28px !important;
margin: 16px 0 48px !important;
}
}
/* Copyright row — flush, no band */
.footer .copyright,
.footer > .copyright {
background: #ffffff !important;
border-top: 1px solid var(--uic-line) !important;
margin-top: 32px !important;
padding: 22px 0 26px !important;
color: var(--uic-muted) !important;
font-size: 14px !important;
}
.footer .copyright em { font-style: normal !important; color: inherit !important; }
.footer .copyright a {
color: var(--uic-ink) !important;
font-size: 14px !important;
font-weight: 600 !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.footer .copyright a:hover { color: var(--uic-brand) !important; }
.footer .copyright a b {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
border-radius: 999px !important;
background: var(--uic-ink) !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 14px !important;
transition: background .15s !important;
}
.footer .copyright a:hover b { background: var(--uic-brand) !important; }
/* Keep "Privacy / Terms / Faq's" inline on one row */
footer.footer nav.footer-nav .legal-links,
.footer .footer-nav .legal-links {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px 14px !important;
width: auto !important;
grid-template-columns: none !important;
white-space: nowrap !important;
}
footer.footer .legal-links > span,
footer.footer .legal-links > a,
.footer .legal-links > span,
.footer .legal-links > a {
flex-shrink: 0 !important;
white-space: nowrap !important;
display: inline-flex !important;
align-items: center !important;
}
/* Stack footer nav columns on tablet so legal-links has full width */
@media (max-width: 900px) {
.footer .footer-nav {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
.footer .legal-links {
justify-self: start !important;
}
}
/* ---------- Back-to-top button: refine ---------- */
.progress-wrap,
.back-to-top,
[class*="back-to-top"] {
background: var(--uic-ink) !important;
border-radius: 999px !important;
box-shadow: 0 8px 22px rgba(10, 10, 11, .14) !important;
}
.progress-wrap svg path,
.progress-wrap::after,
.progress-wrap::before {
color: #fff !important;
}
/* ---------- Marquee/slider: subtle fade edges ---------- */
.template-list-slider-bg,
.template-list-slider,
.swiper,
.slick-slider {
mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
/* ---------- Container widths (ensure breathing room) ---------- */
.container, .container-fluid {
padding-left: 16px !important;
padding-right: 16px !important;
}
@media (min-width: 768px) {
.container, .container-fluid {
padding-left: 24px !important;
padding-right: 24px !important;
}
}
/* ---------- Mobile-wide gutter: 20px from body on every static page ----------
The page-by-page mobile paddings used to drift between 16px and
32px depending on which CSS file owned the wrapper. This rule
normalises every static page's main content wrapper to a clean
20px left/right gutter at ≤640px. Inner `.container`s and section
wrappers reset to 0 so we don't double up. */
@media (max-width: 640px) {
body > main,
body > .main-page-wrapper,
.about-page,
.blog-page,
.contact-page,
.pricing-page,
.product-layout,
.onix-detail {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box !important;
}
body > main .container,
body > .main-page-wrapper .container {
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Elementor sections + containers — zero out their inline horizontal
padding on mobile so the 20px body gutter is the ONLY horizontal
spacing. Cards stretch edge to edge of the gutter; their internal
padding (text away from card border) is preserved by leaving the
widget-container's padding alone. */
.elementor-section,
.elementor-container,
.elementor-element.e-con,
.elementor-element.e-con-boxed,
.elementor-element.e-con > .e-con-inner,
.elementor-element.e-con-boxed > .e-con-inner {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
/* Bootstrap row + col on the home page templates grid double up
with the body gutter — kill their horizontal padding/negative
margin so cards sit flush at the 20px body gutter. */
.row {
margin-left: 0 !important;
margin-right: 0 !important;
--bs-gutter-x: 0 !important;
--bs-gutter-y: 0 !important;
}
.row > [class*="col-"] {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Elementor widget shell — adds horizontal padding by default that
sits between the section and the actual widget content. Zero it
so widgets/cards flow at the 20px body gutter, not 20px + wrapper. */
.elementor-widget-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Bootstrap utility classes commonly used on home: .px-*, .ps-*,
.pe-*, .mx-*. These were chosen for desktop spacing; on mobile
they stack with the body gutter and feel double. */
.px-1, .px-2, .px-3, .px-4, .px-5,
.ps-1, .ps-2, .ps-3, .ps-4, .ps-5,
.pe-1, .pe-2, .pe-3, .pe-4, .pe-5,
.pl-1, .pl-2, .pl-3, .pl-4, .pl-5,
.pr-1, .pr-2, .pr-3, .pr-4, .pr-5 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.mx-1, .mx-2, .mx-3, .mx-4, .mx-5,
.ms-1, .ms-2, .ms-3, .ms-4, .ms-5,
.me-1, .me-2, .me-3, .me-4, .me-5 {
margin-left: 0 !important;
margin-right: 0 !important;
}
/* Common content wrappers from the home/inner pages with their own
horizontal gutters — collapse them so the body 20px is the only
horizontal spacing rule. width: 100% also overrides the
`width: min(Npx, calc(100% - Mpx))` patterns that some wrappers
use to add their own outer margin. */
.uic-features,
.uic-features-grid,
.uic-categories,
.feature-box-wrap,
.ht-feature-wrap,
.product-area,
.infinite-content,
/* Products page wrappers */
.product-main,
.filter-sidebar,
.product-grid,
/* Blog page wrappers */
.blog-list,
.blog-pagination,
.blog-search,
.blog-keywords,
/* Contact page wrappers */
.contact-form-wrap,
.contact-form-section,
/* Pricing page wrappers */
.pricing-cards-wrap,
/* About page wrappers */
.about-container,
.about-stats-wrap,
.about-stats,
.about-hero,
.about-why,
.about-crew,
/* Generic section wrappers commonly used */
.section-padding,
.uic-section {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Blueprint / upcoming section — has a full-bleed purple gradient bg.
The .main-page-wrapper padding (20px each side) clips it; bleed it
back out with negative margins so the gradient touches the screen
edges like a proper full-width section.
NOTE: uses 2-class selector (.e-con.upcoming-section) to match the
specificity of Elementor's .elementor-element.e-con zero-out rule
that would otherwise override the negative margins. */
.e-con.upcoming-section {
margin-left: -20px !important;
margin-right: -20px !important;
width: calc(100% + 40px) !important;
max-width: calc(100% + 40px) !important;
/* Pad the inner content back 20px so the gradient bg is full-bleed
while the cards keep their inset (bg full width, cards same). */
padding-left: 20px !important;
padding-right: 20px !important;
}
/* Filter sidebar on /product.html — keep its top/bottom padding
and section borders, just zero out the horizontal one. */
.filter-sidebar {
border-right: 0 !important;
border-bottom: 1px solid var(--line, #e6e6e6) !important;
}
/* Blog search bar — input text + search icon button hugged the
border on phones. Inset both by 5px so they breathe inside the
bordered form. */
.blog-search {
padding: 5px 5px 5px 12px !important;
}
.blog-search button {
margin-right: 0 !important;
}
/* .uic-section-inner has padding: 0 24px by default — that's the
inner gutter on top of the body 20px that left the bento tiles
inset 44px. Zero it on mobile. */
.uic-section-inner {
padding-left: 0 !important;
padding-right: 0 !important;
max-width: 100% !important;
}
/* Home page template cards — image breathes 10px from each side of
the card; the preview screenshot itself is also constrained to
stay inside the card so it doesn't overflow horizontally. */
body.home .product-wrapper.prstyle-2 .img-wrap,
body.home .elementor-widget-product-widget-post .product-wrapper.prstyle-2 .img-wrap {
padding: 24px 10px 0 !important;
height: clamp(400px, 86vw, 520px) !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
body.home .product-wrapper.prstyle-2 .product-img,
body.home .product-wrapper.prstyle-2 .product-img > a,
body.home .product-wrapper.prstyle-2 .product-img > a > img,
body.home .product-wrapper.prstyle-2 .product-img .uic-dynamic-placeholder {
max-width: 100% !important;
width: 100% !important;
/* Fill the fixed-height img-wrap (was `auto`, which let short/
landscape previews sit at their natural height and leave a gap
below them). 100% + object-fit cover makes every preview cover
the card image area flush to the bottom edge. */
height: 100% !important;
object-fit: cover !important;
}
/* Template card title — tighter 7px bottom margin on phones so the
"template 3 / $9.00" row sits closer to the price + platform pill. */
body.home .product-wrapper.prstyle-2 .product-title {
margin-bottom: 7px !important;
}
/* Home hero section had its own 16px inline padding which sat on
top of the body 20px gutter — collapse it so the hero search
bar truly stretches to the body gutter. */
section.home-banner {
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Hero search bar — stretch to full available width on mobile
(used to cap at `min(620px, calc(100% - 32px))` which left
additional dead space on top of the body 20px gutter). The form
clips its children to its own border-radius so the inner Search
button doesn't pop outside the form on the right edge. */
.hero-search-bar {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
flex-direction: column !important;
align-items: stretch !important;
border-radius: 14px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.hero-search-wrap {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
.hero-search-bar .hero-search-input,
.hero-search-bar .hero-search-category {
width: 100% !important;
height: 52px !important;
box-sizing: border-box !important;
border-radius: 0 !important; /* inherit the form's rounded clip */
margin: 0 !important;
}
.hero-search-bar .hero-search-input {
padding: 0 14px 0 48px !important;
}
.hero-search-bar .hero-search-input svg {
left: 14px !important;
}
.hero-search-bar .hero-search-category {
border-top: 1px solid var(--uic-h-line, #e6e6e6) !important;
border-left: 0 !important;
}
/* Search button floats inside the form with a 5px gap from each side
so all 4 corners of the rounded button are visible inside the
bordered container. */
.hero-search-bar .hero-search-submit {
width: calc(100% - 10px) !important;
height: 50px !important;
margin: 0 5px 5px !important;
border-radius: 10px !important;
box-sizing: border-box !important;
}
/* Footer — its width: min(1180px, calc(100% - 64px)) gave 32px each
side; the inner .footer-bottom + .copyright then padded further.
Collapse all of those so the footer aligns with the same 20px
body gutter as everything else. */
.footer,
.footer .footer-bottom,
.footer .copyright {
width: auto !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Footer sits INSIDE .main-page-wrapper which already provides 20px
side padding — footer adds 0 horizontal so it doesn't double-up. */
body > footer.footer,
footer.footer {
padding: 32px 0 24px !important;
box-sizing: border-box !important;
}
/* Footer inner spacing — collapse the big desktop vertical breathing
room. */
.footer .footer-bottom {
padding-top: 0 !important;
padding-bottom: 16px !important;
gap: 20px !important;
}
.footer .footer-nav {
gap: 24px !important;
}
.footer .footer-nav > div {
gap: 10px !important;
}
.footer .copyright,
.footer > .copyright {
margin-top: 16px !important;
padding: 16px 0 0 !important;
font-size: 13px !important;
}
/* Newsletter sits inside .main-page-wrapper which provides the 20px
body gutter — side margins are 0 so the card aligns flush with all
other sections. Inner padding gives breathing room from box edge. */
section.newsletter {
width: auto !important;
margin: 16px 0 24px !important;
padding: 28px 22px !important;
box-sizing: border-box !important;
}
/* Stack the email input + Subscribe button vertically on phones —
a side-by-side row at 375px squeezes both elements. Each is now
full-width and 52px tall for a clean tap target. */
section.newsletter form > div {
grid-template-columns: 1fr !important;
gap: 8px !important;
}
section.newsletter form > div input,
section.newsletter input[type="email"] {
width: 100% !important;
height: 52px !important;
min-height: 52px !important;
}
section.newsletter form > div button,
section.newsletter button[type="submit"],
section.newsletter button[type="button"] {
width: 100% !important;
height: 52px !important;
min-height: 52px !important;
}
}
/* ---------- Selection color ---------- */
::selection { background: var(--uic-brand-soft); color: var(--uic-ink); }
/* ---------- Skeleton smoothing on layout shift ---------- */
img[loading="lazy"] { background: var(--uic-bg-soft); }
/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
scroll-behavior: auto !important;
}
}
/* Home hero marquee: keep both rows uncropped. Loaded late on purpose so
theme/plugin image rules cannot stretch the second row screenshots. */
body.home .template-list-slider .template-marquee,
body.home .template-list-slider .template-marquee > a {
width: clamp(280px, 34vw, 360px) !important;
height: clamp(180px, 22vw, 250px) !important;
min-width: clamp(280px, 34vw, 360px) !important;
max-width: clamp(280px, 34vw, 360px) !important;
min-height: clamp(180px, 22vw, 250px) !important;
max-height: clamp(180px, 22vw, 250px) !important;
overflow: hidden !important;
}
body.home .template-list-slider .template-marquee > img,
body.home .template-list-slider .template-marquee > a > img,
body.home .marquee-wrapper-right .template-marquee > img,
body.home .marquee-wrapper-right .template-marquee > a > img {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
min-height: 100% !important;
max-height: 100% !important;
/* Cover instead of contain so each tile is filled edge-to-edge — the
container has overflow:hidden + border-radius so the crop is clean. */
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
}
/* ==============================================================
NEW SECTIONS — Linear/Vercel-style polish
Features · Categories · Pricing · FAQ · CTA banner
============================================================== */
.uic-section-inner {
/* Match the width of the rest of the home page's elementor-boxed
sections — centered, capped at 1200px, no extra inner padding
(parent containers handle the horizontal gutter). */
max-width: 1200px;
margin: 0 auto;
padding: 0;
}
/* FAQ eyebrow chip ("FAQ" label) — removed per request, the section
title is doing enough lifting on its own. */
.uic-faq-side .uic-section-eyebrow {
display: none !important;
}
/* FAQ left column — constrain the heading width so the title wraps
gracefully instead of stretching to the column width. */
.uic-faq-side .uic-section-title {
max-width: 420px !important;
}
/* "Browse Templates" / "Browse Components" CTA buttons — the WP
theme shipped asymmetric padding (more on the right than left) so
the text+chevron sat visually left of center. Force symmetric
padding both axes + tight gap between label and icon. */
body.home a.ht-btn {
height: 50px !important;
padding: 0 26px !important;
gap: 10px !important;
}
body.home a.ht-btn .btn-icon {
margin: 0 !important;
padding: 0 !important;
}
body.home a.ht-btn .btn-icon img {
margin: 0 !important;
display: block;
}
.uic-section-eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--uic-brand);
margin-bottom: 12px;
}
.uic-section-eyebrow::before {
content: "";
width: 5px; height: 5px;
border-radius: 999px;
background: var(--uic-brand);
}
.uic-section-title {
margin: 0 0 14px;
font-size: clamp(30px, 4vw, 44px);
line-height: 1.08;
letter-spacing: -0.03em;
font-weight: 700;
color: var(--uic-ink);
}
/* ==============================================================
Universal H2 — every h2 site-wide uses the .uic-section-title look.
We bundle all the legacy theme selectors so we WIN their specificity
battles (without !important, so editor inline overrides still take
effect when the user types in Font size).
============================================================== */
h2,
.title,
.uic-section-title,
.main-title,
body.home h2,
body.home .title-area > .title-big > .title,
body.home .elementor-widget-sectiontitle .title,
body .title-big > .title {
font-size: clamp(28px, 4vw, 44px);
line-height: 1.08;
letter-spacing: -0.03em;
font-weight: 700;
color: var(--uic-ink, #0f0f14);
}
/* Small-context exceptions inherit from their card body so cramped
widgets don't get blown-up headings. */
.template-marquee h2,
.product-img h2,
.uic-feature-card h2,
.uic-pricing-card h2 {
font-size: inherit;
line-height: inherit;
letter-spacing: inherit;
font-weight: inherit;
}
/* Mobile: hide the four hero corner squares — too noisy on small screens. */
@media (max-width: 760px) {
.home-banner::before,
.home-banner::after,
.home-banner .banner-boundary::before,
.home-banner .banner-boundary::after {
display: none !important;
}
}
/* Mobile: hide the four hero corner squares — too noisy on small screens. */
@media (max-width: 760px) {
.home-banner::before,
.home-banner::after,
.home-banner .banner-boundary::before,
.home-banner .banner-boundary::after {
display: none !important;
}
}
.uic-section-lead {
margin: 0 0 40px;
max-width: 620px;
color: var(--uic-body);
font-size: 16.5px;
line-height: 1.55;
font-weight: 500;
}
.uic-section-head-row {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.uic-section-link {
font-size: 14px;
font-weight: 600;
color: var(--uic-ink);
letter-spacing: -0.005em;
border-bottom: 1px solid var(--uic-line);
padding-bottom: 2px;
transition: color .15s, border-color .15s;
}
.uic-section-link:hover {
color: var(--uic-brand);
border-color: var(--uic-brand);
}
/* ---------- Features — bento grid ---------- */
.uic-features {
padding: 96px 0 0;
background: #fff;
border-top: 0 !important;
}
/* Home page section-header rows ("All Templates → Browse Templates",
"Components → Browse Components") — vertically center the title
column with the right-side button so they share a baseline. The
default elementor flex layout was top-aligning them. */
body.home .elementor-element-e008d98,
body.home .elementor-element-8ea614c {
align-items: center !important;
}
/* Unified product-card background — #F5F5F5 across every grid:
home Templates section, home Components section, and the
/product.html grid. Previously the WP theme used #E8D8E0 (pink)
for Templates and #F1F1F1 for Components; we normalize so both
feel like one product surface. */
body.home .product-wrapper.prstyle-2 .img-wrap,
body.home .product-wrapper.prstyle-2 .img-wrap:has(img),
body.home .showcase-template .img-wrap,
body.home .showcase-component .img-wrap,
body.home .showcase-component .product-img,
body.page-product .product-wrapper.prstyle-2 .img-wrap,
body.page-product .product-wrapper.prstyle-2 .img-wrap:has(img),
body.page-product .showcase-template .img-wrap,
body.page-product .showcase-component .img-wrap {
background: #F5F5F5 !important;
background-color: #F5F5F5 !important;
background-image: none !important;
border-radius: 20px !important;
overflow: hidden !important;
}
/* Product card title — 24px across home Templates / Components and
the /product.html grid. The WP theme defaulted to 20px which read
small next to the larger preview tile. */
body.home .product-wrapper.prstyle-2 .product-title,
body.home .product-wrapper.prstyle-2 .product-title a,
body.page-product .product-wrapper.prstyle-2 .product-title,
body.page-product .product-wrapper.prstyle-2 .product-title a {
font-size: 24px !important;
line-height: 1.2 !important;
letter-spacing: -0.018em !important;
}
/* Inner preview image: rounded TOP corners only — the bottom flows
straight into the gray tile's bottom edge so the image visually
anchors into the card instead of floating in a separate rounded
box. Applies to every product grid (home + /product.html). */
body.home .product-wrapper.prstyle-2 .img-wrap .product-img,
body.home .product-wrapper.prstyle-2 .img-wrap .product-img > a,
body.home .product-wrapper.prstyle-2 .img-wrap .product-img > a > img,
body.page-product .product-wrapper.prstyle-2 .img-wrap .product-img,
body.page-product .product-wrapper.prstyle-2 .img-wrap .product-img > a,
body.page-product .product-wrapper.prstyle-2 .img-wrap .product-img > a > img {
border-radius: 14px 14px 0 0 !important;
overflow: hidden !important;
}
/* And ensure the wrapper itself + the bottom-content row have NO bg
(they used to inherit the pink/lavender). */
body.home .elementor-element-1764d5d .product-wrapper.prstyle-2,
body.home .elementor-element-1764d5d .product-wrapper.prstyle-2 .product-content,
body.home .elementor-element-1764d5d .product-wrapper.prstyle-2 .bottom-content {
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
}
/* Global button weight — bring every button + button-styled link
down to font-weight: 500 (medium). The WP theme + several local
stylesheets shipped 700/800 weights that made the site feel shouty;
500 reads cleaner across the board. */
button,
.btn,
.button,
.uc-btn,
.ht-btn,
.uic-btn,
.theme-btn,
.cta-btn,
.cta-button,
.default-btn,
.default-btn-3,
.black-btn,
.ht-btn-2,
.ht-btn-purple,
.site-header-signin,
.site-header-signup,
.site-header-cart,
.hero-search-submit,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost,
.btn-link,
.newsletter button,
.contact,
a[role="button"],
input[type="submit"],
input[type="button"] {
font-weight: 500 !important;
}
/* Keep the same 24px gutter as every other .uic-section-inner so the
Features section aligns with Categories / Pricing / FAQ / CTA above
and below it. The previous zero-padding override flushed content to
the viewport edges. */
.uic-bento {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: minmax(260px, auto) minmax(220px, auto);
gap: 14px;
}
.uic-bento-tile {
position: relative;
background: #fff;
border: 1px solid var(--uic-line);
border-radius: 18px;
padding: 26px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 18px;
}
/* Hover effects removed per request — tiles stay perfectly still. */
.uic-bento-hero {
grid-column: span 2;
grid-row: span 1;
flex-direction: row;
align-items: stretch;
background: linear-gradient(180deg, #ffffff 0%, var(--uic-bg-soft) 100%);
}
.uic-bento-tall {
grid-column: span 1;
grid-row: span 2;
background: linear-gradient(180deg, #ffffff 0%, #faf5ff 100%);
}
.uic-bento-small {
grid-column: span 1;
grid-row: span 1;
}
.uic-bento-copy {
display: flex;
flex-direction: column;
gap: 8px;
flex: 0 0 auto;
}
.uic-bento-hero .uic-bento-copy {
flex: 0 0 44%;
justify-content: center;
}
.uic-bento-tile .uic-feature-icon {
width: 38px; height: 38px;
border-radius: 10px;
background: #fff;
border: 1px solid var(--uic-line);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--uic-ink);
margin-bottom: 10px;
}
.uic-bento-tile h3 {
margin: 0;
font-size: 17px;
font-weight: 700;
letter-spacing: -0.014em;
color: var(--uic-ink);
}
.uic-bento-hero h3 { font-size: 22px; letter-spacing: -0.02em; }
.uic-bento-tile p {
margin: 0;
color: var(--uic-muted);
font-size: 14.5px;
line-height: 1.55;
font-weight: 500;
}
.uic-bento-hero p { font-size: 15.5px; max-width: 36ch; }
/* ---- Visuals ---- */
.uic-bento-visual {
position: relative;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 180px;
}
/* Hero: floating product card */
.uic-bento-visual-card {
align-items: flex-end;
justify-content: flex-end;
padding: 4px;
}
.uic-mock-card {
width: 100%;
max-width: 280px;
background: #fff;
border: 1px solid var(--uic-line);
border-radius: 14px;
padding: 18px;
display: grid;
gap: 10px;
box-shadow: 0 18px 40px rgba(10, 10, 11, .08);
transform: rotate(-1.5deg);
transition: transform .25s ease;
}
/* .uic-bento-hero:hover transform removed — tile mockup stays still. */
.uic-mock-pill {
width: 56px; height: 18px;
border-radius: 999px;
background: var(--uic-brand-soft);
border: 1px solid rgba(135, 53, 238, .2);
}
.uic-mock-line {
height: 10px;
border-radius: 999px;
background: var(--uic-bg-soft);
border: 1px solid var(--uic-line);
}
.uic-mock-line.w-70 { width: 78%; background: var(--uic-ink); border-color: var(--uic-ink); height: 14px; }
.uic-mock-line.w-56 { width: 56%; }
.uic-mock-thumb {
height: 70px;
border-radius: 10px;
background: linear-gradient(135deg, var(--uic-brand) 0%, #c89bff 100%);
margin-top: 4px;
}
.uic-mock-row {
display: flex;
gap: 6px;
margin-top: 4px;
}
.uic-mock-dot {
width: 24px; height: 6px;
border-radius: 999px;
background: var(--uic-line);
}
.uic-mock-dot:first-child { background: var(--uic-brand); width: 32px; }
/* Tall: stacked format chips */
.uic-bento-visual-stack {
flex-direction: column;
gap: 8px;
align-items: stretch;
padding-top: 6px;
}
.uic-mock-stack-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--uic-line);
border-radius: 10px;
font-size: 13.5px;
font-weight: 600;
color: var(--uic-ink);
letter-spacing: -0.005em;
transition: transform .2s ease, border-color .2s ease;
}
.uic-mock-stack-item span {
font-size: 13.5px;
}
.uic-mock-stack-item::before {
content: "";
width: 8px; height: 8px;
border-radius: 999px;
flex-shrink: 0;
}
.uic-mock-stack-item.is-figma::before { background: #f24e1e; }
.uic-mock-stack-item.is-html::before { background: #e34f26; }
.uic-mock-stack-item.is-framer::before { background: #0055ff; }
.uic-mock-stack-item.is-webflow::before { background: #4353ff; }
/* .uic-bento-tall:hover stack-item animations removed — stays still. */
/* Responsive */
@media (max-width: 980px) {
.uic-bento {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
}
.uic-bento-hero { grid-column: span 2; flex-direction: column; }
.uic-bento-hero .uic-bento-copy { flex: 0 0 auto; }
.uic-bento-hero .uic-bento-visual { min-height: 200px; }
.uic-bento-tall { grid-column: span 2; grid-row: span 1; flex-direction: row; }
.uic-bento-tall .uic-bento-copy { flex: 1 1 0; justify-content: center; }
.uic-bento-tall .uic-bento-visual-stack { flex: 1 1 0; }
.uic-bento-small { grid-column: span 1; }
}
@media (max-width: 600px) {
.uic-bento { grid-template-columns: 1fr; }
.uic-bento-hero,
.uic-bento-tall,
.uic-bento-small { grid-column: span 1; }
.uic-bento-tall { flex-direction: column; }
}
/* ---------- Categories ---------- */
.uic-categories {
padding: 96px 0;
background: var(--uic-bg-soft);
border-top: 1px solid var(--uic-line);
}
.uic-category-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
@media (max-width: 980px) { .uic-category-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .uic-category-grid { grid-template-columns: 1fr; } }
.uic-category {
background: #fff;
border: 1px solid var(--uic-line);
border-radius: 14px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 16px;
transition: border-color .2s, transform .2s, box-shadow .2s;
color: var(--uic-ink);
text-decoration: none;
}
.uic-category:hover {
border-color: var(--uic-ink);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(10, 10, 11, .06);
}
.uic-category-visual {
aspect-ratio: 16 / 10;
border-radius: 10px;
background: var(--uic-bg-soft);
border: 1px solid var(--uic-line);
position: relative;
overflow: hidden;
display: grid;
place-items: center;
gap: 6px;
padding: 18px;
}
.uic-category-visual span {
display: block;
background: rgba(135, 53, 238, .08);
border: 1px solid rgba(135, 53, 238, .18);
border-radius: 6px;
}
.uic-category-visual[data-cat="landing"] {
background: linear-gradient(180deg, #fff 0%, #faf5ff 100%);
align-content: end;
}
.uic-category-visual[data-cat="landing"] span { width: 80%; height: 14px; }
.uic-category-visual[data-cat="landing"] span:nth-child(1) { width: 50%; background: var(--uic-ink); border-color: var(--uic-ink); height: 18px; }
.uic-category-visual[data-cat="landing"] span:nth-child(2) { width: 70%; }
.uic-category-visual[data-cat="landing"] span:nth-child(3) { width: 38%; }
.uic-category-visual[data-cat="dashboard"] {
background: linear-gradient(135deg, #fff, #f0faff);
grid-template-columns: 1fr 1fr;
align-content: start;
}
.uic-category-visual[data-cat="dashboard"] span { width: 100%; height: 28px; border-radius: 4px; }
.uic-category-visual[data-cat="dashboard"] span:nth-child(1) { background: var(--uic-brand-soft); border-color: rgba(135,53,238,.2); }
.uic-category-visual[data-cat="dashboard"] span:nth-child(2) { height: 40px; }
.uic-category-visual[data-cat="ecommerce"] {
background: linear-gradient(135deg, #fff, #fff5eb);
grid-template-columns: 1fr 1fr;
align-content: center;
}
.uic-category-visual[data-cat="ecommerce"] span { aspect-ratio: 1; width: 100%; background: rgba(255,160,80,.16); border-color: rgba(255,160,80,.24); }
.uic-category-visual[data-cat="portfolio"] {
background: linear-gradient(135deg, #fff, #f4f4ed);
place-content: center;
}
.uic-category-visual[data-cat="portfolio"] span { width: 80%; aspect-ratio: 16/9; background: var(--uic-ink); border-color: var(--uic-ink); }
.uic-category-visual[data-cat="saas"] {
background: linear-gradient(135deg, #fff, #f2e9ff);
align-content: end;
grid-template-columns: 1fr;
}
.uic-category-visual[data-cat="saas"] span { width: 100%; height: 10px; }
.uic-category-visual[data-cat="saas"] span:nth-child(1) { width: 64%; background: var(--uic-ink); border-color: var(--uic-ink); height: 14px; }
.uic-category-visual[data-cat="saas"] span:nth-child(2) { width: 86%; }
.uic-category-visual[data-cat="blog"] {
background: linear-gradient(135deg, #fff, #eafff4);
grid-template-columns: 1fr;
align-content: center;
}
.uic-category-visual[data-cat="blog"] span { width: 92%; height: 18px; }
.uic-category-visual[data-cat="blog"] span:nth-child(1) { background: var(--uic-ink); border-color: var(--uic-ink); width: 60%; }
.uic-category-meta {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.uic-category-meta h3 {
margin: 0;
font-size: 15.5px;
font-weight: 700;
letter-spacing: -0.012em;
color: var(--uic-ink);
}
.uic-category-meta span {
font-size: 13px;
color: var(--uic-muted);
font-weight: 500;
}
/* ---------- Pricing (hidden for launch — keep markup for later) ---------- */
.uic-pricing { display: none !important; }
.uic-pricing-keep {
padding: 110px 0;
background: #fff;
border-top: 1px solid var(--uic-line);
text-align: center;
}
.uic-pricing .uic-section-eyebrow,
.uic-pricing .uic-section-title { justify-self: center; }
.uic-pricing .uic-section-eyebrow { display: inline-flex; }
.uic-pricing .uic-section-lead { margin-left: auto; margin-right: auto; }
.uic-pricing-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
margin-top: 8px;
text-align: left;
align-items: stretch;
}
@media (max-width: 980px) { .uic-pricing-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }
.uic-plan {
position: relative;
background: #fff;
border: 1px solid var(--uic-line);
border-radius: 18px;
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 20px;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.uic-plan:hover {
border-color: var(--uic-ink);
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(10, 10, 11, .06);
}
.uic-plan.is-featured {
background: var(--uic-ink);
color: #fff;
border-color: var(--uic-ink);
}
.uic-plan.is-featured:hover { box-shadow: 0 24px 50px rgba(10, 10, 11, .18); }
.uic-plan-badge {
position: absolute;
top: -12px; left: 50%;
transform: translateX(-50%);
background: var(--uic-brand);
color: #fff;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
}
.uic-plan-head h3 {
margin: 0 0 6px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.012em;
}
.uic-plan-head p {
margin: 0;
color: var(--uic-muted);
font-size: 14px;
line-height: 1.5;
}
.uic-plan.is-featured .uic-plan-head p { color: rgba(255,255,255,.7); }
.uic-plan-price {
display: flex;
align-items: baseline;
gap: 6px;
}
.uic-plan-price .amount {
font-size: 38px;
font-weight: 800;
letter-spacing: -0.025em;
color: inherit;
}
.uic-plan-price .period {
font-size: 13.5px;
color: var(--uic-muted);
font-weight: 500;
}
.uic-plan.is-featured .uic-plan-price .period { color: rgba(255,255,255,.65); }
.uic-plan-cta {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 18px;
border-radius: 10px;
background: var(--uic-brand);
color: #fff;
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.005em;
text-decoration: none;
transition: background .15s, transform .12s;
}
.uic-plan-cta:hover { background: var(--uic-brand-hover); transform: translateY(-1px); }
.uic-plan-cta-ghost {
background: transparent;
color: var(--uic-ink);
border: 1px solid var(--uic-line);
}
.uic-plan-cta-ghost:hover {
background: var(--uic-bg-soft);
border-color: var(--uic-ink);
}
.uic-plan.is-featured .uic-plan-cta {
background: #fff;
color: var(--uic-ink);
}
.uic-plan.is-featured .uic-plan-cta:hover { background: #ececec; }
.uic-plan-features {
list-style: none;
padding: 0;
margin: 6px 0 0;
display: flex;
flex-direction: column;
gap: 10px;
font-size: 14px;
color: var(--uic-body);
font-weight: 500;
line-height: 1.5;
}
.uic-plan.is-featured .uic-plan-features { color: rgba(255,255,255,.84); }
.uic-plan-features li {
position: relative;
padding-left: 22px;
}
.uic-plan-features li::before {
content: "";
position: absolute;
left: 0; top: 6px;
width: 14px; height: 14px;
border-radius: 999px;
background: var(--uic-brand-soft);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238735ee' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
background-size: 10px;
background-position: center;
background-repeat: no-repeat;
}
.uic-plan.is-featured .uic-plan-features li::before {
background-color: rgba(255,255,255,.14);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
/* ---------- FAQ ---------- */
.uic-faq {
padding: 110px 0;
background: #ffffff;
border-top: 0 !important;
}
.uic-faq-inner {
display: grid;
grid-template-columns: minmax(280px, 1fr) 1.4fr;
gap: 56px;
align-items: start;
}
@media (max-width: 900px) {
.uic-faq-inner { grid-template-columns: 1fr; gap: 28px; }
}
.uic-faq-side { max-width: 420px; }
.uic-faq-side .uic-section-title { max-width: 420px; }
.uic-faq-side .uic-section-lead { max-width: 300px; margin-bottom: 0; }
.uic-faq-side .uic-section-lead a {
color: var(--uic-brand);
font-weight: 600;
border-bottom: 1px solid currentColor;
}
@media (max-width: 900px) {
.uic-faq-side,
.uic-faq-side .uic-section-title,
.uic-faq-side .uic-section-lead { max-width: none; }
}
.uic-faq-list { display: flex; flex-direction: column; }
.uic-faq-item {
border-top: 1px solid var(--uic-line);
background: transparent;
padding: 0;
}
.uic-faq-item:last-child { border-bottom: 1px solid var(--uic-line); }
.uic-faq-item > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 0;
font-size: 15.5px;
font-weight: 600;
color: var(--uic-ink);
letter-spacing: -0.01em;
transition: color .15s;
}
.uic-faq-item > summary::-webkit-details-marker { display: none; }
.uic-faq-item > summary:hover { color: var(--uic-brand); }
.uic-faq-mark {
position: relative;
width: 18px; height: 18px;
flex-shrink: 0;
}
.uic-faq-mark::before,
.uic-faq-mark::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 12px; height: 1.6px;
background: var(--uic-ink);
border-radius: 999px;
transition: transform .2s ease;
transform: translate(-50%, -50%);
}
.uic-faq-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.uic-faq-item[open] .uic-faq-mark::after { transform: translate(-50%, -50%) rotate(0deg); }
.uic-faq-body {
padding: 0 0 22px;
color: var(--uic-body);
font-size: 14.5px;
line-height: 1.6;
font-weight: 500;
max-width: 60ch;
}
/* ---------- CTA banner ---------- */
.uic-cta-banner {
/* 24px horizontal gutter so the dark inner card never touches the
viewport edge on narrow screens / pages that don't load home.css. */
padding: 110px 24px 0;
background: #fff;
border-top: 0;
}
/* Kill the CTA's bottom gap on EVERY page. theme.js injects a runtime
`.uic-cta-banner { padding-bottom: var(--brand-section-y) !important }`
rule; `section.uic-cta-banner` (higher specificity) + !important beats
it so the dark card sits tight above the newsletter site-wide. The
newsletter's own top padding provides the separation. */
section.uic-cta-banner {
padding-bottom: 0 !important;
}
.uic-cta-inner {
/* Box left edge aligns with the page content column (grid container's
1220px max-width minus its 24px gutters = 1172px). Overrides the
stale 1200px from .uic-section-inner so the dark card lines up with
the section headings, footer content and newsletter. */
max-width: 1172px;
/* Dark base washed with a diagonal purple gradient so the panel reads
as brand-coloured, not flat black. The radial highlight up top adds
a soft glow behind the heading. */
background:
radial-gradient(130% 130% at 50% -25%, rgba(135, 53, 238, .42), transparent 55%),
linear-gradient(135deg, #1d1233 0%, #14101f 42%, var(--uic-ink, #0f0f14) 100%);
border-radius: 10px;
padding: 64px 48px;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
}
.uic-cta-inner::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(620px 280px at 22% -10%, rgba(135, 53, 238, .55), transparent 62%),
radial-gradient(560px 260px at 85% 115%, rgba(157, 78, 255, .42), transparent 60%);
pointer-events: none;
}
.uic-cta-inner > * { position: relative; z-index: 1; }
.uic-cta-inner h2 {
margin: 0 0 12px !important;
font-size: clamp(28px, 4vw, 44px) !important;
font-weight: 700 !important;
letter-spacing: -0.03em !important;
line-height: 1.05 !important;
color: #ffffff !important;
}
.uic-cta-inner p {
margin: 0 auto 28px;
max-width: 520px;
color: rgba(255,255,255,.72);
font-size: 16px;
line-height: 1.55;
}
.uic-cta-actions {
display: inline-flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
}
.uic-cta-primary,
.uic-cta-ghost {
display: inline-flex;
align-items: center;
justify-content: center;
height: 48px;
padding: 0 22px;
border-radius: 10px;
font-size: 14.5px;
font-weight: 600;
letter-spacing: -0.005em;
text-decoration: none;
transition: background .15s, color .15s, border-color .15s, transform .12s;
}
/* Brand-coloured primary = solid purple with white text. */
.uic-cta-primary {
background: var(--uic-brand, #8735ee);
color: #fff;
}
.uic-cta-primary:hover {
background: var(--uic-brand-hover, #6d24d5);
}
/* Secondary = solid white with dark text (was a transparent ghost). */
.uic-cta-ghost {
background: #fff;
color: var(--uic-ink, #0f0f14);
border: 0;
}
.uic-cta-ghost:hover { background: #ececec; }
/* ============================================================
Newsletter clean (site-wide) — left-text + right-form row.
Moved here from home.css and de-scoped from `body.home` to
`body` so the CTA banner + subscriber row render on every page
(home, about, blog, contact, pricing, …) — not just the home
page. Product pages intentionally omit the markup. Vertical
padding uses --brand-section-y so the rhythm matches the rest
of the site on standalone pages too.
============================================================ */
body section.newsletter.uic-newsletter-clean {
background: #ffffff !important;
border-radius: 0 !important;
border-bottom: 1px solid var(--brand-line, #e6e5e0) !important;
display: block !important;
grid-template-columns: none !important;
gap: 0 !important;
align-items: initial !important;
padding-top: calc(var(--brand-section-y, 115px) / 2) !important;
padding-bottom: calc(var(--brand-section-y, 115px) / 2) !important;
padding-left: 0 !important;
padding-right: 0 !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
.uic-newsletter-clean .uic-newsletter-row {
/* Same container model as .uic-container (max-width 1220 + 24px inline
padding) so the text/form content lines up with the section content
column — was width:min(1220px,…) with no padding, which left the
content 24px to the left of every other section. */
width: 100%;
max-width: 1220px;
margin: 0 auto;
padding-inline: 24px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
flex-wrap: nowrap; /* one row on desktop; mobile media query wraps it */
}
.uic-newsletter-clean .uic-newsletter-text {
flex: 0 0 420px;
min-width: 0;
max-width: 420px;
}
.uic-newsletter-clean .uic-newsletter-text h2 {
margin: 0 0 8px !important;
color: var(--brand-ink, #0f0f14) !important;
font-size: clamp(22px, 2.1vw, 30px) !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
line-height: 1.1 !important;
white-space: nowrap !important;
background: transparent !important;
}
body section.newsletter.uic-newsletter-clean .uic-newsletter-text p {
margin: 0;
color: var(--brand-muted, #6b6b75) !important;
font-size: 14.5px !important;
line-height: 1.5 !important;
}
/* Force flex (polish/site-footer set it to grid otherwise) and shape the
input ourselves — polish/custom-enhancements force width:100% on every
newsletter input, so we bump specificity to match + flip to 320px. */
body section.newsletter.uic-newsletter-clean .uic-newsletter-form {
display: flex !important;
grid-template-columns: none !important;
align-items: center;
justify-content: flex-end;
gap: 10px;
flex: 1 1 auto;
margin-left: auto;
}
body section.newsletter.uic-newsletter-clean .uic-newsletter-form input[type="email"] {
height: 48px !important;
width: 320px !important;
max-width: 100% !important;
padding: 0 18px !important;
border: 1px solid var(--brand-line, #e6e5e0) !important;
border-radius: var(--brand-radius-input, 10px) !important;
background: #fff !important;
color: var(--brand-ink, #0f0f14) !important;
font-size: 14px !important;
outline: 0 !important;
transition: border-color .15s ease, box-shadow .15s ease !important;
}
body section.newsletter.uic-newsletter-clean .uic-newsletter-form input[type="email"]:focus {
border-color: var(--brand, #8735ee) !important;
box-shadow: 0 0 0 4px rgba(135, 53, 238, 0.10) !important;
}
body section.newsletter.uic-newsletter-clean .uic-newsletter-form input::placeholder {
color: var(--brand-muted, #6b6b75) !important;
}
/* High specificity (body + section + 2 classes + element) so this beats
`.uic-newsletter-form button` (custom-enhancements.css) and
`section.newsletter form > div button` (polish.css), both of which
force a dark-ink fill on submit buttons inside newsletters. */
body section.newsletter.uic-newsletter-clean .uic-newsletter-form button[type="submit"] {
height: 48px !important;
min-width: 0;
padding: 0 24px;
border: 0;
border-radius: var(--brand-radius-button, 10px) !important;
background: var(--brand, #8735ee) !important;
color: #fff !important;
font-size: 14px !important;
font-weight: 600 !important;
line-height: 1 !important;
letter-spacing: -0.005em;
cursor: pointer;
transition: background-color .15s ease;
}
body section.newsletter.uic-newsletter-clean .uic-newsletter-form button[type="submit"]:hover {
background: var(--brand-hover, #6d24d5) !important;
}
.uic-newsletter-clean .visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 720px) {
.uic-newsletter-clean .uic-newsletter-row {
flex-wrap: wrap;
gap: 24px;
}
.uic-newsletter-clean .uic-newsletter-text {
flex-basis: 100%;
max-width: 100%;
}
.uic-newsletter-clean .uic-newsletter-text h2 {
white-space: normal !important;
}
.uic-newsletter-clean .uic-newsletter-form { width: 100%; }
body section.newsletter.uic-newsletter-clean .uic-newsletter-form input[type="email"] {
flex: 1 1 auto !important;
width: auto !important;
}
}
@media (max-width: 640px) {
.uic-features, .uic-categories, .uic-pricing, .uic-faq { padding: 64px 0; }
/* CTA banner keeps a side gutter on mobile so its dark inner card
doesn't glue itself to the screen edges. */
.uic-cta-banner { padding: 64px 16px 0; }
.uic-cta-inner { padding: 44px 30px; border-radius: 10px; }
.uic-section-lead { font-size: 15px; margin-bottom: 28px; }
}
/* ============================================================
GLOBAL BUTTON HOVER OVERRIDE — site-wide, color change only
No translate / scale / shadow / shine / icon move on hover.
Applies on every public page (polish.css is loaded everywhere).
============================================================ */
button,
.btn,
.button,
.uc-btn,
.ht-btn,
.cart-button,
.icon-btn,
.default-btn-3,
.ht-btn-2,
.theme-btn,
.uic-btn,
.site-header-signin,
.site-header-signup,
.site-header-cart,
.hero-search-submit,
.newsletter button,
.contact,
.cta-btn,
.cta-button,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-ghost,
.btn-link,
.ht-btn-purple,
a[role="button"],
input[type="submit"],
input[type="button"] {
transition: background-color .2s ease, color .2s ease, border-color .2s ease !important;
}
button:hover,
.btn:hover,
.button:hover,
.uc-btn:hover,
.ht-btn:hover,
.cart-button:hover,
.icon-btn:hover,
.default-btn-3:hover,
.ht-btn-2:hover,
.theme-btn:hover,
.uic-btn:hover,
.site-header-signin:hover,
.site-header-signup:hover,
.site-header-cart:hover,
.hero-search-submit:hover,
.newsletter button:hover,
.contact:hover,
.cta-btn:hover,
.cta-button:hover,
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline:hover,
.btn-ghost:hover,
.btn-link:hover,
.ht-btn-purple:hover,
a[role="button"]:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
transform: none !important;
scale: none !important;
box-shadow: none !important;
filter: none !important;
}
button:hover *,
.btn:hover *,
.button:hover *,
.uc-btn:hover *,
.ht-btn:hover *,
.cart-button:hover *,
.icon-btn:hover *,
.default-btn-3:hover *,
.theme-btn:hover *,
.uic-btn:hover *,
.cta-btn:hover *,
.cta-button:hover *,
a[role="button"]:hover * {
transform: none !important;
scale: none !important;
}
button::before,
button::after,
.btn::before,
.btn::after,
.button::before,
.button::after,
.uc-btn::before,
.uc-btn::after,
.ht-btn::before,
.ht-btn::after {
transition: none !important;
}
/* Suppress decorative shimmer pseudo-elements on hover for the legacy
theme button classes. The bare `button:hover::before` form used to
live in this list — it was way too broad and zero'd the ::before
opacity of every