/* card #1331: compare pages (/compare/, /compare/google-maps-website-builders/, /de/google-maps-website-builder-vergleich/, /es/comparativa-creadores-web-google-maps/). Builds on /assets/hiw.css (How it works, read-only) and only adds .hcmp-* rules, all scoped under .hcmp. Every label, table cell and paragraph is real text in the DOM and fully visible in the BASE frame: loops only add highlights on top, so a paused, reduced-motion or JS-off page shows the complete diagram. Looping parts have fixed boxes so nothing shifts layout. */ .hcmp { --hcmp-amber: #f59e0b; } .hcmp svg:not([width]) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .hcmp-hero { padding-bottom: 72px; } /* ================= HERO: one listing, every option ================= */ .hcmp-fan { position: relative; border-radius: 22px; border: 1px solid rgba(255,255,255,0.1); padding: 20px 20px 16px; background: linear-gradient(165deg, rgba(16,185,129,0.08), #0a0c0b 55%); box-shadow: 0 40px 120px -30px rgba(0,0,0,0.9), 0 0 0 1px rgba(16,185,129,0.06) inset; } .hcmp-fan::before { content: ''; position: absolute; inset: 10% 8% -8%; z-index: -1; border-radius: 32px; background: radial-gradient(ellipse at 50% 60%, rgba(16,185,129,0.22), transparent 70%); filter: blur(30px); } .hcmp-cap { display: flex; align-items: center; gap: 10px; font-family: 'Space Grotesk'; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 14px; line-height: 14px; min-height: 14px; } .hcmp-live { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); animation: hiwPing 2.4s ease-out infinite; } .hcmp-src-card { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 14px; border: 1px solid rgba(16,185,129,0.35); background: rgba(16,185,129,0.08); } .hcmp-pin { flex: none; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--emerald); color: var(--bg); animation: hcmpBob 3s ease-in-out infinite; } .hcmp-pin svg { width: 18px; height: 18px; stroke-width: 2.2; } @keyframes hcmpBob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } } .hcmp-src-card b { display: block; font-family: 'Space Grotesk'; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; } .hcmp-src-card div > span { display: block; font-size: 12.5px; color: var(--text-dim); line-height: 1.4; } .hcmp-track { position: relative; margin-top: 10px; padding-left: 26px; } .hcmp-rail { position: absolute; left: 16px; top: 0; bottom: 14px; width: 2px; border-radius: 2px; background: rgba(16,185,129,0.22); overflow: hidden; } .hcmp-rail i { position: absolute; left: 0; top: 0; width: 2px; height: 22%; border-radius: 2px; background: linear-gradient(transparent, #6ee7b7, transparent); animation: hcmpRail 8.4s linear infinite; } @keyframes hcmpRail { 0% { transform: translateY(-100%); } 100% { transform: translateY(460%); } } .hcmp-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .hcmp-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 8px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.025); animation: hcmpRow 8.4s ease-in-out infinite; animation-delay: calc(var(--s) * 1.2s); } .hcmp-row::before { content: ''; position: absolute; left: -12px; top: 50%; width: 10px; height: 2px; background: rgba(16,185,129,0.3); } @keyframes hcmpRow { 0%, 100% { border-color: rgba(255,255,255,0.06); background: rgba(255,255,255,0.025); box-shadow: none; } 5%, 12% { border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.1); box-shadow: 0 0 22px -6px rgba(16,185,129,0.55); } 18% { border-color: rgba(255,255,255,0.06); background: rgba(255,255,255,0.025); box-shadow: none; } } .hcmp-row.us { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.08); } .hcmp-row.us::after { content: ''; position: absolute; inset: -1px; border-radius: 12px; pointer-events: none; box-shadow: 0 0 0 1px rgba(16,185,129,0.25); } .hcmp-row-n { min-width: 0; font-family: 'Space Grotesk'; font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; } .hcmp-row-n small { display: block; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 400; color: var(--text-dim); line-height: 1.4; } .hcmp-mark { display: inline-flex; align-items: center; gap: 6px; justify-self: end; font-family: 'Space Grotesk'; font-size: 11.5px; font-weight: 600; white-space: nowrap; padding: 4px 10px; border-radius: 999px; } .hcmp-mark svg { flex: none; width: 13px; height: 13px; stroke-width: 2.4; } .hcmp-mark.ok { color: var(--emerald); border: 1px solid rgba(16,185,129,0.35); background: rgba(16,185,129,0.1); } .hcmp-mark.own { color: var(--text-dim); border: 1px dashed rgba(255,255,255,0.18); background: rgba(255,255,255,0.02); } .hcmp-mark.warn { color: #fbbf24; border: 1px solid rgba(245,158,11,0.35); background: rgba(245,158,11,0.07); } .hcmp-legend { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px 16px; margin-top: 12px; font-size: 12px; line-height: 15px; min-height: 38px; color: var(--text-dim); } .hcmp-legend span { display: inline-flex; align-items: center; gap: 6px; } .hcmp-legend i { width: 10px; height: 10px; border-radius: 50%; } .hcmp-legend .l-ok i { background: var(--emerald); } .hcmp-legend .l-own i { border: 1px dashed rgba(255,255,255,0.45); } .hcmp-legend .l-warn i { background: var(--hcmp-amber); } /* ================= SECTION 2: what actually differs ================= */ .hcmp-diff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .hcmp-dcard { position: relative; display: flex; flex-direction: column; border-radius: 22px; border: 1px solid var(--hiw-line); background: var(--hiw-card); padding: 22px; overflow: hidden; } .hcmp-dcard::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 0% 0%, rgba(16,185,129,0.1), transparent 70%); } .hcmp-dcard .hiw-card-head { margin: 18px 0 8px; } .hcmp-dcard h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 21px; line-height: 1.25; color: var(--text); margin: 0; } .hcmp-dcard p { position: relative; font-size: 14.5px; line-height: 1.7; color: var(--text-dim); margin: 0; } .hcmp-num { font-family: 'Space Grotesk'; font-size: 12px; font-weight: 700; color: var(--emerald); letter-spacing: 0.1em; } .hcmp-mini { position: relative; min-height: 212px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.07); background: #080a09; padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 7px; overflow: hidden; } .hcmp-mini > * { min-width: 0; } /* A: where the free site lives (address pills, sweep highlight) */ .hcmp-addr span { display: flex; align-items: center; gap: 8px; height: 22px; padding: 0 10px; border-radius: 7px; font-family: 'Space Grotesk'; font-size: 12px; color: var(--text); background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.06); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: hcmpSweep 7s ease-in-out infinite; animation-delay: calc(var(--i) * 0.5s); } .hcmp-addr span::before { content: ''; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--emerald); } .hcmp-addr span.us { color: var(--emerald); border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.08); font-weight: 600; } @keyframes hcmpSweep { 0%, 14%, 100% { box-shadow: none; } 5%, 9% { box-shadow: 0 0 0 1px rgba(16,185,129,0.55), 0 0 16px -2px rgba(16,185,129,0.5); } } /* B: is the domain included (two groups, a key that glows) */ .hcmp-split { display: grid; grid-template-columns: 1fr; gap: 10px; justify-content: stretch; } .hcmp-grp { border-radius: 12px; padding: 10px; display: grid; gap: 7px; } .hcmp-grp.in { border: 1px solid rgba(16,185,129,0.35); background: rgba(16,185,129,0.07); animation: hcmpGlow 4s ease-in-out infinite; } .hcmp-grp.out { border: 1px dashed rgba(255,255,255,0.16); background: rgba(255,255,255,0.02); } .hcmp-grp-h { display: flex; align-items: center; gap: 7px; font-family: 'Space Grotesk'; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .hcmp-grp.in .hcmp-grp-h { color: var(--emerald); } .hcmp-grp-h svg { width: 14px; height: 14px; stroke-width: 2.2; } .hcmp-grp.in .hcmp-grp-h svg { animation: hcmpKey 4s ease-in-out infinite; } .hcmp-tags { display: flex; flex-wrap: wrap; gap: 5px; } .hcmp-tags b { font-family: 'Space Grotesk'; font-size: 11.5px; font-weight: 600; color: var(--text); padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); white-space: nowrap; } .hcmp-grp.in .hcmp-tags b { border-color: rgba(16,185,129,0.3); } @keyframes hcmpGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } 50% { box-shadow: 0 0 24px -6px rgba(16,185,129,0.55); } } @keyframes hcmpKey { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-18deg); } 55% { transform: rotate(0); } } /* C: how changes are made (chat next to an editor) */ .hcmp-edit { gap: 10px; } .hcmp-chatbox { display: grid; gap: 6px; } .hcmp-chatbox .msg { max-width: 92%; padding: 7px 11px; border-radius: 12px; font-size: 12px; line-height: 1.4; } .hcmp-chatbox .me { justify-self: end; background: var(--emerald); color: var(--bg); border-bottom-right-radius: 4px; font-weight: 500; animation: hcmpLift 6s cubic-bezier(.16,1,.3,1) infinite; } .hcmp-chatbox .bot { justify-self: start; display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.06); color: var(--text); border: 1px solid rgba(16,185,129,0.25); border-bottom-left-radius: 4px; animation: hcmpReply 6s ease-in-out infinite; } .hcmp-chatbox .bot svg { flex: none; width: 13px; height: 13px; color: var(--emerald); stroke-width: 2.4; } @keyframes hcmpLift { 0%, 8%, 100% { transform: none; } 4% { transform: translateY(-3px); } } @keyframes hcmpReply { 0%, 18%, 60%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } 30%, 44% { box-shadow: 0 0 20px -4px rgba(16,185,129,0.5); } } .hcmp-editor { position: relative; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: #0d100f; padding: 8px; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; } .hcmp-tools { display: grid; gap: 4px; } .hcmp-tools i { display: block; width: 22px; height: 12px; border-radius: 3px; background: rgba(255,255,255,0.08); } .hcmp-blocks { display: grid; gap: 4px; } .hcmp-blocks i { display: block; height: 12px; border-radius: 3px; background: rgba(255,255,255,0.07); } .hcmp-blocks i:nth-child(2) { width: 70%; animation: hcmpDragBlk 6s ease-in-out infinite; } .hcmp-blocks i:nth-child(3) { width: 85%; } @keyframes hcmpDragBlk { 0%, 30%, 70%, 100% { background: rgba(255,255,255,0.07); transform: none; } 40%, 60% { background: rgba(16,185,129,0.35); transform: translateX(6px); } } .hcmp-cursor { position: absolute; right: 18px; bottom: 6px; width: 14px; height: 14px; color: var(--text); animation: hcmpCursor 6s ease-in-out infinite; } .hcmp-cursor svg { width: 14px; height: 14px; fill: var(--text); stroke: #000; stroke-width: 1; } @keyframes hcmpCursor { 0%, 25%, 75%, 100% { transform: none; } 40%, 60% { transform: translate(-16px, -12px); } } .hcmp-edit-lbl { display: flex; justify-content: space-between; gap: 8px; font-family: 'Space Grotesk'; font-size: 11px; font-weight: 600; color: var(--text-dim); letter-spacing: 0.04em; } .hcmp-edit-lbl b { color: var(--emerald); font-weight: 700; white-space: nowrap; } /* who builds it (/compare/): hand-off lane */ .hcmp-hand { align-items: stretch; } .hcmp-hand-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; align-items: center; gap: 8px; } .hcmp-hand-ico { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--emerald); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.25); } .hcmp-hand-ico svg { width: 16px; height: 16px; } .hcmp-hand-line { position: relative; height: 2px; border-radius: 2px; background: rgba(255,255,255,0.12); overflow: hidden; } .hcmp-hand-line i { position: absolute; top: 0; left: 0; width: 30%; height: 2px; background: linear-gradient(90deg, transparent, var(--emerald), transparent); animation: hcmpRun 2.6s linear infinite; } @keyframes hcmpRun { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } } .hcmp-hand-cap { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: var(--text-dim); line-height: 1.35; } .hcmp-hand-cap span:last-child { text-align: right; } /* ================= TABLE ================= */ .hcmp-table { border-radius: 22px; border: 1px solid var(--hiw-line); background: var(--hiw-card); overflow-x: auto; -webkit-overflow-scrolling: touch; } .hcmp-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .hcmp-table th, .hcmp-table td { text-align: left; vertical-align: top; padding: 15px 16px; border-bottom: 1px solid var(--hiw-line); line-height: 1.55; color: var(--text-dim); overflow-wrap: break-word; } .hcmp-table th { font-family: 'Space Grotesk'; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); background: rgba(255,255,255,0.02); } .hcmp-table tbody tr:last-child td { border-bottom: 0; } .hcmp-table td:first-child { font-family: 'Space Grotesk'; font-size: 14.5px; font-weight: 700; color: var(--text); } .hcmp-table tbody tr { transition: background .3s; } .hcmp-table tbody tr:hover { background: rgba(16,185,129,0.035); } .hcmp-table tr.us td { background: rgba(16,185,129,0.07); color: var(--text); } .hcmp-table tr.us td:first-child { color: var(--emerald); box-shadow: inset 3px 0 0 var(--emerald); } .hcmp-table .muted { color: var(--text-muted); } .hcmp-note { margin: 16px 0 0; font-size: 13px; line-height: 1.65; color: var(--text-muted); max-width: 900px; } /* ================= VENDOR CARDS ================= */ /* the jump list is a