Today 12:23 PM
image(300).png

Edit


image(301).png
Now, I have resized the image for FB. Please replace the green sidebars with complimentary imaging without effecting the center section.

Edit


image(302).png

stylefile(29).css
File
Do you think we should recolorize the scroll bar and buttons and background to go with this hero image?

image(303).png
This is dreadful. Let's try again.  Let's go for a "light" background this time.

image(304).png
In this version, there is no clear division between the scoller and the button section and the buttons don't look like buttons unless you hover over a "hot" button.  Let's try again.

image(305).png
Getting Closer. I like the scroller, I am not sure I like the red hover effect, and I definately don't like the white letters.

image(306).png
I like it but lets make the scroller match the color scheme of the hot buttons.

Much better idea—now the scroller and hot buttons belong to the same family.


The scroller now uses the same cyan gradient, dark lettering, blue borders, and matching glow as the hot buttons.


OK so that looks good, but lets try a version where instead of the blue backgrounds we match the green in the Hero image counter and see what that looks like?


This swaps the cyan button, scroller, glow, and scrollbar accents for the visitor-counter green while keeping the dark lettering. It should feel more connected to the hero and a little less “pool supply website.”


image(307).png
This is what it looks like now. Wanna take one more pass through the CSS or are we good with this?

One more pass.

The structure is good, but the green is a little too radioactive compared with the hero. I’d tone it down slightly:

darken the button/scroller green by about 15%

reduce the glow and saturation

keep the hover just a little brighter, not dramatically different

make the button shadows a darker olive-green instead of vivid green

Right now it matches the counter, but it matches the glow more than the actual hardware. A slightly dirtier, darker green would blend with the industrial hero much better.

We are close. This is polishing, not rebuilding.


OK, let's see the updated CSS.


This keeps the green theme but makes it darker, less fluorescent, and more industrial. The buttons and scroller should now match the hero without looking like they were dipped in Mountain Dew.


Library
/
stylefile(36).css


:root {
    /* ZeroVisits.com — light control-panel palette */
    --page-back: #E6ECEF;
    --panel-back: #F7F9FA;
    --panel-edge: #B8C5CC;
    --ink: #17242D;
    --neon-blue: #18BFFF;
    --deep-blue: #123B52;
    --neon-red: #F04A32;
    --deep-red: #A92C1F;
    --counter-green: #65B733;
    --warm-white: #FFFDF8;
    --soft-shadow: rgba(25, 42, 54, .22);
}

/* --------------------------------------------------
   Base Layout
-------------------------------------------------- */

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    background: var(--page-back);
    scrollbar-color: #65B733 var(--page-back);
    scrollbar-width: thin;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    color: var(--ink);
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .08em;
    background: radial-gradient(circle at top center, #FFFFFF 0%, #EDF2F4 58%, #E1E8EB 100%);
}

.container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    background: var(--panel-back);
    border: 1px solid var(--panel-edge);
    box-shadow: 0 14px 38px rgba(22, 35, 45, .18);
}

.banner {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------
   Scrolling Banner
-------------------------------------------------- */

.header {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #D4F3BE 0%, #78C93F 100%);
    color: #102A3A;
    border-top: 4px solid #4F9826;
    border-bottom: 5px solid #2F6618;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(0,0,0,.08), 0 7px 16px rgba(18,59,82,.18), 0 0 12px rgba(86,160,43,.18);
}

    .header::after {
        content: "";
        display: block;
        height: 7px;
        background: linear-gradient( 90deg, #4F9826 0%, #78C93F 50%, #4F9826 100% );
        box-shadow: 0 0 10px rgba(86,160,43,.20);
    }

#ScrollingBanner {
    margin: 0;
    padding: 12px 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    line-height: 40px;
    font-family: 'Orbitron', sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--deep-blue);
    text-shadow: 1px 1px 0 #FFFFFF, 0 0 5px rgba(86,160,43,.18);
    user-select: none;
}

/* --------------------------------------------------
   Main Button Section
-------------------------------------------------- */

