/* >>> banners.css (10070 bytes) */
/* Main header for web-site-optimization.html */
.mainHeader {
width: 100%;
max-width: 100vw;
aspect-ratio: 990 / 240;
position: relative;
margin: 0 auto 0.6rem auto;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #c00;
border-top-left-radius: 18px;
border-top-right-radius: 18px;
}
.desktop-header {
display: block;
background: #e53935;
}
.mobile-header {
display: none;
}
/* Show mobile header and hide desktop header on small screens (iPhone, Galaxy, etc.) */
@media (max-width: 767px) {
.desktop-header {
display: none !important;
}
.mobile-header {
display: block !important;
position: fixed;
width: 100vw;
max-width: 100vw;
min-width: 100vw;
height: auto;
display: block;
object-fit: cover;
background: #e53935;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
position: relative;
left: 0;
right: 0;
top: 0;
transform: none;
}
html,
body {
margin: 0 !important;
padding: 0 !important;
width: 100vw !important;
overflow-x: hidden !important;
}
}
/* Store banner image */
.storeBannerImage {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
}
/* Store logo link */
.storeLogoLink {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-start;
}
/* Store logo image */
.storeLogoImage {
width: 100%;
height: 100%;
max-width: none;
min-width: 0;
object-fit: contain;
object-position: left;
}
/*
banners.css - Styling for all banner elements throughout the site
Last commented: 2025-08-23
Structure: Banner classes for different sections/pages
*/
/* Post banner image - full-width, height scales proportionally with content area */
.post-banner {
display: block;
width: 100%;
max-width: 950px;
max-height: 200px;
object-fit: cover;
margin: 0 0 20px 0;
border-radius: 0;
}
/* Shared banner element helpers (extracted from repeated inline styles) */
.banner-bg-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
}
.banner-logo-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-start;
}
.banner-logo-img {
width: 100%;
height: 100%;
max-width: none;
min-width: 0;
object-fit: contain;
object-position: left;
}
/* === end of banners.css === */
/* >>> bloggrid.css (6289 bytes) */
/* Ensure block titles and descriptions align vertically */
.blockCaption h4,
.blockCaption h4 {
padding-left: 0 !important;
margin-left: 0 !important;
text-indent: 0 !important;
padding-bottom: 6px !important;
color: #000 !important;
}
.blockCaption .postDescription {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
padding-bottom: 0px;
}
/* Ensure post description paragraphs in blog grid do not inherit .postSection p width */
.postSection .gridBlock .blockCaption .postDescription {
font-size: 13px !important;
max-width: 100% !important;
min-width: 0 !important;
width: auto !important;
overflow-wrap: break-word;
word-break: break-word;
padding-left: 0px;
}
/* Prevent inherited width from .postSection p affecting blog grid post descriptions */
.postSection .gridBlock .postDescription p {
max-width: 100% !important;
min-width: 0 !important;
width: auto !important;
overflow-wrap: break-word;
word-break: break-word;
}
/* Ensure post description paragraphs do not inherit .postSection p width */
.postSection .gridBlock .postDescription p {
overflow-wrap: break-word;
word-break: break-word;
}
/*
bloggrid.css - Blog grid and block styles for SOHO Systems
Last commented: 2025-08-23
Sections: Blog Grid, Grid Block, Block Caption, Buttons
*/
/*
This document contains the styling for ALL blog grids
Used in Blog Layout and 'Advertorials' post
*/
/* Blog Grid: Main grid layout for blog blocks */
.threeBlocks {
display: grid;
grid-template-columns: repeat(3, minmax(220px, 1fr));
gap: 24px 18px;
max-width: 100%;
min-width: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding: 0;
box-sizing: border-box;
justify-content: center;
}
@media (max-width: 980px) {
.threeBlocks {
grid-template-columns: repeat(2, minmax(220px, 1fr));
}
}
@media (max-width: 640px) {
.threeBlocks {
grid-template-columns: 1fr;
}
}
/* Grid Block: Individual blog block */
.gridBlock {
max-width: 100%;
min-width: 0;
}
/* Grid Block Image: Image inside blog block */
.threeBlocks .gridBlock img {
background-color: white;
max-width: 100%;
min-width: 0;
width: 100%;
height: 140px;
max-height: 140px;
min-height: 140px;
object-fit: cover;
margin-bottom: 6px;
padding: 4px;
text-align: center;
border: 2px solid lightgrey;
box-sizing: border-box;
overflow: hidden;
}
/* Utility: unified border-radius for blog grid images */
.blog-grid-images {
border-radius: 10px;
}
/* Blue shimmer for educational/course entries (mirrors gold-shimmer with darker blue tones) */
.threeBlocks .gridBlock img.blue-shimmer {
position: relative;
border: 2px solid #1a3a6b;
padding: 4px;
background: linear-gradient(120deg, #0f2440, #1a3a6b, #2a5a9e, #1a3a6b, #0f2440);
background-size: 300% 300%;
animation: bluePaddingShimmer 3.5s linear infinite;
box-shadow: 0 0 4px rgba(26, 58, 107, 0.6), 0 0 12px rgba(42, 90, 158, 0.35);
background-clip: padding-box;
border-radius: 10px;
}
@keyframes bluePaddingShimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.threeBlocks .gridBlock img.blue-shimmer {
animation: none;
background: #1a3a6b;
}
}
/* Special shimmering gold effect: shimmer appears only in padding between image and border */
.threeBlocks .gridBlock img.gold-shimmer {
position: relative;
border: 2px solid #d4af37;
/* static gold border */
padding: 4px;
/* a little more space to see shimmer */
background: linear-gradient(120deg, #8b6b08, #c9a227, #ffd700, #c9a227, #8b6b08);
background-size: 300% 300%;
animation: goldPaddingShimmer 3.5s linear infinite;
box-shadow: 0 0 4px rgba(212, 175, 55, 0.6), 0 0 12px rgba(255, 223, 128, 0.35);
background-clip: padding-box;
/* ensure shimmer shows in padding */
border-radius: 10px;
/* match updated utility radius */
}
@keyframes goldPaddingShimmer {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Respect user reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
.threeBlocks .gridBlock img.gold-shimmer {
animation: none;
background: #d4af37;
/* static gold */
}
}
/* Block Caption: Caption area below image */
.blockCaption {
background-color: white;
max-width: 100%;
min-width: 0;
padding-top: 0;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 10px;
margin-bottom: 8px;
/* Added per request */
box-sizing: border-box;
}
/* Block Caption Title: Heading in caption */
.blockCaption h4 {
max-width: 276px !important;
min-width: 0 !important;
/* Prevent inherited width from postSection affecting block description paragraphs */
.blockCaption p {
max-width: 100% !important;
min-width: 0 !important;
overflow-wrap: break-word;
word-break: break-word;
}
margin: 0;
padding-left: 3px;
font-family: "Poppins",
"Segoe UI Emoji",
"Segoe UI Symbol",
"Apple Color Emoji",
sans-serif;
font-weight: 700;
font-style: normal;
font-size: 16px;
}
/* Block Description: Description in blog block */
.blockCaption .postDescription {
max-width: 100% !important;
min-width: 0 !important;
overflow-wrap: break-word;
word-break: break-word;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 3px;
font-family: "Poppins", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: black;
}
.gridBlock .postDescription p {
max-width: 100% !important;
min-width: 0 !important;
overflow-wrap: break-word;
word-break: break-word;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 3px;
font-family: "Poppins", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: black;
}
/* Block Button: Button or link in caption */
.blockCaption button,
.blockCaption a {
background-color: white;
margin-top: 0;
padding-top: 0;
padding-bottom: 3px;
padding-left: 4px;
padding-right: 3px;
border: none;
font-size: 0.70rem;
color: black;
text-align: center;
border-radius: 6px;
box-shadow: 3px 3px 0px 1px rgba(0, 0, 0, 0.2);
}
/* Block Button Hover: Hover effect for button/link */
.blockCaption button:hover,
.blockCaption a:hover {
background-color: rgb(201, 216, 240);
}
/* Pagination: centered square page number buttons */
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
margin: 32px 0 24px;
flex-wrap: wrap;
}
.pagination-item {
display: inline-flex;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
min-width: 44px;
text-decoration: none;
color: #111;
background: #fff;
border: 1px solid #aaa;
border-radius: 12px;
font-weight: 700;
font-size: 0.95rem;
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.pagination-item:hover,
.pagination-item:focus-visible {
background: #f4f4f4;
border-color: #888;
transform: translateY(-1px);
}
.pagination-item.current,
.pagination-item[aria-current="page"] {
background: #c8102e;
color: #fff;
border-color: #c8102e;
cursor: default;
transform: none;
}
.pagination-item.current:hover,
.pagination-item[aria-current="page"]:hover {
background: #c8102e;
}
.pagination-item.disabled {
opacity: 0.5;
pointer-events: none;
}
@media (max-width: 420px) {
.pagination {
gap: 8px;
}
.pagination-item {
width: 38px;
height: 38px;
}
}
/* === end of bloggrid.css === */
/* >>> buttons.css (2490 bytes) */
/* BUTTONS & BUTTON EFFECTS
Styles for all button elements
https://www.w3schools.com/csS/css3_buttons.asp
https://csspro.com/css-3d-buttons
https://getcssscan.com/css-buttons-examples
https://uiverse.io/buttons
https://freefrontend.com/css-button-hover-effects/
https://prismic.io/blog/css-button-animations
*/
/* Golden Button */
.buttonGolden {
touch-action: manipulation;
display: inline-block;
outline: none;
font-family: inherit;
font-size: 1em;
box-sizing: border-box;
border: none;
border-radius: .3em;
height: 2.75em;
line-height: 2.5em;
text-transform: uppercase;
padding: 0 1em;
box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(110, 80, 20, .4),
inset 0 -2px 5px 1px rgba(139, 66, 8, 1),
inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
border: 1px solid #a55d07;
color: rgb(120, 50, 5);
text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
cursor: pointer;
transition: all .2s ease-in-out;
background-size: 100% 100%;
background-position: center;
}
.button-18:focus,
.button-18:hover {
background-size: 150% 150%;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23),
inset 0 -2px 5px 1px #b17d10,
inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
border: 1px solid rgba(165, 93, 7, .6);
color: rgba(120, 50, 5, .8);
}
.button-18:active {
box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(110, 80, 20, .4),
inset 0 -2px 5px 1px #b17d10,
inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
}
/* Back to Top button */
#backToTopBtn {
position: fixed;
bottom: 104px;
/* 50px (chatbot bottom) + 56px (chatbot height) + -2px gap */
right: 50px;
/* match chatbot button's right offset */
z-index: 100001;
/* ensure it's above the consent banner (z-index: 100000) */
color: #fff;
border: none;
border-radius: 50%;
width: 56px;
height: 56px;
font-size: 2em;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
cursor: pointer;
transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
display: flex;
align-items: center;
justify-content: center;
background: #ED150A;
font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", sans-serif;
}
#backToTopBtn:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
transform: scale(1.08);
background: #B71C1C;
}
/* === end of buttons.css === */
/* >>> chatbot.css (2284 bytes) */
/* chatbot.css - Styles for SOHO Chatbot popup and floating button */
#chatbotIcon {
display: flex;
position: fixed;
bottom: 40px;
right: 50px;
z-index: 10001;
background: #fff;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
width: 56px;
height: 56px;
align-items: center;
justify-content: center;
overflow: hidden;
opacity: 0.85;
transition: opacity 0.3s;
}
#chatbotIcon::after {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
background: linear-gradient(
105deg,
transparent 30%,
rgba(255,255,255,0.55) 45%,
rgba(255,255,255,0.7) 50%,
rgba(255,255,255,0.55) 55%,
transparent 70%
);
background-size: 300% 100%;
background-position: 100% 0;
animation: chatbotShimmer 4s ease-in-out infinite;
pointer-events: none;
z-index: 1;
}
#chatbotIcon:focus,
#chatbotIcon:hover {
opacity: 1;
outline: 2px solid #fff;
}
@keyframes chatbotShimmer {
0% { background-position: 150% 0; }
40% { background-position: -50% 0; }
100% { background-position: -50% 0; }
}
@media (prefers-reduced-motion: reduce) {
#chatbotIcon::after { animation: none; display: none; }
}
#chatbotIcon img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
transform: scale(1.08);
}
@media (max-width: 767px) {
#backToTopBtn,
#chatbotIcon {
display: none !important;
}
}
#chatbot-popup {
display: none;
position: fixed;
bottom: 110px;
right: 40px;
z-index: 10002;
width: 340px;
max-width: 95vw;
height: 420px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
background: #fff;
border-radius: 16px;
flex-direction: column;
overflow: hidden;
}
#chatbot-popup .chatbot-header {
background: #ED150A;
color: #fff;
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
#chatbot-popup .chatbot-title {
font-weight: bold;
font-size: 1.3rem;
}
#chatbot-close {
background: none;
border: none;
color: #fff;
font-size: 1.2rem;
cursor: pointer;
}
#chatbot-messages {
flex: 1;
overflow-y: auto;
padding: 16px 12px 8px 12px;
font-size: 1em;
}
#chatbot-form {
display: flex;
padding: 8px 12px 12px 12px;
background: #f7f7f7;
gap: 0.5em;
}
#chatbot-input {
flex: 1;
padding: 0.5em 0.7em;
border-radius: 6px;
border: 1px solid #ccc;
}
/* Floating Back to Top Button Styles */
.liquid-glass-btn {
background: #ED150A;
color: #fff;
border: 1.5px solid #ED150A;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(237, 21, 10, 0.10), 0 1.5px 0 rgba(255, 255, 255, 0.18) inset;
font-weight: 600;
font-size: 1.08em;
padding: 0.5em 1.3em;
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
cursor: pointer;
}
.liquid-glass-btn:hover,
.liquid-glass-btn:focus {
background: #e53935;
color: #fff;
box-shadow: 0 4px 18px rgba(237, 21, 10, 0.18), 0 1.5px 0 rgba(255, 255, 255, 0.22) inset;
outline: none;
}
/* === end of chatbot.css === */
/* >>> credits.css (3600 bytes) */
/*
credits.css - Credits scroller and acknowledgements styles for SOHO Systems
Last commented: 2025-08-23
Sections: Credit Container, Credit Screen, Credit Scroller, Credit Units, Types, Names, Logos, Quotes
*/
/* This document contains ALL styling pertaining to the INSERTED CREDIT SCROLLER */
/* Container */
/* Credit Container: Main credit box */
.creditContainer {
max-width: var(--container-max);
width: 100%;
margin: 40px auto 40px;
padding: 0 var(--container-padding);
padding-bottom: 0;
border-radius: 18px;
overflow: hidden;
box-sizing: border-box;
position: relative;
z-index: 1;
box-shadow:
-10px -10px 30px 15px rgba(0, 0, 0, 0.40),
8px 8px 20px 10px rgba(92, 0, 0, 0.10),
0 0 80px 40px rgba(92, 0, 0, 0.45);
/* background color of whole website container */
background-color: white;
}
.creditContainer .creditSpacer,
.creditContainer .creditScreen {
margin-left: calc(-1 * var(--container-padding));
margin-right: calc(-1 * var(--container-padding));
width: calc(100% + 2 * var(--container-padding));
}
/* Audio Off Button */
.audio-off-btn {
position: absolute;
top: 0;
right: 28px;
z-index: 10;
background: transparent;
border: none;
cursor: pointer;
opacity: 0.8;
animation: pulseAudio 1.5s ease-in-out infinite;
}
.audio-off-btn:hover {
opacity: 1;
}
.audio-off-btn.audio-playing {
animation: none;
}
.expand-credits-btn {
position: absolute;
bottom: 0;
right: 28px;
z-index: 10;
background: transparent;
border: none;
cursor: pointer;
opacity: 0.6;
padding: 8px;
}
.expand-credits-btn:hover {
opacity: 1;
}
.creditScreen:fullscreen,
.creditScreen:-webkit-full-screen {
display: flex;
align-items: center;
justify-content: center;
}
.creditScreen:fullscreen .expand-credits-btn,
.creditScreen:-webkit-full-screen .expand-credits-btn {
bottom: 20px;
}
.creditScreen:fullscreen .audio-off-btn,
.creditScreen:-webkit-full-screen .audio-off-btn {
top: 30px;
}
.creditScreen:fullscreen .creditScroller,
.creditScreen:-webkit-full-screen .creditScroller {
margin: 0 auto;
}
@keyframes pulseAudio {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.15); opacity: 1; }
}
.creditScreen {
background: linear-gradient(to right,
transparent 0%,
transparent calc((100% - 990px) / 2),
black calc((100% - 990px) / 2),
black calc((100% + 990px) / 2),
transparent calc((100% + 990px) / 2),
transparent 100%
);
color: white;
width: 100%;
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
height: 630px;
min-height: 630px;
max-height: 630px;
}
.creditSpacer {
height: 50px;
background: linear-gradient(to right,
transparent 0%,
transparent calc((100% - 990px) / 2),
black calc((100% - 990px) / 2),
black calc((100% + 990px) / 2),
transparent calc((100% + 990px) / 2),
transparent 100%
);
}
/* Ensure all links in the credit scroller are white, including visited and active */
.creditScreen a,
.creditScreen a:visited,
.creditScreen a:active {
color: white !important;
text-decoration: underline;
}
/* Credit Scroller: Animated scrolling credits */
.creditScroller {
max-width: 990px;
min-width: 990px;
margin: 0 auto;
padding: 0;
background-color: black;
/* Center all text horizontally */
text-align: center;
/* Set the speed at which the credit scroller scrolls */
animation: scrollCredits 60s linear infinite;
}
/* Animation: Keyframes for scrolling credits */
@keyframes scrollCredits {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
/* Credit Unit: Individual credit entry */
.creditUnit {
max-width: 990px;
min-width: 990px;
background-color: black;
}
/* Credit Type: Category title for credits */
.creditType {
max-width: 990px;
min-width: 990px;
/* Add space above credit category title */
margin-top: 30px;
/* Add space below credit category title */
margin-bottom: 30px;
padding: 0;
background-color: black;
color: white;
font-family: "Caveat", cursive;
font-style: normal;
font-weight: 200;
font-size: 30px;
font-optical-sizing: auto;
}
/* Credit Name: Name or link in credits */
.creditName, .creditName a {
color: white;
margin: 0;
padding: 2px;
font-family: "Roboto", sans-serif;
font-weight: 700;
font-style: normal;
font-size: 30px;
text-decoration: none;
text-transform: uppercase;
}
/* Credit Logos: Logo row in credits */
.creditLogos {
display: flex;
height: 60px;
max-width: 100%;
margin: auto;
margin-bottom: 40px;
}
/* Credit Quote: Quotation in credits */
.creditQuote {
margin-top: 30px;
padding: 0;
font-family: "Poppins", sans-serif;
font-weight: 200;
font-style: normal;
font-size: 20px;
color: white;
}
/* Not On TV: Special image in credits */
.notOnTV {
width: 128px;
padding-top: 20px;
padding-left: 20px;
margin-left: auto;
margin-right: auto;
border: 0;
}
/* === end of credits.css === */
/* >>> effects.css (63090 bytes) */
/*
effects.css - Special effects classes for SOHO Systems
Last updated: 2025-01-10
Purpose: Centralized repository for all visual effects and animations
Contents:
- Music beat animations
- Rainbow glow effects
- Shimmer and sparkle effects
- Bounce, shake, and transition animations
- Pseudo-element styling for visual enhancements
- Keyframe definitions for all animations
Organization: All special effects should be stored here, not in structure.css
*/
/* Music Beat Pulse Effect */
.music-beat {
animation: musicBeat 0.35s cubic-bezier(0.42, 0, 0.58, 1);
}
/* Continuous looping variant while audio is playing */
.music-beat-looping {
animation: musicBeat 0.8s cubic-bezier(0.42, 0, 0.58, 1) infinite;
}
@keyframes musicBeat {
0% {
transform: scale(1) rotate(0deg);
filter: brightness(1.1);
}
30% {
transform: scale(1.18) rotate(-2deg);
filter: brightness(1.25);
}
60% {
transform: scale(0.96) rotate(2deg);
filter: brightness(1.1);
}
100% {
transform: scale(1) rotate(0deg);
filter: brightness(1);
}
}
/* Glassy effect for chatbot send button */
.liquid-glass-btn {
background: #ED150A;
color: #fff;
border: 1.5px solid #ED150A;
border-radius: 8px;
box-shadow: 0 2px 12px rgba(237, 21, 10, 0.10), 0 1.5px 0 rgba(255, 255, 255, 0.18) inset;
font-weight: 600;
font-size: 1.08em;
padding: 0.5em 1.3em;
transition: background 0.18s, color 0.18s, box-shadow 0.18s;
cursor: pointer;
}
.liquid-glass-btn:hover,
.liquid-glass-btn:focus {
background: #e53935;
color: #fff;
box-shadow: 0 4px 18px rgba(237, 21, 10, 0.18), 0 1.5px 0 rgba(255, 255, 255, 0.22) inset;
outline: none;
}
/*
effects.css - Special effects classes for SOHO Systems
Last commented: 2025-08-23
Structure: Animated backgrounds, shimmer, transitions, and more
*/
/* Animated Rainbow Gradient Background */
.rainbow {
background: linear-gradient(124deg, #150035, #580033);
background-size: 1800% 1800%;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
animation: rainbow 18s ease infinite;
}
@-webkit-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
@-moz-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
@-o-keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
@keyframes rainbow {
0% {
background-position: 0% 82%
}
50% {
background-position: 100% 19%
}
100% {
background-position: 0% 82%
}
}
/* Scroll */
.scroll {
animation: scroll 20s infinite;
}
@keyframes scroll {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
/* Drop-in Effect */
.drop-in {
animation: drop-in 0.7s cubic-bezier(0.23, 1, 0.32, 1) both;
transform: translateY(-100px);
opacity: 0;
}
@keyframes drop-in {
0% {
transform: translateY(-100px);
opacity: 0;
}
80% {
transform: translateY(10px);
opacity: 1;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
/* Shimmer */
.shimmer {
/* Shimmer effect for text and icons */
color: grey;
-webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300% 100%;
mask: linear-gradient(-60deg, #000 30%, #0005, #000 70%) right/300% 100%;
/* Standard property for compatibility */
background-repeat: no-repeat;
animation: shimmer 2.5s infinite;
}
@keyframes shimmer {
0% {
-webkit-mask-position: 100% 0;
}
100% {
-webkit-mask-position: 0 0;
}
}
/* Spin */
.spin {
animation: spin 15s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
/* Shake */
.shake {
/* Start the shake animation and make it last for 0.5 seconds */
animation: shake 0.5s;
animation-iteration-count: 1;
}
@keyframes shake {
0% {
transform: translate(1px, 1px) rotate(0deg);
}
10% {
transform: translate(-1px, -2px) rotate(-1deg);
}
20% {
transform: translate(-3px, 0px) rotate(1deg);
}
/* ... (continue with other keyframes) ... */
100% {
transform: translate(1px, -2px) rotate(-1deg);
}
}
/* Wobble */
.wobble {
animation: wobble 1s;
animation-iteration-count: 1;
}
@keyframes wobble {
0% {
transform: translateX(0);
}
15% {
transform: translateX(-8px);
}
30% {
transform: translateX(6px);
}
45% {
transform: translateX(-4px);
}
60% {
transform: translateX(4px);
}
75% {
transform: translateX(-2px);
}
100% {
transform: translateX(0);
}
}
/* ========================= */
/* Bounce (vertical bounce) */
/* ========================= */
.bounce {
animation: bounce 1s;
animation-iteration-count: 1;
}
@keyframes bounce {
0% {
transform: translateY(0);
}
20% {
transform: translateY(-18px);
}
40% {
transform: translateY(0);
}
60% {
transform: translateY(-12px);
}
80% {
transform: translateY(0);
}
100% {
transform: translateY(0);
}
}
/* ========================= */
/* Pop-in (scale in effect) */
/* ========================= */
.pop-in {
animation: popIn 0.5s cubic-bezier(.42, 0, .58, 1);
animation-iteration-count: 1;
}
@keyframes popIn {
0% {
opacity: 0;
transform: scale(0.6);
}
60% {
opacity: 1;
transform: scale(1.08);
}
80% {
transform: scale(0.96);
}
100% {
opacity: 1;
transform: scale(1);
}
}
/* ========================= */
/* Hop (quick jump effect) */
/* ========================= */
.hop {
animation: hop 0.6s cubic-bezier(.42, 0, .58, 1);
animation-iteration-count: 1;
}
@keyframes hop {
0% {
transform: translateY(0);
}
30% {
transform: translateY(-24px);
}
50% {
transform: translateY(0);
}
70% {
transform: translateY(-12px);
}
100% {
transform: translateY(0);
}
}
/* ========================= */
/* Flip (horizontal flip) */
/* ========================= */
.flip {
animation: flip 0.7s cubic-bezier(.42, 0, .58, 1);
animation-iteration-count: 1;
backface-visibility: hidden;
}
@keyframes flip {
0% {
transform: rotateY(0deg);
}
40% {
transform: rotateY(90deg);
}
60% {
transform: rotateY(270deg);
}
100% {
transform: rotateY(360deg);
}
}
/* ========================= */
/* Flashing Red Tint Effect */
/* ========================= */
.flash-red {
animation: flashRed 1s linear;
animation-iteration-count: 1;
}
@keyframes flashRed {
0% {
box-shadow: 0 0 0 0 rgba(237, 21, 10, 0);
background: inherit;
}
10% {
box-shadow: 0 0 16px 8px rgba(237, 21, 10, 0.6);
background: #ED150A22;
}
30% {
box-shadow: 0 0 24px 12px rgba(237, 21, 10, 0.8);
background: #ED150A44;
}
50% {
box-shadow: 0 0 32px 16px rgba(237, 21, 10, 0.6);
background: #ED150A22;
}
70% {
box-shadow: 0 0 16px 8px rgba(237, 21, 10, 0.4);
background: #ED150A11;
}
100% {
box-shadow: 0 0 0 0 rgba(237, 21, 10, 0);
background: inherit;
}
}
/* Stamp Effect */
.stamp-effect {
display: inline-block;
animation: stampEffect 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
transform: scale(0.7) rotate(-8deg);
opacity: 0.7;
/* box-shadow and border removed */
background: #fff8f6;
}
/* ===================== */
/* Fly-in (subtle glide) */
/* ===================== */
/* Usage: add class "fly-in" to an element (e.g., postStamp). It glides up & fades in. */
.fly-in {
animation: flyIn 0.9s cubic-bezier(.22, 1, .36, 1) both;
will-change: transform, opacity;
}
@keyframes flyIn {
0% {
transform: translateY(40px) scale(.92) rotate(-2deg);
opacity: 0;
filter: blur(2px);
}
55% {
transform: translateY(-6px) scale(1.03) rotate(1deg);
opacity: 1;
filter: blur(.3px);
}
75% {
transform: translateY(3px) scale(.995) rotate(-0.5deg);
opacity: 1;
filter: blur(0);
}
100% {
transform: translateY(0) scale(1) rotate(0deg);
opacity: 1;
filter: blur(0);
}
}
@media (prefers-reduced-motion: reduce) {
.fly-in {
animation: none !important;
transform: none !important;
opacity: 1 !important;
filter: none !important;
}
}
@keyframes stampEffect {
0% {
transform: scale(0.7) rotate(-8deg);
opacity: 0.7;
/* box-shadow removed */
}
60% {
transform: scale(1.08) rotate(3deg);
opacity: 1;
/* box-shadow removed */
}
80% {
transform: scale(0.98) rotate(-2deg);
opacity: 0.95;
/* box-shadow removed */
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
/* box-shadow removed */
}
}
/* ========================= */
/* Roll-in from right effect */
/* ========================= */
/* Usage: add class "roll-in-right" to element you want to animate. */
.roll-in-right {
animation: rollInFromRight 0.8s cubic-bezier(0.23, 1, 0.32, 1) both;
backface-visibility: hidden;
transform-origin: center;
}
@keyframes rollInFromRight {
0% {
transform: translateX(140px) rotate(35deg) scale(0.85);
opacity: 0;
filter: blur(2px);
}
55% {
transform: translateX(-12px) rotate(-6deg) scale(1.02);
opacity: 1;
filter: blur(0.4px);
}
75% {
transform: translateX(6px) rotate(3deg) scale(0.99);
opacity: 1;
filter: blur(0);
}
100% {
transform: translateX(0) rotate(0deg) scale(1);
opacity: 1;
filter: blur(0);
}
}
/* Respect user preference to reduce motion */
@media (prefers-reduced-motion: reduce) {
.roll-in-right {
animation: none !important;
transform: none !important;
opacity: 1 !important;
filter: none !important;
}
}
/* ========================= */
/* Materialize (progressive reveal) */
/* ========================= */
/* Usage: add class "materialize" (can combine with postStamp). Provides a smooth scale/blur fade-in. */
.materialize {
animation: materializeIn 0.9s cubic-bezier(.22, 1, .36, 1) both;
will-change: transform, opacity, filter;
}
@keyframes materializeIn {
0% {
opacity: 0;
transform: scale(.6) rotate(-4deg);
filter: blur(4px) brightness(0.85);
}
55% {
opacity: 1;
transform: scale(1.04) rotate(2deg);
filter: blur(.8px) brightness(1.05);
}
75% {
transform: scale(.97) rotate(-1deg);
filter: blur(0) brightness(1.02);
}
100% {
opacity: 1;
transform: scale(1) rotate(0deg);
filter: blur(0) brightness(1);
}
}
@media (prefers-reduced-motion: reduce) {
.materialize {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
}
/* ========================= */
/* Smooth Spin In Effect */
/* ========================= */
/* Usage: add class "smooth-spin-in" to post stamps for elegant entrance */
.smooth-spin-in {
animation: smoothSpinIn 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
will-change: transform, opacity;
transform-origin: center;
}
@keyframes smoothSpinIn {
0% {
transform: scale(0.1) rotate(0deg);
opacity: 0;
}
50% {
transform: scale(0.8) rotate(180deg);
opacity: 0.7;
}
100% {
transform: scale(1) rotate(360deg);
opacity: 1;
}
}
/* Respect user preference to reduce motion */
@media (prefers-reduced-motion: reduce) {
.smooth-spin-in {
animation: none !important;
transform: scale(1) rotate(0deg) !important;
opacity: 1 !important;
}
}
/* ========================= */
/* Square Scan Effect */
/* ========================= */
/* Usage: add class "scan-square" to post stamps for searching/looking glass motion */
.scan-square {
animation: squareScan 3s ease-in-out 1;
will-change: transform;
transform-origin: center;
}
@keyframes squareScan {
0% {
transform: translate(0, 0) rotate(0deg);
}
12.5% {
transform: translate(30px, 0) rotate(0deg);
}
25% {
transform: translate(30px, 30px) rotate(-90deg);
}
37.5% {
transform: translate(0, 30px) rotate(-180deg);
}
50% {
transform: translate(-30px, 30px) rotate(-270deg);
}
62.5% {
transform: translate(-30px, 0) rotate(0deg);
}
75% {
transform: translate(-30px, -30px) rotate(-90deg);
}
87.5% {
transform: translate(0, -30px) rotate(-180deg);
}
100% {
transform: translate(0, 0) rotate(0deg);
}
}
/* Respect user preference to reduce motion */
@media (prefers-reduced-motion: reduce) {
.scan-square {
animation: none !important;
transform: none !important;
}
}
/* ========================= */
/* Glitch effect for postStamp */
/* Usage: add class "glitch" to the image element (e.g., ![]()
) */
.postStamp.glitch {
position: relative;
display: inline-block;
transform-origin: center;
/* subtle base animation: tiny jitter + color shift */
animation: glitch-base 3s infinite linear;
}
.postStamp.glitch::before,
.postStamp.glitch::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: screen;
opacity: 0.9;
}
/* colored band that shifts left/right */
.postStamp.glitch::before {
background: linear-gradient(90deg, rgba(255, 0, 40, 0.12), rgba(0, 230, 255, 0.08), rgba(255, 255, 255, 0));
transform: translateX(0);
animation: glitch-band 2.4s infinite linear;
}
/* thin scanlines / slices flicker */
.postStamp.glitch::after {
background-image: repeating-linear-gradient(to bottom,
rgba(0, 0, 0, 0) 0px,
rgba(0, 0, 0, 0) 2px,
rgba(0, 0, 0, 0.03) 3px,
rgba(0, 0, 0, 0) 4px);
animation: glitch-scan 1.6s infinite steps(2);
mix-blend-mode: multiply;
}
@keyframes glitch-base {
0% {
transform: translateY(0) scale(1) skewX(0deg);
filter: none;
}
7% {
transform: translateY(-1px) scale(1.002) skewX(-0.3deg);
filter: hue-rotate(-2deg) saturate(1.02);
}
14% {
transform: translateY(0) scale(1) skewX(0deg);
filter: hue-rotate(2deg) saturate(1.03);
}
21% {
transform: translateY(1px) scale(0.998) skewX(0.2deg);
filter: hue-rotate(-1deg) saturate(0.98);
}
100% {
transform: translateY(0) scale(1) skewX(0deg);
filter: none;
}
}
@keyframes glitch-band {
0% {
transform: translateX(-6%);
opacity: 0.9
}
25% {
transform: translateX(8%);
opacity: 0.6
}
50% {
transform: translateX(-4%);
opacity: 0.85
}
75% {
transform: translateX(6%);
opacity: 0.65
}
100% {
transform: translateX(-6%);
opacity: 0.9
}
}
@keyframes glitch-scan {
0% {
opacity: 0.02
}
30% {
opacity: 0.2
}
31% {
transform: translateY(-2px);
}
40% {
opacity: 0.03
}
60% {
opacity: 0.18
}
61% {
transform: translateY(1px);
}
100% {
opacity: 0.02
}
}
@media (prefers-reduced-motion: reduce) {
.postStamp.glitch,
.postStamp.glitch::before,
.postStamp.glitch::after {
animation: none !important;
transform: none !important;
opacity: 1 !important;
}
}
/* ========================= */
/* ========================= */
/* Forward Flip In Effect */
/* ========================= */
.forward-flip-in {
animation: forwardFlipIn 1.5s ease-out both !important;
transform-origin: center;
display: block;
}
@keyframes forwardFlipIn {
0% {
transform: perspective(1200px) translateZ(-2000px) rotateX(-720deg);
opacity: 0;
}
100% {
transform: perspective(1200px) translateZ(0) rotateX(0deg);
opacity: 1;
}
}
/* ========================= */
/* Envelope Unfold Effect */
/* ========================= */
.envelope-unfold {
animation: envelopeUnfold 1.5s cubic-bezier(0.23, 1, 0.32, 1) both !important;
transform-origin: top center;
display: block;
}
@keyframes envelopeUnfold {
0% {
transform: perspective(1200px) rotateX(-90deg);
opacity: 0;
}
100% {
transform: perspective(1200px) rotateX(0deg);
opacity: 1;
}
}
/* ========================= */
/* Carpet Unroll Effect */
/* ========================= */
.carpet-unroll {
animation: carpetUnroll 1.5s cubic-bezier(0.25, 1, 0.5, 1) both !important;
transform-origin: top center;
display: block;
}
@keyframes carpetUnroll {
0% {
transform: scaleY(0);
opacity: 0;
}
100% {
transform: scaleY(1);
opacity: 1;
}
}
/* ========================= */
/* Unroll Left to Right Effect */
/* ========================= */
.unroll-left-right {
animation: unrollLeftRight 1.5s cubic-bezier(0.25, 1, 0.5, 1) both !important;
transform-origin: left center;
display: block;
}
@keyframes unrollLeftRight {
0% {
transform: scaleX(0);
opacity: 0;
}
100% {
transform: scaleX(1);
opacity: 1;
}
}
/* ========================= */
/* Elastic Wobble Effect */
/* ========================= */
.elastic-wobble {
animation: elasticWobble 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
transform-origin: center;
display: block;
}
@keyframes elasticWobble {
0% {
transform: scale3d(1, 1, 1);
}
15% {
transform: scale3d(1.25, 0.75, 1);
}
30% {
transform: scale3d(0.75, 1.25, 1);
}
45% {
transform: scale3d(1.15, 0.85, 1);
}
60% {
transform: scale3d(0.95, 1.05, 1);
}
75% {
transform: scale3d(1.05, 0.95, 1);
}
100% {
transform: scale3d(1, 1, 1);
}
}
/* ========================= */
/* Search Light Scan Effect */
/* ========================= */
.search-light-wrapper {
position: relative;
display: block;
overflow: hidden;
margin: 0 0 20px 0;
border-radius: 0;
}
.search-light-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
}
.search-light-wrapper::after {
content: '';
position: absolute;
width: 300%;
height: 300%;
top: -100%;
left: -100%;
pointer-events: none;
background: radial-gradient(circle at center, transparent 0%, transparent 4%, rgba(0,0,0,0.85) 12%, rgba(0,0,0,1) 100%);
animation: searchLightMove 4s ease-in-out both !important;
z-index: 10;
}
@keyframes searchLightMove {
0% {
transform: translate(-35%, 10%);
opacity: 1;
}
20% {
transform: translate(-10%, -15%);
opacity: 1;
}
40% {
transform: translate(15%, 20%);
opacity: 1;
}
65% {
transform: translate(35%, -10%);
opacity: 1;
}
85% {
transform: translate(0, 0) scale(15);
opacity: 0;
}
100% {
transform: translate(0, 0) scale(15);
opacity: 0;
}
}
/* ========================= */
/* Responsive Unfurl Effect */
/* ========================= */
.responsive-unfurl {
animation: responsiveUnfurl 2.5s cubic-bezier(0.2, 0.8, 0.2, 1.2) both !important;
display: block;
}
@keyframes responsiveUnfurl {
0% {
clip-path: inset(25% 40% 25% 40%);
filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}
20% {
clip-path: inset(25% 40% 25% 40%);
filter: drop-shadow(0 0 10px rgba(0,0,0,0.5));
}
40% {
clip-path: inset(10% 20% 10% 20%);
}
60% {
clip-path: inset(10% 20% 10% 20%);
}
80% {
clip-path: inset(0 0 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}
/* ========================= */
/* Materialize Triangles */
/* ========================= */
.materialize-triangles {
animation: materializeTriangles 2.2s cubic-bezier(0.25, 1, 0.5, 1) both !important;
display: block;
}
@keyframes materializeTriangles {
0% {
clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
opacity: 0;
transform: scale(0.8) rotate(15deg);
filter: blur(5px);
}
30% {
/* A triangle pointing up */
clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 100% 100%);
opacity: 0.8;
transform: scale(1.05) rotate(-5deg);
filter: blur(2px);
}
70% {
/* A triangle pointing down */
clip-path: polygon(0% 0%, 100% 0%, 50% 100%, 50% 100%);
opacity: 0.9;
transform: scale(0.98) rotate(2deg);
filter: blur(0px);
}
100% {
/* Full rectangle */
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
opacity: 1;
transform: scale(1) rotate(0deg);
filter: blur(0px);
}
}
/* ========================= */
/* Git Commit Reveal Effect */
/* ========================= */
.git-commit-reveal {
animation: gitCommitReveal 1.8s steps(25, end) both !important;
display: block;
}
@keyframes gitCommitReveal {
0% {
clip-path: inset(0 0 100% 0);
filter: sepia(1) hue-rotate(90deg) saturate(3) brightness(0.8);
}
70% {
clip-path: inset(0 0 0 0);
filter: sepia(1) hue-rotate(90deg) saturate(3) brightness(0.8);
}
85% {
clip-path: inset(0 0 0 0);
filter: sepia(1) hue-rotate(90deg) saturate(5) brightness(1.5);
}
95% {
clip-path: inset(0 0 0 0);
filter: brightness(2) contrast(1.5);
}
100% {
clip-path: inset(0 0 0 0);
filter: none;
}
}
/* ========================= */
/* Vibe Coding Sparkle Reveal*/
/* ========================= */
.vibe-coding-reveal {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
background: #0d1117;
}
.vibe-coding-reveal .post-banner {
margin: 0 !important;
display: block;
width: 100%;
animation: vibeImageMaterialize 2.5s ease-out both !important;
}
.vibe-coding-reveal::before,
.vibe-coding-reveal::after {
content: "async function vibe() { \A yield 'sparkles'; \A} \A const ai = true; \A // materializing...";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
color: #2ea043;
font-family: 'Courier New', Courier, monospace;
font-size: 1.1rem;
line-height: 1.5;
white-space: pre-wrap;
padding: 20px;
pointer-events: none;
z-index: 10;
animation: vibeCodeScramble 2s steps(20, end) both;
}
.vibe-coding-reveal::after {
content: "✨ * ✨ \A \A Online... \A ";
color: #fff;
text-shadow: 0 0 10px #58a6ff, 0 0 20px #bc8cff, 0 0 30px #ff7b72;
animation: vibeSparkles 2.5s ease-out both;
font-size: 1.5rem;
text-align: right;
mix-blend-mode: screen;
}
@keyframes vibeImageMaterialize {
0% {
opacity: 0;
transform: scale(1.1);
filter: blur(10px) brightness(0) hue-rotate(90deg);
}
50% {
opacity: 0.6;
filter: blur(4px) brightness(0.8) hue-rotate(45deg);
}
100% {
opacity: 1;
transform: scale(1);
filter: blur(0) brightness(1) hue-rotate(0deg);
}
}
@keyframes vibeCodeScramble {
0% {
opacity: 1;
transform: translateY(20px);
}
80% {
opacity: 0.9;
transform: translateY(-10px);
}
100% {
opacity: 0;
transform: translateY(-30px);
}
}
@keyframes vibeSparkles {
0% {
opacity: 0;
transform: scale(0.8) rotate(-10deg);
}
40% {
opacity: 1;
transform: scale(1.1) rotate(5deg);
}
80% {
opacity: 0.5;
transform: scale(1) rotate(10deg);
}
100% {
opacity: 0;
transform: scale(1.2) rotate(15deg);
}
}
/* ========================= */
/* Beatbox Pulse Effect */
/* ========================= */
.beatbox-pulse {
animation: beatboxPulse 1.2s ease-in-out 2 both !important;
transform-origin: center;
display: block;
}
@keyframes beatboxPulse {
0% {
transform: scale(1);
filter: brightness(1);
}
15% {
transform: scale(1.08);
filter: brightness(1.2);
}
30% {
transform: scale(0.98);
filter: brightness(0.9);
}
45% {
transform: scale(1);
filter: brightness(1);
}
60% {
transform: scale(1.15) rotate(1deg);
filter: brightness(1.3) contrast(1.2);
}
75% {
transform: scale(0.95) rotate(-1deg);
filter: brightness(0.8);
}
100% {
transform: scale(1) rotate(0deg);
filter: brightness(1);
}
}
/* ========================= */
/* Defrag Reveal Effect */
/* ========================= */
.defrag-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
background: #000080; /* Classic defrag blue */
}
.defrag-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
-webkit-mask-image: linear-gradient(to right, black 50%, transparent 50%);
mask-image: linear-gradient(to right, black 50%, transparent 50%);
-webkit-mask-size: 200% 100%;
mask-size: 200% 100%;
animation: defragSweep 3s steps(30, end) both !important;
}
.defrag-wrapper::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
/* Grid overlay to create squares */
background-image:
repeating-linear-gradient(to right, rgba(255,255,255,0.3) 0, rgba(255,255,255,0.3) 1px, transparent 1px, transparent 3.33%),
repeating-linear-gradient(to bottom, rgba(255,255,255,0.3) 0, rgba(255,255,255,0.3) 1px, transparent 1px, transparent 10%);
z-index: 10;
animation: defragGridFade 3.5s both;
}
@keyframes defragSweep {
0% {
-webkit-mask-position: 100% 0;
mask-position: 100% 0;
filter: grayscale(1) sepia(1) hue-rotate(180deg) brightness(1.5);
}
75% {
-webkit-mask-position: 0 0;
mask-position: 0 0;
filter: grayscale(1) sepia(1) hue-rotate(180deg) brightness(1.5);
}
85% {
-webkit-mask-position: 0 0;
mask-position: 0 0;
filter: brightness(2);
}
100% {
-webkit-mask-position: 0 0;
mask-position: 0 0;
filter: none;
}
}
@keyframes defragGridFade {
0% { opacity: 1; }
85% { opacity: 1; }
100% { opacity: 0; }
}
/* ========================= */
/* Radiowave Reveal Effect */
/* ========================= */
.radiowave-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
background: #111;
}
.radiowave-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
animation: radiowaveReveal 2.5s cubic-bezier(0.1, 0.8, 0.2, 1) both !important;
}
.radiowave-wrapper::before,
.radiowave-wrapper::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 200%;
aspect-ratio: 1;
border: 15px solid rgba(0, 255, 255, 0.8);
border-radius: 50%;
pointer-events: none;
z-index: 10;
}
.radiowave-wrapper::before {
animation: radiowaveRings 2s cubic-bezier(0.1, 0.8, 0.2, 1) both;
}
.radiowave-wrapper::after {
animation: radiowaveRings 2s cubic-bezier(0.1, 0.8, 0.2, 1) 0.4s both;
}
@keyframes radiowaveReveal {
0% {
clip-path: circle(0% at 50% 100%);
filter: hue-rotate(180deg) brightness(2) blur(10px);
opacity: 0;
}
30% {
opacity: 1;
}
80% {
clip-path: circle(120% at 50% 100%);
filter: hue-rotate(90deg) brightness(1.2) blur(2px);
}
100% {
clip-path: circle(150% at 50% 100%);
filter: none;
opacity: 1;
}
}
@keyframes radiowaveRings {
0% {
transform: translate(-50%, 50%) scale(0);
opacity: 1;
border-width: 30px;
}
100% {
transform: translate(-50%, 50%) scale(1.5);
opacity: 0;
border-width: 2px;
}
}
/* ========================= */
/* Slow Pulse Effect */
/* ========================= */
.music-slow-pulse {
animation: musicSlowPulse 3s ease-in-out infinite !important;
}
@keyframes musicSlowPulse {
0% { transform: scale(1); filter: brightness(1); }
50% { transform: scale(1.03); filter: brightness(1.15); }
100% { transform: scale(1); filter: brightness(1); }
}
/* ========================= */
/* RSS Ripple Reveal Effect */
/* ========================= */
.rss-ripple-reveal {
animation: rssRippleReveal 2.2s cubic-bezier(0.1, 0.9, 0.2, 1) both !important;
display: block;
transform-origin: bottom left;
}
@keyframes rssRippleReveal {
0% {
clip-path: circle(0% at 0% 100%);
filter: sepia(1) hue-rotate(330deg) saturate(5) brightness(1.5);
opacity: 0;
}
15% {
clip-path: circle(15% at 0% 100%);
filter: sepia(1) hue-rotate(330deg) saturate(5) brightness(1.5);
opacity: 1;
}
20% {
clip-path: circle(15% at 0% 100%);
filter: brightness(1) saturate(1);
}
40% {
clip-path: circle(45% at 0% 100%);
filter: sepia(1) hue-rotate(330deg) saturate(5) brightness(1.5);
}
45% {
clip-path: circle(45% at 0% 100%);
filter: brightness(1) saturate(1);
}
65% {
clip-path: circle(80% at 0% 100%);
filter: sepia(1) hue-rotate(330deg) saturate(5) brightness(1.5);
}
70% {
clip-path: circle(80% at 0% 100%);
filter: brightness(1) saturate(1);
}
90% {
clip-path: circle(150% at 0% 100%);
filter: sepia(1) hue-rotate(330deg) saturate(5) brightness(1.5);
}
100% {
clip-path: circle(150% at 0% 100%);
filter: none;
}
}
/* ========================= */
/* POS Touch Block Reveal */
/* ========================= */
.pos-touch-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
background: #111;
}
.pos-touch-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
animation: posTouchReveal 1.2s steps(15, end) 0.3s both !important;
}
/* Grid overlay for blocky effect */
.pos-touch-wrapper::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(to right, rgba(17,17,17,1) 0, rgba(17,17,17,1) 3px, transparent 3px, transparent 8%),
repeating-linear-gradient(to bottom, rgba(17,17,17,1) 0, rgba(17,17,17,1) 3px, transparent 3px, transparent 15%);
z-index: 10;
animation: posTouchGridFade 2s 1.5s both;
}
/* Touch indicator */
.pos-touch-wrapper::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 80px; height: 80px;
margin-top: -40px; margin-left: -40px;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
pointer-events: none;
z-index: 20;
box-shadow: 0 0 20px rgba(255,255,255,1), 0 0 40px rgba(0, 150, 255, 1);
animation: posTouchFlash 0.6s ease-out both;
}
@keyframes posTouchFlash {
0% { transform: scale(1.5); opacity: 0; }
20% { transform: scale(0.6); opacity: 1; }
80% { transform: scale(2); opacity: 0.8; }
100% { transform: scale(4); opacity: 0; }
}
@keyframes posTouchReveal {
0% {
clip-path: circle(0% at 50% 50%);
filter: brightness(2) saturate(1.5);
}
100% {
clip-path: circle(150% at 50% 50%);
filter: none;
}
}
@keyframes posTouchGridFade {
0% { opacity: 1; }
100% { opacity: 0; }
}
/* ========================= */
/* Spin Blur Materialize */
/* ========================= */
.spin-blur-materialize {
animation: spinBlurMaterialize 1.8s cubic-bezier(0.15, 0.85, 0.3, 1) both !important;
display: block;
transform-origin: center;
}
@keyframes spinBlurMaterialize {
0% {
transform: perspective(1000px) rotateX(-2160deg);
filter: blur(30px) drop-shadow(0 0 50px rgba(255,255,255,0.8));
opacity: 0;
}
50% {
transform: perspective(1000px) rotateX(-360deg);
filter: blur(10px);
opacity: 0.7;
}
100% {
transform: perspective(1000px) rotateX(0deg);
filter: blur(0px) drop-shadow(0 0 0 rgba(255,255,255,0));
opacity: 1;
}
}
/* ========================= */
/* Handkerchief Unfold */
/* ========================= */
.handkerchief-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
perspective: 1500px;
}
.handkerchief-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
animation: handkerchiefUnfold 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
transform-origin: center;
}
@keyframes handkerchiefUnfold {
0% {
clip-path: inset(45% 45% 45% 45%);
transform: rotateX(60deg) rotateY(45deg) scale(0.5);
filter: brightness(0.3) drop-shadow(0 0 10px rgba(0,0,0,1));
opacity: 0;
}
15% {
clip-path: inset(45% 45% 45% 45%);
transform: rotateX(60deg) rotateY(45deg) scale(0.6);
filter: brightness(0.6) drop-shadow(0 0 10px rgba(0,0,0,1));
opacity: 1;
}
45% {
clip-path: inset(45% 0% 45% 0%); /* Unfold horizontally */
transform: rotateX(30deg) rotateY(0deg) scale(0.8);
filter: brightness(0.8) drop-shadow(0 0 10px rgba(0,0,0,0.5));
}
80% {
clip-path: inset(0% 0% 0% 0%); /* Unfold vertically */
transform: rotateX(0deg) rotateY(0deg) scale(1.05);
filter: brightness(1.2) drop-shadow(0 0 0 rgba(0,0,0,0));
}
100% {
clip-path: inset(0% 0% 0% 0%);
transform: rotateX(0deg) rotateY(0deg) scale(1);
filter: none;
}
}
/* ========================= */
/* Banner Wobble Effect */
/* ========================= */
.banner-wobble {
animation: bannerWobble 1.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
display: block;
transform-origin: bottom center;
}
@keyframes bannerWobble {
0% { transform: translateX(0%) rotate(0deg); }
15% { transform: translateX(-4%) rotate(-4deg); }
30% { transform: translateX(3%) rotate(3deg); }
45% { transform: translateX(-2%) rotate(-2deg); }
60% { transform: translateX(1%) rotate(1deg); }
75% { transform: translateX(-0.5%) rotate(-0.5deg); }
100% { transform: translateX(0%) rotate(0deg); }
}
/* ========================= */
/* Transfer Slide Reveal */
/* ========================= */
.transfer-slide-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
}
.transfer-slide-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
animation: transferSlide 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) both !important;
}
@keyframes transferSlide {
0% { transform: translateX(-105%); opacity: 0.5; }
50% { transform: translateX(105%); opacity: 0.8; }
51% { transform: translateX(-105%); opacity: 0; }
100% { transform: translateX(0%); opacity: 1; }
}
/* ========================= */
/* Peel and Stick Reveal */
/* ========================= */
.peel-stick-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
perspective: 1500px;
}
.peel-stick-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
transform-origin: bottom left;
animation: peelStick 1.6s cubic-bezier(0.25, 0.8, 0.25, 1) both !important;
}
@keyframes peelStick {
0% {
transform: rotate3d(1, 1, 0, -70deg) translate(-5%, 5%) scale(1.1);
opacity: 0;
filter: drop-shadow(40px 40px 30px rgba(0,0,0,0.6));
}
20% {
opacity: 1;
}
100% {
transform: rotate3d(1, 1, 0, 0deg) translate(0%, 0%) scale(1);
opacity: 1;
filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
}
}
/* ========================= */
/* Staircase Drop Reveal */
/* ========================= */
.staircase-drop-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
}
.staircase-drop-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
animation: staircaseDrop 1.5s cubic-bezier(0.1, 0.8, 0.2, 1) both !important;
}
@keyframes staircaseDrop {
0% {
clip-path: polygon(0 0, 100% 0, 100% 0, 80% 0, 80% 0, 60% 0, 60% 0, 40% 0, 40% 0, 20% 0, 20% 0, 0 0);
transform: translateY(-20px);
filter: brightness(2);
}
20% {
clip-path: polygon(0 0, 100% 0, 100% 0, 80% 0, 80% 0, 60% 0, 60% 0, 40% 0, 40% 0, 20% 0, 20% 100%, 0 100%);
transform: translateY(-15px);
filter: brightness(1.6);
}
40% {
clip-path: polygon(0 0, 100% 0, 100% 0, 80% 0, 80% 0, 60% 0, 60% 0, 40% 0, 40% 100%, 20% 100%, 20% 100%, 0 100%);
transform: translateY(-10px);
filter: brightness(1.4);
}
60% {
clip-path: polygon(0 0, 100% 0, 100% 0, 80% 0, 80% 0, 60% 0, 60% 100%, 40% 100%, 40% 100%, 20% 100%, 20% 100%, 0 100%);
transform: translateY(-5px);
filter: brightness(1.2);
}
80% {
clip-path: polygon(0 0, 100% 0, 100% 0, 80% 0, 80% 100%, 60% 100%, 60% 100%, 40% 100%, 40% 100%, 20% 100%, 20% 100%, 0 100%);
transform: translateY(0px);
filter: brightness(1.1);
}
100% {
clip-path: polygon(0 0, 100% 0, 100% 100%, 80% 100%, 80% 100%, 60% 100%, 60% 100%, 40% 100%, 40% 100%, 20% 100%, 20% 100%, 0 100%);
transform: translateY(0px);
filter: none;
}
}
/* ========================= */
/* Wring and Unfurl Reveal */
/* ========================= */
.wring-unfurl-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
perspective: 1000px;
}
.wring-unfurl-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
transform-origin: center;
animation: wringUnfurl 2s cubic-bezier(0.2, 0.9, 0.3, 1) both !important;
}
@keyframes wringUnfurl {
0% {
/* Mangled, twisted ball */
transform: rotateX(1080deg) rotateY(720deg) rotateZ(360deg) scaleX(0.1) scaleY(0.1);
filter: brightness(0.2) saturate(0) drop-shadow(0 0 20px rgba(0,0,0,1));
opacity: 0;
}
40% {
/* Pulled tight horizontally, still twisted vertically like a towel */
transform: rotateX(360deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(0.05);
filter: brightness(0.5) saturate(0.5) drop-shadow(0 20px 10px rgba(0,0,0,0.8));
opacity: 1;
}
75% {
/* Unfurling vertically */
transform: rotateX(180deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(0.5);
filter: brightness(0.8) saturate(0.8) drop-shadow(0 10px 5px rgba(0,0,0,0.5));
}
100% {
/* Flat and perfect */
transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scaleX(1) scaleY(1);
filter: none;
opacity: 1;
}
}
/* ========================= */
/* Gallery Blink-in Effect */
/* ========================= */
.gallery-row.blink-trigger [class*="-collage"],
.certificates.blink-trigger .certificate,
.clientShowcase.blink-trigger .clientLogo {
animation: blinkIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
}
@keyframes blinkIn {
0% { opacity: 0; transform: scale(0.5) translateY(20px); filter: brightness(2) contrast(1.5); }
50% { opacity: 0.8; filter: brightness(1.5) contrast(1.2); }
100% { opacity: 1; transform: scale(1) translateY(0); filter: none; }
}
/* ========================= */
/* Diagonal Peel and Stick */
/* ========================= */
.peel-stick-container {
position: relative;
overflow: hidden;
transform-origin: center;
background: transparent;
}
.peel-stick-container .post-banner {
display: block;
width: 100%;
height: auto;
clip-path: polygon(0 0, 0 0, 0 0, 0 0);
opacity: 0;
transition: none; /* Controlled by animation */
}
.peel-stick-container.peel-active .post-banner {
animation: peelReveal 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
/* The moving highlight/curl edge */
.peel-stick-container::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(135deg,
rgba(255,255,255,0) 48%,
rgba(255,255,255,0.4) 50%,
rgba(0,0,0,0.05) 52%,
rgba(0,0,0,0) 54%);
transform: rotate(45deg) translate(-100%, -100%);
pointer-events: none;
z-index: 2;
}
.peel-stick-container.peel-active::after {
animation: peelShine 1.2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}
/* The physical "stick" settling effect */
.peel-stick-container.stuck {
animation: stickSettle 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes peelReveal {
0% { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); opacity: 1; transform: scale(1.05) rotate(-1deg); }
100% { clip-path: polygon(0 0, 200% 0, 0 200%, 0 100%); opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes peelShine {
0% { transform: rotate(45deg) translate(-100%, -100%); }
100% { transform: rotate(45deg) translate(100%, 100%); }
}
@keyframes stickSettle {
0% { transform: scale(1); }
40% { transform: scale(0.985); }
70% { transform: scale(1.01); }
100% { transform: scale(1); }
}
/* ========================= */
/* Sci-Fi Smoke Container */
/* ========================= */
.smoke-container {
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.smoke-container canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.rain-container {
position: relative;
overflow: hidden;
margin-bottom: 20px;
}
.rain-container canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.smoke-container canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* ========================= */
/* Shrink to Fit Reveal */
/* ========================= */
.shrink-fit-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
}
.shrink-fit-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
animation: shrinkFitReveal 2s cubic-bezier(0.25, 0.8, 0.25, 1) both !important;
transform-origin: center;
}
@keyframes shrinkFitReveal {
0% {
/* Extreme crop to force portrait document ratio on wide banners */
clip-path: inset(0% 45% 0% 45%);
transform: scale(0.6);
filter: drop-shadow(0 0 20px rgba(0,0,0,0.8)) sepia(0.5) contrast(1.5);
}
30% {
/* Pauses momentarily as a tall, narrow document */
clip-path: inset(0% 45% 0% 45%);
transform: scale(0.7);
filter: drop-shadow(0 0 10px rgba(0,0,0,0.5)) sepia(0.5) contrast(1.5);
}
75% {
/* Expands rapidly to full size */
clip-path: inset(0% 0% 0% 0%);
transform: scale(1.02);
filter: sepia(0) contrast(1);
}
100% {
clip-path: inset(0% 0% 0% 0%);
transform: scale(1);
filter: none;
}
}
/* ========================= */
/* Strip Reveal Effect */
/* ========================= */
.strip-reveal-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
background: #111;
}
.strip-reveal-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
animation: stripReveal 1.2s steps(10, end) both !important;
}
@keyframes stripReveal {
0% {
clip-path: inset(0 0 100% 0);
filter: brightness(2.5) saturate(1.5);
}
100% {
clip-path: inset(0 0 0% 0);
filter: none;
}
}
/* ========================= */
/* Blue Flash Reveal */
/* ========================= */
.blue-flash-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
}
.blue-flash-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
animation: blueFlashReveal 1.2s cubic-bezier(0.1, 0.9, 0.2, 1) both !important;
}
@keyframes blueFlashReveal {
0% {
opacity: 0;
filter: sepia(1) hue-rotate(190deg) saturate(5) brightness(3);
transform: scale(1.05);
}
10% {
opacity: 1;
filter: sepia(1) hue-rotate(190deg) saturate(5) brightness(2.5);
transform: scale(1.02);
}
100% {
filter: sepia(0) hue-rotate(0deg) saturate(1) brightness(1);
transform: scale(1);
}
}
/* ========================= */
/* Strobe Sparkle Reveal */
/* ========================= */
.strobe-sparkle-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
background: #000;
}
.strobe-sparkle-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
animation: strobeIn 2s linear both !important;
}
/* Sparkle elements overlay */
.strobe-sparkle-wrapper::before,
.strobe-sparkle-wrapper::after {
content: '';
position: absolute;
top: -50%; left: -50%; right: -50%; bottom: -50%;
pointer-events: none;
z-index: 10;
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,1) 2px, transparent 4px),
radial-gradient(circle at 80% 40%, rgba(255,255,255,1) 3px, transparent 6px),
radial-gradient(circle at 40% 70%, rgba(255,255,255,1) 2px, transparent 5px),
radial-gradient(circle at 70% 80%, rgba(255,255,255,1) 1.5px, transparent 3px),
radial-gradient(circle at 50% 50%, rgba(255,255,255,1) 3px, transparent 7px),
radial-gradient(circle at 10% 80%, rgba(255,255,255,1) 1.5px, transparent 3px),
radial-gradient(circle at 90% 20%, rgba(255,255,255,1) 3px, transparent 5px);
background-size: 100% 100%;
animation: sparkleFlash 2s ease-in-out both;
mix-blend-mode: color-dodge;
}
.strobe-sparkle-wrapper::after {
background-image:
radial-gradient(circle at 30% 20%, rgba(200,255,255,1) 3px, transparent 6px),
radial-gradient(circle at 60% 80%, rgba(255,200,255,1) 2px, transparent 5px),
radial-gradient(circle at 80% 10%, rgba(255,255,200,1) 1.5px, transparent 3px),
radial-gradient(circle at 20% 70%, rgba(200,200,255,1) 3px, transparent 7px);
animation: sparkleFlash 2s ease-in-out 0.1s both reverse;
}
@keyframes strobeIn {
0% { opacity: 0; filter: brightness(3); }
3% { opacity: 1; filter: brightness(2); }
6% { opacity: 0; filter: brightness(3); }
9% { opacity: 1; filter: brightness(2); }
12% { opacity: 0; filter: brightness(3); }
15% { opacity: 1; filter: brightness(2); }
18% { opacity: 0; filter: brightness(3); }
21% { opacity: 1; filter: brightness(1.5); }
25% { opacity: 0; filter: brightness(2); }
30% { opacity: 1; filter: brightness(1.5); }
100% { opacity: 1; filter: none; }
}
@keyframes sparkleFlash {
0% { opacity: 0; transform: scale(0.8) rotate(0deg); }
15% { opacity: 1; transform: scale(1.1) rotate(5deg); }
30% { opacity: 0.2; transform: scale(0.9) rotate(-5deg); }
45% { opacity: 1; transform: scale(1.2) rotate(10deg); }
60% { opacity: 0.5; transform: scale(1) rotate(-10deg); }
100% { opacity: 0; transform: scale(1.5) rotate(20deg); }
}
/* ========================= */
/* Sparkler Explode Reveal */
/* ========================= */
.sparkler-explode-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
background: #000;
}
.sparkler-explode-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
animation: sparklerReveal 2.2s cubic-bezier(0.2, 0.9, 0.3, 1) both !important;
}
.sparkler-explode-wrapper::before {
content: '';
position: absolute;
inset: -50%;
z-index: 2;
pointer-events: none;
background: radial-gradient(circle 8px at 50% 50%, rgba(255,255,200,1), rgba(255,200,50,0.6) 40%, transparent 70%);
animation: sparklerBurst 2.2s ease-out forwards;
}
.sparkler-explode-wrapper::after {
content: '';
position: absolute;
inset: -100%;
z-index: 3;
pointer-events: none;
animation: sparklerParticles 2.2s ease-out forwards;
}
@keyframes sparklerReveal {
0% { opacity: 0; filter: brightness(0) saturate(0); }
18% { opacity: 1; filter: brightness(0.4) saturate(0.6); }
40% { filter: brightness(1.6) saturate(1.4) contrast(1.1); }
65% { filter: brightness(0.9) saturate(1.1); }
100% { filter: brightness(1) saturate(1) contrast(1); }
}
@keyframes sparklerBurst {
0% {
transform: scale(0.01);
opacity: 1;
background: radial-gradient(circle 8px at 50% 50%, rgba(255,255,200,1), rgba(255,200,50,0.8) 30%, transparent 60%);
}
8% {
transform: scale(1);
background: radial-gradient(circle 120px at 50% 50%, rgba(255,255,220,0.9), rgba(255,200,50,0.5) 35%, transparent 65%);
}
20% {
transform: scale(2);
background: radial-gradient(circle 250px at 50% 50%, rgba(255,255,220,0.5), rgba(255,200,50,0.2) 45%, transparent 75%);
opacity: 0.8;
}
50% {
transform: scale(4);
background: radial-gradient(circle 400px at 50% 50%, rgba(255,255,220,0.15), transparent 70%);
opacity: 0.2;
}
100% {
transform: scale(6);
background: transparent;
opacity: 0;
}
}
@keyframes sparklerParticles {
0% {
box-shadow:
0 0 0 0 #fff;
opacity: 1;
}
12% {
box-shadow:
-40px -60px 0 3px rgba(255,255,150,0.95),
50px -45px 0 2px rgba(255,200,50,0.85),
70px 30px 0 3px rgba(255,255,200,0.9),
-55px 55px 0 2px rgba(255,200,50,0.75),
-75px -20px 0 3px rgba(255,255,150,0.85),
25px 75px 0 2px rgba(255,200,50,0.65),
90px -5px 0 3px rgba(255,255,200,0.7),
-30px -85px 0 2px rgba(255,200,50,0.8),
5px 90px 0 3px rgba(255,255,150,0.6),
-85px 15px 0 2px rgba(255,200,50,0.7);
opacity: 1;
}
30% {
box-shadow:
-80px -110px 0 2px rgba(255,255,150,0.5),
90px -80px 0 1px rgba(255,200,50,0.4),
120px 55px 0 2px rgba(255,255,200,0.35),
-95px 100px 0 1px rgba(255,200,50,0.3),
-120px -40px 0 2px rgba(255,255,150,0.4),
45px 120px 0 1px rgba(255,200,50,0.25),
140px -10px 0 2px rgba(255,255,200,0.2),
-50px -130px 0 1px rgba(255,200,50,0.35);
opacity: 0.6;
}
60% {
box-shadow:
-100px -140px 0 1px rgba(255,255,150,0.2),
110px -100px 0 0 rgba(255,200,50,0.1),
150px 70px 0 1px rgba(255,255,200,0.1),
-120px 130px 0 0 rgba(255,200,50,0.05);
opacity: 0.2;
}
100% {
box-shadow: 0 0 0 0 transparent;
opacity: 0;
}
}
/* ========================= */
/* Red Warning Flash */
/* ========================= */
.red-warning-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
background: #000;
}
.red-warning-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
animation: warningImage 2s ease-in-out 2 both;
}
.red-warning-wrapper::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none;
z-index: 10;
background: radial-gradient(circle at center, transparent 10%, rgba(255, 0, 0, 0.8) 100%);
box-shadow: inset 0 0 60px rgba(255,0,0,1);
mix-blend-mode: multiply;
animation: warningOverlay 2s ease-in-out 2 both;
}
@keyframes warningOverlay {
0% { opacity: 0; }
10% { opacity: 1; }
20% { opacity: 0.2; }
30% { opacity: 1; }
50%, 100% { opacity: 0; }
}
@keyframes warningImage {
0% { filter: brightness(1) contrast(1); transform: scale(1); }
10% { filter: brightness(1.2) contrast(1.2); transform: scale(1.02); }
20% { filter: brightness(1) contrast(1); transform: scale(1.01); }
30% { filter: brightness(1.3) contrast(1.2); transform: scale(1.03); }
50%, 100% { filter: brightness(1) contrast(1); transform: scale(1); }
}
/* ========================= */
/* Building Blocks Reveal */
/* ========================= */
.building-blocks-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
background: #000;
}
.building-blocks-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
}
.building-block {
position: absolute;
z-index: 2;
background-color: #16162a;
box-sizing: border-box;
border: 1px solid rgba(255,255,255,0.08);
transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
opacity: 1;
transform: scale(1);
}
.building-block.revealed {
opacity: 0;
transform: scale(1.12) translateY(-14px);
}
/* ========================= */
/* Up Arrow Reveal */
/* ========================= */
.up-arrow-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
background: #000;
}
.up-arrow-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
}
.up-arrow-wrapper::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: #16162a;
clip-path: polygon(
0% 0%, 100% 0%,
100% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%
);
animation: arrowReveal 2.8s cubic-bezier(0.15, 0.85, 0.25, 1) forwards;
}
@keyframes arrowReveal {
0% {
clip-path: polygon(
0% 0%, 100% 0%,
100% 100%, 50% 100%, 50% 100%, 50% 100%, 0% 100%
);
}
28% {
clip-path: polygon(
0% 0%, 100% 0%,
100% 100%, 53% 100%, 50% 90%, 47% 100%, 0% 100%
);
}
52% {
clip-path: polygon(
0% 0%, 100% 0%,
100% 100%, 70% 100%, 50% 50%, 30% 100%, 0% 100%
);
}
72% {
clip-path: polygon(
0% 0%, 100% 0%,
100% 100%, 90% 100%, 50% 10%, 10% 100%, 0% 100%
);
}
86% {
clip-path: polygon(
0% 0%, 100% 0%,
100% 100%, 115% 100%, 50% -30%, -15% 100%, 0% 100%
);
}
100% {
clip-path: polygon(
0% 0%, 100% 0%,
100% -50%, 150% -50%, 50% -100%, -50% -50%, 0% -50%
);
}
}
/* ========================= */
/* Starburst Reveal */
/* ========================= */
.starburst-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
background: #000;
}
.starburst-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
}
.starburst-wrapper::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: #16162a;
clip-path: polygon(
250% 50%, 119% 90%, 150% 223%,
50% 130%, -50% 223%, -19% 90%,
-150% 50%, -19% 10%, -50% -123%,
50% -30%, 150% -123%, 119% 10%
);
animation: starburstReveal 2.6s cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}
@keyframes starburstReveal {
0% {
clip-path: polygon(
250% 50%, 119% 90%, 150% 223%,
50% 130%, -50% 223%, -19% 90%,
-150% 50%, -19% 10%, -50% -123%,
50% -30%, 150% -123%, 119% 10%
);
}
30% {
clip-path: polygon(
190% 50%, 93% 75%, 120% 171%,
50% 100%, -20% 171%, 7% 75%,
-90% 50%, 7% 25%, -20% -71%,
50% 0%, 120% -71%, 93% 25%
);
}
60% {
clip-path: polygon(
120% 50%, 72% 63%, 85% 111%,
50% 75%, 15% 111%, 28% 63%,
-20% 50%, 28% 37%, 15% -11%,
50% 25%, 85% -11%, 72% 37%
);
}
100% {
clip-path: polygon(
50% 50%, 50% 50%, 50% 50%,
50% 50%, 50% 50%, 50% 50%,
50% 50%, 50% 50%, 50% 50%,
50% 50%, 50% 50%, 50% 50%
);
}
}
/* ========================= */
/* Shimmer Sweep Effect */
/* ========================= */
.shimmer-sweep-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
}
.shimmer-sweep-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
}
.shimmer-sweep-wrapper::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 30%;
height: 100%;
background: linear-gradient(
to right,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.8) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg);
animation: shimmerSweep 5s cubic-bezier(0.2, 0.8, 0.2, 1) 2 forwards;
pointer-events: none;
z-index: 10;
mix-blend-mode: overlay;
}
@keyframes shimmerSweep {
0% { left: -100%; }
50%, 100% { left: 200%; }
}
/* Green glimmer sweep for Walkerbay banner */
.glimmer-green-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
}
.glimmer-green-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
}
.glimmer-green-wrapper::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 30%;
height: 100%;
background: linear-gradient(
to right,
rgba(0, 255, 0, 0) 0%,
rgba(0, 255, 0, 0.4) 50%,
rgba(0, 255, 0, 0) 100%
);
transform: skewX(-25deg);
animation: shimmerSweep 5s cubic-bezier(0.2, 0.8, 0.2, 1) 3 forwards;
pointer-events: none;
z-index: 10;
mix-blend-mode: overlay;
}
/* Golden glimmer sweep for advertorial banner */
.glimmer-gold-wrapper {
position: relative;
display: block;
overflow: hidden;
margin-top: 15px;
margin-bottom: 10px;
}
.glimmer-gold-wrapper img {
display: block;
}
.glimmer-gold-wrapper::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 30%;
height: 100%;
background: linear-gradient(
to right,
rgba(255, 215, 0, 0) 0%,
rgba(255, 215, 0, 0.5) 50%,
rgba(255, 215, 0, 0) 100%
);
transform: skewX(-25deg);
animation: shimmerSweep 5s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
pointer-events: none;
z-index: 10;
mix-blend-mode: overlay;
}
/* ========================= */
/* Snake Border & Blue Flash */
/* ========================= */
.snake-border-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
}
.snake-border-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
animation: bluePulse 6s ease-out forwards;
}
.snake-svg {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
pointer-events: none;
z-index: 10;
}
.snake-rect {
fill: none;
stroke: #00BFFF;
stroke-width: 10px; /* 5px visible inner border */
stroke-dasharray: 25 75;
animation: snakeDash 6s linear forwards;
filter: drop-shadow(0 0 8px #00BFFF) drop-shadow(0 0 15px #00BFFF);
}
@keyframes snakeDash {
0% { stroke-dashoffset: 0; opacity: 1; }
98% { stroke-dashoffset: -200; opacity: 1; } /* -200 offset equals exactly two full laps */
100% { stroke-dashoffset: -200; opacity: 0; } /* Fade out cleanly at the end */
}
@keyframes bluePulse {
0% { filter: brightness(1) sepia(0) hue-rotate(0deg) saturate(1); }
25% { filter: brightness(1.2) sepia(0.8) hue-rotate(190deg) saturate(3); }
50% { filter: brightness(1) sepia(0) hue-rotate(0deg) saturate(1); }
75% { filter: brightness(1.2) sepia(0.8) hue-rotate(190deg) saturate(3); }
100% { filter: brightness(1) sepia(0) hue-rotate(0deg) saturate(1); }
}
/* ========================= */
/* Swing & Flash Reveal */
/* ========================= */
.pop-flash-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
}
.pop-flash-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
transform-origin: center center;
animation: popAndFlash 2.5s cubic-bezier(0.25, 0.8, 0.25, 1) both !important;
}
@keyframes popAndFlash {
0% { transform: scale(0.6); opacity: 0; filter: brightness(2); }
30% { transform: scale(1.05); opacity: 1; filter: brightness(1); }
50% { transform: scale(0.98); }
65% { transform: scale(1); filter: brightness(1); }
75% { transform: scale(1); filter: sepia(1) hue-rotate(320deg) saturate(10) brightness(2) drop-shadow(0 0 20px red); }
100% { transform: scale(1); filter: none; }
}
/* ========================= */
/* Double Bounce Reveal */
/* ========================= */
.bounce-twice-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
}
.bounce-twice-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
transform-origin: bottom center;
animation: bounceTwice 1.8s cubic-bezier(0.28, 0.84, 0.42, 1) both !important;
}
@keyframes bounceTwice {
0% { transform: translateY(-150%) scaleY(1.1); opacity: 0; }
25% { transform: translateY(0%) scaleY(0.85); opacity: 1; }
45% { transform: translateY(-25%) scaleY(1.05); }
65% { transform: translateY(0%) scaleY(0.95); }
80% { transform: translateY(-8%) scaleY(1.02); }
100% { transform: translateY(0%) scaleY(1); }
}
/* ========================= */
/* Zoom Bounce Reveal */
/* ========================= */
.zoom-bounce-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
}
.zoom-bounce-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
transform-origin: center center;
animation: zoomBounce 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
@keyframes zoomBounce {
0% { transform: scale(0); opacity: 0; }
50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 20px 20px rgba(0,0,0,0.4)); }
100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(0,0,0,0)); }
}
/* ========================= */
/* Unfold Reveal */
/* ========================= */
.unfold-reveal-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
perspective: 2000px;
}
.unfold-reveal-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
transform-origin: top;
animation: unfoldBanner 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes unfoldBanner {
0% { transform: rotateX(-90deg); opacity: 0; filter: brightness(0.4); }
100% { transform: rotateX(0deg); opacity: 1; filter: brightness(1); }
}
/* ========================= */
/* Sink and Bounce Reveal */
/* ========================= */
.sink-bounce-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
perspective: 1500px;
background: transparent;
}
.sink-bounce-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
transform-style: preserve-3d;
animation: sinkAndBounce 1.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes sinkAndBounce {
0% {
transform: translateZ(0) scale(1);
filter: drop-shadow(0 0 0 rgba(0,0,0,0));
opacity: 0;
}
10% {
opacity: 1;
}
30% {
transform: translateZ(-150px) scale(0.85);
filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6));
}
100% {
transform: translateZ(0) scale(1);
filter: drop-shadow(0 5px 15px rgba(0,0,0,0.2));
opacity: 1;
}
}
/* ========================= */
/* Windows 11 Fluent Reveal */
/* ========================= */
.windows-reveal-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
border-radius: 8px; /* Signature Windows 11 rounded corners */
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); /* Soft acrylic drop shadow */
}
.windows-reveal-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
border-radius: 8px;
animation: fluentSlideUp 1.8s cubic-bezier(0, 0.55, 0.45, 1) both !important;
}
.windows-reveal-wrapper::after {
content: '';
position: absolute;
top: -50%; left: -50%;
width: 200%; height: 200%;
/* Swirling blue light emulating the Windows 11 'Bloom' wallpaper */
background: conic-gradient(from 180deg at 50% 50%, rgba(0, 120, 212, 0) 0%, rgba(0, 120, 212, 0.9) 50%, rgba(0, 120, 212, 0) 100%);
mix-blend-mode: screen;
animation: windowsBloom 2.5s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
pointer-events: none;
z-index: 10;
}
@keyframes fluentSlideUp {
0% { transform: translateY(60px) scale(0.9); filter: blur(30px) saturate(1.5); opacity: 0; }
100% { transform: translateY(0) scale(1); filter: blur(0px) saturate(1); opacity: 1; }
}
@keyframes windowsBloom {
0% { transform: scale(0) rotate(0deg); opacity: 1; }
100% { transform: scale(1.5) rotate(180deg); opacity: 0; }
}
/* ========================= */
/* Privacy Decrypt Reveal */
/* ========================= */
.privacy-reveal-wrapper {
position: relative;
display: block;
margin: 0 0 20px 0;
overflow: hidden;
background: #111; /* Dark background to sell the scan effect */
border-radius: 4px;
}
.privacy-reveal-wrapper .post-banner {
margin: 0 !important;
display: block;
width: 100%;
/* Start clipped to 0 height, reveal downwards while heavily filtered */
animation: decryptReveal 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards !important;
}
.privacy-reveal-wrapper::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: #00FF41; /* Matrix/Hacker Green */
box-shadow: 0 0 10px #00FF41, 0 5px 20px #00FF41;
/* Scanner sweeps down synchronously with the clip-path */
animation: decryptScanner 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
z-index: 10;
}
@keyframes decryptReveal {
0% { clip-path: inset(0 0 100% 0); filter: grayscale(1) contrast(2) brightness(0.5); }
80% { filter: grayscale(0.8) contrast(1.5) brightness(0.8); }
100% { clip-path: inset(0 0 0 0); filter: grayscale(0) contrast(1) brightness(1); }
}
@keyframes decryptScanner {
0% { top: 0%; opacity: 1; }
90% { top: 100%; opacity: 1; }
100% { top: 100%; opacity: 0; }
}
/* Matrix Digital Rain Effect Overlay */
.matrix-container {
position: relative;
width: 100%;
overflow: hidden;
line-height: 0;
margin-bottom: 20px;
}
.matrix-container .post-banner.banner-darken {
filter: brightness(0.45) contrast(1.2) saturate(0.85); /* Adjusted night look for better visibility */
transition: filter 1s ease;
}
#matrixCanvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
opacity: 0.65; /* Balanced for the darker night-time banner */
}
/* Darkened Digital Glitch Effect for Banners - Aggressive & Frequent */
.banner-glitch {
filter: brightness(0.35) contrast(1.3);
animation: bannerGlitch 2s infinite linear;
}
@keyframes bannerGlitch {
0%, 15%, 35%, 55%, 75%, 95%, 100% {
transform: translate(0) skew(0);
filter: brightness(0.35) contrast(1.3);
}
16% {
transform: translate(-6px, 3px) skewX(5deg);
filter: brightness(0.9) hue-rotate(180deg) invert(0.2);
}
17% {
transform: translate(6px, -3px) skewX(-5deg);
filter: brightness(0.3) hue-rotate(-180deg);
}
56% {
transform: translate(-3px, -3px) scaleY(1.1);
filter: brightness(0.8) saturate(5);
box-shadow: 5px 0 0 rgba(255,0,0,0.5), -5px 0 0 rgba(0,255,255,0.5);
}
57% {
transform: translate(0);
filter: brightness(0.35) contrast(1.3);
box-shadow: none;
}
96% {
transform: translate(0, 4px) scaleX(1.1);
filter: brightness(1.1) contrast(2) grayscale(1);
}
97% {
transform: translate(0);
}
}
/* === end of effects.css === */
/* >>> footer.css (6947 bytes) */
/* Add 10px left padding to the second footer section (desktop only) */
.footerHours {
padding-left: 10px;
}
@media (max-width: 900px) {
.footerHours {
padding-left: 0;
}
}
/* Flexbox-based sizing for footer sections: first 300px (Follow Us), second 280px (Office Hours), third 370px (Copyright) */
.responsive-footer .footerSection.footerFollow { /* 300px wide (Follow Us) */
flex-basis: 300px;
max-width: 300px;
min-width: 220px;
}
.responsive-footer .footerSection.footerHours { /* 280px wide (Office Hours) */
flex-basis: 280px;
max-width: 280px;
min-width: 180px;
}
.responsive-footer .footerSection.footerCopyright { /* 370px wide (Copyright) */
flex-basis: 370px;
max-width: 370px;
min-width: 220px;
}
@media (max-width: 900px) {
.responsive-footer .footerSection {
flex-basis: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
}
/* Depress social icons on click */
.footerSocialIconLink:active {
transform: scale(0.92);
box-shadow: 0 1px 4px rgba(0,0,0,0.18) inset;
}
/* Reduce glassy overlay on hover to make icon colors pop */
.footerSocialIconLink:hover::after {
background: linear-gradient(120deg, rgba(255,255,255,0.10) 10%, rgba(255,255,255,0.03) 60%, rgba(255,255,255,0.08) 100%);
box-shadow: none;
}
/* Liquid glassy overlay for social icon links */
.footerSocialIconLink {
position: relative;
z-index: 1;
display: inline-block;
border-radius: 50%;
overflow: hidden;
}
.footerSocialIconLink::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
pointer-events: none;
background: linear-gradient(120deg, rgba(255,255,255,0.35) 10%, rgba(255,255,255,0.10) 60%, rgba(255,255,255,0.25) 100%);
box-shadow: 0 2px 8px 0 rgba(255,255,255,0.10) inset, 0 1.5px 0 0 rgba(255,255,255,0.18);
z-index: 2;
}
/* Liquid glassy overlay for social icons */
.footerSocialIconImg {
position: relative;
z-index: 1;
}
.footerSocialIconImg::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 50%;
pointer-events: none;
background: linear-gradient(120deg, rgba(255,255,255,0.35) 10%, rgba(255,255,255,0.10) 60%, rgba(255,255,255,0.25) 100%);
box-shadow: 0 2px 8px 0 rgba(255,255,255,0.10) inset, 0 1.5px 0 0 rgba(255,255,255,0.18);
z-index: 2;
}
/* Move the social icons in footer section 1 (FOLLOW US) 10px to the left */
.footerSection.footerFollow .footerSocialIcons {
margin-left: -10px;
margin-top: 20px;
}
/* Move the h3 title in footer section 1 (FOLLOW US) 20px to the right */
.footerSection.footerFollow h3 {
padding-left: 20px;
}
/* Social icon images in the footer */
.footerSocialIconImg {
display: inline-block;
width: 45px;
height: 45px;
border-radius: 50%;
background: transparent;
box-shadow: none;
object-fit: contain;
border: none;
transition: none;
}
.footerSocialIcons,
.footerHoursList {
list-style: none;
padding-left: 0;
margin-left: 0;
}
/* Add 10px left padding to the first footer section (desktop only) */
.footerFollow {
padding-left: 10px;
}
@media (max-width: 900px) {
.footerFollow {
padding-left: 0;
}
}
/* Make all footer text except headings white on desktop and mobile */
.responsive-footer,
.responsive-footer p,
.responsive-footer ul,
.responsive-footer li,
.responsive-footer .footerChicklets {
color: #fff;
}
.responsive-footer a,
.responsive-footer a:visited,
.responsive-footer a:active {
color: #fff !important;
text-decoration: underline;
}
.responsive-footer h3 {
color: #fff;
}
/* Responsive footer layout for three sections: Follow Us, Office Hours, Copyright */
.responsive-footer {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: stretch;
gap: 32px;
padding: 32px 16px 16px 16px;
background: #222;
color: #fff;
border-top: 4px solid #0556AF; /* Updated footer line color */
}
.footerSection {
flex: 0 0 auto;
min-width: 0;
margin-bottom: 16px;
}
/* Ensure each footer section has a minimum width for layout stability */
.responsive-footer .footerSection.footerFollow,
.responsive-footer .footerSection.footerCopyright {
min-width: 220px;
}
.responsive-footer .footerSection.footerHours {
min-width: 180px;
}
.footerSection h3 {
font-size: 1.1em;
letter-spacing: 0.05em;
margin-bottom: 12px;
color: #fff;
text-transform: uppercase;
}
.footerSocialIcons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
max-width: 100%;
justify-content: center;
}
.footerSocialIcons a {
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
background: transparent;
border-radius: 50%;
text-decoration: none;
padding: 0;
border: none;
box-shadow: none;
transition: none;
}
.footerSocialIcons a:hover {
background: transparent;
}
.footerSocialIcons i {
/* removed, not used */
}
.footerSocialIcons a:hover i {
/* removed, not used */
}
.footerSocialIcons .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.footerHoursList {
list-style: none;
padding: 0;
margin: 0;
font-size: 1em;
line-height: 1.7;
}
.footerCopyright p {
margin: 0 0 10px 0;
}
.footerChicklets {
margin-top: 8px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.footerChicklets img {
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 4px rgba(0,0,0,0.10);
}
@media (max-width: 900px) {
.responsive-footer {
flex-direction: column;
align-items: stretch;
gap: 20px;
padding: 24px 8px 8px 8px;
}
.footerSection {
min-width: 0;
margin-bottom: 0;
}
}
/*
footer.css - Footer styles for SOHO Systems
Last commented: 2025-08-23
Sections: Footer Container, Footer Text, Footer Chicklets
*/
/* This document contains all the styling pertaining to the FOOTER SECTION of the website */
/* Footer Container: Main footer box */
.footerContainer {
background-color: #890402;
margin-top: 0;
/* Push footer container off bottom of browser */
margin-bottom: 20px;
/* Add some space inside the bottom of the footer container */
padding-bottom: 15px;
border-bottom-left-radius: 18px;
border-bottom-right-radius: 18px;
overflow: hidden;
position: relative;
z-index: 2;
transform: translate3d(0, -3px, 0) !important;
box-shadow:
0 -10px 22px rgba(70, 18, 8, 0.16),
0 -2px 8px rgba(255, 100, 40, 0.12);
will-change: transform, box-shadow;
}
/* Footer Text: Copyright and links */
/* === end of footer.css === */
/* >>> formatting.css (7839 bytes) */
/* Footer copyright text */
.footerCopyright p {
font-size: 0.95em;
line-height: 1.5;
}
/*
formatting.css - Blog post and content formatting styles for SOHO Systems
Last commented: 2025-08-23
Sections: Post Section, Paragraphs, Highlights, Alignments
*/
/* Post Section: Main content area for posts */
.postSection {
max-width: 100%;
min-width: 100%;
margin-top: 30px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
padding-top: 4px;
padding-right: 14px;
padding-bottom: 0;
padding-left: 8px;
box-sizing: border-box;
}
/* Notification Box Styles */
.notification-box {
width: 100%;
color: #222;
border: 5px solid transparent;
background: linear-gradient(#fff9c4, #fff9c4) padding-box,
repeating-linear-gradient(45deg, #FFA000, #FFA000 10px, #fff9c4 10px, #fff9c4 20px) border-box;
border-radius: 6px;
padding: 1em 1.5em;
margin: 1.2em auto 1.4em auto;
font-size: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
display: block;
box-sizing: border-box;
}
.notification-box.success {
color: #0F8B00;
background: linear-gradient(#fff9c4, #fff9c4) padding-box,
repeating-linear-gradient(45deg, #0F8B00, #0F8B00 10px, #fff9c4 10px, #fff9c4 20px) border-box;
}
.notification-box.error {
color: #B30000;
background: linear-gradient(#fff9c4, #fff9c4) padding-box,
repeating-linear-gradient(45deg, #B30000, #B30000 10px, #fff9c4 10px, #fff9c4 20px) border-box;
}
.notification-box.info {
color: #004080;
background: linear-gradient(#fff9c4, #fff9c4) padding-box,
repeating-linear-gradient(45deg, #004080, #004080 10px, #fff9c4 10px, #fff9c4 20px) border-box;
}
/* Notification box span text */
.notification-box-text {
display: inline;
white-space: normal;
line-height: inherit;
font: inherit;
}
/* Consent Banner */
#consent-banner {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
background: #ed150a;
color: #fff;
text-align: center;
padding: 0.3em 0 0.5em 0;
z-index: 100000;
font-size: 0.9em;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
/* Initially hidden, shown via JavaScript */
display: none;
}
#consent-banner-content {
max-width: 990px;
margin: 0 auto;
padding: 0 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.consent-banner-text {
text-align: center;
display: block;
margin: 0;
padding: 0.3em 0;
}
.consent-banner-privacy-link {
text-decoration: underline;
color: #fff !important;
}
.consent-banner-privacy-link:hover {
color: #fff !important;
}
#consent-banner-buttons {
display: flex;
justify-content: center;
gap: 10px;
margin: 5px 0 10px 0;
width: 100%;
}
.consent-button {
padding: 0.4em 1.2em;
border: none;
border-radius: 4px;
color: #fff;
font-weight: bold;
cursor: pointer;
margin: 0;
min-width: 80px;
}
#consent-accept {
background: #0F8B00;
}
#consent-decline {
background: #0074d9;
}
/* Remove bottom margin from the last paragraph in postSection */
.postSection p:last-child {
margin-bottom: 0;
}
@media (max-width: 767px) {
#consent-banner-content {
padding: 0 10px;
}
#consent-banner-buttons {
display: flex;
flex-direction: row;
gap: 5px;
margin: 5px 0 15px 0;
justify-content: center;
width: 100%;
}
.consent-button {
display: inline-block;
margin: 0 2px;
padding: 0.3em 1em;
}
.postSection {
max-width: 100% !important;
min-width: 0 !important;
width: 100% !important;
margin: 0 0 10px 0 !important;
padding: 12px 15px 0 15px !important;
box-sizing: border-box;
word-break: break-word;
overflow-wrap: break-word;
text-align: left !important;
}
.postSection p {
margin-top: 0;
margin-bottom: 18px;
margin-left: 0;
margin-right: 0;
font-size: 16px;
padding: 0;
box-sizing: border-box;
word-break: break-word;
overflow-wrap: break-word;
}
h1,
.headingH1 {
font-size: clamp(1.4rem, 6vw, 2.1rem) !important;
line-height: 1.15;
margin-top: 0.5em;
margin-bottom: 0.5em;
text-align: center;
}
}
/* Paragraphs */
/* Paragraphs: Styling for paragraphs in posts */
.postSection p {
/* cap width */
width: 100%;
/* allow fluid shrink */
/* removed min-width to allow fluid behavior */
margin-top: 0;
margin-bottom: 20px;
margin-left: auto;
/* center horizontally */
margin-right: auto;
/* center horizontally */
font-family: "Poppins", "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 1.05rem;
color: rgb(24, 23, 23);
line-height: 1.7;
text-indent: 0;
box-sizing: border-box;
}
/* Paragraph indentation under H1 / H2 / H3 / H4 headings
JS will add classes .indent-h1, .indent-h2, .indent-h3 or .indent-h4 to paragraphs that follow an H1, H2, H3 or H4
until another heading level (H1-H4) resets the state. This avoids broad sibling selectors
that would otherwise over-apply indentation past the next heading.
IMPORTANT: These padding-left values MUST match the heading padding-left values in headings.css:
- p.indent-h1 padding-left → H1 padding-left
- p.indent-h2 padding-left → H2 padding-left
- p.indent-h3 padding-left → H3 padding-left
- p.indent-h4 padding-left → H4 padding-left
Always update both files together to maintain paragraph-to-heading alignment.
*/
.postSection p.indent-h1 {
/* Indent content under H1 while keeping overall centering */
text-indent: 0;
margin-left: 0;
margin-right: auto;
padding-left: 0;
}
.postSection p.indent-h2 {
/* Indent content under H2 while keeping overall centering */
text-indent: 0;
margin-left: 0;
margin-right: auto;
padding-left: 0;
}
.postSection p.indent-h3 {
/* Indent content under H3 while keeping overall centering */
text-indent: 0;
margin-left: 0;
margin-right: auto;
padding-left: 40px;
}
.postSection p.indent-h4 {
/* Indent content under H4 while keeping overall centering */
text-indent: 0;
margin-left: 0;
margin-right: auto;
padding-left: 60px;
}
/* Ensure nested lists or other block elements right after headings can align if needed */
/* Lists immediately following indented H3 paragraphs: align with paragraph content */
.postSection .indent-h3+ul,
.postSection .indent-h3+ol {
padding-left: 40px;
}
/* Lists immediately following indented H4 paragraphs: align with paragraph content */
.postSection .indent-h4+ul,
.postSection .indent-h4+ol {
padding-left: 60px;
}
/* Code block styling for copy-enabled code blocks */
.code-block-wrapper {
position: relative;
background: #000;
border-radius: 6px;
border: 1px solid #333;
margin: 0 0 20px 0;
}
.code-block-wrapper pre {
margin: 0;
padding: 18px 50px 18px 18px;
white-space: pre-wrap;
word-wrap: break-word;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 1.05rem;
line-height: 1.6;
color: #fff;
position: relative;
z-index: 1;
}
.code-block-wrapper code {
font-family: inherit;
font-size: inherit;
color: inherit;
background: none;
padding: 0;
}
.copy-btn {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 36px;
background: #333;
color: #fff;
border: none;
border-left: 1px solid #555;
padding: 0;
cursor: pointer;
font-size: 0.85em;
z-index: 11;
font-family: 'Poppins', sans-serif;
writing-mode: vertical-rl;
text-orientation: mixed;
letter-spacing: 2px;
border-radius: 0 6px 6px 0;
display: flex;
align-items: center;
justify-content: center;
}
.copy-btn:hover {
background: #555;
}
.copy-flash {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 6em;
font-weight: bold;
border-radius: 6px;
z-index: 10;
opacity: 1;
transition: opacity 1s ease;
pointer-events: none;
}
/* Highlighting */
/* Highlight: Yellow background for highlights */
.highLight {
background-color: yellow;
}
/* Menu path: Styling for Settings > Accounts > Add account breadcrumbs */
.menu-path {
background: #f0f0f0;
border: 1px solid #ccc;
border-radius: 3px;
padding: 1px 5px;
font-family: Consolas, "Courier New", monospace;
font-size: 0.9em;
color: #c7254e;
white-space: nowrap;
}
/* ALIGNMENTS */
/* Center Alignment: Centered block elements */
.center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* Footnotes styling */
.postSection sup a {
text-decoration: none;
color: inherit;
padding: 0 2px;
}
.postSection .fn-back {
text-decoration: none;
margin-right: 0.4em;
color: #007E7D;
font-weight: 600;
}
/* === end of formatting.css === */
/* >>> headings.css (2308 bytes) */
/*
headings.css - Heading styles for SOHO Systems
Last commented: 2025-08-23
Structure: H1, H2, H3, H4 heading classes
IMPORTANT: When updating heading padding-left values, you MUST also update
the corresponding paragraph indentation in formatting.css:
- H1 padding-left → p.indent-h1 padding-left
- H2 padding-left → p.indent-h2 padding-left
- H3 padding-left → p.indent-h3 padding-left
- H4 padding-left → p.indent-h4 padding-left
This ensures paragraphs remain aligned with their parent headings.
*/
/* Level 1 Headings */
.postSection h1 {
margin: 0;
padding-top: 0;
padding-bottom: 10px;
padding-left: 0;
font-family: 'Poppins', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', Arial, Helvetica, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 24px;
color: rgb(24, 23, 23);
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
/* Level 2 Headings */
.postSection h2 {
margin: 0;
padding-top: 0;
padding-bottom: 20px;
padding-left: 0;
font-family: 'Poppins', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', Arial, Helvetica, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 20px;
color: rgb(24, 23, 23);
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
/* H2 heading after table: add top spacing to prevent sticking */
.postSection table + h2,
.postSection table + * + h2 {
padding-top: 20px;
}
/* Level 3 Headings */
.postSection h3 {
margin: 0;
padding-top: 0;
padding-bottom: 20px;
padding-left: 40px;
font-family: 'Poppins', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', Arial, Helvetica, sans-serif;
font-weight: 700;
font-size: 18px;
color: rgb(24, 23, 23);
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
/* Level 4 Headings */
.postSection h4 {
margin: 0;
padding-top: 0;
padding-bottom: 20px;
padding-left: 60px;
font-family: 'Poppins', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Apple Color Emoji', Arial, Helvetica, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 16px;
color: rgb(24, 23, 23);
font-style: italic;
text-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
/* === end of headings.css === */
/* >>> imagegrid.css (1546 bytes) */
/*
imagegrid.css - Image grid layout styles for SOHO Systems
Last updated: 2025-08-29
Structure:
- Collage images
- Image grid container
- Grid items
- Grid images
*/
/* ===================== */
/* Collage Images */
/* ===================== */
/* LLB Sport collage image (used in sport section) */
.llb-sport-collage {
height: 215px;
width: auto;
border: 0;
}
/* Onrus Driving School collage image (used in driving school section) */
.onrus-driving-school-collage {
height: 215px;
width: auto;
border: 0;
}
/* Icon collage image (used in icons section) */
.icon-collage {
border: 0;
}
.gallery-row .icon-collage {
display: inline-block;
width: 128px;
height: 128px;
object-fit: contain;
}
/* ===================== */
/* Image Grid Container */
/* ===================== */
/* Grid container for web site portfolio — 4 equal columns */
.webSitePortfolio {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
align-items: center;
max-width: 100%;
margin-top: 0;
margin-bottom: 20px;
padding: 0;
}
.gridImage {
max-width: 100%;
}
/* Flex container for image grid layouts */
.imageGrid {
display: flex;
justify-content: space-between;
gap: 10px;
align-items: center;
max-width: 880px;
margin: 0 auto;
padding: 0;
}
/* ===================== */
/* Grid Images */
/* ===================== */
/* Styling for images inside grid items */
.gridImage img {
max-width: 100% !important;
height: auto !important;
width: 100%;
margin: 0;
padding: 0;
cursor: pointer;
border: 1px solid black;
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}
/* === end of imagegrid.css === */
/* >>> images.css (6741 bytes) */
/* ==========================================================
images.css (SOHO Systems)
Purpose: Centralised image, logo, stamp, avatar and screenshot styles.
Last updated: 2025-09-04
Sections:
1. Animation helpers
2. Logo overlays
3. Post avatars
4. Post stamps & icons
5. Full‑width images & alerts
6. Screenshots (percentage width utility classes)
7. Certificates
Conventions:
- .screenShotNN classes (25–90) set both min/max width for predictable scaling.
- Avoid renaming existing classes; they are referenced across legacy pages.
- Prefer adding new utility classes instead of modifying semantics of existing ones.
- Consider future refactor: consolidate .screenShotXX via a single class + custom property.
NOTE: This file intentionally contains no layout (flex/grid) rules—only image presentation.
========================================================== */
/* 1. Animation helpers ----------------------------------- */
/* One-time subtle zoom pulse (apply .zoom-in-once + add .zoom-in-once-animate via JS) */
.zoom-in-once {
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.zoom-in-once-animate {
animation: zoomInOnce 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1;
}
@keyframes zoomInOnce {
0% {
transform: scale(1);
}
60% {
transform: scale(1.18);
}
100% {
transform: scale(1);
}
}
/* 2. Logo overlays --------------------------------------- */
/* SOHO logo overlay for all banners */
.sohoLogo {
margin: 0;
padding: 0;
max-width: 990px;
min-width: 990px;
}
/* Client logo overlay for all banners */
.clientLogo {
height: 80px;
width: auto;
margin-left: 5px;
margin-right: 5px;
}
/* 3. Post avatars ---------------------------------------- */
/* Avatar photo for author/about sections */
.postAvatar {
float: right;
width: 200px;
height: auto;
margin: 0;
padding-top: 0px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
border: 0;
}
/* 4. Post stamps & icons -------------------------------- */
/* Stamp icon at top right of posts */
.postStamp {
float: right;
width: 120px;
height: auto;
margin-top: 0;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
padding: 0;
border: 0;
}
/* Circular stamp icon for posts */
.postStampCircle {
float: right;
width: 120px;
height: auto;
margin-top: 0;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
padding: 0;
border: 0;
clip-path: circle(48% at center);
overflow: hidden;
}
/* Small icon for post sections (e.g. Web Site Development) */
.postIcon {
float: right;
width: 90px;
padding-top: 0px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 20px;
border: 0;
}
/* OS-compatibility badges */
.compatibilityBadge {
width: 70px;
padding-top: 0px;
padding-bottom: 8px;
padding-left: 0;
padding-right: 5px;
border: 0;
}
/* 5. Full-width images & alerts ------------------------- */
/* Image spanning the full width of the container */
.imgFullWidth {
width: 100%;
}
/* Yellow Alert Icon for notification boxes */
.yellow-alerts {
height: 56px;
width: 56px;
margin-right: 0.7em;
flex-shrink: 0;
display: inline-block;
vertical-align: middle;
align-self: center;
min-width: 32px;
min-height: 32px;
max-width: 56px;
max-height: 56px;
}
/* 6. Screenshot width utilities ------------------------- */
.screenShot90 {
display: block;
max-width: 90%;
min-width: 90%;
height: auto;
padding-top: 0;
padding-bottom: 20px;
margin: auto;
border: 0;
}
.screenShot80 {
display: block;
max-width: 80%;
min-width: 80%;
height: auto;
padding-top: 0;
padding-bottom: 20px;
margin: auto;
border: 0;
}
.screenShot70 {
display: block;
max-width: 70%;
min-width: 70%;
height: auto;
padding-top: 0;
padding-bottom: 20px;
margin: auto;
border: 0;
}
.screenShot60 {
display: block;
max-width: 60%;
min-width: 60%;
height: auto;
padding-top: 0;
padding-bottom: 20px;
margin: auto;
border: 0;
}
.screenShot50 {
display: block;
max-width: 50%;
min-width: 50%;
height: auto;
padding-top: 0;
padding-bottom: 20px;
margin: auto;
border: 0;
}
.screenShot45 {
display: block;
max-width: 45%;
min-width: 45%;
height: auto;
padding-top: 0;
padding-bottom: 20px;
margin: auto;
border: 0;
}
.screenShot40 {
display: block;
max-width: 40%;
min-width: 40%;
height: auto;
padding-top: 0;
padding-bottom: 20px;
margin: auto;
border: 0;
}
.screenShot35 {
display: block;
max-width: 35%;
min-width: 35%;
height: auto;
padding-top: 0;
padding-bottom: 20px;
margin: auto;
border: 0;
}
.screenShot30 {
display: block;
max-width: 30%;
min-width: 30%;
height: auto;
padding-top: 0;
padding-bottom: 20px;
margin: auto;
border: 0;
}
.screenShot25 {
display: block;
max-width: 25%;
min-width: 25%;
height: auto;
padding-top: 0;
padding-bottom: 20px;
margin: auto;
border: 0;
}
/* 7. Certificates ---------------------------------------- */
.certificate {
min-height: 220px;
max-height: 220px;
padding-top: 10px;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
margin: 0;
border: 1px solid #0556AF;
}
/* Gallery container: full width */
.gallery-row {
width: 100%;
max-width: 100%;
padding: 0;
margin-bottom: 1em;
}
/* Gallery images: fixed height - width auto for proportional scaling */
[class$="-collage"] {
height: 215px;
width: auto;
border: 2px solid transparent;
}
/* Ensure gallery contents stay inside the post column and wrap neatly */
.gallery-row {
display: flex;
flex-wrap: wrap;
gap: 0;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
width: 100%;
margin: 0 0 1em 0;
}
.gallery-row img {
display: block;
height: 215px; /* keep consistent row height */
width: auto;
max-width: 100%; /* never exceed container width */
object-fit: cover;
}
/* Embedded content images: never wider than 950px */
.postSection img:not(.blog-grid-images):not(.post-banner):not(.clientLogo):not([class$="-collage"]) {
max-width: 950px;
height: auto;
}
/* === end of images.css === */
/* >>> labels.css (762 bytes) */
/* FREE and PAID labels */
.label-effect {
display: inline-block;
padding: 0.18em 1.1em;
font-size: 0.75em;
font-weight: 700;
border-radius: 999px;
background: linear-gradient(90deg, #f8fafc 60%, #e9ecef 100%);
color: #1a1a1a;
box-shadow: 0 2px 8px rgba(60, 60, 60, 0.08);
border: 1.5px solid #e0e0e0;
letter-spacing: 0.04em;
text-transform: uppercase;
vertical-align: middle;
margin: 0 0.2em;
}
.label-effect.label-free {
background: linear-gradient(90deg, #e6f9e6 60%, #c8f7c5 100%);
color: #1a7f1a;
border-color: #b2e6b2;
}
.label-effect.label-paid {
background: linear-gradient(90deg, #fff3e6 60%, #ffe0c2 100%);
color: #b85c00;
border-color: #ffd6a0;
}
/* === end of labels.css === */
/* >>> links.css (4255 bytes) */
/* --- Extra specificity for notification-box links: forcibly reset all box/flex/inline/block/white-space properties --- */
/* --- Notification Box Link Override: must be last for maximum specificity --- */
.notification-box a,
.notification-box a:link,
.notification-box a:visited,
.notification-box a:active,
.notification-box a:hover {
display: inline !important;
color: #294DAF !important;
text-decoration: none !important;
background: none !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
margin: 0 !important;
font: inherit !important;
line-height: inherit !important;
white-space: normal !important;
word-break: normal !important;
vertical-align: baseline !important;
float: none !important;
clear: none !important;
position: static !important;
flex: none !important;
align-self: auto !important;
min-width: 0 !important;
min-height: 0 !important;
max-width: none !important;
max-height: none !important;
overflow: visible !important;
z-index: auto !important;
}
.notification-box a::after,
.notification-box a::before {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
background: none !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
/* REMOVED: Global link override that was conflicting with rule compliance */
/*
links.css - Link styles for SOHO Systems
Last commented: 2025-08-23
Structure: Post links, external links, footer links
*/
/* Links rule compliance: All links in postSection, tables, and notification-box must be #294DAF */
/* The default presentation of all links in posts */
.postSection a:link {
color: #294DAF !important;
text-decoration: none !important;
}
/* When the cursor hovers over the link */
.postSection a:hover {
color: #294DAF !important;
text-decoration: none !important;
}
/* At the moment of being clicked */
.postSection a:active {
color: #294DAF !important;
text-decoration: none !important;
}
/* After a link was visited */
.postSection a:visited {
color: #294DAF !important;
text-decoration: none !important;
}
/* All links within tables must be #294DAF */
.table a:link,
.table a:visited,
.table a:active,
.table a:hover {
color: #294DAF !important;
text-decoration: none !important;
}
/* All links within notification boxes must be #294DAF */
.notification-box a:link,
.notification-box a:visited,
.notification-box a:active,
.notification-box a:hover {
color: #294DAF !important;
text-decoration: none !important;
}
/* Links in the contact page table */
.myContact a:link,
.myContact a:visited,
.myContact a:active,
.myContact a:hover {
color: #294DAF !important;
text-decoration: none !important;
}
/* External links within postSection paragraphs only */
.postSection p a[href*="//"]:not([href*="sohosystems.co.za"])::after {
text-decoration: none;
content: "";
width: 8px;
height: 8px;
background: no-repeat url('gfx/external-link-arrow.png');
margin-left: 2px;
padding-right: 3px;
display: inline-block;
vertical-align: middle;
}
/* External links within tables only */
.table a[href*="//"]:not([href*="sohosystems.co.za"])::after {
text-decoration: none;
content: "";
width: 8px;
height: 8px;
background: no-repeat url('gfx/external-link-arrow.png');
margin-left: 2px;
padding-right: 3px;
display: inline-block;
vertical-align: middle;
}
/* FOOTER LINKS */
/* Footer links styled via .responsive-footer a (see responsive.css) */
/* === end of links.css === */
/* >>> lists.css (509 bytes) */
/*
lists.css - List styles for SOHO Systems
Last commented: 2025-08-23
Structure: Unordered lists, ordered lists, list items
*/
.postSection ul {
margin-top: 5px;
margin-left: 20px;
padding: 0;
font-size: 15px;
}
.postSection ul li {
margin-bottom: 10px;
}
/* Ordered Lists: Used for References */
.postSection ol {
margin-top: -20px;
margin-left: 16px;
padding: 0;
font-size: 15px;
}
.postSection ol li {
margin-bottom: 10px;
}
/* === end of lists.css === */
/* >>> maps.css (666 bytes) */
/* --------------------------------------------------------- */
/* Responsive Google Maps iframe embed (use on