ncue/ncue_academy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve mobile spacing and CTA typography

Browse Source
This commit is contained in:
dsyoon
2026-01-03 17:02:32 +09:00
parent 6aaa8bc9c5
commit 856fb354cf
1 changed files with 90 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
css/ncue.css
View File

@@ -139,6 +139,27 @@ h1,h2,h3,h4{
color: #0b1220; 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 / slider: add cinematic overlay for better text contrast */
#featured{ #featured{
position: relative; position: relative;
@@ -210,6 +231,9 @@ section.callaction{
border: 1px solid rgba(15,23,42,0.06); border: 1px solid rgba(15,23,42,0.06);
overflow: hidden; overflow: hidden;
} }
.big-cta .cta-text{
padding: 22px 22px 18px;
}
.big-cta:before{ .big-cta:before{
content:""; content:"";
position:absolute; position:absolute;
@@ -240,6 +264,47 @@ section.callaction.callaction-home .row{
margin-bottom: 0 !important; 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 */ /* Cards / boxes */
.box{ .box{
border-radius: var(--ncue-radius); border-radius: var(--ncue-radius);
@@ -272,6 +337,31 @@ section.callaction.callaction-home .row{
box-shadow: var(--ncue-shadow); 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 cards */
.pricing-box-alt{ .pricing-box-alt{
border-radius: var(--ncue-radius); border-radius: var(--ncue-radius);