/* Minification failed. Returning unminified contents. (355,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (356,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (357,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (358,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (430,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (431,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (433,20): run-time error CSS1039: Token not allowed after unary operator: '-x' (434,19): run-time error CSS1039: Token not allowed after unary operator: '-y' (466,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (468,21): run-time error CSS1039: Token not allowed after unary operator: '-size' (469,22): run-time error CSS1039: Token not allowed after unary operator: '-size' (472,32): run-time error CSS1039: Token not allowed after unary operator: '-ap-gold' (478,37): run-time error CSS1039: Token not allowed after unary operator: '-ap-gold' (493,52): run-time error CSS1039: Token not allowed after unary operator: '-ap-teal' (493,67): run-time error CSS1038: Expected hex color, found '#0000' (507,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (508,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (510,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (511,32): run-time error CSS1039: Token not allowed after unary operator: '-hi-card-border' (513,21): run-time error CSS1039: Token not allowed after unary operator: '-hi-card-ink' (538,36): run-time error CSS1039: Token not allowed after unary operator: '-hi-card-border' (546,36): run-time error CSS1039: Token not allowed after unary operator: '-hi-card-bg' (637,28): run-time error CSS1039: Token not allowed after unary operator: '-ap-teal' (645,22): run-time error CSS1039: Token not allowed after unary operator: '-ap-teal' (650,29): run-time error CSS1039: Token not allowed after unary operator: '-ap-teal' (688,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (689,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (690,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (691,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (692,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (693,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (697,21): run-time error CSS1039: Token not allowed after unary operator: '-ap-muted' (724,28): run-time error CSS1039: Token not allowed after unary operator: '-ap-line' (726,22): run-time error CSS1039: Token not allowed after unary operator: '-ap-bg' (728,17): run-time error CSS1039: Token not allowed after unary operator: '-ap-ink' (739,26): run-time error CSS1039: Token not allowed after unary operator: '-ap-tile' (747,48): run-time error CSS1039: Token not allowed after unary operator: '-ap-accent' (747,70): run-time error CSS1039: Token not allowed after unary operator: '-ap-line' (764,42): run-time error CSS1039: Token not allowed after unary operator: '-ap-accent' (779,17): run-time error CSS1039: Token not allowed after unary operator: '-ap-ink' (784,17): run-time error CSS1039: Token not allowed after unary operator: '-ap-muted' (792,17): run-time error CSS1039: Token not allowed after unary operator: '-ap-accent' (952,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (953,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (954,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (955,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (956,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (957,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (967,22): run-time error CSS1039: Token not allowed after unary operator: '-ap-bg' (971,1): run-time error CSS1019: Unexpected token, found '}' (982,64): run-time error CSS1039: Token not allowed after unary operator: '-ap-line' (995,28): run-time error CSS1039: Token not allowed after unary operator: '-ap-line' (1011,32): run-time error CSS1039: Token not allowed after unary operator: '-ap-line' (1021,26): run-time error CSS1039: Token not allowed after unary operator: '-ap-highlight' (1045,1): run-time error CSS1019: Unexpected token, found '@keyframes' (1046,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (1081,17): run-time error CSS1039: Token not allowed after unary operator: '-ap-ink' (1085,17): run-time error CSS1039: Token not allowed after unary operator: '-ap-muted' (1090,13): run-time error CSS1030: Expected identifier, found ':' (1090,34): run-time error CSS1031: Expected selector, found ')' (1090,34): run-time error CSS1025: Expected comma or open brace, found ')' (1125,24): run-time error CSS1039: Token not allowed after unary operator: '-ap-accent' (1157,42): run-time error CSS1039: Token not allowed after unary operator: '-ap-accent' (1171,42): run-time error CSS1039: Token not allowed after unary operator: '-ap-accent' (1260,1): run-time error CSS1019: Unexpected token, found '@keyframes' (1261,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (1423,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1424,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1431,22): run-time error CSS1039: Token not allowed after unary operator: '-ap-card-h' (1454,21): run-time error CSS1039: Token not allowed after unary operator: '-ap-review-font' (1665,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1669,22): run-time error CSS1039: Token not allowed after unary operator: '-ap-card-h' (1791,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1792,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1803,1): run-time error CSS1019: Unexpected token, found '@keyframes' (1804,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (1818,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1819,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1874,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1875,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1876,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1877,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1878,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (1926,28): run-time error CSS1039: Token not allowed after unary operator: '-ap-border' (1931,33): run-time error CSS1039: Token not allowed after unary operator: '-ap-green' (1942,19): run-time error CSS1039: Token not allowed after unary operator: '-compare-sticky-top' (1944,26): run-time error CSS1039: Token not allowed after unary operator: '-ap-bg' (1964,26): run-time error CSS1039: Token not allowed after unary operator: '-ap-border' (1976,28): run-time error CSS1039: Token not allowed after unary operator: '-ap-border' (1977,22): run-time error CSS1039: Token not allowed after unary operator: '-ap-bg' (1988,17): run-time error CSS1039: Token not allowed after unary operator: '-ap-green' (2126,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2128,26): run-time error CSS1039: Token not allowed after unary operator: '-col-gap' (2133,41): run-time error CSS1039: Token not allowed after unary operator: '-col-gap' (2134,42): run-time error CSS1039: Token not allowed after unary operator: '-col-gap' (2142,19): run-time error CSS1039: Token not allowed after unary operator: '-compare-sticky-top' (2695,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2696,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2697,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2698,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2699,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2700,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2701,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2702,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2703,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2704,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2705,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2706,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2707,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2708,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (2738,16): run-time error CSS1039: Token not allowed after unary operator: '-inv-x' (2739,15): run-time error CSS1039: Token not allowed after unary operator: '-inv-y' (2743,16): run-time error CSS1039: Token not allowed after unary operator: '-emb-x' (2744,15): run-time error CSS1039: Token not allowed after unary operator: '-emb-y' (2748,16): run-time error CSS1039: Token not allowed after unary operator: '-prt-x' (2749,15): run-time error CSS1039: Token not allowed after unary operator: '-prt-y' (2753,16): run-time error CSS1039: Token not allowed after unary operator: '-fin-x' (2754,15): run-time error CSS1039: Token not allowed after unary operator: '-fin-y' (2758,16): run-time error CSS1039: Token not allowed after unary operator: '-qa-x' (2759,15): run-time error CSS1039: Token not allowed after unary operator: '-qa-y' (2763,16): run-time error CSS1039: Token not allowed after unary operator: '-ship-x' (2764,15): run-time error CSS1039: Token not allowed after unary operator: '-ship-y' (2826,16): run-time error CSS1039: Token not allowed after unary operator: '-inv-x' (2827,15): run-time error CSS1039: Token not allowed after unary operator: '-inv-y' (2828,17): run-time error CSS1039: Token not allowed after unary operator: '-order-size' (2829,18): run-time error CSS1039: Token not allowed after unary operator: '-order-size' (2852,30): run-time error CSS1039: Token not allowed after unary operator: '-cycle' (2858,30): run-time error CSS1039: Token not allowed after unary operator: '-cycle' (2859,32): run-time error CSS1039: Token not allowed after unary operator: '-cycle' (2864,30): run-time error CSS1039: Token not allowed after unary operator: '-cycle' (2865,32): run-time error CSS1039: Token not allowed after unary operator: '-cycle' (2870,30): run-time error CSS1039: Token not allowed after unary operator: '-cycle' (2871,34): run-time error CSS1039: Token not allowed after unary operator: '-cycle' (2885,1): run-time error CSS1019: Unexpected token, found '@keyframes' (2886,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (2923,1): run-time error CSS1019: Unexpected token, found '@keyframes' (2924,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (2961,1): run-time error CSS1019: Unexpected token, found '@keyframes' (2962,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (2993,1): run-time error CSS1019: Unexpected token, found '@keyframes' (2994,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (3193,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3302,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3307,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3313,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3319,9): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3326,57): run-time error CSS1039: Token not allowed after unary operator: '-cat-min' (3553,1): run-time error CSS1019: Unexpected token, found '@keyframes' (3554,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '0%' (3567,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3568,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3569,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3570,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3571,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-' (3603,21): run-time error CSS1039: Token not allowed after unary operator: '-ap-ink' (3608,21): run-time error CSS1039: Token not allowed after unary operator: '-ap-muted' (3662,28): run-time error CSS1039: Token not allowed after unary operator: '-ap-accent' */ /* Apliiq Homepage — CSS (save as /css/apliiq-home.css) Scope: .ap-home to avoid collisions. White theme. */ /* HOMEPAGE: prevent review modals/lightboxes from flashing on load */ .ap-home .ap-review-overlay, .ap-home .ap-review-modal, .ap-home [role="dialog"][data-review], .ap-home dialog[data-review] { /* hidden by default */ opacity: 0; visibility: hidden; pointer-events: none; z-index: 10000; /* sits above page when shown */ } .ap-review-modal { position: fixed; inset: 0; } .ap-home.modal-open { overflow: hidden; } /* Only show when actually open/active */ .ap-home dialog[data-review][open], .ap-home [role="dialog"][data-review].is-open, .ap-home [role="dialog"][data-review][aria-hidden="false"] { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s ease; } /* Optional: overlay base (hidden until .is-open) */ .ap-home .ap-review-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); } .ap-home .ap-review-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .18s ease; } /* Base layout */ .ap-home { background: #ffffff; color: #222 } .ap-section { padding: 48px 16px } .ap-home p { margin-bottom: 0; text-align: center; line-height: normal; } .leftalign { text-align: left !important; } @media(min-width:768px) { .ap-section { padding: 62px 24px } } .ap-container { max-width: 1200px; margin: 0 auto } @media (min-width: 768px) { div p { max-width: none !important; } } /* Typography */ .ap-h1 { font-size: clamp(32px,6vw,56px); letter-spacing: -.02em; margin: 0 0 12px } .ap-h2 { font-size: clamp(24px,3.2vw,36px); margin: 0 0 12px; text-align: center; } .ap-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #00b798; font-weight: 700 } .ap-muted { color: #1a1a1a } .ap-highlight { color: #aaaaaa } .ap-center { text-align: center } .ap-right { text-align: right } .ap-subtle { color: #777 } /* Grids */ .ap-grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px } @media(min-width:900px) { .ap-grid-2 { grid-template-columns: 1.1fr .9fr; gap: 24px } } .ap-grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px } @media(min-width:900px) { .ap-grid-3 { grid-template-columns: repeat(3,1fr); gap: 20px } } .ap-grid-4 { display: grid; grid-template-columns: 1fr; gap: 12px } @media(min-width:900px) { .ap-grid-4 { grid-template-columns: repeat(4,1fr); gap: 16px } } .ap-align-center { align-items: center } /* Cards & images */ .ap-card { background: #fff; border: 1px solid #eee; border-radius: 16px; box-shadow: 0 6px 24px rgba(0,0,0,.06),0 2px 8px rgba(0,0,0,.04); padding: 20px } .ap-tiles .ap-card { display: flex; flex-direction: column; gap: 10px } .ap-tiles .ap-card a { margin-top: auto } .ap-ph { border-radius: 20px; overflow: hidden } .ap-ph img { width: 100%; height: 100%; object-fit: cover; display: block } .ap-ph-tall { aspect-ratio: 4/3 } .ap-ph-wide { aspect-ratio: 16/9 } .ap-thumb { width: 100%; height: 180px; object-fit: cover; border-radius: 12px; border: 1px solid #eee } /* Pills, lists, icons */ .ap-pill { display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; background: #f4fbf9; border: 1px solid #d8f0e8; color: #0b6a5f; border-radius: 999px; padding: 6px 10px; margin-bottom: 8px; text-align: center; } .ap-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px } .ap-list li { display: flex; gap: 10px; align-items: flex-start; text-align: left; } .ap-check { color: #00b798; font-weight: 800 } .ap-cross { color: #bbb; font-weight: 800 } /* Buttons */ .ap-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0 8px; justify-content: center; } .ap-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 999px; font-weight: 700; text-decoration: none; border: 2px solid transparent; transition: .2s box-shadow,.2s transform } .ap-btn:focus { outline: 2px solid #ffb600; outline-offset: 2px } .ap-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.08) } .ap-btn-primary { background: #00b798; color: #fff; padding: 14px 32px !important; } .ap-btn-secondary { background: #222; color: #fff } .ap-btn-tri { background: #ffb600 !important; color: #fff; } .ap-btn-ghost { background: transparent; color: #222; border-color: #e1e1e1 } .ap-btn-lg { padding: 14px 22px; font-size: 18px } /* ======================================================= HERO — Original styles (from your snippet) ======================================================= */ .ap-hero-wrap { align-items: center } .ap-hero-sub { color: #5a5a5a; font-size: 18px; text-align: center; } .ap-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: #fffbe6; border: 1px solid #ffe58f; color: #222; font-weight: 700 } .ap-badge .ap-star { color: #ffb600; font-weight: 800 } /* ======================================================= HERO v2 — Single-image viewer w/ multiple tooltips (No JS) — fully scoped to [data-hero-v2] ======================================================= */ /* component tokens */ [data-hero-v2] { --ap-gold: #ffb600; /* hotspot ring + pulse */ --ap-teal: #00b798; /* tooltip background */ --ap-gray-600: #5a5a5a; --ap-dark: #222222; } /* make sure nothing clips the tooltip */ [data-hero-v2] .ap-hero-visual { position: relative; overflow: visible !important; } /* root + viewer */ [data-hero-v2] .hi-root { position: relative; isolation: isolate; } [data-hero-v2] .hi-viewer { position: relative; width: 100%; } /* radios used for slide tabs (hidden) */ [data-hero-v2] .hi-tab { position: absolute; left: -9999px; } /* ---------- Square viewport that holds one image ---------- */ [data-hero-v2] .hi-viewport { position: relative; width: 100%; aspect-ratio: 1 / 1; /* guarantees a square box */ overflow: visible; /* allow tips to extend past the square */ border-radius: 14px; background: #fff; /* clean letterbox if needed */ box-shadow: 0 6px 24px rgba(0,0,0,.06); } /* image layers: only one is shown at a time */ [data-hero-v2] .hi-layer { position: absolute; inset: 0; display: none; /* off by default */ z-index: 1; /* sits under hotspots and tips */ } [data-hero-v2] .hi-layer img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; /* beat global img rules */ max-height: none !important; object-position: center !important; object-fit: contain !important; /* scale image to fit the square (no crop) */ border-radius: 14px; } /* show the selected image */ [data-hero-v2] #hi-tab-1:checked ~ .hi-viewport .hi-layer-1 { display: block; } [data-hero-v2] #hi-tab-2:checked ~ .hi-viewport .hi-layer-2 { display: block; } [data-hero-v2] #hi-tab-3:checked ~ .hi-viewport .hi-layer-3 { display: block; } /* ---------- Hotspot pins (dot + tooltip) anchored together ---------- */ /* Each pin is a
element positioned by --x/--y */ [data-hero-v2] .hi-pin { --x: 50%; --y: 50%; position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: none; /* only active image's pins are shown */ z-index: 2; /* base layer for pins */ max-width: min(280px, 72vw); } /* Only show pins for the active slide */ [data-hero-v2] #hi-tab-1:checked ~ .hi-viewport .hi-pin-1 { display: block; } [data-hero-v2] #hi-tab-2:checked ~ .hi-viewport .hi-pin-2 { display: block; } [data-hero-v2] #hi-tab-3:checked ~ .hi-viewport .hi-pin-3 { display: block; } /* Hide default marker and make the summary be the tappable dot */ [data-hero-v2] .hi-pin > summary { list-style: none; cursor: pointer; } [data-hero-v2] .hi-pin > summary::-webkit-details-marker { display: none; } /* hotspot dot (gold, subtle pulse) */ [data-hero-v2] .hi-hotspot { --size: 22px; display: block; width: var(--size); height: var(--size); border-radius: 50%; background: rgba(255,182,0,.18); /* translucent gold fill */ border: 2px solid var(--ap-gold); box-shadow: 0 0 0 0 rgba(255,182,0,.28); animation: hi-pulse 2s infinite; } [data-hero-v2] .hi-hotspot:focus-visible { outline: 3px solid var(--ap-gold); outline-offset: 2px; } /* tooltip card (READABLE: teal bg + black text) */ [data-hero-v2] .hi-card { position: absolute; left: 50%; transform: translate(-50%, 10px); margin-top: 10px; padding: 10px 12px; min-width: 200px; max-width: 300px; background: white; /* << unified teal */ color: #000; /* << black text */ border: 6px solid color-mix(in oklab, var(--ap-teal) 60%, #0000); border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.18); line-height: 1.35; opacity: 0; translate: 0 4px; pointer-events: none; transition: opacity .18s ease, translate .18s ease; z-index: 3; /* above base pins */ } /* tooltip arrow pointing back to the dot (match teal bg) */ /* Card variables (make sure these exist on .hi-card) */ [data-hero-v2] .hi-card { --hi-card-bg: var(--ap-teal); --hi-card-ink: #000; /* one source of truth for the border color */ --hi-card-border: color-mix(in oklab, var(--ap-teal) 60%, transparent); border: 3px solid var(--hi-card-border); background: white; color: var(--hi-card-ink); } /* Fallback if color-mix/oklab isn’t supported */ @supports not (color: color-mix(in oklab, red, white)) { [data-hero-v2] .hi-card { --hi-card-border: rgba(0,0,0,.12); } } /* Arrow: bottom layer = “border” triangle */ [data-hero-v2] .hi-card::before, [data-hero-v2] .hi-card::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 0; height: 0; } [data-hero-v2] .hi-card::before { top: -14px; /* 1px higher than the fill to create a crisp border edge */ border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 13px solid var(--hi-card-border); /* matches card border */ } /* Arrow: top layer = teal fill triangle */ [data-hero-v2] .hi-card::after { top: -13px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 12px solid var(--hi-card-bg); /* matches card bg */ } /* tip content styles inherit black ink */ [data-hero-v2] .hi-title { font-weight: 800; font-size: 16px; margin: 0 0 6px 0; color: inherit; } [data-hero-v2] .hi-desc { font-size: 14px; margin: 0; color: inherit; opacity: .95; } [data-hero-v2] .hi-link { display: inline-block; margin-top: 8px; font-weight: 700; text-decoration: underline; color: inherit; } /* show card on hover (desktop) */ @media (hover:hover) { [data-hero-v2] .hi-pin:hover .hi-card, [data-hero-v2] .hi-pin:focus-within .hi-card { opacity: 1; translate: 0 0; pointer-events: auto; } } /* show when opened (tap / keyboard) */ [data-hero-v2] .hi-pin[open] .hi-card { opacity: 1; translate: 0 0; pointer-events: auto; } /* when a card is visible, raise the whole pin above everything */ [data-hero-v2] .hi-pin:hover, [data-hero-v2] .hi-pin:focus-within, [data-hero-v2] .hi-pin[open] { z-index: 9999; } /* optional: flip a specific tooltip to the left to avoid edge overflow (desktop) */ @media (min-width: 900px) { [data-hero-v2] .hi-card[data-align="left"] { left: auto; right: 0; transform: translate(0, 10px); } [data-hero-v2] .hi-card[data-align="left"]::before { left: auto; right: 16px; transform: none; } } /* subtle pulse animation for the hotspot dot */ @keyframes hi-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,182,0,.28); } 70% { box-shadow: 0 0 0 14px rgba(255,182,0,0); } 100% { box-shadow: 0 0 0 0 rgba(255,182,0,0); } } /* ---------- Dots navigation (switch images) ---------- */ [data-hero-v2] .hi-dots { display: flex; justify-content: center; gap: 10px; margin-top: 12px; } [data-hero-v2] .hi-dot { width: 12px; height: 12px; border-radius: 999px; border: 2px solid var(--ap-teal); cursor: pointer; opacity: .5; } [data-hero-v2] #hi-tab-1:checked ~ .hi-dots label[for="hi-tab-1"], [data-hero-v2] #hi-tab-2:checked ~ .hi-dots label[for="hi-tab-2"], [data-hero-v2] #hi-tab-3:checked ~ .hi-dots label[for="hi-tab-3"] { background: var(--ap-teal); opacity: 1; } [data-hero-v2] .hi-dot:focus-visible { outline: 3px solid var(--ap-teal); outline-offset: 2px; } /* accessibility: reduce motion */ @media (prefers-reduced-motion: reduce) { [data-hero-v2] .hi-hotspot { animation: none; } } /* Show exactly one card when any pin is open */ @supports selector(:has(*)) { /* If any pin is open, hide all cards... */ [data-hero-v2] .hi-viewport:has(.hi-pin[open]) .hi-card { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; translate: 0 4px; } /* ...except the card inside the open pin that currently has focus (summary or card content) */ [data-hero-v2] .hi-viewport:has(.hi-pin[open]:focus-within) .hi-pin[open]:focus-within .hi-card { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; translate: 0 0; } /* While any card is open, disable hover-reveal on other pins */ @media (hover:hover) { [data-hero-v2] .hi-viewport:has(.hi-pin[open]) .hi-pin:hover .hi-card { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } } /* ===== INTEGRATIONS (scoped to prevent conflicts) ===== */ #integrations { --ap-ink: #222222; --ap-muted: #5a5a5a; --ap-accent: #00b798; --ap-bg: #ffffff; --ap-line: #e9ecef; --ap-tile: color-mix(in oklab, var(--ap-accent) 10%, transparent); } #integrations .ap-sub { color: var(--ap-muted); margin: 4px auto 18px; max-width: none; } #integrations .ap-integrations { display: grid; gap: clamp(12px, 2vw, 20px); grid-template-columns: repeat(4, minmax(220px, 1fr)); } @media (max-width: 1024px) { #integrations .ap-integrations { grid-template-columns: repeat(2, minmax(220px, 1fr)); } } @media (max-width: 560px) { #integrations .ap-integrations { grid-template-columns: 1fr; } } #integrations .ap-integration { position: relative; display: block; padding: 16px 16px 14px; border: 1px solid var(--ap-line); border-radius: 14px; background: var(--ap-bg); text-decoration: none; color: var(--ap-ink); box-shadow: 0 1px 2px rgba(0,0,0,.04); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease; text-align: center; overflow: hidden; } #integrations .ap-integration::after { content: ""; position: absolute; inset: 0; background: var(--ap-tile); opacity: 0; pointer-events: none; transition: opacity .18s ease; } #integrations .ap-integration:hover, #integrations .ap-integration:focus-visible { border-color: color-mix(in oklab, var(--ap-accent) 40%, var(--ap-line)); box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); } #integrations .ap-integration:hover::after, #integrations .ap-integration:focus-visible::after { opacity: .9; } #integrations .ap-integration-icon { width: 64px; height: 64px; margin: 4px auto 10px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in oklab, var(--ap-accent) 12%, transparent); box-shadow: inset 0 1px 2px rgba(0,0,0,.06); } #integrations .ap-integration-icon img { width: 60%; height: 60%; object-fit: contain; display: block; } #integrations .ap-integration h3 { margin: 6px 0 4px; font-size: clamp(16px, 1.05rem, 18px); line-height: 1.2; color: var(--ap-ink); } #integrations .ap-integration-desc { margin: 0 0 10px; color: var(--ap-muted); font-size: 0.95rem; max-width: none; } #integrations .ap-integration-cta { display: inline-block; font-weight: 700; color: var(--ap-accent); text-decoration: none; } #integrations .ap-integration-cta::after { content: " →"; } /* renamed pill to avoid global .ap-pill conflicts */ #integrations .ap-integration-pill { position: absolute; top: 10px; right: 10px; font-size: 11px; line-height: 1; padding: 6px 8px; border-radius: 999px; background: #fffbe6; color: #222; border: 1px solid #ffe58f; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.06); } /* reduce motion */ @media (prefers-reduced-motion: reduce) { #integrations .ap-integration { transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } } /* ======TRUST BAR=====*/ /* circle layout fixes */ .ap-trust-item { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; /* circle sizing */ aspect-ratio: 1 / 1; width: clamp(140px, 24vw, 180px); /* a touch larger to give copy room */ padding: 12px; /* inner breathing room */ border-radius: 50%; background: #fff; border: 1px solid #eee; box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 6px 18px rgba(0, 0, 0, .55); /* contain any overflow just in case */ overflow: hidden; } /* ensure text wraps inside the circle */ .ap-trust-item .ap-kpi, .ap-trust-item .ap-kpi-sub { display: block; max-width: 78%; /* keep lines comfortably away from the edge */ margin: 0 auto; overflow-wrap: anywhere; /* allow breaks on long tokens */ hyphens: auto; } /* type tuning so two lines + subline fit cleanly */ .ap-kpi { font-weight: 800; color: #00b798; font-size: clamp(15px, 2vw, 18px); line-height: 1.15; letter-spacing: .2px; } .ap-kpi-sub { margin-top: 4px; color: #5a5a5a; font-size: clamp(11px, 1.6vw, 14px); line-height: 1.2; } /* grid: keep circles roomy on small screens */ .ap-trust-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; justify-items: center; } @media (min-width:900px) { .ap-trust-grid { grid-template-columns: repeat(4,1fr); gap: 20px; } } /* optional: shrink text slightly on very tight viewports */ @media (max-width:360px) { .ap-kpi { font-size: 14px; } .ap-kpi-sub { font-size: 11px; } } /* nice-to-have hover/focus remains */ .ap-trust-item { transition: transform .25s ease, box-shadow .25s ease; } .ap-trust-item:hover { transform: translateY(-2px); box-shadow: 0 2px 0 rgba(0,0,0,.05), 0 10px 24px rgba(0,0,0,.2); } .ap-trust-item:focus-within { outline: 2px solid #00b798; outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .ap-trust-item { transition: none; } .ap-trust-item:hover { transform: none; } } /* ===== TRUST SECTION shimmer background ===== */ .ap-trust-shimmer { /* background: linear-gradient(270deg, #f8fffc, #fffbe6);*/ /* background: linear-gradient(270deg, #6c80c2, #2c54bd); */ background: linear-gradient(270deg, #88aae5, #8bd8ca); background-size: 200% 400%; animation: ap-shimmer 120s ease infinite; } #trust { background-image: url('/Images/Home/colorful-background.webp'); } @keyframes ap-shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* ===== HOW IT WORKS: horizontal steps with traveling highlight ===== */ /* brand colors (fallbacks if not already defined) */ :root { --ap-ink: #222222; --ap-muted: #1a1a1a; --ap-accent: #00b798; --ap-bg: #ffffff; --ap-line: #e9ecef; --ap-highlight: color-mix(in oklab, var(--ap-accent) 12%, transparent); } /* container */ .ap-steps { position: relative; display: flex; gap: clamp(12px, 2vw, 20px); padding: clamp(12px, 2vw, 20px); border-radius: 16px; background: var(--ap-bg); overflow: hidden; } } /* connecting line behind the steps */ .ap-steps::before { content: ""; position: absolute; left: clamp(12px, 2vw, 20px); right: clamp(12px, 2vw, 20px); top: 50%; height: 3px; transform: translateY(-50%); background: linear-gradient(90deg, transparent 0 8px, var(--ap-line) 8px calc(100% - 8px), transparent calc(100% - 8px)); z-index: 0; border-radius: 2px; } /* each step card */ .ap-step { position: relative; z-index: 1; flex: 1 1 0; min-width: 200px; /* helps small screens */ padding: 14px 14px 12px; border-radius: 14px; border: 1px solid var(--ap-line); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); } /* node over the line for each step */ .ap-step::after { content: ""; position: absolute; left: 50%; top: 0%; translate: -50% -50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid var(--ap-line); box-shadow: 0 0 0 2px #fff inset; } /* subtle traveling highlight overlay for each step */ .ap-step::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ap-highlight); opacity: 0; pointer-events: none; animation: ap-step-highlight 12s linear infinite; } /* stagger the highlight so it "moves" left -> right */ .ap-step:nth-child(1)::before { animation-delay: 0s; } .ap-step:nth-child(2)::before { animation-delay: 3s; } .ap-step:nth-child(3)::before { animation-delay: 6s; } .ap-step:nth-child(4)::before { animation-delay: 9s; } /* the pulse curve: rise, hold for readability, then fade */ @keyframes ap-step-highlight { 0% { opacity: 0; } 6% { opacity: .85; } 25% { opacity: .85; } /* readable dwell */ 33% { opacity: 0; } 100% { opacity: 0; } } /* summary/title styling (hide default marker) */ .ap-step > summary { list-style: none; cursor: default; /* they’re open and non-interactive in this layout */ } .ap-step > summary::-webkit-details-marker { display: none; } .ap-step h3 { margin: 0 0 6px 0; font-size: clamp(16px, 1.2rem, 18px); line-height: 1.2; color: var(--ap-ink); } .ap-step .ap-step-content { color: var(--ap-muted); font-size: 0.95rem; } /* emphasize the node when its step is highlighted */ .ap-step:is(:hover, :focus-within) .ap-step-content { color: var(--ap-ink); } .ap-step::before ~ .ap-step::after { /* no-op; present for specificity anchor */ } .ap-step:nth-child(1)::before, .ap-step:nth-child(2)::before, .ap-step:nth-child(3)::before, .ap-step:nth-child(4)::before { will-change: opacity; } .ap-step:nth-child(1)::before { } .ap-step:nth-child(1)::before, .ap-step:nth-child(2)::before, .ap-step:nth-child(3)::before, .ap-step:nth-child(4)::before { } .ap-step::before { transition: opacity .3s ease; } .ap-step::before { } .ap-step::after { transition: border-color .3s ease, background .3s ease; } .ap-step:hover::after { border-color: var(--ap-accent); background: #fff; } /* small screens: allow horizontal scroll with snap */ @media (max-width: 720px) { .ap-steps { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .ap-step { scroll-snap-align: center; flex: 0 0 80%; min-width: 260px; } } /* ===== HOW IT WORKS: icons in step headers ===== */ .ap-step-head { display: flex; align-items: center; gap: 10px; min-height: 48px; } .ap-step-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 10px; background: color-mix(in oklab, var(--ap-accent) 12%, transparent); /* subtle tile behind transparent PNGs */ padding: 6px; /* keeps artwork off the edges */ object-fit: contain; box-shadow: 0 1px 2px rgba(0,0,0,.08) inset; } /* tighten heading once icon is present */ .ap-step h3 { margin: 0; } /* hover/focus polish */ .ap-step:hover .ap-step-icon, .ap-step:focus-within .ap-step-icon { background: color-mix(in oklab, var(--ap-accent) 18%, transparent); } /* small screens: keep icons compact */ @media (max-width: 720px) { .ap-step-icon { width: 40px; height: 40px; flex-basis: 40px; padding: 5px; } } /* accessibility: honor reduced motion */ @media (prefers-reduced-motion: reduce) { .ap-step::before { animation: none; opacity: 0; } } /* --- HOW IT WORKS: stack icon above title & center --- */ /* make the summary header vertical + centered */ .ap-step > summary { display: block; } .ap-step-head { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; min-height: unset; /* was 48px for side-by-side layout */ } /* center the title and give it a bit of breathing room */ .ap-step > summary h3 { margin: 6px 0 0; /* override earlier margin:0 */ text-align: center; } /* ensure the icon is centered as a block */ .ap-step-icon { display: block; margin-inline: auto; } /* optional: a touch more space before the paragraph copy */ .ap-step .ap-step-content { margin-top: 8px; } /* Map */ .ap-map { position: relative } .ap-pin { position: absolute; width: 12px; height: 12px; border-radius: 999px; background: #ff0000; box-shadow: 0 0 0 3px rgba(255,0,0,.15) } .ap-la { left: 12%; bottom: 22% } .ap-phl { right: 14%; top: 30% } .ap-route { position: absolute; left: 12%; bottom: 22%; width: 76%; height: 2px; background: repeating-linear-gradient(90deg,#ffb600 0 8px, transparent 8px 16px); transform: translateY(-2px) } @keyframes ap-ship { 0% { left: 0 } 100% { left: calc(100% - 12px) } } .ap-route:after { content: ""; position: absolute; left: 0; top: -4px; width: 12px; height: 12px; border-radius: 999px; background: #ffb600; animation: ap-ship 4s linear infinite } /* Gallery */ .ap-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px } @media(min-width:900px) { .ap-gallery { grid-template-columns: repeat(4,1fr) } } .ap-tag { font-weight: 800 } /* CTA blocks */ .ap-cta { background: #f8fffc } .ap-cta-final { background: #0f1f1e; color: #eaf7f4; border-radius: 24px; padding: 24px } .ap-cta-final .ap-btn { background: #00b798; color: #fff } /* ===== Make steps non-interactive (no expand/collapse) ===== */ /* Treat
as plain cards (already styled as .ap-step) */ .ap-step { /* keep all your existing visual styles from before */ } /* Disable click + keyboard toggle on the summary */ .ap-step > summary { list-style: none; pointer-events: none; /* prevents mouse toggling */ cursor: default; outline: none; } /* Remove default marker */ .ap-step > summary::-webkit-details-marker { display: none; } /* Make the heading behave like normal text */ .ap-step > summary h3 { margin: 0 0 6px 0; } /* Optional: if a browser still shows dotted focus ring, hide it */ .ap-step > summary:focus { outline: none; } /* Content is already visible because your HTML sets `open` on each
. Keep `open` in the markup. With pointer-events disabled on , users can’t toggle the state. */ /* Accessibility: respect reduced motion for the traveling highlight */ @media (prefers-reduced-motion: reduce) { .ap-step::before { animation: none; opacity: 0; } } /* ========================================================= REVIEWS — single-pass CSS scroller (no duplication, no autoplay) Fix: taller cards (min-height) + hide vertical overflow on reel ========================================================= */ /* Shopify badge (50x50 image) */ .ap-using { display: inline-flex; align-items: center; gap: 8px } .ap-shopify-icon { width: 50px; height: 50px; display: inline-block; object-fit: contain; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0,0,0,.06) } /* star color */ .ap-reviews .ap-stars { color: #ffb600; font-weight: 800 } /* wrapper for :has() state */ .ap-reviews-wrap { position: relative } /* Scroller: manual drag/scroll + snap; NO vertical scrollbar */ .ap-reviews .ap-reel { position: relative; overflow-x: auto; overflow-y: hidden; /* changed from visible -> hidden to remove vertical scrollbar */ scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; cursor: grab; scrollbar-gutter: stable both-edges; padding: 6px 0; } .ap-reviews .ap-reel:active { cursor: grabbing } /* Track + cards */ .ap-reviews .ap-track { display: flex; gap: 12px; width: max-content; align-items: stretch; } /* ENSURE any legacy dup container never shows */ .ap-reviews .ap-dup { display: none !important } /* Responsive, forgiving card height */ :root { /* min-height grows slightly with viewport height; ensures space for 50px icon + text */ --ap-card-h: clamp(230px, 28vh, 300px); --ap-review-font: 15px; } .ap-reviews .ap-review { flex: 0 0 320px; scroll-snap-align: start; scroll-margin-inline: 16px; min-height: var(--ap-card-h); /* changed from fixed height */ height: auto; /* allow growth if fonts run larger */ padding: 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; /* keeps internal overflow tidy */ } @media(min-width:1200px) { .ap-reviews .ap-review { flex-basis: 360px; } } @media(min-width:1200px) { .ap-reviews .ap-review.ap-review--wide { flex-basis: 420px; } } .ap-reviews .ap-review p, .ap-reviews .ap-review .ap-body { font-size: var(--ap-review-font); line-height: 1.5; } /* keep quote tight */ .ap-review .ap-leadin { margin: 2px 0 2px; color: #222; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } /* footer pinned to bottom */ .ap-review .ap-subtle { margin-top: auto; color: #777; } /* “Read full review” link style */ .ap-morelink { display: inline-block; font-weight: 700; text-decoration: none; border-bottom: 1px dotted #999; color: #222; } .ap-morelink:hover { color: #00b798; border-color: #00b798; } /* edge fades */ .ap-reviews .ap-reel::before, .ap-reviews .ap-reel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 56px; pointer-events: none; z-index: 2; } .ap-reviews .ap-reel::before { left: 0; background: linear-gradient(90deg,#fff,rgba(255,255,255,0)); } .ap-reviews .ap-reel::after { right: 0; background: linear-gradient(270deg,#fff,rgba(255,255,255,0)); } /* dots (anchor-based) */ .ap-reel-dots { display: flex; gap: 8px; justify-content: center; margin-top: 12px; } .ap-reel-dots a { width: 8px; height: 8px; border-radius: 999px; background: #ddd; display: inline-block; box-shadow: 0 0 0 1px rgba(0,0,0,.06); } .ap-reel-dots a:hover { background: #bbb; } /* highlight active dot via :has() + :target */ @supports(selector(:has(*))) { .ap-reviews-wrap:has(#rev-01:target) .ap-reel-dots a[href="#rev-01"], .ap-reviews-wrap:has(#rev-02:target) .ap-reel-dots a[href="#rev-02"], .ap-reviews-wrap:has(#rev-03:target) .ap-reel-dots a[href="#rev-03"], .ap-reviews-wrap:has(#rev-04:target) .ap-reel-dots a[href="#rev-04"], .ap-reviews-wrap:has(#rev-05:target) .ap-reel-dots a[href="#rev-05"], .ap-reviews-wrap:has(#rev-06:target) .ap-reel-dots a[href="#rev-06"], .ap-reviews-wrap:has(#rev-07:target) .ap-reel-dots a[href="#rev-07"], .ap-reviews-wrap:has(#rev-08:target) .ap-reel-dots a[href="#rev-08"], .ap-reviews-wrap:has(#rev-09:target) .ap-reel-dots a[href="#rev-09"], .ap-reviews-wrap:has(#rev-10:target) .ap-reel-dots a[href="#rev-10"], .ap-reviews-wrap:has(#rev-11:target) .ap-reel-dots a[href="#rev-11"], .ap-reviews-wrap:has(#rev-12:target) .ap-reel-dots a[href="#rev-12"] { background: #00b798; } } /* ===== CSS overlay for full reviews (no JS) ===== */ .ap-review-overlay { position: fixed; inset: 0; z-index: 1000; display: block; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .ap-review-overlay:target { opacity: 1; pointer-events: auto; } .ap-ovl-panel { position: absolute; left: 50%; top: 6%; transform: translateX(-50%); width: min(720px, 92vw); max-height: 84vh; overflow: auto; background: #fff; color: #222; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 20px 20px 24px; } .ap-ovl-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .ap-ovl-title { font-size: 20px; font-weight: 800; margin: 0; } .ap-ovl-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: #f2f2f2; color: #222; text-decoration: none; font-weight: 800; } .ap-ovl-close:hover { background: #e6e6e6; } .ap-ovl-meta { color: #666; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ap-ovl-body { margin-top: 8px; line-height: 1.6; } /* Lock page scroll while overlay open (modern browsers) */ @supports(selector(:has(*))) { html:has(.ap-review-overlay:target) { overflow: hidden; } } /* === Reviews: darker text + smaller Shopify badge === */ /* Make review copy true black for stronger contrast */ .ap-reviews .ap-review p, .ap-review .ap-leadin, .ap-review .ap-body { color: #000; } /* Reduce Shopify logo size to 25x25 (overrides width/height attributes) */ .ap-using { gap: 6px; } .ap-shopify-icon { width: 25px; height: 25px; border-radius: 4px; /* visually matches smaller size */ box-shadow: 0 0 0 1px rgba(0,0,0,.05); } /* =========================== Reviews: snippet & overlay tweaks (override patch) =========================== */ /* 1) Long review overlay text aligned left */ .ap-ovl-body { text-align: left; } /* 2) Give cards more room so the lead-in can breathe (≈3–4 lines) */ :root { /* was clamp(230px, 28vh, 300px); bump a bit for 3–4 lines + meta */ --ap-card-h: clamp(280px, 34vh, 360px); } .ap-reviews .ap-review { min-height: var(--ap-card-h); height: auto; display: flex; flex-direction: column; margin-top: 1% !important; } /* Lead-in: no clamping, no hidden overflow; allow multiline */ .ap-review .ap-leadin { display: block; color: #000; /* stronger contrast per your last request */ font-weight: 600; line-height: 1.5; margin: 4px 0 0; /* Remove any previous clamping / hiding */ -webkit-line-clamp: unset !important; -webkit-box-orient: initial !important; overflow: visible !important; white-space: normal !important; } /* 3) “Read full review” — subtle, never overlaps content, sits above meta */ .ap-morelink { align-self: flex-start; /* don’t stretch */ margin-top: 8px; /* space below the snippet */ font-size: 13px; font-weight: 600; /* lighter than bold */ color: #666; text-decoration: none; border-bottom: 1px dotted #ccc; /* understated underline */ position: static; /* ensure no absolute positioning */ } .ap-morelink:hover { color: #00b798; border-bottom-color: #99e0d2; } /* Keep the meta line pinned to the card bottom so link naturally sits above it */ .ap-review .ap-subtle { margin-top: auto; } /* (optional) tighten spacing above stars to free a bit more vertical space */ .ap-stars { margin-bottom: 2px; } .animated-map { padding: 2rem 1rem; text-align: center; background: #f9f9f9; } .map-heading { font-size: 1.75rem; margin-bottom: 0.5rem; } .map-subheading { font-size: 1rem; margin-bottom: 2rem; color: #555; } /* Map container and image */ .map-container { position: relative; width: 100%; max-width: 1000px; aspect-ratio: 3 / 2; margin: 0 auto; } .us-map { width: 100%; height: auto; display: block; object-fit: contain; } /* Factory dot */ .factory-dot { position: absolute; width: 14px; height: 14px; background: red; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); transform: translate(-50%, -50%); z-index: 2; pointer-events: none; } /* Factory label */ .factory-dot::after { content: attr(data-label); position: absolute; top: -26px; left: 50%; transform: translateX(-50%); background: white; font-size: 0.75rem; padding: 2px 6px; border-radius: 4px; white-space: nowrap; box-shadow: 0 0 3px rgba(0, 0, 0, 0.1); pointer-events: none; } /* Shipment animation dots */ .route { position: absolute; width: 8px; height: 8px; border-radius: 50%; animation: fly 2.1s linear infinite; opacity: 0; filter: blur(1px); z-index: 1; /* Convert from pixel units */ --tx: calc(var(--x) * 1px); --ty: calc(var(--y) * 1px); } .route.la { background-color: #e63946; } .route.philly { background-color: #0077ff; } @keyframes fly { 0% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(var(--tx), var(--ty)); opacity: 0; } } @media (max-width: 600px) { .route { /* Shorten the route distance by scaling down the translation */ --tx: calc(var(--x) * 0.5px); /* Half the distance */ --ty: calc(var(--y) * 0.5px); animation-duration: 3.5s; /* Slightly slower for visual comfort */ } .factory-dot::after { font-size: 0.65rem; /* Slightly smaller labels */ top: -22px; } } .key-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; margin-top: 3rem; padding: 1rem 0; } .stat { text-align: center; min-width: 180px; } .stat-number { font-size: 2.5rem; font-weight: 700; color: #222; } .stat-label { font-size: 0.95rem; color: #555; margin-top: 0.5rem; } /* Responsive: stack on small screens */ @media (max-width: 600px) { .key-stats { flex-direction: column; align-items: center; } .stat-number { font-size: 2rem; } .stat-label { font-size: 0.85rem; } } /* === Interactive Compare (Apliiq vs Others) — FINAL === */ /* 0) Vars */ :root { --ap-green: #00b798; --ap-yellow: #ffb600; --ap-border: #eee; --ap-bg: #fff; --compare-sticky-top: 0; /* adjust if you have a fixed site header */ } .greenbg { background: #00b798 !important; } /* 1) Grid: equal-width columns at all sizes that show 2 cols */ .ap-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* equal rails */ column-gap: 12px; row-gap: 10px; position: relative; /* for the mobile vertical divider & desktop band */ } /* Safety fallback for ultra-narrow devices */ @media (max-width:360px) { .ap-compare-grid { grid-template-columns: 1fr; } } /* Desktop spacing */ @media (min-width:900px) { .ap-compare-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 12px; } } /* 2) Cards & text handling so long content doesn't break equality */ .ap-card { min-width: 0; } .ap-point span, .ap-compare-head { overflow-wrap: anywhere; word-break: break-word; } /* 3) Column headers */ .ap-compare-head { font-weight: 800; padding: 10px 14px; border-radius: 12px; background: #dbdbdb; border: 1px solid var(--ap-border); text-align: center; } .ap-compare-head--apliiq { border-left: 4px solid var(--ap-green); } .ap-compare-head--others { border-left: 4px solid #ddd; } /* Sticky headers on small screens to preserve context */ @media (max-width:899px) { .ap-compare-head { position: sticky; top: var(--compare-sticky-top); z-index: 3; background: var(--ap-bg); box-shadow: 0 1px 0 rgba(0,0,0,.06); } .ap-compare-head--apliiq { grid-column: 1; } .ap-compare-head--others { grid-column: 2; } /* Subtle vertical divider for scan-ability */ .ap-compare-grid::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--ap-border); pointer-events: none; } } /* 4) Points + base interactions */ .ap-point { display: flex; align-items: flex-start; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--ap-border); background: var(--ap-bg); transition: .18s background,.18s border-color,.18s box-shadow,.18s transform; outline: none; } .ap-point .ap-ico { font-weight: 900; margin-top: 1px; } .ap-point--apliiq .ap-ico { color: var(--ap-green); } .ap-point--others .ap-ico { color: #bbb; } /* Base hover/focus effect per item */ .ap-point:hover, .ap-point:focus { border-color: #cfeee6; background: #f6fffb; box-shadow: 0 0 0 3px rgba(0,183,152,.08); transform: translateY(-1px); } /* When hovering/focusing ONLY an "others" item, use light yellow */ .ap-point--others:hover, .ap-point--others:focus { border-color: #ffd36a; background: #fffbe6; box-shadow: 0 0 0 3px rgba(255,182,0,.10); } /* 5) Paired highlight (CSS-only) */ @supports(selector(:has(*))) { /* Smooth transitions on all pairs */ .ap-compare-grid .ap-point { transition: .18s background,.18s border-color,.18s box-shadow,.18s transform; } /* Highlight both cells in the active pair (pairs 1–7) */ .ap-compare-grid:has(.ap-point[data-pair="1"]:is(:hover,:focus-within)) .ap-point[data-pair="1"], .ap-compare-grid:has(.ap-point[data-pair="2"]:is(:hover,:focus-within)) .ap-point[data-pair="2"], .ap-compare-grid:has(.ap-point[data-pair="3"]:is(:hover,:focus-within)) .ap-point[data-pair="3"], .ap-compare-grid:has(.ap-point[data-pair="4"]:is(:hover,:focus-within)) .ap-point[data-pair="4"], .ap-compare-grid:has(.ap-point[data-pair="5"]:is(:hover,:focus-within)) .ap-point[data-pair="5"], .ap-compare-grid:has(.ap-point[data-pair="6"]:is(:hover,:focus-within)) .ap-point[data-pair="6"], .ap-compare-grid:has(.ap-point[data-pair="7"]:is(:hover,:focus-within)) .ap-point[data-pair="7"] { border-color: #bde7db; background: #f4fbf9; box-shadow: 0 0 0 3px rgba(0,183,152,.06); } /* Force the "Others" side of an active pair to yellow (keeps contrast Apliiq vs Others) */ .ap-compare-grid:has(.ap-point[data-pair="1"]:is(:hover,:focus-within)) .ap-point--others[data-pair="1"], .ap-compare-grid:has(.ap-point[data-pair="2"]:is(:hover,:focus-within)) .ap-point--others[data-pair="2"], .ap-compare-grid:has(.ap-point[data-pair="3"]:is(:hover,:focus-within)) .ap-point--others[data-pair="3"], .ap-compare-grid:has(.ap-point[data-pair="4"]:is(:hover,:focus-within)) .ap-point--others[data-pair="4"], .ap-compare-grid:has(.ap-point[data-pair="5"]:is(:hover,:focus-within)) .ap-point--others[data-pair="5"], .ap-compare-grid:has(.ap-point[data-pair="6"]:is(:hover,:focus-within)) .ap-point--others[data-pair="6"], .ap-compare-grid:has(.ap-point[data-pair="7"]:is(:hover,:focus-within)) .ap-point--others[data-pair="7"] { border-color: #ffd36a !important; background: #fffbe6 !important; box-shadow: 0 0 0 3px rgba(255,182,0,.10) !important; } /* Optional: connecting band across the active row (desktop only) */ @media(min-width:900px) { .ap-compare-grid { position: relative; } .ap-compare-grid::before { content: ""; position: absolute; left: 8px; right: 8px; height: 2px; top: calc(64px + var(--band-offset, 0px)); /* header height approx */ background: linear-gradient( 90deg, rgba(0,183,152,.15), /* Apliiq green */ rgba(0,183,152,0), rgba(255,182,0,.15) /* Others yellow */ ); opacity: 0; pointer-events: none; transition: .18s opacity,.18s top; } /* Map pairs 1–7 to vertical offsets (tune these if card height changes) */ .ap-compare-grid:has(.ap-point[data-pair="1"]:is(:hover,:focus-within)) { --band-offset: 0px; } .ap-compare-grid:has(.ap-point[data-pair="2"]:is(:hover,:focus-within)) { --band-offset: 62px; } .ap-compare-grid:has(.ap-point[data-pair="3"]:is(:hover,:focus-within)) { --band-offset: 124px; } .ap-compare-grid:has(.ap-point[data-pair="4"]:is(:hover,:focus-within)) { --band-offset: 186px; } .ap-compare-grid:has(.ap-point[data-pair="5"]:is(:hover,:focus-within)) { --band-offset: 248px; } .ap-compare-grid:has(.ap-point[data-pair="6"]:is(:hover,:focus-within)) { --band-offset: 310px; } .ap-compare-grid:has(.ap-point[data-pair="7"]:is(:hover,:focus-within)) { --band-offset: 372px; } .ap-compare-grid:has(.ap-point:is(:hover,:focus-within))::before { opacity: 1; } } } /* 6) Small touch tweaks */ @media (max-width:599px) { .ap-point { padding: 12px; } .ap-point .ap-ico { margin-top: 2px; } } /* 7) Accessibility helper if you choose to add it in HTML */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* === MOBILE EQUAL COLUMNS OVERRIDE === */ @media (max-width: 899px) { /* Swap grid → flex to guarantee 50/50 widths */ .ap-compare-grid { display: flex; flex-wrap: wrap; --col-gap: 12px; /* horizontal gap */ row-gap: 10px; /* vertical gap */ column-gap: var(--col-gap); } /* Each child (headers + points) takes exactly half width */ .ap-compare-grid > * { flex: 0 0 calc((100% - var(--col-gap)) / 2); max-width: calc((100% - var(--col-gap)) / 2); box-sizing: border-box; min-width: 0; /* prevents long text from blowing up widths */ } /* Keep sticky headers if you use them */ .ap-compare-head { position: sticky; top: var(--compare-sticky-top, 0); z-index: 3; } /* Make text wrap aggressively so columns stay equal */ .ap-point span, .ap-compare-head { overflow-wrap: anywhere; word-break: break-word; text-align: left; } /* Optional: subtle vertical divider at 50% */ .ap-compare-grid { position: relative; } .ap-compare-grid::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: 50%; width: 1px; background: #eee; pointer-events: none; } } /* Desktop keeps your grid (unchanged) */ @media (min-width: 900px) { .ap-compare-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 12px; } } /********************************************************* APLIIQ — Branding (S1) + Production (S2) Square preview image (no cropping) + taller tile list **********************************************************/ /* ---------- Two-column layout ---------- */ #branding-services .ap-brandpane, #production-services .ap-brandpane { display: grid; grid-template-columns: minmax(280px,500px) 1fr; grid-template-areas: "list prev"; gap: 28px; align-items: start; } /* Flip columns visually for Section 2 */ #production-services .ap-brandpane.ap-brandpane--mirror { grid-template-columns: 1fr minmax(280px,360px); grid-template-areas: "prev list"; } /* Mobile stack */ @media (max-width: 900px) { #branding-services .ap-brandpane, #production-services .ap-brandpane, #production-services .ap-brandpane.ap-brandpane--mirror { grid-template-columns: 1fr; grid-template-areas: "list" "prev"; gap: 16px; } } /* Areas */ #branding-services .ap-brand-list, #production-services .ap-brand-list { grid-area: list; margin: 0; padding: 35px 0px; list-style: none; } #branding-services .ap-brand-preview, #production-services .ap-brand-preview { grid-area: prev; position: relative; aspect-ratio: 1 / 1; /* << keep the preview perfectly square */ border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 4px 24px rgba(0,0,0,.06); } /* ---------- Radios (visually hidden) ---------- */ #branding-services .ap-sr-radio, #production-services .ap-sr-radio { position: absolute; inline-size: 1px; block-size: 1px; border: 0; padding: 0; margin: -1px; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; overflow: hidden; } /* ---------- Tile list (taller to match square preview) ---------- */ #branding-services .ap-opt, #production-services .ap-opt { margin: 0 0 12px 0; } #branding-services .ap-opt-label, #production-services .ap-opt-label { display: flex; align-items: center; gap: 14px; width: 100%; background: #fff; border: 1px solid #e8e8e8; border-radius: 14px; padding: 14px; cursor: pointer; min-height: 124px; /* grow vertically to feel balanced with square preview */ transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } #branding-services .ap-opt-label:hover, #production-services .ap-opt-label:hover { border-color: #cfeee6; box-shadow: 0 6px 18px rgba(0,0,0,.06); background: #f9fffc; } #branding-services .ap-opt-thumb, #production-services .ap-opt-thumb { width: 96px; height: 96px; /* square thumbs */ border-radius: 12px; object-fit: cover; background: #f0f0f0; display: block; flex: 0 0 auto; } #branding-services .ap-opt-text, #production-services .ap-opt-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } #branding-services .ap-opt-title, #production-services .ap-opt-title { font-weight: 700; color: #222; line-height: 1.2; } #branding-services .ap-opt-desc, #production-services .ap-opt-desc { color: #5a5a5a; font-size: 13.5px; line-height: 1.35; } /* ---------- Preview panels (stacked) ---------- */ #branding-services .ap-brand-preview .ap-preview, #production-services .ap-brand-preview .ap-preview { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .24s ease; } /* Square image inside the square container — NO CROPPING */ #branding-services .ap-prev-img, #production-services .ap-prev-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* << show entire square image */ background: #fff; /* optional: unify background */ } /* CTA (upper-left) */ #branding-services .ap-prev-btn, #production-services .ap-prev-btn { position: absolute; top: 14px; left: 14px; right: auto; bottom: auto; z-index: 3; display: inline-block; padding: 10px 14px; border-radius: 999px; font-size: 13.5px; line-height: 1; text-decoration: none; color: #fff; background: #00b798; box-shadow: 0 6px 20px rgba(0,0,0,.18); border: 1px solid rgba(0,0,0,.05); opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease, background .18s ease; } /* Meta as an overlay bar INSIDE the square */ #branding-services .ap-prev-meta, #production-services .ap-prev-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid #eee; background: #fff; } #branding-services .ap-prev-meta h3, #production-services .ap-prev-meta h3 { margin: 0; font-size: 14px; color: #222; } #branding-services .ap-prev-meta p, #production-services .ap-prev-meta p { margin: 0; font-size: 10px; color: #555; } #branding-services .ap-prev-btn:hover, #production-services .ap-prev-btn:hover { box-shadow: 0 10px 26px rgba(0,0,0,.20); } @media (max-width:600px) { #branding-services .ap-prev-btn, #production-services .ap-prev-btn { top: 10px; left: 10px; } } /* ---------- Selected state: highlight + show panel ---------- */ /* S1 */ #branding-services #svc1-neck:checked ~ .ap-brand-list .ap-opt--neck .ap-opt-label, #branding-services #svc1-priv:checked ~ .ap-brand-list .ap-opt--priv .ap-opt-label, #branding-services #svc1-woven:checked ~ .ap-brand-list .ap-opt--woven .ap-opt-label, #branding-services #svc1-patch:checked ~ .ap-brand-list .ap-opt--patch .ap-opt-label { border-color: #00b798; box-shadow: 0 0 0 2px rgba(0,183,152,.10); background: #f9fffc; } #branding-services #svc1-neck:checked ~ .ap-brand-preview .ap-prev-neck, #branding-services #svc1-priv:checked ~ .ap-brand-preview .ap-prev-priv, #branding-services #svc1-woven:checked ~ .ap-brand-preview .ap-prev-woven, #branding-services #svc1-patch:checked ~ .ap-brand-preview .ap-prev-patch { opacity: 1; visibility: visible; pointer-events: auto; } #branding-services #svc1-neck:checked ~ .ap-brand-preview .ap-prev-neck .ap-prev-btn, #branding-services #svc1-priv:checked ~ .ap-brand-preview .ap-prev-priv .ap-prev-btn, #branding-services #svc1-woven:checked ~ .ap-brand-preview .ap-prev-woven .ap-prev-btn, #branding-services #svc1-patch:checked ~ .ap-brand-preview .ap-prev-patch .ap-prev-btn { opacity: 1; transform: none; pointer-events: auto; } /* S2 */ #production-services #svc2-emb:checked ~ .ap-brand-list .ap-opt--emb .ap-opt-label, #production-services #svc2-dtfdtg:checked ~ .ap-brand-list .ap-opt--dtfdtg .ap-opt-label, #production-services #svc2-screen:checked ~ .ap-brand-list .ap-opt--screen .ap-opt-label, #production-services #svc2-ware:checked ~ .ap-brand-list .ap-opt--ware .ap-opt-label { border-color: #00b798; box-shadow: 0 0 0 2px rgba(0,183,152,.10); background: #f9fffc; } #production-services #svc2-emb:checked ~ .ap-brand-preview .ap-prev-emb, #production-services #svc2-dtfdtg:checked ~ .ap-brand-preview .ap-prev-dtfdtg, #production-services #svc2-screen:checked ~ .ap-brand-preview .ap-prev-screen, #production-services #svc2-ware:checked ~ .ap-brand-preview .ap-prev-ware { opacity: 1; visibility: visible; pointer-events: auto; } #production-services #svc2-emb:checked ~ .ap-brand-preview .ap-prev-emb .ap-prev-btn, #production-services #svc2-dtfdtg:checked ~ .ap-brand-preview .ap-prev-dtfdtg .ap-prev-btn, #production-services #svc2-screen:checked ~ .ap-brand-preview .ap-prev-screen .ap-prev-btn, #production-services #svc2-ware:checked ~ .ap-brand-preview .ap-prev-ware .ap-prev-btn { opacity: 1; transform: none; pointer-events: auto; } /* ---------- A11y ---------- */ #branding-services #svc1-neck:focus-visible ~ .ap-brand-list .ap-opt--neck .ap-opt-label, #branding-services #svc1-priv:focus-visible ~ .ap-brand-list .ap-opt--priv .ap-opt-label, #branding-services #svc1-woven:focus-visible ~ .ap-brand-list .ap-opt--woven .ap-opt-label, #branding-services #svc1-patch:focus-visible ~ .ap-brand-list .ap-opt--patch .ap-opt-label, #production-services #svc2-emb:focus-visible ~ .ap-brand-list .ap-opt--emb .ap-opt-label, #production-services #svc2-dtfdtg:focus-visible ~ .ap-brand-list .ap-opt--dtfdtg .ap-opt-label, #production-services #svc2-screen:focus-visible ~ .ap-brand-list .ap-opt--screen .ap-opt-label, #production-services #svc2-ware:focus-visible ~ .ap-brand-list .ap-opt--ware .ap-opt-label { outline: 3px solid #00b798; outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { #branding-services .ap-preview, #production-services .ap-preview, #branding-services .ap-opt-label, #production-services .ap-opt-label, #branding-services .ap-prev-btn, #production-services .ap-prev-btn { transition: none !important; } } /* ---------- Optional: hover-to-preview ---------- */ @supports selector(:has(*)) { #branding-services .ap-brandpane:has(.ap-opt--neck:hover) .ap-prev-neck, #branding-services .ap-brandpane:has(.ap-opt--priv:hover) .ap-prev-priv, #branding-services .ap-brandpane:has(.ap-opt--woven:hover) .ap-prev-woven, #branding-services .ap-brandpane:has(.ap-opt--patch:hover) .ap-prev-patch, #production-services .ap-brandpane:has(.ap-opt--emb:hover) .ap-prev-emb, #production-services .ap-brandpane:has(.ap-opt--dtfdtg:hover) .ap-prev-dtfdtg, #production-services .ap-brandpane:has(.ap-opt--screen:hover) .ap-prev-screen, #production-services .ap-brandpane:has(.ap-opt--ware:hover) .ap-prev-ware { opacity: 1; visibility: visible; pointer-events: auto; } #branding-services .ap-brandpane:has(.ap-opt--neck:hover) .ap-prev-neck .ap-prev-btn, #branding-services .ap-brandpane:has(.ap-opt--priv:hover) .ap-prev-priv .ap-prev-btn, #branding-services .ap-brandpane:has(.ap-opt--woven:hover) .ap-prev-woven .ap-prev-btn, #branding-services .ap-brandpane:has(.ap-opt--patch:hover) .ap-prev-patch .ap-prev-btn, #production-services .ap-brandpane:has(.ap-opt--emb:hover) .ap-prev-emb .ap-prev-btn, #production-services .ap-brandpane:has(.ap-opt--dtfdtg:hover) .ap-prev-dtfdtg .ap-prev-btn, #production-services .ap-brandpane:has(.ap-opt--screen:hover) .ap-prev-screen .ap-prev-btn, #production-services .ap-brandpane:has(.ap-opt--ware:hover) .ap-prev-ware .ap-prev-btn { opacity: 1; transform: none; pointer-events: auto; } } /* ===== Stronger, larger meta overlay on the square preview ===== */ /* Keep preview square and image fully visible */ #branding-services .ap-brand-preview, #production-services .ap-brand-preview { aspect-ratio: 1 / 1; position: relative; overflow: hidden; } #branding-services .ap-prev-img, #production-services .ap-prev-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; /* no cropping */ background: #fff; /* shows in the letterbox area if any */ } /* More opaque overlay + larger, bolder type */ #branding-services .ap-prev-meta, #production-services .ap-prev-meta { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 22px 16px; /* Much stronger backdrop for legibility */ background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.78) 60%, rgba(0,0,0,0) 100%); /* Optional polish: improve readability over busy images (safe fallback if unsupported) */ -webkit-backdrop-filter: blur(2px) saturate(110%); backdrop-filter: blur(2px) saturate(110%); border-top: 0; } #branding-services .ap-prev-meta h3, #production-services .ap-prev-meta h3 { margin: 0; /* ~2× previous size, with responsive range */ font-size: clamp(22px, 2.4vw, 24px); font-weight: 300; line-height: 1.05; color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.6); letter-spacing: .2px; } #branding-services .ap-prev-meta p, #production-services .ap-prev-meta p { margin: 0; /* ~2× previous body size, but still fluid */ font-size: clamp(16px, 1.3vw, 18px); line-height: 1.2; color: rgba(255,255,255,.95); text-shadow: 0 2px 5px rgba(0,0,0,.55); } /* Keep CTA above the overlay text */ #branding-services .ap-prev-btn, #production-services .ap-prev-btn { z-index: 4; /* above meta (z-index:2) */ top: 14px; left: 14px; } /* Slightly tighter on small screens */ @media (max-width: 600px) { #branding-services .ap-prev-meta, #production-services .ap-prev-meta { padding: 14px 14px 12px; } #branding-services .ap-prev-btn, #production-services .ap-prev-btn { top: 10px; left: 10px; } } /* === Equal-height + edge-to-edge image on desktop === */ @media (min-width: 901px) { /* stretch items so the row height is set by the left list */ #branding-services .ap-brandpane, #production-services .ap-brandpane { align-items: stretch; } /* right preview fills the row height (no fixed square on desktop) */ #branding-services .ap-brand-preview, #production-services .ap-brand-preview { aspect-ratio: auto; /* unlock square */ block-size: 100%; /* fill grid row height */ min-block-size: 0; overflow: hidden; /* hide any crop */ } /* image fills container fully (may crop to avoid side gaps) */ #branding-services .ap-prev-img, #production-services .ap-prev-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; /* <<< fill, no white bars */ object-position: center; /* center the crop */ background: transparent; /* optional: if PNGs have transparency */ } } /* ===================================================== Fulfillment / Factory MAP — panel below + sticky selection (no JS) ===================================================== */ /* Layout: copy | map */ .ap-fulfill-grid { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: center; } @media (min-width:980px) { .ap-fulfill-grid { grid-template-columns: 1fr 1.4fr; } } /* Legend */ .ap-fulfill-copy .ap-fulfill-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 16px; margin-top: 14px; list-style: none; padding: 0; } .ap-fulfill-copy .ap-fulfill-list li { display: flex; align-items: center; gap: 10px; } .ap-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .ap-dot--inv { background: #9aa4af; } .ap-dot--emb { background: #4b79ff; } .ap-dot--prt { background: #00b798; } .ap-dot--fin { background: #ffb000; } .ap-dot--qa { background: #7cdaac; } .ap-dot--ship { background: #222; } /* Map container + grid (panel below map at all widths) */ .ap-pipeline-map { position: relative; border: 1px solid #eee; border-radius: 16px; background: #fff; padding: 12px; overflow: hidden; --inv-x: 8%; --inv-y: 68%; --emb-x: 33%; --emb-y: 22%; --prt-x: 33%; --prt-y: 84%; --fin-x: 58%; --fin-y: 52%; --qa-x: 78%; --qa-y: 26%; --ship-x: 94%; --ship-y: 60%; --order-size: 18px; --cycle: 16s; } .ap-map-grid { display: grid; gap: 12px; grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; } .ap-canvas { position: relative; min-height: 360px; } @media(max-width:640px) { .ap-canvas { min-height: 420px; } } /* Stations */ .ap-station { position: absolute; transform: translate(-50%,-50%); text-align: center; z-index: 1; } .ap-n-inv { left: var(--inv-x); top: var(--inv-y); } .ap-n-emb { left: var(--emb-x); top: var(--emb-y); } .ap-n-prt { left: var(--prt-x); top: var(--prt-y); } .ap-n-fin { left: var(--fin-x); top: var(--fin-y); } .ap-n-qa { left: var(--qa-x); top: var(--qa-y); } .ap-n-ship { left: var(--ship-x); top: var(--ship-y); } /* Hidden radios (sticky selection) */ .ap-station-toggle { position: absolute; inset: 0; opacity: 0; pointer-events: none; } /* Clickable node + label */ .ap-node { cursor: pointer; width: 40px; height: 40px; border-radius: 12px; background: #fff; border: 1px solid #e8e8e8; box-shadow: 0 1px 0 rgba(0,0,0,.04); display: grid; place-items: center; margin: 0 auto; transition: box-shadow .18s,border-color .18s; } .ap-node svg { width: 22px; height: 22px; fill: none; stroke: #444; stroke-width: 1.6; } .ap-label { display: block; margin-top: 8px; font-size: 12.5px; color: #444; cursor: pointer; } .ap-station:hover .ap-node { border-color: #cfeee6; box-shadow: 0 0 0 3px rgba(0,183,152,.18); } /* highlight the selected station */ .ap-station-toggle:checked + .ap-node { border-color: #00b798; box-shadow: 0 0 0 3px rgba(0,183,152,.22); } /* Orders (don’t block pointer) */ .ap-orders { position: absolute; inset: 0; z-index: 0; pointer-events: none; } .ap-order { position: absolute; left: var(--inv-x); top: var(--inv-y); width: var(--order-size); height: var(--order-size); transform: translate(-50%,-50%); border-radius: 10px; background: #00b798; box-shadow: 0 0 0 2px #fff,0 1px 10px rgba(0,0,0,.15); animation-timing-function: cubic-bezier(.45,.05,.2,.95); animation-iteration-count: infinite; } .ap-order::after { content: ""; position: absolute; right: -5px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 8px; height: 8px; border-right: 2px solid #00b798; border-top: 2px solid #00b798; } .route-a { animation-name: routeA; animation-duration: var(--cycle); animation-delay: 0s; } .route-b { animation-name: routeB; animation-duration: var(--cycle); animation-delay: calc(var(--cycle)/4); } .route-c { animation-name: routeC; animation-duration: var(--cycle); animation-delay: calc(var(--cycle)/2); } .route-d { animation-name: routeD; animation-duration: var(--cycle); animation-delay: calc(3*var(--cycle)/4); } .ap-pipeline-map:hover .ap-order { animation-play-state: paused; } @media(prefers-reduced-motion:reduce) { .ap-order { animation: none !important; } } /* Routes with explicit stops */ @keyframes routeA { 0%,6% { left: var(--inv-x); top: var(--inv-y); opacity: 1; } 20%,26% { left: var(--emb-x); top: var(--emb-y); opacity: 1; } 45%,51% { left: var(--fin-x); top: var(--fin-y); opacity: 1; } 70%,76% { left: var(--qa-x); top: var(--qa-y); opacity: 1; } 98% { left: var(--ship-x); top: var(--ship-y); opacity: 1; } 100% { left: var(--ship-x); top: var(--ship-y); opacity: 0; } } @keyframes routeB { 0%,6% { left: var(--inv-x); top: var(--inv-y); opacity: 1; } 22%,28% { left: var(--prt-x); top: var(--prt-y); opacity: 1; } 48%,54% { left: var(--fin-x); top: var(--fin-y); opacity: 1; } 74%,80% { left: var(--qa-x); top: var(--qa-y); opacity: 1; } 98% { left: var(--ship-x); top: var(--ship-y); opacity: 1; } 100% { left: var(--ship-x); top: var(--ship-y); opacity: 0; } } @keyframes routeC { 0%,6% { left: var(--inv-x); top: var(--inv-y); opacity: 1; } 30%,36% { left: var(--prt-x); top: var(--prt-y); opacity: 1; } 62%,68% { left: var(--qa-x); top: var(--qa-y); opacity: 1; } 98% { left: var(--ship-x); top: var(--ship-y); opacity: 1; } 100% { left: var(--ship-x); top: var(--ship-y); opacity: 0; } } @keyframes routeD { 0%,6% { left: var(--inv-x); top: var(--inv-y); opacity: 1; } 28%,34% { left: var(--emb-x); top: var(--emb-y); opacity: 1; } 64%,70% { left: var(--qa-x); top: var(--qa-y); opacity: 1; } 98% { left: var(--ship-x); top: var(--ship-y); opacity: 1; } 100% { left: var(--ship-x); top: var(--ship-y); opacity: 0; } } /* Panel below map */ .ap-tip-panel { margin-top: 4px; width: 100%; border: 1px solid #eee; border-radius: 14px; padding: 12px; background: #fafafa; min-height: 160px; } .ap-tipcard { display: none; } .ap-tip-default { display: block; } .ap-tip-panel strong { display: block; font-size: 14px; margin-bottom: 4px; color: #222; } .ap-tip-panel p { margin: 4px 0 0; color: #444; font-size: 13px; } .ap-tip-panel .ap-list { margin: 4px 0 0; padding-left: 16px; } .ap-tip-link { color: #00b798; text-decoration: none; } .ap-tip-link:hover { text-decoration: underline; } /* Show exactly one card: - Default when nothing is hovered/selected - Selected (:checked) card - Hovered card temporarily overrides selection */ @supports(selector(:has(*))) { /* Default (nothing active) */ .ap-map-grid:not(:has(.ap-station:is(:hover,:focus-within), .ap-station-toggle:checked)) .ap-tip-default { display: block; } /* Selected states (one radio can be checked at a time) */ .ap-map-grid:has(#ap-st-inv:checked) .ap-tipcard { display: none; } .ap-map-grid:has(#ap-st-inv:checked) .ap-tip-inv { display: block; } .ap-map-grid:has(#ap-st-emb:checked) .ap-tipcard { display: none; } .ap-map-grid:has(#ap-st-emb:checked) .ap-tip-emb { display: block; } .ap-map-grid:has(#ap-st-prt:checked) .ap-tipcard { display: none; } .ap-map-grid:has(#ap-st-prt:checked) .ap-tip-prt { display: block; } .ap-map-grid:has(#ap-st-fin:checked) .ap-tipcard { display: none; } .ap-map-grid:has(#ap-st-fin:checked) .ap-tip-fin { display: block; } .ap-map-grid:has(#ap-st-qa:checked) .ap-tipcard { display: none; } .ap-map-grid:has(#ap-st-qa:checked) .ap-tip-qa { display: block; } .ap-map-grid:has(#ap-st-ship:checked).ap-tipcard { display: none; } /* specificity guard; next line shows ship */ .ap-map-grid:has(#ap-st-ship:checked) .ap-tip-ship { display: block; } /* Hover overrides selection while hovering */ .ap-map-grid:has(.ap-n-inv:is(:hover,:focus-within)) .ap-tipcard { display: none; } .ap-map-grid:has(.ap-n-inv:is(:hover,:focus-within)) .ap-tip-inv { display: block; } .ap-map-grid:has(.ap-n-emb:is(:hover,:focus-within)) .ap-tipcard { display: none; } .ap-map-grid:has(.ap-n-emb:is(:hover,:focus-within)) .ap-tip-emb { display: block; } .ap-map-grid:has(.ap-n-prt:is(:hover,:focus-within)) .ap-tipcard { display: none; } .ap-map-grid:has(.ap-n-prt:is(:hover,:focus-within)) .ap-tip-prt { display: block; } .ap-map-grid:has(.ap-n-fin:is(:hover,:focus-within)) .ap-tipcard { display: none; } .ap-map-grid:has(.ap-n-fin:is(:hover,:focus-within)) .ap-tip-fin { display: block; } .ap-map-grid:has(.ap-n-qa:is(:hover,:focus-within)) .ap-tipcard { display: none; } .ap-map-grid:has(.ap-n-qa:is(:hover,:focus-within)) .ap-tip-qa { display: block; } .ap-map-grid:has(.ap-n-ship:is(:hover,:focus-within)) .ap-tipcard { display: none; } .ap-map-grid:has(.ap-n-ship:is(:hover,:focus-within)) .ap-tip-ship { display: block; } } /* ============================== APLIIQ PRODUCT CATALOG ============================== */ .ap-catalog .ap-eyebrow { margin: 0 0 8px; color: #666; font-size: 14px; letter-spacing: .02em; text-align: center; } @media (max-width: 639px) { .ap-cat-grid { grid-template-columns: repeat(2, 1fr) !important; --cat-min: auto; /* Prevent large tiles from stretching */ } } .ap-cat-grid { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } @media (min-width: 640px) { .ap-cat-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } } @media (min-width: 900px) { .ap-cat-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } } @media (min-width: 1200px) { .ap-cat-grid { grid-template-columns: repeat(6, minmax(0,1fr)); } } .ap-cat-card { height: 100%; } .ap-cat-link { display: block; height: 100%; background: #fff; border: 1px solid #eee; border-radius: 14px; overflow: hidden; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .ap-cat-link:hover { border-color: #cfeee6; box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); } .ap-cat-link:focus-visible { outline: none; border-color: #00b798; box-shadow: 0 0 0 3px rgba(0,183,152,.22); } /* Media frame: forced square tiles for visual consistency */ .ap-cat-media { position: relative; width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: stretch; background: #f6f6f6; } .ap-cat-img { width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; transform: translateZ(0); /* improve hover perf */ transition: transform .25s ease; } .ap-cat-link:hover .ap-cat-img { transform: scale(1.03); } .ap-cat-chip { position: absolute; left: 10px; bottom: 10px; padding: 6px 10px; font-size: 13px; line-height: 1; color: #222; background: rgba(255,255,255,.94); border: 1px solid #e9e9e9; border-radius: 999px; box-shadow: 0 2px 8px rgba(0,0,0,.06); pointer-events: none; /* label doesn’t steal click */ } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .ap-cat-link, .ap-cat-img { transition: none; } } /* ========================================= APLIIQ PRODUCT CATALOG — bigger squares Paste at END of your CSS file ========================================= */ /* Tune the minimum tile size by breakpoint */ .ap-catalog { --cat-min: 240px; } /* mobile baseline */ @media (min-width: 640px) { .ap-catalog { --cat-min: 260px; } } @media (min-width: 900px) { .ap-catalog { --cat-min: 290px; } } @media (min-width: 1200px) { .ap-catalog { --cat-min: 320px; } } /* Fluid grid: tiles grow larger while staying square */ .ap-cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--cat-min), 1fr)); gap: 16px; } /* Keep perfect squares and crisp rendering */ .ap-cat-media { aspect-ratio: 1 / 1; } .ap-cat-img { width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; transform: translateZ(0); } /* Slightly scale up the label chip for bigger tiles */ .ap-cat-chip { padding: 7px 12px; font-size: 13.5px; } /* ================================ Catalog: neutralize legacy
rule ================================ */ /* Kill the global figure constraints inside the catalog only */ .ap-catalog figure, .ap-catalog .ap-cat-media { max-width: none; /* override legacy 45.5% */ margin: 0; /* override legacy margins */ border-radius: 14px; /* match card radius, not 2px */ width: 100%; } /* Ensure the media frame is a full-bleed square and clips overflow */ .ap-catalog .ap-cat-media { display: block; height: 100%; aspect-ratio: 1 / 1; /* perfect square tiles */ background: #f6f6f6; /* only visible during image load */ overflow: hidden; /* clip image corners to radius */ } /* Image must fill the container completely */ .ap-catalog .ap-cat-img { display: block; width: 100%; height: 100%; object-fit: cover; /* fill + crop */ object-position: center; /* center the product */ } /* Optional: keep nice rounding on the link wrapper as well */ .ap-catalog .ap-cat-link { border-radius: 14px; overflow: hidden; } .ap-catalog .ap-cat-img.small { width: 100% !important; height: 100% !important; } /* ========================================= Catalog: neutralize legacy figcaption rules ========================================= */ /* Reset legacy figure/figcaption behavior ONLY inside the catalog */ .ap-catalog figure, .ap-catalog .ap-cat-media { max-width: none; margin: 0; width: 100%; border-radius: 14px; } /* Our chip is a
; override legacy rules */ .ap-catalog .ap-cat-chip { position: absolute !important; /* override legacy relative */ left: 10px; bottom: 10px; width: auto; /* override legacy width:100% */ margin: 0; /* override legacy margin */ float: none; /* override legacy float:left */ padding: 7px 12px; font-size: 13.5px; line-height: 1; color: #222 !important; /* override legacy white text */ background: rgba(255,255,255,.94) !important; /* override legacy dark overlay */ border: 1px solid #e9e9e9; border-radius: 999px !important; /* override legacy rounded corners */ box-shadow: 0 2px 8px rgba(0,0,0,.06); text-indent: 0; /* override legacy */ text-align: left; /* override legacy center */ letter-spacing: 0; /* override global * letter-spacing */ font-weight: 600; /* make label a bit bolder */ pointer-events: none; /* chip never steals the click */ z-index: 2; } /* Keep image full-bleed and clipped to rounded corners */ .ap-catalog .ap-cat-media { display: block; height: 100%; aspect-ratio: 1 / 1; background: #f6f6f6; overflow: hidden; } .ap-catalog .ap-cat-img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; } /* Ensure the link wrapper has matching rounding */ .ap-catalog .ap-cat-link { border-radius: 14px; overflow: hidden; } /* Reassert our catalog card hover/focus polish if needed */ .ap-catalog .ap-cat-link:hover { border-color: #cfeee6; box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-2px); } .ap-catalog .ap-cat-link:focus-visible { outline: none; border-color: #00b798; box-shadow: 0 0 0 3px rgba(0,183,152,.22); } /* Guard against the media query that tweaks figcaption radius globally */ @media screen and (min-width: 768px) { .ap-catalog .ap-cat-chip { border-radius: 999px !important; } } .ap-catalog figure, .ap-catalog figure img, .ap-catalog figure figcaption { margin: 0 !important; /* kill 2% top margin */ float: none !important; /* prevent float-based layout issues */ } /* Keep our catalog media/label behavior intact */ .ap-catalog .ap-cat-media { position: relative; } .ap-catalog .ap-cat-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; } .ap-catalog .ap-cat-chip { position: absolute !important; left: 10px; bottom: 10px; } /* BRAND FEATURE */ .brand-carousel { overflow: hidden; width: 100%; background-color: #fff; padding: 1rem 0; } .carousel-track { display: flex; width: max-content; animation: scroll-left 90s linear infinite; align-items: center; } .brand-carousel:hover .carousel-track { animation-play-state: paused; } .carousel-track a { display: flex; align-items: center; justify-content: center; margin: 0 1rem; flex-shrink: 0; } .carousel-track img { height: 200px; width: auto; transition: transform 0.3s ease; } @media (max-width: 1024px) { .carousel-track img { height: 160px; } } @media (max-width: 768px) { .carousel-track img { height: 120px; } } @media (max-width: 480px) { .carousel-track img { height: 100px; margin: 0 0.5rem; } } @media (hover: hover) { .carousel-track img:hover { transform: scale(1.1); } } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* =========================== AUDIENCES (no-JS tabs) Scoped to #audiences =========================== */ #audiences { --ap-ink: #222; --ap-muted: #5a5a5a; --ap-accent: #00b798; --ap-line: #e9ecef; --ap-tile: color-mix(in oklab, var(--ap-accent) 10%, transparent); } /* Layout */ #audiences .ap-aud-grid { align-items: start; } /* Picklist */ #audiences .ap-aud-list { display: grid; gap: 10px; } #audiences .ap-aud-opt { margin: 0; } #audiences .ap-aud-label { display: flex; flex-direction: column; gap: 6px; padding: 14px 14px 12px; border: 1px solid #e8e8e8; border-radius: 14px; background: #fff; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease; } #audiences .ap-aud-title { font-weight: 800; color: var(--ap-ink); } #audiences .ap-aud-desc { font-size: 13.5px; color: var(--ap-muted); } #audiences .ap-aud-label:hover, #audiences .ap-aud-label:focus-visible { border-color: #cfeee6; background: #f9fffc; box-shadow: 0 6px 18px rgba(0,0,0,.06); transform: translateY(-1px); } /* Panels */ #audiences .ap-aud-panels { position: relative; min-height: 380px; } #audiences .ap-aud-panel { display: none; border-radius: 16px; } #audiences .ap-aud-panel .ap-pill { margin-bottom: 8px; } /* Selection states (radio + label + panel) */ #audiences #aud-brands:checked ~ .ap-aud-grid .ap-aud-panels .panel-brands { display: block; } #audiences #aud-groups:checked ~ .ap-aud-grid .ap-aud-panels .panel-groups { display: block; } #audiences #aud-companies:checked ~ .ap-aud-grid .ap-aud-panels .panel-companies { display: block; } #audiences #aud-creators:checked ~ .ap-aud-grid .ap-aud-panels .panel-creators { display: block; } #audiences #aud-artists:checked ~ .ap-aud-grid .ap-aud-panels .panel-artists { display: block; } /* Highlight the active picklist item (input must precede its label in the DOM — we do that in HTML) */ #audiences #aud-brands:checked ~ .ap-aud-grid .ap-aud-list label[for="aud-brands"], #audiences #aud-groups:checked ~ .ap-aud-grid .ap-aud-list label[for="aud-groups"], #audiences #aud-companies:checked ~ .ap-aud-grid .ap-aud-list label[for="aud-companies"], #audiences #aud-creators:checked ~ .ap-aud-grid .ap-aud-list label[for="aud-creators"], #audiences #aud-artists:checked ~ .ap-aud-grid .ap-aud-list label[for="aud-artists"] { border-color: var(--ap-accent); box-shadow: 0 0 0 2px rgba(0,183,152,.10); background: #f4fbf9; } /* Mobile tuning */ @media (max-width: 900px) { #audiences .ap-aud-panels { min-height: unset; } }