/*-------------------------------------------------------------- Front Page — Community Styles for the "Front Page — Community" page template (page-templates/front-community.php). Loaded only on pages using that template, so nothing here leaks into the rest of the site. Derived from the "Stephanie Community" design canvas. --------------------------------------------------------------*/ .sdd-front { /* Palette */ --sdd-bg: #08050c; --sdd-bg-alt: #0c0710; --sdd-panel: #120c16; --sdd-ink: #ece7f0; --sdd-ink-strong: #fff; --sdd-ink-soft: rgba( 236, 231, 240, 0.74 ); --sdd-ink-mute: rgba( 236, 231, 240, 0.55 ); --sdd-ink-faint: rgba( 236, 231, 240, 0.45 ); --sdd-accent: #b8365f; --sdd-accent-soft: #e79ab4; --sdd-rose: #d1436d; --sdd-plum: #7e2b6b; --sdd-line: rgba( 236, 231, 240, 0.09 ); --sdd-line-strong: rgba( 236, 231, 240, 0.22 ); --sdd-fill: rgba( 236, 231, 240, 0.035 ); /* Type */ --sdd-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --sdd-sans: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Rhythm */ --sdd-gutter: clamp( 16px, 4vw, 60px ); --sdd-section-y: clamp( 56px, 8vw, 120px ); --sdd-shell: 1240px; --sdd-pill: 999px; position: relative; background: var( --sdd-bg ); color: var( --sdd-ink ); font-family: var( --sdd-sans ); font-weight: 400; overflow-x: clip; -webkit-font-smoothing: antialiased; } /* Don't depend on the parent theme's reset for the box model. */ .sdd-front, .sdd-front *, .sdd-front *::before, .sdd-front *::after { box-sizing: border-box; } /*-------------------------------------------------------------- # Breaking out of the BuddyBoss content grid --------------------------------------------------------------*/ .page-template-front-community #content.site-content { padding: 0; } .page-template-front-community #content.site-content > .container { max-width: none; width: 100%; padding: 0; margin: 0; } .page-template-front-community .sdd-front-grid { display: block; margin: 0; } .page-template-front-community #primary.content-area, .page-template-front-community #main.site-main { width: 100%; max-width: none; padding: 0; margin: 0; float: none; } /* The landing nav replaces the site header for signed-out visitors. */ .page-template-front-community.sdd-front-standalone #masthead, .page-template-front-community.sdd-front-standalone .header-mobile, .page-template-front-community.sdd-front-standalone .buddypanel { display: none; } .page-template-front-community.sdd-front-standalone #page.site, .page-template-front-community.sdd-front-standalone #content.site-content { padding-top: 0; margin-top: 0; } .page-template-front-community #page.site, .page-template-front-community body, .page-template-front-community .site-content { background: #08050c; } /*-------------------------------------------------------------- # Shared primitives --------------------------------------------------------------*/ .sdd-front a { color: var( --sdd-accent-soft ); text-decoration: none; } .sdd-front a:hover, .sdd-front a:focus { color: #ffd7e3; } .sdd-front *:focus-visible { outline: 2px solid var( --sdd-accent ); outline-offset: 3px; border-radius: 4px; } .sdd-front ::selection { background: var( --sdd-accent ); color: #fff; } .sdd-shell { max-width: var( --sdd-shell ); margin: 0 auto; } .sdd-section { padding: var( --sdd-section-y ) var( --sdd-gutter ); } .sdd-section--hairline { border-top: 1px solid rgba( 236, 231, 240, 0.07 ); } .sdd-section--shade { background: linear-gradient( 180deg, var( --sdd-bg-alt ), var( --sdd-bg ) ); } .sdd-stack { display: flex; flex-direction: column; gap: clamp( 30px, 4vw, 54px ); } .sdd-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 60ch; } .sdd-eyebrow { font-size: 10.5px; letter-spacing: 0.3em; text-transform: uppercase; color: var( --sdd-accent ); } /* BuddyBoss's Customizer typography emits `.bb-custom-typo h1…h6 { font-family: … }` and puts `bb-custom-typo` on — specificity 0,1,1, which out-ranks a bare class. Every heading family below is therefore scoped to .sdd-front (0,2,0) so the designed faces actually win. The element-level rule is a safety net for any heading added later. */ .sdd-front h1, .sdd-front h2, .sdd-front h3, .sdd-front h4, .sdd-front h5, .sdd-front h6 { font-family: var( --sdd-sans ); } .sdd-front .sdd-h1, .sdd-front .sdd-h2 { margin: 0; font-family: var( --sdd-serif ); font-weight: 500; letter-spacing: -0.015em; text-wrap: pretty; color: var( --sdd-ink ); } .sdd-h1 { font-size: clamp( 42px, 6.4vw, 82px ); line-height: 1.02; letter-spacing: -0.02em; } .sdd-h1 em { font-style: italic; color: var( --sdd-accent-soft ); } .sdd-h2 { font-size: clamp( 32px, 3.8vw, 50px ); line-height: 1.08; } .sdd-text { margin: 0; font-size: 16.5px; font-weight: 300; line-height: 1.7; color: var( --sdd-ink-soft ); } .sdd-text + .sdd-text { margin-top: 14px; } .sdd-text a { text-decoration: underline; text-underline-offset: 3px; } /* Buttons */ .sdd-actions { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; } .sdd-btn { display: inline-block; padding: 16px 30px; border: 1px solid transparent; border-radius: var( --sdd-pill ); font-family: var( --sdd-sans ); font-size: 13.5px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1; cursor: pointer; transition: filter 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } .sdd-btn--primary, .sdd-btn--primary:hover, .sdd-btn--primary:focus { background: linear-gradient( 135deg, var( --sdd-rose ), var( --sdd-plum ) ); color: #fff; box-shadow: 0 14px 40px rgba( 184, 54, 95, 0.36 ); } .sdd-btn--primary:hover, .sdd-btn--primary:focus { filter: brightness( 1.14 ); } .sdd-btn--ghost { border-color: var( --sdd-line-strong ); color: var( --sdd-ink ); } .sdd-btn--ghost:hover, .sdd-btn--ghost:focus { border-color: var( --sdd-accent ); background: rgba( 184, 54, 95, 0.12 ); color: var( --sdd-ink ); } .sdd-btn--sm { padding: 14px 26px; font-size: 12.5px; } /* Image slots */ .sdd-frame { position: relative; overflow: hidden; border: 1px solid rgba( 236, 231, 240, 0.1 ); border-radius: 22px; background: var( --sdd-panel ); } .sdd-frame img, .sdd-frame .sdd-slot { display: block; width: 100%; height: 100%; object-fit: cover; } .sdd-slot { display: flex; align-items: center; justify-content: center; padding: 18px; background: radial-gradient( 60% 60% at 50% 30%, rgba( 209, 67, 109, 0.14 ), transparent 70% ), var( --sdd-panel ); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; text-align: center; color: rgba( 236, 231, 240, 0.34 ); } /*-------------------------------------------------------------- # Landing nav --------------------------------------------------------------*/ .sdd-nav { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px var( --sdd-gutter ); background: rgba( 8, 5, 12, 0.86 ); backdrop-filter: blur( 16px ); -webkit-backdrop-filter: blur( 16px ); border-bottom: 1px solid rgba( 236, 231, 240, 0.07 ); } .sdd-nav__brand { display: flex; align-items: baseline; gap: 10px; color: var( --sdd-ink ); } .sdd-nav__brand:hover { color: var( --sdd-ink ); } .sdd-nav__name { font-family: var( --sdd-serif ); font-style: italic; font-size: 22px; } .sdd-nav__tag { font-size: 9.5px; letter-spacing: 0.34em; text-transform: uppercase; color: var( --sdd-accent ); } .sdd-nav__links { display: flex; align-items: center; gap: clamp( 12px, 2vw, 28px ); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba( 236, 231, 240, 0.7 ); } .sdd-nav__links a { color: inherit; } .sdd-nav__links a:hover, .sdd-nav__links a:focus, .sdd-nav__links a.is-current { color: var( --sdd-ink-strong ); } .sdd-nav__cta { padding: 11px 22px; border-radius: var( --sdd-pill ); background: linear-gradient( 135deg, var( --sdd-rose ), var( --sdd-plum ) ); color: #fff; letter-spacing: 0.14em; box-shadow: 0 10px 28px rgba( 184, 54, 95, 0.34 ); } .sdd-nav__cta:hover, .sdd-nav__cta:focus, .sdd-nav__links a.sdd-nav__cta:hover { color: #fff; filter: brightness( 1.14 ); } @media ( max-width: 640px ) { .sdd-nav__links .sdd-nav__link { display: none; } } /*-------------------------------------------------------------- # Hero --------------------------------------------------------------*/ .sdd-hero { position: relative; overflow: hidden; padding: clamp( 52px, 8vw, 120px ) var( --sdd-gutter ) clamp( 56px, 8vw, 118px ); } .sdd-hero__glow { position: absolute; inset: -25% -15% auto -20%; height: 130%; background: radial-gradient( 40% 44% at 24% 26%, rgba( 209, 67, 109, 0.3 ), transparent 70% ), radial-gradient( 38% 42% at 76% 10%, rgba( 126, 43, 107, 0.32 ), transparent 72% ); filter: blur( 12px ); pointer-events: none; } .sdd-hero__inner { position: relative; display: grid; grid-template-columns: repeat( auto-fit, minmax( 300px, 1fr ) ); gap: clamp( 28px, 5vw, 72px ); align-items: center; max-width: var( --sdd-shell ); margin: 0 auto; } .sdd-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } .sdd-hero__lede { max-width: 46ch; font-size: clamp( 16px, 1.4vw, 19px ); line-height: 1.65; } .sdd-stats { display: flex; flex-wrap: wrap; gap: 28px; width: 100%; padding-top: 18px; border-top: 1px solid rgba( 236, 231, 240, 0.08 ); } .sdd-stat { display: flex; flex-direction: column; gap: 3px; padding-top: 18px; } .sdd-stat__num { font-family: var( --sdd-serif ); font-size: 26px; } .sdd-stat__label { font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var( --sdd-ink-mute ); } .sdd-hero__media { position: relative; display: flex; justify-content: center; } .sdd-hero__frame { position: relative; width: 100%; max-width: 460px; aspect-ratio: 4 / 5; border-radius: 26px; border-color: rgba( 236, 231, 240, 0.12 ); box-shadow: 0 40px 90px rgba( 0, 0, 0, 0.6 ); } .sdd-badge { position: absolute; bottom: -18px; left: clamp( 0px, 2vw, 20px ); display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; border: 1px solid rgba( 236, 231, 240, 0.14 ); border-radius: var( --sdd-pill ); background: rgba( 18, 12, 22, 0.92 ); backdrop-filter: blur( 8px ); -webkit-backdrop-filter: blur( 8px ); box-shadow: 0 18px 40px rgba( 0, 0, 0, 0.5 ); } .sdd-badge__avatar { width: 38px; height: 38px; flex: none; border: 0; border-radius: var( --sdd-pill ); overflow: hidden; } .sdd-badge__avatar .sdd-slot { font-size: 0; padding: 0; } .sdd-badge__copy { display: flex; flex-direction: column; } .sdd-badge__price { font-size: 13px; letter-spacing: 0.02em; } .sdd-badge__note { font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba( 236, 231, 240, 0.5 ); } /*-------------------------------------------------------------- # About --------------------------------------------------------------*/ .sdd-about__inner { display: grid; grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) ); gap: clamp( 28px, 5vw, 70px ); align-items: center; } .sdd-about__media { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .sdd-about__media .sdd-frame { aspect-ratio: 3 / 4; } .sdd-about__media .sdd-frame:first-child { margin-top: 34px; } .sdd-about__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .sdd-about__copy .sdd-text { max-width: 50ch; } .sdd-tags { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 4px; } .sdd-tag { padding: 8px 15px; border: 1px solid var( --sdd-line-strong ); border-radius: var( --sdd-pill ); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var( --sdd-ink-soft ); } .sdd-tag--rose { background: rgba( 184, 54, 95, 0.16 ); border-color: rgba( 184, 54, 95, 0.4 ); color: #f0b6c8; } .sdd-tag--plum { background: rgba( 126, 43, 107, 0.18 ); border-color: rgba( 126, 43, 107, 0.45 ); color: #dcb4e6; } /*-------------------------------------------------------------- # Cards (community + perks) --------------------------------------------------------------*/ .sdd-cards { display: grid; grid-template-columns: repeat( auto-fit, minmax( 255px, 1fr ) ); gap: 18px; } .sdd-cards--perks { grid-template-columns: repeat( auto-fit, minmax( 270px, 1fr ) ); } .sdd-card { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var( --sdd-line ); border-radius: 22px; background: var( --sdd-fill ); transition: border-color 0.25s ease, background-color 0.25s ease, transform 0.25s ease; } .sdd-cards--numbered .sdd-card:hover { border-color: rgba( 184, 54, 95, 0.5 ); background: rgba( 184, 54, 95, 0.07 ); transform: translateY( -2px ); } .sdd-cards--perks .sdd-card { gap: 10px; padding: 26px; } .sdd-card__num { font-family: var( --sdd-serif ); font-size: 20px; color: var( --sdd-accent-soft ); } .sdd-front .sdd-card__title { margin: 0; font-family: var( --sdd-sans ); font-size: 19px; font-weight: 500; letter-spacing: 0.01em; color: var( --sdd-ink ); } .sdd-cards--perks .sdd-card__title { font-size: 18px; } .sdd-card__text { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.65; color: rgba( 236, 231, 240, 0.68 ); } .sdd-cards--perks .sdd-card__text { font-size: 14.5px; line-height: 1.6; color: rgba( 236, 231, 240, 0.66 ); } .sdd-card--hl { background: linear-gradient( 150deg, rgba( 209, 67, 109, 0.22 ), rgba( 126, 43, 107, 0.18 ) ); border-color: rgba( 184, 54, 95, 0.45 ); } .sdd-card--hl .sdd-card__text { color: rgba( 236, 231, 240, 0.8 ); } /*-------------------------------------------------------------- # Photo grid --------------------------------------------------------------*/ .sdd-photos { display: grid; grid-template-columns: repeat( auto-fit, minmax( 180px, 1fr ) ); gap: 14px; } .sdd-photos .sdd-frame { aspect-ratio: 1; border-radius: 20px; } /*-------------------------------------------------------------- # Merch --------------------------------------------------------------*/ .sdd-merch__head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; } .sdd-merch__head .sdd-intro { max-width: 48ch; } .sdd-products { display: grid; grid-template-columns: repeat( auto-fit, minmax( 230px, 1fr ) ); gap: 20px; } .sdd-product { display: flex; flex-direction: column; gap: 14px; color: var( --sdd-ink ); } .sdd-product:hover, .sdd-product:focus { color: var( --sdd-ink ); } .sdd-product .sdd-frame { aspect-ratio: 4 / 5; transition: transform 0.3s ease, border-color 0.3s ease; } .sdd-product:hover .sdd-frame { transform: translateY( -4px ); border-color: rgba( 184, 54, 95, 0.45 ); } .sdd-product__row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .sdd-product__name { font-size: 16px; } .sdd-product__price, .sdd-product__price .amount, .sdd-product__price bdi { font-family: var( --sdd-serif ); font-size: 17px; color: var( --sdd-accent-soft ); } .sdd-product__price del { opacity: 0.5; font-size: 14px; } .sdd-product__note { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var( --sdd-ink-faint ); } /*-------------------------------------------------------------- # Plans --------------------------------------------------------------*/ .sdd-plans { display: grid; grid-template-columns: repeat( auto-fit, minmax( 268px, 1fr ) ); gap: 18px; align-items: stretch; } .sdd-plan { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 32px 28px; border: 1px solid rgba( 236, 231, 240, 0.1 ); border-radius: 26px; background: var( --sdd-fill ); transition: border-color 0.25s ease, transform 0.25s ease; } .sdd-plan:hover { border-color: rgba( 184, 54, 95, 0.45 ); } .sdd-plan--featured { background: linear-gradient( 160deg, rgba( 209, 67, 109, 0.2 ), rgba( 126, 43, 107, 0.16 ) ); border-color: rgba( 184, 54, 95, 0.5 ); box-shadow: 0 26px 60px rgba( 184, 54, 95, 0.18 ); } .sdd-plan__ribbon { position: absolute; top: -12px; left: 28px; padding: 6px 14px; border-radius: var( --sdd-pill ); background: linear-gradient( 135deg, var( --sdd-rose ), var( --sdd-plum ) ); color: #fff; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; } .sdd-plan__head { display: flex; flex-direction: column; gap: 8px; } .sdd-plan__name { font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba( 236, 231, 240, 0.6 ); } .sdd-plan--featured .sdd-plan__name { color: #f0b6c8; } .sdd-plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin: 0; } .sdd-plan__amount { font-family: var( --sdd-serif ); font-size: 44px; line-height: 1; color: var( --sdd-ink ); } .sdd-plan__period { font-size: 13px; color: var( --sdd-ink-mute ); } .sdd-plan--featured .sdd-plan__period { color: rgba( 236, 231, 240, 0.6 ); } .sdd-plan__period--wide { font-size: 20px; } /* A WooCommerce price string carries its own "/ month" suffix: the amount takes the display size, the surrounding text stays small. */ .sdd-plan__price--wc { font-size: 13px; color: var( --sdd-ink-mute ); } .sdd-plan__price--wc .amount, .sdd-plan__price--wc .amount bdi { font-family: var( --sdd-serif ); font-size: 44px; line-height: 1; color: var( --sdd-ink ); } /* Only the headline amount gets display size; one nested inside a suffix (e.g. a sign-up fee spelled out by WooCommerce) stays small. */ .sdd-plan__price--wc .subscription-details .amount, .sdd-plan__price--wc .subscription-details .amount bdi { font-family: var( --sdd-sans ); font-size: 13px; line-height: inherit; color: inherit; } /* The lifetime tier's "/ ∞" suffix keeps the display emphasis it has in the design, whether it comes from our copy or the store's price HTML. */ .sdd-plan__price--wc .wmwp-bbmm-plan__price-suffix { font-size: 20px; } .sdd-plan__price--wc del, .sdd-plan__price--wc del .amount, .sdd-plan__price--wc del .amount bdi { font-size: 20px; opacity: 0.5; } .sdd-plan__blurb { margin: 0; font-size: 14.5px; font-weight: 300; line-height: 1.6; color: rgba( 236, 231, 240, 0.66 ); } .sdd-plan--featured .sdd-plan__blurb { color: rgba( 236, 231, 240, 0.78 ); } .sdd-plan__features { display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 0; list-style: none; font-size: 14.5px; font-weight: 300; line-height: 1.4; color: rgba( 236, 231, 240, 0.78 ); } .sdd-plan--featured .sdd-plan__features { color: rgba( 236, 231, 240, 0.86 ); } .sdd-plan__features li { margin: 0; list-style: none; } .sdd-plan__cta { margin-top: auto; width: 100%; padding: 15px; font-size: 12.5px; text-align: center; } .sdd-plans__note { font-size: 13px; color: rgba( 236, 231, 240, 0.5 ); } .sdd-plans__note a { border-bottom: 1px solid rgba( 231, 154, 180, 0.5 ); } /*-------------------------------------------------------------- # Join --------------------------------------------------------------*/ .sdd-join { position: relative; padding: clamp( 60px, 9vw, 130px ) var( --sdd-gutter ); overflow: hidden; } .sdd-join__glow { position: absolute; inset: auto -10% -40% -10%; height: 120%; background: radial-gradient( 45% 50% at 50% 80%, rgba( 209, 67, 109, 0.3 ), transparent 70% ); pointer-events: none; } .sdd-join__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 760px; margin: 0 auto; padding: clamp( 30px, 5vw, 58px ); border: 1px solid rgba( 236, 231, 240, 0.12 ); border-radius: 30px; background: rgba( 18, 12, 22, 0.7 ); backdrop-filter: blur( 10px ); -webkit-backdrop-filter: blur( 10px ); box-shadow: 0 40px 90px rgba( 0, 0, 0, 0.55 ); text-align: center; } .sdd-join__card .sdd-h2 { font-size: clamp( 32px, 4.4vw, 54px ); line-height: 1.06; } .sdd-join__card .sdd-text { max-width: 44ch; line-height: 1.65; } .sdd-form { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; max-width: 480px; } .sdd-input { flex: 1 1 220px; min-width: 0; padding: 16px 22px; border: 1px solid rgba( 236, 231, 240, 0.2 ); border-radius: var( --sdd-pill ); background: rgba( 8, 5, 12, 0.7 ); color: var( --sdd-ink ); font-family: var( --sdd-sans ); font-size: 15px; line-height: 1.2; } .sdd-input::placeholder { color: rgba( 236, 231, 240, 0.4 ); } .sdd-input:focus { border-color: var( --sdd-accent ); outline: none; box-shadow: 0 0 0 3px rgba( 184, 54, 95, 0.18 ); } .sdd-form .sdd-btn { font-size: 13px; box-shadow: 0 12px 34px rgba( 184, 54, 95, 0.36 ); } .sdd-note { font-size: 12.5px; color: rgba( 236, 231, 240, 0.5 ); } /* Signup shortcode rendered inside the join card, if enabled. */ .sdd-join__shortcode { width: 100%; text-align: left; } .sdd-join__shortcode input:not( [type='checkbox'] ):not( [type='radio'] ), .sdd-join__shortcode select, .sdd-join__shortcode textarea { background: rgba( 8, 5, 12, 0.7 ); border-color: rgba( 236, 231, 240, 0.2 ); color: var( --sdd-ink ); } .sdd-join__shortcode label, .sdd-join__shortcode p, .sdd-join__shortcode h1, .sdd-join__shortcode h2, .sdd-join__shortcode h3 { color: var( --sdd-ink ); } /*-------------------------------------------------------------- # Fine print --------------------------------------------------------------*/ .sdd-fineprint { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 32px var( --sdd-gutter ) 44px; border-top: 1px solid rgba( 236, 231, 240, 0.07 ); font-size: 12.5px; color: var( --sdd-ink-faint ); } .sdd-fineprint__links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var( --sdd-ink-mute ); } .sdd-fineprint__links a { color: inherit; } .sdd-fineprint__links a:hover, .sdd-fineprint__links a:focus { color: var( --sdd-ink-strong ); } /*-------------------------------------------------------------- # Signed-in site header, tinted to match the page --------------------------------------------------------------*/ .page-template-front-community:not( .sdd-front-standalone ) #masthead.site-header { background: rgba( 8, 5, 12, 0.92 ); border-bottom: 1px solid rgba( 236, 231, 240, 0.07 ); box-shadow: none; } .page-template-front-community:not( .sdd-front-standalone ) #masthead .site-header-container, .page-template-front-community:not( .sdd-front-standalone ) #masthead a, .page-template-front-community:not( .sdd-front-standalone ) #masthead .bb-icon-l { color: var( --sdd-ink, #ece7f0 ); } /*-------------------------------------------------------------- # Reveal on scroll --------------------------------------------------------------*/ .sdd-front.sdd-js .sdd-reveal { opacity: 0; transform: translateY( 18px ); transition: opacity 0.7s cubic-bezier( 0.22, 0.61, 0.36, 1 ), transform 0.7s cubic-bezier( 0.22, 0.61, 0.36, 1 ); } .sdd-front.sdd-js .sdd-reveal.is-in { opacity: 1; transform: none; } @media ( prefers-reduced-motion: reduce ) { .sdd-front.sdd-js .sdd-reveal, .sdd-front.sdd-js .sdd-reveal.is-in { opacity: 1; transform: none; transition: none; } .sdd-front * { scroll-behavior: auto !important; } } /*-------------------------------------------------------------- # Narrow screens --------------------------------------------------------------*/ @media ( max-width: 782px ) { .sdd-about__media .sdd-frame:first-child { margin-top: 0; } .sdd-badge { position: static; margin-top: 16px; } .sdd-hero__media { flex-direction: column; align-items: center; } } @media ( max-width: 480px ) { .sdd-stats { gap: 18px; } .sdd-photos { grid-template-columns: repeat( 2, 1fr ); } }