/* ========================================================================== GOOD FUTURE — interaction layer -------------------------------------------------------------------------- theme.json carries the tokens. This file carries what it cannot express: hover/focus transitions, card states, the gold underline, the sticky header, the mobile drawer breakpoint, and the section components. Grown from the package's wordpress/gf-tokens.css. Everything is written against CORE BLOCK CLASSES (.wp-block-*) or the `gf-*` classes the patterns put on core blocks — never against markup this theme does not control. Enqueued last (see functions.php), so it wins on equal specificity over every parent layer. ========================================================================== */ :root { --gf-ink: #16201C; --gf-ink-deep: #0B110F; --gf-paper: #F6F4EF; --gf-card: #FCFBF8; --gf-gold: #C9A961; --gf-gold-deep: #B2924C; --gf-nebel: #5A625C; --gf-glet: #DCE3DF; --gf-line: #E3E7E3; --gf-line-dk: #3A4640; --gf-radius: 2px; --gf-transition: 180ms cubic-bezier(.2, 0, 0, 1); --gf-ring: 2px; --gf-ring-offset: 2px; --gf-header-h: 88px; --gf-content: 1200px; } /* ------------------------------------------------------------------ base -- */ body { overflow-x: hidden; /* the hero flower bleeds past the edge */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* One ring everywhere. Never remove it — it is the only state a keyboard user has. Declared here so it beats the parent's neutral-grey ring. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--gf-ring) solid var(--gf-gold); outline-offset: var(--gf-ring-offset); border-radius: var(--gf-radius); } .gf-skip { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 12px 20px; background: var(--gf-ink); color: var(--gf-paper); text-decoration: none; } .gf-skip:focus { left: 0; } .gf-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------ full bleed -- The parent's ds.css clamps EVERY .wp-block-post-content to content-size: .wp-block-post-content { max-width: var(--wp--style--global--content-size); } That is right for a prose page and wrong for a composed one: with it in force an `alignfull` section can only break out as far as the root padding, so the ink band and the Gletscher band rendered 1248px wide inside a 1440px viewport instead of edge to edge. Released only where this theme has explicitly marked the content area full-width, so ordinary prose pages keep the parent's measure. The blanket top margin goes with it: sections carry their own 96/128/160 padding and must butt against each other, not sit 24px apart. */ .wp-block-post-content.alignfull { max-width: none; margin-inline: 0; } .wp-block-post-content.alignfull > * { margin-block-start: 0; } /* Core gives every root-level block a block-gap top margin, which put a 24px strip of Papier between
and the ink