Quick Review

crowe_code_review.css

@charset "utf-8";
/*************************************************
ABOVE THE REST LUXURY CABINS
Custom CSS for Design System | Michael Crowe
*************************************************/

/* TOKENS
==============================================
Color scale */
:root {
    --storm-90: #0B0B4E;
    --storm-80: #131E70;
    --storm-70: #223B91;
    --storm-60: #345DA9;
    /* brand-blue-dark */
    --storm-50: #5B91C9;
    /* brand-blue-medium */
    --storm-40: #86B9DE;
    /* brand-blue-light */
    --storm-30: #A7D8EC;
    --storm-20: #B8E4F0;
    --dusk-90: #23064A;
    --dusk-80: #35166C;
    --dusk-70: #4C318D;
    --dusk-60: #5F50A8;
    --dusk-50: #7E81CD;
    --dusk-40: #9CA8E7;
    --dusk-30: #AFC8FA;
    --dusk-20: #C4E1FF;
    --wine-90: #330340;
    --wine-80: #4C0F5E;
    --wine-70: #68277C;
    --wine-60: #7F4497;
    --wine-50: #A070BE;
    --wine-40: #BC95DA;
    --wine-30: #CDB1F3;
    --wine-20: #DCCAFF;
    --rose-90: #400031;
    --rose-80: #5E0949;
    --rose-70: #7D2062;
    --rose-60: #963979;
    --rose-50: #BA609B;
    --rose-40: #D782B4;
    --rose-30: #EC9BCC;
    --rose-20: #FFBAE7;
    --peach-90: #49011F;
    --peach-80: #6A082F;
    --peach-70: #8C1C40;
    --peach-60: #A53351;
    --peach-50: #C95669;
    --peach-40: #E5777B;
    --peach-30: #FF9790;
    --peach-20: #FFA99C;
    --fire-90: #4E0707;
    --fire-80: #70130B;
    --fire-70: #912411;
    --fire-60: #A93717;
    --fire-50: #C95821;
    --fire-40: #DE792B;
    --fire-30: #F09B35;
    --fire-20: #F9AF3B;
    /* brand-gold */
    --sun-90: #4E1500;
    --sun-80: #6E2400;
    --sun-70: #8D3500;
    --sun-60: #A04700;
    --sun-50: #B66700;
    --sun-40: #C78729;
    --sun-30: #D0A549;
    --sun-20: #D9B960;
    --earth-90: #452000;
    --earth-80: #603300;
    --earth-70: #794700;
    --earth-60: #895908;
    --earth-50: #A07423;
    --earth-40: #B1924E;
    --earth-30: #BDA668;
    --earth-20: #D1C38F;
    --moss-90: #312500;
    --moss-80: #453908;
    --moss-70: #594E1B;
    --moss-60: #6C622E;
    --moss-50: #89824A;
    --moss-40: #A7A36C;
    --moss-30: #BBBA82;
    --moss-20: #CFD199;
    --moss-10: #D9DCA5;
    --bass-90: #1D260B;
    --bass-80: #2E3918;
    --bass-70: #404E25;
    --bass-60: #536433;
    --bass-50: #768956;
    --bass-40: #9EB081;
    --bass-30: #BACC9E;
    --bass-20: #C6DAAA;
    --bass-10: #D4E8B4;
    --pine-90: #0F2218;
    --pine-80: #163824;
    --pine-70: #1E4E30;
    --pine-60: #29663A;
    --pine-50: #5A8F5F;
    --pine-40: #96BD95;
    --pine-30: #BEDCBB;
    --pine-20: #CBEDC8;
    --pine-10: #D9FFD3;
    --spring-90: #002421;
    --spring-80: #003B33;
    --spring-70: #005247;
    --spring-60: #006C5A;
    --spring-50: #3B967D;
    --spring-40: #79C3A6;
    --spring-30: #ACDEC5;
    --spring-20: #BFEDD4;
    --spring-10: #CDFDE1;
    --lake-90: #002331;
    --lake-80: #00394A;
    --lake-70: #005164;
    --lake-60: #006C7A;
    --lake-50: #1D999E;
    --lake-40: #5EC5C0;
    --lake-30: #96E0D4;
    --lake-20: #AFEDDF;
    --lake-10: #C8FAEC;
    --sky-90: #001B42;
    --sky-80: #003061;
    --sky-70: #004A7F;
    --sky-60: #006797;
    --sky-50: #3597B8;
    --sky-40: #6DC1D3;
    --sky-30: #9ADBE1;
    --sky-20: #B1E8EA;
    --sky-10: #C8F5F3;
}

