Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 3f69f61

Browse files
N6REJN6REJ
committed
Update newborn template styling with improved color scheme and layout adjustments
1 parent 425be08 commit 3f69f61

File tree

1 file changed

+46
-41
lines changed

1 file changed

+46
-41
lines changed

‎css/newborn.css‎

Lines changed: 46 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
--bears-num-columns: 3;
1616
--bears-column-margin-y: 10px;
1717
--bears-column-margin-x: 0;
18-
--bears-header-height: 200px;
18+
--bears-header-height: calc(1.5 * var(--bears-header-icon-size));
1919

2020
/* Typography */
2121
--bears-title-font-family: 'Open Sans', sans-serif;
@@ -36,7 +36,7 @@
3636

3737
/* Colors - Text */
3838
--bears-title-color: #888;
39-
--bears-price-color: #333333;
39+
--bears-price-color: #48AAFF;
4040
--bears-subtitle-color: var(--bears-price-color);
4141
--bears-features-text-color: #1887fb;
4242
--bears-button-text-color: #1887fb;
@@ -45,35 +45,35 @@
4545
--bears-column-featured-background: #fff;
4646
--bears-header-featured-background: #fff;
4747
--bears-featured-title-color: #888;
48-
--bears-featured-price-color: #333;
48+
--bears-featured-price-color: #48AAFF;
4949
--bears-featured-features-text-color: #1887fb;
5050
--bears-featured-features-background-odd: #fff;
5151
--bears-featured-features-background-even: color-mix(in srgb, var(--bears-featured-features-background-odd) 100%, rgba(0, 0, 0, 0));
5252

5353
/* Colors - Buttons */
54-
--bears-button-background-color: #333333;
55-
--bears-button-hover-color: #555555;
56-
--bears-featured-button-background: #ffffff;
57-
--bears-featured-button-text-color: #222222;
54+
--bears-button-background-color: #fff;
55+
--bears-button-hover-color: #e1f1ff;
56+
--bears-featured-button-background: #48AAFF;
57+
--bears-featured-button-text-color: #fff;
5858

5959
/* Borders - Standard */
6060
--bears-border-style: solid;
61-
--bears-border-width: 2px;
62-
--bears-border-radius: 8px;
63-
--bears-border-color: #e0e0e0;
61+
--bears-border-width: 1px;
62+
--bears-border-radius: 0;
63+
--bears-border-color: rgba(0, 0, 0, 0.1);
6464
--bears-header-border: 1px solid rgba(0, 0, 0, .15);
6565

6666
/* Borders - Buttons */
67-
--bears-button-border-radius: 4px;
67+
--bears-button-border-radius: 0;
6868

6969
/* Borders - Featured */
70-
--bears-featured-border-radius: 8px;
71-
--bears-featured-border-width: 2px;
70+
--bears-featured-border-radius: 0;
71+
--bears-featured-border-width: 1px;
7272
--bears-featured-border-style: var(--bears-border-style);
73-
--bears-featured-border-color: rgba(255, 255, 255, 0.05);
73+
--bears-featured-border-color: rgba(0, 0, 0, 0.1);
7474

7575
/* Effects & Animation */
76-
--bears-accent-color: #333333;
76+
--bears-accent-color: #fff;
7777
--bears-featured-accent-color: #ffffff;
7878
--bears-transition-speed: 0.25s;
7979
--bears-scale-amount: 1.0;
@@ -85,7 +85,7 @@
8585
--bears-featured-header-icon-color: var(--bears-featured-price-color);
8686
--bears-features-icon-color: var(--bears-features-text-color);
8787
--bears-featured-features-icon-color: var(--bears-featured-features-text-color);
88-
--bears-header-icon-size: 24px;
88+
--bears-header-icon-size: 160px;
8989
}
9090

9191
/* Template-specific styles */
@@ -98,36 +98,41 @@
9898

9999
.template-newborn .bears_pricing_tables header {
100100
height: var(--bears-header-height);
101+
justify-content: flex-start;
102+
padding: 30px 0 20px 10px;
103+
margin-bottom: 30px;
101104
}
102105

103-
.template-newborn .bears_pricing_tables header .plan-icon {
106+
.template-newborn .bears_pricing_tables .plan.featured header {
107+
margin-bottom: 30px;
108+
}
109+
110+
.template-newborn .bears_pricing_tables .plan-title,
111+
.template-newborn .bears_pricing_tables .featured .plan-title {
104112
position: relative;
105-
width: 180px;
106-
height: 180px;
107-
border-radius: 50%;
108-
display: flex;
109-
align-items: center;
110-
justify-content: center;
111-
z-index: 1;
112-
background: white;
113+
margin: 30px 0;
114+
}
115+
116+
.template-newborn .bears_pricing_tables .plan-select a,
117+
.template-newborn .bears_pricing_tables .plan-select a.btn {
118+
border: var(--bears-border-width) var(--bears-border-style) #9dd1ff;
119+
border-radius: 10px;
120+
}
121+
122+
.template-newborn .bears_pricing_tables .featured .plan-select a,
123+
.template-newborn .bears_pricing_tables .featured .plan-select a.btn {
124+
color: #fff;
125+
}
126+
127+
.template-newborn .bears_pricing_tables .plan.featured .plan-cost {
128+
padding: 0;
113129
}
114130

115-
.template-newborn .bears_pricing_tables header .plan-icon::before {
116-
content: '';
117-
position: absolute;
118-
top: 50%;
119-
left: 50%;
120-
transform: translate(-50%, -50%);
121-
width: 80px;
122-
height: 80px;
123-
border-radius: 50%;
124-
background: rgba(51, 51, 51, 0.10); /* Single color ring */
125-
box-shadow: 0 0 16px 8px rgba(51, 51, 51, 0.18);
126-
z-index: 0;
131+
.template-newborn .bears_pricing_tables .plan-select {
132+
border-top: none;
127133
}
128134

129-
.template-newborn .bears_pricing_tables .plan-title {
130-
position: absolute;
131-
top: 165px;
132-
z-index: 2;
135+
.template-newborn .bears_pricing_tables .plan-features li,
136+
.template-newborn .bears_pricing_tables .featured .plan-features li {
137+
border: none;
133138
}

0 commit comments

Comments
 (0)