/*
Theme Name: GeneratePress Child
Theme URI: https://generatepress.com
Template: generatepress
Author: Tom Usborne
Author URI: https://generatepress.com/about
Description: GeneratePress is a lightweight WordPress theme built with a focus on speed and usability. Performance is important to us, which is why a fresh GeneratePress install adds less than 10kb (gzipped) to your page size. We take full advantage of the block editor (Gutenberg), which gives you more control over creating your content. If you use page builders, GeneratePress is the right theme for you. It is completely compatible with all major page builders, including Beaver Builder and Elementor. Thanks to our emphasis on WordPress coding standards, we can boast full compatibility with all well-coded plugins, including WooCommerce. GeneratePress is fully responsive, uses valid HTML/CSS, and is translated into over 25 languages by our amazing community of users. A few of our many features include 60+ color controls, powerful dynamic typography, 5 navigation locations, 5 sidebar layouts, dropdown menus (click or hover), and 9 widget areas. Learn more and check out our powerful premium version at https://generatepress.com
Tags: two-columns,three-columns,one-column,right-sidebar,left-sidebar,footer-widgets,blog,e-commerce,flexible-header,full-width-template,buddypress,custom-header,custom-background,custom-menu,custom-colors,sticky-post,threaded-comments,translation-ready,rtl-language-support,featured-images,theme-options
Version: 3.6.0.1760313678
Updated: 2025-10-13 00:01:17

*/

/* ====== CSS VARIABLES ====== */
:root {
  --vvv-white: #f1ede7;
  --vvv-font-size: 1.77rem; /* 21.2pt ≈ 28.3px */
  --vvv-leading: 1.375; /* 29.15pt over 21.2pt */
  --vvv-letter-spacing: 0.02em;
  --vvv-responsive-font: clamp(0.935rem, 2.125vw, 1.505rem);
}

/* ====== GLOBAL STYLES ====== */
html {
  scroll-behavior: smooth;
}

body {
  color: var(--vvv-white);
  /* warm off-white to match comps */
  font-family:
    'myriad-pro',
    'Myriad Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Oxygen,
    Ubuntu,
    Cantarell,
    'Helvetica Neue',
    Arial,
    sans-serif;
  letter-spacing: var(--vvv-letter-spacing);
}

a {
  color: #d9d3c8;
}

a:hover,
a:focus {
  color: #ffffff;
}

/* ====== BACKGROUND & LAYOUT ====== */
body:before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url('assets/img/vvvide_bg-dark.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* fixed works poorly on iOS; the fixed pseudo helps, but also: */
  transform: translateZ(0);
  /* hint for mobile */
}

/* Ensure theme wrappers are transparent so the fixed background shows through */
.site,
.site-main,
.site-content,
.container,
.grid-container,
.inside-article,
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-page-header,
.site-info,
.footer-widgets,
.site-header,
.main-navigation,
.top-bar {
  background: transparent !important;
}

/* Hide GeneratePress header/nav on VVVIDE template only */
body.page-template-template-vvvide-home-php .site-header,
body.page-template-template-vvvide-home-php #site-navigation,
body.page-template-template-vvvide-home-php .main-navigation,
body.page-template-template-vvvide-home-php .inside-header,
body.page-template-template-vvvide-home-php .header-widget {
  display: none !important;
}

/* ====== LAYOUT CONTAINERS ====== */
.vvv-section {
  max-width: 920px;
  margin: 4rem auto;
  padding: 0 1.25rem;
}

/* ====== HERO SECTION ====== */
.vvv-hero {
  display: grid;
  place-items: center;
  min-height: 100vh; /* push listings below the fold */
  text-align: left;
}

@supports (min-height: 100svh) {
  .vvv-hero {
    min-height: 100svh;
  }
}

.vvv-hero__inner {
  width: min(1100px, 88vw);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 656px;
}

@supports (padding: max(0px)) {
  .vvv-hero__inner {
    padding-bottom: max(3rem, env(safe-area-inset-bottom));
  }
}