/* VARIABLES
============================================== */
:root {
    /* Brand colors */
    --brand-blue-dark: var(--storm-60);
    --brand-blue-medium: var(--storm-50);
    --brand-blue-light: var(--storm-40);
    --brand-gold: var(--fire-20);
    /* Semantic colors */
    --button-normal: #c97f29;
    --button-hover: #ffd048;
    /* Utility colors */
    --alarm-darker: var(--fire-90);
    --alarm-dark: var(--fire-80);
    --alarm-medium: var(--fire-70);
    --alarm-light: var(--fire-60);
    /* Gradient stops */
    --hero-sheen-left: rgb(22 54 70 / 40%);
    --hero-sheen-mid: rgb(77 110 128 / 12%);
    --hero-sheen-right: rgb(22 54 70 / 15%);
    /* Shadows */
    --shadow-near: 1.5px 1px 2px 1px var(--hero-sheen-left);
    --shadow-far: -0.5px 0 11px 8px var(--hero-sheen-right);
    --shadows-glass: var(--shadow-near), var(--shadow-far);
}

/* GENERAL
==============================================
Disable horizontal scrollbar when screen overflows;
it displaces the sticky footer on mobile */
body {
    overflow-x: hidden;
}

/* HOVER STATES
==============================================
Normalize transition in/out timing */
a,
button,
.btn {
    transition-property:
        color,
        background-color,
        filter;
    transition-duration: 180ms;
    transition-timing-function: linear;
}

a:hover,
button:hover,
.btn:hover {
    transition-duration: 60ms;
    transition-timing-function: ease-out;
}

/* Button styling */
.btn.btn-primary {
    font-weight: 700;
    font-size: 1.25em;
    letter-spacing: -0.01em;
    border-width: 0.5px 2px 1px 1px;
    background: var(--button-normal);
}

.btn-primary:active,
.btn-primary:active:focus,
.btn-primary:focus,
.btn-primary:hover {
    border-style: solid;
    border-color:
        var(--fire-20) var(--fire-20) var(--fire-30);
    color: #222;
    background: var(--button-hover);
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn:active:focus,
.btn:focus {
    outline-color: var(--fire-60);
}

/* Glow and zoom on hover */
.glow-zoom,
.index-features-img,
.property-list-img,
.sidebar-feature img,
.alternative-properties-item .row>div,
.alternative-properties-img,
.navbar-brand>img {
    transition-property:
        color,
        background-color,
        filter,
        transform;
    transition-duration: 180ms;
    transition-timing-function: linear;
    filter: initial;
}

.glow-zoom:hover,
.alternative-properties-item .row>div:hover {
    transition-duration: 60ms;
    transition-timing-function: ease-out;
    transform: scale(1.1);
}

.glow-zoom:hover,
.index-features-img:hover,
.property-list-img:hover,
.sidebar-feature:hover,
.alternative-properties-img:hover {
    transition-duration: 60ms;
    transition-timing-function: ease-out;
    filter:
        saturate(188%) contrast(91%) brightness(118%);
}

.navbar-brand>img:hover {
    transition-duration: 60ms;
    transition-timing-function: ease-out;
    filter:
        saturate(182%) contrast(115%) brightness(150%);
}

/* HEADER
==============================================
Subtle shadow */
.masthead>div {
    border-bottom: 1px solid var(--hero-sheen-right);
    box-shadow: 0 -4px 32px var(--hero-sheen-left);
}

/* Make phone number bolder
NOTE: LiveRez class starts with number, can't use */
.phone-link>span:first-child {
    font-weight: 700;
    letter-spacing: 0.015em;
}

/* Correct logo size @768 */
@media (min-width: 768px) and (max-width: 991.9999px) {
    body .masthead .navbar-brand img {
        left: -5em;
        width: 18em;
        top: 1px;
    }
}

/* Restore Home logo to full size @1200px */
@media (min-width: 1200px) {
    body.Index .navbar-brand img {
        left: -3.5em;
        width: 23.5em;
        top: -5px;
    }
}

/* NAV - DESKTOP MASTHEAD
==============================================
Dropdown transitions */
.navbar li.dropdown>ul.dropdown-menu {
    display: unset;
    opacity: 0%;
    transition: opacity 80ms ease-in-out;
    pointer-events: none;
}

.navbar li.dropdown:hover>ul.dropdown-menu {
    display: unset;
    opacity: 100%;
    transition: opacity 320ms ease-in-out;
    display: block;
    pointer-events: auto;
}

/* NAV - MOBILE SIDEBAR
==============================================
Correcting menu items being flush right */
.nav li.dropdown {
    text-align: left;
}

/* FOOTER
==============================================
Subtle shadow */
.footer-wrapper {
    border-top: 1px solid var(--hero-sheen-right);
    border-radius: 20px 28px 0 0;
    box-shadow: 0 4px 40px var(--hero-sheen-left);
}

/* ALERT BANNER
==============================================
Turn off */
.alert.alert-warning.alert-dismissible {
    display: none;
}

/* Alert styling * commented out while off
.alert.alert-warning.alert-dismissible {
background-color: #3e024b !important;
display: block;
min-height: 4em;
margin: 1em auto;
width: 92vw;
place-self: center;
left: 4%;
border-radius: 1em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
-ms-border-radius: 1em;
-o-border-radius: 1em;
} */

/* HOME > HERO
==============================================
Hero was colliding with elements */
@media(min-width:768px) {
    #halfPage .caption-title-container {
        top: calc(28% - 1vh);
        left: 2em;
    }
}

