:root { --font-cormorant-garamond: 'Cormorant Garamond'; --font-engravers-gothic: 'Engravers Gothic'; --font-flavium-serif: 'Flavium Serif'; --font-icons: 'gadabout-icons'; /* TODO: Add theme fonts here */ --theme-color-off-white: #FFFBF5; --theme-color-cream: #FAF7EF; --theme-color-brown: #4B4530; --theme-color-forest-green: #4D5539; /* TODO: Add theme colors here */ } /* Green Background page template — forest-green / off-white flip. Defined once HERE (not style.css) because blocks.css is enqueued on both the front end (enqueue_block_assets) and the editor. The front-end gets the `page-template-page-green-background` class from WordPress core; the editor canvas gets it from editor.js. Two selectors so the rule outweighs the base body color in each context — `body…` on the front end (beats the element-level default) and `.editor-styles-wrapper…` in the editor (beats theme.json's `.editor-styles-wrapper` default). */ body.page-template-page-green-background, .editor-styles-wrapper.page-template-page-green-background { background-color: var(--theme-color-forest-green); color: var(--theme-color-off-white); } /* Front-end-only: editor content isn't wrapped in .entry-content, so this simply doesn't match in the editor (harmless). Only the color needs overriding here — style.css already handles the no-underline + opacity-fade treatment for every .entry-content link. */ body.page-template-page-green-background .entry-content a { color: var(--theme-color-off-white); } /* Buttons (core/button) — the base defaults (Flavium 14px, brown fill, cream text) live in theme.json (styles.blocks.core/button) so they beat core's block-library defaults with the correct cascade and stay overridable per button. Here: the outline-variation delta, smooth color transitions, and an invert-on-hover (filled <-> outline). Every button carries a 2px border (transparent on filled) so the hover border doesn't shift the layout. */ .wp-block-button .wp-block-button__link { /* Every button carries a 2px border (transparent on filled) so the hover border doesn't shift layout. Match the outline variation's reduced padding (core trims 2px to compensate for its border) so filled and outline are the same height side by side: equal padding + equal 2px border. */ /* Top padding runs 2px over the bottom — an optical adjustment that centers the uppercase label, which otherwise sits low in the box. */ padding: calc(0.667em + 2px) 1.333em 0.667em; border: 2px solid transparent; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* Outline variation: transparent fill, brown border + brown text. */ .wp-block-button.is-style-outline .wp-block-button__link { background-color: transparent; border-color: var(--theme-color-brown); color: var(--theme-color-brown); } /* Invert on hover / keyboard focus: filled -> outline look. */ .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible { background-color: transparent; border-color: var(--theme-color-brown); color: var(--theme-color-brown); } /* Invert on hover / keyboard focus: outline -> filled look. */ .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus-visible { background-color: var(--theme-color-brown); border-color: var(--theme-color-brown); color: var(--theme-color-cream); } .entry-content p.is-style-cormorant-garamond-12, .editor-styles-wrapper p.is-style-cormorant-garamond-12 { font-family: var(--font-cormorant-garamond); font-size: 10px; letter-spacing: 1px; } @media screen and (min-width: 576px) { .entry-content p.is-style-cormorant-garamond-12, .editor-styles-wrapper p.is-style-cormorant-garamond-12 { font-family: var(--font-cormorant-garamond); font-size: 12px; letter-spacing: 1px; } } /* Slug stays `-16` for backwards compatibility with paragraphs already saved with this class; the label and the values are 17px. */ .entry-content p.is-style-cormorant-garamond-16, .editor-styles-wrapper p.is-style-cormorant-garamond-16 { font-family: var(--font-cormorant-garamond); font-size: 17px; line-height: 28px; } .entry-content p.is-style-engravers-gothic-13, .editor-styles-wrapper p.is-style-engravers-gothic-13 { font-family: var(--font-engravers-gothic); font-size: 13px; letter-spacing: 1.2px; } .entry-content p.is-style-flavium-serif-10, .editor-styles-wrapper p.is-style-flavium-serif-10 { font-family: var(--font-flavium-serif); font-size: 10px; letter-spacing: 1.2px; } .entry-content p.is-style-flavium-serif-14, .editor-styles-wrapper p.is-style-flavium-serif-14 { font-family: var(--font-flavium-serif); font-size: 14px; letter-spacing: 1.2px; } .entry-content p.is-style-flavium-serif-15, .editor-styles-wrapper p.is-style-flavium-serif-15 { font-family: var(--font-flavium-serif); font-size: 15px; letter-spacing: 1.2px; } .entry-content p.is-style-flavium-serif-16, .editor-styles-wrapper p.is-style-flavium-serif-16 { font-family: var(--font-flavium-serif); font-size: 16px; line-height: 20px; letter-spacing: 1.2px; } .entry-content p.is-style-flavium-serif-20, .editor-styles-wrapper p.is-style-flavium-serif-20 { font-family: var(--font-flavium-serif); font-size: 20px; letter-spacing: 1.2px; } /*---------------------------------------------------------------------------- Project List block (rkl/project-list) + project card Loaded in both the editor and the front end (enqueue_block_assets). The parent carries an `is-ratio-*` class (set in edit() and render.php); the matching rule sets the aspect ratio on every card's media box, so all cards share one ratio. (A class, not a CSS var, so the editor preview updates reactively when the ratio control changes.) ----------------------------------------------------------------------------*/ /* Grid: 1 column on mobile, 2 on desktop. Gap comes from the block's blockGap spacing control (falls back to 32px). */ .rkl-project-list__inner { display: grid; grid-template-columns: 1fr; gap: var(--wp--style--block-gap, 32px); } @media (min-width: 768px) { .rkl-project-list__inner { grid-template-columns: 1fr 1fr; } } /* The whole card links to the single project page. */ .project-card__link { display: block; color: inherit; text-decoration: none; } /* Media box: uniform aspect ratio (from the parent's is-ratio-* class) + cover. */ .project-card__media { aspect-ratio: 5 / 7; /* default / fallback */ overflow: hidden; } .rkl-project-list.is-ratio-5-7 .project-card__media { aspect-ratio: 5 / 7; } .rkl-project-list.is-ratio-2-3 .project-card__media { aspect-ratio: 2 / 3; } .rkl-project-list.is-ratio-1-1 .project-card__media { aspect-ratio: 1 / 1; } .rkl-project-list.is-ratio-3-2 .project-card__media { aspect-ratio: 3 / 2; } .project-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter 0.3s ease; } /* Hover: brighten the image slightly (hover-capable devices only). */ @media (hover: hover) { .project-card__link:hover .project-card__media img { filter: brightness(1.05); } } /* Caption: stacked on mobile; title left / "View Project" right on desktop. Fonts match the flavium-serif-20 and engravers-gothic-13 block styles. */ .project-card__caption { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; } .project-card__title { margin: 0; font-family: var(--font-flavium-serif); font-size: 20px; letter-spacing: 1.2px; text-transform: uppercase; } .project-card__view { font-family: var(--font-engravers-gothic); font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; } @media (min-width: 768px) { .project-card__caption { flex-direction: row; align-items: flex-start; justify-content: space-between; } } /*---------------------------------------------------------------------------- Project Gallery block (rkl/project-gallery) + project image Loaded in both the editor and the front end (enqueue_block_assets). Layout is pure CSS flexbox — no server-side row grouping: - Half images pair via flex-wrap; a lone (unpaired) half centers on its own line via margin-inline:auto. - Full images span the row (flex-basis:100%) and force a wrap. - "Taller neighbor wins": each cropped item is a fixed aspect-ratio box; in a stretched flex row the shorter box stretches to the taller one and its image covers, so mismatched neighbors both display at the taller ratio. Column/row gaps come from the block-spacing control, wired manually (custom flex layout, so --wp--style--block-gap is never defined). Width + ratio are classes (not CSS vars) so the editor preview updates reactively. ----------------------------------------------------------------------------*/ /* Mobile-first: single column, stacked. Row gap only. */ .rkl-project-gallery { display: flex; flex-direction: column; gap: var(--rkl-gallery-row-gap, 32px); } .rkl-project-gallery__item { margin: 0; min-width: 0; } .rkl-project-gallery__img, .rkl-project-gallery__item img { display: block; width: 100%; height: auto; } /* Cropped ratios: fixed box + cover. Natural = no box (intrinsic height). */ .rkl-project-gallery__item.is-ratio-5-7 { aspect-ratio: 5 / 7; } .rkl-project-gallery__item.is-ratio-2-3 { aspect-ratio: 2 / 3; } .rkl-project-gallery__item.is-ratio-1-1 { aspect-ratio: 1 / 1; } .rkl-project-gallery__item.is-ratio-3-2 { aspect-ratio: 3 / 2; } .rkl-project-gallery__item:not(.is-ratio-natural) img { height: 100%; object-fit: cover; } /* Editor empty state: a child with no image yet renders core's MediaPlaceholder. Let it size to its own content instead of being clipped by the aspect-ratio box. (Front-end empty items render nothing, so this never appears there.) */ .rkl-project-gallery__item.is-empty { aspect-ratio: auto; } /* Desktop: flex-wrap grid. */ @media (min-width: 768px) { .rkl-project-gallery { flex-direction: row; flex-wrap: wrap; align-items: stretch; /* taller neighbor stretches the shorter */ gap: var(--rkl-gallery-row-gap, 32px) var(--rkl-gallery-col-gap, 32px); } .rkl-project-gallery__item { box-sizing: border-box; } .rkl-project-gallery__item.is-width-half { flex: 0 1 calc(50% - (var(--rkl-gallery-col-gap, 32px) / 2)); margin-inline: auto; /* centers a lone half on its own line */ } .rkl-project-gallery__item.is-width-full { flex: 0 1 100%; } .rkl-project-gallery__item.is-width-full.is-ratio-natural img { height: auto; } } /*---------------------------------------------------------------------------- Utility classes (added per-block via the editor's "Additional CSS class(es)") ----------------------------------------------------------------------------*/ /* .book-cover — caps an image and pins it to the end of its track on desktop. 782px is WordPress's own mobile/desktop breakpoint, so this flips at the same point the editor switches layouts. */ @media (min-width: 782px) { .book-cover { max-width: 440px; justify-self: end; } }