/* =====================================================================
Salama Hosting — site.css
Organized by topic (see the banner comments below) rather than by the
original file-concatenation history. Within each section, rules are
kept in their original relative order wherever more than one rule
touches the same selector, so the cascade result is unchanged from
before this reorganization — only the layout changed, not the CSS.
===================================================================== */
/* Brand font tags live in frontend/header.php's (a CSS
@import here would block parallel downloading of the rest of this file). */
@import url(./fonts.css);
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+HK:wght@100..900&display=swap');
/* ---------- Design tokens ---------- */
:root {
--sh-primary: #0c2f55;
--sh-primary-mid: #0f5e9d;
--sh-primary-light: #418fce;
--sh-primary-dark: #081f39;
--sh-accent: #FF6C2C;
--sh-accent-dark: #e85a1f;
--sh-red: #d64545;
--sh-red-dark: #b93a3a;
--sh-green: #1f9d55;
--sh-green-dark: #187d43;
--sh-bluenavy: #1c1370;
--sh-bluenavy-dark: #3222c5;
--sh-ink: #1e1d1c;
--sh-muted: #6c757d;
--sh-bg-soft: #f7f9fc;
--sh-border: #e9ecf1;
--sh-radius-sm: 8px;
--sh-radius: 12px;
--sh-radius-lg: 18px;
--sh-shadow-sm: 0 2px 8px rgba(12, 47, 85, 0.06);
--sh-shadow-md: 0 8px 24px rgba(12, 47, 85, 0.10);
--sh-shadow-lg: 0 16px 40px rgba(12, 47, 85, 0.14);
--sh-font-heading: "Noto Sans HK", "Segoe UI", sans-serif;
--sh-font-body: "Noto Sans HK", "Segoe UI", sans-serif;
/* Spacing scale */
--sh-space-1: 8px;
--sh-space-2: 12px;
--sh-space-3: 16px;
--sh-space-4: 24px;
--sh-space-5: 32px;
--sh-space-6: 48px;
--sh-space-7: 64px;
/* Type scale (desktop) */
--sh-h1-size: 48px;
--sh-h2-size: 36px;
--sh-h3-size: 28px;
--sh-h4-size: 22px;
--sh-body-size: 16px;
--sh-small-size: 14px;
}
/* =====================================================================
Base / reset
===================================================================== */
body,
html {
height: 100%;
}
body {
background: #f5f5f5;
font-family: var(--sh-font-body) !important;
font-size: var(--sh-body-size) !important;
line-height: 1.5;
}
form {
padding: 0;
margin: 0;
display: inline;
}
img {
vertical-align: inherit;
}
blockquote {
border-left: 5px solid #eee;
padding: 10px 20px;
}
iframe {
border: 0 !important;
}
/*-------- Preloader --------*/
#preloader {
position: fixed;
z-index: 999999999 !important;
background-color: #fff;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
#preloader [data-loader="dual-ring"] {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
display: inline-block;
content: " ";
display: block;
margin: 1px;
border-radius: 50%;
border: 5px solid var(--sh-primary-mid);
border-color: var(--sh-primary-mid) transparent var(--sh-primary-mid) transparent;
animation: dual-ring 1.2s linear infinite;
}
@keyframes dual-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
#main-wrapper {
background: #f1f5f6;
}
.section {
position: relative;
padding: 104px 0;
padding: 6.5rem 0;
}
@media only screen and (max-width: 768px) {
.section {
padding: 3.5rem 0;
}
}
@media only screen and (min-width: 1200px) {
.container {
max-width: 1170px !important;
}
}
/* Back to Top */
#back-to-top {
display: none;
position: fixed;
z-index: 1030;
bottom: 8px;
right: 10px;
background-color: rgba(0, 0, 0, 0.2);
text-align: center;
color: #fff;
font-size: 16px;
width: 36px;
height: 36px;
line-height: 36px;
border-radius: 0.25rem;
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
#back-to-top:hover {
background-color: var(--sh-primary-mid);
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.25);
-webkit-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
@media (max-width: 575px) {
#back-to-top {
z-index: 1029;
}
}
/* =====================================================================
Typography
===================================================================== */
h1,
h3,
h4,
h5,
h6 {
text-transform: capitalize;
}
/* Section-title style (used across ~40 remaining view templates as
``, being phased out page by page in favor of
plain semantic headings). Defined on its own, with no other class
riding along in the same rule, so it can't be silently re-widened by a
future grouped selector the way an earlier version of this rule was. */
.headingTitle {
font-size: 28px;
font-weight: 700;
line-height: 40px;
}
h1 {
font-size: var(--sh-h1-size);
}
h2 {
font-size: var(--sh-h2-size);
}
h3 {
font-size: var(--sh-h3-size);
font-weight: 600;
}
h4 {
font-size: var(--sh-h4-size);
font-weight: 600;
}
@media (max-width: 767px) {
h1 {
font-size: 32px;
}
h2 {
font-size: 26px;
}
h3 {
font-size: 22px;
}
h4 {
font-size: 18px;
}
}
small,
.small {
font-size: var(--sh-small-size);
}
.lead {
font-size: 1.3em;
line-height: 1.8;
}
p,
li,
label,
td,
th,
.lead {
font-family: var(--sh-font-body);
}
/* Text Size (only the sizes actually referenced in templates) */
.text-4 {
font-size: 18px !important;
font-size: 1.125rem !important;
}
.text-9 {
font-size: 36px !important;
font-size: 2.25rem !important;
}
.text-12 {
font-size: 48px !important;
font-size: 3rem !important;
}
a {
color: var(--sh-primary-mid);
}
a:hover,
a:focus,
a:active {
color: var(--sh-accent);
text-decoration: none;
transition: all 0.2s ease;
}
/* =====================================================================
Buttons
===================================================================== */
.btn {
padding: .8rem 2rem;
font-weight: 500;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn-sm {
padding: 0.5rem 1rem;
}
.btn:not(.btn-link) {
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.btn:not(.btn-link):hover {
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
@media (max-width: 575px) {
.btn:not(.btn-sm) {
padding: .810rem 1rem;
}
}
.btn {
font-family: var(--sh-font-body);
font-weight: 400;
border-radius: var(--sh-radius-sm);
letter-spacing: 0.01em;
transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:hover {
transform: translateY(-1px);
}
.btn-primary {
background-color: var(--sh-primary-mid);
border-color: var(--sh-primary-mid);
}
.btn-primary:hover {
background-color: var(--sh-primary);
border-color: var(--sh-primary);
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
background-color: var(--sh-primary, #0c2f55);
border-color: var(--sh-primary, #0c2f55);
}
.btn-primary:not(:disabled):not(.disabled).active:hover,
.btn-primary:not(:disabled):not(.disabled):active:hover {
background-color: var(--sh-primary, #0c2f55);
border-color: var(--sh-primary, #0c2f55);
}
.btn-secondary {
background-color: var(--sh-muted);
border-color: var(--sh-muted);
}
.btn-outline-primary,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
color: var(--sh-primary-mid);
border-color: var(--sh-primary-mid);
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active:hover {
background-color: var(--sh-primary-mid);
border-color: var(--sh-primary-mid);
color: #fff;
}
.btn-dark {
background-color: var(--sh-primary);
border-color: var(--sh-primary);
}
.btn-dark:hover {
background-color: var(--sh-primary-dark);
border-color: var(--sh-primary-dark);
}
.btn-danger {
background-color: var(--sh-accent);
border-color: var(--sh-accent);
}
.btn-danger:hover {
background-color: var(--sh-accent-dark);
border-color: var(--sh-accent-dark);
}
.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus,
button:focus,
button:active {
outline: none;
}
.btn:focus,
.btn.focus {
box-shadow: 0 0 0 0.2rem rgba(15, 94, 157, 0.35);
}
.btn:disabled,
.btn.disabled {
transform: none;
box-shadow: none;
opacity: 0.65;
}
/* ---------- Bootstrap utility color overrides ---------- */
.bg-primary,
.badge-primary {
background-color: var(--sh-primary-mid) !important;
}
.text-primary,
.btn-light,
.btn-outline-light:hover,
.btn-link {
color: var(--sh-primary-mid) !important;
}
.btn-link:hover {
color: var(--sh-primary-mid) !important;
}
.text-secondary {
color: var(--sh-muted) !important;
}
.text-muted {
color: #8e9a9d !important;
}
.text-light {
color: #dee3e4 !important;
}
a.bg-primary:focus,
a.bg-primary:hover,
button.bg-primary:focus,
button.bg-primary:hover {
background-color: var(--sh-primary-mid) !important;
}
.border-primary {
border-color: var(--sh-primary-mid) !important;
}
.border-secondary {
border-color: var(--sh-muted) !important;
}
/* =====================================================================
Forms
===================================================================== */
/* Single merged rule — this selector used to be declared three times
across the file (an old "Bootstrap Specific" block, a header-inline
block, and this Forms block). Merged into the one set of values that
was actually winning the cascade, verified property by property
(specificity/!important/source-order) so the rendered result is
unchanged. */
.form-control {
display: block;
box-sizing: border-box;
width: 100% !important;
height: 2.8375rem !important;
margin: 0 0 1rem !important;
padding: 0.5rem !important;
border: 1px solid var(--sh-border) !important;
border-radius: var(--sh-radius-sm) !important;
background-color: rgba(255, 255, 255, 1) !important;
box-shadow: var(--sh-shadow-sm) !important;
font-family: inherit;
font-size: 1rem;
font-weight: 400;
color: #656565;
float: none !important;
transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
}
.form-control:not(.form-control-sm) {
padding: .810rem .96rem;
height: inherit;
}
select.form-control:not([size]):not([multiple]):not(.form-control-sm) {
height: auto;
padding-top: .700rem;
padding-bottom: .700rem;
}
.custom-select {
font-size: 16px;
color: #656565;
border-style: solid !important;
border-width: 0px !important;
background-color: rgba(255, 255, 255, 1) !important;
border-bottom-width: 2px !important;
border-bottom-style: solid !important;
border-bottom-color: rgba(225, 225, 225, 1) !important;
}
.custom-select:not(.custom-select-sm) {
height: calc(3.05rem + 2px);
padding-top: .700rem;
padding-bottom: .700rem;
}
.custom-select:not(.custom-select-sm).border-0 {
height: 3.00rem;
}
.custom-select:focus {
border-color: var(--sh-primary-mid);
box-shadow: 0 0 0 0.2rem rgba(15, 94, 157, 0.2);
}
.form-control:focus[readonly] {
box-shadow: none;
}
.form-control::-webkit-input-placeholder {
color: #b1b4b6;
}
.form-control:-moz-placeholder {
/* FF 4-18 */
color: #b1b4b6;
}
.form-control::-moz-placeholder {
/* FF 19+ */
color: #b1b4b6;
}
.form-control:-ms-input-placeholder,
.form-control::-ms-input-placeholder {
/* IE 10+ */
color: #b1b4b6;
}
.input:focus,
.form-control:focus {
padding: 0.9rem 1rem;
height: auto;
font-size: 1rem;
border-radius: 0.5rem !important;
outline: none !important;
transition: all 0.25s ease;
}
.form-control:focus {
border-color: var(--sh-primary-mid);
box-shadow: 0 0 0 0.2rem rgba(15, 94, 157, 0.2);
}
.dropdown-item.active,
.dropdown-item:active {
background-color: var(--sh-primary-mid);
}
.custom-radio .custom-control-input:checked~.custom-control-label:before,
.custom-control-input:checked~.custom-control-label::before,
.custom-control-input:checked~.custom-control-label:before {
background-color: var(--sh-primary-mid);
border-color: var(--sh-primary-mid);
}
.list-group-item.active {
background-color: var(--sh-primary-mid);
border-color: var(--sh-primary-mid);
}
/* =====================================================================
Icon font (Semantic's icon class names, mapped onto the Font Awesome 5
Free glyphs already loaded locally). Deliberately does NOT set
font-family/content on the bare `.icon` class, so it doesn't interfere
with Devicon glyphs (`icon devicon-python-plain`), which style
themselves via their own stylesheet.
===================================================================== */
.icon {
display: inline-block;
font-style: normal;
line-height: 1;
vertical-align: middle;
text-align: center;
width: 1.18em;
}
.icon.large {
font-size: 1.5em;
}
/* Named glyphs actually used in application/views/**\/*.php, matched by
compound class (order-independent) against Font Awesome 5 Free codepoints
read directly from static/frontend/vendor/font-awesome/css/all.min.css.
Trimmed to the exhaustive real list — every `class="icon ..."` combination
in the codebase (checked application/-wide, including PHP-generated
markup) is one of: icon cart, icon check circle, icon times circle,
icon copy, icon money bill, icon paypal. "icon copy" and "icon paypal"
have no glyph mapping here (pre-existing gap, not introduced by this
cleanup) — left alone since fixing that is a different task. */
.icon.money.bill::before {
font: 900 1em "Font Awesome 5 Free";
content: "\f0d6";
}
.icon.check.circle::before {
font: 900 1em "Font Awesome 5 Free";
content: "\f058";
}
.icon.times::before {
font: 900 1em "Font Awesome 5 Free";
content: "\f00d";
}
.icon.shopping.cart::before,
.icon.cart::before {
font: 900 1em "Font Awesome 5 Free";
content: "\f07a";
}
/* =====================================================================
Cards
===================================================================== */
.card {
box-shadow: var(--sh-shadow-sm) !important;
border: 1px solid var(--sh-border) !important;
border-radius: var(--sh-radius) !important;
transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
box-shadow: var(--sh-shadow-lg) !important;
transform: translateY(-2px);
z-index: 999;
}
.card-header {
font-family: var(--sh-font-heading);
background: #fff;
border-bottom: 1px solid var(--sh-border);
}
.card-footer {
border-top: 1px solid var(--sh-border);
}
/* Shared lift-on-hover treatment, moved out of page-level