/* ========================================================================== SkyloveArt "Island Gallery" theme — 2026-09-24 Site-wide restyle layered over the Dawn scaffolding. Loaded LAST in every page's so it wins the cascade without touching Dawn's files. Palette: paper #FAF8F3 · ink #10262B · lagoon #14666F · gold #B07C3E Type: Cormorant Garamond (display) over Mulish (body) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Mulish:wght@400;500;600;700&display=swap'); :root { --font-body-family: 'Mulish', sans-serif; --font-heading-family: 'Cormorant Garamond', serif; --font-heading-weight: 600; --color-base-text: 16, 38, 43; --color-base-background-1: 250, 248, 243; --color-base-background-2: 243, 240, 232; --color-base-accent-1: 20, 102, 111; --color-base-accent-2: 176, 124, 62; --color-base-outline-button-labels: 16, 38, 43; --gradient-base-background-1: #FAF8F3; --gradient-base-background-2: #F3F0E8; --gradient-base-accent-1: #14666F; --gradient-base-accent-2: #B07C3E; --sla-paper: #FAF8F3; --sla-ink: #10262B; --sla-lagoon: #14666F; --sla-lagoon-dark: #0E4D55; --sla-gold: #B07C3E; --sla-hairline: #E7E1D4; --sla-muted: #576663; } body { background: var(--sla-paper); color: var(--sla-ink); } h1, h2, h3, h4, .h0, .h1, .h2, .h3, .banner__heading, .title, .product__title, .image-with-text__heading, .collage-wrapper-title, .rich-text__heading { font-family: 'Cormorant Garamond', serif !important; font-weight: 600 !important; color: var(--sla-ink) !important; letter-spacing: 0.01em; line-height: 1.12; text-align: inherit; } h1, .h1 { font-size: calc(4.2rem * var(--font-heading-scale)); } h2, .h2 { font-size: calc(3.4rem * var(--font-heading-scale)); } /* Links */ a { color: var(--sla-lagoon); } a:hover { color: var(--sla-lagoon-dark); } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .sla-announce { background: var(--sla-ink); color: var(--sla-paper); text-align: center; font-size: 1.25rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 1rem 1.6rem; } .header-wrapper { border-bottom: 1px solid var(--sla-hairline); } .header__menu-item span, .header__menu-item { font-size: 1.3rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sla-ink); } .header__menu-item:hover span { color: var(--sla-lagoon); text-decoration: none; } .header__heading-logo { max-height: 74px; width: auto !important; height: auto !important; max-width: 220px; object-fit: contain; } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .button, .shopify-challenge__button, .customer button, button.product-form__submit { font-family: 'Mulish', sans-serif; font-size: 1.35rem; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; border-radius: 0; } .button--secondary { --color-button: 20, 102, 111; --color-button-text: 251, 250, 246; } /* -------------------------------------------------------------------------- Breadcrumbs -------------------------------------------------------------------------- */ .breadcrumbs__list { padding: 1.8rem 0 0.4rem; } .breadcrumbs__link { font-size: 1.25rem; color: var(--sla-muted); text-decoration: none; letter-spacing: 0.02em; } .breadcrumbs__link[aria-current="page"] { color: var(--sla-ink); font-weight: 600; } /* -------------------------------------------------------------------------- Collection + product cards -------------------------------------------------------------------------- */ .card-information__text.h5 a, .card-information__text a { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 2.2rem; color: var(--sla-ink); letter-spacing: 0.01em; } .card--product { border: none; background: transparent; } .card--product .media { border-radius: 0; } .card--product img { transition: transform 0.45s ease; } .card-wrapper:hover .card--product img { transform: scale(1.03); } /* -------------------------------------------------------------------------- Product page -------------------------------------------------------------------------- */ .product__title { font-size: calc(4.4rem * var(--font-heading-scale)) !important; line-height: 1.05; margin-bottom: 0.6rem; } .price, .price__regular .price-item, .price-item--sale { font-family: 'Mulish', sans-serif; font-weight: 700; color: var(--sla-ink); } .product-form__input input[type='radio'] + label { border: 1px solid #C9C2B2; border-radius: 0; background: transparent; color: var(--sla-ink); font-weight: 600; letter-spacing: 0.02em; padding: 1.1rem 1.8rem; } .product-form__input input[type='radio']:checked + label { background: var(--sla-ink); color: var(--sla-paper); border-color: var(--sla-ink); } .form__label { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sla-muted); } .quantity { border: 1px solid #C9C2B2; border-radius: 0; } .product__description { color: #33443F; } .faa-text { color: var(--sla-muted); font-size: 1.4rem; } .faa-button img { max-width: 220px; } /* "You May Also Like" — retire the purple cursive */ .related-products h2 { font-family: 'Cormorant Garamond', serif !important; color: var(--sla-ink) !important; font-weight: 600 !important; font-size: 3rem !important; } .related-products__card span { font-family: 'Cormorant Garamond', serif; font-size: 1.9rem; font-weight: 600; } .related-products__card img { border-radius: 0; } /* -------------------------------------------------------------------------- Rich text / welcome -------------------------------------------------------------------------- */ .rich-text__blocks { max-width: 86rem; } .rich-text__text { color: #33443F; line-height: 1.75; } /* -------------------------------------------------------------------------- Homepage additions (sla-*) -------------------------------------------------------------------------- */ .sla-hero { position: relative; height: min(78vh, 660px); overflow: hidden; } .sla-hero img.sla-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sla-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,26,31,0.82) 0%, rgba(10,26,31,0.25) 45%, rgba(10,26,31,0.05) 70%); } .sla-hero__content { position: absolute; left: 6%; right: 6%; bottom: 8%; display: flex; flex-direction: column; gap: 1.6rem; max-width: 72rem; } .sla-eyebrow { font-size: 1.25rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: #E9C089; } .sla-eyebrow--ink { color: var(--sla-gold); } .sla-hero__title { margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(3.6rem, 5vw, 6.2rem); line-height: 1.08; color: #FBFAF6 !important; } .sla-hero__sub { margin: 0; font-size: 1.7rem; line-height: 1.6; color: #E8ECE9; max-width: 54rem; } .sla-hero__buttons { display: flex; gap: 1.4rem; margin-top: 0.6rem; flex-wrap: wrap; } .sla-btn { display: inline-flex; align-items: center; height: 5rem; padding: 0 3rem; font-size: 1.3rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; } .sla-btn--paper { background: #FBFAF6; color: var(--sla-ink); } .sla-btn--paper:hover { background: #fff; color: var(--sla-ink); } .sla-btn--ghost { border: 1px solid rgba(251,250,246,0.75); color: #FBFAF6; } .sla-btn--ghost:hover { border-color: #FBFAF6; color: #FBFAF6; } .sla-btn--ink { background: var(--sla-lagoon); color: #FBFAF6; } .sla-btn--ink:hover { background: var(--sla-lagoon-dark); color: #FBFAF6; } .sla-section { padding: 6rem 5vw; } .sla-section__head { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 3.6rem; text-align: center; } .sla-section__head h2 { margin: 0; font-size: 3.6rem; } .sla-section__row { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--sla-hairline); padding-top: 4.6rem; margin-bottom: 3rem; } .sla-section__row h2 { margin: 0; font-size: 3.6rem; } .sla-viewall { font-size: 1.2rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sla-lagoon); text-decoration: none; } .sla-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.6rem; } .sla-tile { display: flex; flex-direction: column; gap: 1.2rem; text-decoration: none; color: var(--sla-ink); } .sla-tile img { width: 100%; height: 340px; object-fit: cover; display: block; transition: transform 0.45s ease; } .sla-tile:hover img { transform: scale(1.02); } .sla-tile__row { display: flex; align-items: baseline; justify-content: space-between; } .sla-tile__name { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 2.2rem; } .sla-tile__cta { font-size: 1.15rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sla-lagoon); } .sla-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.6rem; } .sla-card { display: flex; flex-direction: column; gap: 1rem; text-decoration: none; color: var(--sla-ink); } .sla-card img { width: 100%; height: 340px; object-fit: cover; display: block; transition: transform 0.45s ease; } .sla-card:hover img { transform: scale(1.03); } .sla-card__name { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 2.1rem; } .sla-card__meta { font-size: 1.3rem; color: var(--sla-muted); } .sla-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.6rem; padding: 6rem 5vw; } .sla-value { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.1rem; } .sla-value svg { color: var(--sla-lagoon); } .sla-value__title { font-weight: 700; font-size: 1.5rem; } .sla-value__text { font-size: 1.35rem; line-height: 1.6; color: var(--sla-muted); max-width: 30rem; } @media screen and (max-width: 989px) { .sla-tiles, .sla-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sla-values { grid-template-columns: 1fr; } } @media screen and (max-width: 600px) { .sla-hero { height: 70vh; } } /* -------------------------------------------------------------------------- Footer — ink band -------------------------------------------------------------------------- */ .footer { background: var(--sla-ink) !important; color: #B9C6C1; border-top: none; } .footer, .footer.gradient { background: var(--sla-ink) !important; } .footer-block__heading { font-family: 'Mulish', sans-serif !important; font-size: 1.2rem !important; font-weight: 700 !important; letter-spacing: 0.18em; text-transform: uppercase; color: #7E938D !important; } .footer .link, .footer .list-menu__item, .footer a { color: #D9E0DC; } .footer .link:hover, .footer a:hover { color: #FBFAF6; } .footer .rte, .footer .footer-block__details-content { color: #B9C6C1; font-size: 1.4rem; line-height: 1.7; } .footer__content-bottom { border-top: 1px solid rgba(217,224,220,0.18); } .footer__copyright { color: #7E938D; } /* Dawn's blockquote/h3 purple cursive is retired in the header include; this is the backstop for any page carrying its own copy of those rules. */ blockquote { font-family: 'Mulish', sans-serif !important; border-left: 3px solid var(--sla-lagoon) !important; background: #F3F0E8 !important; }