/* Theme Name: JMe Photo Theme URI: https://github.com/JamieHunter/jme-photo-wordpress Author: Jamie Hunter Author URI: https://jmephotollc.com/ Description: Custom block theme for J.Me Photo LLC. Studio photography on Bainbridge Island. Requires at least: 6.6 Tested up to: 7.1 Requires PHP: 8.0 Version: 0.2.0 License: GPL-2.0-or-later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: jme-photo Tags: block-theme, full-site-editing, photography, one-column, accessibility-ready */ /* * Block themes take their styling from theme.json. * Only rules that genuinely cannot be expressed as a token belong here. */ /* Archivo is a variable font with a width axis. theme.json has no font-stretch property, so the expanded display setting lives here. h1 and h2 only — the width axis is a DISPLAY gesture. Applied at card scale it overflows narrow columns and breaks words mid-syllable. post-title inherits correctly: level 1 on singles, level 3 in grids. */ h1, h2, .wp-block-site-title { font-stretch: 118%; } /* Card titles should wrap between words, never inside them. */ .wp-block-post-template .wp-block-post-title { overflow-wrap: normal; text-wrap: pretty; } /* The grease-pencil mark is never a UI color — but it IS the focus ring, which is the one place a rare, high-attention color is exactly right. */ :where(a, button, input, select, textarea, .wp-element-button):focus-visible { outline: 2px solid var(--wp--preset--color--mark); outline-offset: 3px; } /* Links on inverted (ink) surfaces. theme.json defines a single global link color. Accent teal is 7.8:1 on canvas and 2:1 on ink — correct on paper, invisible on the footer. There is no conditional in theme.json, so the inverted case lives here and covers every dark section we ever add. */ .has-ink-background-color :where(a:not(.wp-element-button)) { color: var(--wp--preset--color--canvas); text-decoration-thickness: 1px; text-underline-offset: 3px; } .has-ink-background-color :where(a:not(.wp-element-button)):hover { color: #FFFFFF; text-decoration-thickness: 2px; } /* --------------------------------------------------------------- Plugin blocks that opt out of the theme layout. Otter's advanced-columns sets `max-width: none` and stretches to the viewport — measured at 1557px against our 704px content width. Neve FSE constrained these; we did not, so the theme switch was a layout regression on any page using them. Deliberately NOT scoped to a parent. Malformed or orphaned block markup can leave one of these as a direct child of , which is exactly the case that needs catching — a descendant selector would miss it. Core's constrained-layout rule uses :where() and so loses to Otter's plain class selector. Two :not()s give us the weight to win without !important. Blocks that explicitly asked to be wide or full are left alone. --------------------------------------------------------------- */ .wp-block-themeisle-blocks-advanced-columns:not(.alignwide):not(.alignfull), [class*="wp-block-caxton"]:not(.alignwide):not(.alignfull) { max-width: var(--wp--style--global--content-size); margin-left: auto; margin-right: auto; } /* Inner wrappers inherit whatever we just set. */ :where(.wp-block-themeisle-blocks-advanced-columns) .innerblocks-wrap { max-width: 100%; } /* --------------------------------------------------------------- Price ladder — floor / typical / ceiling. On a core/columns block add class `jme-price-ladder`, then apply block styles to the columns: "Recommended (circled)" -> is-style-select "Top tier (framed)" -> is-style-topmat All three are real products and all three look it — the top tier is the highest margin and must not read as an afterthought. The difference is DEGREE, not kind. The circle is the RECOMMENDATION. The dark frame is the TEMPTATION. Two jobs, two devices; they must not compete. One circle per page — two makes it wallpaper. --------------------------------------------------------------- */ .jme-price-ladder .wp-block-column { position: relative; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--line); border-radius: 4px; padding: var(--wp--preset--spacing--40); box-shadow: 0 1px 3px rgba(26, 24, 21, 0.05); } .jme-price-ladder .wp-block-column > *:first-child { margin-top: 0; } .jme-price-ladder .wp-block-column > *:last-child { margin-bottom: 0; } /* Tier label. */ .jme-price-ladder .wp-block-column h3 { font-family: var(--wp--preset--font-family--mono); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; font-stretch: normal; font-weight: 500; color: var(--wp--preset--color--muted); margin-bottom: var(--wp--preset--spacing--30); } /* The number. Tabular so the three align. */ .jme-price-ladder .wp-block-column .jme-price { font-family: var(--wp--preset--font-family--display); font-stretch: 118%; font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin: 0 0 0.4rem; text-wrap: nowrap; } /* "From" is an annotation, not part of the number. It sits on its own line at label size so the top tier's figure stays as large as its neighbors' — a ladder that shrinks at the top does not climb. */ .jme-price-ladder .wp-block-column .jme-price.is-from { text-wrap: wrap; } .jme-price-ladder .wp-block-column .jme-price .jme-from { display: block; font-family: var(--wp--preset--font-family--mono); font-size: 0.62rem; font-weight: 500; font-stretch: normal; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; margin-bottom: 0.32rem; opacity: 0.72; } /* What is included — the finishing ladder, stated on every card so no tier is defined by what its neighbors lack. */ .jme-price-ladder .wp-block-column .jme-meta { font-family: var(--wp--preset--font-family--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wp--preset--color--muted); margin: 0 0 var(--wp--preset--spacing--30); } /* --- the select: same card, more of everything --- */ .jme-price-ladder .wp-block-column.is-style-select { z-index: 1; border-color: var(--wp--preset--color--muted); box-shadow: 0 6px 30px rgba(26, 24, 21, 0.15), 0 2px 5px rgba(26, 24, 21, 0.08); padding: calc(var(--wp--preset--spacing--40) + 0.85rem) calc(var(--wp--preset--spacing--40) + 0.5rem); margin-block: -0.85rem; } .jme-price-ladder .wp-block-column.is-style-select h3 { color: var(--wp--preset--color--mark); } .jme-price-ladder .wp-block-column.is-style-select::before { content: ""; position: absolute; /* Proportional, not fixed. The ellipse is drawn to the box, so a fixed inset only encircles a card of the proportions it was tuned against — on a squarer or wider card it swings inward and crosses the tier label. Percentages resolve against the card, so the ring clears the corners at any size. Stays inside the 48px column gutter. */ inset: -11% -9%; pointer-events: none; z-index: 3; background: url('data:image/svg+xml;utf8,') no-repeat center / 100% 100%; } /* --- the top tier: a framed print --- */ .jme-price-ladder .wp-block-column.is-style-topmat { border-color: #0E0C0A; color: #E8DCC6; padding: calc(var(--wp--preset--spacing--40) + 0.5rem); /* A lit surface, not a color. Visible enough that you can tell where the light falls; never so much that it reads as a button. */ background: radial-gradient(135% 108% at 76% 4%, rgba(236, 222, 196, 0.20), transparent 60%), radial-gradient(85% 65% at 14% 98%, rgba(38, 79, 83, 0.14), transparent 64%), linear-gradient(163deg, #2C251D 0%, #1E1915 48%, #121010 100%); } /* The mat window — a mounted print, not a border. */ .jme-price-ladder .wp-block-column.is-style-topmat::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(232, 220, 198, 0.32); border-radius: 2px; pointer-events: none; } .jme-price-ladder .wp-block-column.is-style-topmat h3, .jme-price-ladder .wp-block-column.is-style-topmat .jme-meta { color: #9A9284; } .jme-price-ladder .wp-block-column.is-style-topmat .jme-price { color: #E8DCC6; } .jme-price-ladder .wp-block-column.is-style-topmat p:not(.jme-price):not(.jme-meta) { color: #BDB5A6; } @media (max-width: 781px) { .jme-price-ladder .wp-block-column.is-style-select { margin-block: 0; padding: var(--wp--preset--spacing--40); } .jme-price-ladder .wp-block-column.is-style-select::before { inset: -14px -9px; } } /* --------------------------------------------------------------- Image size selection should change what you SEE, not only which file is served. WordPress puts size-thumbnail / size-medium / size-large / size-full on the IMG (and, for core/image, on the figure too) but leaves display width to the container, so picking a smaller size appears to do nothing. The ladder: thumbnail 240 / medium 520 / large = the reading measure / full = the wide track. An explicit alignment always wins, so alignwide and alignfull opt out of all of it. --------------------------------------------------------------- */ :where(.wp-block-image, .wp-block-post-featured-image).size-thumbnail img, .wp-block-post-featured-image img.size-thumbnail { max-width: min(100%, 240px); height: auto; } :where(.wp-block-image, .wp-block-post-featured-image).size-medium img, .wp-block-post-featured-image img.size-medium { max-width: min(100%, 520px); height: auto; } /* Full size opts out of the reading measure and takes the wide track. The width has to go on the WRAPPER, because the constrained layout caps the wrapper at content size and the image can only fill what it is given. Four classes beats the layout rule's one. */ .wp-block-image.size-full:not(.alignwide):not(.alignfull), .wp-block-post-featured-image:has(img.size-full):not(.alignwide):not(.alignfull) { max-width: min(100%, var(--wp--style--global--wide-size)); } .wp-block-image.size-full img, .wp-block-post-featured-image img.size-full { width: 100%; height: auto; }