/* Theme Name: BykonzYard Theme URI: https://thegradespace.com Description: BykonzYard's website on the Gradespace Events theme's Club design (Plum & gold): no top bar, a floating Menu button that slides the menu in from the left, their logo in the middle, a full-image hero (or split with the event card), and their home page as editable blocks. Author: Gradespace Author URI: https://thegradespace.com Template: gradespace-events-theme Version: 0.8.4 Requires at least: 6.8 Requires PHP: 8.0 Text Domain: bykonzyard-child License: GPL-2.0-or-later */ /* Colours come from the Club design's Plum & gold palette (checked at 4.5:1): page #1A0A2E, panels #241147, lines #3B2766, text #ECE4F5, gold #D4A45C. The green is the logo's, used only as a small accent (the dot on "Next up"). Rules that set margins start with "body" so they win over WordPress's layout spacing. */ @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("assets/fonts/space-mono-400.woff2") format("woff2"); } @font-face { font-family: "Space Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/space-mono-700.woff2") format("woff2"); } @font-face { font-family: Roboto; font-style: normal; font-weight: 100 900; font-display: swap; src: url("assets/fonts/roboto-wght.woff2") format("woff2"); } body.byk-site { --byk-mono: "Space Mono", ui-monospace, Menlo, monospace; --byk-green: #7BC96F; --byk-veil: rgb(18 6 32 / 0.55); --byk-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --wp--preset--font-family--body: Roboto, system-ui, "Helvetica Neue", Arial, sans-serif; --f-body: var(--wp--preset--font-family--body); --gsc-font: var(--f-body); --gsc-sticky-bg: transparent; --gsc-sticky-shadow: none; font-family: var(--f-body); } .byk-site .is-style-eyebrow, .byk-site .is-style-chip { font-family: var(--byk-mono); letter-spacing: 0.14em; } /* --------------------------------------------------------------------------- The floating header: Menu (left), the logo (middle), Get tickets (right). It takes no space, so the hero photo runs to the top of the page. --------------------------------------------------------------------------- */ body.byk-site header.wp-block-template-part { height: 0; background: transparent !important; box-shadow: none !important; } body .byk-bar { position: relative; z-index: 20; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; box-sizing: border-box; width: 100%; margin: 0 !important; padding: 20px 24px !important; pointer-events: none; } body .byk-bar > * { margin: 0 !important; pointer-events: auto; } body .byk-bar .byk-logo { justify-self: center; } body .byk-bar .byk-logo img { width: auto !important; height: 64px; filter: drop-shadow(0 6px 18px rgb(0 0 0 / 0.45)); } body .byk-bar .byk-cta { justify-self: end; } body .byk-bar .byk-cta .wp-block-button__link { display: inline-flex; align-items: center; height: 56px; box-sizing: border-box; padding: 0 24px; font-size: 15px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.3); } @media (max-width: 600px) { body .byk-bar { padding: 12px 14px !important; gap: 8px; } body .byk-bar .byk-logo img { height: 48px; } body .byk-bar .byk-cta .wp-block-button__link { height: 48px; padding: 0 16px; font-size: 14px; } } @media (max-width: 380px) { body .byk-bar .byk-cta { display: none; } } /* Pages without a hero photo start below the floating bar. */ body.byk-site:not(.byk-has-hero) .gsevt-main { padding-top: 104px; } /* The Menu button: three bars (gold, white, gold) and the word Menu. */ body .byk-drawer { justify-self: start; } body .byk-drawer .wp-block-navigation__responsive-container-open { display: flex; align-items: center; gap: 12px; height: 56px; box-sizing: border-box; padding: 0 22px 0 18px; margin: 0; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--c-ink) 25%, transparent); background: color-mix(in srgb, var(--c-paper) 72%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--c-ink); font: 700 14px/1 var(--byk-mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; box-shadow: 0 10px 30px rgb(0 0 0 / 0.3); } body .byk-drawer .wp-block-navigation__responsive-container-open:hover { border-color: var(--c-accent); } .byk-drawer .wp-block-navigation__responsive-container-open svg { display: none; } .byk-drawer .wp-block-navigation__responsive-container-open::before { content: ""; width: 22px; height: 12px; background: linear-gradient(var(--c-accent), var(--c-accent)) 0 0 / 22px 2px no-repeat, linear-gradient(var(--c-ink), var(--c-ink)) 0 5px / 16px 2px no-repeat, linear-gradient(var(--c-accent), var(--c-accent)) 0 10px / 22px 2px no-repeat; } .byk-drawer .wp-block-navigation__responsive-container-open::after { content: "Menu"; } @media (max-width: 600px) { body .byk-drawer .wp-block-navigation__responsive-container-open { height: 48px; padding: 0 16px 0 14px; } } @media (max-width: 420px) { .byk-drawer .wp-block-navigation__responsive-container-open::after { content: none; } body .byk-drawer .wp-block-navigation__responsive-container-open { width: 48px; padding: 0; justify-content: center; } } /* The menu: a floating rounded panel that slides in from the left over a dimmed, blurred page. */ body .byk-drawer .wp-block-navigation__responsive-container { display: block !important; position: fixed; inset: 0; z-index: 100000; width: auto; height: 100%; padding: 0 !important; overflow: hidden; background: transparent !important; color: var(--c-ink) !important; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.5s; } body .byk-drawer .wp-block-navigation__responsive-container.is-menu-open { visibility: visible; pointer-events: auto; transition-delay: 0s; } body .byk-drawer .wp-block-navigation__responsive-container::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--byk-veil); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.35s ease; } body .byk-drawer .wp-block-navigation__responsive-container.is-menu-open::before { opacity: 1; } body .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation__responsive-close { position: absolute; left: 12px; top: 12px; bottom: 12px; width: min(420px, calc(100% - 24px)); max-width: none; height: auto; margin: 0; box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: 28px; box-shadow: 0 30px 80px rgb(0 0 0 / 0.5); transform: translateX(calc(-100% - 24px)); transition: transform 0.5s var(--byk-ease); will-change: transform; } body .byk-drawer .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close { transform: none; } body .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog { position: relative; display: flex; flex-direction: column; min-height: 100%; margin: 0; padding: 26px 30px; box-sizing: border-box; } .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog::before { content: "Explore the Yard"; display: flex; align-items: center; height: 44px; margin-bottom: 14px; font: 400 13px/1 var(--byk-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-accent-text); } body .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close { position: absolute; top: 26px; right: 30px; left: auto; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--c-line); background: transparent; color: var(--c-ink); cursor: pointer; } body .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close:hover { border-color: var(--c-accent); } .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-close svg { width: 20px; height: 20px; fill: currentColor; } body .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content { display: block !important; flex: 1; width: auto; padding: 0 !important; } body .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation__container { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 0 18px !important; width: 100%; counter-reset: byk-nav; } body .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation-item { width: 100%; margin: 0 !important; } body .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation-item:not(.byk-nav-small, .byk-nav-cta) { counter-increment: byk-nav; border-bottom: 1px solid var(--c-line); } body .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation-item:not(.byk-nav-small, .byk-nav-cta) > .wp-block-navigation-item__content { display: flex !important; align-items: baseline; gap: 16px; width: 100%; padding: 10px 0 !important; color: var(--c-ink); text-decoration: none; font-family: var(--f-display); font-size: 38px; line-height: 1.05; text-transform: uppercase; } .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation-item:not(.byk-nav-small, .byk-nav-cta) > .wp-block-navigation-item__content::before { content: counter(byk-nav, decimal-leading-zero); min-width: 22px; font: 400 13px/1 var(--byk-mono); color: var(--c-accent-text); } .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation-item:not(.byk-nav-small, .byk-nav-cta) > .wp-block-navigation-item__content::after { content: "↗"; margin-left: auto; font-family: var(--f-body); font-size: 17px; color: var(--c-muted); transition: transform 0.2s ease, color 0.2s ease; } body .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation-item:not(.byk-nav-small, .byk-nav-cta) > .wp-block-navigation-item__content:hover, body .byk-drawer .wp-block-navigation__responsive-container [aria-current="page"] { color: var(--c-accent-text); } .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover::after { transform: translate(2px, -2px); color: var(--c-accent-text); } @media (max-height: 760px) { body .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation-item:not(.byk-nav-small, .byk-nav-cta) > .wp-block-navigation-item__content { font-size: 32px; padding: 7px 0 !important; } } /* "The Yard": My tickets, points and signing in, then Get tickets. */ body .byk-drawer .wp-block-navigation__responsive-container .byk-nav-small { width: auto; } body .byk-drawer .wp-block-navigation__responsive-container .byk-nav-small > .wp-block-navigation-item__content { padding: 4px 0 !important; color: var(--c-ink); font-weight: 500; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--c-ink) 35%, transparent); } body .byk-drawer .wp-block-navigation__responsive-container .byk-nav-small > .wp-block-navigation-item__content:hover { color: var(--c-accent-text); } body .byk-drawer .wp-block-navigation__responsive-container .byk-nav-small--first { position: relative; margin-top: 52px !important; } .byk-drawer .wp-block-navigation__responsive-container .byk-nav-small--first::before { content: "The Yard"; position: absolute; left: 0; top: -26px; white-space: nowrap; font: 400 12px/1 var(--byk-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); } body .byk-drawer .wp-block-navigation__responsive-container .byk-nav-cta { margin-top: 20px !important; } body .byk-drawer .wp-block-navigation__responsive-container .byk-nav-cta > .wp-block-navigation-item__content { display: block; width: 100%; box-sizing: border-box; padding: 15px !important; border-radius: 999px; text-align: center; text-decoration: none; background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; } body .byk-drawer .wp-block-navigation__responsive-container .byk-nav-cta > .wp-block-navigation-item__content:hover { background: color-mix(in srgb, var(--c-accent) 85%, #fff); } /* Items come in one after another as the panel slides in. */ body .byk-drawer .wp-block-navigation__responsive-container .wp-block-navigation-item { opacity: 0; transform: translateX(-24px); transition: opacity 0.5s var(--byk-ease), transform 0.5s var(--byk-ease); transition-delay: 0s; } body .byk-drawer .is-menu-open .wp-block-navigation-item { opacity: 1; transform: none; transition-delay: var(--byk-d, 480ms); } body .byk-drawer .is-menu-open .wp-block-navigation-item:nth-child(1) { --byk-d: 120ms; } body .byk-drawer .is-menu-open .wp-block-navigation-item:nth-child(2) { --byk-d: 170ms; } body .byk-drawer .is-menu-open .wp-block-navigation-item:nth-child(3) { --byk-d: 220ms; } body .byk-drawer .is-menu-open .wp-block-navigation-item:nth-child(4) { --byk-d: 270ms; } body .byk-drawer .is-menu-open .wp-block-navigation-item:nth-child(5) { --byk-d: 320ms; } body .byk-drawer .is-menu-open .wp-block-navigation-item:nth-child(6) { --byk-d: 370ms; } body .byk-drawer .is-menu-open .wp-block-navigation-item:nth-child(7) { --byk-d: 420ms; } html { scrollbar-gutter: stable; } @media (prefers-reduced-motion: reduce) { body .byk-drawer .wp-block-navigation__responsive-container, body .byk-drawer .wp-block-navigation__responsive-container *, body .byk-drawer .wp-block-navigation__responsive-container::before { transition: none !important; } } .byk-site :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; } /* --------------------------------------------------------------------------- The hero. Full image (default): the photo fills the screen, the words sit at the bottom with the next event as a small card. "Split with event card" (the block's style): the words on the left, a big event card with the countdown on the right. --------------------------------------------------------------------------- */ body .byk-hero { position: relative; display: flex; align-items: flex-end; min-height: max(640px, 100svh); margin: 0 !important; overflow: hidden; isolation: isolate; } body .byk-hero > .byk-hero__photo { position: absolute; inset: 0; z-index: -2; margin: 0 !important; } .byk-hero > .byk-hero__photo img { width: 100%; height: 100%; object-fit: cover; } .byk-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(26 10 46 / 0.45) 0%, rgb(26 10 46 / 0.12) 32%, rgb(26 10 46 / 0.78) 72%, var(--c-paper) 100%); } body .byk-hero__inner { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: flex-end; width: 100%; max-width: calc(var(--gsevt-wrap) + 2 * var(--gsevt-gutter)); box-sizing: border-box; margin: 0 auto !important; padding: 140px var(--gsevt-gutter) 64px !important; } body .byk-hero__inner > * { margin: 0 !important; } body .byk-hero__copy { display: flex; flex-direction: column; gap: 18px; } body .byk-hero__copy > * { margin: 0 !important; } body .byk-hero__title { font-size: clamp(4.25rem, 1rem + 10vw, 10.5rem); line-height: 0.88; text-shadow: 0 6px 30px rgb(0 0 0 / 0.35); } .byk-hero__lead { display: none; max-width: 30em; font-size: 1.25rem; color: var(--c-muted); } .byk-hero .is-style-outline .wp-block-button__link { background: rgb(26 10 46 / 0.35); } /* The next event, filled in by the theme. */ .byk-next { position: relative; display: flex; gap: 16px; align-items: center; padding: 14px 18px 14px 14px; border: 1px solid var(--c-line); border-radius: 22px; background: color-mix(in srgb, var(--c-surface) 85%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--c-ink); } .byk-next > img { flex: none; width: 92px; height: 92px; border-radius: 16px; object-fit: cover; } .byk-next__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .byk-next__text > * { margin: 0 !important; } .byk-next__when { display: flex; align-items: center; gap: 8px; font: 400 12px/1.4 var(--byk-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent-text); } .byk-next__when::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--byk-green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--byk-green) 25%, transparent); } .byk-next__title { font-family: var(--f-display); font-weight: 400; font-size: 28px; line-height: 1; text-transform: uppercase; } .byk-next__title a { color: inherit; text-decoration: none; } .byk-next__title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } .byk-next:hover { border-color: var(--c-accent); } .byk-next__where { color: var(--c-muted); font-size: 15px; } .byk-next__clock, .byk-next__cta { display: none !important; } body .byk-hero.is-style-byk-split { min-height: 0; align-items: center; } .byk-hero.is-style-byk-split::after { background: linear-gradient(90deg, rgb(26 10 46 / 0.94) 0%, rgb(26 10 46 / 0.8) 55%, rgb(26 10 46 / 0.65) 100%); } body .byk-hero.is-style-byk-split .byk-hero__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)); gap: 48px; align-items: center; padding: 128px var(--gsevt-gutter) 88px !important; } body .byk-hero.is-style-byk-split .byk-hero__title { font-size: clamp(4.25rem, 1rem + 7.5vw, 8.5rem); line-height: 0.9; } .byk-hero.is-style-byk-split .byk-hero__lead { display: block; } .byk-hero.is-style-byk-split .byk-next { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; border-radius: 28px; background: color-mix(in srgb, var(--c-surface) 90%, transparent); } .byk-hero.is-style-byk-split .byk-next > img { width: 100%; height: 260px; border-radius: 0; } .byk-hero.is-style-byk-split .byk-next__text { gap: 12px; padding: 26px 28px 28px; } .byk-hero.is-style-byk-split .byk-next__when { font-size: 13px; } .byk-hero.is-style-byk-split .byk-next__title { font-size: clamp(2.25rem, 1.5rem + 2vw, 3rem); line-height: 0.95; } .byk-hero.is-style-byk-split .byk-next__clock { display: flex !important; align-items: center; gap: 12px; margin-top: 4px !important; } .byk-hero.is-style-byk-split .byk-next__clock > :first-child { flex: 1; min-width: 0; } .byk-hero.is-style-byk-split .byk-next__cta { display: inline-flex !important; flex: none; padding: 12px 20px; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; } .byk-hero.is-style-byk-split .byk-next .byk-next__days { display: none; } @media (max-width: 600px) { body .byk-hero__inner { padding-bottom: 40px !important; gap: 24px; } .byk-next > img { width: 72px; height: 72px; } .byk-next__title { font-size: 24px; } } /* --------------------------------------------------------------------------- The home page sections (the Club design's, with BykonzYard's words). --------------------------------------------------------------------------- */ body .byk-band { margin-block: 0 !important; padding-block: var(--byk-space) !important; } .byk-site .gsevt-h2 { font-size: clamp(3rem, 1.5rem + 4.5vw, 4.75rem); line-height: 0.95; } /* Yard Points: copy on the left, four tiles on the right. */ body .byk-earn__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } body .byk-earn__tiles > * { margin: 0 !important; } .byk-tile { padding: 20px; border: 1px solid var(--c-line); border-radius: 20px; background: var(--c-paper); } .byk-tile > * { margin: 0 !important; } .byk-tile strong { display: block; font-family: var(--f-display); font-weight: 400; font-size: 36px; line-height: 1.1; color: var(--c-accent-text); } .byk-tile--gold { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); } .byk-tile--gold strong { color: inherit; } .byk-tile--gold a { color: inherit; } /* Bookings: their photo beside a light panel. */ body .byk-book__box { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); overflow: hidden; border: 1px solid var(--c-line); border-radius: 32px; } body .byk-book__box > * { margin: 0 !important; } body .byk-book__box > .wp-block-image { min-height: 380px; } .byk-book__box > .wp-block-image img { width: 100%; height: 100%; object-fit: cover; } body .byk-book__panel { --t: #120620; --tm: #3B2766; --ta: #5A1A9A; display: flex; flex-direction: column; gap: 16px; padding: clamp(32px, 5vw, 56px); background: var(--c-ink); color: #120620; } body .byk-book__panel > * { margin: 0 !important; } .byk-book__panel .is-style-eyebrow { color: #5A1A9A; } .byk-book__panel .gsevt-h2 { color: #120620; font-size: clamp(2.75rem, 1.5rem + 3vw, 3.75rem); } .byk-book__panel ul { display: grid; gap: 6px; padding-left: 20px; } .byk-book__panel .wp-block-button__link { background: #120620 !important; color: var(--c-ink) !important; } .byk-book__panel .wp-block-button__link:hover { background: #3B2766 !important; } /* What the card shows in each hero. */ .byk-next__full, .byk-next__time, .byk-next__from { display: none; } .byk-hero.is-style-byk-split .byk-next__short { display: none; } .byk-hero.is-style-byk-split .byk-next__full, .byk-hero.is-style-byk-split .byk-next__time, .byk-hero.is-style-byk-split .byk-next__from { display: inline; } .byk-next .gsev-countdown { gap: 8px; } .byk-next .gsev-countdown__cell { min-width: 58px; padding: 8px 12px; border-radius: 14px; background: var(--c-paper); } .byk-next .gsev-countdown__n { font-size: 30px; } .byk-next .gsev-countdown__label { font-family: var(--byk-mono); font-size: 11px; } @media (max-width: 480px) { .byk-next .gsev-countdown__cell { min-width: 0; padding: 6px 8px; } .byk-next .gsev-countdown__n { font-size: 24px; } } /* The parent's open-menu rules apply to every menu: "The Yard" links and Get tickets opt out of its numbers and big capitals. */ body .byk-drawer .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > :is(.byk-nav-small, .byk-nav-cta) { counter-increment: none; border-bottom: 0; } body .byk-drawer .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .byk-nav-small { width: auto; } body .byk-drawer .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > :is(.byk-nav-small, .byk-nav-cta) > .wp-block-navigation-item__content { font-family: var(--f-body); letter-spacing: 0; text-transform: none; line-height: 1.4; } body .byk-drawer .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > :is(.byk-nav-small, .byk-nav-cta) > .wp-block-navigation-item__content::before { content: none; } body .byk-drawer .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .byk-nav-cta > .wp-block-navigation-item__content { font-size: 17px; } body .byk-drawer .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .byk-nav-small--first { margin-top: 52px !important; } body .byk-drawer .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .byk-nav-cta { margin-top: 22px !important; } body .byk-drawer .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .byk-nav-cta > .wp-block-navigation-item__content { display: block !important; padding: 15px !important; border-radius: 999px; background: var(--c-accent) !important; color: var(--c-on-accent) !important; font-weight: 700; } body .byk-drawer .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .byk-nav-cta > .wp-block-navigation-item__content:hover { background: color-mix(in srgb, var(--c-accent) 85%, #fff) !important; } /* --------------------------------------------------------------------------- The floating bar stays at the top as the page scrolls; the logo gets a little smaller once the page has moved (byk.js adds .byk-scrolled). --------------------------------------------------------------------------- */ body.byk-site header.wp-block-template-part { position: sticky; top: 0; z-index: 100; } body.byk-site header.wp-block-template-part { top: var(--byk-topbar-h, 0px); } body.admin-bar .byk-topbar { top: var(--wp-admin--admin-bar--height, 32px); } body.byk-site.admin-bar header.wp-block-template-part { top: calc(var(--wp-admin--admin-bar--height, 32px) + var(--byk-topbar-h, 0px)); } @media (max-width: 600px) { body.admin-bar .byk-topbar { top: 0; } body.byk-site.admin-bar header.wp-block-template-part { top: var(--byk-topbar-h, 0px); } } body .byk-bar .byk-logo img { transition: height 0.3s var(--byk-ease); } body.byk-scrolled .byk-bar .byk-logo img { height: 52px; } @media (max-width: 600px) { body.byk-scrolled .byk-bar .byk-logo img { height: 42px; } } .byk-site [id] { scroll-margin-top: calc(110px + var(--byk-topbar-h, 0px)); } /* --------------------------------------------------------------------------- One album: the cover beside its story, and three photos fanned out as a stack of prints in 3D (they spread when you point at the card). --------------------------------------------------------------------------- */ .byk-site .gsev-albums--one .gsev-album__link { border-radius: 28px; } .byk-site .gsev-albums--one .gsev-album__cover { min-height: 420px; } .byk-site .gsev-albums--one .gsev-album__body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; } .byk-site .gsev-albums--one .gsev-album__meta { order: 1; font-family: var(--byk-mono); color: var(--c-accent-text); font-weight: 400; } .byk-site .gsev-albums--one .gsev-album__title { order: 2; } .byk-site .gsev-albums--one .gsev-album__body::after { content: "View album"; order: 4; justify-self: start; margin-top: 6px; padding: 13px 24px; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; font-size: 16px; line-height: 1.2; } .byk-site .gsev-albums--one .gsev-album__link:hover .gsev-album__body::after { background: color-mix(in srgb, var(--c-accent) 85%, #fff); } .byk-site .gsev-albums--one .gsev-album__thumbs { order: 3; position: relative; display: block; height: 200px; margin: 18px 0 10px; perspective: 900px; } .byk-site .gsev-albums--one .gsev-album__thumbs img { position: absolute; left: 50%; top: 50%; width: 42%; max-width: 230px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 6px solid var(--c-ink); border-radius: 14px; box-shadow: 0 18px 40px rgb(0 0 0 / 0.45); transform-origin: 50% 100%; transition: transform 0.6s var(--byk-ease); } .byk-site .gsev-albums--one .gsev-album__thumbs img:nth-child(1) { z-index: 1; transform: translate(-50%, -50%) translateX(calc(-1 * var(--byk-fan, 46%))) rotateY(18deg) rotateZ(-9deg); } .byk-site .gsev-albums--one .gsev-album__thumbs img:nth-child(2) { z-index: 3; transform: translate(-50%, -54%) translateZ(40px); } .byk-site .gsev-albums--one .gsev-album__thumbs img:nth-child(3) { z-index: 2; transform: translate(-50%, -50%) translateX(var(--byk-fan, 46%)) rotateY(-18deg) rotateZ(9deg); } .byk-site .gsev-albums--one .gsev-album__link:hover .gsev-album__thumbs img:nth-child(1), .byk-site .gsev-albums--one .gsev-album__link:focus-visible .gsev-album__thumbs img:nth-child(1) { transform: translate(-50%, -50%) translateX(calc(-1 * var(--byk-fan-open, 56%))) rotateY(10deg) rotateZ(-13deg); } .byk-site .gsev-albums--one .gsev-album__link:hover .gsev-album__thumbs img:nth-child(2), .byk-site .gsev-albums--one .gsev-album__link:focus-visible .gsev-album__thumbs img:nth-child(2) { transform: translate(-50%, -60%) translateZ(70px); } .byk-site .gsev-albums--one .gsev-album__link:hover .gsev-album__thumbs img:nth-child(3), .byk-site .gsev-albums--one .gsev-album__link:focus-visible .gsev-album__thumbs img:nth-child(3) { transform: translate(-50%, -50%) translateX(var(--byk-fan-open, 56%)) rotateY(-10deg) rotateZ(13deg); } @media (max-width: 600px) { .byk-site .gsev-albums--one .gsev-album__cover { min-height: 260px; } .byk-site .gsev-albums--one .gsev-album__thumbs { height: 150px; --byk-fan: 44%; --byk-fan-open: 50%; } .byk-site .gsev-albums--one .gsev-album__thumbs img { width: 44%; border-width: 4px; } } @media (prefers-reduced-motion: reduce) { .byk-site .gsev-albums--one .gsev-album__thumbs img { transition: none; } } /* Once the page scrolls, the bar becomes a strip of frosted plum glass (80% plum, blurred), so it reads as the top bar over photos and text alike. The glass is a layer behind the bar's contents, never the bar itself: a backdrop-filter on the bar would trap the slide-in menu (position: fixed) inside the bar's 80px. */ body .byk-bar { transition: padding 0.3s var(--byk-ease); } body .byk-bar::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; background: rgb(26 10 46 / 0.8); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid color-mix(in srgb, var(--c-ink) 12%, transparent); box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); } body.byk-scrolled .byk-bar { padding-block: 10px !important; } body.byk-scrolled .byk-bar::before { opacity: 1; } body.byk-scrolled .byk-bar :is(.wp-block-navigation__responsive-container-open, .byk-cta .wp-block-button__link) { box-shadow: none; } @media (max-width: 600px) { body.byk-scrolled .byk-bar { padding-block: 8px !important; } } /* --------------------------------------------------------------------------- The hero as on their original site (the default style): the crowd photo dimmed, their logo large in the middle, "Welcome to the yard" in small white capitals, Get tickets, and the next event as a strip at the foot. The styles "full image with event card" and "split" keep the looks above. --------------------------------------------------------------------------- */ .byk-hero__logo { display: none; } .byk-hero:not([class*="is-style-byk-"]) { align-items: stretch; } .byk-hero:not([class*="is-style-byk-"])::after { background: linear-gradient(180deg, rgb(18 6 32 / 0.62) 0%, rgb(18 6 32 / 0.5) 60%, rgb(26 10 46 / 0.92) 100%); } body .byk-hero:not([class*="is-style-byk-"]) .byk-hero__inner { flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 28px; text-align: center; padding: 120px var(--gsevt-gutter) 40px !important; } body .byk-hero:not([class*="is-style-byk-"]) .byk-hero__copy { align-items: center; gap: 22px; margin-block: auto 0 !important; } .byk-hero:not([class*="is-style-byk-"]) .byk-hero__logo { display: block; } .byk-hero:not([class*="is-style-byk-"]) .byk-hero__logo img { display: block; width: min(300px, 62vw); height: auto; filter: drop-shadow(0 12px 40px rgb(0 0 0 / 0.55)); } .byk-hero:not([class*="is-style-byk-"]) .byk-hero__eyebrow, .byk-hero:not([class*="is-style-byk-"]) .byk-hero__lead, .byk-hero:not([class*="is-style-byk-"]) .byk-hero__more { display: none !important; } body .byk-hero:not([class*="is-style-byk-"]) .byk-hero__title { font: 400 15px/1.4 var(--byk-mono); letter-spacing: 0.3em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 12px rgb(0 0 0 / 0.6); } .byk-hero:not([class*="is-style-byk-"]) .byk-hero__title br { display: none; } .byk-hero:not([class*="is-style-byk-"]) .byk-hero__title .gsevt-hl { color: inherit; } .byk-hero:not([class*="is-style-byk-"]) .gsevt-btns { justify-content: center; } .byk-hero:not([class*="is-style-byk-"]) .gsevt-btns .wp-block-button__link { padding: 17px 34px; font-family: var(--byk-mono); letter-spacing: 0.12em; text-transform: uppercase; font-size: 14px; } body .byk-hero:not([class*="is-style-byk-"]) .byk-next { margin-top: auto !important; width: min(640px, 100%); box-sizing: border-box; text-align: left; } @media (max-width: 600px) { body .byk-hero:not([class*="is-style-byk-"]) .byk-hero__inner { padding-top: 96px !important; gap: 22px; } } /* --------------------------------------------------------------------------- Their pages' opening bands. Photo: the crowd dimmed, the title in the middle (About). Sky: their purple sky, the title on the left (Earn, Contact, Music, What's on). --------------------------------------------------------------------------- */ body .byk-pagehero { position: relative; display: flex; align-items: flex-end; margin: 0 !important; overflow: hidden; isolation: isolate; } body .byk-pagehero > .byk-pagehero__photo { position: absolute; inset: 0; z-index: -2; margin: 0 !important; } .byk-pagehero > .byk-pagehero__photo img { width: 100%; height: 100%; object-fit: cover; } .byk-pagehero::after { content: ""; position: absolute; inset: 0; z-index: -1; } .byk-pagehero--photo { min-height: clamp(420px, 62vh, 620px); align-items: center !important; } .byk-pagehero--photo::after { background: rgb(18 6 32 / 0.55); } .byk-pagehero--sky { min-height: clamp(380px, 52vh, 520px); } .byk-pagehero--sky::after { background: linear-gradient(180deg, rgb(12 4 22 / 0.65) 0%, rgb(12 4 22 / 0.2) 55%, var(--c-paper) 100%); } .byk-pagehero--picture { min-height: clamp(420px, 58vh, 580px); } .byk-pagehero--picture::after { background: linear-gradient(180deg, rgb(12 4 22 / 0.6) 0%, rgb(12 4 22 / 0.5) 55%, rgb(12 4 22 / 0.82) 100%); } body .byk-pagehero__inner { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: calc(var(--gsevt-wrap) + 2 * var(--gsevt-gutter)); box-sizing: border-box; margin: 0 auto !important; padding: 140px var(--gsevt-gutter) 56px !important; } body .byk-pagehero__inner > * { margin: 0 !important; } .byk-pagehero--photo .byk-pagehero__inner { align-items: center; text-align: center; padding-bottom: 72px !important; } body .byk-pagehero__title { font-size: clamp(3.75rem, 1.5rem + 8vw, 8rem); line-height: 0.9; text-shadow: 0 6px 30px rgb(0 0 0 / 0.35); } .byk-pagehero__lead { max-width: 34em; font-family: var(--byk-mono); font-size: 15px; line-height: 1.7; color: var(--c-ink); } @media (max-width: 600px) { body .byk-pagehero__inner { padding-top: 112px !important; } } /* Sections in their pages. */ body .byk-band > .gsevt-wrap > * + * { margin-top: 0; } .byk-band .gsevt-h2 + .gsevt-lead, .byk-band .gsevt-h2 { margin-bottom: 0 !important; } .byk-band .gsevt-lead { max-width: 40em; margin-top: 12px !important; color: var(--c-muted); } .byk-band .is-style-eyebrow + .gsevt-h2 { margin-top: 8px !important; } /* A photo beside the story (About). */ body .byk-story { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 5vw, 64px); align-items: center; } body .byk-story > * { margin: 0 !important; } .byk-story__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 28px; } .byk-story--flip .byk-story__photo { order: 2; } .byk-story--flip .byk-story__photo img { aspect-ratio: 4 / 3; } body .byk-story__copy { display: flex; flex-direction: column; gap: 14px; } body .byk-story__copy > * { margin: 0 !important; } .byk-story__copy p:not(.is-style-eyebrow) { color: var(--c-muted); font-size: 1.0625rem; } .byk-story__copy .gsevt-btns { margin-top: 8px !important; } body .byk-story__copy .byk-story__quote { color: var(--c-ink); font-family: var(--f-display); font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); line-height: 1.1; text-transform: uppercase; } @media (max-width: 900px) { .byk-story--flip .byk-story__photo { order: 0; } } /* Cards in a grid (partners, the three steps). */ body .byk-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin-top: 32px !important; counter-reset: byk-step; } body .byk-cards > * { margin: 0 !important; } body .byk-card { display: flex; flex-direction: column; gap: 8px; padding: 26px 26px 28px; border: 1px solid var(--c-line); border-radius: 22px; background: var(--c-paper); } body .byk-card > * { margin: 0 !important; } .byk-card__title { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; line-height: 1.05; text-transform: uppercase; } .byk-card p { color: var(--c-muted); } .byk-cards--steps .byk-card { counter-increment: byk-step; background: var(--c-surface); } .byk-cards--steps .byk-card__title::before { content: counter(byk-step, decimal-leading-zero); display: block; margin-bottom: 10px; font: 400 13px/1 var(--byk-mono); letter-spacing: 0.1em; color: var(--c-accent-text); } body .byk-after-cards { margin-top: 28px !important; } /* Music: the sounds, the video, the releases. */ body .byk-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 48px !important; } .byk-chips span { padding: 9px 18px; border: 1px solid var(--c-line); border-radius: 999px; font: 400 14px/1.2 var(--byk-mono); letter-spacing: 0.08em; text-transform: uppercase; } body .byk-video { margin-top: 28px !important; overflow: hidden; border-radius: 24px; border: 1px solid var(--c-line); } body .byk-tracks { list-style: none; margin: 28px 0 32px !important; padding: 0; counter-reset: byk-track; border-top: 1px solid var(--c-line); } .byk-tracks li { counter-increment: byk-track; border-bottom: 1px solid var(--c-line); } .byk-tracks a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; padding: 18px 4px; color: var(--c-ink); text-decoration: none; } .byk-tracks a::before { content: counter(byk-track, decimal-leading-zero); font: 400 13px/1 var(--byk-mono); color: var(--c-accent-text); min-width: 24px; } .byk-tracks strong { font-family: var(--f-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1; text-transform: uppercase; } .byk-tracks span { color: var(--c-muted); } .byk-tracks em { margin-left: auto; font-style: normal; color: var(--c-accent-text); font-weight: 600; } .byk-tracks a:hover strong { color: var(--c-accent-text); } /* Contact: the details beside one card with the two forms. */ body .byk-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); gap: clamp(24px, 4vw, 48px); align-items: start; } body .byk-contact > * { margin: 0 !important; } @media (max-width: 960px) { body .byk-contact { grid-template-columns: minmax(0, 1fr); } .byk-contact__aside { order: 2; } } body .byk-contact__aside { display: flex; flex-direction: column; gap: 8px; padding-left: 20px; border-left: 1px solid var(--c-line); } body .byk-contact__aside > * { margin: 0 !important; } .byk-contact__aside h3 { margin-top: 20px !important; font-family: var(--f-body); font-weight: 600; font-size: 1.0625rem; text-transform: none; letter-spacing: 0; } .byk-contact__aside h3:first-child { margin-top: 0 !important; } .byk-contact__aside p { color: var(--c-muted); font-family: var(--byk-mono); font-size: 14px; line-height: 1.7; } .byk-contact__aside a { color: var(--c-accent-text); } body .byk-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px !important; } .byk-socials a { padding: 8px 14px; border: 1px solid var(--c-line); border-radius: 999px; color: var(--c-ink) !important; text-decoration: none; font-family: var(--f-body); } .byk-socials a:hover { border-color: var(--c-accent); } body .byk-contact__card { padding: clamp(24px, 4vw, 44px); border: 1px solid var(--c-line); border-radius: 28px; background: var(--c-surface); } body .byk-contact__card { display: flex; flex-direction: column; gap: 14px; } body .byk-contact__card > * { margin: 0 !important; } body .byk-contact__card > .byk-tabs { margin-bottom: 14px !important; } .byk-tabs { display: none; flex-wrap: wrap; gap: 10px; margin: 14px 0 22px !important; } .byk-tabs-on .byk-tabs { display: flex; } .byk-tabs button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 18px; border: 1px solid var(--c-line); border-radius: 16px; background: var(--c-paper); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; } .byk-tabs button span { font-size: 13px; color: var(--c-muted); } .byk-tabs button[aria-selected="true"] { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); } .byk-tabs button[aria-selected="true"] span { color: inherit; opacity: 0.8; } body .byk-tabpanel { display: flex; flex-direction: column; gap: 12px; } body .byk-tabpanel > * { margin: 0 !important; } .byk-tabpanel[hidden] { display: none !important; } .byk-tabpanel + .byk-tabpanel { margin-top: 40px !important; } .byk-tabs-on .byk-tabpanel + .byk-tabpanel { margin-top: 0 !important; } .byk-tabpanel__title { font-size: clamp(2.5rem, 1.5rem + 2.5vw, 3.5rem); line-height: 0.95; } .byk-tabpanel > p { color: var(--c-muted); font-family: var(--byk-mono); font-size: 14px; line-height: 1.7; } .byk-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; } .byk-form-foot p { margin: 0; color: var(--c-muted); font-size: 14px; } .byk-contact .gsev-booking__consent a { color: var(--c-accent-text); } /* Booking FAQs. */ body .byk-faq { margin: 0 !important; border-bottom: 1px solid var(--c-line); } .byk-band .gsevt-h2 + .byk-faq, .byk-band .gsevt-h2 ~ .byk-faq:first-of-type { margin-top: 28px !important; border-top: 1px solid var(--c-line); } .byk-faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 2px; cursor: pointer; font-weight: 600; list-style: none; } .byk-faq summary::-webkit-details-marker { display: none; } .byk-faq summary::after { content: "+"; color: var(--c-accent-text); font-size: 1.3em; line-height: 1; transition: transform 0.2s ease; } .byk-faq[open] summary::after { transform: rotate(45deg); } .byk-faq p { margin: 0 0 18px !important; color: var(--c-muted); } /* Reps on What's on: the steps beside the name-and-email sign-up. */ body .byk-reps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(28px, 5vw, 64px); align-items: center; } body .byk-reps > * { margin: 0 !important; } body .byk-steps { list-style: none; margin: 26px 0 0 !important; padding: 0; display: grid; gap: 10px; counter-reset: byk-rep; } .byk-steps li { counter-increment: byk-rep; display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 16px 18px; border: 1px solid var(--c-line); border-radius: 18px; background: var(--c-paper); color: var(--c-muted); } .byk-steps li::before { content: counter(byk-rep, decimal-leading-zero); grid-row: span 2; font: 400 13px/1.7 var(--byk-mono); color: var(--c-accent-text); } .byk-steps strong { display: block; color: var(--c-ink); font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; line-height: 1.1; text-transform: uppercase; } body .byk-reps__form { padding: clamp(24px, 4vw, 40px); border: 1px solid var(--c-line); border-radius: 28px; background: var(--c-paper); } .byk-reps__form legend { font-family: var(--f-display); font-size: 2rem; text-transform: uppercase; line-height: 1; margin-bottom: 8px; } /* Earn, grouped: a card per platform with its ways, rewards as cards. */ .byk-mine { margin: 18px 0 30px !important; } .byk-mine a { color: var(--c-accent-text); font-weight: 600; } .byk-site .gsev-earn--grouped .gsev-points__auto { margin: 0 0 26px; font-family: var(--byk-mono); font-size: 14px; } .byk-site .gsev-earn--grouped .gsev-points__group { padding: 22px; border: 1px solid var(--c-line); border-radius: 24px; background: var(--c-surface); } .byk-site .gsev-earn--grouped .gsev-points__group-head h3 { font-family: var(--f-display); font-weight: 400; font-size: 2rem; text-transform: uppercase; } .byk-site .gsev-earn--grouped .gsev-points__group-head span { font: 400 12px/1 var(--byk-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); } .byk-site .gsev-earn--grouped .gsev-points__card, .byk-site .gsev-earn--grouped .gsev-points__reward-card { border-color: var(--c-line); border-radius: 18px; background: var(--c-paper); } .byk-site .gsev-earn--grouped .gsev-points__plus, .byk-site .gsev-earn--grouped .gsev-points__cost { font: 400 13px/1 var(--byk-mono); letter-spacing: 0.06em; color: var(--c-accent-text); } .byk-site .gsev-earn--grouped h4 { font-family: var(--f-body); font-weight: 600; text-transform: none; color: var(--c-ink); } .byk-site .gsev-earn--grouped .gsev-points__kind { font: 400 12px/1 var(--byk-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); } .byk-site .gsev-earn--grouped .gsev-points__did { display: inline-flex; margin-top: auto; padding: 9px 18px; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font-weight: 700; font-size: 14px; text-decoration: none; } .byk-site .gsev-earn--grouped .gsev-points__did:hover { background: color-mix(in srgb, var(--c-accent) 85%, #fff); } .byk-site .gsev-earn--grouped .gsev-points__fine { margin-top: 4px; color: var(--c-muted); font-size: 14px; } .byk-site .gsev-earn--grouped .gsev-points__reward-cards { margin-top: 26px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); } .byk-site .gsev-earn--grouped .gsev-points__reward-card h4 { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; } /* Space between a section's heading and what follows it. */ body .byk-band .gsevt-wrap > :is(.gsevt-h2, .gsevt-lead) + :not(.gsevt-lead):not(.byk-mine):not(.byk-faq) { margin-top: 32px !important; } /* Their enquiry form, laid out like the booking form. */ .byk-enquiry fieldset { display: grid; gap: 0.8em; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border: 0; margin: 0 0 1em; padding: 0; } .byk-enquiry .gsev-booking__consent { display: flex; } /* --------------------------------------------------------------------------- Gallery, as Zazu Tribe does it: each album a photo with its name and date centred under it. Fits the count: one album larger in the middle, two side by side, three or more four to a row. --------------------------------------------------------------------------- */ body.byk-site .byk-photos.gsev-albums { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px) clamp(16px, 2.5vw, 40px); } body.byk-site .byk-photos.gsev-albums--one { grid-template-columns: minmax(0, 720px); justify-content: center; } body.byk-site .byk-photos.gsev-albums--two { grid-template-columns: repeat(2, minmax(0, 560px)); justify-content: center; } @media (max-width: 1000px) { body.byk-site .byk-photos.gsev-albums:not(.gsev-albums--one) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { body.byk-site .byk-photos.gsev-albums:not(.gsev-albums--one) { grid-template-columns: minmax(0, 1fr); } } body.byk-site .byk-photos .gsev-album { margin: 0 !important; grid-column: auto !important; grid-row: auto !important; } body.byk-site .byk-photos .gsev-album__link { display: flex !important; flex-direction: column; gap: 0; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--c-ink); text-decoration: none; } body.byk-site .byk-photos .gsev-album__cover { display: block; aspect-ratio: 3 / 2 !important; min-height: 0 !important; border-radius: 6px !important; overflow: hidden; } body.byk-site .byk-photos .gsev-album__cover img { width: 100%; height: 100%; object-fit: cover; } body.byk-site .byk-photos .gsev-album__body { display: flex !important; flex-direction: column; align-items: center; gap: 10px !important; padding: 22px 0 0 !important; text-align: center; } body.byk-site .byk-photos .gsev-album__body::after { content: none !important; } body.byk-site .byk-photos .gsev-album__thumbs { display: none !important; } body.byk-site .byk-photos .gsev-album__title { order: 1; font-family: var(--f-body); font-weight: 700; font-size: 1.0625rem !important; letter-spacing: 0.02em; line-height: 1.35; text-transform: uppercase; color: var(--c-ink); } body.byk-site .byk-photos .gsev-album__meta { order: 2; font-family: var(--f-body); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.02em; color: var(--c-ink); } body.byk-site .byk-photos.gsev-albums--one .gsev-album__title, body.byk-site .byk-photos.gsev-albums--one .gsev-album__meta { font-size: 1.25rem !important; } body.byk-site .byk-photos .gsev-album__link:hover .gsev-album__title, body.byk-site .byk-photos .gsev-album__link:hover .gsev-album__meta, .byk-photos .gsev-album__link:focus-visible .gsev-album__title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; } body.byk-site .byk-photos .gsev-album__link:hover .gsev-album__cover img { transform: scale(1.03); } body .byk-center { text-align: center; } body .byk-center .gsevt-lead { margin-inline: auto !important; } body .byk-center .gsevt-btns { justify-content: center; } /* --------------------------------------------------------------------------- The band under the hero (as on their original site): the next event on the left, the photos sliding on the right with a bar for each one. The hero's own event strip makes way for it. --------------------------------------------------------------------------- */ .byk-hero:not([class*="is-style-byk-"]) .byk-next { display: none !important; } body .byk-nextband { position: relative; margin: 0 !important; padding: clamp(40px, 5vw, 56px) 0 clamp(48px, 6vw, 72px) !important; overflow: hidden; isolation: isolate; } .byk-slide__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-left: clamp(0px, 6vw, 110px); } body .byk-slide__copy > * { margin: 0 !important; } .byk-slide__eyebrow { font: 400 13px/1.4 var(--byk-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent-text); } body .byk-slide__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.5rem, 1.6rem + 2.4vw, 3.5rem); line-height: 0.95; text-transform: uppercase; color: var(--c-ink); } .byk-slide__text { max-width: 30em; font: 400 15px/1.7 var(--byk-mono); color: var(--c-muted); } .byk-slide__title a { color: var(--c-ink); text-decoration: none; } .byk-slide__title span { display: block; margin-top: 12px; font: 400 16px/1.4 var(--byk-mono); letter-spacing: 0.04em; text-transform: none; color: var(--c-muted); } .byk-slide__copy .wp-block-button__link { padding: 14px 22px; border-radius: 6px; font: 700 13px/1 var(--byk-mono); letter-spacing: 0.14em; text-transform: uppercase; } body .byk-slides { position: relative; display: grid; padding-bottom: 44px; touch-action: pan-y; cursor: grab; user-select: none; } body .byk-slides > * { grid-area: 1 / 1; margin: 0 !important; } body .byk-slide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 5vw, 72px); align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.9s ease, visibility 0s 0.9s; } body .byk-slide > * { margin: 0 !important; } body .byk-slide:first-child, body .byk-slide.is-on { opacity: 1; visibility: visible; transition: opacity 0.9s ease; } @media (max-width: 860px) { body .byk-slide { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 22px; } .byk-slide__copy { padding-left: 0; } } .byk-slide__photo { aspect-ratio: 16 / 10; } body .byk-slides.is-ready > .byk-slide:first-child:not(.is-on) { opacity: 0; visibility: hidden; } .byk-slide__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; } .byk-slides__bars { position: absolute; left: 50%; bottom: 0; display: flex; gap: 8px; transform: translateX(-50%); } .byk-slides__bars button { position: relative; width: 30px; height: 3px; padding: 10px 0; border: 0; background: none; cursor: pointer; } .byk-slides__bars button::before, .byk-slides__bars button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: color-mix(in srgb, var(--c-ink) 22%, transparent); } .byk-slides__bars button::after { right: auto; width: 0; background: var(--c-accent); } .byk-slides__bars button[aria-current="true"] { width: 54px; } .byk-slides__bars button[aria-current="true"]::after { animation: byk-bar var(--byk-slide, 5s) linear forwards; } .byk-slides.is-paused .byk-slides__bars button[aria-current="true"]::after { animation-play-state: paused; } @keyframes byk-bar { from { width: 0; } to { width: 100%; } } @media (prefers-reduced-motion: reduce) { body .byk-slide { transition: none; } .byk-slides__bars button[aria-current="true"]::after { animation: none; width: 100%; } } /* --------------------------------------------------------------------------- About, as on their original site: DJ ByKonz beside his photo, BykonzYard centred, the partners as rows. --------------------------------------------------------------------------- */ .byk-about__h { font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem) !important; line-height: 1 !important; } .byk-about-dj .byk-story__photo img { aspect-ratio: 3 / 4; border-radius: 6px; } body .byk-about-dj { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 56px); } @media (max-width: 860px) { body .byk-about-dj { grid-template-columns: minmax(0, 1fr); } } .byk-about-dj .byk-story__copy p, .byk-about-yard p, .byk-about-partner .gsevt-lead, .byk-row__text { font-family: var(--byk-mono); font-size: 14.5px !important; line-height: 1.8; color: var(--c-ink) !important; opacity: 0.85; } body .byk-about-yard { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: calc(700px + 2 * var(--gsevt-gutter)); text-align: center; } body .byk-about-yard > * { margin: 0 !important; } .byk-about-yard p.byk-about-yard__tag { font-size: 16px !important; color: var(--c-muted) !important; opacity: 1; margin-bottom: 10px !important; } .byk-about-yard p.byk-about-yard__end { opacity: 1; color: var(--c-ink) !important; } body .byk-rows { margin-top: 36px !important; border-top: 1px solid var(--c-line); } body .byk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 40px; align-items: center; margin: 0 !important; padding: 22px 0; border-bottom: 1px solid var(--c-line); } body .byk-row > * { margin: 0 !important; } @media (max-width: 700px) { body .byk-row { grid-template-columns: minmax(0, 1fr); } } .byk-row__title { display: flex; align-items: center; gap: 18px; font-family: var(--f-body) !important; font-weight: 600 !important; font-size: 1.125rem !important; text-transform: none !important; letter-spacing: 0 !important; } .byk-row__title::before { content: ""; flex: none; width: 42px; height: 42px; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-accent); -webkit-mask: var(--byk-i) center / 18px no-repeat, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: var(--byk-i) center / 18px no-repeat exclude, linear-gradient(#000 0 0); opacity: 0.9; } .byk-row__title::before { background: none; -webkit-mask: none; mask: none; box-shadow: inset 0 0 0 1px var(--c-line); background-image: var(--byk-i); background-position: center; background-size: 18px; background-repeat: no-repeat; } .byk-row--drinks { --byk-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4A45C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21h14M7 21V10M12 21V4M17 21v-7'/%3E%3C/svg%3E"); } .byk-row--food { --byk-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4A45C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4' rx='1'/%3E%3Cpath d='M12 8v13M19 12v9H5v-9M7.5 8a2.5 2.5 0 0 1 0-5C10 3 12 8 12 8s2-5 4.5-5a2.5 2.5 0 0 1 0 5'/%3E%3C/svg%3E"); } .byk-row--collab { --byk-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4A45C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z'/%3E%3Cpath d='M19 17l.7 1.8 1.8.7-1.8.7-.7 1.8-.7-1.8-1.8-.7 1.8-.7z'/%3E%3C/svg%3E"); } .byk-btn-square .wp-block-button__link { border-radius: 6px !important; padding: 14px 22px !important; font: 700 13px/1 var(--byk-mono) !important; letter-spacing: 0.14em; text-transform: uppercase; } /* --------------------------------------------------------------------------- Music, as on their original site. --------------------------------------------------------------------------- */ .byk-pagehero .byk-chips { margin: 4px 0 0 !important; } .byk-pagehero .byk-chips span { padding: 6px 12px; font-size: 11px; background: rgb(26 10 46 / 0.4); } /* Press play: the video waits for "Load the video". */ .byk-video-card { margin-top: 28px; padding: 16px; border: 1px solid var(--c-line); border-radius: 6px; background: var(--c-surface); } .byk-video-card__note { margin: 0 0 12px; font-size: 14px; color: var(--c-ink); } .byk-video-card__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; } .byk-video-card__frame img, .byk-video-card__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; } .byk-video-card__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgb(18 6 32 / 0.45)); pointer-events: none; } .byk-video-card__play { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: clamp(64px, 9vw, 96px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 12px 40px rgb(0 0 0 / 0.5), 0 0 0 10px rgb(212 164 92 / 0.22); transform: translate(-50%, -50%); cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .byk-video-card__play svg { width: 44%; height: 44%; margin-left: 8%; } .byk-video-card__frame:hover .byk-video-card__play, .byk-video-card__play:focus-visible { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 12px 40px rgb(0 0 0 / 0.5), 0 0 0 16px rgb(212 164 92 / 0.25); } .byk-video-card__frame { cursor: pointer; } .byk-video-card .byk-video-card__note { margin: 12px 0 0; font: 400 12px/1.5 var(--byk-mono); color: var(--c-muted); } .byk-video-card.is-loaded .byk-video-card__note { display: none; } .byk-video-card.is-loaded .byk-video-card__frame::after { content: none; } /* Track record. */ .byk-tracklist { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--c-line); } .byk-track { display: grid; grid-template-columns: 56px 56px minmax(0, 1fr) auto auto; align-items: center; gap: 12px 22px; padding: 14px 0; border-bottom: 1px solid var(--c-line); } .byk-track__n { font-family: var(--f-display); font-size: 1.75rem; color: var(--c-accent-text); } .byk-track__cover { width: 56px; height: 56px; object-fit: cover; border-radius: 2px; } .byk-track__what { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .byk-track__what strong { font-family: var(--byk-mono); font-weight: 400; font-size: 15px; } .byk-track__what span { font: 400 12px/1.4 var(--byk-mono); letter-spacing: 0.04em; color: var(--c-muted); } .byk-track__play, .byk-track__spotify { padding: 6px 2px; border: 0; background: none; font: 700 12px/1 var(--byk-mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; text-decoration: none; } .byk-track__play { color: var(--c-accent-text); } .byk-track__play[aria-pressed="true"]::before { content: "❚❚ "; } .byk-track__spotify { color: var(--c-muted) !important; } .byk-track__spotify:hover, .byk-track__play:hover { color: var(--c-ink) !important; } @media (max-width: 640px) { .byk-track { grid-template-columns: 34px 48px minmax(0, 1fr); } .byk-track__cover { width: 48px; height: 48px; } .byk-track__what { align-items: flex-start; text-align: left; } .byk-track__play { grid-column: 3; justify-self: start; } .byk-track__spotify { grid-column: 3; justify-self: start; margin-top: -8px; } } /* The Spotify · YouTube strip. */ .byk-marquee { overflow: hidden; padding: 14px 0; border-block: 1px solid var(--c-line); background: var(--c-paper); } .byk-marquee__track { display: flex; width: max-content; animation: byk-marquee 30s linear infinite; } .byk-marquee span { display: flex; } .byk-marquee b, .byk-marquee i { padding: 0 22px; font: 400 1.6rem/1 var(--f-display); font-style: normal; text-transform: uppercase; letter-spacing: 0.02em; } .byk-marquee i { color: var(--c-accent-text); } @keyframes byk-marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .byk-marquee__track { animation: none; } } /* The Yard on repeat. */ .byk-reel { position: relative; min-width: 0; max-width: 100%; margin-top: 18px; contain: inline-size; } .byk-reel__arrows { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; } .byk-reel__arrows button { width: 38px; height: 38px; border: 1px solid var(--c-line); border-radius: 4px; background: var(--c-paper); color: var(--c-ink); cursor: pointer; } .byk-reel__arrows button:hover { border-color: var(--c-accent); } .byk-reel__list { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 2); gap: 24px; margin: 0; padding: 0 0 8px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .byk-reel__list::-webkit-scrollbar { display: none; } .byk-reel__list li { scroll-snap-align: start; } .byk-reel__list a { display: flex; flex-direction: column; gap: 10px; color: var(--c-ink); text-decoration: none; } .byk-reel__list img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 2px; } .byk-reel__list strong { font-family: var(--f-display); font-weight: 400; font-size: 1.35rem; line-height: 1.05; text-transform: uppercase; } .byk-reel__list a > span { font: 400 12px/1 var(--byk-mono); letter-spacing: 0.08em; color: var(--c-muted); text-transform: uppercase; } .byk-reel__list a:hover strong { color: var(--c-accent-text); } .byk-reel--three .byk-reel__list { grid-auto-columns: calc((100% - 48px) / 3); } @media (max-width: 900px) { .byk-reel--three .byk-reel__list { grid-auto-columns: calc((100% - 24px) / 2); } } @media (max-width: 640px) { .byk-reel--three .byk-reel__list { grid-auto-columns: 82%; } } @media (max-width: 640px) { .byk-reel__list { grid-auto-columns: 82%; } } /* --------------------------------------------------------------------------- Events, as on their original site: the next event with its countdown, then every event with the finder. --------------------------------------------------------------------------- */ .byk-events-wrap > .gsevt-h2 { margin-bottom: 32px !important; } .byk-feature { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); background: rgb(26 10 46 / 0.55); } @media (max-width: 760px) { .byk-feature { grid-template-columns: minmax(0, 1fr); } } .byk-feature__photo img { display: block; width: 100%; height: 100%; min-height: 300px; object-fit: cover; } .byk-feature__body { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: clamp(22px, 3vw, 36px); } .byk-feature__body > * { margin: 0; } .byk-feature__when { font: 400 12px/1.4 var(--byk-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent-text); } .byk-feature__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3rem); line-height: 0.95; text-transform: uppercase; } .byk-feature__title a { color: var(--c-ink); text-decoration: none; } .byk-feature__title span { display: block; margin-top: 10px; font: 400 15px/1.4 var(--byk-mono); text-transform: none; color: var(--c-muted); } .byk-feature__where { font: 400 13px/1.5 var(--byk-mono); color: var(--c-muted); } .byk-feature__where b { margin-right: 6px; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent-text); } .byk-feature .gsev-countdown { gap: 6px; margin: 4px 0 0; } .byk-feature .gsev-countdown__cell { min-width: 52px; padding: 8px 6px; border: 1px solid var(--c-line); border-radius: 2px; background: var(--c-paper); } .byk-feature .gsev-countdown__n { font-size: 1.7rem; } .byk-feature .gsev-countdown__label { font: 400 10px/1 var(--byk-mono); letter-spacing: 0.1em; } .byk-square { display: inline-block; padding: 13px 20px !important; border-radius: 4px !important; background: var(--c-accent); color: var(--c-on-accent) !important; font: 700 12px/1 var(--byk-mono) !important; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; } .byk-feature__none { text-align: center; color: var(--c-muted); font-family: var(--byk-mono); } /* The finder. */ .byk-finder { margin-top: 32px; } .byk-finder__bar { display: flex; flex-wrap: wrap; gap: 12px; } .byk-finder__bar input, .byk-finder select { min-height: 42px; box-sizing: border-box; padding: 0 14px; border: 1px solid var(--c-line); border-radius: 4px; background: var(--c-paper); color: var(--c-ink); font: 400 14px/1 var(--f-body); } .byk-finder__place { flex: 1 1 280px; max-width: 460px; } .byk-finder__place input { width: 100%; padding-left: 36px; background: var(--c-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BFB3D3' stroke-width='2'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E") 12px center / 16px no-repeat; } .byk-finder__tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 22px 0 0; border-bottom: 1px solid var(--c-line); } .byk-finder__tabs button { padding: 10px 0; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--c-muted); font: 400 13px/1 var(--byk-mono); cursor: pointer; } .byk-finder__tabs button[aria-selected="true"] { color: var(--c-ink); border-bottom-color: var(--c-ink); } .byk-finder__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 18px 0; } .byk-finder__count { margin: 0; font-size: 14px; } .byk-finder__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 28px 20px; margin: 0; padding: 0; list-style: none; } .byk-ev[hidden] { display: none; } .byk-ev a { display: flex; flex-direction: column; gap: 6px; color: var(--c-ink); text-decoration: none; } .byk-ev img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 6px; } .byk-ev__when, .byk-ev__where { font-size: 13px; color: var(--c-muted); } .byk-ev__title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .byk-ev__price { font-size: 14px; font-weight: 700; } .byk-ev a:hover .byk-ev__title { color: var(--c-accent-text); } .byk-finder__empty { margin: 0; color: var(--c-muted); } .byk-center .byk-faq { text-align: left; } body .byk-events-wrap > .byk-finder { margin-top: 44px !important; } body .byk-pagehero__title + .byk-pagehero__lead { margin-top: 6px !important; } /* The event list fits how many there are: one wide (photo beside the details) with what's coming next beside it; two side by side with it; three or more in a grid. */ .byk-ev__cta { display: none; } .byk-ev-more { display: none; } .byk-finder__list--one, .byk-finder__list--two { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: stretch; } .byk-finder__list--two { grid-template-columns: repeat(3, minmax(0, 1fr)); } .byk-finder__list--one .byk-ev-more, .byk-finder__list--two .byk-ev-more { display: flex; } .byk-finder__list--one .byk-ev a { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: repeat(5, auto) 1fr; column-gap: 26px; height: 100%; padding: 0; border: 1px solid var(--c-line); background: rgb(26 10 46 / 0.5); } .byk-finder__list--one .byk-ev img { grid-row: 1 / -1; height: 100%; min-height: 280px; aspect-ratio: auto; margin: 0; } .byk-finder__list--one .byk-ev a > span, .byk-finder__list--one .byk-ev a > strong { grid-column: 2; margin-right: 24px; } .byk-finder__list--one .byk-ev__when { margin-top: 28px; font-family: var(--byk-mono); font-size: 12px !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-accent-text) !important; } .byk-finder__list--one .byk-ev__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 1.2vw, 2.4rem) !important; letter-spacing: 0 !important; line-height: 1; } .byk-finder__list--one .byk-ev__price { font-size: 1.05rem; } .byk-finder__list--one .byk-ev__cta, .byk-finder__list--two .byk-ev__cta { display: inline-block; justify-self: start; align-self: end; width: fit-content; margin: 8px 0 28px; padding: 12px 18px; border-radius: 4px; background: var(--c-accent); color: var(--c-on-accent); font: 700 12px/1 var(--byk-mono); letter-spacing: 0.14em; text-transform: uppercase; } .byk-finder__list--two .byk-ev__cta { margin-bottom: 0; } .byk-ev a:hover .byk-ev__cta { background: color-mix(in srgb, var(--c-accent) 85%, #fff); } .byk-ev-more { flex-direction: column; justify-content: center; gap: 12px; padding: clamp(22px, 3vw, 34px); border: 1px dashed color-mix(in srgb, var(--c-accent) 55%, var(--c-line)); background: rgb(36 17 71 / 0.55); } .byk-ev-more > p { margin: 0; } .byk-ev-more__eyebrow { font: 400 12px/1 var(--byk-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent-text); } .byk-ev-more__title { font-family: var(--f-display); font-size: clamp(1.8rem, 1.3rem + 1vw, 2.3rem); line-height: 1; text-transform: uppercase; } .byk-ev-more__text { color: var(--c-muted); font-size: 15px; } .byk-ev-more__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 6px !important; } .byk-ev-more__go > a:not(.byk-square) { color: var(--c-ink); font-weight: 600; } @media (max-width: 900px) { .byk-finder__list--one, .byk-finder__list--two { grid-template-columns: minmax(0, 1fr); } .byk-finder__list--one .byk-ev a { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; } .byk-finder__list--one .byk-ev img { grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; } .byk-finder__list--one .byk-ev a > span, .byk-finder__list--one .byk-ev a > strong { grid-column: 1; margin-inline: 20px; } .byk-finder__list--one .byk-ev__when { margin-top: 18px; } .byk-finder__list--one .byk-ev__cta { margin-bottom: 22px; } } .byk-finder__list--none { grid-template-columns: minmax(0, 560px); } .byk-finder__list--none .byk-ev-more { display: flex; } /* Phones: the hero logo smaller, as on their original site. */ @media (max-width: 600px) { .byk-hero:not([class*="is-style-byk-"]) .byk-hero__logo img { width: min(170px, 44vw); } } /* The logo, "Welcome to the yard" and Get tickets sit in the middle of the hero, as on their original site. */ body .byk-hero:not([class*="is-style-byk-"]) .byk-hero__copy { margin-block: auto !important; } body .byk-hero:not([class*="is-style-byk-"]) .byk-hero__inner { padding-block: 96px 56px !important; } /* Event page on a phone or tablet: the tickets come straight after About the night, before the line-up and venue. */ @media (max-width: 1000px) { .gsevt-event-body { display: flex; flex-direction: column; gap: 56px; } .gsevt-event-body > .gsevt-event-main { display: contents; } .gsevt-event-body .gsevt-event-about { order: 1; } .gsevt-event-body > .gsevt-event-aside { order: 2; } .gsevt-event-body .gsevt-event-lineup { order: 3; width: 100%; } .gsevt-event-body .gsevt-venue { order: 4; margin-top: 0 !important; } } /* Earn: Next drops, the hoodie and chain concept beside the words. */ .byk-drops .byk-story__photo img { aspect-ratio: 1 / 1; border-radius: 22px; } .byk-drops .byk-story__photo figcaption { margin-top: 12px; font: 400 12px/1.4 var(--byk-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted); text-align: left; } .byk-drops .gsevt-h2 { margin: 0 !important; } /* Credits: six cards, three across on a computer. */ @media (min-width: 900px) { body .byk-cards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* --------------------------------------------------------------------------- Below the top of each page, sections alternate between their two purples, and anything inside a section (a card, a tile) takes the other one. The sections are counted as siblings, so a new or moved section just follows on. --------------------------------------------------------------------------- */ body.byk-site { --byk-a: var(--c-paper); --byk-b: var(--c-surface); --byk-space: clamp(36px, 4.5vw, 64px); } body.byk-site.byk-space-standard { --byk-space: clamp(52px, 6.5vw, 96px); } body.byk-site.byk-space-roomy { --byk-space: clamp(72px, 9vw, 128px); } body :is(.byk-band, .byk-nextband):nth-of-type(odd) { --c-paper: var(--byk-b); --c-surface: var(--byk-b); background-color: var(--byk-a); } body :is(.byk-band, .byk-nextband):nth-of-type(even) { --c-paper: var(--byk-a); --c-surface: var(--byk-a); background-color: var(--byk-b); } /* The kit's own pages (an event, an album, My tickets) follow the same pattern. */ body .gsevt-hero-head ~ .gsevt-band, body .gsevt-more-dates { margin-block: 0 !important; padding-block: var(--byk-space) !important; } body .gsevt-hero-head ~ .gsevt-band:nth-of-type(odd) { --c-paper: var(--byk-b); --c-surface: var(--byk-b); background-color: var(--byk-a); } body .gsevt-hero-head ~ .gsevt-band:nth-of-type(even), body .gsevt-more-dates { --c-paper: var(--byk-a); --c-surface: var(--byk-a); background-color: var(--byk-b); } /* A section with a picture behind it (Website look), dimmed so the words stay readable. */ body .byk-has-bg { position: relative; isolation: isolate; background-position: center; background-size: cover; background-repeat: no-repeat; } .byk-has-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(18 6 32 / 0.55); } /* The top bar (Website look): stays at the top with the floating header just under it (byk.js measures it, as long words wrap on a phone). Below the header's layer so the open menu covers it. */ .byk-topbar { position: sticky; top: 0; z-index: 99; padding: 9px 16px; background: var(--c-ink); color: #120620; font: 700 13px/1.4 "Space Mono", ui-monospace, Menlo, monospace; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; } .byk-topbar a { color: inherit; text-decoration: none; } .byk-topbar a:hover { text-decoration: underline; text-underline-offset: 3px; } .byk-topbar a:focus-visible { outline: 2px solid #120620; outline-offset: 2px; } /* The Yard family on a phone: a row to swipe sideways, as on a computer. */ @media (max-width: 760px) { body .gsevt-crew-sec .gsev-crew { flex-wrap: nowrap; gap: 14px; margin-inline: calc(-1 * var(--gsevt-gutter)); padding-inline: var(--gsevt-gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gsevt-gutter); scrollbar-width: none; } .gsevt-crew-sec .gsev-crew::-webkit-scrollbar { display: none; } body .gsevt-crew-sec .gsev-crew > * { flex: 0 0 62% !important; scroll-snap-align: start; } } /* An event whose tickets can't be bought now says so, in place of its price. */ .byk-ev__status { display: inline-block; width: fit-content; margin: 2px 0 0; padding: 4px 8px; border: 1px solid var(--c-accent-text); color: var(--c-accent-text); font: 700 11px/1 var(--byk-mono); letter-spacing: 0.08em; text-transform: uppercase; } .byk-reel__none { display: block; aspect-ratio: 16 / 9; background: color-mix(in srgb, var(--c-accent) 25%, transparent); } /* Phones with three or more events: short rows, so a long list isn't a long scroll. */ @media (max-width: 600px) { .byk-finder__list--many { gap: 16px; } .byk-finder__list--many .byk-ev a { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 14px; row-gap: 3px; align-content: start; } .byk-finder__list--many .byk-ev img { grid-row: 1 / span 5; aspect-ratio: 1; margin: 0; } .byk-finder__list--many .byk-ev a > span, .byk-finder__list--many .byk-ev a > strong { grid-column: 2; } } /* --------------------------------------------------------------------------- 0.5.0 --------------------------------------------------------------------------- */ /* The Yard family: bigger photos (a wider row and taller pictures). */ @media (min-width: 761px) { body .gsevt-crew-sec .gsev-crew { width: min(calc(100vw - 2 * var(--gsevt-gutter)), 1376px); margin-left: 50% !important; translate: -50% 0; } body .gsevt-crew-sec .gsev-crew__photo { aspect-ratio: 3 / 4; } } @media (max-width: 760px) { body .gsevt-crew-sec .gsev-crew > * { flex-basis: 78% !important; } } /* An event: one card (photo, details and tickets joined, no gaps), then the venue, line-up, about and FAQs, as on their first site. Two columns on a computer. */ body .byk-event__wrap { display: grid; gap: 28px; align-items: start; padding-block: 128px var(--byk-space) !important; } body .byk-event__wrap > * { margin: 0 !important; } @media (min-width: 1000px) { body .byk-event__wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; } body .byk-event__card { position: sticky; top: 110px; } } body .byk-event__card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--c-line); border-radius: 28px; background: var(--c-surface); } body .byk-event__card > * { margin: 0 !important; } body .byk-event__photo { aspect-ratio: 16 / 10; } .byk-event__photo img { width: 100%; height: 100%; object-fit: cover; } body .byk-event__facts { padding: 24px 26px 4px; } body .byk-event__facts > * { margin: 0 !important; } body .byk-event__title { font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem); line-height: 0.95; } body .byk-event__facts .gsevt-event-facts { margin-top: 18px !important; } /* The tickets carry on in the same card, with a line between. */ body .byk-event__card .gsev-tickets { padding: 22px 26px 26px; border: 0; border-top: 1px solid var(--c-line); border-radius: 0; background: none; } .byk-event__facts .gsev-countdown { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-width: 420px; } .byk-event__facts .gsev-countdown > * { min-width: 0 !important; margin: 0 !important; } @media (max-width: 600px) { body .byk-event__wrap { padding-top: 100px !important; } body .byk-event__facts, body .byk-event__card .gsev-tickets { padding-inline: 20px; } } body .byk-event__more { display: flex; flex-direction: column; gap: 22px; } body .byk-event__more > * { margin: 0 !important; } body .byk-event__more .gsevt-venue, body .byk-event__more .gsevt-event-lineup, body .byk-event__more .gsevt-event-about, body .byk-event__faqs { padding: 24px 26px; border: 1px solid var(--c-line); border-radius: 24px; background: var(--c-surface); } body .byk-event__faqs > * { margin: 0 !important; } body .byk-event__faqs .gsevt-event-h { margin: 6px 0 10px !important; } .byk-event__faqs .wp-block-details { padding: 14px 0; border-top: 1px solid var(--c-line); } .byk-event__faqs .wp-block-details summary { display: flex; justify-content: space-between; gap: 16px; font-weight: 700; cursor: pointer; list-style: none; } .byk-event__faqs .wp-block-details summary::-webkit-details-marker { display: none; } .byk-event__faqs .wp-block-details summary::after { content: "+"; flex: none; color: var(--c-accent-text); font-size: 1.3em; line-height: 1; } .byk-event__faqs .wp-block-details[open] summary::after { content: "−"; } .byk-event__faqs .wp-block-details p { margin: 10px 0 0; color: var(--c-muted); } /* The footer: centred, on the palm picture (Website look can change it), social icons, then Join the yard. */ body .byk-footer { position: relative; isolation: isolate; background: var(--c-paper) var(--byk-footer-bg, url("assets/images/background-footer-palms.jpg")) center / cover no-repeat; } .byk-footer::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(18 6 32 / 0.92) 0%, rgb(18 6 32 / 0.72) 45%, rgb(18 6 32 / 0.92) 100%); } body .byk-footer__main { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } body .byk-footer__main > * { margin: 0 !important; } body .byk-footer .gsevt-footer__contact a { color: var(--c-accent-text); font-family: var(--byk-mono); } body .byk-social { gap: 12px !important; } body .byk-social .wp-social-link { margin: 0 !important; border: 1px solid color-mix(in srgb, var(--c-ink) 30%, transparent); border-radius: 50%; background: transparent !important; color: var(--c-ink) !important; transition: border-color 0.2s, color 0.2s; } body .byk-social .wp-social-link a { display: grid; place-items: center; width: 48px; height: 48px; padding: 0 !important; } body .byk-social .wp-social-link svg { width: 22px; height: 22px; } body .byk-social .wp-social-link:hover { border-color: var(--c-accent); color: var(--c-accent-text) !important; transform: none; } body .byk-footer .gsevt-footer__bar { justify-content: center !important; text-align: center; } /* Join the yard. */ .byk-join { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(100%, 440px); } .byk-join > * { margin: 0; } .byk-join__title { font: 700 13px/1 var(--byk-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent-text); } .byk-join__row { display: flex; width: 100%; padding: 4px; border: 1px solid var(--c-line2); border-radius: 999px; background: rgb(18 6 32 / 0.6); } .byk-join__row:focus-within { border-color: var(--c-accent); } .byk-join input[type="email"] { flex: 1; min-width: 0; padding: 10px 16px; border: 0; background: transparent; color: var(--c-ink); font: inherit; outline: none; } .byk-join input[type="email"]::placeholder { color: var(--c-muted); } .byk-join button { flex: none; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--c-accent); color: var(--c-on-accent); font: 700 14px/1 var(--byk-mono); cursor: pointer; } .byk-join button:hover { background: color-mix(in srgb, var(--c-accent) 85%, #fff); } .byk-join button:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; } .byk-join__note { font-size: 13px; color: var(--c-muted); } .byk-join__said { font-weight: 700; color: var(--c-ink); } .byk-join__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Earn: cards as on their first site. */ .byk-site .gsev-earn--cards .gsev-points__cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; } .byk-site .gsev-earn--cards .gsev-points__card { gap: 14px; padding: 22px 22px 24px; border: 1px solid var(--c-line); border-radius: 18px; background: var(--c-surface); } .byk-site .gsev-earn--cards .gsev-points__platform { color: var(--c-accent-text); font-family: var(--byk-mono); font-weight: 700; } .byk-site .gsev-earn--cards h4 { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; line-height: 1.05; text-transform: uppercase; color: var(--c-ink); } .byk-site .gsev-earn--cards .gsev-points__worth { border-top-color: var(--c-line); padding-top: 14px; } .byk-site .gsev-earn--cards .gsev-points__plus { font-family: var(--f-display); font-weight: 400; font-size: 2.5rem; color: var(--c-accent-text); letter-spacing: 0; } .byk-site .gsev-earn--cards .gsev-points__often { font-family: var(--byk-mono); color: var(--c-muted); opacity: 1; } .byk-site .gsev-earn--cards .gsev-points__buttons a { border-radius: 4px; font: 700 12px/1.2 var(--byk-mono); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; } .byk-site .gsev-earn--cards .gsev-points__open { border: 1px solid var(--c-line2); background: transparent; color: var(--c-ink); } .byk-site .gsev-earn--cards .gsev-points__open:hover { border-color: var(--c-accent); } .byk-site .gsev-earn--cards .gsev-points__did { margin: 0; background: var(--c-accent); color: var(--c-on-accent); } /* Purple white (a section's Styles): the pale purple of the Book Bykonz panel, with dark words. */ body .is-style-byk-purple-white, body :is(.byk-band, .byk-nextband).is-style-byk-purple-white { --c-ink: var(--wp--preset--color--on-flip); --c-muted: var(--wp--preset--color--muted-flip); --c-accent-text: var(--wp--preset--color--accent-flip); --c-paper: #F6F1FB; --c-surface: #F6F1FB; --c-line: rgb(26 10 46 / 0.14); --c-line2: rgb(26 10 46 / 0.28); --t: var(--c-ink); --tm: var(--c-muted); --ta: var(--c-accent-text); --ln: var(--c-line); background-color: var(--wp--preset--color--flip); color: var(--c-ink); } .is-style-byk-purple-white :is(h1, h2, h3, h4, p, li) { color: inherit; } .is-style-byk-purple-white .is-style-eyebrow { color: var(--c-accent-text); } .is-style-byk-purple-white :is(p, li):not(.is-style-eyebrow) { color: var(--c-muted); } .is-style-byk-purple-white :is(h1, h2, h3, h4), .is-style-byk-purple-white strong { color: var(--c-ink); } /* Contact: the two choices the same size, side by side, and set apart from the form under them. */ body .byk-contact__card > .byk-tabs { margin-bottom: 8px !important; padding-bottom: 24px; border-bottom: 1px solid var(--c-line); } .byk-tabs-on .byk-tabs { display: grid; grid-template-columns: 1fr 1fr; } .byk-tabs button { justify-content: center; min-height: 76px; } @media (max-width: 420px) { .byk-tabs button { padding: 12px 14px; } .byk-tabs button span { font-size: 12px; } } /* Legal pages (inc/legal.php): document headings. */ body.byk-legal .wp-block-post-content h2 { margin: 2em 0 0.5em !important; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.05; } body.byk-legal .wp-block-post-content :is(p, li) { color: var(--c-muted); } body.byk-legal .wp-block-post-content strong { color: var(--c-ink); } /* Space between sections on phones, when Website look sets it apart from computers. */ @media (max-width: 760px) { body.byk-site.byk-space-phone-tight { --byk-space: 28px; } body.byk-site.byk-space-phone-standard { --byk-space: 44px; } body.byk-site.byk-space-phone-roomy { --byk-space: 64px; } } /* Phones: two albums to a row (Home and Gallery), and more room between the two moods. */ @media (max-width: 560px) { body.byk-site .byk-photos.gsev-albums:not(.gsev-albums--one), body.byk-site .gsevt-albums.gsev-albums:not(.gsev-albums--one) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px 12px; } body.byk-site .byk-photos .gsev-album__body { gap: 6px !important; padding-top: 12px !important; } body.byk-site .byk-photos:not(.gsev-albums--one) :is(.gsev-album__title, .gsev-album__meta) { font-size: 0.8125rem !important; } body .gsevt-moods__grid { gap: 36px; } body.byk-site .gsevt-albums:not(.gsev-albums--one) .gsev-album__title { font-size: 1.125rem !important; line-height: 1.05; } body.byk-site .gsevt-albums:not(.gsev-albums--one) .gsev-album__meta { font-size: 0.6875rem !important; letter-spacing: 0.06em; } } /* Next up on the home page: the next event's card, as on the What's on page, then See all events. */ body .byk-nextup .byk-feature { margin-top: 28px; } body .byk-nextup__more { margin-top: 28px !important; } /* Home: About, Press play, Community, FAQs (as on their first site). */ body .byk-home-about .byk-story__photo { aspect-ratio: 4 / 5; max-height: 620px; } .byk-home-about .byk-story__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; } body .byk-home-play .byk-video-card { max-width: 980px; margin: 28px auto 0 !important; } body .byk-home-play__more { margin-top: 24px !important; } body .byk-community { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; margin-top: 32px !important; } body .byk-community > * { margin: 0 !important; } .byk-community__photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 4px; } body .byk-community__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } .byk-card__tag { font: 700 12px/1.4 var(--byk-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent-text) !important; } @media (max-width: 860px) { body .byk-community { grid-template-columns: minmax(0, 1fr); } .byk-community__photo img { min-height: 0; aspect-ratio: 16 / 10; } } .byk-card__go a { color: var(--c-accent-text); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } .byk-card__go a::after { content: " ↓"; } /* --------------------------------------------------------------------------- 0.6.0 --------------------------------------------------------------------------- */ /* The two moods: a thin dark-gold edge (as on Next events), the whole card goes to the gallery, and the heading on one line on phones. */ body .gsevt-moods .gsevt-mood { border: 1px solid color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); } .gsevt-moods .gsevt-mood__title a::after { content: ""; position: absolute; inset: 0; z-index: 3; } .gsevt-moods .gsevt-mood:focus-within { outline: 2px solid var(--c-accent); outline-offset: 3px; } @media (max-width: 600px) { body .gsevt-moods .gsevt-h2 { white-space: nowrap; font-size: min(clamp(2.75rem, 1.6rem + 3vw, 4rem), 9.4vw) !important; } body .gsevt-moods .gsevt-h2 br { display: none; } } /* Sliding words: the collabs band and After the yard. */ body .byk-marquee-band { margin: 0 !important; padding: clamp(22px, 3vw, 36px) 0 !important; overflow: hidden; border-block: 1px solid color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); background: var(--c-paper); } body .byk-marquee { margin: 0 !important; overflow: hidden; white-space: nowrap; font-family: var(--f-display); font-weight: 400; text-transform: uppercase; line-height: 1; } .byk-marquee-band .byk-marquee { font-size: clamp(2.25rem, 1.4rem + 3.5vw, 4.5rem); color: var(--c-accent-text); } body .byk-marquee--title { font-size: clamp(3rem, 1.8rem + 5vw, 6.5rem); color: var(--c-ink); margin-bottom: 28px !important; } .byk-marquee__track { display: inline-flex; animation: byk-slide-words 40s linear infinite; } .byk-marquee--title .byk-marquee__track { animation-duration: 28s; } .byk-marquee__item { flex: none; padding-right: 0.5em; } .byk-marquee__item::after { content: "✦"; padding-left: 0.5em; font-size: 0.5em; vertical-align: middle; color: var(--c-accent-text); } @keyframes byk-slide-words { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .byk-marquee__track { animation: none; } } /* Their own clip in the video card. */ .byk-video-card__frame .byk-video-card__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .byk-video-card.has-clip .byk-video-card__play { opacity: 0.85; } /* The footer's links fold behind the arrow beside the copyright line. */ body .byk-footer__line { gap: 10px; align-items: center; } body .byk-footer__line > * { margin: 0 !important; } .byk-footer__more { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid color-mix(in srgb, var(--c-ink) 30%, transparent); border-radius: 50%; background: transparent; color: var(--c-ink); cursor: pointer; } .byk-footer__more:hover { border-color: var(--c-accent); color: var(--c-accent-text); } .byk-footer__more svg { transition: transform 0.2s ease; } .byk-footer__more[aria-expanded="true"] svg { transform: rotate(180deg); } body .gsevt-footer__legal[hidden] { display: none !important; } body .byk-footer .gsevt-footer__bar { flex-direction: column; align-items: center; } /* An event whose tickets are sold on another website: the button to it, in the ticket box's place. */ body .byk-event__card .byk-elsewhere { display: flex; flex-direction: column; gap: 12px; padding: 22px 26px 26px; border-top: 1px solid var(--c-line); } body .byk-elsewhere > * { margin: 0 !important; } .byk-elsewhere p:not(:last-child) { color: var(--c-muted); } /* --------------------------------------------------------------------------- 0.8.0 --------------------------------------------------------------------------- */ /* The photo beside the story (Home, About, Earn) and the album photos: the thin dark-gold edge the mood cards have. */ .byk-story__photo img, body .gsevt-album-photos .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { border: 1px solid color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); } /* The photo beside the story also has a gold frame a little way out from it. */ body .byk-story__photo { padding: 14px; } .byk-story__photo img { outline: 1px solid color-mix(in srgb, var(--c-accent) 70%, transparent); outline-offset: 12px; } /* --------------------------------------------------------------------------- 0.8.1 --------------------------------------------------------------------------- */ /* The Yard family on a computer: one row (four in view, the next peeking in) that scrolls sideways, with arrows above it on the right. */ @media (min-width: 761px) { body .gsevt-crew-sec .gsev-crew { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .gsevt-crew-sec .gsev-crew::-webkit-scrollbar { display: none; } body .gsevt-crew-sec .gsev-crew > * { flex: 0 0 calc((100% - 60px) / 4.25) !important; scroll-snap-align: start; } body .gsevt-crew-sec .byk-crew-arrows { width: min(calc(100vw - 2 * var(--gsevt-gutter)), 1376px); margin: 0 0 14px 50% !important; translate: -50% 0; } } /* Four or fewer fit without a peek. */ @media (min-width: 1001px) { body .gsevt-crew-sec .gsev-crew:not(:has(> :nth-child(5))) > * { flex-basis: calc((100% - 60px) / 4) !important; } } @media (min-width: 761px) and (max-width: 1000px) { body .gsevt-crew-sec .gsev-crew > * { flex-basis: calc((100% - 20px) / 2.3) !important; } } body .gsevt-crew-sec .byk-crew-arrows[hidden] { display: none; } @media (max-width: 760px) { body .gsevt-crew-sec .byk-crew-arrows { display: none; } } /* 0.8.2: the event card gets the dark-gold edge the mood cards have. */ body .byk-event__card { border-color: color-mix(in srgb, var(--c-accent) 45%, var(--c-line)); } /* 0.8.3: on a phone the event card starts just under the floating bar, not a screen-height further down. */ @media (max-width: 600px) { body .byk-event__wrap { padding-top: 0 !important; } }