/* ==========================================================================
AHOI — SITE DESIGN STYLES (css/ahoi.css)
--------------------------------------------------------------------------
Loaded by index.php AND vibes.php (all data/html pages), after style.css.
Every rule is prefixed with "hp-" so nothing here collides with style.css.
SECTION INDEX (matches the numbered comment blocks in index.php)
00 Tokens, shared helpers (buttons, eyebrow, headings, reveal animation)
00b Header button restyle + homepage hero text column
01 Products .hp-products
02 Network stats .hp-stats
03 Platform showcase .hp-showcase (+ .hp-panel tinted feature panels)
04 Capabilities grid .hp-capabilities
05 Why AHOI .hp-why
06 Pricing .hp-pricing
07 FAQ .hp-faq
08 About .hp-about
09 Closing CTA .hp-cta
10 Inner pages .hp-hero .hp-grid-3/-4 .hp-steps .hp-band .hp-code
11 Legal pages .hp-hero--compact .hp-legal .hp-toc .hp-legal-body
99 Responsive overrides (all sections)
HOW TO TWEAK COLOURS / SPACING: edit the tokens in section 00 only.
========================================================================== */
/* ==========================================================================
00 TOKENS + SHARED HELPERS
========================================================================== */
:root {
/* brand (mirrors style.css) */
--hp-navy: #02061E; /* same as hero background */
--hp-blue: #16118B;
--hp-sky: #01AED8;
--hp-grad: linear-gradient(110deg, #01AED8 0%, #16118B 100%);
/* neutrals */
--hp-ink: #0B1230; /* headings */
--hp-body: #4B5168; /* paragraphs */
--hp-muted: #7C8299; /* captions, eyebrows */
--hp-line: #E6E9F2; /* hairlines / card borders */
--hp-soft: #F5F7FB; /* light section background */
--hp-white: #FFFFFF;
/* product accent colours (icons, dots, highlights) */
--hp-acc-sky: #01AED8;
--hp-acc-violet: #7C5CFF;
--hp-acc-green: #12B981;
--hp-acc-orange: #FF8A3D;
/* rhythm */
--hp-sec-pad: 120px; /* vertical padding of every section (desktop) */
--hp-radius: 20px; /* card corner radius */
--hp-shadow: 0 24px 60px -24px rgba(11, 18, 48, 0.25);
}
/* generic section wrapper */
.hp-section {
position: relative;
padding: var(--hp-sec-pad) 0;
overflow: hidden;
}
/* doubled selector so these always beat a section's own default background
(e.g. .hp-why is soft by default, but "hp-section--white hp-why" is white) */
.hp-section.hp-section--soft { background: var(--hp-soft); }
.hp-section.hp-section--white { background: var(--hp-white); }
.hp-section.hp-section--navy { background: var(--hp-navy); color: #fff; }
/* small uppercase label above headings */
.hp-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--body-font);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--hp-sky);
margin: 0 0 18px;
}
.hp-eyebrow::before {
content: "";
width: 22px;
height: 2px;
border-radius: 2px;
background: var(--hp-grad);
}
.hp-section--navy .hp-eyebrow { color: #7FD9F0; }
/* section headings */
.hp-head { max-width: 760px; margin-bottom: 64px; }
.hp-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.hp-head--center .hp-eyebrow { justify-content: center; }
.hp-head h2 {
font-family: var(--heading-font);
font-weight: 700;
font-size: clamp(34px, 4.2vw, 56px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--hp-ink);
margin: 0 0 20px;
}
.hp-head h2 .hp-grad-txt {
background: var(--hp-grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.hp-head p {
font-size: 18px;
line-height: 1.65;
color: var(--hp-body);
margin: 0;
}
.hp-section--navy .hp-head h2 { color: #fff; }
.hp-section--navy .hp-head p { color: rgba(255,255,255,0.72); }
/* buttons (independent of .cmn-btn so they can be styled freely) */
.hp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--heading-font);
font-weight: 600;
font-size: 16px;
line-height: 1;
padding: 18px 30px;
border-radius: 999px;
border: 1.5px solid transparent;
text-decoration: none !important;
transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
white-space: nowrap;
}
.hp-btn i { font-size: 1em; transition: transform .25s ease; }
.hp-btn:hover i { transform: translateX(3px); }
.hp-btn:hover { transform: translateY(-2px); }
.hp-btn--primary {
background: var(--hp-grad);
color: #fff !important;
box-shadow: 0 14px 30px -12px rgba(22, 17, 139, 0.55);
}
.hp-btn--primary:hover { box-shadow: 0 20px 40px -14px rgba(22, 17, 139, 0.65); }
.hp-btn--outline {
background: transparent;
color: var(--hp-ink) !important;
border-color: rgba(11, 18, 48, 0.18);
}
.hp-btn--outline:hover { border-color: var(--hp-ink); background: var(--hp-ink); color: #fff !important; }
.hp-btn--light {
background: #fff;
color: var(--hp-blue) !important;
}
.hp-btn--light:hover { background: #F0FAFD; }
.hp-btn--ghost-light {
background: transparent;
color: #fff !important;
border-color: rgba(255,255,255,0.45);
}
.hp-btn--ghost-light:hover { background: rgba(255,255,255,0.12); border-color: #fff; }
/* arrow text-link */
.hp-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--heading-font);
font-weight: 600;
font-size: 15px;
color: var(--hp-blue) !important;
text-decoration: none !important;
}
.hp-link i { transition: transform .25s ease; }
.hp-link:hover i { transform: translateX(4px); }
.hp-section--navy .hp-link { color: #7FD9F0 !important; }
/* reveal-on-scroll (js/ahoi.js adds .is-in) */
.hp-reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.hp-reveal.is-in { opacity: 1; transform: none; }
.hp-reveal[data-delay="1"] { transition-delay: .08s; }
.hp-reveal[data-delay="2"] { transition-delay: .16s; }
.hp-reveal[data-delay="3"] { transition-delay: .24s; }
.hp-reveal[data-delay="4"] { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
.hp-reveal { opacity: 1; transform: none; transition: none; }
}
/* ==========================================================================
00b HEADER BUTTON + HOMEPAGE HERO TEXT
--------------------------------------------------------------------------
style.css gives .cmn-btn a wide-tracked, light-weight look with a sliding
hover fill. These overrides make the two buttons on the first screen match
the new .hp-btn style (tighter type, pill shape, soft glow, lift on hover).
Hero markup is untouched; this is CSS only. Delete this block to revert.
========================================================================== */
.main-head .cmn-btn,
.bnnr-sec .cmn-btn {
font-family: var(--heading-font);
font-weight: 600;
font-size: 15px;
letter-spacing: 0;
text-transform: none;
line-height: 1;
padding: 15px 26px;
border-radius: 999px;
background: var(--hp-grad);
box-shadow: 0 0 0 1px rgba(255,255,255,0.14) inset,
0 12px 28px -12px rgba(1,174,216,0.65);
transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.main-head .cmn-btn::before,
.bnnr-sec .cmn-btn::before { display: none; } /* kill the old sliding fill */
.main-head .cmn-btn:hover,
.bnnr-sec .cmn-btn:hover {
transform: translateY(-2px);
filter: brightness(1.08);
box-shadow: 0 0 0 1px rgba(255,255,255,0.22) inset,
0 18px 36px -12px rgba(1,174,216,0.8);
}
/* --- homepage hero text column (markup in index.php .bnnr-content-col) --- */
.bnnr-sec .bnnr-content-col { padding-top: 40px; }
.bnnr-sec .bnnr-content-wrppr { max-width: 520px; }
/* small pill above the headline */
.bnnr-sec .hp-hero-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.06);
font-family: var(--heading-font);
font-weight: 500;
font-size: 13px;
letter-spacing: 0.02em;
color: rgba(255,255,255,0.85);
margin-bottom: 26px;
}
.bnnr-sec .hp-hero-pill i { color: #7FD9F0; font-size: 14px; }
.bnnr-sec .bnnr-content-wrppr h1 {
font-family: var(--heading-font);
font-weight: 700;
font-size: clamp(34px, 3.6vw, 52px);
line-height: 1.08;
letter-spacing: -0.025em;
text-transform: none;
color: #fff;
margin: 0 0 18px;
}
.bnnr-sec .bnnr-content-wrppr h1 .hp-grad-txt {
background: linear-gradient(110deg, #7FD9F0 0%, #01AED8 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.bnnr-sec .bnnr-content-wrppr > p {
font-weight: 300;
font-size: 17px;
line-height: 1.6;
letter-spacing: 0;
color: rgba(255,255,255,0.7);
max-width: 440px;
margin: 0 0 28px;
}
.bnnr-sec .hp-hero-actions { justify-content: flex-start; gap: 12px; }
.bnnr-sec .hp-hero-actions .hp-btn { padding: 16px 26px; font-size: 15px; }
/* slim stats line under the buttons */
.bnnr-sec .hp-hero-stats {
list-style: none;
padding: 0;
margin: 30px 0 0;
display: flex;
flex-wrap: wrap;
gap: 0 22px;
font-size: 13.5px;
color: rgba(255,255,255,0.55);
}
.bnnr-sec .hp-hero-stats li { display: flex; align-items: baseline; gap: 6px; }
.bnnr-sec .hp-hero-stats li + li { padding-left: 22px; border-left: 1px solid rgba(255,255,255,0.14); }
.bnnr-sec .hp-hero-stats strong {
font-family: var(--heading-font);
font-weight: 700;
font-size: 17px;
color: #fff;
}
/* --- desktop hero geometry (992px and up) ------------------------------
style.css lets the illustration frame hang off the bottom of the hero
(negative margin-bottom) and pushes the text down with top padding. The
client prefers the frame fully visible as a contained card: no bottom
bleed, breathing room under it, text vertically centred beside it. It
still bleeds off the RIGHT edge, that is intentional. --- */
@media (min-width: 992px) {
.bnnr-sec { padding-bottom: 64px; }
.bnnr-sec .bnnr-rw { align-items: center; }
.bnnr-sec .bnnr-content-col { padding-top: 0; padding-bottom: 0; }
.bnnr-sec .bnnr-img-wrppr { margin-bottom: 0; }
}
/* --- 992px to 1199px (small laptops / landscape tablets) -----------------
style.css switches to 50/50 columns here and shrinks the container. Keep
the desktop proportions so the headline holds three clean lines. --- */
@media (min-width: 992px) and (max-width: 1199px) {
.bnnr-sec { padding-top: 160px; }
.bnnr-sec .bnnr-content-col { width: 44%; }
.bnnr-sec .bnnr-img-col { width: 56%; }
.bnnr-sec .bnnr-img-wrppr {
padding: 22px 26px;
margin-right: calc((((100vw - 925px) + 36px) / 2) * -1);
}
.bnnr-sec .bnnr-content-wrppr h1 { font-size: 44px; }
.bnnr-sec .bnnr-content-wrppr > p { font-size: 17px; }
}
/* --- 1200px and up: fluid side gutters --------------------------------
style.css fixes .container at 1170px (1490px from 1600px), so the side
margins swing from ~30px to 200px+ depending on the window width and the
hero text can end up jammed against the left edge. This keeps an 8% gutter
on each side (capped at the theme's 1490px container) and recomputes the
hero frame's right-hand bleed from the same gutter. Header, hero and every
section share .container, so they stay aligned. .container.large is left
alone. Change the 84% / 8vw pair together if you want tighter margins. --- */
@media (min-width: 1200px) {
.container:not(.large) { max-width: min(1490px, 84%); }
.bnnr-img-wrppr { margin-right: calc(-1 * (max(8vw, (100vw - 1490px) / 2) + 95px)); }
}
@media (min-width: 1200px) and (max-width: 1399px) {
.bnnr-sec .bnnr-content-col { width: 44%; }
.bnnr-sec .bnnr-img-col { width: 56%; }
.bnnr-sec .bnnr-content-wrppr h1 { font-size: 46px; }
.bnnr-sec .bnnr-content-wrppr > p { font-size: 17px; }
}
/* --- 1500px and up (large laptops, desktops, ultrawide) -----------------
Below this the frame bleeds off the right edge of the screen. Past 1500px
the bleed would make the frame taller than the screen (and on a 3440px
monitor ~2000px wide), so the frame snaps to a fully rounded card that
stays inside the layout, sized by its 60% column. --- */
@media (min-width: 1500px) {
.bnnr-sec .bnnr-img-wrppr {
margin-right: 0;
border-radius: 44px;
}
.bnnr-sec .bnnr-video-wrppr,
.bnnr-sec .bnnr-img-wrppr > img,
.bnnr-sec .bnnr-img-wrppr video { border-radius: 44px; }
}
@media (max-width: 991px) {
.bnnr-sec .bnnr-content-col { padding-top: 0; }
.bnnr-sec .bnnr-content-wrppr { max-width: 560px; text-align: center; }
.bnnr-sec .bnnr-content-wrppr > p { margin-left: auto; margin-right: auto; }
.bnnr-sec .hp-hero-actions,
.bnnr-sec .hp-hero-stats { justify-content: center; }
}
@media (max-width: 575px) {
.bnnr-sec .hp-hero-actions .hp-btn { width: 100%; }
.bnnr-sec .hp-hero-stats { gap: 10px 16px; }
.bnnr-sec .hp-hero-stats li + li { padding-left: 16px; }
}
/* hero button is the primary action: a touch larger */
.bnnr-sec .cmn-btn {
font-size: 17px;
padding: 19px 34px;
}
/* keep the compact size on small screens (style.css shrinks it at 479px) */
@media (max-width: 479px) {
.main-head .cmn-btn { padding: 11px 18px; font-size: 14px; }
.bnnr-sec .cmn-btn { padding: 16px 26px; font-size: 15px; }
}
/* ==========================================================================
01 PRODUCTS (.hp-products)
Four product cards directly under the hero.
========================================================================== */
.hp-products { padding-top: 110px; }
.hp-products .hp-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
.hp-product-card {
display: flex;
flex-direction: column;
gap: 18px;
padding: 34px 30px 30px;
background: #fff;
border: 1px solid var(--hp-line);
border-radius: var(--hp-radius);
color: inherit !important;
text-decoration: none !important;
position: relative;
transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.hp-product-card:hover {
transform: translateY(-6px);
box-shadow: var(--hp-shadow);
border-color: transparent;
}
/* coloured icon badge — change the accent with the data-accent attribute */
.hp-product-card .hp-icon {
width: 56px;
height: 56px;
border-radius: 16px;
display: grid;
place-items: center;
font-size: 24px;
color: #fff;
background: var(--hp-acc-sky);
}
[data-accent="sky"] .hp-icon { background: var(--hp-acc-sky); }
[data-accent="violet"] .hp-icon { background: var(--hp-acc-violet); }
[data-accent="green"] .hp-icon { background: var(--hp-acc-green); }
[data-accent="orange"] .hp-icon { background: var(--hp-acc-orange); }
[data-accent="blue"] .hp-icon { background: var(--hp-blue); }
.hp-product-card h3 {
font-size: 23px;
font-weight: 700;
letter-spacing: -0.01em;
line-height: 1.2;
color: var(--hp-ink);
margin: 0;
}
.hp-product-card p {
font-size: 15px;
line-height: 1.65;
color: var(--hp-body);
margin: 0;
flex: 1;
}
.hp-product-card .hp-link { margin-top: 6px; }
.hp-products .hp-actions {
margin-top: 48px;
text-align: center;
}
/* ==========================================================================
02 NETWORK STATS (.hp-stats)
Dark band with four big numbers and a row of trust badges.
========================================================================== */
.hp-stats { background: var(--hp-navy); }
/* soft colour glows behind the content */
.hp-stats::before,
.hp-stats::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(80px);
pointer-events: none;
opacity: .55;
}
.hp-stats::before { width: 560px; height: 560px; left: -180px; top: -200px; background: rgba(1,174,216,.45); }
.hp-stats::after { width: 520px; height: 520px; right: -160px; bottom: -220px; background: rgba(22,17,139,.9); }
.hp-stats .container { position: relative; z-index: 1; }
.hp-stats .hp-head { margin-bottom: 56px; }
.hp-stat-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid rgba(255,255,255,0.12);
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.hp-stat {
padding: 44px 32px;
border-right: 1px solid rgba(255,255,255,0.12);
}
.hp-stat:last-child { border-right: 0; }
.hp-stat .hp-stat-num {
font-family: var(--heading-font);
font-weight: 700;
font-size: clamp(44px, 4.6vw, 64px);
letter-spacing: -0.03em;
line-height: 1;
color: #fff;
margin: 0 0 12px;
}
.hp-stat .hp-stat-num span { color: #7FD9F0; }
.hp-stat p {
font-size: 15px;
color: rgba(255,255,255,0.65);
margin: 0;
}
/* trust badges under the numbers */
.hp-badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 40px;
justify-content: center;
}
.hp-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.85);
padding: 10px 16px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.16);
background: rgba(255,255,255,0.05);
}
.hp-badge i { color: #7FD9F0; }
/* ==========================================================================
03 PLATFORM SHOWCASE (.hp-showcase)
Alternating text + product-screenshot rows.
Add the class .hp-row--flip to a row to put the image on the left.
========================================================================== */
.hp-showcase { background: var(--hp-white); }
.hp-row {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: 72px;
align-items: center;
}
.hp-row + .hp-row { margin-top: 110px; }
.hp-row--flip .hp-row-text { order: 2; }
.hp-row--flip .hp-row-visual { order: 1; }
.hp-row-text h3 {
font-family: var(--heading-font);
font-weight: 700;
font-size: clamp(28px, 3vw, 38px);
letter-spacing: -0.02em;
line-height: 1.12;
color: var(--hp-ink);
margin: 0 0 18px;
}
.hp-row-text > p {
font-size: 17px;
line-height: 1.65;
color: var(--hp-body);
margin: 0 0 24px;
}
.hp-checklist {
list-style: none;
padding: 0;
margin: 0 0 30px;
display: grid;
gap: 12px;
}
.hp-checklist li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15.5px;
color: var(--hp-ink);
line-height: 1.5;
}
.hp-checklist li i {
flex: 0 0 22px;
width: 22px;
height: 22px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: 12px;
color: #fff;
background: var(--hp-grad);
margin-top: 1px;
}
/* eyebrow coloured dot per row (uses data-accent on the row) */
.hp-row .hp-eyebrow::before { width: 10px; height: 10px; border-radius: 50%; background: var(--hp-acc-sky); }
.hp-row[data-accent="violet"] .hp-eyebrow::before { background: var(--hp-acc-violet); }
.hp-row[data-accent="green"] .hp-eyebrow::before { background: var(--hp-acc-green); }
.hp-row[data-accent="orange"] .hp-eyebrow::before { background: var(--hp-acc-orange); }
.hp-row .hp-eyebrow { color: var(--hp-muted); }
/* fake browser window around a screenshot */
.hp-row-visual { position: relative; }
.hp-row-visual::before {
content: "";
position: absolute;
inset: 12% -6% -8% 10%;
border-radius: 32px;
background: linear-gradient(135deg, rgba(1,174,216,.22), rgba(22,17,139,.18));
filter: blur(2px);
z-index: 0;
}
.hp-row--flip .hp-row-visual::before { inset: 12% 10% -8% -6%; }
.hp-browser {
position: relative;
z-index: 1;
background: #fff;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(11,18,48,0.08);
box-shadow: 0 40px 80px -30px rgba(11,18,48,0.35);
}
.hp-browser-bar {
height: 38px;
display: flex;
align-items: center;
gap: 7px;
padding: 0 16px;
background: #F2F4F9;
border-bottom: 1px solid var(--hp-line);
}
.hp-browser-bar span {
width: 10px; height: 10px; border-radius: 50%;
background: #D7DBE6;
}
.hp-browser-bar span:nth-child(1) { background: #FF6B6B; }
.hp-browser-bar span:nth-child(2) { background: #FFC94D; }
.hp-browser-bar span:nth-child(3) { background: #45D483; }
.hp-browser-bar em {
margin-left: 10px;
font-style: normal;
font-size: 11.5px;
color: var(--hp-muted);
background: #fff;
padding: 5px 14px;
border-radius: 6px;
flex: 1;
max-width: 260px;
border: 1px solid var(--hp-line);
}
.hp-browser img {
display: block;
width: 100%;
height: auto;
}
/* --- tinted feature panels (used by homepage 03; reusable anywhere) ---
Add .hp-panel--flip to put the visual on the left. ------------------------ */
.hp-panels { display: grid; gap: 28px; }
.hp-panel {
position: relative;
overflow: hidden;
border-radius: 30px;
padding: 60px 0 0 60px;
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 48px;
align-items: center;
background: var(--hp-soft);
color: var(--hp-ink);
}
.hp-panel[data-accent="green"] { background: #E9F8F1; }
.hp-panel[data-accent="violet"] { background: #EFECFF; }
.hp-panel[data-accent="sky"] { background: #E6F6FB; }
.hp-panel[data-accent="orange"] { background: #FFF1E6; }
.hp-panel[data-accent="blue"] { background: #EAEBF8; }
.hp-panel[data-accent="navy"] { background: var(--hp-navy); color: #fff; }
.hp-panel-text { padding: 0 0 60px; }
.hp-panel-text .hp-eyebrow { color: var(--hp-muted); }
.hp-panel-text .hp-eyebrow::before { width: 10px; height: 10px; border-radius: 50%; }
.hp-panel[data-accent="green"] .hp-eyebrow::before { background: var(--hp-acc-green); }
.hp-panel[data-accent="violet"] .hp-eyebrow::before { background: var(--hp-acc-violet); }
.hp-panel[data-accent="sky"] .hp-eyebrow::before { background: var(--hp-acc-sky); }
.hp-panel[data-accent="orange"] .hp-eyebrow::before { background: var(--hp-acc-orange); }
.hp-panel[data-accent="blue"] .hp-eyebrow::before { background: var(--hp-blue); }
.hp-panel-text h3 {
font-family: var(--heading-font);
font-weight: 700;
font-size: clamp(26px, 2.8vw, 36px);
letter-spacing: -0.02em;
line-height: 1.12;
color: var(--hp-ink);
margin: 0 0 16px;
}
.hp-panel-text > p { font-size: 16.5px; line-height: 1.65; color: var(--hp-body); margin: 0 0 22px; }
.hp-panel-text .hp-checklist { margin-bottom: 26px; }
/* the screenshot bleeds out of the panel's bottom-right corner */
.hp-panel-visual { align-self: end; padding-top: 10px; }
.hp-panel-visual .hp-browser {
border-radius: 16px 0 0 0;
border-right: 0;
border-bottom: 0;
box-shadow: 0 30px 60px -20px rgba(11,18,48,0.35);
}
.hp-panel-visual .hp-browser-bar { border-radius: 16px 0 0 0; }
/* flipped: visual on the left, bleeding bottom-left */
.hp-panel--flip { padding: 60px 60px 0 0; }
.hp-panel--flip .hp-panel-text { order: 2; }
.hp-panel--flip .hp-panel-visual { order: 1; }
.hp-panel--flip .hp-panel-visual .hp-browser { border-radius: 0 16px 0 0; border-left: 0; border-right: 1px solid rgba(11,18,48,0.08); }
.hp-panel--flip .hp-panel-visual .hp-browser-bar { border-radius: 0 16px 0 0; }
/* dark panel text colours */
.hp-panel[data-accent="navy"] .hp-eyebrow { color: rgba(255,255,255,0.6); }
.hp-panel[data-accent="navy"] .hp-panel-text h3 { color: #fff; }
.hp-panel[data-accent="navy"] .hp-panel-text > p { color: rgba(255,255,255,0.72); }
.hp-panel[data-accent="navy"] .hp-checklist li { color: #fff; }
.hp-panel[data-accent="navy"] .hp-link { color: #7FD9F0 !important; }
/* ==========================================================================
04 CAPABILITIES GRID (.hp-capabilities)
Compact tile grid, like an integrations wall.
========================================================================== */
.hp-cap-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
.hp-cap {
display: flex;
align-items: center;
gap: 16px;
padding: 22px 24px;
border: 1px solid var(--hp-line);
border-radius: 16px;
background: #fff;
color: inherit !important;
text-decoration: none !important;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hp-cap:hover {
transform: translateY(-3px);
box-shadow: var(--hp-shadow);
border-color: transparent;
}
.hp-cap .hp-cap-icon {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 12px;
display: grid;
place-items: center;
font-size: 20px;
color: var(--hp-blue);
background: #EEF1FA;
transition: background .25s ease, color .25s ease;
}
.hp-cap:hover .hp-cap-icon { background: var(--hp-grad); color: #fff; }
.hp-cap strong {
display: block;
font-family: var(--heading-font);
font-weight: 700;
font-size: 16px;
color: var(--hp-ink);
line-height: 1.2;
}
.hp-cap small {
display: block;
font-size: 13px;
color: var(--hp-muted);
margin-top: 3px;
}
.hp-capabilities .hp-actions { margin-top: 44px; text-align: center; }
/* ==========================================================================
05 WHY AHOI (.hp-why)
Sticky heading on the left, four numbered reasons on the right.
========================================================================== */
.hp-why { background: var(--hp-soft); }
.hp-why .hp-row { grid-template-columns: 0.9fr 1.1fr; align-items: start; }
.hp-why .hp-head { margin-bottom: 0; position: sticky; top: 120px; }
.hp-why .hp-head .hp-btn { margin-top: 30px; }
.hp-reasons {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.hp-reason {
padding: 30px 28px;
background: #fff;
border: 1px solid var(--hp-line);
border-radius: var(--hp-radius);
}
.hp-reason .hp-reason-num {
font-family: var(--heading-font);
font-weight: 700;
font-size: 13px;
letter-spacing: .1em;
color: var(--hp-sky);
margin-bottom: 18px;
display: block;
}
.hp-reason h3 {
font-size: 21px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--hp-ink);
margin: 0 0 10px;
}
.hp-reason p {
font-size: 15px;
line-height: 1.65;
color: var(--hp-body);
margin: 0;
}
/* ==========================================================================
06 PRICING (.hp-pricing)
Three cards; add .hp-price--featured to the one that should pop.
========================================================================== */
.hp-price-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
}
.hp-price {
display: flex;
flex-direction: column;
padding: 38px 34px;
border-radius: var(--hp-radius);
background: #fff;
border: 1px solid var(--hp-line);
position: relative;
transition: transform .3s ease, box-shadow .3s ease;
}
.hp-price:hover { transform: translateY(-4px); box-shadow: var(--hp-shadow); }
.hp-price .hp-price-icon {
width: 48px; height: 48px;
border-radius: 14px;
display: grid; place-items: center;
font-size: 21px;
color: var(--hp-blue);
background: #EEF1FA;
margin-bottom: 22px;
}
.hp-price h3 {
font-size: 22px;
font-weight: 700;
color: var(--hp-ink);
margin: 0 0 6px;
}
.hp-price .hp-price-sub {
font-size: 14px;
color: var(--hp-muted);
margin: 0 0 22px;
}
.hp-price .hp-price-amount {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 26px;
padding-bottom: 26px;
border-bottom: 1px solid var(--hp-line);
}
.hp-price .hp-price-amount strong {
font-family: var(--heading-font);
font-weight: 700;
font-size: 48px;
letter-spacing: -0.03em;
line-height: 1;
color: var(--hp-ink);
}
.hp-price .hp-price-amount span {
font-size: 15px;
color: var(--hp-muted);
}
.hp-price ul {
list-style: none;
padding: 0;
margin: 0 0 30px;
display: grid;
gap: 12px;
flex: 1;
}
.hp-price ul li {
display: flex;
gap: 10px;
align-items: center;
font-size: 15px;
color: var(--hp-ink);
}
.hp-price ul li i { color: var(--hp-acc-green); font-size: 16px; }
.hp-price .hp-btn { width: 100%; }
/* featured (middle) card */
.hp-price--featured {
background: var(--hp-navy);
border-color: transparent;
color: #fff;
overflow: hidden;
}
.hp-price--featured::before {
content: "";
position: absolute;
width: 320px; height: 320px;
right: -120px; top: -140px;
border-radius: 50%;
background: rgba(1,174,216,.35);
filter: blur(60px);
}
.hp-price--featured > * { position: relative; }
.hp-price--featured .hp-price-icon { background: rgba(255,255,255,0.1); color: #7FD9F0; }
.hp-price--featured h3,
.hp-price--featured .hp-price-amount strong,
.hp-price--featured ul li { color: #fff; }
.hp-price--featured .hp-price-sub,
.hp-price--featured .hp-price-amount span { color: rgba(255,255,255,0.6); }
.hp-price--featured .hp-price-amount { border-color: rgba(255,255,255,0.14); }
.hp-price--featured .hp-price-tag {
position: absolute;
top: 22px; right: 22px;
font-size: 11px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 999px;
background: var(--hp-grad);
color: #fff;
}
.hp-pricing .hp-note {
text-align: center;
margin-top: 32px;
font-size: 14px;
color: var(--hp-muted);
}
.hp-pricing .hp-note a { color: var(--hp-blue); font-weight: 500; }
/* ==========================================================================
07 FAQ (.hp-faq)
Native / accordion — no JS required.
========================================================================== */
.hp-faq { background: var(--hp-soft); }
.hp-faq .hp-row { grid-template-columns: 0.8fr 1.2fr; align-items: start; }
.hp-faq .hp-head { margin-bottom: 0; }
.hp-faq .hp-head .hp-btn { margin-top: 28px; }
.hp-accordion { display: grid; gap: 12px; }
.hp-accordion details {
background: #fff;
border: 1px solid var(--hp-line);
border-radius: 16px;
padding: 0 26px;
transition: box-shadow .25s ease, border-color .25s ease;
}
.hp-accordion details[open] { border-color: transparent; box-shadow: var(--hp-shadow); }
.hp-accordion summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
padding: 22px 0;
font-family: var(--heading-font);
font-weight: 600;
font-size: 18px;
color: var(--hp-ink);
}
.hp-accordion summary::-webkit-details-marker { display: none; }
.hp-accordion summary i {
flex: 0 0 32px;
width: 32px; height: 32px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 14px;
color: var(--hp-blue);
background: #EEF1FA;
transition: transform .3s ease, background .3s ease, color .3s ease;
}
.hp-accordion details[open] summary i { transform: rotate(45deg); background: var(--hp-grad); color: #fff; }
.hp-accordion .hp-answer {
padding: 0 0 24px;
font-size: 15.5px;
line-height: 1.7;
color: var(--hp-body);
max-width: 640px;
}
.hp-accordion .hp-answer p { margin: 0 0 10px; }
.hp-accordion .hp-answer p:last-child { margin: 0; }
/* ==========================================================================
08 ABOUT (.hp-about)
Image with floating quote card + story text.
========================================================================== */
.hp-about .hp-row { grid-template-columns: 1fr 1fr; gap: 90px; }
.hp-about .hp-head { margin-bottom: 0; }
.hp-about .hp-head p + p { margin-top: 16px; }
.hp-about .hp-head .hp-btn { margin-top: 32px; }
.hp-about-visual { position: relative; }
.hp-about-visual figure {
margin: 0;
border-radius: 28px;
overflow: hidden;
background: var(--hp-soft);
}
.hp-about-visual figure img { display: block; width: 100%; height: auto; }
.hp-quote-card {
position: absolute;
left: -28px;
bottom: 40px;
max-width: 300px;
padding: 24px 26px;
background: #fff;
border-radius: 18px;
box-shadow: 0 30px 60px -20px rgba(11,18,48,0.35);
}
.hp-quote-card .hp-quote-mark {
font-family: var(--heading-font);
font-size: 48px;
line-height: .6;
color: var(--hp-sky);
display: block;
margin-bottom: 10px;
}
.hp-quote-card p {
font-family: var(--heading-font);
font-weight: 600;
font-size: 17px;
color: var(--hp-ink);
margin: 0 0 6px;
}
.hp-quote-card small { font-size: 13px; color: var(--hp-muted); }
/* ==========================================================================
09 CLOSING CTA (.hp-cta)
Gradient card with two buttons.
========================================================================== */
.hp-cta { padding-top: 0; }
.hp-cta-card {
position: relative;
overflow: hidden;
border-radius: 32px;
padding: 90px 60px;
text-align: center;
background: var(--hp-navy);
color: #fff;
}
.hp-cta-card::before,
.hp-cta-card::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(70px);
pointer-events: none;
}
.hp-cta-card::before { width: 480px; height: 480px; left: -140px; top: -200px; background: rgba(1,174,216,.6); }
.hp-cta-card::after { width: 520px; height: 520px; right: -160px; bottom: -240px; background: rgba(22,17,139,1); }
.hp-cta-card > * { position: relative; z-index: 1; }
.hp-cta-card .hp-eyebrow { color: #7FD9F0; justify-content: center; }
.hp-cta-card h2 {
font-family: var(--heading-font);
font-weight: 700;
font-size: clamp(32px, 4vw, 52px);
letter-spacing: -0.025em;
line-height: 1.05;
color: #fff;
margin: 0 auto 18px;
max-width: 720px;
}
.hp-cta-card p {
font-size: 18px;
color: rgba(255,255,255,0.72);
max-width: 560px;
margin: 0 auto 36px;
}
.hp-cta-card .hp-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* ==========================================================================
10 INNER PAGES (services, features and every data/html product page)
--------------------------------------------------------------------------
.hp-hero dark page hero (eyebrow, h1, intro, buttons, badges)
.hp-grid-3/-4 simple card grids (use with .hp-product-card)
.hp-product-card--static card without a link / hover lift
.hp-steps 3-column numbered steps (uses .hp-reason cards)
.hp-code dark code sample block
.hp-band dark text + visual band (same look as the stats band)
.hp-grid-2 two-column card grid; .hp-checklist works inside cards
.hp-timeline numbered rows with status tags (for dark bands)
.hp-hero--split hero with text left and a card (e.g. form) right
.hp-form-card white form card: .hp-form-row/-group, .hp-form-note, .hp-form-success
.hp-chat illustrative chat window (dark bands)
.hp-figure framed image with optional (+ .hp-tag)
.hp-spec-list aligned label/value rows inside a card
(badges restyle themselves automatically on white/soft sections)
========================================================================== */
/* --- page hero --- */
.hp-hero {
position: relative;
overflow: hidden;
background: var(--hp-navy);
color: #fff;
padding: 190px 0 96px;
}
.hp-hero::before,
.hp-hero::after {
content: "";
position: absolute;
border-radius: 50%;
filter: blur(90px);
pointer-events: none;
opacity: .6;
}
.hp-hero::before { width: 620px; height: 620px; left: -220px; top: -260px; background: rgba(1,174,216,.45); }
.hp-hero::after { width: 560px; height: 560px; right: -200px; bottom: -300px; background: rgba(22,17,139,1); }
.hp-hero .container { position: relative; z-index: 1; }
.hp-hero-inner { max-width: 820px; margin: 0 auto; text-align: center; }
.hp-hero-inner .hp-eyebrow { color: #7FD9F0; justify-content: center; }
.hp-hero-inner h1 {
font-family: var(--heading-font);
font-weight: 700;
font-size: clamp(38px, 5.2vw, 68px);
line-height: 1.02;
letter-spacing: -0.03em;
color: #fff;
margin: 0 0 22px;
}
.hp-hero-inner h1 .hp-grad-txt {
background: linear-gradient(110deg, #7FD9F0 0%, #01AED8 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
}
.hp-hero-inner > p:not(.hp-eyebrow),
.hp-hero--split .hp-hero-inner > div > p:not(.hp-eyebrow) {
font-size: 18px;
line-height: 1.65;
color: rgba(255,255,255,0.72);
max-width: 640px;
margin: 0 auto 34px;
}
.hp-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hp-hero .hp-badges { margin-top: 52px; }
.hp-hero a.hp-badge { color: rgba(255,255,255,0.85) !important; transition: background .25s ease, border-color .25s ease; }
.hp-hero a.hp-badge:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); }
/* --- grids --- */
.hp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.hp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.hp-grid-4 .hp-product-card h3 { font-size: 20px; }
.hp-product-card--static:hover { transform: none; box-shadow: none; border-color: var(--hp-line); }
/* --- numbered steps --- */
.hp-steps .hp-head { position: static; margin-bottom: 56px; }
.hp-steps .hp-reasons { grid-template-columns: repeat(3, 1fr); }
.hp-steps .hp-reason .hp-reason-num {
width: 40px; height: 40px;
border-radius: 12px;
display: grid; place-items: center;
font-size: 14px;
color: #fff;
background: var(--hp-grad);
margin-bottom: 22px;
}
/* --- dark text + visual band --- */
.hp-band .hp-row { grid-template-columns: 1fr 1.1fr; }
.hp-band .hp-head { margin-bottom: 28px; }
.hp-band .hp-badges { justify-content: flex-start; margin-top: 0; margin-bottom: 36px; }
.hp-band .hp-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* --- code sample --- */
.hp-code {
border-radius: 18px;
overflow: hidden;
background: #060A24;
border: 1px solid rgba(255,255,255,0.1);
box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
}
.hp-code-bar {
display: flex;
align-items: center;
gap: 7px;
height: 42px;
padding: 0 16px;
background: rgba(255,255,255,0.04);
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hp-code-bar span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.hp-code-bar span:nth-child(1) { background: #FF6B6B; }
.hp-code-bar span:nth-child(2) { background: #FFC94D; }
.hp-code-bar span:nth-child(3) { background: #45D483; }
.hp-code-bar em {
margin-left: 10px;
font-style: normal;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
color: rgba(255,255,255,0.5);
}
.hp-code pre {
margin: 0;
padding: 26px 28px;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 14px;
line-height: 1.7;
color: #DCE3F5;
overflow-x: auto;
white-space: pre;
}
.hp-code .k { color: #C792EA; } /* keyword */
.hp-code .f { color: #7FD9F0; } /* function */
.hp-code .s { color: #9CE29C; } /* string */
.hp-code .c { color: rgba(255,255,255,0.38); }/* comment */
.hp-code .p { color: #FFCB6B; } /* param */
/* --- two-column grid + checklists inside cards --- */
.hp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.hp-product-card .hp-checklist { margin: 4px 0 0; gap: 9px; }
.hp-product-card .hp-checklist li { font-size: 14.5px; }
.hp-product-card .hp-checklist li i { flex-basis: 20px; width: 20px; height: 20px; font-size: 11px; }
/* --- timeline (numbered rows with a status tag) — used on dark bands --- */
.hp-timeline {
border-radius: 20px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
padding: 10px 26px;
}
.hp-timeline-item {
display: grid;
grid-template-columns: 36px 1fr auto;
align-items: center;
gap: 16px;
padding: 18px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.hp-timeline-item:last-child { border-bottom: 0; }
.hp-timeline-item .hp-tl-num {
width: 36px; height: 36px;
border-radius: 50%;
display: grid; place-items: center;
font-family: var(--heading-font);
font-weight: 700;
font-size: 13px;
color: #fff;
background: var(--hp-grad);
}
.hp-timeline-item strong {
display: block;
font-family: var(--heading-font);
font-weight: 600;
font-size: 15.5px;
color: #fff;
line-height: 1.25;
}
.hp-timeline-item small { display: block; font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 2px; }
.hp-timeline-item .hp-tl-tag {
font-size: 11px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
padding: 6px 11px;
border-radius: 999px;
color: #7FD9F0;
background: rgba(1,174,216,0.12);
border: 1px solid rgba(1,174,216,0.3);
white-space: nowrap;
}
/* --- split hero: text left, card (form) right --- */
.hp-hero--split .hp-hero-inner {
max-width: none;
text-align: left;
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 64px;
align-items: center;
}
.hp-hero--split .hp-hero-inner .hp-eyebrow { justify-content: flex-start; }
.hp-hero--split .hp-hero-inner h1 { font-size: clamp(36px, 4.4vw, 58px); }
.hp-hero--split .hp-hero-inner > div > p:not(.hp-eyebrow) { margin-left: 0; max-width: 560px; }
.hp-hero--split .hp-hero-actions { justify-content: flex-start; }
.hp-hero--split .hp-badges { justify-content: flex-start; margin-top: 36px; }
/* --- form card (white card, used in heroes and contact pages) --- */
.hp-form-card {
background: #fff;
border-radius: 24px;
padding: 36px 34px;
color: var(--hp-ink);
box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
position: relative;
}
.hp-form-card h2 {
font-family: var(--heading-font);
font-weight: 700;
font-size: 26px;
letter-spacing: -0.02em;
color: var(--hp-ink);
margin: 0 0 6px;
}
.hp-form-card > p,
.hp-form-card .hp-form-intro { font-size: 15px; color: var(--hp-body); margin: 0 0 22px; }
.hp-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hp-form-group { margin-bottom: 14px; }
.hp-form-group label {
display: block;
font-family: var(--heading-font);
font-size: 13px;
font-weight: 600;
color: var(--hp-ink);
margin-bottom: 6px;
}
.hp-form-card input[type="text"],
.hp-form-card input[type="email"],
.hp-form-card input[type="tel"],
.hp-form-card select,
.hp-form-card textarea {
width: 100%;
appearance: none;
-webkit-appearance: none;
background: var(--hp-soft);
border: 1px solid var(--hp-line);
border-radius: 12px;
padding: 13px 15px;
font-family: var(--body-font);
font-size: 15px;
font-weight: 400;
color: var(--hp-ink);
line-height: 1.3;
height: auto;
margin: 0;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.hp-form-card select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237C8299' stroke-width='1.8'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
}
.hp-form-card textarea { min-height: 120px; resize: vertical; }
.hp-form-card input:focus,
.hp-form-card select:focus,
.hp-form-card textarea:focus {
outline: none;
background: #fff;
border-color: var(--hp-sky);
box-shadow: 0 0 0 4px rgba(1,174,216,0.15);
}
.hp-form-card ::placeholder { color: #A3A8BA; }
.hp-form-card .hp-btn { width: 100%; margin-top: 6px; border: 0; cursor: pointer; }
.hp-form-card .hp-btn:disabled { opacity: .7; cursor: default; transform: none; }
.hp-form-note {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 12.5px;
color: var(--hp-muted);
margin: 14px 0 0;
}
.hp-form-success { display: none; text-align: center; padding: 30px 10px; }
.hp-form-success.is-active { display: block; }
.hp-form-success .hp-success-icon {
width: 64px; height: 64px;
border-radius: 50%;
display: grid; place-items: center;
margin: 0 auto 18px;
font-size: 28px;
color: #fff;
background: var(--hp-acc-green);
}
.hp-form-success h3 { font-size: 24px; font-weight: 700; color: var(--hp-ink); margin: 0 0 8px; }
.hp-form-success p { font-size: 15px; color: var(--hp-body); margin: 0; }
/* --- chat mock (illustrative chatbot window, for dark bands) --- */
.hp-chat {
border-radius: 20px;
overflow: hidden;
background: #fff;
color: var(--hp-ink);
box-shadow: 0 40px 80px -30px rgba(0,0,0,0.6);
max-width: 440px;
margin-left: auto;
}
.hp-chat-head {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: var(--hp-grad);
color: #fff;
}
.hp-chat-head .hp-chat-avatar {
width: 38px; height: 38px;
border-radius: 50%;
display: grid; place-items: center;
background: rgba(255,255,255,0.18);
font-size: 18px;
}
.hp-chat-head strong { display: block; font-family: var(--heading-font); font-size: 15px; line-height: 1.2; }
.hp-chat-head small { font-size: 12px; opacity: .85; }
.hp-chat-head small::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #45D483; margin-right: 6px; }
.hp-chat-body { padding: 20px; display: grid; gap: 10px; background: var(--hp-soft); }
.hp-chat-msg {
max-width: 82%;
padding: 11px 14px;
border-radius: 16px;
font-size: 14px;
line-height: 1.5;
background: #fff;
border: 1px solid var(--hp-line);
border-bottom-left-radius: 4px;
}
.hp-chat-msg--user {
justify-self: end;
background: var(--hp-blue);
color: #fff;
border-color: transparent;
border-bottom-left-radius: 16px;
border-bottom-right-radius: 4px;
}
.hp-chat-input {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px 12px 20px;
border-top: 1px solid var(--hp-line);
font-size: 14px;
color: var(--hp-muted);
}
.hp-chat-input span { flex: 1; }
.hp-chat-input i {
width: 36px; height: 36px;
border-radius: 50%;
display: grid; place-items: center;
background: var(--hp-grad);
color: #fff;
font-size: 14px;
}
/* --- plain framed image (photos / illustrations, no browser chrome) --- */
.hp-figure {
position: relative;
z-index: 1;
margin: 0;
border-radius: 24px;
overflow: hidden;
background: #fff;
border: 1px solid rgba(11,18,48,0.08);
box-shadow: 0 40px 80px -30px rgba(11,18,48,0.35);
}
.hp-figure img { display: block; width: 100%; height: auto; }
.hp-figure figcaption {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-top: 1px solid var(--hp-line);
font-family: var(--heading-font);
font-weight: 600;
font-size: 14px;
color: var(--hp-ink);
}
.hp-figure figcaption .hp-tag {
font-size: 11px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 999px;
color: #0B7A4B;
background: rgba(18,185,129,0.12);
}
/* --- badges on LIGHT sections (default badge styling assumes a dark band) --- */
.hp-section--white .hp-badge,
.hp-section--soft .hp-badge {
color: var(--hp-ink);
background: #fff;
border-color: var(--hp-line);
}
.hp-section--white .hp-badge i,
.hp-section--soft .hp-badge i { color: var(--hp-sky); }
/* --- spec list: aligned label / value rows inside a card --- */
.hp-spec-list {
list-style: none;
padding: 0;
margin: 6px 0 0;
border-top: 1px solid var(--hp-line);
}
.hp-spec-list li {
display: grid;
grid-template-columns: 110px 1fr;
gap: 12px;
padding: 11px 0;
border-bottom: 1px solid var(--hp-line);
font-size: 14px;
line-height: 1.45;
}
.hp-spec-list li span:first-child {
font-family: var(--heading-font);
font-weight: 600;
font-size: 12px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--hp-muted);
padding-top: 2px;
}
.hp-spec-list li span:last-child { color: var(--hp-ink); }
/* --- inner-page responsive --- */
@media (max-width: 1199px) {
.hp-grid-3 { grid-template-columns: repeat(2, 1fr); }
.hp-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
.hp-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 991px) {
.hp-hero { padding: 150px 0 72px; }
.hp-hero--split .hp-hero-inner { grid-template-columns: 1fr; gap: 40px; }
.hp-chat { margin-left: 0; max-width: none; }
.hp-band .hp-row { grid-template-columns: 1fr; }
.hp-steps .hp-reasons { grid-template-columns: 1fr; }
}
@media (max-width: 575px) {
.hp-hero { padding: 130px 0 60px; }
.hp-grid-3, .hp-grid-4 { grid-template-columns: 1fr; }
.hp-timeline { padding: 4px 16px; }
.hp-timeline-item { grid-template-columns: 32px 1fr; }
.hp-timeline-item .hp-tl-tag { grid-column: 2; justify-self: start; }
.hp-hero-actions .hp-btn { width: 100%; }
.hp-form-card { padding: 26px 20px; border-radius: 18px; }
.hp-form-row { grid-template-columns: 1fr; gap: 0; }
.hp-code pre { padding: 18px; font-size: 13px; }
}
/* ==========================================================================
11 LEGAL PAGES (privacy-policy.php, terms-condition.php)
--------------------------------------------------------------------------
.hp-hero--compact shorter dark hero with a meta line (last updated)
.hp-legal two-column layout: sticky table of contents + body
.hp-toc left nav; js/ahoi.js highlights the section in view
.hp-legal-body the document; every h2 needs an id for the TOC
========================================================================== */
.hp-hero--compact { padding: 170px 0 70px; }
.hp-hero--compact .hp-hero-inner { max-width: 760px; }
.hp-hero--compact .hp-hero-inner h1 { font-size: clamp(34px, 4.4vw, 56px); }
.hp-hero-meta {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 24px;
font-size: 14px;
color: rgba(255,255,255,0.6);
margin-top: 6px;
}
.hp-hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hp-hero-meta i { color: #7FD9F0; }
.hp-legal { padding: 72px 0 110px; background: #fff; }
.hp-legal .hp-legal-grid {
display: grid;
grid-template-columns: 280px minmax(0, 1fr);
gap: 64px;
align-items: start;
}
/* ---- table of contents ---- */
.hp-toc {
position: sticky;
top: 110px;
max-height: calc(100vh - 130px);
overflow-y: auto;
padding-right: 6px;
}
.hp-toc-title {
font-family: var(--heading-font);
font-size: 12px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--hp-muted);
margin: 0 0 12px 16px;
}
.hp-toc ol, .hp-toc ul { list-style: none; padding: 0; margin: 0; }
.hp-toc li + li { margin-top: 2px; }
.hp-toc a {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 9px 14px 9px 16px;
border-radius: 10px;
border-left: 2px solid transparent;
font-size: 14px;
line-height: 1.35;
color: var(--hp-body) !important;
text-decoration: none !important;
transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hp-toc a .hp-toc-num {
flex: 0 0 auto;
min-width: 20px;
font-family: var(--heading-font);
font-weight: 600;
font-size: 12px;
color: var(--hp-muted);
padding-top: 1px;
}
.hp-toc a:hover { background: var(--hp-soft); color: var(--hp-ink) !important; }
.hp-toc a.is-active {
background: #EEF1FA;
border-left-color: var(--hp-sky);
color: var(--hp-blue) !important;
font-weight: 500;
}
.hp-toc a.is-active .hp-toc-num { color: var(--hp-sky); }
.hp-toc-group {
margin-top: 22px;
padding-top: 18px;
border-top: 1px solid var(--hp-line);
}
.hp-toc-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* side card under the TOC */
.hp-toc-card {
margin-top: 26px;
padding: 20px 20px 18px;
border-radius: 16px;
background: var(--hp-soft);
border: 1px solid var(--hp-line);
}
.hp-toc-card strong { display: block; font-family: var(--heading-font); font-size: 14px; color: var(--hp-ink); margin-bottom: 8px; }
.hp-toc-card p { font-size: 13.5px; line-height: 1.55; color: var(--hp-body); margin: 0 0 12px; }
.hp-toc-card a { font-size: 13.5px; font-weight: 500; color: var(--hp-blue); display: inline-flex; align-items: center; gap: 6px; }
.hp-toc-card a + a { margin-left: 14px; }
/* ---- document body ---- */
.hp-legal-body { max-width: 780px; }
.hp-legal-body .hp-legal-part {
font-family: var(--heading-font);
font-size: 12px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--hp-sky);
margin: 56px 0 10px;
}
.hp-legal-body .hp-legal-part:first-child { margin-top: 0; }
.hp-legal-body h2 {
font-family: var(--heading-font);
font-weight: 700;
font-size: 26px;
letter-spacing: -0.015em;
line-height: 1.2;
color: var(--hp-ink);
margin: 48px 0 16px;
padding-top: 20px;
border-top: 1px solid var(--hp-line);
scroll-margin-top: 110px;
}
.hp-legal-body h2:first-of-type { margin-top: 0; }
.hp-legal-body .hp-legal-part + h2 { margin-top: 0; border-top: 0; padding-top: 0; }
.hp-legal-body h3 {
font-family: var(--heading-font);
font-weight: 600;
font-size: 17px;
color: var(--hp-ink);
margin: 26px 0 8px;
scroll-margin-top: 110px;
}
.hp-legal-body p,
.hp-legal-body li {
font-size: 15.5px;
line-height: 1.75;
color: var(--hp-body);
}
.hp-legal-body p { margin: 0 0 14px; }
.hp-legal-body p strong { color: var(--hp-ink); font-weight: 600; }
.hp-legal-body ul, .hp-legal-body ol { margin: 0 0 16px; padding-left: 22px; }
.hp-legal-body li { margin-bottom: 6px; }
.hp-legal-body li p { margin: 0; }
.hp-legal-body a { color: var(--hp-blue); text-decoration: underline !important; text-underline-offset: 2px; }
.hp-legal-body .hp-legal-note {
padding: 16px 20px;
border-radius: 14px;
background: var(--hp-soft);
border: 1px solid var(--hp-line);
font-size: 14.5px;
color: var(--hp-body);
margin: 0 0 18px;
}
.hp-legal-body .hp-legal-note strong { color: var(--hp-ink); }
/* mobile TOC toggle (shown < 992px) */
.hp-toc-toggle {
display: none;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 18px;
border-radius: 14px;
border: 1px solid var(--hp-line);
background: var(--hp-soft);
font-family: var(--heading-font);
font-weight: 600;
font-size: 15px;
color: var(--hp-ink);
cursor: pointer;
}
.hp-toc-toggle i { transition: transform .25s ease; }
.hp-toc-toggle[aria-expanded="true"] i { transform: rotate(180deg); }
@media (max-width: 991px) {
.hp-legal { padding: 40px 0 80px; }
.hp-legal .hp-legal-grid { grid-template-columns: 1fr; gap: 24px; }
.hp-toc-toggle { display: flex; }
.hp-toc { position: static; max-height: none; overflow: visible; padding: 0; }
.hp-toc-nav { display: none; padding: 10px 6px 4px; }
.hp-toc-nav.is-open { display: block; }
.hp-toc-title { display: none; }
.hp-toc-card { display: none; }
.hp-legal-body h2, .hp-legal-body h3 { scroll-margin-top: 90px; }
}
/* ==========================================================================
99 RESPONSIVE
========================================================================== */
@media (max-width: 1199px) {
:root { --hp-sec-pad: 96px; }
.hp-products .hp-grid { grid-template-columns: repeat(2, 1fr); }
.hp-cap-grid { grid-template-columns: repeat(3, 1fr); }
.hp-row { gap: 48px; }
}
@media (max-width: 991px) {
:root { --hp-sec-pad: 80px; }
.hp-head { margin-bottom: 44px; }
.hp-stat-grid { grid-template-columns: repeat(2, 1fr); }
.hp-stat { padding: 32px 20px; }
.hp-stat:nth-child(2) { border-right: 0; }
.hp-stat:nth-child(1),
.hp-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.12); }
.hp-row,
.hp-why .hp-row,
.hp-faq .hp-row,
.hp-about .hp-row { grid-template-columns: 1fr; gap: 40px; }
.hp-row--flip .hp-row-text { order: 1; }
.hp-row--flip .hp-row-visual { order: 2; }
.hp-row + .hp-row { margin-top: 72px; }
.hp-row-visual::before,
.hp-row--flip .hp-row-visual::before { inset: 10% 0 -6% 0; }
.hp-why .hp-head { position: static; }
.hp-panel, .hp-panel--flip { grid-template-columns: 1fr; gap: 28px; padding: 40px 32px 0; border-radius: 24px; }
.hp-panel-text { padding-bottom: 0; }
.hp-panel--flip .hp-panel-text { order: 1; }
.hp-panel--flip .hp-panel-visual { order: 2; }
.hp-panel-visual .hp-browser,
.hp-panel--flip .hp-panel-visual .hp-browser { border-radius: 14px 14px 0 0; border-right: 1px solid rgba(11,18,48,0.08); border-left: 1px solid rgba(11,18,48,0.08); }
.hp-panel-visual .hp-browser-bar,
.hp-panel--flip .hp-panel-visual .hp-browser-bar { border-radius: 14px 14px 0 0; }
.hp-cap-grid { grid-template-columns: repeat(2, 1fr); }
.hp-price-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
.hp-quote-card { left: 16px; bottom: 16px; }
.hp-cta-card { padding: 64px 32px; border-radius: 24px; }
}
@media (max-width: 575px) {
:root { --hp-sec-pad: 64px; }
.hp-products { padding-top: 64px; }
.hp-products .hp-grid { grid-template-columns: 1fr; }
.hp-product-card { padding: 28px 24px; }
.hp-stat-grid { grid-template-columns: 1fr; }
.hp-stat { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.12); }
.hp-stat:last-child { border-bottom: 0; }
.hp-reasons { grid-template-columns: 1fr; }
.hp-panel, .hp-panel--flip { padding: 28px 20px 0; }
.hp-cap-grid { grid-template-columns: 1fr; }
.hp-accordion details { padding: 0 18px; }
.hp-accordion summary { font-size: 16px; padding: 18px 0; }
.hp-quote-card { position: static; max-width: none; margin-top: 16px; box-shadow: none; border: 1px solid var(--hp-line); }
.hp-cta-card { padding: 52px 22px; }
.hp-cta-card .hp-actions .hp-btn { width: 100%; }
.hp-btn { padding: 16px 24px; font-size: 15px; }
}