.main {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 20px 30px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #DDE6EA 0%, #F5F8F9 12%, #EEF3F5 100%);
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #CCD6DB;
    border-right: 1px solid #CCD6DB;
    border-bottom: 1px solid #B9C6CD;
    box-shadow: inset 0 10px 20px rgba(18,59,82,.08);
}

.button-container {
    margin: 0 0 20px;
}

/* --------------------------------------------------
   Buttons
-------------------------------------------------- */

.styled-button {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 15px 18px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #FFFFFF 0%, #E4EBEF 100%);
    color: var(--deep-blue);
    border: 3px solid #7E929D;
    border-radius: 15px;
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    text-shadow: 1px 1px 0 #FFFFFF;
    box-shadow: 0 5px 0 #667984, 0 9px 18px rgba(22,35,45,.22), inset 0 1px 0 rgba(255,255,255,.95);
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .styled-button:hover {
        transform: translateY(-2px);
        background: linear-gradient(180deg, #FFFFFF 0%, #D6E6ED 100%);
        border-color: var(--neon-blue);
        box-shadow: 0 7px 0 #55717F, 0 0 14px rgba(24,191,255,.26), 0 12px 22px rgba(22,35,45,.24);
    }

    .styled-button:active {
        transform: translateY(3px);
        box-shadow: 0 2px 0 #55717F, 0 5px 10px rgba(22,35,45,.18);
    }

/* Hot / primary buttons stay blue and use dark, readable lettering */
.custom {
    background: linear-gradient(180deg, #BCEB98 0%, #65B733 100%);
    color: #102A3A;
    border-color: #4F9826;
    text-shadow: 1px 1px 0 rgba(255,255,255,.72);
    box-shadow: 0 5px 0 #2F6618, 0 0 12px rgba(86,160,43,.18), 0 10px 20px rgba(22,35,45,.22), inset 0 1px 0 rgba(255,255,255,.72);
}

    .custom:hover {
        background: linear-gradient(180deg, #D4F3BE 0%, #78C93F 100%);
        color: #0B2635;
        border-color: #42851F;
        box-shadow: 0 7px 0 #285C14, 0 0 16px rgba(86,160,43,.24), 0 12px 24px rgba(22,35,45,.24);
    }

    .custom:active {
        box-shadow: 0 2px 0 #285C14, 0 5px 10px rgba(22,35,45,.18);
    }

/* --------------------------------------------------
   Scroller spacing
-------------------------------------------------- */

.scroll {
    padding-left: 50px;
    padding-right: 50px;
}

/* --------------------------------------------------
   Custom Modal
-------------------------------------------------- */

.custom-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
    background: rgba(12, 22, 29, .72);
}

    .custom-modal.show {
        display: flex;
    }

.custom-modal-dialog {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - 40px);
    padding: 28px;
    overflow-y: auto;
    box-sizing: border-box;
    background: linear-gradient(180deg, #FFFFFF 0%, #EDF3F5 100%);
    color: var(--ink);
    border: 3px solid var(--neon-blue);
    border-radius: 18px;
    box-shadow: 0 0 0 2px rgba(240,74,50,.48), 0 18px 60px rgba(0,0,0,.34);
    font-family: 'Orbitron', sans-serif;
    animation: modalPop .20s ease-out;
}

.custom-modal-close {
    position: sticky;
    top: 0;
    float: right;
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    color: var(--deep-blue);
    font-size: 34px;
    font-weight: 700;
    cursor: pointer;
    z-index: 5;
}

    .custom-modal-close:hover {
        color: var(--neon-red);
    }

#CustomAlertBody {
    line-height: 1.65;
    letter-spacing: .04em;
}

    #CustomAlertBody a {
        color: #0D739E;
        text-decoration-color: var(--neon-red);
    }

        #CustomAlertBody a:hover {
            color: var(--neon-red);
        }

    #CustomAlertBody hr {
        border: none;
        border-top: 2px solid var(--neon-red);
        margin: 20px 0;
    }

/* --------------------------------------------------
   Scrollbars
-------------------------------------------------- */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--page-back);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #A8DD7D 0%, #4F9826 100%);
    border: 2px solid var(--page-back);
    border-radius: 999px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #D4F3BE 0%, #65B733 100%);
    }

