.ssf { background: var(--ss-logo-bg-dark); color: #fbf1e2; font-family: var(--ss-font); position: relative; overflow: hidden; } .ssf::before { content: ""; position: absolute; top: -140px; right: -140px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(243,205,147,.14), transparent 70%); pointer-events: none; } .ssf a { text-decoration: none; } .ssf ul { list-style: none; margin: 0; padding: 0; } .ssf-cta { background: var(--ss-clay); color: #fff; } .ssf-cta .ss-wrap { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding-top: 30px; padding-bottom: 30px; flex-wrap: wrap; } .ssf-cta h2 { font-family: var(--ss-head); font-size: clamp(22px, 3vw, 30px); line-height: 1.2; margin: 0; color: #fff; font-weight: 700; max-width: 640px; } .ssf-cta-btns { display: flex; gap: 12px; flex-wrap: wrap; } .ssf-main { padding: 70px 0 46px; position: relative; background: var(--ss-logo-bg); } .ssf-grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1.2fr; gap: 44px; } .ssf .ss-logo { margin-bottom: 18px; } .ssf .ss-logo img { height: 64px; width: auto; display: block; } .ssf-about { margin: 0 0 20px; font-size: 15.5px; line-height: 1.75; color: #fbf1e2; } .ssf h3 { font-family: var(--ss-head); font-size: 20px; font-weight: 700; color: #fff; margin: 0 0 20px; padding-bottom: 12px; position: relative; } .ssf h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 42px; height: 3px; border-radius: 3px; background: var(--ss-brass-lt); } .ssf-links li { margin-bottom: 4px; } .ssf-links a { display: inline-block; padding: 6px 0; font-size: 15.5px; font-weight: 500; color: #fbf1e2; transition: color .2s, transform .2s; } .ssf-links a:hover, .ssf-links a:focus-visible { color: var(--ss-brass-lt); transform: translateX(5px); } .ssf-links a[aria-current="page"] { color: var(--ss-brass-lt); font-weight: 700; } .ssf-contact li { display: flex; gap: 12px; margin-bottom: 15px; font-size: 15.5px; line-height: 1.55; } .ssf-contact svg { width: 20px; height: 20px; color: var(--ss-brass-lt); margin-top: 3px; flex: none; } .ssf-contact a { color: #fff; font-weight: 600; transition: color .2s; word-break: break-word; } .ssf-contact a:hover, .ssf-contact a:focus-visible { color: var(--ss-brass-lt); } .ssf-contact li span a { font-size: 14px; word-break: normal; overflow-wrap: normal; white-space: nowrap; } .ssf-map { margin-top: 6px; } .ssf-soc { display: flex; gap: 10px; } .ssf-soc a { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.22); color: #fff; transition: background-color .2s, color .2s, transform .2s; } .ssf-soc a:hover, .ssf-soc a:focus-visible { background: var(--ss-brass-lt); color: #2b160b; transform: translateY(-3px); } .ssf-soc svg { width: 19px; height: 19px; } .ssf-disc { border-top: 1px solid rgba(255,255,255,.16); padding: 24px 0; position: relative; } .ssf-disc p { margin: 0; font-size: 13.5px; line-height: 1.7; color: #fbf1e2; max-width: 1100px; } .ssf-disc strong { color: #fff; } .ssf-bottom { border-top: 1px solid rgba(255,255,255,.16); padding: 20px 0; position: relative; } .ssf-bottom .ss-wrap { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 14.5px; color: #fbf1e2; } .ssf-bottom a { color: #fff; font-weight: 600; transition: color .2s; } .ssf-bottom a:hover { color: var(--ss-brass-lt); } @media (max-width: 1020px) { .ssf-grid { grid-template-columns: 1fr 1fr; gap: 40px 34px; } } @media (max-width: 600px) { .ssf-grid { grid-template-columns: 1fr; } .ssf-main { padding: 52px 0 30px; } .ssf-cta-btns, .ssf-cta-btns .ss-btn { width: 100%; } } .ssm { display: none; } @media (max-width: 820px) { .ssm { display: grid; grid-template-columns: repeat(3, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 9980; background: #fff; box-shadow: 0 -8px 26px rgba(36,20,11,.22); border-top: 1px solid var(--ss-line); padding-bottom: env(safe-area-inset-bottom); } .ssm a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 4px 9px; font-family: var(--ss-font); font-size: 13.5px; font-weight: 700; color: #fff; text-decoration: none; } .ssm svg { width: 22px; height: 22px; } .ssm-call { background: var(--ss-clay); } .ssm-wa { background: var(--ss-wa); } .ssm-enq { background: var(--ss-teal-900); } .ssm a:active { filter: brightness(.9); } body { padding-bottom: 66px; } }