/* Theme Name: wedbox Theme URI: https://wedboxstudio.com Author: Wedbox Studio Author URI: https://wedboxstudio.com Description: Editorial theme for Wedbox Studio — museum-grade conservation boxes for wedding dresses, made to commission in Cascais. Espresso + parchment + gold, squared corners, hairline rules, no shadows, generous air. Includes the Patterns page template: the paper library grouped by family, every paper shown on a finished box; and a standalone Product post type — photographed pieces with a lightbox and a consultation request, no cart, gathered into a catalogue by the Products page-builder module. Version: 1.10.1 Requires at least: 6.0 Tested up to: 6.9 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: wedbox Tags: editorial, luxury, portfolio, one-column, custom-logo, custom-menu, featured-images, translation-ready */ /* ============================================================ Wedbox Studio — Foundations Ported from the Wedbox Studio design system (colors_and_type.css). Fonts (Cormorant Garamond + Montserrat) are enqueued in functions.php, not @imported, so WordPress controls the load order. ============================================================ */ :root { /* ---------- COLORS ---------- */ /* Dark — the brand's ground. Header, footer, feature bands. */ --color-espresso: #332c24; --color-espresso-deep: #251f19; --color-bark: #4a4137; /* Tan — the logo colour, and the only accent. Wordmark, rules, small emphasis. #b8a98a is taken from the logo files and is correct on espresso (6.0:1). On parchment it is 1.9:1, so light grounds use the darker tints below — same hue, enough contrast to read. */ --color-gold: #b8a98a; --color-gold-soft: #cfc4aa; --color-gold-deep: #8f8264; /* The tan for TEXT on light grounds, at any size (5.4:1 on linen). The logo tan and gold-deep are both too light to read on parchment — gold-deep is for hairline rules and borders on light, never for type. */ --color-gold-ink: #6b614a; /* Light — the page. */ --color-parchment: #fbf9f5; --color-linen: #f4f0e8; --color-greige: #e8e3d9; --color-ivory: #ffffff; /* Lines */ --color-hairline: #ded7ca; --color-hairline-dark: #443c32; /* Text on light */ --color-ink: #2b251e; --color-body: #554e45; --color-muted: #8b8377; /* --color-muted is 3.29:1 on linen — legal for 16px+ prose only. Any uppercase 11–13px label on a light ground uses --color-label (5.4:1 on linen). */ --color-label: #656055; /* Text on dark */ --color-on-dark: #f4f0e8; --color-on-dark-soft: #b3aa9c; /* Semantic — used almost never; forms only. */ --color-success: #6b7d5a; --color-error: #9c4a3f; /* ---------- TYPOGRAPHY ---------- */ --font-display: "Cormorant Garamond", Garamond, "Times New Roman", serif; --font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Display — Cormorant, weight 300/400 only. Never bold. */ --type-display-xl-size: 88px; --type-display-xl-lh: 1.02; --type-display-xl-track: -2px; --type-display-lg-size: 64px; --type-display-lg-lh: 1.06; --type-display-lg-track: -1.4px; --type-display-md-size: 44px; --type-display-md-lh: 1.12; --type-display-md-track: -0.8px; --type-display-sm-size: 32px; --type-display-sm-lh: 1.20; --type-display-sm-track: -0.4px; --type-serif-lead-size: 24px; --type-serif-lead-lh: 1.45; --type-serif-lead-track: -0.2px; /* Body — Montserrat. Its x-height runs ~8% larger than Jost at the same px, so prose sizes come down a step and leading opens up to compensate. */ --type-title-lg-size: 19px; --type-title-lg-lh: 1.4; --type-title-md-size: 16px; --type-title-md-lh: 1.5; --type-body-md-size: 15px; --type-body-md-lh: 1.75; --type-body-sm-size: 14px; --type-body-sm-lh: 1.75; --type-caption-size: 12px; --type-caption-lh: 1.6; /* Label — uppercase, widely tracked. The system's signature micro-type. */ --type-label-size: 11px; --type-label-lh: 1.4; --type-label-track: 1.6px; --type-label-lg-size: 13px; --type-label-lg-lh: 1.4; --type-label-lg-track: 2px; /* ---------- SPACING (4px base) ---------- */ --space-xxs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-xxl: 64px; --space-section: 120px; /* ---------- RADII — squared. Nothing is rounded but tags. ---------- */ --radius-none: 0; --radius-xs: 2px; --radius-pill: 9999px; /* Layout */ --container-max: 1240px; --gutter: 48px; } /* ============================================================ Base — warm ground, editorial type, no shadows anywhere. ============================================================ */ /* Every height and width in this system means the rendered box, borders included. Without this, bordered inputs render 2px over spec. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--color-parchment); color: var(--color-body); font-family: var(--font-body); font-size: var(--type-body-md-size); font-weight: 300; line-height: var(--type-body-md-lh); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 300; color: var(--color-ink); margin: 0; } h1 { font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-lh); letter-spacing: var(--type-display-xl-track); } h2 { font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-lh); letter-spacing: var(--type-display-lg-track); } h3 { font-size: var(--type-display-md-size); line-height: var(--type-display-md-lh); letter-spacing: var(--type-display-md-track); } h4 { font-size: var(--type-display-sm-size); line-height: var(--type-display-sm-lh); letter-spacing: var(--type-display-sm-track); } p, li { color: var(--color-body); font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); } a { color: var(--color-gold-ink); text-decoration: none; } a:hover { color: var(--color-ink); } a:active { text-decoration: underline; } :focus-visible { outline: 2px solid var(--color-gold-deep); outline-offset: 3px; } /* ---------- Type utilities ---------- */ .t-display-xl { font-family: var(--font-display); font-weight: 300; font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-lh); letter-spacing: var(--type-display-xl-track); color: var(--color-ink); } .t-display-lg { font-family: var(--font-display); font-weight: 300; font-size: var(--type-display-lg-size); line-height: var(--type-display-lg-lh); letter-spacing: var(--type-display-lg-track); color: var(--color-ink); } .t-display-md { font-family: var(--font-display); font-weight: 300; font-size: var(--type-display-md-size); line-height: var(--type-display-md-lh); letter-spacing: var(--type-display-md-track); color: var(--color-ink); } .t-display-sm { font-family: var(--font-display); font-weight: 400; font-size: var(--type-display-sm-size); line-height: var(--type-display-sm-lh); letter-spacing: var(--type-display-sm-track); color: var(--color-ink); } .t-serif-lead { font-family: var(--font-display); font-weight: 300; font-size: var(--type-serif-lead-size); line-height: var(--type-serif-lead-lh); letter-spacing: var(--type-serif-lead-track); color: var(--color-body); } .t-title-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--type-title-lg-size); line-height: var(--type-title-lg-lh); color: var(--color-ink); } .t-title-md { font-family: var(--font-body); font-weight: 400; font-size: var(--type-title-md-size); line-height: var(--type-title-md-lh); color: var(--color-ink); } .t-body-md { font-family: var(--font-body); font-weight: 300; font-size: var(--type-body-md-size); line-height: var(--type-body-md-lh); color: var(--color-body); } .t-body-sm { font-family: var(--font-body); font-weight: 300; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--color-body); } .t-caption { font-family: var(--font-body); font-weight: 300; font-size: var(--type-caption-size); line-height: var(--type-caption-lh); color: var(--color-muted); } .t-label { font-family: var(--font-body); font-weight: 400; font-size: var(--type-label-size); line-height: var(--type-label-lh); letter-spacing: var(--type-label-track); text-transform: uppercase; color: var(--color-label); } .t-label-lg { font-family: var(--font-body); font-weight: 400; font-size: var(--type-label-lg-size); line-height: var(--type-label-lg-lh); letter-spacing: var(--type-label-lg-track); text-transform: uppercase; color: var(--color-gold-ink); } /* Labels change colour, never size, on a dark ground. */ .wb-on-dark .t-label { color: var(--color-on-dark-soft); } .wb-on-dark .t-label-lg { color: var(--color-gold); } .wb-on-dark h1, .wb-on-dark h2, .wb-on-dark h3, .wb-on-dark h4 { color: var(--color-on-dark); } .wb-on-dark p { color: var(--color-on-dark-soft); } /* ---------- Layout ---------- */ .wb-container { max-width: var(--container-max); margin: 0 auto; } .wb-section { padding: var(--space-section) var(--gutter) 0; } .wb-section--flush { padding-top: 0; } .wb-section--close { padding-bottom: var(--space-section); } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: var(--gutter); top: var(--space-sm); z-index: 100; background: var(--color-linen); padding: var(--space-sm) var(--space-md); } /* ============================================================ Button — squared, uppercase, widely tracked. Never rounded. Ported from components/Button. ============================================================ */ .wb-btn { font-family: var(--font-body); font-weight: 400; text-transform: uppercase; border-radius: var(--radius-none); cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; transition: background 200ms ease-out, color 200ms ease-out; height: 52px; padding: 0 32px; font-size: 11px; letter-spacing: 1.6px; text-decoration: none; } .wb-btn--sm { height: 40px; padding: 0 20px; font-size: 10px; letter-spacing: 1.4px; } .wb-btn--full { width: 100%; } /* Hover on the light grounds (parchment, linen) moves to tan, not to a darker espresso: espresso → espresso-deep is a 2% step and reads as no feedback at all. gold-ink keeps 5.4:1 against the on-dark label. */ .wb-btn--solid { background: var(--color-espresso); color: var(--color-on-dark); border: 1px solid var(--color-espresso); } .wb-btn--solid:hover { background: var(--color-gold-ink); border-color: var(--color-gold-ink); color: var(--color-on-dark); } .wb-btn--gold { background: var(--color-gold); color: var(--color-espresso-deep); border: 1px solid var(--color-gold); } .wb-btn--gold:hover { background: var(--color-gold-soft); color: var(--color-espresso-deep); } .wb-btn--outline { background: transparent; color: var(--color-ink); border: 1px solid var(--color-ink); } .wb-btn--outline:hover { background: var(--color-gold-ink); border-color: var(--color-gold-ink); color: var(--color-on-dark); } .wb-btn--outline-on-dark { background: transparent; color: var(--color-on-dark); border: 1px solid var(--color-gold); } .wb-btn--outline-on-dark:hover { background: var(--color-gold); color: var(--color-espresso-deep); } .wb-btn--quiet { background: transparent; color: var(--color-gold-ink); border: 1px solid transparent; padding: 0 2px; } .wb-btn--quiet:hover { color: var(--color-ink); } .wb-btn[disabled], .wb-btn--disabled { background: var(--color-greige); color: var(--color-label); border: 1px solid var(--color-greige); cursor: not-allowed; pointer-events: none; } /* ============================================================ Image slot — grounds and guide-border pairs, bound to tokens so a palette change reaches every placeholder. Ported from components/ImageSlot. No tone may equal the band it sits on: the espresso tone therefore grounds on --color-bark, so a slot placed on an espresso band still reads as a panel. ============================================================ */ .wb-slot { position: relative; width: 100%; overflow: hidden; background: var(--wb-slot-bg, var(--color-linen)); border-radius: var(--radius-none); display: flex; flex-direction: column; justify-content: flex-end; } .wb-slot--ivory { --wb-slot-bg: var(--color-ivory); --wb-slot-guide: var(--color-hairline); } .wb-slot--linen { --wb-slot-bg: var(--color-linen); --wb-slot-guide: var(--color-gold-deep); } .wb-slot--greige { --wb-slot-bg: var(--color-greige); --wb-slot-guide: var(--color-gold-deep); } .wb-slot--silk { --wb-slot-bg: var(--color-linen); --wb-slot-guide: var(--color-gold); } .wb-slot--espresso { --wb-slot-bg: var(--color-bark); --wb-slot-guide: var(--color-gold); } .wb-slot--bark { --wb-slot-bg: var(--color-espresso-deep); --wb-slot-guide: var(--color-gold-soft); } .wb-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .wb-slot-guide { position: absolute; inset: 14px; border: 1px solid var(--wb-slot-guide); opacity: 0.35; pointer-events: none; } .wb-slot-name { position: absolute; top: 22px; left: 24px; font-family: var(--font-body); font-weight: 400; font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--color-label); } .wb-slot--espresso .wb-slot-name, .wb-slot--bark .wb-slot-name { color: var(--color-on-dark-soft); } /* ============================================================ Pattern card — a single paper in the library. Always shown ON a box, never as a flat swatch, so the pattern reads as an object. Ported from components/PatternCard. ============================================================ */ .wb-pattern-card { margin: 0; display: flex; flex-direction: column; } .wb-pattern-card-media { position: relative; transition: opacity 200ms ease-out; } .wb-pattern-card:hover .wb-pattern-card-media { opacity: 0.92; } .wb-pattern-card figcaption { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; } .wb-pattern-card-name { font-family: var(--font-display); font-weight: 300; font-size: 26px; line-height: 1.2; letter-spacing: -0.4px; color: var(--color-ink); margin: 0; } .wb-pattern-card-note { font-family: var(--font-body); font-weight: 300; font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); color: var(--color-body); margin: 0; } .wb-pattern-card-ribbon { font-family: var(--font-body); font-weight: 300; font-size: 12px; line-height: 1.6; color: var(--color-label); margin-top: 2px; } .wb-on-dark .wb-pattern-card-name { color: var(--color-on-dark); } .wb-on-dark .wb-pattern-card-note, .wb-on-dark .wb-pattern-card-ribbon { color: var(--color-on-dark-soft); } .wb-pattern-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; } /* ============================================================ Masthead + primary nav ============================================================ */ .wb-masthead { background: var(--color-espresso); padding: var(--space-lg) var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); } /* The mark always sits hard left: margin-right:auto holds it there even if the masthead ever gains a third child. Heights come from Customize → Site Identity. */ .wb-masthead .custom-logo-link, .wb-masthead-logo { display: inline-flex; align-items: center; margin-right: auto; } .wb-masthead img { height: var(--wb-logo-height, 52px); width: auto; max-width: 100%; display: block; } .wb-masthead-place { font-family: var(--font-body); font-size: var(--type-label-size); letter-spacing: var(--type-label-track); text-transform: uppercase; color: var(--color-on-dark-soft); } .wb-nav { /* espresso-deep, at the opacity set in Customize → Wedbox: Brand & contact. The blur that keeps the links readable under 100% is printed in wp_head. */ background: rgba(37, 31, 25, var(--wb-nav-opacity, 1)); padding: 0 var(--gutter); min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); position: sticky; top: 0; z-index: 10; } .wb-nav-menu { display: flex; gap: 30px; flex-shrink: 0; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; } .wb-nav-menu a { font-family: var(--font-body); font-weight: 400; font-size: var(--type-label-size); letter-spacing: var(--type-label-track); text-transform: uppercase; white-space: nowrap; color: var(--color-on-dark); text-decoration: none; } .wb-nav-menu a:hover { color: var(--color-gold); } .wb-nav-menu .current-menu-item > a, .wb-nav-menu .current_page_item > a, .wb-nav-menu .wb-nav-current > a { color: var(--color-gold); } .wb-nav-toggle { display: none; background: transparent; border: 1px solid var(--color-gold); color: var(--color-on-dark); height: 40px; padding: 0 16px; cursor: pointer; font-family: var(--font-body); font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; } /* ============================================================ Patterns page ============================================================ */ .wb-patterns-hero { padding: 96px var(--gutter) 0; } .wb-breadcrumb { margin-bottom: 32px; } .wb-breadcrumb, .wb-breadcrumb a { color: var(--color-label); } .wb-patterns-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; } .wb-patterns-hero .t-label-lg { display: block; margin-bottom: 28px; } .wb-patterns-title { font-size: 72px; line-height: 1.04; letter-spacing: -1.6px; } .wb-patterns-lead { margin: 0; } .wb-summary { padding: var(--space-xxl) var(--gutter) 0; } .wb-summary-bar { border-top: 1px solid var(--color-hairline); border-bottom: 1px solid var(--color-hairline); padding: 28px 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); flex-wrap: wrap; } .wb-summary-counts { display: flex; gap: var(--space-xl); flex-wrap: wrap; margin: 0; padding: 0; list-style: none; } .wb-summary-counts li { white-space: nowrap; } .wb-summary-counts .wb-is-current { color: var(--color-ink); } .wb-family-head { display: grid; grid-template-columns: 1fr 2fr; gap: 80px; align-items: start; margin-bottom: 56px; } .wb-family-head .t-label-lg { display: block; margin-bottom: 20px; } .wb-family-intro { margin: 0; max-width: 560px; } .wb-family--dark { background: var(--color-espresso); padding: var(--space-section) var(--gutter); margin-top: var(--space-section); } .wb-family--dark .wb-pattern-grid { gap: 24px; } .wb-closing { padding: var(--space-section) var(--gutter); } .wb-closing-panel { background: var(--color-linen); padding: 80px var(--space-xxl); display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .wb-closing-panel .t-label { display: block; margin-bottom: var(--space-lg); } .wb-closing-panel p { margin: 0 0 var(--space-lg); } .wb-closing-panel p:last-of-type { margin-bottom: 32px; } /* ============================================================ Footer ============================================================ */ .wb-footer { background: var(--color-espresso-deep); padding: 96px var(--gutter) var(--space-xl); position: relative; overflow: hidden; } /* Brand watermark — only printed when an image is set in Customize → Wedbox: Footer, which is where --wb-footer-watermark comes from. */ .wb-footer::before { content: ""; position: absolute; right: -80px; bottom: -110px; width: 480px; height: 480px; background-image: var(--wb-footer-watermark, none); background-repeat: no-repeat; background-position: center; background-size: contain; opacity: var(--wb-footer-watermark-opacity, 0); pointer-events: none; } .wb-footer .wb-container { position: relative; } .wb-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-xxl); padding-bottom: var(--space-xxl); border-bottom: 1px solid var(--color-hairline-dark); } .wb-footer img { height: var(--wb-footer-logo-height, 44px); width: auto; max-width: 100%; display: block; } .wb-footer p { color: var(--color-on-dark-soft); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh); margin: 0; } .wb-footer-blurb { margin-top: 22px !important; max-width: 320px; } .wb-footer-head { font-family: var(--font-display); font-weight: 300; font-size: var(--type-serif-lead-size); line-height: 1.2; color: var(--color-gold); margin-bottom: 20px; } .wb-footer-menu { display: flex; flex-direction: column; gap: 13px; list-style: none; margin: 0; padding: 0; } /* The button shares the link's selector rather than inheriting from the li: a consultation trigger with no contact page behind it is a