.vvv-hero__toprow {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.vvv-hero__title {
  margin: 0;
  font-size: 5rem; /* mobile default */
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
}

.vvv-hero__title a {
  text-decoration: none;
  color: inherit;
}

/* Horizontal rule beneath title bar */
.vvv-hero__rule {
  width: 100%; /* match hero container */
  border: 0;
  border-top: 2px solid var(--vvv-white);
  margin: 0; /* below title */
}

.vvv-hero__subtitle {
  font-size: var(--vvv-responsive-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
  width: 100%; /* match hero container */
  margin: 0.5rem 0 0 0; /* just under rule */
  text-align: right; /* align to rule's right edge */
}

.vvv-hero__issueBig {
  position: relative;
  font-weight: 400;
  line-height: 0.8;
  font-size: 40rem; /* mobile default */
  /* the huge "1" */
  color: rgba(241, 237, 231, 0.9);
  margin: 1.25rem 0 0 0;
  pointer-events: none;
  text-align: center;
  font-family:
    'myriad-pro',
    'Myriad Pro',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Oxygen,
    Ubuntu,
    Cantarell,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

@supports (height: 1svh) {
  .vvv-hero__issueBig {
    font-size: min(70svh, 48rem);
  }
}

.vvv-hero__issueDate {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.9;
  text-align: center;
}

.vvv-hero__issueDate--offset {
  position: relative;
  left: 0.7rem;
}

/* Inline grid wrapper to center date under numeral naturally */
.vvv-issue {
  display: inline-grid;
  justify-items: center;
  row-gap: 0.25rem;
}

.vvv-hero__cta {
  display: inline-block;
  margin-top: 2rem;
  padding: 0.6rem 1rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
  font-size: 0.95rem;
}

/* ====== CATEGORY HEADERS ====== */
.vvv-catrow {
  display: block;
  margin-bottom: 1rem;
}

.vvv-sep {
  border: none;
  border-top: 2px solid var(--vvv-white);
  height: 0;
  margin: 0;
}

.vvv-category__label {
  font-size: var(--vvv-responsive-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.9;
  display: block;
  text-align: right;
  margin-top: 0.4rem;
}

/* ====== LISTINGS ====== */
.vvv-listings {
  display: grid;
  gap: 1.5rem;
}

/* Issue date moved from hero to above first listing rule */
.vvv-listings__issueDate-wrap {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 0;
}

.vvv-listings__issueDate-wrap .vvv-hero__issueDate {
  font-size: var(--vvv-responsive-font);
  font-weight: 400;
  text-align: center;
}

/* Pull first listing up so issue date sits closer to the horizontal rule beneath it */
.vvv-listings__issueDate-wrap + .vvv-listing {
  margin-top: -1.25rem;
  padding-top: 0.25rem;
}

.vvv-listing {
  padding-top: 1.25rem;
}

.vvv-listing__title {
  margin: 0 0 0.25rem 0;
  font-size: var(--vvv-responsive-font);
  font-weight: 400;
}

.vvv-listing__title.vvv-listing__title--second {
  margin-top: 0.75rem !important;
}

.vvv-listing__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem; /* no extra row gap between lines */
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--vvv-responsive-font);
}

.vvv-listing__meta span::before {
  content: '• ';
  color: rgba(255, 255, 255, 0.35);
  margin-right: 0.25rem;
}

.vvv-listing__meta span:first-child::before {
  content: '';
  margin: 0;
}

/* Remove bullet before date */
.vvv-listing__dates::before {
  content: '' !important;
  margin: 0 !important;
}

.vvv-listing__dates {
  flex-basis: 100%;
  margin-top: 0;
}

.vvv-listing__desc {
  margin-top: 0.5rem;
  font-size: var(--vvv-responsive-font);
  line-height: var(--vvv-leading);
  color: rgba(255, 255, 255, 0.92);
}

.vvv-listing__desc p {
  margin: 0.6rem 0;
}

.vvv-listing__credit {
  margin-top: 0.5rem;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
  font-size: inherit;
}

/* ====== ABOUT SECTION ====== */
.vvv-about {
  margin-top: 0;
  padding-top: 12vh; /* start a bit below viewport edge */
  min-height: 100vh; /* treat About as its own screen */
}

.vvv-about h2 {
  font-size: var(--vvv-responsive-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 1rem 0;
}

.vvv-about__text {
  font-size: var(--vvv-responsive-font);
  line-height: var(--vvv-leading);
}

.vvv-about__text p {
  margin: 0.9rem 0;
}

/* ====== RESPONSIVE DESIGN ====== */
/* Simple responsiveness tweaks — keep subtitle, category label, and issue date in sync via --vvv-responsive-font */

/* Tighten margins at the higher layout level */
body.page-template-template-vvvide-home-php .site-content {
  padding: 0.5rem !important;
}

@media (max-width: 640px) {
  body.page-template-template-vvvide-home-php .site-content {
    padding: 0.25rem !important;
  }
}

/* Breakpoint-first sizing for hero title and numeral */
@media (min-width: 390px) {
  .vvv-hero__title {
    font-size: 6.5rem;
  }
}

@media (min-width: 480px) {
  .vvv-hero__title {
    font-size: 7rem;
  }
  .vvv-hero__issueBig {
    font-size: 48rem;
  }
}

@media (min-width: 640px) {
  .vvv-hero__title {
    font-size: 10rem;
  }
}

/* Desktop: constrain content to a centered 676px column */
@media (min-width: 1024px) {
  .vvv-home {
    display: flex;
    flex-direction: column;
    align-items: center; /* center all sections/hero within viewport */
  }
  .vvv-hero__inner {
    width: 676px;
    max-width: 676px;
    margin: 0 auto;
  }
  /* hero title max defined by clamp above */
  .vvv-section {
    width: 676px;
    max-width: 676px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Explicitly center GP wrappers and set a fixed column for this template */
@media (min-width: 1024px) {
  body.page-template-template-vvvide-home-php .site .site-content,
  body.page-template-template-vvvide-home-php .site .content-area,
  body.page-template-template-vvvide-home-php .site .inside-article {
    display: flex;
    justify-content: center;
  }
  body.page-template-template-vvvide-home-php .vvv-home {
    width: 676px;
  }
  body.page-template-template-vvvide-home-php .vvv-hero__inner,
  body.page-template-template-vvvide-home-php .vvv-section {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }
}