/* ===================================================================== Bitech storefront — WinDOORS design system (huraga add-on) Ported from the Claude Design "Bitech" project (colors_and_type.css). Scoped to .storefront pages so the logged-in client area is untouched. Brand: #015EC2 · Fonts: Open Sans (body) + Nunito (headings) ===================================================================== */ /* Storefront is a LIGHT-only design (matches the Bitech mockup). Define tokens on :root AND directly on body.storefront so the values are pinned light even if huraga.js flips to dark. */ :root, body.storefront { --st-theme: #015EC2; --st-theme-rgb: 1, 94, 194; --st-theme-darken: #003f83; --st-ink: #111111; --st-ink-2: #666666; --st-border: rgba(0, 0, 0, 0.085); --st-surface: rgba(255, 255, 255, 0.88); --st-surface-solid:#ffffff; --st-grad-1: #00B9FF; --st-grad-2: #2253c3; --st-text-grad-1: #dd0093; --st-text-grad-2: #3f22c3; --st-green: #91C300; --st-red: #f03d4f; --st-yellow: #ffc107; --st-radius: 0.25rem; --st-pill: 30px; --st-shadow-card: 0 0.05rem 0.05rem rgba(0,0,0,0.025), 0 0.095rem 0.3rem rgba(0,0,0,0.065); --st-shadow-md: 0 4px 15px rgba(0,0,0,0.10); --st-blur: saturate(120%) blur(10px); --st-page-bg: #eef2f8; /* opaque light — must NOT be transparent, or a dark OS canvas shows through */ } /* ---------- Base (scoped to storefront) ---------- */ html:has(body.storefront) { color-scheme: light; background: var(--st-page-bg); } body.storefront { color-scheme: light; font-family: 'Open Sans', sans-serif; color: var(--st-ink); background: var(--st-page-bg) !important; } body.storefront::before { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(1200px 600px at 100% -10%, rgba(var(--st-theme-rgb), 0.10), transparent 60%), radial-gradient(1000px 500px at -10% 10%, rgba(0, 185, 255, 0.08), transparent 55%); } /* ---------- Datacenter hero/header band (uses the background photo) ---------- */ .st-hero-band, .st-page-band { position: relative; background: linear-gradient(135deg, rgba(2, 16, 43, 0.88), rgba(3, 42, 92, 0.78)), url('img/background.jpg') center center / cover no-repeat; } .st-hero-band .st-hero { padding-top: 64px; padding-bottom: 60px; } .st-hero-band h1, .st-hero-band .st-hero-sub { color: #fff !important; } .st-hero-band .st-eyebrow { background: rgba(255,255,255,0.16); color: #fff; } .st-hero-band .st-stat-label { color: rgba(255,255,255,0.85); } .st-hero-band a.st-btn-outline { color: #fff; border-color: rgba(255,255,255,0.85); } .st-hero-band a.st-btn-outline:hover { background: #fff; color: var(--st-theme); } /* Slim page-header band for inner pages */ .st-page-band { padding: 56px 0 28px; margin-bottom: 8px; } .st-page-band h1, .st-page-band .st-section-lead { color: #fff !important; } .st-page-band .st-eyebrow { background: rgba(255,255,255,0.16); color: #fff; } .st-page-band .st-head-rule { border-color: rgba(255,255,255,0.25); } .st-page-band .st-head-rule::before { background: #fff; } .st-page-band .st-chip { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.25); color: #fff; } .st-page-band .st-chip.active { background: #fff; color: var(--st-theme); border-color: #fff; } .storefront h1, .storefront h2, .storefront h3, .storefront h4, .storefront h5, .storefront h6 { font-family: 'Nunito', sans-serif; font-weight: 700; line-height: 1.15; color: var(--st-ink); margin: 0 0 .5rem; } .storefront p { color: var(--st-ink); } .storefront a { color: var(--st-theme); text-decoration: none; transition: color .35s ease; } .storefront a:hover { color: var(--st-theme-darken); } .st-muted { color: var(--st-ink-2) !important; } /* ---------- Layout ---------- */ .st-container { max-width: 1200px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } .st-section { padding: 50px 0 10px; } .st-section-lead { color: var(--st-ink-2); font-size: 16px; margin: 0 0 24px; max-width: 760px; } .st-narrow { max-width: 860px; } /* Section heading + accent rule */ .st-head-rule { border-bottom: 1px solid var(--st-border); position: relative; margin: 12px 0 32px; } .st-head-rule::before { content: ""; position: absolute; left: 0; top: -1px; width: 25px; height: 3px; background: var(--st-theme); } /* ---------- Promo bar ---------- */ .st-promo { background: linear-gradient(90deg, var(--st-grad-1), var(--st-grad-2)); color: #fff; text-align: center; padding: 8px 16px; font-size: 13px; } .st-promo strong { font-weight: 700; } /* ---------- Header ---------- */ .st-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.75); backdrop-filter: var(--st-blur); -webkit-backdrop-filter: var(--st-blur); border-bottom: 1px solid var(--st-border); } .st-header-inner { display: flex; align-items: center; gap: 28px; padding: 14px 24px; } .st-brand { display: flex; align-items: center; gap: 10px; } .st-brand img { height: 34px; width: auto; } .st-brand-text { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 22px; color: var(--st-ink); } .st-brand-dot { color: var(--st-theme); } .st-nav { display: flex; gap: 22px; font-size: 15px; flex: 1; } .st-nav a { color: var(--st-ink); padding: 4px 0; border-bottom: 3px solid transparent; } .st-nav a:hover { color: var(--st-theme); } .st-nav a.active { color: var(--st-theme); font-weight: 600; border-bottom-color: var(--st-theme); } .st-header-actions { display: flex; align-items: center; gap: 16px; } .st-cart { position: relative; color: var(--st-ink); font-size: 20px; } .st-cart .st-cart-badge { position: absolute; top: -6px; right: -10px; background: var(--st-red); color: #fff; font-size: 10px; font-weight: 700; border-radius: var(--st-pill); padding: 1px 5px; } .st-lang { font-size: 13px; color: var(--st-ink-2); } .st-lang strong { color: var(--st-theme); } .st-toggle { color: var(--st-ink); font-size: 18px; display: inline-flex; align-items: center; } /* ---------- Buttons ---------- */ .st-btn { display: inline-block; text-align: center; cursor: pointer; border-radius: var(--st-radius); font-weight: 600; font-size: 15px; padding: 10px 22px; transition: all .3s ease; border: 1px solid transparent; line-height: 1.3; } .st-btn-lg { padding: 12px 28px; font-size: 16px; } .st-btn-sm { padding: 7px 18px; font-size: 14px; } .st-btn-primary { background: var(--st-theme); color: #fff; border: 1px solid var(--st-theme); border-bottom: 3px solid var(--st-theme-darken); } .st-btn-primary:hover { background: var(--st-theme-darken); color: #fff; } .st-btn-outline { border: 1px solid var(--st-theme); color: var(--st-theme); background: transparent; } .st-btn-outline:hover { background: var(--st-theme); color: #fff; } .st-btn-light { background: #fff; color: var(--st-theme); border-bottom: 3px solid rgba(0,0,0,0.15); } .st-btn-light:hover { color: var(--st-theme-darken); } .st-btn-block { display: block; width: 100%; } /* Buttons are usually ; .storefront a wins on specificity, so re-assert button text colors */ .storefront a.st-btn-primary, .storefront a.st-btn-primary:hover, .storefront button.st-btn-primary { color: #fff; } .storefront a.st-btn-light, .storefront a.st-btn-light:hover { color: var(--st-theme); } .storefront a.st-btn-outline { color: var(--st-theme); } .storefront a.st-btn-outline:hover { color: #fff; } /* ---------- Cards ---------- */ .st-card { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius); padding: 24px; box-shadow: var(--st-shadow-card); -webkit-backdrop-filter: var(--st-blur); backdrop-filter: var(--st-blur); } a.st-card { display: block; color: var(--st-ink); } a.st-card:hover { border-color: var(--st-theme); color: var(--st-ink); } .st-card-flat { box-shadow: none; } .st-icon-box { width: 50px; height: 50px; border-radius: var(--st-radius); background: rgba(var(--st-theme-rgb), 0.15); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .st-icon-box i { font-size: 22px; color: var(--st-theme); } .st-icon-box.sm { width: 40px; height: 40px; margin-bottom: 14px; } .st-icon-box.sm i { font-size: 18px; } /* ---------- Grids ---------- */ .st-grid { display: grid; gap: 20px; } .st-grid-2 { grid-template-columns: repeat(2, 1fr); } .st-grid-3 { grid-template-columns: repeat(3, 1fr); } .st-grid-4 { grid-template-columns: repeat(4, 1fr); } /* ---------- Hero ---------- */ .st-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; padding: 72px 0 56px; } .st-eyebrow { display: inline-block; background: rgba(var(--st-theme-rgb), 0.15); color: var(--st-theme); font-size: 12px; font-weight: 700; letter-spacing: 1px; border-radius: var(--st-radius); padding: 5px 12px; margin-bottom: 18px; } .st-hero h1 { font-size: 44px; margin: 0 0 16px; } .st-hero-sub { font-size: 17px; color: var(--st-ink-2); margin: 0 0 28px; max-width: 520px; } .st-hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .st-stats { display: flex; gap: 36px; margin-top: 40px; flex-wrap: wrap; } .st-stat-num { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 28px; background: linear-gradient(90deg, var(--st-text-grad-1), var(--st-text-grad-2)); -webkit-background-clip: text; background-clip: text; color: transparent; } .st-stat-label { font-size: 13px; color: var(--st-ink-2); } .st-hero-card { background: radial-gradient(circle at 30% 20%, var(--st-grad-1), var(--st-grad-2)); border-radius: var(--st-radius); padding: 28px; color: #fff; box-shadow: var(--st-shadow-md); } .st-hero-card h4 { color: #fff; font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 17px; margin: 0; } .st-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .st-status-tile { background: rgba(255,255,255,0.12); border-radius: var(--st-radius); padding: 14px; } .st-status-tile .k { font-size: 12px; opacity: .8; } .st-status-tile .v { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 24px; } .st-dot { width: 9px; height: 9px; border-radius: var(--st-pill); background: var(--st-green); display: inline-block; } /* ---------- Pricing ---------- */ .st-price { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 28px; color: var(--st-theme); } .st-price-unit { color: var(--st-ink-2); font-size: 13px; } .st-badge-popular { position: absolute; top: -10px; right: 16px; background: var(--st-green); color: #fff; font-size: 11px; font-weight: 700; border-radius: var(--st-pill); padding: 3px 12px; } .st-spec { display: flex; flex-direction: column; gap: 9px; font-size: 14px; color: var(--st-ink); flex: 1; } .st-spec i { color: var(--st-theme); margin-right: 8px; } /* ---------- Chips / filters ---------- */ .st-chips { display: flex; gap: 10px; flex-wrap: wrap; } .st-chip { background: var(--st-surface); border: 1px solid var(--st-border); color: var(--st-ink); border-radius: var(--st-pill); padding: 8px 18px; font-size: 14px; } .st-chip.active { background: var(--st-theme); color: #fff; border-color: var(--st-theme); font-weight: 600; } /* ---------- Testimonials ---------- */ .st-stars { color: var(--st-yellow); font-size: 14px; margin-bottom: 12px; } .st-avatar { width: 38px; height: 38px; border-radius: var(--st-pill); object-fit: cover; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--st-theme-rgb), 0.15); color: var(--st-theme); font-weight: 700; font-family: 'Nunito', sans-serif; font-size: 15px; } .st-avatar.sm { width: 26px; height: 26px; font-size: 12px; } /* ---------- FAQ ---------- */ .st-faq { display: flex; flex-direction: column; gap: 10px; } .st-faq details { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius); padding: 16px 20px; } .st-faq summary { font-weight: 600; font-size: 15px; display: flex; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; } .st-faq summary::-webkit-details-marker { display: none; } .st-faq summary i { color: var(--st-theme); transition: transform .25s ease; } .st-faq details[open] summary i { transform: rotate(180deg); } .st-faq p { color: var(--st-ink-2); margin: 12px 0 0; font-size: 15px; } /* ---------- CTA band ---------- */ .st-cta { background: radial-gradient(circle at 20% 30%, var(--st-grad-1), var(--st-grad-2)); border-radius: var(--st-radius); padding: 44px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .st-cta h3 { color: #fff; font-size: 28px; margin: 0 0 8px; } .st-cta p { color: #fff; opacity: .9; margin: 0; font-size: 15px; } /* ---------- Blog ---------- */ .st-blog-featured, a.st-blog-featured { display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden; padding: 0; } .st-blog-featured .st-thumb { width: 100%; height: 100%; min-height: 320px; object-fit: cover; } .st-blog-featured .body { padding: 36px; display: flex; flex-direction: column; justify-content: center; } .st-blog-card, a.st-blog-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; } .st-blog-card > .st-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } .st-blog-card .body { padding: 24px; display: flex; flex-direction: column; flex: 1; } .st-blog-thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: radial-gradient(120% 120% at 0 0, rgba(var(--st-theme-rgb),.30), rgba(var(--st-theme-rgb),.05)); display: flex; align-items: center; justify-content: center; } .st-blog-thumb i { font-size: 2.5rem; color: var(--st-theme); opacity: .7; } .st-tag { font-size: 11px; font-weight: 700; border-radius: var(--st-radius); padding: 4px 10px; } .st-tag-blue { background: rgba(var(--st-theme-rgb),.15); color: var(--st-theme); } .st-tag-red { background: rgba(240,61,79,.15); color: var(--st-red); } .st-tag-green { background: rgba(145,195,0,.15); color: #6d9300; } /* ---------- Article ---------- */ .st-article img { max-width: 100%; height: auto; border-radius: var(--st-radius); } .st-article h2, .st-article h3 { margin-top: 1.6rem; } .st-article pre { background: rgba(var(--st-theme-rgb),.06); padding: 1rem; border-radius: var(--st-radius); overflow-x: auto; } .st-article code { background: rgba(var(--st-theme-rgb),.08); padding: .1rem .35rem; border-radius: 3px; } .st-article pre code { background: none; padding: 0; } /* ---------- Article page: header band + framed container ---------- */ .st-page-band-post { padding: 44px 0 30px; } .st-page-band-post .st-post-meta { display: flex; flex-wrap: wrap; gap: 16px; color: rgba(255,255,255,0.82); font-size: 14px; } .st-page-band-post .st-post-meta i { opacity: .85; } .st-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 14px; } .st-breadcrumb a { color: rgba(255,255,255,0.8); } .st-breadcrumb a:hover { color: #fff; } .st-breadcrumb span { color: #fff; font-weight: 600; } .st-breadcrumb i { font-size: 11px; color: rgba(255,255,255,0.5); } .st-article-frame { max-width: 880px; margin: 0 auto; padding: 0; overflow: hidden; } .st-article-cover { display: block; width: 100%; aspect-ratio: 16/7; object-fit: cover; } .st-article-inner { padding: 40px 44px 36px; } .st-article-lead { font-size: 18px; line-height: 1.7; color: var(--st-ink); font-weight: 500; margin: 0 0 22px; padding-bottom: 22px; border-bottom: 1px solid var(--st-border); } .st-article-inner .st-article { font-size: 16px; line-height: 1.8; } .st-article-hr { border: none; border-top: 1px solid var(--st-border); margin: 32px 0 24px; } /* ---------- Article page: 2-column layout (article + sidebar) ---------- */ .st-post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; align-items: start; } .st-post-layout .st-article-frame { max-width: none; margin: 0; } .st-post-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 20px; } .st-side-card { padding: 20px 20px 22px; } .st-side-title { font-size: 16px; margin: 0 0 14px; display: flex; align-items: center; gap: 8px; } .st-side-title i { color: var(--st-theme); } .st-side-cta { background: var(--st-theme); } .st-side-cta .st-side-title, .st-side-cta .st-side-title i, .st-side-cta p { color: #fff !important; } .st-side-cta .st-muted { color: rgba(255,255,255,0.9) !important; } /* Most-viewed list */ .st-poplist { display: flex; flex-direction: column; } .st-pop-item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--st-border); color: var(--st-ink); } .st-pop-item:first-child { border-top: none; padding-top: 2px; } .st-pop-rank { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: rgba(var(--st-theme-rgb),.10); color: var(--st-theme); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .st-pop-item:nth-child(1) .st-pop-rank { background: var(--st-theme); color: #fff; } .st-pop-thumb { flex: 0 0 auto; width: 56px; height: 42px; border-radius: 8px; object-fit: cover; } .st-pop-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .st-pop-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; } .st-pop-item:hover .st-pop-title { color: var(--st-theme); } .st-pop-meta { font-size: 12px; color: var(--st-ink-2); display: flex; align-items: center; gap: 5px; } /* Related posts */ .st-related { margin-top: 46px; } .st-related-title { font-size: 24px; margin: 0 0 4px; } /* ---------- Header nav dropdown (news categories) ---------- */ .st-nav-drop { position: relative; display: inline-flex; align-items: center; } .st-nav-toggle { display: inline-flex; align-items: center; gap: 5px; } .st-nav-toggle .st-caret { font-size: 11px; transition: transform .18s ease; } .st-nav-drop:hover .st-caret, .st-nav-drop:focus-within .st-caret { transform: rotate(180deg); } .st-submenu { position: absolute; top: 100%; left: 0; margin-top: 10px; min-width: 240px; background: #fff; border: 1px solid var(--st-border); border-radius: var(--st-radius); box-shadow: 0 14px 34px rgba(2,16,43,0.16); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 80; } .st-nav-drop:hover .st-submenu, .st-nav-drop:focus-within .st-submenu { opacity: 1; visibility: visible; transform: translateY(0); } /* hover bridge so the menu doesn't close in the gap */ .st-submenu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .st-submenu a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--st-ink); border-bottom: none; } .st-submenu a i { color: var(--st-theme); font-size: 15px; width: 18px; text-align: center; } .st-submenu a:hover { background: rgba(var(--st-theme-rgb),.08); color: var(--st-theme); } .st-submenu-sep { height: 1px; background: var(--st-border); margin: 6px 8px; } /* ---------- Pager ---------- */ .st-pager { display: flex; justify-content: center; gap: 8px; margin-top: 36px; } .st-pager a, .st-pager span { min-width: 36px; height: 36px; padding: 0 8px; display: flex; align-items: center; justify-content: center; background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-radius); font-size: 14px; color: var(--st-ink); } .st-pager .active { background: var(--st-theme); color: #fff; border-color: var(--st-theme); font-weight: 600; } /* ---------- Footer ---------- */ .st-footer { background: rgba(255,255,255,0.75); backdrop-filter: var(--st-blur); -webkit-backdrop-filter: var(--st-blur); border-top: 1px solid var(--st-border); margin-top: 40px; } .st-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; padding: 44px 24px 28px; max-width: 1200px; margin: 0 auto; } .st-footer h6 { font-size: 14px; margin: 0 0 12px; } .st-footer .col-links { display: flex; flex-direction: column; gap: 8px; font-size: 13px; } .st-footer .col-links a, .st-footer .contact span { color: var(--st-ink-2); font-size: 13px; } .st-footer .col-links a:hover { color: var(--st-theme); } .st-footer .contact { display: flex; flex-direction: column; gap: 8px; } .st-footer .contact i { margin-right: 6px; color: var(--st-theme); } .st-footer-bottom { border-top: 1px solid var(--st-border); text-align: center; padding: 14px; font-size: 12px; color: var(--st-ink-2); } /* ---------- Responsive ---------- */ @media (max-width: 991.98px) { .st-hero { grid-template-columns: 1fr; gap: 28px; padding: 40px 0; } .st-hero h1 { font-size: 34px; } .st-grid-4 { grid-template-columns: repeat(2, 1fr); } .st-blog-featured, a.st-blog-featured { grid-template-columns: 1fr; } .st-footer-grid { grid-template-columns: 1fr 1fr; } .st-post-layout { grid-template-columns: 1fr; } .st-post-side { position: static; flex-direction: row; flex-wrap: wrap; } .st-post-side > .st-card { flex: 1 1 280px; } } @media (max-width: 767.98px) { .st-nav { display: none; } .st-grid-2, .st-grid-3, .st-grid-4 { grid-template-columns: 1fr; } .st-cta { flex-direction: column; text-align: center; align-items: stretch; } .st-footer-grid { grid-template-columns: 1fr; } .st-article-inner { padding: 26px 22px 28px; } .st-article-cover { aspect-ratio: 16/9; } .st-post-side { flex-direction: column; } } /* ---------- Checkout / order flow (FossBilling Orderbutton in Bitech shell) ---------- */ body.storefront { --bs-primary: #015EC2; --bs-primary-rgb: 1, 94, 194; --bs-link-color: #015EC2; --bs-link-color-rgb: 1, 94, 194; --bs-link-hover-color: #003f83; --bs-border-radius: .25rem; } .st-checkout .accordion { --bs-accordion-border-color: var(--st-border); } .st-checkout .accordion-item { border-color: var(--st-border); background: transparent; } .st-checkout .accordion-button { font-family: 'Nunito', sans-serif; font-weight: 600; color: var(--st-ink); } .st-checkout .accordion-button:not(.collapsed) { background: rgba(var(--st-theme-rgb), .08); color: var(--st-theme); box-shadow: none; } .st-checkout .accordion-button:focus { box-shadow: none; border-color: var(--st-border); } .st-checkout .btn-primary, .st-checkout .order-button { background: var(--st-theme); border-color: var(--st-theme); border-bottom: 3px solid var(--st-theme-darken); font-weight: 600; } .st-checkout .btn-primary:hover { background: var(--st-theme-darken); border-color: var(--st-theme-darken); } .st-checkout .btn-big { padding: 11px 26px; } .st-checkout .form-control, .st-checkout .form-select, .st-checkout .ts-control { border-radius: .25rem; } .st-checkout .box.pricing, .st-checkout .block.pricing { border-radius: .25rem; } /* ---------- Checkout: more compact typography ---------- */ .st-checkout { font-size: 14px; } .st-checkout .accordion-button { font-size: 15px; padding-top: .85rem; padding-bottom: .85rem; } .st-checkout h3, .st-checkout .well h3 { font-size: 21px; } .st-checkout h4 { font-size: 16px; } .st-checkout h5 { font-size: 15px; } .st-checkout .well > h3 + * { font-size: 14px; } .st-checkout .form-select, .st-checkout .form-control { font-size: 14px; } .st-checkout label, .st-checkout span, .st-checkout p { font-size: 14px; }