/* * VPSLake comparison-post components * ---------------------------------- * Loaded only on singular content that actually contains a .vl-cmp block * (see csco_child_assets() in functions.php). * * Everything is scoped under .vl-cmp so it can never leak into the theme. * Colours are built on the parent theme's own custom properties * (--cs-layout-background, --cs-color-border, --cs-color-primary, * --cs-color-secondary), which the theme reassigns under [data-scheme=dark]. * That means this design follows the site's light/dark toggle with no * separate dark-mode block to maintain. */ .vl-cmp { --vl-rdp: #0b4fbf; /* VPSLake blue - the RDP side */ --vl-rdp-soft: rgba(11, 79, 191, 0.09); --vl-vpn: #0d9488; /* teal - the VPN side */ --vl-vpn-soft: rgba(13, 148, 136, 0.09); --vl-pro: #15803d; --vl-pro-soft: rgba(21, 128, 61, 0.09); --vl-con: #b91c1c; --vl-con-soft: rgba(185, 28, 28, 0.08); --vl-radius: 14px; /* Surfaces come from the theme so dark mode is automatic. */ --vl-surface: var(--cs-layout-background, #fff); --vl-border: var(--cs-color-border, #e1e1e8); --vl-text: var(--cs-color-primary, #29294b); --vl-muted: var(--cs-color-secondary, #696981); /* * No margin here on purpose: the theme's * `.cs-main-content .entry-content > *` rule already gives every * top-level block a 28px vertical rhythm, and it outranks this selector. */ color: var(--vl-text); } /* * Dark scheme needs slightly hotter accents to stay legible on a dark card. * The theme sets data-scheme on , and also on individual sections whose * computed background reads as dark. A single descendant selector lets the * nearest dark ancestor win; adding a body[...] variant would be more specific * and would wrongly beat a nearer dark wrapper. */ [data-scheme='dark'] .vl-cmp { --vl-rdp: #6ea3ff; --vl-rdp-soft: rgba(110, 163, 255, 0.14); --vl-vpn: #2dd4bf; --vl-vpn-soft: rgba(45, 212, 191, 0.14); --vl-pro: #4ade80; --vl-pro-soft: rgba(74, 222, 128, 0.14); --vl-con: #f87171; --vl-con-soft: rgba(248, 113, 113, 0.14); } .vl-cmp *, .vl-cmp *::before, .vl-cmp *::after { box-sizing: border-box; } /* ---------------------------------------------------------------- TL;DR -- */ .vl-tldr { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.15rem; align-items: start; padding: 1.35rem 1.5rem; background: var(--vl-surface); border: 1px solid var(--vl-border); border-left: 4px solid var(--vl-rdp); border-radius: var(--vl-radius); } .vl-tldr__icon { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--vl-rdp-soft); color: var(--vl-rdp); font-size: 1.15rem; font-weight: 700; line-height: 1; } .vl-tldr__body p { margin: 0 0 0.6rem; font-size: 1rem; line-height: 1.65; } .vl-tldr__body p:last-child { margin-bottom: 0; } .vl-tldr__label { display: block; margin-bottom: 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; color: var(--vl-muted); } /* ------------------------------------------------------- comparison table -- */ /* The wrapper scrolls on small screens so the page body never does. */ .vl-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--vl-border); border-radius: var(--vl-radius); background: var(--vl-surface); } .vl-table { width: 100%; min-width: 640px; margin: 0; border-collapse: collapse; font-size: 0.94rem; } /* * The parent theme sets `border: 1px solid` on every `table th`/`table td`, * which would draw full gridlines through this design. Reset all four sides * first, then put back only the horizontal rule we want. */ .vl-table th, .vl-table td { padding: 0.9rem 1.1rem; text-align: left; vertical-align: top; border: 0; border-bottom: 1px solid var(--vl-border); } /* Theme puts a 2px rule under thead; the header cells carry their own. */ .vl-table thead, .vl-table tfoot, .vl-table tbody + tbody { border: 0; } .vl-table tr:last-child th, .vl-table tr:last-child td { border-bottom: 0; } .vl-table thead th { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--vl-muted); background: var(--vl-surface); white-space: nowrap; } .vl-table thead th.vl-col-rdp { color: var(--vl-rdp); background: var(--vl-rdp-soft); } .vl-table thead th.vl-col-vpn { color: var(--vl-vpn); background: var(--vl-vpn-soft); } /* Row label column stays readable while the rest scrolls. */ .vl-table tbody th { font-weight: 600; color: var(--vl-text); white-space: nowrap; } .vl-table tbody tr:nth-child(even) th, .vl-table tbody tr:nth-child(even) td { background: rgba(128, 128, 128, 0.045); } .vl-table td.vl-cell-rdp { border-left: 2px solid var(--vl-rdp-soft); } .vl-table td.vl-cell-vpn { border-left: 2px solid var(--vl-vpn-soft); } /* ------------------------------------------------------------- verdicts -- */ .vl-verdicts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .vl-verdict { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; padding: 2rem 1.5rem 1.6rem; text-align: center; background: var(--vl-surface); border: 1px solid var(--vl-border); border-radius: var(--vl-radius); overflow: hidden; } /* Coloured cap identifies which side of the comparison the card belongs to. */ .vl-verdict::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--vl-accent, var(--vl-rdp)); } .vl-verdict--rdp { --vl-accent: var(--vl-rdp); } .vl-verdict--vpn { --vl-accent: var(--vl-vpn); } .vl-verdict__tag { display: inline-block; padding: 0.28rem 0.7rem; border-radius: 999px; background: var(--vl-accent-soft, var(--vl-rdp-soft)); color: var(--vl-accent); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .vl-verdict--rdp .vl-verdict__tag { --vl-accent-soft: var(--vl-rdp-soft); } .vl-verdict--vpn .vl-verdict__tag { --vl-accent-soft: var(--vl-vpn-soft); } .vl-verdict__logo { display: grid; place-items: center; width: 100%; height: 56px; margin: 0.15rem 0; } .vl-verdict__logo img { max-width: 190px; max-height: 46px; width: auto; height: auto; object-fit: contain; } .vl-verdict__name { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.3; } .vl-verdict__desc { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--vl-muted); } .vl-rating { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .vl-rating__stars { color: #f5a524; font-size: 1.02rem; letter-spacing: 0.06em; line-height: 1; } .vl-rating__score { font-size: 0.86rem; font-weight: 700; color: var(--vl-muted); } .vl-btn { display: inline-block; width: 100%; margin-top: 0.3rem; padding: 0.75rem 1.4rem; background: var(--vl-accent); color: #fff !important; border-radius: 9px; font-size: 0.9rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none !important; transition: opacity 0.18s ease, transform 0.18s ease; } .vl-btn:hover, .vl-btn:focus { opacity: 0.9; transform: translateY(-1px); color: #fff !important; } /* --------------------------------------------------------- point lists --- */ /* * List reset. * * The parent theme styles lists inside post content with * .cs-main-content:not(...) .entry-content ul:not(...) * which resolves to roughly (0,4,1) specificity and applies * `padding-left: 28px` and `list-style-type: disc`. Any sane class selector * here loses to it, so these three declarations are forced. Everything else * in this file wins on normal specificity and is left alone. */ .vl-points, .vl-choose__list { padding: 0 !important; margin: 0 !important; list-style: none !important; } .vl-points > li::marker, .vl-choose__list > li::marker { content: ''; } .vl-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .vl-points--single { grid-template-columns: minmax(0, 1fr); } .vl-point { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; padding: 1.1rem 1.25rem; background: var(--vl-surface); border: 1px solid var(--vl-border); border-radius: var(--vl-radius); } .vl-point__num { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; background: var(--vl-tone-soft, var(--vl-rdp-soft)); color: var(--vl-tone, var(--vl-rdp)); font-size: 0.85rem; font-weight: 700; line-height: 1; } .vl-points--pro .vl-point__num { --vl-tone: var(--vl-pro); --vl-tone-soft: var(--vl-pro-soft); } .vl-points--con .vl-point__num { --vl-tone: var(--vl-con); --vl-tone-soft: var(--vl-con-soft); } .vl-points--pro .vl-point { border-left: 3px solid var(--vl-pro); } .vl-points--con .vl-point { border-left: 3px solid var(--vl-con); } .vl-point__title { display: block; margin-bottom: 0.2rem; font-size: 0.97rem; font-weight: 700; line-height: 1.4; } .vl-point__text { margin: 0; font-size: 0.9rem; line-height: 1.65; color: var(--vl-muted); } /* ------------------------------------------------------ decision cards --- */ .vl-choose { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; } .vl-choose__card { padding: 1.4rem 1.5rem; background: var(--vl-surface); border: 1px solid var(--vl-border); border-top: 3px solid var(--vl-accent, var(--vl-rdp)); border-radius: var(--vl-radius); } .vl-choose__card--rdp { --vl-accent: var(--vl-rdp); } .vl-choose__card--vpn { --vl-accent: var(--vl-vpn); } .vl-choose__head { margin: 0 0 0.9rem; color: var(--vl-accent); font-size: 1.05rem; font-weight: 700; line-height: 1.35; } .vl-choose__list { margin: 0; padding: 0; list-style: none; } .vl-choose__list li { position: relative; margin-bottom: 0.6rem; padding-left: 1.6rem !important; font-size: 0.92rem; line-height: 1.6; color: var(--vl-muted); } .vl-choose__list li:last-child { margin-bottom: 0; } .vl-choose__list li::before { content: ''; position: absolute; top: 0.52em; left: 0.3rem; width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--vl-accent); } /* -------------------------------------------------------- price snapshot -- */ .vl-price-snapshot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem; border: 1px solid var(--vl-border); border-radius: var(--vl-radius); background: var(--vl-surface); } .vl-price-card { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; padding: 1rem; border: 1px solid var(--vl-border); border-radius: 10px; background: color-mix(in srgb, var(--vl-surface) 92%, var(--vl-rdp-soft)); } .vl-price-card--highlight { border-color: color-mix(in srgb, var(--vl-rdp) 38%, var(--vl-border)); background: var(--vl-rdp-soft); } .vl-price-card__name { font-size: 0.82rem; font-weight: 700; line-height: 1.35; text-transform: uppercase; color: var(--vl-muted); } .vl-price-card__price { font-size: clamp(1.65rem, 2.8vw, 2.35rem); font-weight: 800; line-height: 1.05; color: var(--vl-text); } .vl-price-card__price small { font-size: 0.95rem; font-weight: 600; color: var(--vl-muted); } .vl-price-card__detail { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--vl-muted); } .vl-price-snapshot__note { grid-column: 1 / -1; margin: 0; font-size: 0.84rem; line-height: 1.55; color: var(--vl-muted); } /* ------------------------------------------------------------ responsive - */ @media (max-width: 781px) { .vl-verdicts, .vl-points, .vl-choose, .vl-price-snapshot { grid-template-columns: minmax(0, 1fr); } .vl-tldr { grid-template-columns: minmax(0, 1fr); padding: 1.15rem 1.2rem; } .vl-verdict { padding: 1.7rem 1.2rem 1.4rem; } } @media (prefers-reduced-motion: reduce) { .vl-btn { transition: none; } .vl-btn:hover, .vl-btn:focus { transform: none; } }