/* --------------------------------------------------
   Animation
-------------------------------------------------- */

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 600px) {

    .main {
        padding: 20px 14px 25px;
    }

    .styled-button {
        margin-top: 16px;
        padding: 14px 12px;
        font-size: 16px;
        letter-spacing: .06em;
        border-radius: 13px;
    }

    #ScrollingBanner {
        font-size: 21px;
        letter-spacing: .08em;
    }

    .custom-modal {
        padding: 10px;
    }

    .custom-modal-dialog {
        padding: 20px;
        border-radius: 14px;
    }

    .scroll {
        padding-left: 24px;
        padding-right: 24px;
    }
}

Library
/
stylefile(36).css


:root {
    /* ZeroVisits.com — light control-panel palette */
    --page-back: #E6ECEF;
    --panel-back: #F7F9FA;
    --panel-edge: #B8C5CC;
    --ink: #17242D;
    --neon-blue: #18BFFF;
    --deep-blue: #123B52;
    --neon-red: #F04A32;
    --deep-red: #A92C1F;
    --counter-green: #65B733;
    --warm-white: #FFFDF8;
    --soft-shadow: rgba(25, 42, 54, .22);
}

/* --------------------------------------------------
   Base Layout
-------------------------------------------------- */

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    background: var(--page-back);
    scrollbar-color: #65B733 var(--page-back);
    scrollbar-width: thin;
}

body {
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    color: var(--ink);
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: .08em;
    background: radial-gradient(circle at top center, #FFFFFF 0%, #EDF2F4 58%, #E1E8EB 100%);
}

.container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
    text-align: center;
    background: var(--panel-back);
    border: 1px solid var(--panel-edge);
    box-shadow: 0 14px 38px rgba(22, 35, 45, .18);
}

.banner {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------
   Scrolling Banner
-------------------------------------------------- */

.header {
    position: relative;
    width: 100%;
    margin: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #D4F3BE 0%, #78C93F 100%);
    color: #102A3A;
    border-top: 4px solid #4F9826;
    border-bottom: 5px solid #2F6618;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.78), inset 0 -1px 0 rgba(0,0,0,.08), 0 7px 16px rgba(18,59,82,.18), 0 0 12px rgba(86,160,43,.18);
}

    .header::after {
        content: "";
        display: block;
        height: 7px;
        background: linear-gradient( 90deg, #4F9826 0%, #78C93F 50%, #4F9826 100% );
        box-shadow: 0 0 10px rgba(86,160,43,.20);
    }

#ScrollingBanner {
    margin: 0;
    padding: 12px 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    line-height: 40px;
    font-family: 'Orbitron', sans-serif;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--deep-blue);
    text-shadow: 1px 1px 0 #FFFFFF, 0 0 5px rgba(86,160,43,.18);
    user-select: none;
}

/* --------------------------------------------------
   Main Button Section
-------------------------------------------------- */

.main {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 24px 20px 30px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #DDE6EA 0%, #F5F8F9 12%, #EEF3F5 100%);
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #CCD6DB;
    border-right: 1px solid #CCD6DB;
    border-bottom: 1px solid #B9C6CD;
    box-shadow: inset 0 10px 20px rgba(18,59,82,.08);
}

.button-container {
    margin: 0 0 20px;
}

/* --------------------------------------------------
   Buttons
-------------------------------------------------- */