@media(min-width:992px) {
    #halfPage .caption-title-container {
        left: 3em;
    }
}

/* Use CSS variables for background gradient */
#halfPage .fill:before {
    content: '';
    background-image: linear-gradient(90deg,
            var(--hero-sheen-left) 17%,
            var(--hero-sheen-mid) 83%,
            var(--hero-sheen-right) 100%);
    mix-blend-mode: multiply;
}

/* Scale down and center text for tablet/mobile */
@media (max-width: 767px) {
    .caption-title-container {
        display: grid;
        place-items: center;
        font-size: 0.94em;
    }

    .caption-title-container .col-xs-offset-1 {
        margin-left: unset;
    }

    #heroHed,
    #heroDek {
        text-align: center !important;
    }
}

/* HOME > AVAILABILITY SEARCH ON MOBILE
==============================================
Shrink container on small screens */
@media(max-width:767px) {
    body.Index section.grand-opening {
        width: 94vw;
    }
}

/* Style controls container and fix to bottom */
@media(max-width: 767px) and (orientation: portrait) {
    body.Index .search-bar-wrap {
        position: fixed !important;
        width: 100%;
        background-color: hsl(235 40% 6% / 0.67);
        left: 0;
        bottom: 0;
        z-index: 198;
        border-top: 1px solid #d7d7d7;
        box-shadow: 0 -3px 20px var(--hero-sheen-left);
    }
}

/* HOME > FEATURED CABINS SLIDESHOW
==============================================
Background color */
.index-features-section {
    background-color: var(--brand-blue-light);
}

/* Restyle cabin label cell */
.index-features-title {
    font-size: 1.15em;
    font-weight: 400;
    text-align: left;
    text-transform: unset;
    background-color: rgb(0 0 0 / 52%);
}

/* Restyle cabin label text */
.index-features-title>a,
.index-features-title>a:focus,
.index-features-title>a:hover {
    color: #f8f8f8;
    letter-spacing: -0.01em;
    word-spacing: 0.1em;
}

/* Format for desktop */
@media(min-width:768px) {

    /* Make Boostrap columns more flexible */
    .index-features-wrapper>.col-sm-1 {
        width: 3%;
    }

    .index-features-wrapper>.col-sm-10 {
        width: 94%;
    }

    #indexFeatures .row {
        display: flex;
        margin: 0;
        justify-content: space-between;
        align-items: center;
        align-content: center;
    }

    /* Stop clipping cards when they grow on hover */
    #indexFeatures .carousel-inner {
        overflow: unset;
    }

    /* Decorate card */
    #indexFeatures .row>div {
        padding: 0;
        margin: 0 0.75em;
        border-radius: 12px;
        overflow: hidden;
        transition-property: filter, transform;
        transition-duration: 180ms;
        transition-timing-function: ease-in-out;
        box-shadow: var(--shadows-glass);
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        -ms-border-radius: 12px;
        -o-border-radius: 12px;
    }

    #indexFeatures .row>div:hover {
        transform: scale(1.1);
    }
}

/* CABIN SEARCH RESULT CARD
==============================================
Cabin name bigger size and all caps */
.alternative-properties-title a,
.property-list-code strong {
    text-transform: uppercase;
    font-size: 1.15em;
    letter-spacing: -0.02em;
    line-height: 2;
    text-decoration: none !important;
}

body.Property .breadcrumb li:last-child {
    text-transform: uppercase;
}

