/* ============================================================ ReStory homepage — "old site" look & feel over the new organization. Scoped to . Layers on top of the design system (/styles.css); does not modify the shared kit. Remove the body class or this to revert to the modern styling. Old-site signatures: transparent header, centered cloud hero with a thin border frame, dark photo tiles, solid teal bands, yellow accents, outlined caps buttons, dark footer. ============================================================ */ /* ---- Clean lead-in: hide the announcement bar (old site led with hero) ---- */ .home .banner { display: none; } /* ---- Buttons: uppercase, squared, outlined — the old-site treatment ---- */ .home .btn { text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; font-size: 12.5px; border-radius: 3px; } .home .btn--lg { font-size: 13.5px; border-radius: 3px; } .home .btn--primary { box-shadow: none; } .home .btn--secondary { background: transparent; border-width: 1.5px; border-color: var(--brand-primary); color: var(--brand-primary); } .home .btn--secondary:hover { background: var(--brand-primary); color: #fff; } /* outlined-on-dark / glass for teal & photo sections */ .home .btn--glass, .home .btn--outline-light { background: transparent; border: 1.5px solid rgba(255,255,255,0.8); color: #fff; box-shadow: none; } .home .btn--glass:hover, .home .btn--outline-light:hover { background: #fff; color: var(--brand-primary); border-color: #fff; } /* ---- Eyebrows: yellow forward-arrow motif from the brand guide ---- */ .home .rs-eyebrow-line { display: inline-flex; align-items: center; gap: 10px; color: var(--brand-primary); } .home .rs-eyebrow-line::before { content: ""; width: 26px; height: 0; border-top: 2px solid var(--yellow); position: relative; } .home .rs-eyebrow-line::after { content: ""; width: 0; height: 0; margin-left: -16px; border-left: 7px solid var(--yellow); border-top: 5px solid transparent; border-bottom: 5px solid transparent; } /* ============================================================ HERO — full-bleed cloud sky, centered condensed caps, border frame ============================================================ */ .home .site-header { position: absolute; left: 0; right: 0; top: 0; background: transparent; border-bottom: none; } .home .site-header::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 180px; z-index: -1; background: linear-gradient(180deg, rgba(40,46,54,0.45), rgba(40,46,54,0)); pointer-events: none; } .home .site-header__logo img { filter: brightness(0) invert(1); } /* slate logo -> white */ .home .site-nav a { color: rgba(255,255,255,0.92); } .home .site-nav a:hover { color: #fff; } .home .site-nav .has-menu > a::after { border-color: rgba(255,255,255,0.92); } .home .nav-toggle { color: #fff; } .home .site-header__actions .btn--secondary { border-color: rgba(255,255,255,0.7); color: #fff; } .home .site-header__actions .btn--secondary:hover { background: rgba(255,255,255,0.16); color: #fff; } /* dropdown panels stay on light cards */ .home .nav-menu a { color: var(--text-secondary); } .home .nav-menu a:hover { color: var(--brand-primary-hover); } .home .hero--home { position: relative; min-height: min(88vh, 760px); display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; padding: 150px 22px 96px; } .hero--home__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .home .hero--home::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,120,131,0.32) 0%, rgba(0,144,155,0.12) 45%, rgba(160,216,206,0) 100%); } .hero--home__inner { position: relative; z-index: 2; max-width: 860px; margin: 0 auto; } .hero--home__frame { border: 1px solid rgba(255,255,255,0.6); border-radius: 10px; padding: 44px clamp(24px,5vw,56px); } .home .hero--home h1 { color: #fff; font-weight: 400; letter-spacing: 0.09em; line-height: 1.14; font-size: clamp(2rem, 1rem + 3.4vw, 3.7rem); text-shadow: 0 2px 22px rgba(0,70,78,0.4); } .home .hero--home h1 em { font-style: italic; font-weight: 300; color: #fff; } .hero--home__sub { margin: 18px auto 0; max-width: 48ch; color: rgba(255,255,255,0.94); font-style: italic; font-weight: 300; font-size: clamp(16px, 1rem + 0.4vw, 20px); line-height: 1.55; text-shadow: 0 1px 12px rgba(0,70,78,0.35); } .hero--home__actions { margin-top: 32px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* ============================================================ PATHWAY TILES — dark photo cards w/ centered icon + caps title ============================================================ */ .home .pathway-grid { gap: 4px; } /* old tiles sit nearly flush */ .home .card-img { min-height: 340px; justify-content: center; align-items: center; text-align: center; border-radius: 0; padding: 36px 26px; } .home .card-img::after { background: linear-gradient(180deg, rgba(40,46,54,0.62), rgba(40,46,54,0.72)); } .home .card-img:hover::after { background: linear-gradient(180deg, rgba(0,120,131,0.66), rgba(0,110,120,0.78)); } .home .card-img__icon { width: 52px; height: 52px; margin: 0 auto 16px; color: #fff; } .home .card-img__icon svg { width: 100%; height: 100%; stroke-width: 1.4; } .home .card-img__meta { color: var(--yellow); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; font-size: 11.5px; } .home .card-img h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; font-size: 23px; margin-top: 10px; } .home .card-img__rule { width: 42px; height: 2px; background: rgba(255,255,255,0.5); margin: 14px auto; } .home .card-img__desc { color: rgba(255,255,255,0.85); font-size: 14.5px; line-height: 1.6; font-weight: 300; max-width: 30ch; } .home .card-img .collection-card__more { justify-content: center; color: var(--yellow); margin-top: 14px; } /* ============================================================ SOLID TEAL BANDS — replace tinted/gradient bands; yellow accents ============================================================ */ .home .imgband--teal { background: var(--brand-primary); } .home .imgband--teal .imgband__bg { display: none; } /* solid color, no photo wash */ .home .imgband--teal::after { background: none; } .home .cta-banner__eyebrow { color: var(--yellow); } /* Endorsement → solid teal band, big white quote, yellow attribution */ .home .testimonial--tinted { background: var(--brand-primary); color: #fff; border-radius: 4px; padding: 48px clamp(28px,5vw,64px); text-align: center; } .home .testimonial--tinted .testimonial__mark { color: rgba(255,255,255,0.5); font-size: 60px; } .home .testimonial--tinted blockquote { color: #fff; font-family: var(--font-display); text-transform: uppercase; font-style: normal; font-weight: 400; letter-spacing: 0.04em; line-height: 1.2; font-size: clamp(1.4rem, 1rem + 1.6vw, 2.2rem); } .home .testimonial--tinted figcaption { justify-content: center; margin-top: 22px; } .home .testimonial--tinted .avatar { display: none; } .home .testimonial--tinted .testimonial__name { color: var(--yellow); font-weight: 700; } .home .testimonial--tinted .testimonial__role { color: rgba(255,255,255,0.85); } /* ============================================================ NEWSLETTER — "GET EQUIPPED" light section w/ outlined inputs ============================================================ */ .home .newsletter { background: var(--surface-sunken); } .home .newsletter::before { display: none; } .home .newsletter__eyebrow { color: var(--brand-primary); } .home .newsletter h2 { color: var(--text-primary); } .home .newsletter p { color: var(--text-secondary); } .home .newsletter__form input { background: #fff; border: 1.5px solid var(--brand-soft); color: var(--text-primary); } /* ============================================================ FOOTER — dark slate (old-site) ============================================================ */ .home .site-footer { background: var(--ink); margin-top: 90px; } .home .site-footer__grid { border-top-color: rgba(255,255,255,0.12); } .home .site-footer__brand img { filter: brightness(0) invert(1); } .home .site-footer__brand p { color: rgba(255,255,255,0.7); } .home .site-footer h5 { color: #fff; } .home .site-footer__col a, .home .site-footer__bottom span, .home .site-footer__legal a { color: rgba(255,255,255,0.66); } .home .site-footer__col a:hover, .home .site-footer__legal a:hover { color: var(--yellow); } .home .site-footer__bottom { border-top-color: rgba(255,255,255,0.12); } .home .site-footer p[style] { color: rgba(255,255,255,0.7) !important; } /* keep the modern info panels readable on the now-dark page rhythm */ .home .info-2 .panel { border-color: var(--border-default); } @media (max-width: 760px) { .home .hero--home { min-height: 78vh; padding: 116px 16px 72px; } .home .hero--home__inner { max-width: 100%; } .home .hero--home__frame { padding: 26px 18px; } .home .hero--home h1 { letter-spacing: 0.03em; font-size: clamp(1.5rem, 1rem + 3vw, 2rem); overflow-wrap: break-word; } .hero--home__sub { font-size: 15.5px; } .home .hero--home__actions { flex-direction: column; align-items: stretch; gap: 12px; } .home .hero--home__actions .btn { width: 100%; } }