1017 lines
20 KiB
CSS
1017 lines
20 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
.home-road-page-body {
|
|
margin: 0;
|
|
padding-top: 90px;
|
|
color: #fff;
|
|
background: #0f0f0f;
|
|
font-family: "PingFang SC", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
.home-road-page,
|
|
.home-road-page * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.home-road-page {
|
|
width: 100%;
|
|
padding: 36px 60px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.home-road-breadcrumb {
|
|
width: 100%;
|
|
height: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: rgba(255, 255, 255, 0.55);
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.home-road-breadcrumb a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: color 180ms ease;
|
|
}
|
|
|
|
.home-road-breadcrumb a:hover,
|
|
.home-road-breadcrumb a:focus-visible,
|
|
.home-road-breadcrumb [aria-current="page"] {
|
|
color: #ec237f;
|
|
}
|
|
|
|
.home-road-hero {
|
|
position: relative;
|
|
isolation: isolate;
|
|
width: 100%;
|
|
height: 560px;
|
|
padding: 34px 48px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 36px;
|
|
overflow: hidden;
|
|
background-color: #000;
|
|
background-image: url("/static/images/figma-home-road/hero-background.png?v=2");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.home-road-official {
|
|
padding: 8px 16px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #ec237f;
|
|
background: rgba(255, 74, 74, 0.08);
|
|
border: 1px solid #ec237f;
|
|
border-radius: 12px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.home-road-official img {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.home-road-hero-logo {
|
|
width: 366px;
|
|
height: 114px;
|
|
display: block;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.home-road-hero h1,
|
|
.home-road-hero p {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.home-road-hero h1 {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
line-height: 32px;
|
|
}
|
|
|
|
.home-road-hero p {
|
|
color: rgba(255, 255, 255, 0.55);
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.home-road-hero-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.home-road-btn,
|
|
.home-road-small-btn,
|
|
.home-road-save-btn {
|
|
appearance: none;
|
|
border: 0;
|
|
font-family: inherit;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
|
|
}
|
|
|
|
.home-road-btn {
|
|
min-width: 144px;
|
|
padding: 14px 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
border-radius: 999px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.home-road-btn--primary,
|
|
.home-road-small-btn--primary {
|
|
background: #ec237f;
|
|
}
|
|
|
|
.home-road-btn--secondary {
|
|
background: #1a1a1a;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.home-road-btn:hover,
|
|
.home-road-btn:focus-visible,
|
|
.home-road-small-btn:hover,
|
|
.home-road-small-btn:focus-visible,
|
|
.home-road-save-btn:hover,
|
|
.home-road-save-btn:focus-visible {
|
|
transform: translateY(-1px);
|
|
border-color: #ec237f;
|
|
box-shadow: 0 0 0 1px rgba(236, 35, 127, 0.28);
|
|
}
|
|
|
|
.home-road-panel {
|
|
width: 100%;
|
|
padding: 30px 34px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
background: #282828;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.home-road-routes {
|
|
padding: 34px;
|
|
}
|
|
|
|
.home-road-permanent,
|
|
.home-road-faq {
|
|
gap: 14px;
|
|
}
|
|
|
|
.home-road-faq {
|
|
gap: 12px;
|
|
}
|
|
|
|
.home-road-section-heading {
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.home-road-section-heading > img {
|
|
width: 48px;
|
|
height: 48px;
|
|
display: block;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.home-road-section-heading h2,
|
|
.home-road-faq > h2 {
|
|
margin: 0;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
line-height: 32px;
|
|
}
|
|
|
|
.home-road-section-heading > span {
|
|
color: #ec237f;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.home-road-section-desc {
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.55);
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.home-road-route-grid,
|
|
.home-road-contact-grid,
|
|
.home-road-step-grid,
|
|
.home-road-device-grid {
|
|
width: 100%;
|
|
display: grid;
|
|
gap: 16px;
|
|
}
|
|
|
|
.home-road-route-grid,
|
|
.home-road-step-grid,
|
|
.home-road-device-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.home-road-route-grid {
|
|
gap: 18px;
|
|
}
|
|
|
|
.home-road-contact-grid {
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
}
|
|
|
|
.home-road-route-card,
|
|
.home-road-contact-card,
|
|
.home-road-step-grid article,
|
|
.home-road-device-grid article,
|
|
.home-road-faq-list article {
|
|
min-width: 0;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.home-road-route-card {
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.home-road-route-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.home-road-route-head h3,
|
|
.home-road-contact-card h3,
|
|
.home-road-step-grid h3,
|
|
.home-road-device-grid h3,
|
|
.home-road-faq-list h3 {
|
|
margin: 0;
|
|
color: #fff;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.home-road-route-head span {
|
|
flex: 0 0 auto;
|
|
color: #12d18e;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.home-road-route-url {
|
|
overflow: hidden;
|
|
color: #fff;
|
|
font-size: 24px;
|
|
line-height: 32px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.home-road-route-actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.home-road-small-btn {
|
|
min-width: 104px;
|
|
padding: 10px 22px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 999px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.home-road-small-btn--primary {
|
|
border-color: transparent;
|
|
}
|
|
|
|
.home-road-permanent-list,
|
|
.home-road-faq-list {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
.home-road-permanent-row {
|
|
width: 100%;
|
|
height: 76px;
|
|
padding: 0 22px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 20px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.home-road-permanent-copy {
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: 190px minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.home-road-permanent-copy span {
|
|
color: rgba(255, 255, 255, 0.55);
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.home-road-permanent-copy strong {
|
|
overflow: hidden;
|
|
color: #fff;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
line-height: 28px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.home-road-save-btn {
|
|
flex: 0 0 auto;
|
|
padding: 10px 20px;
|
|
color: #fff;
|
|
background: #1a1a1a;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 999px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.home-road-contact-card {
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
transition: border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
|
|
}
|
|
|
|
.home-road-contact-card:hover,
|
|
.home-road-contact-card:focus-visible {
|
|
border-color: rgba(236, 35, 127, 0.6);
|
|
background: rgba(236, 35, 127, 0.08);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.home-road-contact-card p,
|
|
.home-road-step-grid p,
|
|
.home-road-device-grid p,
|
|
.home-road-faq-list p {
|
|
margin: 0;
|
|
color: rgba(255, 255, 255, 0.55);
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.home-road-contact-card > span {
|
|
min-height: 44px;
|
|
padding: 12px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
overflow: hidden;
|
|
color: #fff;
|
|
background: #1a1a1a;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 999px;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.home-road-step-grid article {
|
|
padding: 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.home-road-step-grid h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.home-road-step-grid h3 b {
|
|
color: #ec237f;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.home-road-device-grid article {
|
|
padding: 26px 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.home-road-device-grid h3 {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.home-road-device-grid h3 img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.home-road-device-grid .home-road-good {
|
|
color: #0abe75;
|
|
}
|
|
|
|
.home-road-device-grid .home-road-warn {
|
|
color: #d4af37;
|
|
}
|
|
|
|
.home-road-faq-list article {
|
|
padding: 18px 22px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
.home-road-page-body .floating-action {
|
|
display: none;
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
body.home-road-page-body {
|
|
padding-top: min(90px, 4.6875vw);
|
|
}
|
|
|
|
.home-road-page-body .site-header,
|
|
.home-road-page-body .header-inner {
|
|
height: min(90px, 4.6875vw);
|
|
}
|
|
|
|
.home-road-page-body .header-inner {
|
|
width: min(1800px, calc(100% - 120px));
|
|
}
|
|
|
|
.home-road-page {
|
|
padding: min(36px, 1.875vw) 60px;
|
|
gap: min(24px, 1.25vw);
|
|
}
|
|
|
|
.home-road-breadcrumb {
|
|
height: min(24px, 1.25vw);
|
|
gap: min(6px, 0.3125vw);
|
|
font-size: clamp(12px, 0.9375vw, 18px);
|
|
line-height: clamp(18px, 1.25vw, 24px);
|
|
}
|
|
|
|
.home-road-hero {
|
|
height: min(560px, 29.166667vw);
|
|
padding: min(34px, 1.770833vw) min(48px, 2.5vw);
|
|
gap: min(36px, 1.875vw);
|
|
border-radius: min(24px, 1.25vw);
|
|
}
|
|
|
|
.home-road-official {
|
|
padding: min(8px, 0.416667vw) min(16px, 0.833333vw);
|
|
gap: min(8px, 0.416667vw);
|
|
border-radius: min(12px, 0.625vw);
|
|
font-size: clamp(11px, 0.729167vw, 14px);
|
|
line-height: clamp(16px, 1.041667vw, 20px);
|
|
}
|
|
|
|
.home-road-official img {
|
|
width: min(20px, 1.041667vw);
|
|
height: min(20px, 1.041667vw);
|
|
}
|
|
|
|
.home-road-hero-logo {
|
|
width: min(366px, 19.0625vw);
|
|
height: min(114px, 5.9375vw);
|
|
}
|
|
|
|
.home-road-hero h1,
|
|
.home-road-section-heading h2,
|
|
.home-road-faq > h2 {
|
|
font-size: clamp(16px, 1.25vw, 24px);
|
|
line-height: clamp(22px, 1.666667vw, 32px);
|
|
}
|
|
|
|
.home-road-hero p {
|
|
font-size: clamp(12px, 0.9375vw, 18px);
|
|
line-height: clamp(18px, 1.25vw, 24px);
|
|
}
|
|
|
|
.home-road-hero-actions {
|
|
gap: min(16px, 0.833333vw);
|
|
}
|
|
|
|
.home-road-btn {
|
|
min-width: min(144px, 7.5vw);
|
|
padding: min(14px, 0.729167vw) min(28px, 1.458333vw);
|
|
font-size: clamp(12px, 0.833333vw, 16px);
|
|
line-height: clamp(18px, 1.145833vw, 22px);
|
|
}
|
|
|
|
.home-road-panel {
|
|
padding: min(30px, 1.5625vw) min(34px, 1.770833vw);
|
|
gap: min(18px, 0.9375vw);
|
|
border-radius: min(20px, 1.041667vw);
|
|
}
|
|
|
|
.home-road-routes {
|
|
padding: min(34px, 1.770833vw);
|
|
}
|
|
|
|
.home-road-permanent {
|
|
gap: min(14px, 0.729167vw);
|
|
}
|
|
|
|
.home-road-faq {
|
|
gap: min(12px, 0.625vw);
|
|
}
|
|
|
|
.home-road-section-heading {
|
|
gap: min(12px, 0.625vw);
|
|
}
|
|
|
|
.home-road-section-heading > img {
|
|
width: min(48px, 2.5vw);
|
|
height: min(48px, 2.5vw);
|
|
}
|
|
|
|
.home-road-section-heading > span,
|
|
.home-road-contact-card p,
|
|
.home-road-step-grid p,
|
|
.home-road-device-grid p,
|
|
.home-road-faq-list p {
|
|
font-size: clamp(11px, 0.729167vw, 14px);
|
|
line-height: clamp(16px, 1.041667vw, 20px);
|
|
}
|
|
|
|
.home-road-section-desc {
|
|
font-size: clamp(12px, 0.833333vw, 16px);
|
|
line-height: clamp(18px, 1.145833vw, 22px);
|
|
}
|
|
|
|
.home-road-route-grid {
|
|
gap: min(18px, 0.9375vw);
|
|
}
|
|
|
|
.home-road-contact-grid,
|
|
.home-road-step-grid,
|
|
.home-road-device-grid {
|
|
gap: min(16px, 0.833333vw);
|
|
}
|
|
|
|
.home-road-route-card,
|
|
.home-road-contact-card,
|
|
.home-road-step-grid article,
|
|
.home-road-device-grid article {
|
|
border-radius: min(16px, 0.833333vw);
|
|
}
|
|
|
|
.home-road-route-card {
|
|
padding: min(24px, 1.25vw);
|
|
gap: min(18px, 0.9375vw);
|
|
}
|
|
|
|
.home-road-route-head h3,
|
|
.home-road-contact-card h3,
|
|
.home-road-step-grid h3,
|
|
.home-road-device-grid h3,
|
|
.home-road-faq-list h3 {
|
|
font-size: clamp(12px, 0.9375vw, 18px);
|
|
line-height: clamp(18px, 1.25vw, 24px);
|
|
}
|
|
|
|
.home-road-route-head span,
|
|
.home-road-small-btn,
|
|
.home-road-permanent-copy span,
|
|
.home-road-save-btn,
|
|
.home-road-contact-card > span {
|
|
font-size: clamp(11px, 0.729167vw, 14px);
|
|
line-height: clamp(16px, 1.041667vw, 20px);
|
|
}
|
|
|
|
.home-road-route-url {
|
|
font-size: clamp(16px, 1.25vw, 24px);
|
|
line-height: clamp(22px, 1.666667vw, 32px);
|
|
}
|
|
|
|
.home-road-route-actions {
|
|
gap: min(12px, 0.625vw);
|
|
}
|
|
|
|
.home-road-small-btn {
|
|
min-width: min(104px, 5.416667vw);
|
|
padding: min(10px, 0.520833vw) min(22px, 1.145833vw);
|
|
}
|
|
|
|
.home-road-permanent-list,
|
|
.home-road-faq-list {
|
|
gap: min(10px, 0.520833vw);
|
|
}
|
|
|
|
.home-road-permanent-row {
|
|
height: min(76px, 3.958333vw);
|
|
padding: 0 min(22px, 1.145833vw);
|
|
gap: min(20px, 1.041667vw);
|
|
border-radius: min(14px, 0.729167vw);
|
|
}
|
|
|
|
.home-road-permanent-copy {
|
|
grid-template-columns: min(190px, 9.895833vw) minmax(0, 1fr);
|
|
gap: min(20px, 1.041667vw);
|
|
}
|
|
|
|
.home-road-permanent-copy strong {
|
|
font-size: clamp(14px, 1.041667vw, 20px);
|
|
line-height: clamp(20px, 1.458333vw, 28px);
|
|
}
|
|
|
|
.home-road-save-btn {
|
|
padding: min(10px, 0.520833vw) min(20px, 1.041667vw);
|
|
}
|
|
|
|
.home-road-contact-card {
|
|
padding: min(24px, 1.25vw);
|
|
gap: min(14px, 0.729167vw);
|
|
}
|
|
|
|
.home-road-contact-card > span {
|
|
min-height: min(44px, 2.291667vw);
|
|
padding: min(12px, 0.625vw) min(16px, 0.833333vw);
|
|
}
|
|
|
|
.home-road-step-grid article {
|
|
padding: min(24px, 1.25vw);
|
|
gap: min(16px, 0.833333vw);
|
|
}
|
|
|
|
.home-road-step-grid h3 {
|
|
gap: min(14px, 0.729167vw);
|
|
}
|
|
|
|
.home-road-device-grid article {
|
|
padding: min(26px, 1.354167vw) min(24px, 1.25vw);
|
|
gap: min(18px, 0.9375vw);
|
|
}
|
|
|
|
.home-road-device-grid h3 {
|
|
gap: min(8px, 0.416667vw);
|
|
}
|
|
|
|
.home-road-device-grid h3 img {
|
|
width: min(24px, 1.25vw);
|
|
height: min(24px, 1.25vw);
|
|
}
|
|
|
|
.home-road-faq-list article {
|
|
padding: min(18px, 0.9375vw) min(22px, 1.145833vw);
|
|
gap: min(10px, 0.520833vw);
|
|
border-radius: min(14px, 0.729167vw);
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) and (max-width: 1023px) {
|
|
.home-road-page-body {
|
|
padding-top: 72px;
|
|
}
|
|
|
|
.home-road-page {
|
|
padding: 24px;
|
|
}
|
|
|
|
.home-road-route-grid,
|
|
.home-road-step-grid,
|
|
.home-road-device-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.home-road-contact-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
body.home-road-page-body {
|
|
--site-shell-gutter: 16px;
|
|
--site-footer-margin-top: 18px;
|
|
padding-top: calc(48px + env(safe-area-inset-top, 0px));
|
|
}
|
|
|
|
.home-road-page-body .site-header {
|
|
top: env(safe-area-inset-top, 0px);
|
|
height: 48px;
|
|
}
|
|
|
|
.home-road-page {
|
|
padding: 12px 16px 0;
|
|
gap: 18px;
|
|
}
|
|
|
|
.home-road-breadcrumb {
|
|
height: 18px;
|
|
gap: 4px;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.home-road-hero {
|
|
height: 420px;
|
|
padding: 28px 24px;
|
|
gap: 24px;
|
|
border-radius: 24px;
|
|
}
|
|
|
|
.home-road-hero {
|
|
background-image: url("/static/images/figma-home-road/hero-background-mobile.png?v=1");
|
|
background-position: center;
|
|
background-size: 100% 100%;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.home-road-official {
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.home-road-hero-logo {
|
|
width: 183px;
|
|
height: 57px;
|
|
}
|
|
|
|
.home-road-hero h1 {
|
|
width: 100%;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.home-road-hero p {
|
|
width: 100%;
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.home-road-hero-actions {
|
|
width: 100%;
|
|
gap: 10px;
|
|
}
|
|
|
|
.home-road-btn {
|
|
min-width: 0;
|
|
padding: 14px 12px;
|
|
flex: 1 1 0;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.home-road-panel,
|
|
.home-road-routes {
|
|
padding: 24px 16px;
|
|
gap: 14px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.home-road-section-heading {
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.home-road-section-heading > img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.home-road-section-heading h2 {
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.home-road-section-heading > span {
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.home-road-section-desc {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.home-road-route-grid,
|
|
.home-road-contact-grid,
|
|
.home-road-step-grid,
|
|
.home-road-device-grid {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.home-road-route-card {
|
|
padding: 24px;
|
|
gap: 20px;
|
|
}
|
|
|
|
.home-road-route-head h3 {
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.home-road-route-head span {
|
|
color: #40e594;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.home-road-route-url {
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.home-road-route-actions {
|
|
width: 100%;
|
|
}
|
|
|
|
.home-road-small-btn {
|
|
min-width: 0;
|
|
padding: 10px 8px;
|
|
flex: 1 1 0;
|
|
}
|
|
|
|
.home-road-permanent-list {
|
|
gap: 12px;
|
|
}
|
|
|
|
.home-road-permanent-row {
|
|
height: auto;
|
|
padding: 24px;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
gap: 18px;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.home-road-permanent-copy {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: 18px;
|
|
}
|
|
|
|
.home-road-permanent-copy span {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.home-road-permanent-copy strong {
|
|
width: 100%;
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
}
|
|
|
|
.home-road-save-btn {
|
|
width: 100%;
|
|
padding: 10px 20px;
|
|
color: #ec237f;
|
|
background: #1a1a1a;
|
|
border-color: #ec237f;
|
|
}
|
|
|
|
.home-road-contact-card {
|
|
padding: 24px;
|
|
gap: 14px;
|
|
}
|
|
|
|
.home-road-contact-card h3,
|
|
.home-road-faq-list h3 {
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.home-road-contact-card p,
|
|
.home-road-faq-list p {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
height: 44px;
|
|
display: -webkit-box;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.home-road-contact-card > span {
|
|
min-height: 44px;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.home-road-step-grid article {
|
|
padding: 24px;
|
|
gap: 14px;
|
|
}
|
|
|
|
.home-road-step-grid h3 {
|
|
gap: 12px;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
}
|
|
|
|
.home-road-step-grid p {
|
|
font-size: 12px;
|
|
line-height: 18px;
|
|
}
|
|
|
|
.home-road-device-grid article {
|
|
padding: 24px;
|
|
gap: 14px;
|
|
}
|
|
|
|
.home-road-device-grid h3 {
|
|
font-size: 18px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.home-road-device-grid p {
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.home-road-faq > h2 {
|
|
font-size: 24px;
|
|
line-height: 32px;
|
|
}
|
|
|
|
.home-road-faq-list {
|
|
gap: 12px;
|
|
}
|
|
|
|
.home-road-faq-list article {
|
|
padding: 24px;
|
|
gap: 14px;
|
|
border-radius: 16px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 374px) {
|
|
.home-road-page {
|
|
padding-right: 14px;
|
|
padding-left: 14px;
|
|
}
|
|
|
|
body.home-road-page-body {
|
|
--site-shell-gutter: 14px;
|
|
}
|
|
|
|
.home-road-hero {
|
|
padding-right: 18px;
|
|
padding-left: 18px;
|
|
}
|
|
|
|
.home-road-official {
|
|
padding-right: 8px;
|
|
padding-left: 8px;
|
|
font-size: 11px;
|
|
}
|
|
}
|