/* ════════════════════════════════════════════════════════════ Club 7 Winds — Design System 2.0 Inspired by Bear Foot Theory · Outbound Blog Fonts loaded in : Playfair Display + Inter (Cyrillic) ════════════════════════════════════════════════════════════ */ /* ── Tokens ────────────────────────────────────────────────── */ :root { --bg: #f8f7f4; --surface: #ffffff; --ink: #18180f; --muted: #6b6860; --faint: #aaa89f; --accent: #D4631E; --accent-2: #E87840; --pale: #FEF0E5; --sand: #f2efe8; --border: #e2dfd7; --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, sans-serif; --w-content: 1200px; --w-reading: 720px; --gap: clamp(1rem, 3vw, 1.75rem); --r: 4px; --r-lg: 8px; --ease: cubic-bezier(.4,0,.2,1); } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; } body { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ::selection { background: var(--pale); color: var(--accent); } /* ── Navigation ────────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(248, 247, 244, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: border-color .25s var(--ease); } .nav.scrolled { border-color: var(--border); } .nav__inner { max-width: var(--w-content); margin: 0 auto; padding: 0 var(--gap); height: 60px; display: flex; align-items: center; gap: 2rem; } .nav__logo { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--ink); white-space: nowrap; flex-shrink: 0; } .nav__logo sup { font-family: var(--sans); font-size: .55rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); vertical-align: super; margin-left: 2px; } .nav__links { display: flex; margin-left: auto; gap: .25rem; } .nav__links a { font-size: .78rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: .4rem .75rem; border-radius: var(--r); transition: color .15s, background .15s; } .nav__links a:hover { color: var(--ink); background: var(--sand); } /* ── Utilities ─────────────────────────────────────────────── */ .container { max-width: var(--w-content); margin: 0 auto; padding: 0 var(--gap); } .container--narrow { max-width: calc(var(--w-reading) + var(--gap) * 2); margin: 0 auto; padding: 0 var(--gap); } /* ── Hero ──────────────────────────────────────────────────── */ .hero { position: relative; height: min(90vh, 700px); overflow: hidden; display: flex; align-items: flex-end; background: var(--ink); } .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; } .hero__slide--active { opacity: .75; } .hero__slide picture { display: block; width: 100%; height: 100%; } .hero__slide-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; } .hero__caption { position: absolute; bottom: .6rem; right: .75rem; font-size: .7rem; color: rgba(255,255,255,.7); letter-spacing: .02em; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.6); } .hero__scrim { position: absolute; inset: 0; background: linear-gradient( to top, rgba(12, 12, 8, .85) 0%, rgba(12, 12, 8, .25) 50%, transparent 100% ); } .hero__body { position: relative; z-index: 1; width: 100%; padding: 0 var(--gap) 3.5rem; max-width: calc(var(--w-content) + var(--gap) * 2); margin: 0 auto; } .hero__kicker { display: inline-block; font-size: .68rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-bottom: .9rem; } .hero__title { font-family: var(--serif); font-size: clamp(2.6rem, 6.5vw, 5rem); font-weight: 900; line-height: 1.05; color: #fff; max-width: 800px; margin-bottom: 1.1rem; } .hero__title em { font-style: italic; font-weight: 700; } /* ── Hero stat bar ─────────────────────────────────────────── */ .hero__stat { display: flex; gap: 2.5rem; margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; } .hero__stat-num { display: block; font-family: var(--serif); font-size: 1.75rem; font-weight: 700; color: #fff; line-height: 1; } .hero__stat-label { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .04em; color: rgba(255,255,255,.42); margin-top: .25rem; } .hero__sub { color: rgba(255,255,255,.7); font-size: 1.05rem; max-width: 480px; margin-bottom: 2rem; line-height: 1.6; } .hero__ctas { display: flex; gap: .75rem; flex-wrap: wrap; } /* ── Buttons ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.4rem; font-size: .78rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border-radius: var(--r); transition: all .2s var(--ease); cursor: pointer; border: 1.5px solid transparent; } .btn-solid { background: var(--accent); color: #fff; } .btn-solid:hover { background: var(--accent-2); color: #fff; transform: translateY(-1px); } .btn-outline { border-color: rgba(255,255,255,.38); color: rgba(255,255,255,.88); background: rgba(255,255,255,.06); backdrop-filter: blur(4px); } .btn-outline:hover { border-color: rgba(255,255,255,.7); color: #fff; background: rgba(255,255,255,.1); } .btn-outline-dark { border-color: var(--accent); color: var(--accent); background: transparent; } .btn-outline-dark:hover { background: var(--accent); color: #fff; transform: translateY(-1px); } /* ── Hero activity tags ────────────────────────────────────── */ .hero__tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.75rem; } .hero__tag { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.16); padding: .3rem .7rem; border-radius: 100px; transition: color .15s, border-color .15s, background .15s; white-space: nowrap; } .hero__tag:hover { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.07); } /* ── Activity tag filter strip (tag pages) ─────────────────── */ .tag-filter-strip { display: flex; flex-wrap: wrap; gap: .4rem; padding: 1.5rem 0 0; } .tag-filter-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--border); background: var(--surface); padding: .3rem .72rem; border-radius: 100px; transition: color .15s, border-color .15s, background .15s; white-space: nowrap; } .tag-filter-pill:hover { color: var(--ink); border-color: #ccc; } .tag-filter-pill.active { color: var(--accent); border-color: var(--accent); background: var(--pale); } /* ── Section ───────────────────────────────────────────────── */ .section { padding: 3.5rem 0; } .section + .section { border-top: 1px solid var(--border); } .section__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-bottom: 2rem; gap: 1rem; } .section__head--events { align-items: flex-start; } .section__title { font-family: var(--serif); font-size: 1.45rem; font-weight: 700; color: var(--ink); } .section__more { font-size: .72rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); white-space: nowrap; transition: color .15s; } .section__more:hover { color: var(--ink); } .section__foot { display: flex; justify-content: center; margin-top: 2.25rem; } /* ── Cards ─────────────────────────────────────────────────── */ .cards { display: grid; gap: var(--gap); } .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--2 { grid-template-columns: repeat(2, 1fr); } .cards--featured { grid-template-columns: 1.8fr 1fr; } .cards--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .card { background: var(--surface); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--border); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .2s; } .card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.09); border-color: #d6d2c8; } .card__thumb { position: relative; overflow: hidden; background: var(--sand); flex-shrink: 0; } .card__thumb--3x2 { aspect-ratio: 3/2; } .card__thumb--16x9 { aspect-ratio: 16/9; } .card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); } .card:hover .card__thumb img { transform: scale(1.05); } .card__no-img { aspect-ratio: 3/2; background: linear-gradient(135deg, var(--sand) 0%, var(--pale) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .card__no-img svg { opacity: .28; } .card__tag { position: absolute; top: .75rem; left: .75rem; font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--accent); padding: .18rem .55rem; border-radius: 2px; } .card__body { padding: 1.1rem 1.25rem 1.4rem; flex: 1; display: flex; flex-direction: column; } .card__date { font-size: .72rem; color: var(--faint); font-weight: 500; margin-bottom: .4rem; font-variant-numeric: tabular-nums; } .card__title { font-family: var(--serif); font-size: 1.06rem; font-weight: 700; line-height: 1.28; color: var(--ink); flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: color .15s; } .card:hover .card__title { color: var(--accent); } .card__excerpt { font-size: .84rem; color: var(--muted); line-height: 1.55; margin-top: .45rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Horizontal featured card */ .card--h { flex-direction: row; min-height: 300px; } .card--h .card__thumb { flex: 0 0 55%; aspect-ratio: unset; } .card--h .card__body { padding: 1.75rem 1.75rem; justify-content: center; } .card--h .card__title { font-size: 1.6rem; -webkit-line-clamp: 4; margin-bottom: .6rem; } .card--h .card__excerpt { -webkit-line-clamp: 4; } /* ── Page hero (inner pages) ───────────────────────────────── */ .page-hero { background: var(--ink); color: #fff; padding: 3.5rem var(--gap) 3rem; } .page-hero--photo { position: relative; padding: 5rem var(--gap) 4rem; overflow: hidden; } .page-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; } .page-hero__slide--active { opacity: 1; } .page-hero__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .page-hero__scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 100%); } .page-hero--photo .page-hero__inner { position: relative; z-index: 1; } .page-hero__inner { max-width: var(--w-content); margin: 0 auto; } .page-hero__kicker { font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); margin-bottom: .65rem; } .page-hero__title { font-family: var(--serif); font-size: clamp(1.8rem, 3.5vw, 2.75rem); font-weight: 900; line-height: 1.1; margin-bottom: .55rem; } .page-hero__sub { color: rgba(255,255,255,.55); font-size: .95rem; max-width: 400px; } /* ── Section title (replaces page-hero on list pages) ─────── */ .section-title { font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; color: var(--ink); margin-bottom: 2rem; padding-bottom: .75rem; border-bottom: 2px solid var(--pale); } /* ── Post layout ───────────────────────────────────────────── */ .post-header { padding: 2.5rem 0 2rem; } .post-header__inner { max-width: var(--w-content); margin: 0 auto; padding: 0 var(--gap); } .post-header__cats { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .85rem; } .post-cat { font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--pale); padding: .18rem .6rem; border-radius: 2px; } .post-header__title { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 900; line-height: 1.12; color: var(--ink); max-width: 860px; margin-bottom: .8rem; } .post-header__meta { font-size: .78rem; color: var(--faint); font-weight: 500; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; } /* Cover image */ .post-cover-wrap { overflow: hidden; background: var(--sand); max-height: 65vh; } .post-cover { width: 100%; max-height: 65vh; object-fit: cover; object-position: center; display: block; } /* Post body */ .post-body { padding: 2.5rem 0 4rem; } .post-body__inner { max-width: var(--w-reading); margin: 0 auto; padding: 0 var(--gap); font-size: 1.05rem; line-height: 1.82; } .post-body__inner h2 { font-family: var(--serif); font-size: 1.65rem; font-weight: 700; line-height: 1.22; color: var(--ink); margin: 2.5rem 0 .8rem; } .post-body__inner h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 700; margin: 2rem 0 .6rem; } .post-body__inner p { margin-bottom: 1.3rem; } .post-body__inner ul, .post-body__inner ol { margin: 0 0 1.3rem 1.5rem; display: flex; flex-direction: column; gap: .3rem; } .post-body__inner a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(45,92,65,.25); text-underline-offset: 2px; transition: text-decoration-color .15s; } .post-body__inner a:hover { text-decoration-color: var(--accent); } .post-body__inner img { width: 100%; border-radius: var(--r-lg); margin: 1.75rem 0; } .post-body__inner blockquote { border-left: 3px solid var(--accent); background: var(--pale); margin: 1.75rem 0; padding: 1rem 1.4rem; border-radius: 0 var(--r-lg) var(--r-lg) 0; font-style: italic; color: var(--accent); } .post-body__inner hr { border: none; border-top: 1px solid var(--border); margin: 2.5rem 0; } /* Responsive video embed */ .video-embed { position: relative; width: 100%; aspect-ratio: 16/9; margin: 1.5rem 0 2rem; border-radius: var(--r); overflow: hidden; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Video iframe from Turndown */ .post-body__inner iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--r-lg); margin: 1.75rem 0; } /* ── Gallery lightbox grid ─────────────────────────────────── */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; margin: 2rem 0; } .gallery__item { display: block; position: relative; overflow: hidden; aspect-ratio: 1; background: var(--sand); } .gallery__thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); } .gallery__item:hover .gallery__thumb { transform: scale(1.06); } .gallery__caption { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,12,8,.75) 0%, transparent 55%); display: flex; align-items: flex-end; padding: .6rem .7rem; color: #fff; font-size: .7rem; line-height: 1.3; opacity: 0; transition: opacity .2s; } .gallery__item:hover .gallery__caption { opacity: 1; } /* ── Gallery categories ────────────────────────────────────── */ .gallery-category { margin-bottom: 3.5rem; } .gallery-category__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border); } .gallery-category__title { font-family: var(--serif); font-size: 1.35rem; font-weight: 700; color: var(--ink); margin-bottom: .15rem; } .gallery-category__desc { font-size: .8rem; color: var(--faint); } .gallery-category__count { font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); white-space: nowrap; } /* ── Gallery index ─────────────────────────────────────────── */ .gallery-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--gap); } .gallery-card { position: relative; overflow: hidden; border-radius: var(--r-lg); aspect-ratio: 4/3; background: var(--sand); border: 1px solid var(--border); display: block; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .gallery-card:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,.1); } .gallery-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); } .gallery-card:hover img { transform: scale(1.06); } .gallery-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(12,12,8,.78) 0%, transparent 55%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1rem 1rem .9rem; opacity: 1; transition: opacity .25s; } .gallery-card__title { font-family: var(--serif); font-size: .95rem; font-weight: 700; color: #fff; line-height: 1.25; } .gallery-card__date { font-size: .7rem; color: rgba(255,255,255,.6); margin-top: .2rem; } /* ── Archive list ──────────────────────────────────────────── */ .archive-year { margin-bottom: 3rem; } .archive-year__label { font-family: var(--serif); font-size: 1.1rem; font-weight: 700; color: var(--accent); margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 2px solid var(--pale); } /* ── Contact ───────────────────────────────────────────────── */ .contact-form { display: flex; flex-direction: column; gap: 1.1rem; max-width: 500px; margin-top: 2rem; } .contact-form label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 500; } .contact-form input, .contact-form textarea { padding: .65rem .9rem; border: 1.5px solid var(--border); border-radius: var(--r); font: inherit; font-size: .95rem; background: var(--surface); transition: border-color .15s, box-shadow .15s; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--pale); } .contact-form textarea { resize: vertical; min-height: 120px; } /* ── Footer ────────────────────────────────────────────────── */ .footer { background: var(--ink); color: rgba(255,255,255,.42); padding: 2.5rem var(--gap); margin-top: 5rem; } .footer__inner { max-width: var(--w-content); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; } .footer__logo { font-family: var(--serif); font-size: 1.05rem; color: rgba(255,255,255,.75); } .footer__links { display: flex; gap: 1.5rem; font-size: .73rem; letter-spacing: .06em; text-transform: uppercase; flex-wrap: wrap; justify-content: center; } .footer__links a { color: rgba(255,255,255,.38); transition: color .15s; } .footer__links a:hover { color: rgba(255,255,255,.82); } .footer__copy { font-size: .73rem; } /* ── About page ────────────────────────────────────────────── */ .about-lead { font-size: 1.15rem; line-height: 1.7; color: var(--ink); margin-bottom: 2.5rem; font-weight: 400; } .about-activities { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; margin: 2.5rem 0; } .about-activity { display: flex; align-items: center; gap: .6rem; background: var(--sand); border-radius: var(--r-lg); padding: .75rem 1rem; font-size: .82rem; font-weight: 600; color: var(--ink); } .about-cta { text-align: center; padding: 2.5rem 1rem; margin: 1rem 0 .5rem; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .about-cta__text { font-family: var(--serif); font-size: 1.1rem; color: var(--muted); margin-bottom: 1.4rem; } .about-cta__btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; } a.about-activity { text-decoration: none; transition: background .15s, transform .15s; } a.about-activity:hover { background: var(--pale); transform: translateY(-2px); } .about-segway { font-size: .9rem; color: var(--muted); margin: 2rem 0 .25rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; } .about-contacts { border-top: 1px solid var(--border); padding-top: 1.75rem; margin-top: 2rem; color: var(--muted); font-size: .92rem; line-height: 1.8; } .about-contacts a { color: var(--accent); } /* ── Upcoming events (compact, in news header) ────────────── */ .events-inline { text-align: right; max-width: 320px; } .events-inline__label { font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; } .events-inline__list { list-style: none; } .events-inline__item { font-size: .8rem; line-height: 1.5; } .events-inline__date { color: var(--accent); font-weight: 600; margin-right: .35rem; } .events-inline__title { color: var(--ink); } .events-inline__empty { font-size: .8rem; color: var(--muted); } .events-inline__link { display: inline-block; margin-top: .5rem; font-size: .68rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); transition: color .15s; } .events-inline__link:hover { color: var(--ink); } @media (max-width: 640px) { .events-inline { text-align: left; max-width: none; width: 100%; order: -1; } } /* ── Footer social icons ──────────────────────────────────── */ .footer__social { display: flex; gap: 1.1rem; } .footer__social a { display: inline-flex; color: rgba(255,255,255,.42); transition: color .15s; } .footer__social a:hover { color: rgba(255,255,255,.85); } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 900px) { .cards--3 { grid-template-columns: repeat(2, 1fr); } .cards--featured { grid-template-columns: 1fr; } .card--h { flex-direction: column; } .card--h .card__thumb { flex: none; aspect-ratio: 16/9; } .card--h .card__body { padding: 1.25rem; } } @media (max-width: 600px) { .cards--3, .cards--2 { grid-template-columns: 1fr; } .hero { height: min(78vh, 520px); } .hero__title { font-size: 2.4rem; } .post-header__title { font-size: 1.9rem; } .gallery { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } .gallery-index { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } /* Nav: logo on its own line, links centred below */ .nav__inner { height: auto; padding: .5rem var(--gap) .3rem; flex-wrap: wrap; gap: .15rem; justify-content: center; } .nav__logo { flex-basis: 100%; display: flex; justify-content: center; } .nav__links { flex-wrap: wrap; justify-content: center; margin-left: 0; gap: 0; } .nav__links a { padding: .28rem .45rem; font-size: .68rem; } } /* ── Gallery lightbox ──────────────────────────────────────── */ #lb { position: fixed; inset: 0; background: rgba(0,0,0,.93); z-index: 9999; display: flex; flex-direction: column; align-items: stretch; outline: none; } #lb[hidden] { display: none; } .lb__stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: 56px 76px 60px; box-sizing: border-box; min-height: 0; } .lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 3px; user-select: none; -webkit-user-drag: none; transition: opacity .18s; } .lb__img--loading { opacity: .35; } /* Bottom bar */ .lb__bar { flex-shrink: 0; display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: rgba(0,0,0,.55); color: rgba(255,255,255,.7); font-size: .8rem; } .lb__counter { white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .55; min-width: 3.5rem; } .lb__caption { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb__btns { display: flex; gap: .4rem; margin-left: auto; } .lb__btn { width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,.12); color: #fff; font-size: .85rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; padding: 0; } .lb__btn:hover { background: rgba(255,255,255,.28); } /* Prev / next arrows */ .lb__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 88px; background: rgba(255,255,255,.07); border: none; color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 5px; transition: background .15s; padding: 0; } .lb__arrow:hover { background: rgba(255,255,255,.2); } .lb__prev { left: 10px; } .lb__next { right: 10px; } @media (max-width: 600px) { .lb__stage { padding: 52px 46px 56px; } .lb__arrow { width: 38px; height: 64px; font-size: 1.9rem; } .lb__caption { display: none; } }