/* ============================================================================ Ink & Wash — art direction layer Tokens live in theme.json. This file is the look: watercolor, ink, paper. ========================================================================== */ /* --------------------------------------------------------------------------- 1. SEMANTIC ALIASES theme.json presets are the source of truth. We alias them to short names so the design below reads clearly — and so a category class can reassign them in one place without touching a single rule. ------------------------------------------------------------------------ */ body { --paper: var(--wp--preset--color--paper); --paper-deep: var(--wp--preset--color--paper-deep); --ink: var(--wp--preset--color--ink); --ink-soft: var(--wp--preset--color--ink-soft); --muted: var(--wp--preset--color--muted); --rule: var(--wp--preset--color--rule); --wash-1: var(--wp--preset--color--wash-1); --wash-2: var(--wp--preset--color--wash-2); --wash-3: var(--wp--preset--color--wash-3); --wash-4: var(--wp--preset--color--wash-4); } /* --------------------------------------------------------------------------- 2. CATEGORY TINTING functions.php adds a `palette-{name}` class to based on the post's category. Everything downstream just follows the aliases above. Add your own: define a class here, then map a category slug to it in functions.php (or via the ink_wash_category_palettes filter). ------------------------------------------------------------------------ */ .palette-sakura { --wash-1: var(--wp--preset--color--sakura-1); --wash-2: var(--wp--preset--color--sakura-2); --wash-3: var(--wp--preset--color--sakura-3); --wash-4: var(--wp--preset--color--sakura-4); } .palette-aoi { --wash-1: var(--wp--preset--color--aoi-1); --wash-2: var(--wp--preset--color--aoi-2); --wash-3: var(--wp--preset--color--aoi-3); --wash-4: var(--wp--preset--color--aoi-4); } .palette-yugure { --wash-1: var(--wp--preset--color--yugure-1); --wash-2: var(--wp--preset--color--yugure-2); --wash-3: var(--wp--preset--color--yugure-3); --wash-4: var(--wp--preset--color--yugure-4); } /* --------------------------------------------------------------------------- 3. PAPER ------------------------------------------------------------------------ */ html { overflow-x: clip; } body { -webkit-font-smoothing: antialiased; overflow-x: clip; } body::after { content: ""; position: fixed; inset: 0; z-index: 9; pointer-events: none; opacity: .4; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"); } @media print { body::after { display: none; } } /* --------------------------------------------------------------------------- 4. WATERCOLOR WASHES Decorative only, and always aria-hidden. Drop the "Watercolor wash" pattern into any section; it positions itself behind the content of its parent. ------------------------------------------------------------------------ */ /* The washes must escape their column and run to the edges of the viewport, whatever the content width happens to be. A 100vw box centred on the section does that without depending on alignfull, root padding, or where the section sits in the template. Nothing here clips. Any box that clips will eventually cut a straight line through a wash — that is what a crop is — and no amount of padding the box out reliably avoids it, because section heights change with the content. The viewport is the only edge a wash should ever meet, and `overflow-x: clip` on the root handles that without producing a scrollbar. */ .iw-washes { position: absolute; top: -8rem; bottom: -8rem; left: 50%; width: 100vw; max-width: 100vw; transform: translateX(-50%); z-index: 0; overflow: visible; pointer-events: none; } .iw-wash { position: absolute; mix-blend-mode: multiply; opacity: .58; filter: url(#iw-watercolor); } /* The filter warps the shape outward; without this the SVG root clips it back to the viewBox and you get a straight edge across a "watercolor" bloom. */ .iw-wash svg { display: block; width: 100%; height: 100%; overflow: visible; } /* --- shape ----------------------------------------------------------------- A wide ellipse reads as a pill no matter how hard the filter ripples its edge — the warp changes the outline, not the silhouette. So the SVG is clipped to an irregular polygon FIRST, and the parent's filter warps that. Order matters: clip on the child, filter on the parent. Reversed, the polygon's hard corners survive and the whole effect collapses. Percentages, so one shape serves every wash size. Four variants cycle by position so no two neighbours share a silhouette. -------------------------------------------------------------------------- */ .iw-wash svg { clip-path: polygon(89.7% 49.3%, 82.7% 63.6%, 76.3% 81.0%, 66.6% 88.8%, 45.9% 96.7%, 29.4% 91.3%, 25.7% 74.6%, 12.6% 61.8%, 11.1% 46.4%, 5.4% 30.2%, 21.3% 20.8%, 30.7% 8.4%, 50.4% 1.7%, 66.4% 6.5%, 80.1% 23.7%, 94.3% 31.5%); } .iw-wash:nth-child(2) svg { clip-path: polygon(87.9% 50.5%, 93.6% 70.3%, 76.4% 76.9%, 65.4% 81.7%, 47.8% 89.6%, 32.7% 86.6%, 21.0% 76.4%, 12.4% 63.3%, 10.4% 48.9%, 5.3% 34.0%, 28.2% 23.4%, 30.0% 12.5%, 49.1% 4.7%, 60.5% 15.4%, 77.5% 24.5%, 83.2% 40.2%); } .iw-wash:nth-child(3) svg { clip-path: polygon(92.6% 53.4%, 96.8% 64.5%, 83.9% 78.4%, 65.1% 96.0%, 48.9% 89.6%, 36.0% 87.6%, 21.8% 81.5%, 16.8% 62.3%, 10.8% 49.6%, 8.9% 34.6%, 22.8% 24.3%, 32.1% 13.8%, 45.4% 1.7%, 67.3% 6.6%, 75.1% 24.1%, 83.9% 38.4%); } .iw-wash:nth-child(4) svg { clip-path: polygon(86.4% 46.9%, 88.7% 68.0%, 83.9% 86.5%, 67.4% 89.4%, 53.4% 98.2%, 36.5% 89.6%, 21.1% 78.7%, 5.1% 71.9%, 13.9% 49.9%, 14.2% 33.6%, 13.8% 19.9%, 39.5% 17.4%, 50.0% 15.3%, 66.4% 3.1%, 77.7% 16.9%, 92.4% 36.3%); } .iw-wash--a svg { clip-path: polygon(89.7% 49.3%, 82.7% 63.6%, 76.3% 81.0%, 66.6% 88.8%, 45.9% 96.7%, 29.4% 91.3%, 25.7% 74.6%, 12.6% 61.8%, 11.1% 46.4%, 5.4% 30.2%, 21.3% 20.8%, 30.7% 8.4%, 50.4% 1.7%, 66.4% 6.5%, 80.1% 23.7%, 94.3% 31.5%); } .iw-wash--b svg { clip-path: polygon(87.9% 50.5%, 93.6% 70.3%, 76.4% 76.9%, 65.4% 81.7%, 47.8% 89.6%, 32.7% 86.6%, 21.0% 76.4%, 12.4% 63.3%, 10.4% 48.9%, 5.3% 34.0%, 28.2% 23.4%, 30.0% 12.5%, 49.1% 4.7%, 60.5% 15.4%, 77.5% 24.5%, 83.2% 40.2%); } .iw-wash--c svg { clip-path: polygon(92.6% 53.4%, 96.8% 64.5%, 83.9% 78.4%, 65.1% 96.0%, 48.9% 89.6%, 36.0% 87.6%, 21.8% 81.5%, 16.8% 62.3%, 10.8% 49.6%, 8.9% 34.6%, 22.8% 24.3%, 32.1% 13.8%, 45.4% 1.7%, 67.3% 6.6%, 75.1% 24.1%, 83.9% 38.4%); } .iw-wash--d svg { clip-path: polygon(86.4% 46.9%, 88.7% 68.0%, 83.9% 86.5%, 67.4% 89.4%, 53.4% 98.2%, 36.5% 89.6%, 21.1% 78.7%, 5.1% 71.9%, 13.9% 49.9%, 14.2% 33.6%, 13.8% 19.9%, 39.5% 17.4%, 50.0% 15.3%, 66.4% 3.1%, 77.7% 16.9%, 92.4% 36.3%); } /* Sensible default placements so a wash looks right with no fiddling. */ /* Kept inside the 8rem overhang above, so a wash is never sliced by the clip line — only ever by the edge of the screen, which is the point. */ .iw-wash--tl { top: -6rem; left: -13rem; width: 50rem; height: 40rem; } .iw-wash--tr { top: 2rem; right: -15rem; width: 46rem; height: 44rem; opacity: .5; } .iw-wash--bc { bottom: -3rem; left: 20%; width: 36rem; height: 32rem; opacity: .42; } .iw-wash--br { bottom: -3rem; right: -12rem; width: 40rem; height: 36rem; opacity: .38; } /* Anything that hosts washes needs a stacking context and positioning. */ .iw-section { position: relative; } .iw-section > .wp-block-group, .iw-section > *:not(.iw-washes) { position: relative; z-index: 2; } /* Phones: swap the live SVG filter for a cheap blur. The filter chain is lovely and genuinely expensive to composite on older hardware. */ @media (max-width: 782px) { .iw-wash { filter: blur(14px); opacity: .5; } } @media (prefers-reduced-motion: reduce) { .iw-wash { filter: blur(12px); } } /* --------------------------------------------------------------------------- 5. INK ------------------------------------------------------------------------ */ .iw-ink { fill: var(--ink); } .iw-brushrule { display: block; width: 15.6rem; height: 1.8rem; margin-inline: auto; } .iw-brushrule path { fill: var(--ink); } .iw-plate { position: relative; overflow: hidden; aspect-ratio: 4 / 3.2; } .iw-plate svg { overflow: visible; } .iw-plate svg { width: 100%; height: 100%; } .iw-plate--square { aspect-ratio: 1 / 1; } /* --------------------------------------------------------------------------- 6. SMALL CAPS LABELS — kickers, categories, dates, nav ------------------------------------------------------------------------ */ .iw-label, .wp-block-post-terms, .wp-block-post-date { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--label); font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .iw-label--wide { letter-spacing: .42em; } .wp-block-post-terms a { text-decoration: none; } /* --------------------------------------------------------------------------- 7. MASTHEAD ------------------------------------------------------------------------ */ .wp-block-site-title, .wp-block-site-title a { font-family: var(--wp--preset--font-family--display); font-size: 1.1rem; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; text-decoration: none; } .wp-block-navigation { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--label); letter-spacing: .2em; text-transform: uppercase; } .wp-block-navigation .wp-block-navigation-item__content { text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: border-color .25s; } .wp-block-navigation .wp-block-navigation-item__content:hover { border-bottom-color: var(--ink); text-decoration: none; } /* --------------------------------------------------------------------------- 7b. MIXED-FAMILY HEADINGS An italicised word inside a heading drops to Cormorant at 300 — a different family, weight, slant and width all at once — so it whispers against the Shippori Mincho instead of merely leaning. In the editor: select a word inside a heading and press Cmd/Ctrl+I. Use .iw-whisper instead when the effect is purely visual — means real emphasis and screen readers announce it. ------------------------------------------------------------------------ */ :where(h1, h2, h3, h4, .wp-block-post-title, .wp-block-query-title) em, :where(h1, h2, h3, h4, .wp-block-post-title, .wp-block-query-title) .iw-whisper, .iw-whisper { font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 300; letter-spacing: 0; } /* --------------------------------------------------------------------------- 8. SECTION HEADS — "Recent ————————— nine entries" ------------------------------------------------------------------------ */ .iw-sechead { display: flex; align-items: baseline; gap: 1.25rem; } .iw-sechead h2, .iw-sechead .iw-sechead__title { margin: 0; white-space: nowrap; } .iw-sechead::after { content: ""; flex: 1; height: 1px; background: var(--rule); } /* --------------------------------------------------------------------------- 9. POST LISTS ------------------------------------------------------------------------ */ .wp-block-post-title { font-family: var(--wp--preset--font-family--display); } .wp-block-post-title a { text-decoration: none; } .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: .18em; } .wp-block-post-excerpt__excerpt { font-family: var(--wp--preset--font-family--serif); font-size: 1.0625rem; line-height: 1.6; color: var(--ink-soft); } .wp-block-post-excerpt__more-text a, .wp-block-read-more { font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--label); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; border-bottom: 1.5px solid var(--ink); padding-bottom: 4px; } .wp-block-post-featured-image img { width: 100%; } /* --------------------------------------------------------------------------- 10. READING VIEW ------------------------------------------------------------------------ */ .iw-article .wp-block-post-content > * { margin-block: 0 1.4rem; } .iw-article .wp-block-post-content > h2, .iw-article .wp-block-post-content > h3 { margin-block: 2.6rem 1rem; } .iw-article .has-drop-cap:first-letter, .wp-block-post-content > p.has-drop-cap:first-letter { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 4.4rem; line-height: .78; float: left; margin: .35rem .7rem 0 0; color: var(--ink); } .iw-reading-bg { background: var(--paper-deep); } /* --------------------------------------------------------------------------- 11. FORMS ------------------------------------------------------------------------ */ input[type="text"], input[type="email"], input[type="search"], textarea { font-family: var(--wp--preset--font-family--sans); font-weight: 300; background: transparent; border: 1px solid var(--ink); border-radius: 0; padding: .9rem 1.1rem; color: var(--ink); } input::placeholder { color: var(--muted); } /* --------------------------------------------------------------------------- 11b. SUBSCRIBE FORMS WordPress has no newsletter form of its own, so this styles whatever plugin you pick. Put the plugin's block inside a Group with the class `iw-subscribe` and the form takes on the joined input-and-button shape from the design — Jetpack, MailPoet, Mailchimp for WordPress, Newsletter, all the same. ------------------------------------------------------------------------ */ .iw-subscribe form, .iw-subscribe .mc4wp-form-fields, .iw-subscribe .wp-block-jetpack-subscriptions__form-elements { display: flex; gap: 0; max-width: 29rem; margin-inline: auto; } .iw-subscribe input[type="email"], .iw-subscribe input[type="text"], .iw-subscribe .wp-block-jetpack-subscriptions__textfield input { flex: 1; min-width: 0; border: 1px solid var(--ink); border-right: none; border-radius: 0; background: transparent; padding: .9rem 1.1rem; font-family: var(--wp--preset--font-family--sans); font-size: .95rem; font-weight: 300; color: var(--ink); } .iw-subscribe button, .iw-subscribe input[type="submit"], .iw-subscribe .wp-block-button__link, .iw-subscribe .mailpoet_submit, .iw-subscribe .wp-block-jetpack-subscriptions__button { flex: none; border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: var(--paper); padding: .9rem 1.7rem; font-family: var(--wp--preset--font-family--sans); font-size: var(--wp--preset--font-size--label); font-weight: 400; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s; } .iw-subscribe button:hover, .iw-subscribe input[type="submit"]:hover, .iw-subscribe .wp-block-button__link:hover { background: transparent; color: var(--ink); } /* Plugins like to add their own labels and margins. Quiet them down. */ .iw-subscribe label { display: none; } .iw-subscribe p { margin: 0; } .iw-subscribe .mailpoet_paragraph { margin: 0; flex: 1; } @media (max-width: 600px) { .iw-subscribe form, .iw-subscribe .mc4wp-form-fields, .iw-subscribe .wp-block-jetpack-subscriptions__form-elements { flex-direction: column; } .iw-subscribe input[type="email"], .iw-subscribe input[type="text"] { border-right: 1px solid var(--ink); margin-bottom: .6rem; } } /* --------------------------------------------------------------------------- 12. FOOTER ------------------------------------------------------------------------ */ .iw-footer { background: var(--wp--preset--color--ink); color: #e9e6e1; } .iw-footer a { color: #e9e6e1; text-decoration: none; } .iw-footer a:hover { text-decoration: underline; } .iw-footer .iw-label { color: #77777b; } .iw-footer .iw-ink { fill: #e9e6e1; } /* --------------------------------------------------------------------------- 13. ACCESSIBILITY ------------------------------------------------------------------------ */ :where(a, button, input, summary):focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }