/* ========================================================================== Allan's ABC — allansabc.com Layout + components. Colour/type values live in tokens.css. ========================================================================== */ /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } /* --- The awning frame ------------------------------------------------------ A striped band down the left and right edge of every page, in the same yellow-and-cream as the awning over the terrace. It works by painting the stripes on and insetting with a margin, so the stripes show through in the gap. That keeps them behind everything, full height at any page length, with no fixed positioning to go wrong on iOS and no extra elements in the markup. Bands run across the strip (horizontally) rather than along it, which is how the trim on a real awning reads. */ html { background-color: var(--abc-cream); background-image: repeating-linear-gradient( 180deg, var(--abc-yellow) 0, var(--abc-yellow) var(--frame-band), var(--abc-cream) var(--frame-band), var(--abc-cream) calc(var(--frame-band) * 2) ); } body { font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; margin-inline: var(--frame); /* Hairlines stop the cream page bleeding into the cream stripes, so the frame keeps a crisp edge on both. */ border-inline: 1px solid rgba(6, 60, 70, 0.14); min-height: 100vh; } img, picture, svg { display: block; max-width: 100%; height: auto; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover { color: var(--link-hover); } ul, ol { list-style: none; padding: 0; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 3px solid var(--abc-wine); outline-offset: 3px; border-radius: 4px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--abc-wine); color: var(--abc-cream); padding: var(--sp-2) var(--sp-3); border-radius: 0 0 var(--radius) 0; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- Type ----------------------------------------------------------------- */ h1, h2, h3, .display { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--ls-display); line-height: var(--lh-display); text-transform: uppercase; color: var(--abc-wine); } h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); } .script { font-family: var(--font-script); text-transform: none; letter-spacing: 0; line-height: 1.3; /* Kaushan sits high in its box; nudge it back onto the baseline. */ display: inline-block; transform: translateY(0.06em); } .kicker { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kicker); margin-bottom: var(--sp-2); } .kicker--on-dark { color: var(--abc-yellow); } .lead { font-size: var(--fs-lead); color: var(--text-muted); max-width: var(--maxw-text); } .lead--on-dark { color: rgba(255, 247, 230, 0.88); } /* --- Layout --------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--section-y); position: relative; } .section--tight { padding-block: calc(var(--section-y) * 0.6); } .section--wine { background: var(--abc-wine); color: var(--abc-cream); } .section--wine h2, .section--wine h3 { color: var(--abc-cream); } .section--wine .kicker { color: var(--abc-yellow); } .section--soft { background: var(--abc-blush); } .section--sand { background: var(--abc-sand); } .section--rose { background: var(--abc-rose); } .section-head { max-width: var(--maxw-text); margin-bottom: var(--sp-5); } .section-head h2 { margin-bottom: var(--sp-2); } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.95em 1.7em; border: 2px solid transparent; border-radius: var(--radius-pill); font-weight: 700; font-size: var(--fs-small); letter-spacing: 0.09em; text-transform: uppercase; text-decoration: none; transition: background-color 0.2s var(--ease), transform 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); } .btn:active { transform: translateY(1px); } /* ink-on-coral = 6.88:1. Never cream on coral (2.37:1). */ .btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); } .btn--primary:hover { background: var(--btn-primary-bg-hover); color: var(--btn-primary-text); } .btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); } .btn--secondary:hover { background: var(--abc-yellow-dark); color: var(--btn-secondary-text); } .btn--ghost { background: transparent; border-color: currentColor; color: var(--abc-wine); } .btn--ghost:hover { background: var(--abc-wine); color: var(--abc-cream); } .btn--ghost-light { background: transparent; border-color: var(--abc-cream); color: var(--abc-cream); } .btn--ghost-light:hover { background: var(--abc-cream); color: var(--abc-wine); } .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; } /* --- Header --------------------------------------------------------------- */ .header { position: sticky; top: 0; z-index: 100; background: rgba(255, 248, 236, 0.95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--rule); transition: box-shadow 0.25s var(--ease); } .header.is-stuck { box-shadow: var(--shadow); } .header__inner { display: flex; align-items: center; gap: var(--sp-3); min-height: 74px; padding-block: var(--sp-1); } .header__logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; flex-shrink: 0; } .header__logo img { width: 46px; height: auto; } .header__logo-text { font-family: var(--font-display); font-size: 1.35rem; letter-spacing: 0.04em; color: var(--abc-wine); line-height: 1; } /* flex-start + margin-left:auto on the CTA — never space-between, because the nav items are variable-width and would drift apart unevenly. */ .header__nav { display: none; } .header__nav ul { display: flex; gap: clamp(0.9rem, 2vw, 1.9rem); align-items: center; } .header__nav a { font-size: var(--fs-small); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-decoration: none; color: var(--abc-ink); white-space: nowrap; } .header__nav a:hover { color: var(--abc-terracotta); } .header__cta { margin-left: auto; flex-shrink: 0; } .header__cta .btn { padding: 0.75em 1.3em; white-space: nowrap; } /* The header carries logo + wordmark + burger + CTA. At 375px that is ~340px of content in 335px of space, so the CTA used to run off the right edge. Below 600px the wordmark drops and the CTA shortens to "Book". */ .cta-short { display: none; } /* Put the CTA before the burger so the burger stays in the far-right corner, where thumbs expect it. Both sit after the logo regardless of source order. */ @media (max-width: 899px) { .header__cta { order: 2; margin-left: auto; } .nav-toggle { order: 3; margin-left: var(--sp-1); } } @media (max-width: 599px) { .header__logo-text { display: none; } .cta-long { display: none; } .cta-short { display: inline; } .header__inner { gap: var(--sp-1); min-height: 66px; } .header__logo img { width: 40px; } } /* No auto margin here: .header__cta owns the single auto margin, so the CTA and the burger travel right together as one group. Two auto margins would split the free space and strand the CTA in the middle of the bar. */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; background: transparent; border: 2px solid var(--abc-wine); border-radius: var(--radius); color: var(--abc-wine); } .nav-toggle span { display: block; width: 20px; height: 2px; background: currentColor; position: relative; } .nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; transition: transform 0.2s var(--ease); } .nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); } .mobile-nav { display: none; border-top: 1px solid var(--rule); padding-block: var(--sp-2) var(--sp-3); } .mobile-nav.is-open { display: block; } .mobile-nav ul { display: grid; gap: 0.15rem; } .mobile-nav a { display: block; padding: 0.7rem 0; font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; color: var(--abc-wine); border-bottom: 1px solid var(--rule); } @media (min-width: 900px) { .header__nav { display: block; margin-left: var(--sp-3); } .nav-toggle, .mobile-nav { display: none !important; } } /* --- Hero ----------------------------------------------------------------- */ .hero { position: relative; min-height: min(88svh, 820px); display: grid; align-items: end; isolation: isolate; color: var(--abc-cream); overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; /* Light at the top so the awning keeps its sunshine, heavy at the base where the copy sits. The tint is #005F60: the brightest turquoise that still carries cream text over the brightest pixels in this photo. Anything lighter (#007D76 and up) drops the headline under 3:1. */ background: linear-gradient( to top, rgba(55, 91, 91, 0.88) 0%, rgba(55, 91, 91, 0.87) 12%, rgba(57, 94, 94, 0.845) 36%, rgba(59, 98, 97, 0.79) 47%, rgba(62, 103, 102, 0.675) 57%, rgba(75, 124, 121, 0.22) 80%, rgba(84, 140, 137, 0.05) 100% ); } .hero__inner { padding-block: clamp(2.5rem, 7vw, 5rem); } .hero__title { font-size: var(--fs-hero); /* Cool blue-white rather than the warm cream used elsewhere: it reads as sea light against the ocean scrim. 10.71:1 on #063C46. */ color: var(--abc-cream); margin-bottom: 0.08em; text-shadow: 0 2px 26px rgba(50, 16, 22, 0.6); } .hero__script { font-family: var(--font-script); font-size: clamp(1.6rem, 4.6vw, 3.4rem); color: var(--abc-yellow); text-transform: none; letter-spacing: 0; line-height: 1.2; margin-bottom: var(--sp-3); text-shadow: 0 2px 18px rgba(0, 40, 42, 0.45); } .hero__tagline { font-family: var(--font-display); font-size: clamp(1.05rem, 2.3vw, 1.6rem); letter-spacing: 0.1em; text-transform: uppercase; color: var(--abc-cream); margin-bottom: var(--sp-4); /* "DAY DRINKING. GOOD TIMES." is 25 characters — 24ch orphaned "TIMES." onto its own line. 32ch clears the longest line with room to spare. */ max-width: 32ch; } .hero__meta { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-4); font-size: var(--fs-small); color: rgba(255, 248, 236, 0.92); } .hero__meta span { display: inline-flex; align-items: center; gap: 0.4em; } /* Anniversary flash. Absolute on desktop, in-flow on mobile so it can never land on top of the headline. */ .hero__badge { display: inline-block; background: var(--abc-salmon); color: var(--abc-ink); font-family: var(--font-display); font-size: clamp(0.95rem, 2vw, 1.25rem); letter-spacing: 0.08em; padding: 0.5em 1.1em; border-radius: var(--radius-pill); margin-bottom: var(--sp-3); box-shadow: var(--shadow-lg); } @media (min-width: 1000px) { .hero__badge { position: absolute; top: clamp(2rem, 6vw, 4rem); right: var(--gutter); margin: 0; rotate: 4deg; font-size: 1.3rem; padding: 0.7em 1.4em; } } /* --- Marquee -------------------------------------------------------------- */ .marquee { background: var(--abc-wine); color: var(--abc-yellow); padding-block: 0.85rem; overflow: hidden; white-space: nowrap; border-block: 3px solid var(--abc-salmon); } .marquee__track { display: inline-flex; gap: 2.5rem; align-items: center; animation: marquee 42s linear infinite; will-change: transform; } .marquee__track span { font-family: var(--font-display); font-size: clamp(1rem, 2vw, 1.4rem); letter-spacing: 0.09em; text-transform: uppercase; } .marquee__track em { color: var(--abc-coral); font-style: normal; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee:hover .marquee__track { animation-play-state: paused; } @media (prefers-reduced-motion: reduce) { .marquee { white-space: normal; } .marquee__track { animation: none; flex-wrap: wrap; justify-content: center; gap: 1.2rem; } } /* --- Intro + stats -------------------------------------------------------- */ .intro-grid { display: grid; gap: var(--sp-5); align-items: center; } @media (min-width: 880px) { .intro-grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--sp-6); } } .intro__body p + p { margin-top: var(--sp-2); } .intro__figure { position: relative; } .intro__figure img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-5); } .stat { background: var(--abc-cream); border: 2px solid var(--abc-rose); border-radius: var(--radius); padding: var(--sp-3) var(--sp-2); text-align: center; } /* Both are , so they must be told to stack — otherwise the number and its label run together on one line ("4.4GOOGLE"). */ .stat__num { display: block; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; color: var(--abc-wine); } .stat__label { display: block; font-size: var(--fs-micro); letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); margin-top: 0.45rem; } /* --- Food carousel -------------------------------------------------------- A native horizontal scroller with snap points. Touch and trackpad work with no JavaScript at all; the arrows are an enhancement that main.js wires up and hides when there is nothing to scroll to. */ .carousel { position: relative; } .carousel__track { display: flex; gap: var(--sp-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-block-end: var(--sp-1); } .carousel__track::-webkit-scrollbar { display: none; } .carousel__track:focus-visible { outline: 3px solid var(--abc-teal-dark); outline-offset: 4px; } .carousel__item { flex: 0 0 clamp(230px, 30vw, 340px); scroll-snap-align: start; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; background: var(--abc-sand); box-shadow: var(--shadow); } .carousel__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .carousel__item:hover img { transform: scale(1.04); } .carousel__btn { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid var(--abc-ink); border-radius: 50%; background: var(--abc-cream); color: var(--abc-ink); font-size: 1.7rem; line-height: 1; box-shadow: var(--shadow); transition: background-color 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease); } .carousel__btn span { transform: translateY(-2px); } .carousel__btn:hover { background: var(--abc-coral); color: var(--abc-ink); } .carousel__btn--prev { left: calc(var(--sp-2) * -1); } .carousel__btn--next { right: calc(var(--sp-2) * -1); } /* Hidden until JS confirms the track actually overflows. */ .carousel__btn[hidden] { display: none; } .carousel__btn:disabled { opacity: 0.3; cursor: default; } .carousel__btn:disabled:hover { background: var(--abc-cream); color: var(--abc-ink); } /* On touch widths the arrows only get in the way: swiping is the gesture. */ @media (max-width: 767px) { .carousel__btn { display: none !important; } .carousel__item { flex-basis: min(78vw, 320px); } } /* --- Action cards (book / order / events) --------------------------------- */ /* 250px min so the four cards sit four-across at full width, two on a tablet and one on a phone. */ .actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: var(--sp-3); } .action { background: var(--abc-cream); border: 2px solid var(--abc-rose); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); } .action__icon { font-size: 2rem; line-height: 1; } .action h3 { color: var(--abc-ink); } .action p { font-size: var(--fs-small); color: var(--text-muted); } /* Push the buttons to a common baseline so the three cards line up even when the body copy runs to different lengths. */ .action .btn-row { margin-top: auto; padding-top: var(--sp-1); } .action__note { font-size: var(--fs-micro); word-break: break-word; } .action__note a { display: inline-block; padding-block: 0.35rem; } /* --- Fish section --------------------------------------------------------- */ .fish-grid { display: grid; gap: var(--sp-5); align-items: center; } @media (min-width: 880px) { .fish-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } } .fish-grid img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .menu-list { margin-top: var(--sp-3); } .menu-list li { display: flex; align-items: baseline; gap: 0.75rem; padding-block: 0.6rem; border-bottom: 1px dashed rgba(255, 247, 230, 0.3); font-size: var(--fs-lead); } .menu-list li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--abc-yellow); transform: translateY(-0.15em); } /* --- Rosé ----------------------------------------------------------------- */ .rose { background: linear-gradient(160deg, var(--abc-rose) 0%, var(--abc-blush) 45%, var(--abc-cream) 100%); } .rose-grid { display: grid; gap: var(--sp-5); align-items: center; } @media (min-width: 880px) { .rose-grid { grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-6); } } .rose-grid img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .price-board { background: var(--abc-wine); color: var(--abc-cream); border-radius: var(--radius-lg); padding: var(--sp-4) var(--sp-3); margin-top: var(--sp-4); } .price-board h3 { color: var(--abc-rose); margin-bottom: var(--sp-2); } /* Two fixed tracks, not space-between: the dotted leader fills the gap so a short name and a long name align identically. */ .price-board ul { display: grid; gap: 0.1rem; } .price-board li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.6rem; padding-block: 0.5rem; font-size: var(--fs-body); } .price-board .price-name { min-width: 0; } .price-board .price-dots { border-bottom: 2px dotted rgba(255, 247, 230, 0.35); transform: translateY(-0.25em); } .price-board .price-val { font-family: var(--font-display); font-size: 1.35rem; color: var(--abc-yellow); } .price-board__intro { font-size: var(--fs-small); color: rgba(255, 247, 230, 0.88); } .price-board__note { font-size: var(--fs-micro); color: rgba(255, 247, 230, 0.65); margin-top: var(--sp-2); line-height: 1.5; } /* --- Menu download CTA ---------------------------------------------------- */ .menu-cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); } .menu-note { margin-top: var(--sp-2); max-width: var(--maxw-text); font-size: var(--fs-small); color: var(--text-muted); } /* --- Gallery -------------------------------------------------------------- */ .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--sp-2); } .gallery figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--abc-sand); } .gallery img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; transition: transform 0.5s var(--ease); } .gallery figure:hover img { transform: scale(1.05); } .gallery-note a { display: inline-block; padding-block: 0.35rem; } .gallery figure:nth-child(1), .gallery figure:nth-child(6) { grid-column: span 2; } .gallery figure:nth-child(1) img, .gallery figure:nth-child(6) img { aspect-ratio: 2 / 1; } @media (max-width: 560px) { .gallery figure:nth-child(1), .gallery figure:nth-child(6) { grid-column: span 1; } .gallery figure:nth-child(1) img, .gallery figure:nth-child(6) img { aspect-ratio: 1; } } /* --- Event feature -------------------------------------------------------- */ .event { background: var(--abc-wine); color: var(--abc-cream); border-radius: var(--radius-lg); overflow: hidden; display: grid; } @media (min-width: 880px) { .event { grid-template-columns: 1fr 1fr; } } .event__media { min-height: 260px; } .event__media img { width: 100%; height: 100%; object-fit: cover; } .event__body { padding: clamp(1.75rem, 4vw, 3.25rem); align-self: center; } .event__body h2 { color: var(--abc-rose); margin-bottom: var(--sp-2); } .event__date { display: inline-block; background: var(--abc-salmon); color: var(--abc-ink); font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.07em; padding: 0.4em 1em; border-radius: var(--radius-pill); margin-bottom: var(--sp-3); } .event__body p { color: rgba(255, 247, 230, 0.85); margin-bottom: var(--sp-3); } /* --- Visit ---------------------------------------------------------------- */ .visit-grid { display: grid; gap: var(--sp-5); } @media (min-width: 880px) { .visit-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } } /* Fixed first column so every time lines up in one rail. */ .hours { display: grid; gap: 0; margin-top: var(--sp-2); } .hours__row { display: grid; grid-template-columns: minmax(7.5rem, 10rem) 1fr; gap: var(--sp-2); align-items: baseline; padding-block: 0.7rem; border-bottom: 1px solid var(--rule); } .hours__day { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: 0.05em; color: var(--abc-wine); } .hours__time { font-variant-numeric: tabular-nums; color: var(--text-muted); } .hours__row.is-today { background: var(--abc-rose); border-radius: var(--radius); padding-inline: 0.75rem; } .hours__row.is-today .hours__time { color: var(--abc-ink); font-weight: 700; } .hours__row.is-closed .hours__time { color: var(--abc-terracotta); font-weight: 600; } .notice { display: flex; gap: var(--sp-2); align-items: flex-start; background: var(--abc-yellow); color: var(--abc-ink); border-radius: var(--radius); padding: var(--sp-3); margin-block: var(--sp-3); } .notice__icon { font-size: 1.5rem; line-height: 1; flex: 0 0 auto; } .notice strong { display: block; font-size: 1.05rem; margin-bottom: 0.2rem; } .notice p { font-size: var(--fs-small); } .info-list { margin-top: var(--sp-3); } .info-list li { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.6rem; padding-block: 0.45rem; font-size: var(--fs-small); color: var(--text-muted); } .info-list li span:first-child { text-align: center; } .address { font-style: normal; font-size: var(--fs-lead); line-height: 1.5; } .address strong { display: block; font-family: var(--font-display); font-size: 1.6rem; letter-spacing: 0.03em; color: var(--abc-wine); } /* --- Footer --------------------------------------------------------------- Coral ground, ink text. Coral fails against cream (2.37:1), so nothing here may be light: headings, body and links are all ink. See tokens.css for the vetted alternatives. */ .footer { background: var(--footer-grad); color: var(--footer-text); padding-block: var(--sp-6) var(--sp-4); } .footer a { color: var(--abc-wine); text-decoration: underline; text-underline-offset: 3px; } .footer a:hover { color: var(--abc-wine); text-decoration-thickness: 3px; } .footer__grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } .footer h3 { color: var(--abc-wine); font-size: 1.25rem; margin-bottom: var(--sp-2); } .footer li { padding-block: 0.25rem; font-size: var(--fs-small); } /* Inline links are only ~17px tall on their own, under the 24px minimum target size (WCAG 2.5.8). Padding takes them to ~29px without moving the layout. */ .footer li a { display: inline-block; padding-block: 0.35rem; } /* The mark is a coral heart, so on a coral ground it vanishes. A cream chip behind it keeps the logo readable without needing a second logo file. */ .footer__logo img { width: 92px; margin-bottom: var(--sp-2); background: var(--abc-cream); border-radius: var(--radius); padding: 0.55rem 0.7rem; } .footer__tagline { font-family: var(--font-script); font-size: 1.5rem; color: var(--abc-wine); } .footer__bottom { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid rgba(110, 43, 54, 0.30); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--fs-micro); color: rgba(42, 26, 24, 0.82); } .footer__bottom p:last-child { margin-left: auto; } @media (max-width: 640px) { .footer__bottom p:last-child { margin-left: 0; } } /* --- Reveal on scroll ----------------------------------------------------- Gated behind .js, which main.js stamps on before first paint. Without this the content sits at opacity:0 forever if JS fails to run — a blank page, not a degraded one. Content must be visible by default. */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .js .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }