/* ========================================================================== Bailie the Barber – Main Stylesheet ========================================================================== */ /* Root tokens -------------------------------------------------------------------------- */ :root { /* Colors */ --bb-bg: #0e0e0e; --bb-ink: #faf9f6; --bb-accent: #c06632; --bb-ink-muted: rgba(250, 249, 246, 0.72); --bb-border-subtle: rgba(250, 249, 246, 0.14); --bb-surface-soft: rgba(18, 18, 18, 0.92); /* Layout */ --bb-max-width: 72rem; /* ~1152px */ --bb-gutter: 1.5rem; --bb-radius-sm: 0.375rem; --bb-radius-md: 0.75rem; --bb-radius-lg: 1.25rem; /* Typography */ --bb-font-heading: "Anton", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bb-font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bb-font-size-base: 16px; --bb-line-height-base: 1.6; /* Elevation */ --bb-shadow-soft: 0 18px 45px rgba(0, 0, 0, 0.65); --bb-shadow-subtle: 0 10px 30px rgba(0, 0, 0, 0.45); /* Motion */ --bb-transition-fast: 150ms ease-out; --bb-transition-med: 220ms ease-out; } /* Global reset / base -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--bb-font-body); font-size: var(--bb-font-size-base); line-height: var(--bb-line-height-base); color: var(--bb-ink); background-color: var(--bb-bg); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Remove default margin */ h1, h2, h3, h4, h5, h6, p, figure { margin: 0; } ul, ol { margin: 0; padding: 0; } li { list-style: none; } img, video { max-width: 100%; height: auto; display: block; } /* Accessibility: focus & selection -------------------------------------------------------------------------- */ :focus-visible { outline: 2px solid var(--bb-accent); outline-offset: 3px; } ::selection { background: rgba(192, 102, 50, 0.35); color: #0e0e0e; } /* Links & buttons -------------------------------------------------------------------------- */ a { color: inherit; text-decoration: none; } a:hover, a:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; } button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: 0.5; } /* Utility -------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--bb-max-width); margin-inline: auto; padding-inline: var(--bb-gutter); } .eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.75rem; color: var(--bb-ink-muted); margin-bottom: 0.5rem; } /* Background canvas + tactile overlays -------------------------------------------------------------------------- */ .bg-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -2; background-color: var(--bb-bg); } /* Optional: faint paper grain overlay (opt-in by adding .has-grain to ) */ body.has-grain::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; /* above canvas (-2), below content */ opacity: 0.05; mix-blend-mode: overlay; background-image: radial-gradient(rgba(255,255,255,0.06) 0.5px, transparent 0.6px), radial-gradient(rgba(0,0,0,0.08) 0.5px, transparent 0.7px); background-size: 3px 3px, 7px 7px; } /* Optional: matte lighting vignette (opt-in by adding .has-lighting to ) */ body.has-lighting::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(1200px 600px at 20% 10%, rgba(250, 249, 246, 0.06), transparent 60%), radial-gradient(1000px 500px at 80% 90%, rgba(192, 102, 50, 0.08), transparent 60%); } /* Header & navigation -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(14px); background: linear-gradient( to bottom, rgba(14, 14, 14, 0.95), rgba(14, 14, 14, 0.75), transparent ); border-bottom: 1px solid rgba(250, 249, 246, 0.06); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; padding-block: 0.75rem; gap: 1.5rem; } .brand { display: flex; align-items: center; gap: 0.75rem; } .brand__logo { height: 40px; width: auto; } .brand__tagline { display: none; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bb-ink-muted); } /* Nav */ .site-nav { display: none; } .site-nav__list { display: flex; gap: 1.5rem; } .site-nav__link { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--bb-ink-muted); position: relative; padding-block: 0.25rem; } .site-nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0%; height: 2px; background: var(--bb-accent); transition: width var(--bb-transition-med); } .site-nav__link:hover::after, .site-nav__link:focus-visible::after { width: 100%; } /* Mobile nav toggle */ .site-nav__toggle { display: inline-flex; flex-direction: column; gap: 5px; padding: 0.25rem; } .site-nav__toggle-line { width: 20px; height: 2px; border-radius: 999px; background: var(--bb-ink); } /* Announcement banner -------------------------------------------------------------------------- */ /* Hidden by default via data attribute */ #announcement-banner[data-announcement-enabled="false"] { display: none; } .announcement { border-top: 1px solid rgba(250, 249, 246, 0.06); border-bottom: 1px solid rgba(250, 249, 246, 0.06); background: rgba(14, 14, 14, 0.96); } .announcement__inner { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding-block: 0.5rem; } .announcement__message { font-size: 0.875rem; color: var(--bb-ink-muted); } .announcement__link { font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.16em; border-radius: 999px; padding: 0.25rem 0.85rem; border: 1px solid var(--bb-accent); color: var(--bb-accent); text-decoration: none; } .announcement__link:hover, .announcement__link:focus-visible { background: var(--bb-accent); color: var(--bb-bg); text-decoration: none; } .announcement__close { font-size: 1.1rem; line-height: 1; color: var(--bb-ink-muted); } /* Sections & layout -------------------------------------------------------------------------- */ .site-main { position: relative; z-index: 1; } .section { padding-block: 4.5rem; } .section__header { margin-bottom: 2rem; } .section__title { font-family: var(--bb-font-heading); font-size: 1.75rem; letter-spacing: 0.12em; text-transform: uppercase; } .section__subtitle { margin-top: 0.75rem; max-width: 32rem; color: var(--bb-ink-muted); font-size: 0.95rem; } /* Optional: active section highlight (wired by scroll-state.js) */ .section--active .section__title { text-shadow: 0 0 14px rgba(192, 102, 50, 0.25); } /* Hero -------------------------------------------------------------------------- */ .section--hero { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding-block: 4rem 3rem; position: relative; } .hero__content { max-width: 34rem; } .hero__title { font-family: var(--bb-font-heading); font-size: 2.5rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.5rem; } .hero__tagline { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--bb-ink-muted); margin-bottom: 1.25rem; } .hero__summary { font-size: 1rem; color: var(--bb-ink-muted); margin-bottom: 1.75rem; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .hero__scroll-cue { position: absolute; inset-inline: 0; bottom: 1.75rem; display: flex; justify-content: center; } .scroll-cue__link { font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bb-ink-muted); } .scroll-cue__text { position: relative; padding-top: 1.25rem; } .scroll-cue__text::before { content: ""; position: absolute; top: 0; left: 50%; width: 1px; height: 10px; transform: translateX(-50%); background: var(--bb-ink-muted); animation: scroll-cue-pulse 1.4s infinite ease-in-out; } @keyframes scroll-cue-pulse { 0% { transform: translate(-50%, 0); opacity: 0; } 40% { transform: translate(-50%, 6px); opacity: 1; } 100% { transform: translate(-50%, 10px); opacity: 0; } } /* Buttons -------------------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.4rem; border-radius: 999px; border: 1px solid transparent; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.16em; text-decoration: none; transition: background-color var(--bb-transition-med), color var(--bb-transition-med), border-color var(--bb-transition-med), box-shadow var(--bb-transition-med), transform var(--bb-transition-fast); } .button--primary { background: var(--bb-accent); color: var(--bb-bg); box-shadow: var(--bb-shadow-subtle); } .button--primary:hover, .button--primary:focus-visible { transform: translateY(-1px); box-shadow: var(--bb-shadow-soft); text-decoration: none; } .button--ghost { border-color: var(--bb-border-subtle); color: var(--bb-ink-muted); background: rgba(14, 14, 14, 0.5); } .button--ghost:hover, .button--ghost:focus-visible { border-color: var(--bb-accent); color: var(--bb-ink); text-decoration: none; } /* About -------------------------------------------------------------------------- */ .section--about { background: radial-gradient(circle at top left, rgba(192, 102, 50, 0.16), transparent 60%); } .about__layout { display: grid; gap: 2.5rem; } .about__name { font-family: var(--bb-font-heading); font-size: 1.35rem; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 1rem; } .about__text p + p { margin-top: 0.9rem; } .about__media { display: flex; justify-content: flex-start; } .about__photo-placeholder { width: 100%; max-width: 260px; aspect-ratio: 3 / 4; border-radius: var(--bb-radius-lg); border: 1px dashed rgba(250, 249, 246, 0.25); display: inline-flex; align-items: center; justify-content: center; color: var(--bb-ink-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.16em; } /* Services -------------------------------------------------------------------------- */ .section--services { border-top: 1px solid rgba(250, 249, 246, 0.06); border-bottom: 1px solid rgba(250, 249, 246, 0.06); background: rgba(14, 14, 14, 0.9); } .services__grid { display: grid; gap: 1.5rem; } .service-card { border-radius: var(--bb-radius-md); border: 1px solid var(--bb-border-subtle); background: var(--bb-surface-soft); padding: 1rem 1.25rem 1.1rem; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65); } .service-card__title { font-family: var(--bb-font-heading); font-size: 1rem; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 0.4rem; } .service-card__meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.4rem; font-size: 0.8rem; color: var(--bb-ink-muted); margin-bottom: 0.5rem; } .service-card__price { color: var(--bb-accent); } .service-card__description { font-size: 0.9rem; color: var(--bb-ink-muted); } /* Gallery -------------------------------------------------------------------------- */ .section--gallery { background: radial-gradient(circle at bottom right, rgba(192, 102, 50, 0.12), transparent 60%); } .gallery__grid { display: grid; gap: 1rem; } .gallery__item { border-radius: var(--bb-radius-md); border: 1px dashed var(--bb-border-subtle); min-height: 120px; display: flex; align-items: center; justify-content: center; background: rgba(14, 14, 14, 0.85); } .gallery__item--placeholder { position: relative; overflow: hidden; } .gallery__item--placeholder::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient( 135deg, rgba(192, 102, 50, 0.15), transparent 40%, transparent 60%, rgba(192, 102, 50, 0.15) ); mix-blend-mode: screen; opacity: 0.4; } .gallery__label { position: relative; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--bb-ink-muted); } /* Reviews -------------------------------------------------------------------------- */ .section--reviews { border-top: 1px solid rgba(250, 249, 246, 0.06); } .reviews__grid { display: grid; gap: 1.5rem; } .review-card { border-radius: var(--bb-radius-md); border: 1px solid var(--bb-border-subtle); padding: 1.2rem 1.4rem; background: rgba(14, 14, 14, 0.95); box-shadow: var(--bb-shadow-subtle); } .review-card__quote { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; } .review-card__text { font-size: 0.9rem; color: var(--bb-ink-muted); } .review-card__author { font-size: 0.85rem; margin-top: 0.75rem; color: var(--bb-ink-muted); } /* Booking -------------------------------------------------------------------------- */ .section--booking { background: rgba(14, 14, 14, 0.96); } .booking__layout { display: grid; gap: 2rem; align-items: center; } .booking__media { display: flex; justify-content: center; } .booking__lens { width: min(280px, 70vw); aspect-ratio: 1 / 1; border-radius: 50%; border: 2px solid var(--bb-accent); padding: 0.4rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--bb-shadow-soft); background: radial-gradient(circle at 30% 20%, rgba(250, 249, 246, 0.08), transparent 60%); } .booking__video { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .booking__content p + p { margin-top: 0.75rem; } .booking__note { font-size: 0.9rem; color: var(--bb-ink-muted); } .booking__actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.75rem; } /* Booking modal */ .booking-modal { position: fixed; inset: 0; z-index: 50; display: none; } .booking-modal[aria-hidden="false"] { display: block; } .booking-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(2px); } .booking-modal__dialog { position: relative; z-index: 1; max-width: 50rem; margin: 4rem auto; border-radius: var(--bb-radius-lg); background: rgba(14, 14, 14, 0.98); border: 1px solid var(--bb-border-subtle); box-shadow: var(--bb-shadow-soft); display: flex; flex-direction: column; max-height: calc(100vh - 6rem); } .booking-modal__header { padding: 1rem 1.25rem; border-bottom: 1px solid rgba(250, 249, 246, 0.08); display: flex; align-items: center; justify-content: space-between; } .booking-modal__title { font-size: 1rem; letter-spacing: 0.16em; text-transform: uppercase; } .booking-modal__close { font-size: 1.2rem; } .booking-modal__body { padding: 0.75rem 1.25rem 1.1rem; display: flex; flex-direction: column; gap: 0.75rem; } .booking-modal__frame { border: none; width: 100%; flex: 1; min-height: 400px; background: #000; } .booking-modal__fallback { font-size: 0.85rem; color: var(--bb-ink-muted); } /* Forms (future use; Contact / End) -------------------------------------------------------------------------- */ input, textarea, select { width: 100%; font: inherit; color: var(--bb-ink); background: rgba(14, 14, 14, 0.6); border: 1px solid var(--bb-border-subtle); border-radius: var(--bb-radius-sm); padding: 0.6rem 0.75rem; } input::placeholder, textarea::placeholder { color: rgba(250, 249, 246, 0.45); } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--bb-accent); box-shadow: 0 0 0 2px rgba(192, 102, 50, 0.55), 0 0 0 8px rgba(192, 102, 50, 0.12); } /* Contact -------------------------------------------------------------------------- */ .section--contact { border-top: 1px solid rgba(250, 249, 246, 0.06); } .contact__layout { display: grid; gap: 2rem; } .contact__heading { font-family: var(--bb-font-heading); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 0.6rem; } .contact__text { font-size: 0.9rem; color: var(--bb-ink-muted); } .contact__hours { font-size: 0.9rem; color: var(--bb-ink-muted); } .contact__hours li + li { margin-top: 0.2rem; } .contact__social-list li + li { margin-top: 0.25rem; } /* Footer -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid rgba(250, 249, 246, 0.08); background: rgba(14, 14, 14, 0.98); /* Optional subtle halftone vibe */ background-image: radial-gradient(rgba(250, 249, 246, 0.03) 1px, transparent 1px); background-size: 12px 12px; background-blend-mode: soft-light; } .site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; padding-block: 1rem; font-size: 0.85rem; color: var(--bb-ink-muted); } .site-footer__credit a { color: var(--bb-accent); } .site-footer__credit a:hover, .site-footer__credit a:focus-visible { text-decoration: none; box-shadow: 0 0 0 1px rgba(192, 102, 50, 0.7); border-radius: 999px; padding-inline: 0.25rem; } /* Scrollbar styling (brand-coded) -------------------------------------------------------------------------- */ /* Firefox */ html { scrollbar-width: thin; scrollbar-color: var(--bb-accent) var(--bb-bg); } /* WebKit */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: var(--bb-bg); } ::-webkit-scrollbar-thumb { background-color: var(--bb-accent); border-radius: 999px; border: 2px solid var(--bb-bg); } /* Optional barber-pole variant: add class "barber-scrollbar" to */ body.barber-scrollbar::-webkit-scrollbar-thumb { background-image: repeating-linear-gradient( 135deg, var(--bb-ink) 0, var(--bb-ink) 4px, var(--bb-accent) 4px, var(--bb-accent) 8px ); } /* Optional animated barber-pole: also add "animated" to */ @keyframes bb-barber-scroll { from { background-position: 0 0; } to { background-position: 40px 0; } } body.barber-scrollbar.animated::-webkit-scrollbar-thumb { background-image: repeating-linear-gradient( 135deg, var(--bb-ink) 0, var(--bb-ink) 6px, var(--bb-accent) 6px, var(--bb-accent) 12px ); background-size: 40px 40px; animation: bb-barber-scroll 1.2s linear infinite; } /* Reduced motion -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .scroll-cue__text::before { animation: none !important; } } /* Responsive -------------------------------------------------------------------------- */ @media (min-width: 640px) { .brand__tagline { display: block; } .services__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reviews__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .contact__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 768px) { .site-header__inner { padding-block: 0.85rem; } .site-nav__toggle { display: none; } .site-nav { display: block; } .about__layout { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; } .booking__layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr); } .contact__layout { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1024px) { .hero__title { font-size: 3rem; } .section { padding-block: 5rem; } } /* Mobile nav open state (to be toggled via JS) -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .site-nav { position: absolute; right: 0; top: 100%; width: 100%; background: rgba(14, 14, 14, 0.98); border-bottom: 1px solid rgba(250, 249, 246, 0.08); display: none; } body.nav-open .site-nav { display: block; } .site-nav__list { flex-direction: column; padding: 0.5rem var(--bb-gutter) 0.75rem; gap: 0.75rem; } .site-nav__link { padding-block: 0.25rem; } }