/* Bright Beauty Esthetics — shared stylesheet (tokens + chrome + components). Fonts are loaded via a tag in every page's , not here. */ :root { --background: #fcf2e7; --foreground: #2b1712; --primary: #c66a4f; --primary-foreground: #fcf2e7; --gold: #cd9f57; --gold-foreground: #2b1712; --cream: #fcf2e7; --secondary: #f5ebde; --muted-foreground: #8a7669; --border: #e7dac9; --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --font-body: 'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif; --maxw-7xl: 80rem; --maxw-6xl: 72rem; --maxw-5xl: 64rem; --maxw-4xl: 56rem; --maxw-3xl: 48rem; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; margin: 0; } .font-display { font-family: var(--font-display); } /* ---- layout helpers ---- */ .container { width: 100%; margin-inline: auto; padding-inline: 1.5rem; } @media (min-width: 1024px) { .container { padding-inline: 3rem; } } .mw-7xl { max-width: var(--maxw-7xl); } .mw-6xl { max-width: var(--maxw-6xl); } .mw-5xl { max-width: var(--maxw-5xl); } .mw-4xl { max-width: var(--maxw-4xl); } .eyebrow { font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--primary); margin: 0 0 1.5rem; font-weight: 500; } .eyebrow.gold { color: var(--gold); } .gold-line { height: 1px; background: linear-gradient(90deg, var(--gold), transparent); } .gold-line.solid { background: var(--gold); } .section { padding-block: 7rem; } @media (min-width: 1024px) { .section { padding-block: 10rem; } } .section-sm { padding-block: 5rem; } .bg-secondary { background: var(--secondary); } .balance { text-wrap: balance; } .muted { color: var(--muted-foreground); } .italic { font-style: italic; } .gold-text { color: var(--gold); } .primary-text { color: var(--primary); } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 1rem 2rem; border: 1px solid transparent; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; white-space: nowrap; } .btn svg { width: 1rem; height: 1rem; } .btn-gold { background: var(--gold); color: var(--gold-foreground); } .btn-gold:hover { background: #c0913f; } .btn-primary { background: var(--primary); color: var(--primary-foreground); } .btn-primary:hover { background: #b45c43; } .btn-dark { background: var(--foreground); color: var(--cream); } .btn-dark:hover { background: #1f100c; } .btn-outline-cream { border-color: rgba(252,242,231,0.45); color: var(--cream); } .btn-outline-cream:hover { background: rgba(252,242,231,0.1); } .btn-outline-primary { border-color: rgba(198,106,79,0.4); color: var(--primary); } .btn-outline-primary:hover { background: rgba(198,106,79,0.06); } /* ---- header / nav ---- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background-color 0.5s ease, backdrop-filter 0.5s ease, box-shadow 0.5s ease; background: rgba(43,23,18,0.30); backdrop-filter: blur(6px); } .site-header .bar { margin-inline: auto; max-width: var(--maxw-7xl); padding-inline: 1.5rem; height: 5rem; display: flex; align-items: center; justify-content: space-between; } @media (min-width: 1024px) { .site-header .bar { padding-inline: 3rem; } } .brand { display: flex; align-items: center; gap: 0.75rem; } .brand img { height: 2.5rem; width: 2.5rem; border-radius: 9999px; object-fit: cover; box-shadow: 0 0 0 1px rgba(205,159,87,0.4); } .brand-name { font-family: var(--font-display); font-size: 1.125rem; letter-spacing: 0.03em; color: var(--cream); transition: color 0.4s ease; } .brand-name .gold-text { color: var(--gold); } .nav { display: none; align-items: center; gap: 2rem; font-size: 0.875rem; } @media (min-width: 768px) { .nav { display: flex; } } .nav a { color: rgba(252,242,231,0.9); transition: color 0.3s ease; } .nav a:hover { color: var(--gold); } .site-header .book-now { padding: 0.625rem 1.25rem; font-size: 0.875rem; letter-spacing: 0.03em; border-radius: 2px; box-shadow: 0 4px 6px rgba(0,0,0,0.15); } @media (max-width: 640px) { .brand-name { display: none; } } /* solid state once scrolled off the hero */ .site-header.scrolled { background: rgba(252,242,231,0.92); backdrop-filter: blur(10px); box-shadow: 0 1px 0 var(--border); } .site-header.scrolled .brand-name { color: var(--foreground); } .site-header.scrolled .nav a { color: rgba(43,23,18,0.8); } .site-header.scrolled .nav a:hover { color: var(--primary); } /* ---- hero ---- */ .hero { position: relative; min-height: 100vh; display: flex; align-items: flex-end; overflow: hidden; } .hero video, .hero .hero-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero .overlay-1 { position: absolute; inset: 0; background: linear-gradient(to top, rgba(43,23,18,0.95), rgba(43,23,18,0.55) 45%, rgba(43,23,18,0.4)); } .hero .overlay-2 { position: absolute; inset: 0; background: linear-gradient(to right, rgba(43,23,18,0.6), transparent 55%); } .hero .hero-inner { position: relative; z-index: 10; margin-inline: auto; max-width: var(--maxw-7xl); width: 100%; padding: 10rem 1.5rem 6rem; color: var(--cream); } @media (min-width: 1024px) { .hero .hero-inner { padding-inline: 3rem; } } .hero-content { max-width: 48rem; } .hero-eyebrow { font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin: 0 0 1.5rem; text-shadow: 0 2px 8px rgba(0,0,0,0.6); } .hero h1 { font-size: clamp(3rem, 8vw, 6.5rem); line-height: 1.05; text-wrap: balance; } .hero h1 em { font-style: normal; color: var(--gold); } .hero p { margin-top: 2rem; font-size: 1.2rem; font-weight: 300; color: rgba(252,242,231,0.85); max-width: 36rem; } .hero-cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; } /* ---- marquee ---- */ .marquee-band { border-block: 1px solid var(--border); background: var(--secondary); padding-block: 1.5rem; overflow: hidden; } .marquee { display: flex; gap: 4rem; white-space: nowrap; width: max-content; animation: marquee 40s linear infinite; } .marquee span { font-family: var(--font-display); font-size: 1.5rem; color: rgba(198,106,79,0.8); display: inline-flex; align-items: center; gap: 4rem; } .marquee .star { color: var(--gold); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---- generic section grid ---- */ .grid { display: grid; } .items-center { align-items: center; } .gap-12 { gap: 3rem; } .two-col { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; } @media (min-width: 1024px) { .two-col { grid-template-columns: 7fr 5fr; } } @media (min-width: 1024px) { .two-col.flip { grid-template-columns: 5fr 7fr; } } @media (min-width: 1024px) { .two-col.even { grid-template-columns: 6fr 6fr; } } .relative { position: relative; } /* ---- "first time" section ---- */ .checklist { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1rem 1.5rem; max-width: 36rem; } @media (min-width: 640px) { .checklist { grid-template-columns: 1fr 1fr; } } .checklist li { display: flex; gap: 0.75rem; align-items: flex-start; } .check-ic { height: 2.25rem; width: 2.25rem; flex: 0 0 auto; border-radius: 9999px; background: rgba(205,159,87,0.15); border: 1px solid rgba(205,159,87,0.3); display: flex; align-items: center; justify-content: center; color: var(--gold); } .check-ic svg { width: 1rem; height: 1rem; } .checklist li span:last-child { font-size: 0.875rem; color: rgba(43,23,18,0.8); line-height: 1.4; padding-top: 0.35rem; } .btn-row { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } .quote-card { background: var(--cream); border: 1px solid var(--border); padding: 2.5rem; position: relative; } .quote-card .qmark { position: absolute; top: -0.75rem; left: -0.75rem; height: 2.5rem; width: 2.5rem; background: var(--gold); color: var(--gold-foreground); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 1.5rem; line-height: 1; } .quote-card blockquote { margin: 0; font-family: var(--font-display); font-size: 1.4rem; line-height: 1.5; font-style: italic; color: rgba(43,23,18,0.9); } .quote-card figcaption { margin-top: 1.5rem; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted-foreground); } .quote-card .foot { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .quote-card .stars { color: var(--gold); font-size: 1.125rem; } .quote-card .foot a { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); transition: color 0.3s; } .quote-card .foot a:hover { color: var(--gold); } .section-heading { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.1; } .section-heading em { font-style: normal; color: var(--primary); } .lead { font-size: 1.125rem; color: var(--muted-foreground); font-weight: 300; line-height: 1.7; } .ratio-45 img { width: 100%; aspect-ratio: 4/5; object-fit: cover; border-radius: 2px; } .ratio-45 img.top { object-position: top; } /* ---- services grid ---- */ .services-head { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 5rem; } @media (min-width: 1024px) { .services-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .link-underline { font-size: 0.875rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--primary); border-bottom: 1px solid var(--primary); padding-bottom: 0.25rem; align-self: flex-start; transition: color 0.3s, border-color 0.3s; } .link-underline:hover { color: var(--gold); border-color: var(--gold); } .services-grid { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--border); } @media (min-width: 768px) { .services-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .services-grid { grid-template-columns: 1fr 1fr 1fr; } } .svc-card { background: var(--background); padding: 2.5rem; transition: background-color 0.5s ease, color 0.5s ease; } .svc-card .svc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; } .svc-ic { height: 3.5rem; width: 3.5rem; border-radius: 9999px; border: 1px solid rgba(205,159,87,0.4); background: rgba(205,159,87,0.1); display: flex; align-items: center; justify-content: center; color: var(--primary); transition: background-color 0.5s, border-color 0.5s, color 0.5s; } .svc-ic svg { width: 1.5rem; height: 1.5rem; } .svc-num { font-size: 0.75rem; color: var(--gold); letter-spacing: 0.25em; transition: color 0.5s; } .svc-card h3 { font-size: 1.875rem; margin-bottom: 1rem; } .svc-card p { font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; margin: 0; transition: color 0.5s; } .svc-card:hover { background: var(--primary); color: var(--primary-foreground); } .svc-card:hover .svc-ic { background: rgba(252,242,231,0.15); border-color: rgba(252,242,231,0.4); color: var(--cream); } .svc-card:hover .svc-num { color: rgba(252,242,231,0.7); } .svc-card:hover p { color: rgba(252,242,231,0.8); } .note { margin-top: 3rem; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); font-style: italic; } /* ---- CTA bands ---- */ .band { padding-block: 5rem; } .band.primary { background: var(--primary); color: var(--primary-foreground); } .band.dark { background: var(--foreground); color: var(--cream); } .band.gold { background: var(--gold); color: var(--gold-foreground); } .band-inner { margin-inline: auto; padding-inline: 1.5rem; display: grid; gap: 2.5rem; align-items: center; } @media (min-width: 1024px) { .band-inner { padding-inline: 3rem; } } @media (min-width: 768px) { .band-inner.split { grid-template-columns: 1fr auto; } } .band h2 { font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.15; text-wrap: balance; } .band.primary .eyebrow, .band.dark .eyebrow { color: var(--gold); } .band .btn-set { display: flex; flex-wrap: wrap; gap: 0.75rem; } .band.gold .eyebrow { color: inherit; opacity: 0.7; } .band.gold h2 em { font-style: normal; } .band.gold p { margin-top: 1rem; max-width: 36rem; font-size: 1.05rem; opacity: 0.8; font-weight: 300; } /* ---- facial menu ---- */ .center { text-align: center; } .menu-head { text-align: center; margin-bottom: 4rem; } .menu-head .lead { margin: 1.5rem auto 0; max-width: 42rem; font-style: italic; } .menu-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem 3.5rem; } @media (min-width: 768px) { .menu-grid { grid-template-columns: 1fr 1fr; } } .menu-item .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; } .menu-item .row .lhs { display: flex; align-items: center; gap: 1rem; min-width: 0; } .round-ic { height: 2.75rem; width: 2.75rem; flex: 0 0 auto; border-radius: 9999px; background: rgba(198,106,79,0.1); border: 1px solid rgba(198,106,79,0.2); display: flex; align-items: center; justify-content: center; color: var(--primary); } .round-ic svg { width: 1.25rem; height: 1.25rem; } .menu-item h3 { font-size: clamp(1.5rem, 3vw, 1.875rem); } .price { font-family: var(--font-display); font-size: 1.5rem; color: var(--primary); white-space: nowrap; } .menu-item p { margin-top: 1rem; font-size: 0.95rem; color: var(--muted-foreground); line-height: 1.6; } .addon-head { margin-top: 6rem; text-align: center; } .addon-grid { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 768px) { .addon-grid { grid-template-columns: repeat(3, 1fr); } } .addon .row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; } .addon .row .lhs { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .round-ic.sm { height: 2.25rem; width: 2.25rem; background: rgba(205,159,87,0.15); border-color: rgba(205,159,87,0.3); color: var(--gold); } .round-ic.sm svg { width: 1rem; height: 1rem; } .addon h4 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; } .addon .price { font-size: 1.25rem; color: var(--gold); } .addon p { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); line-height: 1.6; } .pricelist-head { margin-top: 7rem; text-align: center; } .pricelist { margin-top: 3rem; display: grid; grid-template-columns: 1fr; gap: 0 3rem; } @media (min-width: 640px) { .pricelist { grid-template-columns: 1fr 1fr; } } @media (min-width: 1024px) { .pricelist { grid-template-columns: repeat(3, 1fr); } } .pl-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-bottom: 1px solid rgba(231,218,201,0.7); padding-block: 0.65rem; } .pl-row .lhs { display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .pl-row svg { width: 1rem; height: 1rem; color: var(--gold); flex: 0 0 auto; } .pl-name { font-family: var(--font-body); font-size: 0.95rem; } .pl-name.display { font-family: var(--font-display); font-size: 1.15rem; } .pl-price { font-family: var(--font-display); font-size: 1.15rem; color: var(--primary); white-space: nowrap; } /* ---- LED signature add-on card ---- */ .led { margin-top: 7rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; background: var(--secondary); border: 1px solid var(--border); padding: 2rem; } @media (min-width: 640px) { .led { padding: 3rem; } } @media (min-width: 1024px) { .led { grid-template-columns: 5fr 7fr; gap: 3.5rem; } } .led-orb { display: flex; justify-content: center; } .led-orb div { height: 13rem; width: 13rem; border-radius: 9999px; background: linear-gradient(135deg, rgba(205,159,87,0.3), rgba(198,106,79,0.2), rgba(198,106,79,0.4)); border: 1px solid rgba(205,159,87,0.3); display: flex; align-items: center; justify-content: center; color: var(--gold); } .led-orb svg { width: 5rem; height: 5rem; } .led h3 { font-size: clamp(1.875rem, 4vw, 3rem); line-height: 1.15; } .led h3 .gold-text { color: var(--gold); } .led ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; } .led li { font-size: 0.95rem; color: var(--muted-foreground); display: flex; gap: 0.5rem; } .led li .star { color: var(--gold); } .led .btn-row { margin-top: 2rem; } /* ---- about ---- */ .stats { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; max-width: 28rem; } .stats .num { font-family: var(--font-display); font-size: 1.5rem; color: var(--primary); } .stats .lbl { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--muted-foreground); margin-top: 0.25rem; } .about-copy p { margin: 0 0 1.25rem; } .about-img { position: relative; } .about-badge { position: absolute; bottom: -1.5rem; left: -1.5rem; background: var(--gold); color: var(--gold-foreground); padding: 1.5rem; max-width: 220px; } .about-badge p:first-child { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; line-height: 1.3; margin: 0; } .about-badge p:last-child { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.15em; margin: 0.75rem 0 0; } @media (max-width: 1023px) { .about-badge { display: none; } } /* ---- reviews ---- */ .reviews { position: relative; overflow: hidden; background: var(--primary); color: var(--primary-foreground); } .reviews .bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.15; } .reviews .inner { position: relative; z-index: 1; } .reviews-head { text-align: center; max-width: 48rem; margin: 0 auto 5rem; } .reviews-head .eyebrow { color: var(--gold); } .reviews-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; } @media (min-width: 768px) { .reviews-grid { grid-template-columns: 1fr 1fr; } } .review { background: rgba(252,242,231,0.1); backdrop-filter: blur(4px); border: 1px solid rgba(252,242,231,0.15); padding: 2.5rem; } .review .stars { color: var(--gold); font-size: 1.5rem; margin-bottom: 1rem; } .review blockquote { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.5; font-style: italic; } .review figcaption { margin-top: 1.5rem; font-size: 0.875rem; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(252,242,231,0.7); } .reviews .cta-center { margin-top: 3.5rem; display: flex; justify-content: center; } /* ---- FAQ ---- */ .faq-list { border-block: 1px solid var(--border); } .faq-item { border-top: 1px solid var(--border); } .faq-item:first-child { border-top: none; } .faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.75rem; cursor: pointer; font-family: var(--font-display); font-size: clamp(1.25rem, 3vw, 1.5rem); transition: color 0.3s; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary:hover { color: var(--primary); } .faq-item summary .plus { color: var(--gold); font-size: 1.5rem; transition: transform 0.5s ease; flex: 0 0 auto; } .faq-item[open] summary .plus { transform: rotate(45deg); } .faq-item .answer { padding: 0 3rem 1.75rem 0; color: var(--muted-foreground); font-size: 1.05rem; line-height: 1.7; } /* ---- contact ---- */ .contact { background: var(--foreground); color: var(--cream); } .contact-head { text-align: center; } .contact-head .eyebrow { color: var(--gold); } .contact-head h2 { font-size: clamp(2.5rem, 7vw, 4.5rem); line-height: 1.05; text-wrap: balance; } .contact-head h2 em { font-style: normal; color: var(--gold); } .contact-head p { margin: 2rem auto 0; max-width: 36rem; color: rgba(252,242,231,0.7); font-size: 1.125rem; font-weight: 300; } .contact-grid { margin-top: 4rem; display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 1024px) { .contact-grid { grid-template-columns: 3fr 2fr; gap: 4rem; } } .contact-form { background: rgba(252,242,231,0.04); border: 1px solid rgba(252,242,231,0.15); padding: 2rem; display: grid; gap: 1.25rem; } @media (min-width: 640px) { .contact-form { padding: 2.5rem; } } .field-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } } .field label { display: block; font-size: 0.75rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem; } .field input, .field textarea { width: 100%; background: transparent; border: 1px solid rgba(252,242,231,0.25); color: var(--cream); padding: 0.65rem 0.75rem; font-family: var(--font-body); font-size: 0.95rem; border-radius: 0; } .field input { height: 2.75rem; } .field textarea { min-height: 8rem; resize: vertical; } .field input::placeholder, .field textarea::placeholder { color: rgba(252,242,231,0.4); } .field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact aside { display: grid; gap: 2rem; } .contact aside .blk p:first-child { font-size: 0.75rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.75rem; } .contact aside .big { font-family: var(--font-display); font-size: 1.25rem; color: var(--cream); margin: 0; } .contact aside a.big:hover { color: var(--gold); } .pill-row { margin-top: 0.75rem; display: flex; gap: 0.75rem; flex-wrap: wrap; } .pill { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; border: 1px solid rgba(252,242,231,0.3); padding: 0.5rem 1rem; transition: background-color 0.3s; } .pill:hover { background: rgba(252,242,231,0.1); } .next-blk { border-top: 1px solid rgba(252,242,231,0.15); padding-top: 2rem; } .next-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; } .next-list li { display: flex; gap: 0.75rem; font-size: 0.875rem; color: rgba(252,242,231,0.8); font-weight: 300; line-height: 1.6; } .next-list svg { width: 1rem; height: 1rem; color: var(--gold); margin-top: 0.25rem; flex: 0 0 auto; } .break-all { word-break: break-all; } /* ---- footer ---- */ .site-footer { background: var(--foreground); color: rgba(252,242,231,0.7); border-top: 1px solid rgba(252,242,231,0.1); } .site-footer .bar { margin-inline: auto; max-width: var(--maxw-7xl); padding: 3rem 1.5rem; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; justify-content: space-between; } @media (min-width: 768px) { .site-footer .bar { flex-direction: row; padding-inline: 3rem; } } .site-footer .fbrand { display: flex; align-items: center; gap: 0.75rem; } .site-footer .fbrand img { height: 2.25rem; width: 2.25rem; border-radius: 9999px; object-fit: cover; } .site-footer .fbrand span { font-family: var(--font-display); font-size: 1.125rem; color: var(--cream); } .site-footer .flinks { display: flex; gap: 1.25rem; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; } .site-footer .flinks a { transition: color 0.3s; } .site-footer .flinks a:hover { color: var(--gold); } .site-footer .copy { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; } /* ---- motion: hero entrance (pure CSS, always ends visible) ---- */ @keyframes fade-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .fade-up { animation: fade-up 1s ease both; } /* Scroll reveals: elements are VISIBLE here. The hidden start state is applied by the inline script at runtime, only after its IntersectionObserver attaches, so if the script never runs the content still shows. No content is hidden in CSS. */ .reveal { transition: opacity 0.8s ease, transform 0.8s ease; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee { animation: none; } .fade-up { animation: none; } .reveal { transition: none; } * { scroll-behavior: auto !important; } }