/* ============================================================ FADE ROOM — LAYOUT WIREFRAME (barber shop) Fonts: Oswald (display) / Inter (body) Palette: shared Norrvela wireframe greys; the only colour is the optional accent (--pop), re-themed by the corner widget. Signature motif: the barber-pole stripe (hard-stop stripes, one accent band) on the price board, hero pole and footer. ============================================================ */ /* ---------- design tokens ---------- */ :root { --bg: #ededed; --surface: #e2e2e2; --surface-2: #dcdcdc; --line: #c6c6c6; --dash: #a8a8a8; --text: #333333; --muted: #777777; --faint: #9a9a9a; --accent: var(--pop); --accent-ink: var(--pop-ink); --font-display: 'Oswald', 'Arial Narrow', Impact, sans-serif; --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif; --radius: 4px; --header-h: 74px; --speed: .35s; --ease: cubic-bezier(.4, 0, .2, 1); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, .section-title { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; line-height: 1.08; letter-spacing: .02em; margin: 0; } a { color: inherit; text-decoration: none; } svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } .container { width: min(1160px, calc(100% - 48px)); margin-inline: auto; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 300; background: var(--accent); color: var(--accent-ink); padding: 10px 18px; font-weight: 600; } .skip-link:focus { left: 12px; top: 12px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } ::selection { background: var(--accent); color: var(--accent-ink); } /* ---------- scroll reveal (JS adds .js to ) ---------- */ .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s var(--ease); } .js [data-reveal].is-visible { opacity: 1; transform: none; } /* ============ IMAGE PLACEHOLDERS ============ */ .img-ph { display: flex; align-items: center; justify-content: center; background: var(--surface-2); border: 1px dashed var(--dash); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); text-align: center; } .logo-ph { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border: 1px dashed var(--dash); background: var(--surface-2); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 9px; letter-spacing: .14em; color: var(--muted); } /* ============ BARBER-POLE STRIPE (flat hard-stop stripes) ============ */ .stripe, .board__stripe, .docket__stripe, .footer__stripe, .pole { background: repeating-linear-gradient( -45deg, var(--accent) 0 12px, var(--bg) 12px 24px, var(--faint) 24px 36px, var(--bg) 36px 48px ); } /* ============ EYEBROW / SECTION HEADS ============ */ .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .22em; color: var(--muted); margin: 0 0 18px; } .eyebrow__tick { width: 32px; height: 3px; background: var(--accent); transform: skewX(-24deg); flex: none; transition: background var(--speed) ease; } .eyebrow--centre { justify-content: center; } .section { position: relative; padding: 104px 0 112px; } .section--alt { background: var(--surface); border-block: 1px solid var(--line); } .section-head { max-width: 640px; margin-bottom: 52px; } .section-head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; } .section-head--split > div { max-width: 620px; } .section-head--split .section-sub { max-width: 380px; margin: 0; padding-bottom: 4px; } .section-head--centre { max-width: 620px; margin-inline: auto; text-align: center; } .section-title { font-size: clamp(30px, 4vw, 46px); } .section-sub { color: var(--muted); margin: 18px 0 0; max-width: 56ch; } .section-sub--centre { margin-inline: auto; } /* ============ BUTTONS ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; font-family: var(--font-display); font-size: 15px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; border: 1px solid transparent; border-radius: 2px; transition: background var(--speed) ease, color var(--speed) ease, border-color var(--speed) ease, transform var(--speed) var(--ease); } .btn:active { transform: translateY(1px); } .btn--sm { padding: 11px 20px; font-size: 13px; } .btn--primary { background: var(--accent); color: var(--accent-ink); } .btn--primary:hover { background: var(--text); color: #fff; } .btn--ghost { border-color: var(--faint); color: var(--text); background: transparent; } .btn--ghost:hover { border-color: var(--text); background: var(--surface-2); } /* ============ HEADER ============ */ .header { position: sticky; top: 0; z-index: 100; background: rgba(237, 237, 237, .94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .header__inner { display: flex; align-items: center; gap: 32px; height: var(--header-h); transition: height var(--speed) ease; } .header.is-shrunk .header__inner { height: 58px; } .logo { display: inline-flex; align-items: center; gap: 12px; } .logo__text { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; } .logo__text span { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 600; letter-spacing: .24em; color: var(--muted); margin-top: 2px; } .nav { display: flex; gap: 26px; margin-left: auto; } .nav__link { position: relative; font-size: 13.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 6px 0; transition: color var(--speed) ease; } .nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--speed) var(--ease); } .nav__link:hover { color: var(--text); } .nav__link:hover::after { transform: scaleX(1); } .header__actions { display: flex; align-items: center; gap: 14px; margin-left: auto; } .menu-toggle { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 2px; padding: 10px 9px; flex-direction: column; justify-content: space-between; } .menu-toggle span { display: block; height: 2px; width: 100%; background: var(--text); transition: transform var(--speed) var(--ease), opacity var(--speed) ease; } .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* ============ MOBILE MENU ============ */ .mobile-menu { position: fixed; top: var(--header-h); left: 0; right: 0; z-index: 95; background: var(--surface); border-bottom: 1px solid var(--line); padding: 18px 24px 24px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity var(--speed) ease, transform var(--speed) var(--ease), visibility var(--speed); } .mobile-menu.is-open { transform: none; opacity: 1; visibility: visible; } .mobile-menu__link { display: block; padding: 13px 4px; font-family: var(--font-display); font-size: 20px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; border-bottom: 1px solid var(--line); } .mobile-menu__cta { width: 100%; margin-top: 18px; } .mobile-menu__meta { margin: 14px 0 0; text-align: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } /* ============ HERO ============ */ .hero { padding: 84px 0 96px; overflow: hidden; } .hero__inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .hero__title { font-size: clamp(40px, 5.6vw, 68px); font-weight: 600; } .hero__lede { color: var(--muted); font-size: 17px; margin: 22px 0 0; max-width: 52ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; } .hero__walkin { display: flex; align-items: flex-start; gap: 12px; margin: 30px 0 0; padding: 14px 18px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); font-size: 14px; color: var(--muted); max-width: 480px; } .hero__walkin strong { color: var(--text); } .hero__walkin-dot { width: 10px; height: 10px; flex: none; margin-top: 6px; border-radius: 50%; background: var(--accent); transition: background var(--speed) ease; } .hero__art { position: relative; padding-left: 26px; } .pole { position: absolute; left: 0; top: 8%; bottom: 8%; width: 12px; border-radius: 2px; } .img-ph--hero { aspect-ratio: 4 / 3.4; width: 100%; } .hero__chip { position: absolute; right: -14px; bottom: 22px; margin: 0; padding: 9px 16px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-size: 13px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; border-radius: 2px; transition: background var(--speed) ease; } /* ============ PRICE BOARD ============ */ .board { max-width: 780px; margin-inline: auto; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; } .board__stripe { display: block; height: 10px; } .board__inner { padding: 40px 44px 34px; border-top: 1px solid var(--line); } .board__label { margin: 0 0 26px; font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); text-align: center; } .price-list { list-style: none; margin: 0; padding: 0; } .price-row { display: flex; align-items: baseline; gap: 16px; padding: 17px 0; border-bottom: 1px solid var(--line); } .price-row:first-child { padding-top: 4px; } .price-row:last-child { border-bottom: none; padding-bottom: 4px; } .price-row__name { font-family: var(--font-display); font-size: 19px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; } .price-row__name small { display: block; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: none; color: var(--faint); margin-top: 3px; } .price-row__dots { flex: 1; min-width: 40px; border-bottom: 2px dotted var(--line); transform: translateY(-5px); } .price-row__price { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: .04em; } .board__note { margin: 26px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); text-align: center; } /* ============ BARBERS ============ */ .barbers__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .barber-card { background: var(--surface); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; transition: border-color var(--speed) ease, transform var(--speed) var(--ease); } .barber-card:hover { border-color: var(--faint); transform: translateY(-3px); } .barber-card__photo { aspect-ratio: 4 / 4.4; border: none; border-bottom: 1px dashed var(--dash); } .barber-card__body { padding: 24px 24px 26px; } .barber-card__chair { display: inline-block; margin: 0 0 12px; padding: 5px 10px; background: var(--accent); color: var(--accent-ink); font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; border-radius: 2px; transition: background var(--speed) ease; } .barber-card__name { font-size: 24px; } .barber-card__spec { margin: 6px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .barber-card__bio { margin: 14px 0 0; font-size: 14px; color: var(--muted); } /* ============ GALLERY STRIP ============ */ .gallery { padding: 0 0 104px; } .gallery__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; margin-bottom: 26px; } .gallery__head .eyebrow { margin-bottom: 0; } .gallery__note { margin: 0; font-size: 13.5px; color: var(--faint); } .gallery__strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .gallery__item { aspect-ratio: 1 / 1; transition: border-color var(--speed) ease; } .gallery__item:hover { border-color: var(--faint); } /* ============ BOOKING ============ */ .book__inner { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: start; } .steps { list-style: none; margin: 34px 0 0; padding: 0; } .steps li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--line); } .steps li:last-child { border-bottom: none; } .steps__num { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none; background: var(--accent); color: var(--accent-ink); font-family: var(--font-display); font-size: 16px; font-weight: 600; border-radius: 2px; transition: background var(--speed) ease; } .steps div { font-size: 14.5px; color: var(--muted); } .steps strong { color: var(--text); } .book__walkin { margin: 26px 0 0; font-size: 14.5px; color: var(--muted); } .book__walkin a { font-weight: 600; color: var(--text); border-bottom: 2px solid var(--accent); } .book__form-card { background: var(--bg); border: 1px solid var(--line); border-radius: 2px; padding: 36px 38px; } .book__form-title { font-size: 26px; } .book__form-sub { margin: 8px 0 26px; font-size: 14px; color: var(--muted); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .field { margin-bottom: 18px; } .field label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .field input, .field select { width: 100%; padding: 13px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; font: inherit; color: var(--text); transition: border-color var(--speed) ease, background var(--speed) ease; } .field input::placeholder { color: var(--faint); } .field input:focus, .field select:focus { outline: none; border-color: var(--accent); background: var(--bg); } .field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23777' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; cursor: pointer; } .field.has-error input, .field.has-error select { border-color: var(--text); background: var(--bg); } .field__error { margin: 7px 0 0; font-size: 12.5px; font-weight: 600; color: var(--text); } .field__error::before { content: "— "; color: var(--accent); } .book__submit { width: 100%; margin-top: 6px; } .book__fineprint { margin: 16px 0 0; font-size: 12.5px; color: var(--faint); text-align: center; } /* ---------- booking docket (success) ---------- */ .docket { border: 1px dashed var(--dash); border-radius: 2px; background: var(--surface); } .docket__stripe { display: block; height: 8px; } .docket__label { margin: 26px 30px 0; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); } .docket__title { margin: 8px 30px 0; font-size: 30px; } .docket__rows { margin: 22px 30px 0; padding: 0; } .docket__rows div { display: flex; justify-content: space-between; gap: 24px; padding: 11px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; } .docket__rows div:last-child { border-bottom: none; } .docket__rows dt { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); padding-top: 2px; } .docket__rows dd { margin: 0; font-weight: 600; text-align: right; } .docket__note { margin: 20px 30px 0; font-size: 13.5px; color: var(--muted); } .docket__note a { font-weight: 600; color: var(--text); border-bottom: 2px solid var(--accent); } .docket .btn { margin: 24px 30px 30px; } /* ============ REVIEWS CAROUSEL ============ */ .carousel { max-width: 760px; margin: 0 auto; } .carousel__viewport { display: grid; } .review-slide { grid-area: 1 / 1; margin: 0; padding: 44px 48px 40px; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; text-align: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s ease, transform .45s var(--ease), visibility .45s; } .review-slide.is-active { opacity: 1; visibility: visible; transform: none; } .review-slide p { margin: 18px auto 0; max-width: 54ch; font-family: var(--font-display); font-size: clamp(19px, 2.4vw, 25px); font-weight: 400; line-height: 1.45; letter-spacing: .01em; } .review-slide footer { margin-top: 24px; } .review-slide footer strong { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .review-slide footer span { font-size: 12.5px; color: var(--muted); } .stars { display: flex; justify-content: center; gap: 5px; color: var(--accent); transition: color var(--speed) ease; } .stars svg { width: 17px; height: 17px; } .stars .star-off { color: var(--line); } .carousel__controls { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 26px; } .carousel__arrow { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 2px; background: var(--bg); color: var(--text); transition: border-color var(--speed) ease, background var(--speed) ease; } .carousel__arrow:hover { border-color: var(--text); background: var(--surface); } .carousel__arrow svg { width: 18px; height: 18px; } .carousel__dots { display: flex; gap: 9px; } .carousel__dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; background: var(--line); transition: background var(--speed) ease, transform var(--speed) var(--ease); } .carousel__dot:hover { background: var(--faint); } .carousel__dot.is-active { background: var(--accent); transform: scale(1.25); } /* ============ FOOTER ============ */ .footer { background: var(--surface-2); border-top: 1px solid var(--line); } .footer__stripe { display: block; height: 10px; margin-top: -1px; } .footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 44px; padding: 64px 0 52px; } .footer__col h3 { font-size: 14px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--text); margin-bottom: 18px; } .footer__col p, .footer__col address { font-style: normal; font-size: 14px; color: var(--muted); margin: 0 0 14px; line-height: 1.75; } .footer__col a { border-bottom: 1px solid var(--dash); transition: border-color var(--speed) ease, color var(--speed) ease; } .footer__col a:hover { color: var(--text); border-color: var(--text); } .footer__col--brand .logo { margin-bottom: 18px; } .footer__abn { font-size: 12.5px !important; color: var(--faint) !important; } .footer__map { width: 100%; aspect-ratio: 16 / 10.5; } .footer__walkins { font-size: 12.5px !important; color: var(--faint) !important; } .hours { width: 100%; border-collapse: collapse; font-size: 14px; color: var(--muted); } .hours td { padding: 7px 0; border-bottom: 1px solid var(--line); } .hours tr:last-child td { border-bottom: none; } .hours td:last-child { text-align: right; font-weight: 600; color: var(--text); } .footer__bar { border-top: 1px solid var(--line); } .footer__bar-inner { display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; padding: 20px 0; } .footer__bar p { margin: 0; font-size: 12.5px; color: var(--muted); } /* ============ RESPONSIVE ============ */ @media (max-width: 1020px) { .hero__inner { grid-template-columns: 1fr; gap: 44px; } .hero { padding: 60px 0 80px; } .hero__art { max-width: 560px; } .book__inner { grid-template-columns: 1fr; gap: 48px; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 760px) { .nav, .header__cta { display: none; } .menu-toggle { display: flex; } .section { padding: 72px 0 76px; } .hero { padding: 48px 0 64px; } .hero__title { font-size: clamp(36px, 10vw, 48px); } .hero__chip { right: 10px; } .board__inner { padding: 30px 22px 26px; } .price-row__name { font-size: 16px; } .price-row__price { font-size: 19px; } .barbers__grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } .barber-card__photo { aspect-ratio: 4 / 3.4; } .gallery { padding-bottom: 72px; } .gallery__strip { grid-template-columns: 1fr 1fr; gap: 12px; } .book__form-card { padding: 28px 22px; } .field-row { grid-template-columns: 1fr; gap: 0; } .review-slide { padding: 32px 22px 30px; } .footer__grid { grid-template-columns: 1fr; gap: 36px; padding: 52px 0 44px; } } /* ============ REDUCED MOTION ============ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .js [data-reveal] { opacity: 1; transform: none; } } /* COLOUR OPTION — accent is re-themed by the corner widget; default is wireframe grey */ :root { --pop: #9a9a9a; --pop-ink: #ffffff; }