/* Hides label "CODE:" */
.pid-text {
    display: none;
}

/* ADVANCED SEARCH
==============================================
Overrides conflict that hides custom amenities */
.secondary-advanced-checkbox {
    display: block !important;
}

/* PROPERTY PAGES
==============================================
Style tabs */
body.Property .property-page-details-menu-item a {
    background-color: var(--brand-blue-dark);
    border-radius: 12px 3px 0 0;
}

body.Property .property-page-details-menu-item a:hover {
    background-color: var(--storm-20);
}

/* SIMILAR / ALTERNATIVE PROPERTIES CARDS
==============================================
Reformats price badge */
.alternative-properties-price-container {
    margin: 0.5em;
    line-height: 0.7;
    border-radius: 2em;
    background-color: rgba(0, 0, 0, 0.4);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    -ms-border-radius: 2em;
    -o-border-radius: 2em;
}

/* Make row flexible and distribute cards */
.alternative-properties-item .row {
    display: flex;
    justify-content: flex-start;
}

.alternative-properties-item .row>div:not(:first-child) {
    margin-left: 0.625em;
}

.alternative-properties-item .row>div:not(:last-child) {
    margin-right: 0.625em;
}

/* Decorate card */
.alternative-properties-item .row>div {
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    mix-blend-mode: color-burn;
    box-shadow: var(--shadows-glass);
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
}

/* Let card grow beyond container on hover */
.carousel-inner.alternative-properties-carousel-inner {
    overflow: unset;
}

/* Siblings obstructing the anchor */
.alternative-properties-price-wrapper,
.alternative-properties-title {
    backdrop-filter: blur(0.5px);
    pointer-events: none;
    z-index: 100;
}

/* Formats price text */
.alternative-properties-per-night {
    text-align: center;
}

.alternative-properties-per-night small {
    font-size: 0.875em;
}

/* Hides "(USD)" */
.alternative-properties-per-night small strong {
    display: none;
}

/* PROPERTY > INDIVIDUAL CABIN SELECTORS
==============================================
Determine attributes from cabin name */
body.Property :is(.mc-datahook[data-cabin="Deer Crossing"],
    .mc-datahook[data-cabin="Dream Catcher"],
    .mc-datahook[data-cabin="Whispering Winds"]) {
    --cabin-property-type: "Cozy Cottages";
}

body.Property :is(.mc-datahook[data-cabin="Misty Pines"],
    .mc-datahook[data-cabin="Plane View"],
    .mc-datahook[data-cabin="Sunshine In The Pines"],
    .mc-datahook[data-cabin="Waterside Retreat"]) {
    --cabin-property-type: "Serene Retreats";
}

body.Property :is(.mc-datahook[data-cabin="Big Bear"],
    .mc-datahook[data-cabin="Blue Ridge Bliss"],
    .mc-datahook[data-cabin="Smore Sunsets"],
    .mc-datahook[data-cabin="Tranquility"],
    .mc-datahook[data-cabin="Wilderness Lodge"],
    .mc-datahook[data-cabin="Wooden Indian"]) {
    --cabin-property-type: "Elegant Lodges";
}

body.Property :is(.mc-datahook[data-cabin="Among The Pines"],
    .mc-datahook[data-cabin="Antler Lodge"],
    .mc-datahook[data-cabin="Blessings"],
    .mc-datahook[data-cabin="Happy Trails"]) {
    --cabin-property-type: "Ultimate Getaways";
}

The extensive color pallette token set on the root pseudo class is a very cool idea. I myself will have to use something like this. We use a color token system but not this awesome.

Consider spacing between your child combinators like
masthead > div {

great use of pseudo selectors all around tbh

is this a proprietary id name? #indexFeatures as in your don't have the ability to change it? Consistency with naming structure is preferred. If classes are named with hyphens, IDs are typically as well.

For a complete review, it would be useful to test this with the markup it is actually targeting, but so far it's really well done. Consistent naming, ample documentation, organized structure. Solid readability and DRYness with the use of vars and tokens. Considering the limitations of your current framework this is excellent.

Thank you for the detailed feedback. Yes I don't have control of most of the HTML, including the naming of these IDs. They give us a rich text field with raw source option to add content in designated areas. The camel case IDs made me think they are targeted by Javascript or the back end that holds our data.

This CSS is live in use on www.abovetherestcabins.com so the markup is there.

Checked and VS Code and DevTools all show spaces in combinator selectors. Does it get reformatted somewhere between copy and paste?