.styled-button {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 15px 18px;
    box-sizing: border-box;
    background: linear-gradient(180deg, #FFFFFF 0%, #E4EBEF 100%);
    color: var(--deep-blue);
    border: 3px solid #7E929D;
    border-radius: 15px;
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    text-shadow: 1px 1px 0 #FFFFFF;
    box-shadow: 0 5px 0 #667984, 0 9px 18px rgba(22,35,45,.22), inset 0 1px 0 rgba(255,255,255,.95);
    transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

    .styled-button:hover {
        transform: translateY(-2px);
        background: linear-gradient(180deg, #FFFFFF 0%, #D6E6ED 100%);
        border-color: var(--neon-blue);
        box-shadow: 0 7px 0 #55717F, 0 0 14px rgba(24,191,255,.26), 0 12px 22px rgba(22,35,45,.24);
    }

    .styled-button:active {
        transform: translateY(3px);
        box-shadow: 0 2px 0 #55717F, 0 5px 10px rgba(22,35,45,.18);
    }

/* Hot / primary buttons stay blue and use dark, readable lettering */
.custom {
    background: linear-gradient(180deg, #BCEB98 0%, #65B733 100%);
    color: #102A3A;
    border-color: #4F9826;
    text-shadow: 1px 1px 0 rgba(255,255,255,.72);
    box-shadow: 0 5px 0 #2F6618, 0 0 12px rgba(86,160,43,.18), 0 10px 20px rgba(22,35,45,.22), inset 0 1px 0 rgba(255,255,255,.72);
}

    .custom:hover {
        background: linear-gradient(180deg, #D4F3BE 0%, #78C93F 100%);
        color: #0B2635;
        border-color: #42851F;
        box-shadow: 0 7px 0 #285C14, 0 0 16px rgba(86,160,43,.24), 0 12px 24px rgba(22,35,45,.24);
    }

    .custom:active {
        box-shadow: 0 2px 0 #285C14, 0 5px 10px rgba(22,35,45,.18);
    }

/* --------------------------------------------------
   Scroller spacing
-------------------------------------------------- */

.scroll {
    padding-left: 50px;
    padding-right: 50px;
}

/* --------------------------------------------------
   Custom Modal
-------------------------------------------------- */

.custom-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 20px;
    overflow-y: auto;
    align-items: center;
    justify-content: center;
    background: rgba(12, 22, 29, .72);
}

    .custom-modal.show {
        display: flex;
    }

.custom-modal-dialog {
    position: relative;
    width: min(760px, 100%);
    max-height: calc(100vh - 40px);
    padding: 28px;
    overflow-y: auto;
    box-sizing: border-box;
    background: linear-gradient(180deg, #FFFFFF 0%, #EDF3F5 100%);
    color: var(--ink);
    border: 3px solid var(--neon-blue);
    border-radius: 18px;
    box-shadow: 0 0 0 2px rgba(240,74,50,.48), 0 18px 60px rgba(0,0,0,.34);
    font-family: 'Orbitron', sans-serif;
    animation: modalPop .20s ease-out;
}

.custom-modal-close {
    position: sticky;
    top: 0;
    float: right;
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    color: var(--deep-blue);
    font-size: 34px;
    font-weight: 700;
    cursor: pointer;
    z-index: 5;
}

    .custom-modal-close:hover {
        color: var(--neon-red);
    }

#CustomAlertBody {
    line-height: 1.65;
    letter-spacing: .04em;
}

    #CustomAlertBody a {
        color: #0D739E;
        text-decoration-color: var(--neon-red);
    }

        #CustomAlertBody a:hover {
            color: var(--neon-red);
        }

    #CustomAlertBody hr {
        border: none;
        border-top: 2px solid var(--neon-red);
        margin: 20px 0;
    }

/* --------------------------------------------------
   Scrollbars
-------------------------------------------------- */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--page-back);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #A8DD7D 0%, #4F9826 100%);
    border: 2px solid var(--page-back);
    border-radius: 999px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: linear-gradient(180deg, #D4F3BE 0%, #65B733 100%);
    }

/* --------------------------------------------------
   Animation
-------------------------------------------------- */

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(.97);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* --------------------------------------------------
   Mobile
-------------------------------------------------- */

@media (max-width: 600px) {

    .main {
        padding: 20px 14px 25px;
    }

    .styled-button {
        margin-top: 16px;
        padding: 14px 12px;
        font-size: 16px;
        letter-spacing: .06em;
        border-radius: 13px;
    }

    #ScrollingBanner {
        font-size: 21px;
        letter-spacing: .08em;
    }

    .custom-modal {
        padding: 10px;
    }

    .custom-modal-dialog {
        padding: 20px;
        border-radius: 14px;
    }

    .scroll {
        padding-left: 24px;
        padding-right: 24px;
    }
}