854 lines
42 KiB
CSS
854 lines
42 KiB
CSS
|
|
:root {
|
|
--navy: #0A2540;
|
|
--navy-2: #061B2F;
|
|
--navy-3: #0E3352;
|
|
--teal: #00C4B4;
|
|
--teal-2: #39E0D2;
|
|
--ice: #EAFBF8;
|
|
--white: #FFFFFF;
|
|
--text: #0A2540;
|
|
--muted: #60778B;
|
|
--line: rgba(10, 37, 64, .12);
|
|
--glass: rgba(255, 255, 255, .10);
|
|
--shadow: 0 28px 90px rgba(3, 26, 43, .18);
|
|
--radius-xl: 32px;
|
|
--radius-lg: 24px;
|
|
--radius-md: 18px;
|
|
--container: 1200px;
|
|
--section-y: clamp(68px, 8vw, 112px);
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
html { scroll-behavior: smooth; background: var(--navy-2); }
|
|
body {
|
|
margin: 0;
|
|
color: var(--text);
|
|
background: #F5FAFB;
|
|
font-family: Inter, Manrope, "Segoe UI", Arial, sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.55;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
overflow-x: hidden;
|
|
}
|
|
body.menu-open { overflow: hidden; }
|
|
img { display: block; max-width: 100%; }
|
|
a { color: inherit; text-decoration: none; }
|
|
button, input, textarea { font: inherit; }
|
|
button { cursor: pointer; }
|
|
::selection { background: rgba(0, 196, 180, .28); color: var(--navy); }
|
|
|
|
.container { width: min(calc(100% - 32px), var(--container)); margin-inline: auto; }
|
|
.section { padding: var(--section-y) 0; position: relative; }
|
|
.section--light { background: #F5FAFB; }
|
|
.section--white { background: var(--white); }
|
|
.section--dark { background: var(--navy); color: var(--white); }
|
|
.section--compact { --section-y: clamp(60px, 6vw, 88px); }
|
|
|
|
.eyebrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 0 0 16px;
|
|
color: #008F84;
|
|
font-size: 12px;
|
|
font-weight: 800;
|
|
letter-spacing: .14em;
|
|
text-transform: uppercase;
|
|
}
|
|
.eyebrow::before {
|
|
content: "";
|
|
width: 26px;
|
|
height: 2px;
|
|
border-radius: 2px;
|
|
background: var(--teal);
|
|
}
|
|
.section--dark .eyebrow { color: var(--teal-2); }
|
|
|
|
h1, h2, h3, p { margin-top: 0; }
|
|
h1, h2, h3 { text-wrap: balance; }
|
|
h1 {
|
|
margin-bottom: 22px;
|
|
font-size: clamp(42px, 8vw, 86px);
|
|
line-height: .98;
|
|
letter-spacing: -.055em;
|
|
font-weight: 760;
|
|
max-width: 900px;
|
|
}
|
|
h2 {
|
|
margin-bottom: 20px;
|
|
font-size: clamp(34px, 5vw, 58px);
|
|
line-height: 1.03;
|
|
letter-spacing: -.045em;
|
|
font-weight: 740;
|
|
}
|
|
h3 {
|
|
margin-bottom: 10px;
|
|
font-size: clamp(21px, 2.4vw, 28px);
|
|
line-height: 1.14;
|
|
letter-spacing: -.025em;
|
|
}
|
|
.lead {
|
|
max-width: 760px;
|
|
margin-bottom: 0;
|
|
color: var(--muted);
|
|
font-size: clamp(18px, 2vw, 22px);
|
|
line-height: 1.55;
|
|
}
|
|
.section--dark .lead { color: rgba(255,255,255,.72); }
|
|
.section-head { margin-bottom: clamp(34px, 5vw, 54px); }
|
|
.section-head--split { display: grid; gap: 18px; }
|
|
|
|
.header {
|
|
position: fixed;
|
|
inset: 0 0 auto;
|
|
z-index: 50;
|
|
padding: 14px 0;
|
|
transition: background .25s ease, box-shadow .25s ease, backdrop-filter .25s ease;
|
|
}
|
|
.header.scrolled {
|
|
background: rgba(6, 27, 47, .86);
|
|
box-shadow: 0 12px 40px rgba(3, 20, 34, .18);
|
|
backdrop-filter: blur(18px);
|
|
-webkit-backdrop-filter: blur(18px);
|
|
}
|
|
.header__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
|
|
.brand { display: inline-flex; align-items: center; min-width: 0; }
|
|
.brand img { width: clamp(150px, 19vw, 215px); height: auto; }
|
|
.header__nav { display: none; align-items: center; gap: 30px; color: rgba(255,255,255,.76); font-size: 14px; font-weight: 650; }
|
|
.header__nav a { transition: color .2s ease; }
|
|
.header__nav a:hover { color: var(--white); }
|
|
|
|
.btn {
|
|
min-height: 52px;
|
|
padding: 0 22px;
|
|
border: 1px solid transparent;
|
|
border-radius: 999px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
font-weight: 760;
|
|
line-height: 1;
|
|
transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
|
|
white-space: nowrap;
|
|
}
|
|
.btn:hover { transform: translateY(-2px); }
|
|
.btn:active { transform: translateY(0); }
|
|
.btn--primary {
|
|
color: var(--navy);
|
|
background: var(--teal);
|
|
box-shadow: 0 16px 45px rgba(0,196,180,.26);
|
|
}
|
|
.btn--primary:hover { background: var(--teal-2); box-shadow: 0 20px 55px rgba(0,196,180,.34); }
|
|
.btn--secondary {
|
|
color: var(--white);
|
|
background: rgba(255,255,255,.08);
|
|
border-color: rgba(255,255,255,.26);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
.btn--secondary:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.42); }
|
|
.btn--header { min-height: 44px; padding-inline: 17px; font-size: 13px; }
|
|
.btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
|
|
|
|
.hero {
|
|
position: relative;
|
|
min-height: 760px;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 122px 0 48px;
|
|
overflow: hidden;
|
|
color: var(--white);
|
|
background: var(--navy-2);
|
|
isolation: isolate;
|
|
}
|
|
.hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -3;
|
|
background-image: url("assets/asset_55bf368cd062.webp");
|
|
background-size: cover;
|
|
background-position: 60% center;
|
|
transform: scale(1.02);
|
|
}
|
|
.hero::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -2;
|
|
background:
|
|
linear-gradient(180deg, rgba(4,21,35,.44) 0%, rgba(4,21,35,.18) 32%, rgba(4,21,35,.86) 100%),
|
|
linear-gradient(90deg, rgba(4,21,35,.92) 0%, rgba(4,21,35,.69) 46%, rgba(4,21,35,.10) 100%);
|
|
}
|
|
.hero__glow {
|
|
position: absolute;
|
|
z-index: -1;
|
|
width: 480px;
|
|
height: 480px;
|
|
right: -220px;
|
|
bottom: -180px;
|
|
border-radius: 50%;
|
|
background: rgba(0,196,180,.38);
|
|
filter: blur(100px);
|
|
pointer-events: none;
|
|
}
|
|
.hero__content { width: min(100%, 950px); }
|
|
.hero__kicker {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 22px;
|
|
padding: 9px 13px;
|
|
border: 1px solid rgba(255,255,255,.22);
|
|
border-radius: 999px;
|
|
color: rgba(255,255,255,.84);
|
|
background: rgba(5,30,47,.36);
|
|
backdrop-filter: blur(14px);
|
|
font-size: 12px;
|
|
font-weight: 780;
|
|
letter-spacing: .1em;
|
|
text-transform: uppercase;
|
|
}
|
|
.hero__kicker i { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 6px rgba(0,196,180,.14); }
|
|
.hero__subtitle {
|
|
max-width: 730px;
|
|
margin-bottom: 30px;
|
|
color: rgba(255,255,255,.82);
|
|
font-size: clamp(19px, 2.2vw, 27px);
|
|
line-height: 1.42;
|
|
}
|
|
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
|
|
.hero__facts {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
max-width: 700px;
|
|
}
|
|
.hero-fact {
|
|
min-height: 82px;
|
|
padding: 15px 16px;
|
|
border: 1px solid rgba(255,255,255,.16);
|
|
border-radius: 18px;
|
|
background: rgba(5,29,47,.42);
|
|
backdrop-filter: blur(16px);
|
|
}
|
|
.hero-fact strong { display: block; margin-bottom: 3px; font-size: clamp(19px, 2.55vw, 27px); line-height: 1.1; letter-spacing: -.03em; white-space: nowrap; }
|
|
.hero-fact span { color: rgba(255,255,255,.62); font-size: 12px; }
|
|
|
|
.benefit-grid, .portrait-grid, .scenario-grid, .equipment-grid { display: grid; gap: 16px; }
|
|
.scroll-cards {
|
|
grid-auto-flow: column;
|
|
grid-auto-columns: minmax(82%, 1fr);
|
|
overflow-x: auto;
|
|
overscroll-behavior-inline: contain;
|
|
scroll-snap-type: inline mandatory;
|
|
scrollbar-width: none;
|
|
padding: 2px 1px 18px;
|
|
margin-right: -16px;
|
|
}
|
|
.scroll-cards::-webkit-scrollbar { display: none; }
|
|
.scroll-cards > * { scroll-snap-align: start; }
|
|
|
|
.benefit-card {
|
|
position: relative;
|
|
min-height: 190px;
|
|
padding: 25px;
|
|
overflow: hidden;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--white);
|
|
box-shadow: 0 15px 50px rgba(10,37,64,.055);
|
|
}
|
|
.benefit-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: -50px;
|
|
bottom: -65px;
|
|
width: 150px;
|
|
height: 150px;
|
|
border-radius: 50%;
|
|
background: rgba(0,196,180,.10);
|
|
filter: blur(4px);
|
|
}
|
|
.benefit-card__num { display: block; margin-bottom: 28px; color: var(--teal); font-size: 13px; font-weight: 800; letter-spacing: .12em; }
|
|
.benefit-card h3 { max-width: 290px; }
|
|
.benefit-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
|
|
|
|
.market-panel {
|
|
margin-top: 24px;
|
|
padding: clamp(22px, 3vw, 34px);
|
|
border-radius: var(--radius-xl);
|
|
color: var(--white);
|
|
background:
|
|
radial-gradient(circle at 85% 15%, rgba(0,196,180,.22), transparent 34%),
|
|
linear-gradient(135deg, var(--navy), var(--navy-2));
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.market-panel__top { display: grid; gap: 12px; margin-bottom: 28px; }
|
|
.market-panel__top h3 { margin: 0; font-size: clamp(24px, 3vw, 34px); }
|
|
.market-panel__top p { margin: 0; color: rgba(255,255,255,.68); max-width: 760px; }
|
|
.market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
|
.metric-card {
|
|
min-height: 190px;
|
|
padding: 18px;
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
border-radius: 19px;
|
|
background: rgba(255,255,255,.07);
|
|
overflow: hidden;
|
|
}
|
|
.metric-card__label { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 44px; color: rgba(255,255,255,.72); font-size: 12px; font-weight: 650; }
|
|
.metric-card__value { color: var(--teal-2); font-size: 16px; font-weight: 820; white-space: nowrap; }
|
|
.metric-card svg { width: 100%; height: 88px; overflow: visible; }
|
|
.metric-card__foot { display: flex; justify-content: space-between; gap: 8px; color: rgba(255,255,255,.44); font-size: 10px; }
|
|
.chart-gridline { stroke: rgba(255,255,255,.10); stroke-width: 1; }
|
|
.chart-line { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1); }
|
|
.chart-dot { fill: var(--teal-2); opacity: 0; transform-origin: center; transition: opacity .35s ease .65s; }
|
|
.chart-bar { fill: var(--teal); transform: scaleY(0); transform-origin: bottom; transform-box: fill-box; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
|
|
.chart-bar--muted { fill: rgba(255,255,255,.32); }
|
|
.is-visible .chart-line { stroke-dashoffset: 0; }
|
|
.is-visible .chart-dot { opacity: 1; }
|
|
.is-visible .chart-bar { transform: scaleY(1); }
|
|
.source-note { margin: 14px 0 0; color: rgba(255,255,255,.42); font-size: 11px; }
|
|
|
|
.market-implication {
|
|
display: grid;
|
|
gap: 10px;
|
|
margin-top: 16px;
|
|
}
|
|
.market-implication__item {
|
|
padding: 16px;
|
|
border: 1px solid rgba(255,255,255,.11);
|
|
border-radius: 17px;
|
|
background: rgba(255,255,255,.055);
|
|
}
|
|
.market-implication__item strong {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
color: var(--teal-2);
|
|
font-size: 13px;
|
|
letter-spacing: .02em;
|
|
}
|
|
.market-implication__item span {
|
|
display: block;
|
|
color: rgba(255,255,255,.67);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.hotel-model {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: 26px;
|
|
padding: clamp(22px, 3vw, 32px);
|
|
border: 1px solid rgba(255,255,255,.13);
|
|
border-radius: var(--radius-xl);
|
|
background: rgba(255,255,255,.06);
|
|
box-shadow: 0 24px 70px rgba(0,0,0,.14);
|
|
}
|
|
.hotel-model__head {
|
|
display: grid;
|
|
gap: 9px;
|
|
margin-bottom: 19px;
|
|
}
|
|
.hotel-model__head h3 { margin: 0; font-size: clamp(24px, 3vw, 34px); }
|
|
.hotel-model__head p { margin: 0; max-width: 820px; color: rgba(255,255,255,.67); }
|
|
.hotel-model__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
|
.hotel-model__card {
|
|
min-height: 132px;
|
|
padding: 17px;
|
|
border: 1px solid rgba(255,255,255,.10);
|
|
border-radius: 18px;
|
|
background: rgba(3,21,35,.28);
|
|
}
|
|
.hotel-model__card strong {
|
|
display: block;
|
|
margin-bottom: 7px;
|
|
color: var(--teal-2);
|
|
font-size: clamp(21px, 3vw, 29px);
|
|
line-height: 1;
|
|
letter-spacing: -.03em;
|
|
}
|
|
.hotel-model__card span { display: block; color: rgba(255,255,255,.67); font-size: 12px; line-height: 1.5; }
|
|
.hotel-model__kpis { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
|
|
.hotel-model__kpi {
|
|
padding: 7px 10px;
|
|
border: 1px solid rgba(255,255,255,.12);
|
|
border-radius: 999px;
|
|
color: rgba(255,255,255,.63);
|
|
background: rgba(255,255,255,.045);
|
|
font-size: 11px;
|
|
}
|
|
|
|
.program-menu {
|
|
margin-top: clamp(34px, 5vw, 54px);
|
|
padding: clamp(22px, 3vw, 32px);
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius-xl);
|
|
background: linear-gradient(145deg, #F7FCFC, #FFFFFF);
|
|
box-shadow: 0 18px 60px rgba(10,37,64,.06);
|
|
}
|
|
.program-menu__head { display: grid; gap: 9px; margin-bottom: 20px; }
|
|
.program-menu__head h3 { margin: 0; font-size: clamp(25px, 3vw, 36px); }
|
|
.program-menu__head p { margin: 0; max-width: 800px; color: var(--muted); }
|
|
.program-grid { display: grid; gap: 12px; }
|
|
.program-card {
|
|
min-height: 150px;
|
|
padding: 19px;
|
|
border: 1px solid rgba(0,196,180,.23);
|
|
border-radius: 19px;
|
|
background: var(--white);
|
|
}
|
|
.program-card__time {
|
|
display: inline-flex;
|
|
margin-bottom: 14px;
|
|
padding: 6px 9px;
|
|
border-radius: 999px;
|
|
color: #007E75;
|
|
background: rgba(0,196,180,.11);
|
|
font-size: 11px;
|
|
font-weight: 780;
|
|
}
|
|
.program-card h4 { margin: 0 0 7px; color: var(--navy); font-size: 17px; line-height: 1.2; }
|
|
.program-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
|
|
|
|
.portrait-card {
|
|
padding: 24px;
|
|
border: 1px solid rgba(0,196,180,.28);
|
|
border-radius: var(--radius-lg);
|
|
background: linear-gradient(145deg, #FFFFFF, #F0FBFA);
|
|
}
|
|
.portrait-card__icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 26px;
|
|
display: grid;
|
|
place-items: center;
|
|
border-radius: 15px;
|
|
color: var(--navy);
|
|
background: rgba(0,196,180,.14);
|
|
}
|
|
.portrait-card__icon svg { width: 24px; height: 24px; }
|
|
.portrait-card p { margin-bottom: 0; color: var(--muted); font-size: 14px; }
|
|
|
|
.equipment-shell {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(circle at 10% 20%, rgba(0,196,180,.20), transparent 27%),
|
|
linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
|
|
}
|
|
.equipment-shell::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: auto -10% -160px;
|
|
height: 320px;
|
|
background: rgba(0,196,180,.12);
|
|
filter: blur(100px);
|
|
pointer-events: none;
|
|
}
|
|
.equipment-grid { position: relative; z-index: 1; }
|
|
.equipment-card {
|
|
position: relative;
|
|
min-height: 475px;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(255,255,255,.13);
|
|
border-radius: 26px;
|
|
background: rgba(255,255,255,.07);
|
|
box-shadow: 0 24px 70px rgba(0,0,0,.18);
|
|
}
|
|
.equipment-card__media { position: relative; height: 230px; overflow: hidden; }
|
|
.equipment-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(6,27,47,.86)); }
|
|
.equipment-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
|
|
.equipment-card:hover .equipment-card__media img { transform: scale(1.045); }
|
|
.equipment-card__body { padding: 2px 22px 23px; }
|
|
.equipment-card__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -26px; position: relative; z-index: 2; }
|
|
.equipment-card h3 { margin: 0; font-size: 27px; }
|
|
.equipment-role { max-width: 132px; padding: 7px 10px; border: 1px solid rgba(0,196,180,.28); border-radius: 999px; color: var(--teal-2); background: rgba(0,196,180,.10); font-size: 11px; font-weight: 790; line-height: 1.2; text-align: center; }
|
|
.equipment-duration { display: inline-flex; margin: 15px 0 14px; padding: 7px 10px; border-radius: 999px; color: var(--teal-2); background: rgba(0,196,180,.12); font-size: 12px; font-weight: 750; }
|
|
.equipment-card p { margin: 0; color: rgba(255,255,255,.66); font-size: 14px; }
|
|
.equipment-note {
|
|
position: relative;
|
|
z-index: 1;
|
|
margin-top: 22px;
|
|
padding: 16px 18px;
|
|
border: 1px solid rgba(255,255,255,.13);
|
|
border-radius: 16px;
|
|
color: rgba(255,255,255,.60);
|
|
background: rgba(255,255,255,.06);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.scenario-card {
|
|
position: relative;
|
|
min-height: 330px;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-lg);
|
|
color: var(--white);
|
|
isolation: isolate;
|
|
box-shadow: 0 20px 60px rgba(10,37,64,.14);
|
|
}
|
|
.scenario-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -3; transition: transform .7s ease; }
|
|
.scenario-card::before { content: ""; position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(6,27,47,.04) 25%, rgba(6,27,47,.90) 100%); }
|
|
.scenario-card::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; z-index: -1; background: var(--teal); transform: scaleX(.22); transform-origin: left; transition: transform .45s ease; }
|
|
.scenario-card:hover img { transform: scale(1.04); }
|
|
.scenario-card:hover::after { transform: scaleX(1); }
|
|
.scenario-card__content { position: absolute; inset: auto 0 0; padding: 24px; }
|
|
.scenario-card__index { display: block; margin-bottom: 9px; color: var(--teal-2); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
|
|
.scenario-card h3 { margin-bottom: 8px; }
|
|
.scenario-card p { margin: 0; color: rgba(255,255,255,.70); font-size: 13px; }
|
|
|
|
.why-layout { display: grid; gap: 30px; align-items: stretch; }
|
|
.why-visual {
|
|
position: relative;
|
|
min-height: 360px;
|
|
overflow: hidden;
|
|
border-radius: var(--radius-xl);
|
|
background: var(--navy);
|
|
box-shadow: var(--shadow);
|
|
isolation: isolate;
|
|
}
|
|
.why-visual::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: -2;
|
|
background-image: url("assets/asset_85faea2da9e3.webp");
|
|
background-size: cover;
|
|
background-position: center;
|
|
}
|
|
.why-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(155deg, rgba(6,27,47,.18), rgba(6,27,47,.88)); }
|
|
.why-visual__caption { position: absolute; inset: auto 24px 24px; max-width: 410px; padding: 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 20px; color: var(--white); background: rgba(6,27,47,.62); backdrop-filter: blur(14px); }
|
|
.why-visual__caption strong { display: block; margin-bottom: 6px; font-size: 22px; line-height: 1.2; }
|
|
.why-visual__caption span { color: rgba(255,255,255,.66); font-size: 13px; }
|
|
.why-list { display: grid; gap: 12px; }
|
|
.why-item { display: grid; grid-template-columns: 48px 1fr; gap: 15px; align-items: start; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
|
|
.why-item__icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; color: var(--navy); background: var(--ice); }
|
|
.why-item__icon svg { width: 23px; height: 23px; }
|
|
.why-item strong { display: block; margin-bottom: 4px; font-size: 16px; }
|
|
.why-item p { margin: 0; color: var(--muted); font-size: 13px; }
|
|
|
|
.cta-section {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background:
|
|
radial-gradient(circle at 8% 15%, rgba(0,196,180,.22), transparent 28%),
|
|
radial-gradient(circle at 92% 88%, rgba(0,196,180,.18), transparent 30%),
|
|
linear-gradient(135deg, var(--navy), var(--navy-2));
|
|
color: var(--white);
|
|
}
|
|
.cta-section::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: .23;
|
|
background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
|
|
background-size: 52px 52px;
|
|
mask-image: linear-gradient(to bottom, black, transparent 76%);
|
|
}
|
|
.cta-grid { position: relative; display: grid; gap: 34px; align-items: start; }
|
|
.cta-copy { padding-top: 4px; }
|
|
.cta-copy h2 { max-width: 660px; }
|
|
.cta-copy .lead { max-width: 620px; }
|
|
.cta-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
|
|
.cta-pill { padding: 8px 11px; border: 1px solid rgba(255,255,255,.14); border-radius: 999px; color: rgba(255,255,255,.72); background: rgba(255,255,255,.06); font-size: 12px; }
|
|
|
|
.lead-form {
|
|
padding: clamp(22px, 4vw, 34px);
|
|
border: 1px solid rgba(255,255,255,.15);
|
|
border-radius: var(--radius-xl);
|
|
background: rgba(255,255,255,.09);
|
|
box-shadow: 0 32px 90px rgba(0,0,0,.20);
|
|
backdrop-filter: blur(18px);
|
|
}
|
|
.form-grid { display: grid; gap: 14px; }
|
|
.field { display: grid; gap: 7px; }
|
|
.field label { color: rgba(255,255,255,.74); font-size: 12px; font-weight: 680; }
|
|
.field input, .field textarea {
|
|
width: 100%;
|
|
border: 1px solid rgba(255,255,255,.18);
|
|
border-radius: 14px;
|
|
outline: none;
|
|
color: var(--white);
|
|
background: rgba(4,22,36,.44);
|
|
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
|
|
}
|
|
.field input { height: 52px; padding: 0 15px; }
|
|
.field textarea { min-height: 105px; padding: 13px 15px; resize: vertical; }
|
|
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.34); }
|
|
.field input:focus, .field textarea:focus { border-color: var(--teal); box-shadow: 0 0 0 4px rgba(0,196,180,.13); background: rgba(4,22,36,.62); }
|
|
.field--full { grid-column: 1 / -1; }
|
|
.form-consent { margin: 12px 0 16px; color: rgba(255,255,255,.48); font-size: 11px; }
|
|
.form-submit { width: 100%; border: 0; }
|
|
.form-status { display: none; margin-top: 14px; padding: 12px 14px; border-radius: 12px; font-size: 13px; }
|
|
.form-status.show { display: block; }
|
|
.form-status.success { color: #BFFBF4; background: rgba(0,196,180,.14); border: 1px solid rgba(0,196,180,.25); }
|
|
.form-status.error { color: #FFD5D5; background: rgba(255,95,95,.12); border: 1px solid rgba(255,95,95,.24); }
|
|
.honeypot { position: absolute !important; left: -9999px !important; opacity: 0 !important; pointer-events: none !important; }
|
|
|
|
.footer { padding: 26px 0; color: rgba(255,255,255,.50); background: #041421; font-size: 12px; }
|
|
.footer__inner { display: flex; flex-direction: column; gap: 17px; align-items: flex-start; }
|
|
.footer img { width: 170px; }
|
|
.footer__right { display: flex; flex-wrap: wrap; gap: 14px 20px; }
|
|
|
|
.reveal { opacity: 1; transform: none; }
|
|
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
|
|
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
|
|
.delay-1 { transition-delay: .08s; }
|
|
.delay-2 { transition-delay: .16s; }
|
|
.delay-3 { transition-delay: .24s; }
|
|
|
|
.scroll-hint { display: flex; align-items: center; gap: 7px; margin-top: 8px; color: var(--muted); font-size: 11px; }
|
|
.scroll-hint svg { width: 16px; height: 16px; }
|
|
|
|
@media (min-width: 640px) {
|
|
.container { width: min(calc(100% - 48px), var(--container)); }
|
|
.hero { min-height: 820px; padding-bottom: 60px; }
|
|
.hero__facts { gap: 12px; }
|
|
.scroll-cards { grid-auto-columns: minmax(43%, 1fr); margin-right: -24px; }
|
|
.market-grid { gap: 14px; }
|
|
.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
|
|
.footer__inner { flex-direction: row; align-items: center; justify-content: space-between; }
|
|
}
|
|
|
|
@media (min-width: 900px) {
|
|
.header { padding: 18px 0; }
|
|
.header__nav { display: flex; }
|
|
.hero { min-height: 790px; align-items: center; padding: 150px 0 78px; }
|
|
.hero::after { background: linear-gradient(90deg, rgba(4,21,35,.95) 0%, rgba(4,21,35,.68) 48%, rgba(4,21,35,.08) 100%); }
|
|
.section-head--split { grid-template-columns: 1.02fr .78fr; align-items: end; }
|
|
.section-head--split .lead { justify-self: end; }
|
|
.benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.portrait-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.equipment-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.scenario-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.scroll-cards { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; margin-right: 0; padding-bottom: 0; }
|
|
.scroll-hint { display: none; }
|
|
.market-panel__top { grid-template-columns: 1fr 1.15fr; align-items: end; }
|
|
.market-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.market-implication { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.hotel-model__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
|
.program-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
|
|
.why-layout { grid-template-columns: 1.08fr .92fr; }
|
|
.cta-grid { grid-template-columns: .95fr 1.05fr; gap: clamp(44px, 6vw, 88px); }
|
|
.equipment-card { min-height: 510px; }
|
|
.equipment-card__media { height: 245px; }
|
|
}
|
|
|
|
@media (max-width: 430px) {
|
|
.hero__facts { grid-template-columns: 1fr; max-width: 330px; }
|
|
.hero-fact { min-height: auto; display: grid; grid-template-columns: minmax(118px, auto) 1fr; align-items: center; gap: 10px; }
|
|
.hero-fact strong { margin: 0; font-size: 18px; white-space: nowrap; }
|
|
.btn { width: 100%; }
|
|
.btn--header { width: auto; }
|
|
.market-grid { grid-template-columns: 1fr; }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto; }
|
|
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
|
.reveal { opacity: 1; transform: none; }
|
|
.chart-line { stroke-dashoffset: 0; }
|
|
.chart-dot { opacity: 1; }
|
|
.chart-bar { transform: scaleY(1); }
|
|
}
|
|
|
|
|
|
/* final hotel updates */
|
|
.header__actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
|
|
.btn--call{color:#fff;background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);backdrop-filter:blur(10px)}
|
|
.btn--call:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.38)}
|
|
.btn--call svg{width:16px;height:16px}
|
|
.exo-master-logo{display:block!important;height:auto!important;object-fit:contain;object-position:left center;flex:0 0 auto}
|
|
.brand .exo-master-logo--header,.header .exo-master-logo--header{width:clamp(172px,20vw,232px)!important;max-width:100%}
|
|
.footer .exo-master-logo--footer{width:clamp(150px,16vw,180px)!important;max-width:min(50vw,180px)!important;height:auto!important;object-fit:contain}
|
|
.market-glossary{display:grid;gap:8px;margin-top:14px;padding:14px 16px;border:1px solid rgba(10,37,64,.10);border-radius:16px;background:#fff}
|
|
.market-glossary div{display:grid;grid-template-columns:74px 1fr;gap:10px;align-items:start;font-size:12px;line-height:1.45;color:var(--muted)}
|
|
.market-glossary strong{color:var(--navy);font-weight:820}
|
|
.equipment-card__top{align-items:center!important;flex-wrap:wrap}
|
|
.equipment-role{width:150px!important;max-width:150px!important;min-height:34px;display:flex!important;align-items:center;justify-content:center;padding:7px 10px!important;border-radius:12px!important;white-space:normal!important;overflow-wrap:anywhere;flex:0 0 150px;font-size:11px!important;line-height:1.15!important}
|
|
.equipment-tech{margin:0 0 10px!important;color:#fff!important;font-size:13px!important;font-weight:760;line-height:1.45!important}
|
|
.program-card{min-height:220px!important}
|
|
.program-devices{display:grid;gap:10px;margin-top:12px}
|
|
.program-device{padding-top:10px;border-top:1px solid rgba(10,37,64,.09);display:grid;gap:3px}
|
|
.program-device:first-child{padding-top:0;border-top:0}
|
|
.program-device strong{color:var(--navy);font-size:13px;font-weight:800}
|
|
.program-device span{color:var(--muted);font-size:12px;line-height:1.5}
|
|
.hotel-model__grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
|
|
@media(max-width:780px){.hotel-model__grid{grid-template-columns:1fr!important}.market-glossary div{grid-template-columns:1fr;gap:2px}}
|
|
@media(max-width:620px){.header__actions{gap:6px}.btn--call{padding-inline:12px}.btn--call span{display:none}.btn--call svg{width:18px;height:18px}.brand .exo-master-logo--header{width:150px!important}.equipment-role{width:142px!important;max-width:142px!important;flex-basis:142px}}
|
|
|
|
|
|
/* Hotel economics refinements */
|
|
.exo-econ__benchmark{
|
|
margin-top:18px;
|
|
padding:18px 20px;
|
|
border:1px solid rgba(0,196,180,.28);
|
|
border-radius:18px;
|
|
background:linear-gradient(135deg,rgba(0,196,180,.08),rgba(255,255,255,.04));
|
|
box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
|
|
}
|
|
.exo-econ__benchmark-label{
|
|
display:block;
|
|
margin-bottom:7px;
|
|
color:var(--teal,#00C4B4);
|
|
font-size:11px;
|
|
font-weight:800;
|
|
letter-spacing:.11em;
|
|
text-transform:uppercase;
|
|
}
|
|
.exo-econ__benchmark p{
|
|
margin:0;
|
|
color:inherit;
|
|
font-size:14px;
|
|
line-height:1.55;
|
|
}
|
|
.exo-econ__benchmark p strong{
|
|
color:var(--teal,#00C4B4);
|
|
font-size:1.08em;
|
|
white-space:nowrap;
|
|
}
|
|
.exo-econ__benchmark b{
|
|
display:block;
|
|
margin-top:7px;
|
|
color:inherit;
|
|
font-size:12px;
|
|
line-height:1.45;
|
|
opacity:.72;
|
|
}
|
|
.exo-econ__actions{
|
|
display:flex;
|
|
justify-content:flex-start;
|
|
margin-top:18px;
|
|
}
|
|
.exo-econ__consult{
|
|
min-width:230px;
|
|
justify-content:center;
|
|
}
|
|
.exo-econ__consult svg{
|
|
width:18px;
|
|
height:18px;
|
|
}
|
|
@media(max-width:640px){
|
|
.exo-econ__benchmark{padding:16px}
|
|
.exo-econ__actions{display:block}
|
|
.exo-econ__consult{width:100%;min-width:0}
|
|
}
|
|
|
|
|
|
/* ---- merged style block ---- */
|
|
|
|
|
|
/* ===== EXO economics blocks: Hotel + Fitness ===== */
|
|
.exo-econ{--ee-navy:#0A2540;--ee-deep:#061B2F;--ee-teal:#00C4B4;--ee-teal-2:#39E0D2;--ee-ice:#EAF9F7;--ee-red:#F0656B;--ee-muted:#60778B;position:relative;overflow:hidden;background:#F4FAFB;color:var(--ee-navy)}
|
|
.exo-econ::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;right:-260px;top:-270px;background:rgba(0,196,180,.13);filter:blur(18px);pointer-events:none}
|
|
.exo-econ__head{position:relative;z-index:1;display:grid;gap:14px;margin-bottom:28px;max-width:920px}
|
|
.exo-econ__eyebrow{display:flex;align-items:center;gap:10px;color:#008F84;font-size:11px;font-weight:850;letter-spacing:.095em;text-transform:uppercase}
|
|
.exo-econ__eyebrow::before{content:"";width:28px;height:2px;border-radius:3px;background:var(--ee-teal)}
|
|
.exo-econ__head h2{margin:0;color:var(--ee-navy);font-size:clamp(31px,5vw,58px);line-height:1.02;letter-spacing:-.048em}
|
|
.exo-econ__head p{max-width:860px;margin:0;color:var(--ee-muted);font-size:clamp(15px,1.55vw,19px);line-height:1.55}
|
|
.exo-econ__metrics{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
|
|
.exo-econ__metric{min-width:0;padding:17px 16px;border:1px solid rgba(0,196,180,.26);border-radius:18px;background:rgba(255,255,255,.9);box-shadow:0 12px 36px rgba(4,31,50,.055)}
|
|
.exo-econ__metric strong{display:block;color:#00A99A;font-size:clamp(22px,3vw,34px);line-height:1.05;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
|
|
.exo-econ__metric span{display:block;margin-top:7px;color:var(--ee-navy);font-size:12px;font-weight:760;line-height:1.32}
|
|
.exo-econ__metric small{display:block;margin-top:4px;color:var(--ee-muted);font-size:10px;line-height:1.35}
|
|
.exo-econ__compare{position:relative;z-index:1;display:grid;gap:14px}
|
|
.exo-econ__panel{min-width:0;padding:22px;border-radius:25px}
|
|
.exo-econ__panel--loss{color:#fff;background:radial-gradient(circle at 8% 0%,rgba(240,101,107,.16),transparent 30%),linear-gradient(145deg,var(--ee-deep),var(--ee-navy));box-shadow:0 24px 60px rgba(4,25,41,.16)}
|
|
.exo-econ__panel--gain{border:1px solid rgba(0,196,180,.34);background:rgba(255,255,255,.96);box-shadow:0 24px 60px rgba(4,31,50,.075)}
|
|
.exo-econ__panel-title{display:flex;align-items:center;gap:11px;margin:0 0 17px;font-size:20px;line-height:1.15;letter-spacing:-.025em}
|
|
.exo-econ__panel-title i{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:17px}
|
|
.exo-econ__panel--loss .exo-econ__panel-title{color:#fff}.exo-econ__panel--loss .exo-econ__panel-title i{color:#FFD7D9;background:rgba(240,101,107,.16)}
|
|
.exo-econ__panel--gain .exo-econ__panel-title{color:var(--ee-navy)}.exo-econ__panel--gain .exo-econ__panel-title i{color:#008F84;background:var(--ee-ice)}
|
|
.exo-econ__list{display:grid;gap:9px}
|
|
.exo-econ__item{display:grid;grid-template-columns:34px 1fr;gap:11px;align-items:start;padding:13px;border-radius:16px}
|
|
.exo-econ__panel--loss .exo-econ__item{border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.045)}
|
|
.exo-econ__panel--gain .exo-econ__item{border:1px solid rgba(10,37,64,.095);background:linear-gradient(180deg,#fff,#F7FBFB)}
|
|
.exo-econ__item b{width:28px;height:28px;border-radius:10px;display:grid;place-items:center;font-size:11px}
|
|
.exo-econ__panel--loss .exo-econ__item b{color:#FFD7D9;background:rgba(240,101,107,.16)}
|
|
.exo-econ__panel--gain .exo-econ__item b{color:#008F84;background:var(--ee-ice)}
|
|
.exo-econ__item strong{display:block;margin:1px 0 4px;font-size:14px;line-height:1.25}
|
|
.exo-econ__item span{display:block;font-size:11px;line-height:1.43}
|
|
.exo-econ__panel--loss .exo-econ__item span{color:rgba(255,255,255,.65)}
|
|
.exo-econ__panel--gain .exo-econ__item span{color:var(--ee-muted)}
|
|
.exo-econ__bridge{position:relative;z-index:1;margin:14px 0;padding:16px 18px;border-radius:19px;border:1px solid rgba(0,196,180,.28);background:linear-gradient(115deg,rgba(0,196,180,.12),rgba(255,255,255,.94));display:grid;gap:10px}
|
|
.exo-econ__bridge strong{color:var(--ee-navy);font-size:16px;line-height:1.25}
|
|
.exo-econ__bridge p{margin:0;color:var(--ee-muted);font-size:11px;line-height:1.5}
|
|
.exo-econ__ops{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
|
|
.exo-econ__op{padding:11px 12px;border-radius:14px;background:#fff;border:1px solid rgba(0,196,180,.22)}
|
|
.exo-econ__op b{display:block;color:#00A99A;font-size:17px;line-height:1.05}.exo-econ__op span{display:block;margin-top:4px;color:var(--ee-muted);font-size:9px;line-height:1.25}
|
|
.exo-econ__calc{position:relative;z-index:1;margin-top:14px;padding:22px;border-radius:25px;color:#fff;background:radial-gradient(circle at 90% 0%,rgba(0,196,180,.25),transparent 34%),linear-gradient(135deg,var(--ee-navy),var(--ee-deep));box-shadow:0 25px 70px rgba(4,25,41,.18)}
|
|
.exo-econ__calc-head{display:grid;gap:6px;margin-bottom:17px}.exo-econ__calc-head span{color:var(--ee-teal-2);font-size:10px;font-weight:850;letter-spacing:.09em;text-transform:uppercase}.exo-econ__calc-head h3{margin:0;color:#fff;font-size:22px;line-height:1.15}.exo-econ__calc-head p{margin:0;color:rgba(255,255,255,.58);font-size:11px;line-height:1.45}
|
|
.exo-econ__calc-grid{display:grid;gap:13px}
|
|
.exo-econ__fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
|
|
.exo-econ__field{display:grid;gap:6px;min-width:0}.exo-econ__field label{color:rgba(255,255,255,.72);font-size:10px;font-weight:760}.exo-econ__field input{width:100%;min-width:0;height:48px;padding:0 13px;border-radius:13px;border:1px solid rgba(255,255,255,.17);outline:none;color:#fff;background:rgba(255,255,255,.075);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums}.exo-econ__field input::placeholder{color:rgba(255,255,255,.28)}.exo-econ__field input:focus{border-color:var(--ee-teal);box-shadow:0 0 0 3px rgba(0,196,180,.13)}
|
|
.exo-econ__results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.exo-econ__result{min-width:0;padding:15px;border-radius:16px;border:1px solid rgba(0,196,180,.28);background:rgba(0,196,180,.09)}.exo-econ__result span{display:block;color:rgba(255,255,255,.56);font-size:9px;text-transform:uppercase;letter-spacing:.055em}.exo-econ__result strong{display:block;margin-top:6px;color:var(--ee-teal-2);font-size:clamp(19px,3vw,29px);line-height:1.05;letter-spacing:-.035em;white-space:nowrap;font-variant-numeric:tabular-nums}.exo-econ__result small{display:block;margin-top:4px;color:rgba(255,255,255,.48);font-size:9px;line-height:1.3}
|
|
.exo-econ__disclaimer{margin:13px 0 0;color:rgba(255,255,255,.43);font-size:9px;line-height:1.45}
|
|
@media(min-width:640px){.exo-econ__metrics{grid-template-columns:repeat(4,minmax(0,1fr))}.exo-econ__ops{grid-template-columns:repeat(4,minmax(0,1fr))}.exo-econ__fields{grid-template-columns:repeat(3,minmax(0,1fr))}}
|
|
@media(min-width:900px){.exo-econ__compare{grid-template-columns:repeat(2,minmax(0,1fr))}.exo-econ__panel{padding:27px}.exo-econ__calc{padding:28px}.exo-econ__calc-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end}.exo-econ__results{align-self:stretch}.exo-econ__result{display:flex;flex-direction:column;justify-content:center}}
|
|
@media(max-width:480px){.exo-econ__head h2{font-size:34px}.exo-econ__metric{padding:15px 13px}.exo-econ__panel{padding:18px}.exo-econ__fields,.exo-econ__results{grid-template-columns:1fr}.exo-econ__result strong{white-space:normal}.exo-econ__ops{grid-template-columns:1fr 1fr}}
|
|
|
|
|
|
/* v6 typography refinement */
|
|
#formats .section-head h2{font-size:clamp(28px,3.25vw,48px)!important;line-height:1.06!important;letter-spacing:-.025em!important;max-width:760px}
|
|
@media(max-width:760px){#formats .section-head h2{font-size:clamp(26px,8vw,36px)!important;line-height:1.08!important}}
|
|
|
|
|
|
/* v8: visual QA + anchor/nav refinement */
|
|
section[id]{scroll-margin-top:96px}
|
|
.cta-section .lead{color:rgba(255,255,255,.76)}
|
|
@media(max-width:620px){
|
|
section[id]{scroll-margin-top:82px}
|
|
h1{font-size:clamp(36px,10vw,40px);line-height:1.01;letter-spacing:-.045em}
|
|
h2{font-size:clamp(29px,8.3vw,33px);line-height:1.06;letter-spacing:-.035em}
|
|
.hero__subtitle{font-size:18px;line-height:1.46}
|
|
#formats .section-head h2{font-size:clamp(29px,8.3vw,33px)!important;line-height:1.06!important;letter-spacing:-.035em!important}
|
|
.equipment-shell .section-head h2{font-size:clamp(29px,8.3vw,33px);line-height:1.06}
|
|
.exo-econ__head h2{font-size:32px;line-height:1.04;letter-spacing:-.038em}
|
|
.cta-copy h2{font-size:34px;line-height:1.04;letter-spacing:-.035em}
|
|
.lead{font-size:17px;line-height:1.52}
|
|
}
|
|
@media(max-width:380px){
|
|
.brand .exo-master-logo--header{width:132px!important}
|
|
.btn--header{padding-inline:13px;font-size:12px}
|
|
.header__actions{gap:5px}
|
|
.hero-fact{grid-template-columns:minmax(105px,auto) 1fr}
|
|
.hero-fact strong{font-size:17px}
|
|
}
|
|
|
|
|
|
/* === EXO callback modal === */
|
|
body.exo-callback-open{overflow:hidden}
|
|
.exo-callback{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:20px}
|
|
.exo-callback.is-open{display:flex}
|
|
.exo-callback__backdrop{position:absolute;inset:0;background:rgba(3,18,31,.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
|
|
.exo-callback__dialog{position:relative;width:min(100%,460px);max-height:calc(100svh - 32px);overflow:auto;padding:30px;border:1px solid rgba(10,37,64,.10);border-radius:26px;background:#fff;color:#0A2540;box-shadow:0 34px 100px rgba(2,20,34,.30)}
|
|
.exo-callback__close{position:absolute;top:14px;right:14px;width:36px;height:36px;display:grid;place-items:center;border:1px solid rgba(10,37,64,.10);border-radius:50%;background:#fff;color:#61798B;font-size:24px;line-height:1;cursor:pointer;transition:.2s ease}
|
|
.exo-callback__close:hover{color:#0A2540;border-color:rgba(10,37,64,.25);transform:rotate(3deg)}
|
|
.exo-callback__eyebrow{margin:0 46px 10px 0;color:#00AFA2;font-size:11px;font-weight:850;letter-spacing:.13em;text-transform:uppercase}
|
|
.exo-callback__dialog h2{margin:0 46px 10px 0;font-size:clamp(27px,5vw,34px);line-height:1.04;letter-spacing:-.035em}
|
|
.exo-callback__intro{margin:0 0 22px;color:#61798B;font-size:14px;line-height:1.55}
|
|
.exo-callback__intro a{color:#0A2540;font-weight:800;text-decoration:underline;text-decoration-color:rgba(0,196,180,.45);text-underline-offset:3px}
|
|
.exo-callback__field{display:grid;gap:7px;margin-bottom:14px}
|
|
.exo-callback__field label{font-size:12px;font-weight:800;color:#0A2540}
|
|
.exo-callback__field input{width:100%;height:50px;padding:0 14px;border:1px solid rgba(10,37,64,.14);border-radius:13px;background:#F7FAFB;color:#0A2540;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
|
|
.exo-callback__field input::placeholder{color:#91A3AF}
|
|
.exo-callback__field input:focus{background:#fff;border-color:#00C4B4;box-shadow:0 0 0 4px rgba(0,196,180,.10)}
|
|
.exo-callback__consent{display:flex;align-items:flex-start;gap:9px;margin:4px 0 16px;color:#7B8D99;font-size:10px;line-height:1.45;cursor:pointer}
|
|
.exo-callback__consent input{width:15px;height:15px;margin:1px 0 0;accent-color:#00C4B4;flex:0 0 auto}
|
|
.exo-callback__submit{width:100%;min-height:52px;border:0;border-radius:999px;background:#00C4B4;color:#061B2F;font:800 14px/1 Inter,Manrope,"Segoe UI",Arial,sans-serif;cursor:pointer;box-shadow:0 12px 30px rgba(0,196,180,.22);transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
|
|
.exo-callback__submit:hover{transform:translateY(-1px);background:#3BE4D6;box-shadow:0 16px 36px rgba(0,196,180,.28)}
|
|
.exo-callback__submit:disabled{opacity:.62;cursor:wait;transform:none}
|
|
.exo-callback__status{display:none;margin:14px 0 0;padding:11px 12px;border-radius:11px;font-size:12px;line-height:1.45}
|
|
.exo-callback__status.is-show{display:block}
|
|
.exo-callback__status.is-success{color:#075B53;background:#E4FAF7;border:1px solid rgba(0,196,180,.22)}
|
|
.exo-callback__status.is-error{color:#8C2E2E;background:#FFF0F0;border:1px solid rgba(204,69,69,.18)}
|
|
@media(max-width:520px){
|
|
.exo-callback{padding:12px}
|
|
.exo-callback__dialog{padding:24px 18px 20px;border-radius:22px}
|
|
.exo-callback__dialog h2{font-size:27px}
|
|
.exo-callback__intro{font-size:13px}
|
|
}
|
|
|