/* ============================================================ 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; } /* Hero CTAs sit over a bright sky — make them solid and high-contrast so they read clearly */ .home .hero--home__actions .btn--glass { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; box-shadow: 0 10px 26px rgba(0,60,67,0.38); } .home .hero--home__actions .btn--glass:hover { background: var(--brand-primary-hover); border-color: var(--brand-primary-hover); color: #fff; } .home .hero--home__actions .btn--outline-light { background: rgba(255,255,255,0.96); border-color: #fff; color: var(--brand-primary-hover); box-shadow: 0 10px 26px rgba(0,60,67,0.28); } .home .hero--home__actions .btn--outline-light:hover { background: #fff; color: var(--brand-primary-hover); } /* Eyebrow forward-arrow motif now lives in the shared kit (.rs-eyebrow-line), so it renders consistently on every page. Homepage keeps the teal color. */ .home .rs-eyebrow-line { color: var(--brand-primary); } /* ============================================================ 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-search-btn { background: transparent; border-color: rgba(255,255,255,0.6); color: #fff; } .home .site-search-btn:hover { background: rgba(255,255,255,0.16); border-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(96vh, 900px); overflow: hidden; } /* clouds — wide so they can parallax to the right without a gap */ .hero--home__bg { position: absolute; top: 0; left: -26%; width: 152%; max-width: none; height: 100%; object-fit: cover; z-index: 0; will-change: transform; } .home .hero--home::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(74% 58% at 50% 40%, rgba(0,84,93,0.40) 0%, rgba(0,120,131,0.12) 55%, rgba(0,144,155,0.02) 100%); } /* portrait sits FLUSH with the bottom, filling the hero height */ .hero--home__stage { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); height: 100%; aspect-ratio: 951 / 851; z-index: 2; } .hero--home__person { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* headline sits inside the portrait's speech bubble — LARGE, like the old site */ .hero--home__inner { position: absolute; left: 12%; right: 14%; top: 29%; bottom: 49%; display: flex; flex-direction: column; align-items: stretch; justify-content: center; text-align: center; } .home .hero--home h1 { color: #fff; font-weight: 500; letter-spacing: 0.03em; line-height: 1.08; font-size: clamp(1.7rem, 0.5rem + 3.5vw, 3.5rem); text-shadow: 0 2px 18px rgba(0,60,67,0.6); margin: 0; } .home .hero--home h1 em { font-style: italic; font-weight: 400; color: #fff; } .hero--home__sub { margin: 10px 0 0; color: rgba(255,255,255,0.95); font-style: italic; font-weight: 300; font-size: clamp(13px, 0.55rem + 0.6vw, 17px); line-height: 1.4; text-shadow: 0 1px 10px rgba(0,60,67,0.55); } .hero--home__actions { position: absolute; bottom: 40px; left: 0; right: 0; z-index: 3; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; padding: 0 16px; } /* ============================================================ 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.16em; text-transform: uppercase; font-size: 13.5px; } .home .card-img h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 700; font-size: clamp(1.7rem, 1.3rem + 1.1vw, 2.15rem); line-height: 1.06; margin-top: 12px; } .home .card-img__rule { width: 48px; height: 3px; background: var(--yellow); margin: 16px auto; } .home .card-img__desc { color: rgba(255,255,255,0.9); font-size: 16px; line-height: 1.6; font-weight: 400; max-width: 32ch; } .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__photo { width: 74px; height: 74px; border: 3px solid rgba(255,255,255,0.55); } .home .testimonial--tinted .testimonial__name { color: var(--yellow); font-weight: 700; } .home .testimonial--tinted .testimonial__role { color: rgba(255,255,255,0.85); } /* full-bleed band, content centered in a max-width */ .home .testimonial--full { border-radius: 0; max-width: none; padding: 72px 24px; } .home .testimonial--full .testimonial__inner { max-width: 940px; margin: 0 auto; } /* endorsement reads as a DARK band so it separates from the teal mission band */ .home .testimonial--full { background: var(--ink); } .home .testimonial--full .testimonial__mark { color: rgba(255,255,255,0.35); } /* ============================================================ Homepage section rhythm — band system lives in restory-components.css (.hsec--tint / .hsec--ink / .hsec__title / .hsec__lead), shared with interior pages. Homepage-specific pieces below. ============================================================ */ /* Beliefs → centered statement on a tint band, with an AG affiliation badge */ .home .hsec--beliefs { text-align: center; } .home .hsec--beliefs .rs-eyebrow-line { justify-content: center; } .home .hsec--beliefs .hsec__lead { max-width: 58ch; margin-left: auto; margin-right: auto; } .home .beliefs-badge { display: inline-flex; align-items: center; gap: 9px; margin-top: 24px; padding: 10px 18px; border: 1.5px solid var(--brand-primary); border-radius: 3px; background: #fff; color: var(--brand-primary-hover); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.09em; font-size: 12.5px; font-weight: 600; } .home .beliefs-badge svg { width: 15px; height: 15px; color: var(--brand-primary); } .home .hsec--beliefs .btn { margin-top: 26px; } /* ============================================================ NEWSLETTER — "GET EQUIPPED" light section w/ outlined inputs ============================================================ */ /* soft teal panel so the sign-up reads as a defined container, not floating text */ .home .newsletter { background: linear-gradient(165deg, #eaf5f5 0%, #d9edef 100%); border: 1px solid rgba(0,144,155,0.18); } .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(--teal-300); 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: 82vh; } /* width-drive the portrait so the bubble fits the viewport (still bottom-flush) */ .home .hero--home__stage { height: auto; width: min(430px, 112vw); } .home .hero--home h1 { letter-spacing: 0.02em; font-size: clamp(0.82rem, 3.3vw, 1.3rem); overflow-wrap: break-word; } .hero--home__sub { font-size: clamp(9px, 2.3vw, 12px); } .home .hero--home__actions { bottom: 22px; flex-direction: column; align-items: stretch; gap: 10px; padding: 0 26px; } .home .hero--home__actions .btn { width: 100%; } }