Improve mobile spacing and CTA typography
This commit is contained in:
90
css/ncue.css
90
css/ncue.css
@@ -139,6 +139,27 @@ h1,h2,h3,h4{
|
||||
color: #0b1220;
|
||||
}
|
||||
|
||||
/* Mobile typography defaults: avoid awkward KR line breaks and restore breathing room */
|
||||
@media (max-width: 767px){
|
||||
h1,h2,h3,h4,h5,h6{
|
||||
word-break: keep-all;
|
||||
overflow-wrap: normal;
|
||||
hyphens: none;
|
||||
}
|
||||
p, li{
|
||||
/* Desktop can be bolder; mobile needs slightly lighter weight for readability */
|
||||
font-weight: 600;
|
||||
}
|
||||
.container{
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.row,.row-fluid,
|
||||
.row .row,.row-fluid .row-fluid{
|
||||
margin-bottom: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Featured / slider: add cinematic overlay for better text contrast */
|
||||
#featured{
|
||||
position: relative;
|
||||
@@ -210,6 +231,9 @@ section.callaction{
|
||||
border: 1px solid rgba(15,23,42,0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
.big-cta .cta-text{
|
||||
padding: 22px 22px 18px;
|
||||
}
|
||||
.big-cta:before{
|
||||
content:"";
|
||||
position:absolute;
|
||||
@@ -240,6 +264,47 @@ section.callaction.callaction-home .row{
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
/* Home CTA: mobile-friendly spacing, typography, and button layout */
|
||||
@media (max-width: 767px){
|
||||
section.callaction.callaction-home{
|
||||
padding-top: 16px;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
section.callaction.callaction-home .big-cta{
|
||||
margin-top: 8px;
|
||||
padding-bottom: 14px;
|
||||
}
|
||||
section.callaction.callaction-home .big-cta .cta-text{
|
||||
padding: 18px 16px 14px;
|
||||
}
|
||||
section.callaction.callaction-home .big-cta .cta-text h2{
|
||||
margin: 0 0 10px;
|
||||
font-size: 28px;
|
||||
line-height: 1.18;
|
||||
letter-spacing: -0.8px;
|
||||
text-align: center;
|
||||
}
|
||||
section.callaction.callaction-home .big-cta .cta-text p{
|
||||
margin: 10px 0 0;
|
||||
line-height: 1.7;
|
||||
text-align: left;
|
||||
color: rgba(15, 23, 42, 0.86);
|
||||
}
|
||||
section.callaction.callaction-home .big-cta .cta-text p:last-of-type{
|
||||
margin-top: 14px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
}
|
||||
section.callaction.callaction-home .big-cta .cta-text p:last-of-type .btn{
|
||||
flex: 1 1 140px;
|
||||
max-width: 220px;
|
||||
padding: 12px 14px;
|
||||
font-weight: 900;
|
||||
}
|
||||
}
|
||||
|
||||
/* Cards / boxes */
|
||||
.box{
|
||||
border-radius: var(--ncue-radius);
|
||||
@@ -272,6 +337,31 @@ section.callaction.callaction-home .row{
|
||||
box-shadow: var(--ncue-shadow);
|
||||
}
|
||||
|
||||
@media (max-width: 767px){
|
||||
/* Mobile cards: a bit more padding + clearer tap targets */
|
||||
#content{
|
||||
padding: 28px 0 24px;
|
||||
}
|
||||
.box .box-gray{
|
||||
padding: 18px 16px 16px !important;
|
||||
}
|
||||
.box .box-gray h4{
|
||||
margin-bottom: 12px;
|
||||
line-height: 1.25;
|
||||
text-align: center;
|
||||
}
|
||||
.box .icon{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.box-bottom{
|
||||
padding: 14px 0 !important;
|
||||
}
|
||||
.box-bottom a{
|
||||
display: inline-block;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Pricing cards */
|
||||
.pricing-box-alt{
|
||||
border-radius: var(--ncue-radius);
|
||||
|
||||
Reference in New Issue
Block a user