. Shapes ride over section boundaries and parallax with scroll at per-shape speeds. ============================== */ main { position: relative; } .bw-decor { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; /* Above section backgrounds but below the sticky header (z:100) so shapes peek over section boundaries. Placement is kept at the left/right edges so the shapes don't smother body text. overflow-x: clip caps shapes to the main-column width — each shape is absolutely positioned with an x-offset (often negative) so on a narrow mobile viewport they were extending past the viewport edge and creating a horizontal scrollbar. Clip here + clip on / = three layers of defense-in-depth. */ z-index: 5; overflow-x: clip; overflow-y: visible; } .bw-decor__shape { position: absolute; display: block; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); /* pointer-events: auto — shapes are interactive enough to hover, but because they live at the edges of .bw-decor (which itself is pointer-events:none) they very rarely sit over clickable content. */ pointer-events: auto; cursor: default; opacity: 1; /* Parallax: per-shape --dec-k scales --scroll-y (unitless) × 1 px for a distinct translateY, PLUS a per-shape hover multiplier on scale. `rotate` combines the base tilt + a slow scroll-driven tumble. */ transform: translateY(calc(var(--scroll-y, 0) * var(--dec-k, 0.06) * -1px)) rotate(calc(var(--dec-rot, 0deg) + (var(--scroll-y, 0) * 0.01deg))) scale(var(--dec-scale, 1)); transition: transform .35s var(--ease-pop), box-shadow .25s, filter .25s; } /* Subtle hover: each shape wiggles, scales up a touch, and grows a softer shadow — it's a playful reward for moving the cursor into the edges. We don't change the parallax part; we bump --dec-scale which the base transform multiplies in. */ .bw-decor__shape:hover { --dec-scale: 1.08; box-shadow: 10px 10px 0 var(--ink); filter: brightness(1.04); } .bw-decor__shape--rect { border-radius: 6px; } .bw-decor__shape--circle { border-radius: 50%; } /* "plus" is a bold ink cross, drawn with two ::before / ::after bars on a transparent container (no outer border). */ .bw-decor__shape--plus { border: none; background: transparent !important; box-shadow: none; } .bw-decor__shape--plus::before, .bw-decor__shape--plus::after { content: ""; position: absolute; background: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--tomato); border-radius: 3px; } .bw-decor__shape--plus::before { left: 50%; top: 0; bottom: 0; width: 14px; transform: translateX(-50%); } .bw-decor__shape--plus::after { top: 50%; left: 0; right: 0; height: 14px; transform: translateY(-50%); } /* Diamond: a rotated rect with its own extra tilt on top of the per-shape --dec-rot. Uses the same background, border, shadow as .bw-decor__shape--rect. */ .bw-decor__shape--diamond { border-radius: 4px; /* The diamond rotation stacks onto the base transform via --dec-rot having +45 built into the JS shape pool. */ } /* Narrow viewports — scale shapes down and reduce their count via hiding the even-indexed ones so they don't crowd mobile. */ @media (max-width: 900px) { .bw-decor__shape { transform: scale(.7) translateY(calc(var(--scroll-y, 0) * var(--dec-k, 0.04) * -1px)) rotate(var(--dec-rot, 0deg)); } .bw-decor__shape:nth-child(2n) { display: none; } } @media (prefers-reduced-motion: reduce) { .bw-decor { display: none; } } /* ================================================================ DARK MODE — HIGH-CONTRAST, LOW-MOTION, ACCESSIBLE VARIANT ---------------------------------------------------------------- Dark mode isn't just a colour inversion. It's the "reader mode" of this site: text contrast goes up, motion comes down, focus rings get bigger, and the more decorative flourishes step back so the content reads cleanly. Users who find the collage design overwhelming can turn dark mode on and get something calmer. ================================================================ */ :root[data-theme="dark"] { /* Crank the contrast: pure white on near-black beats the cornsilk on ink-indigo that the "brand dark mode" used. WCAG contrast ratio between #FFFFFF and #0A0A0A is 20.39:1 — well into AAA. */ --ink: #FFFFFF; --paper: #0A0A0A; --paper-2: #141414; --paper-3: #1E1E1E; --fg1: #FFFFFF; --fg2: #E8E8E8; --fg3: #BDBDBD; --fg-invert: #0A0A0A; --border: #FFFFFF; /* Keep the saturated cutout tints in dark mode too — they're iconic to the design — but push them a touch brighter so they pop against the near-black background without looking muddy. */ --tomato: #FF7A66; --yellow: #FFE849; --mint: #34E5B3; --lilac: #A7A5FF; --hot-pink: #FF6BD0; --royal: #5E5AFF; --sky: #7DCFFF; } /* -- BLANKET MOTION REDUCTION -------------------------------------- All keyframe animations cancelled; CSS transitions are ALSO disabled via `transition: none` (not just shortened). An earlier version capped duration at 100 ms, but that produced a Chrome glitch where body's background-color got stuck mid-transition when the theme was toggled at runtime. `transition: none` side-steps that entirely — every state change is instant, which is exactly what a low-motion mode should deliver anyway. */ [data-theme="dark"] *, [data-theme="dark"] *::before, [data-theme="dark"] *::after { animation: none !important; transition: none !important; } /* -- CARD / PARTNER / WORK / WINDOW: no tilt, no lift ------------- Cardboard collage rotations are charming but visually noisy. In dark mode we flatten everything to 0° so the layout reads as a calm grid. Hover STILL gives informative feedback (background flip) but no motion. */ [data-theme="dark"] .bw-card, [data-theme="dark"] .bw-grid .bw-card, [data-theme="dark"] .bw-partner, [data-theme="dark"] .bw-time__year, [data-theme="dark"] .bw-step, [data-theme="dark"] .bw-window, [data-theme="dark"] .bw-window--tilt-right, [data-theme="dark"] .bw-window--tilt-left, [data-theme="dark"] .bw-profile__image { transform: none !important; --card-rot: 0deg; } [data-theme="dark"] .bw-card:hover, [data-theme="dark"] .bw-step:hover, [data-theme="dark"] .bw-partner:hover, [data-theme="dark"] .bw-window:hover, [data-theme="dark"] .bw-profile__image:hover { transform: none !important; outline: 3px solid var(--yellow); outline-offset: 4px; box-shadow: 6px 6px 0 var(--ink); } /* -- HIGHLIGHT HOVER VARIANTS: freeze the motion ------------------- Keep the colour / background change so highlights still respond, but drop the scale/rotate/skew that makes headings "dance". */ [data-theme="dark"] [data-hi]:hover, [data-theme="dark"] .bw-mast__title .brush:hover, [data-theme="dark"] .bw-mast__title em:hover, [data-theme="dark"] .bw-mast__title .uline:hover, [data-theme="dark"] .bw-chapter__title em:hover, [data-theme="dark"] .bw-work__title em:hover, [data-theme="dark"] .bw-pullquote blockquote .mark:hover, [data-theme="dark"] .bw-cta__title em:hover, [data-theme="dark"] .bw-toc__head h2 em:hover { transform: none !important; animation: none !important; } /* -- CARDBOARD MIRRORED UNDERLINE: calm down ---------------------- */ [data-theme="dark"] .bw-mast__title--mirrored:has(em.hi-domane:hover) .uline, [data-theme="dark"] .bw-mast__title--mirrored em.hi-modell:hover::after, [data-theme="dark"] .bw-mast__title--mirrored em.hi-domane:hover, [data-theme="dark"] .bw-mast__title--mirrored em.hi-modell:hover { transform: none !important; } /* -- DECORATIVE SHAPE LAYER: static and low-profile --------------- Shapes still appear for brand continuity, but no parallax, no hover wobble, and they drop to low opacity so they're background texture rather than competing with content. */ [data-theme="dark"] .bw-decor__shape { transform: rotate(var(--dec-rot, 0deg)) !important; opacity: .35; transition: none !important; } [data-theme="dark"] .bw-decor__shape:hover { --dec-scale: 1; opacity: .55; box-shadow: 6px 6px 0 var(--ink) !important; filter: none !important; } /* -- PARTNERS MARQUEE: stop the auto-scroll ------------------------ */ [data-theme="dark"] .bw-partners__track { animation: none !important; /* show the first set only — the duplicate for scrolling becomes visual clutter when frozen. */ transform: none !important; } [data-theme="dark"] .bw-partners__track > [aria-hidden="true"] { display: none; } /* -- PULLQUOTE CAROUSEL: only show the first slide ---------------- The rotation is handled in script.js via setInterval — the CSS override here just makes sure all slides display stacked only via the first one being .is-active. script.js checks theme to skip the interval. */ [data-theme="dark"] .bw-pullquote__body { min-height: 0; } [data-theme="dark"] .bw-pullquote__slide { position: relative; opacity: 1; transform: none !important; padding: 0; } [data-theme="dark"] .bw-pullquote__slide:not(:first-child) { display: none; } [data-theme="dark"] .bw-pullquote__dots { display: none; } /* -- BIGTEXT: no slam, no fill-shake ------------------------------ */ [data-theme="dark"] .bw-segment__fill, [data-theme="dark"] .bw-bigtext, [data-theme="dark"] .bw-segment__fill::after, [data-theme="dark"] .bw-bigtext::after { animation: none !important; } /* -- SCROLL-IN: no translate entry, content visible immediately --- */ [data-theme="dark"] .bw-observable, [data-theme="dark"] .bw-observable:not(.is-in) { opacity: 1 !important; transform: none !important; transition: none !important; } /* -- PARALLAX DECOR on masthead band + CTA accents ----------------- */ [data-theme="dark"] .bw-mast__band, [data-theme="dark"] .bw-cta::before, [data-theme="dark"] .bw-cta::after { transform: none !important; } /* -- KONTAKT STUB: no hover wobble, no translate ------------------ */ [data-theme="dark"] .bw-mast__stub:hover { transform: none !important; outline: 3px solid var(--yellow); outline-offset: 3px; } /* -- FOCUS RING: bigger, brighter, always visible ----------------- */ [data-theme="dark"] :focus-visible { outline: 3px solid var(--yellow) !important; outline-offset: 3px !important; } /* -- LINKS: underline by default so they're obvious --------------- */ [data-theme="dark"] a:not(.bw-btn):not(.bw-nav a):not(.bw-mobnav a):not(.bw-footer ul a):not(.bw-tools .cta):not(.bw-toc__item):not(.bw-work):not(.bw-card a):not(.bw-contact):not(.bw-brand):not(.bw-skip):not(.bw-mast__stub):not(.bw-link):not(.bw-mast__crumb a):not(.bw-partner):not(.bw-tools .lang a) { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } /* -- HEADER / NAV: keep brand colours but let accessibility bits punch through — link hover underlines stay visible. */ [data-theme="dark"] .bw-nav a:hover { outline: 2px solid var(--yellow); outline-offset: -2px; } /* ================================================================ DARK MODE — CONTRAST FIX FOR "INVERTED ISLAND" SECTIONS ---------------------------------------------------------------- Several sections were designed as DARK islands against a light page (partners marquee, pullquote, CTA, footer, .bw-sec--ink). Their backgrounds used var(--ink) which FLIPPED to near-white in dark mode, turning them into bright rectangles full of light-on- dark text — that became light-on-light. Contrast failures were: • .bw-partners h3 yellow-on-white (1.24) • .bw-cta__title em yellow-on-white (1.24) • .bw-cta__title white-on-coral (2.55) • .bw-footer p / h4 pale tokens on white • .bw-segment__fill yellow-on-lilac (1.78) We restore the island intent by hard-coding dark backgrounds and light text inside them — unaffected by the token flip. ================================================================ */ /* PARTNERS MARQUEE — dark ink block with cornsilk text + yellow h3 */ [data-theme="dark"] .bw-partners { background: #0A0A0A; color: #FFF8E1; border-top-color: #FFF8E1; border-bottom-color: #FFF8E1; } [data-theme="dark"] .bw-partners__head h3 { color: #FFEF00; } [data-theme="dark"] .bw-partners__head { border-bottom-color: rgba(255, 248, 225, .25); } /* Individual partner cards keep a LIGHT background so the dark brand logos inside stay visible (logos are designed for light). */ [data-theme="dark"] .bw-partner { background: #FFF8E1; border-color: #FFF8E1; } [data-theme="dark"] .bw-partner small { color: #0A0A0A; } /* CTA BIG BLOCK — keep closing CTA dark-text-on-tomato */ [data-theme="dark"] .bw-cta { background: #FF5A43; color: #0A0A0A; border-top-color: #FFF8E1; border-bottom-color: #FFF8E1; } [data-theme="dark"] .bw-cta__title, [data-theme="dark"] .bw-cta__body, [data-theme="dark"] .bw-cta__eyebrow { color: #0A0A0A; } /* CTA inline em highlight: dark ink chip + yellow text — keep the light-mode intent when --ink flips to white. */ [data-theme="dark"] .bw-cta__title em { background: #0A0A0A; color: #FFEF00; } /* CTA ghost button is paper-on-ink in light mode — lock to cornsilk + dark text in dark mode so it stays legible on the tomato CTA bg. */ [data-theme="dark"] .bw-cta .bw-btn { background: #0A0A0A; color: #FFEF00; } [data-theme="dark"] .bw-cta .bw-btn--ghost { background: #FFF8E1; color: #0A0A0A; } /* PULLQUOTE (royal blue block) — light text, yellow cite-author */ [data-theme="dark"] .bw-pullquote { background: #3C3AE0; color: #FFF8E1; } [data-theme="dark"] .bw-pullquote blockquote, [data-theme="dark"] .bw-pullquote cite { color: #FFF8E1; } [data-theme="dark"] .bw-pullquote cite b { color: #FFEF00; } [data-theme="dark"] .bw-pullquote__ticker { -webkit-text-stroke-color: #FFEF00; } /* FOOTER — deep dark block with cornsilk / mint / yellow accents */ [data-theme="dark"] .bw-footer { background: #0A0A0A; color: #FFF8E1; border-top-color: #FFF8E1; } [data-theme="dark"] .bw-footer p { color: #cfc7a8; } [data-theme="dark"] .bw-footer h4 { color: #34E5B3; } [data-theme="dark"] .bw-footer__brand { color: #FFEF00; } [data-theme="dark"] .bw-footer ul a { color: #FFF8E1; } [data-theme="dark"] .bw-footer ul a:hover { color: #FF7A66; } [data-theme="dark"] .bw-footer__colophon { color: #9d9884; border-top-color: rgba(255, 248, 225, .2); } /* SECTION .bw-sec--ink (portfolio "Zahlen") — keep dark */ [data-theme="dark"] .bw-sec--ink { background: #0A0A0A; color: #FFF8E1; border-top-color: #FFF8E1; border-bottom-color: #FFF8E1; } [data-theme="dark"] .bw-sec--ink .bw-chapter__title { color: #FFF8E1; } [data-theme="dark"] .bw-sec--ink .bw-chapter { border-bottom-color: #FFF8E1; } /* Yellow em chip inside dark section: lock text to ink-dark (not the flipped token which becomes white → fails WCAG against yellow). */ [data-theme="dark"] .bw-sec--ink .bw-chapter__title em { background: #FFEF00; color: #0A0A0A; box-shadow: 3px 3px 0 #FF5A43; } /* .bw-stats--dark — lock literal dark appearance */ [data-theme="dark"] .bw-stats--dark { background: #161616; border-top-color: #FFF8E1; border-bottom-color: #FFF8E1; } [data-theme="dark"] .bw-stats--dark .bw-stat { border-right-color: #FFF8E1; } [data-theme="dark"] .bw-stats--dark .bw-stat__num { color: #34E5B3; } [data-theme="dark"] .bw-stats--dark .bw-stat__value { color: #FFEF00; } [data-theme="dark"] .bw-stats--dark .bw-stat__label { color: #FFF8E1; } /* BIGTEXT / SEGMENT FILL — home page fill sits on a LILAC panel (which stays bright in dark mode via the bright-surface override). Yellow or tomato both fail against lilac. Use ink fill with a tomato stroke offset behind so the text reads as a bold dark block with a red paper-cutout shadow. */ [data-theme="dark"] .bw-segment__fill, [data-theme="dark"] .bw-bigtext { color: #0A0A0A; } [data-theme="dark"] .bw-segment__fill::after, [data-theme="dark"] .bw-bigtext::after { -webkit-text-stroke-color: #FF5A43; } [data-theme="dark"] .bw-bigtext--tomato { color: #FF5A43; } [data-theme="dark"] .bw-bigtext--tomato::after { -webkit-text-stroke-color: #0A0A0A; } [data-theme="dark"] .bw-bigtext--ink { color: #0A0A0A; } [data-theme="dark"] .bw-bigtext--ink::after { -webkit-text-stroke-color: #FF5A43; } [data-theme="dark"] .bw-bigtext--mint { color: #34E5B3; } [data-theme="dark"] .bw-bigtext--yellow { color: #FFEF00; } /* SATURATED CARDS — tomato in dark mode is a bright coral (#FF7A66), so DARK text is the legible choice (cornsilk on coral fails). Royal (#5E5AFF) gets cornsilk text (passes). Ink card bg is white in dark mode (due to token flip), so inner text becomes dark. */ [data-theme="dark"] .bw-card--tomato { color: #0A0A0A; } [data-theme="dark"] .bw-card--tomato .bw-card__title, [data-theme="dark"] .bw-card--tomato .bw-card__body, [data-theme="dark"] .bw-card--tomato .bw-card__num { color: #0A0A0A; } [data-theme="dark"] .bw-card--royal { color: #FFF8E1; } [data-theme="dark"] .bw-card--royal .bw-card__title, [data-theme="dark"] .bw-card--royal .bw-card__body, [data-theme="dark"] .bw-card--royal .bw-card__num { color: #FFF8E1; } /* .bw-card--ink in dark mode has --ink=white bg → keep inner text dark */ [data-theme="dark"] .bw-card--ink { color: #0A0A0A; } [data-theme="dark"] .bw-card--ink .bw-card__title, [data-theme="dark"] .bw-card--ink .bw-card__body, [data-theme="dark"] .bw-card--ink .bw-card__num { color: #0A0A0A; } /* CHAPTER NUM chip + bw-chip — lock dark bg + cornsilk text */ [data-theme="dark"] .bw-chapter__num:not(.bw-chapter__num--yellow) { background: #0A0A0A; color: #FFF8E1; } [data-theme="dark"] .bw-chip:not([style*="background"]) { background: #0A0A0A; color: #FFF8E1; } /* CHAPTER TITLE em chips — yellow bg, text inherits body-white in dark mode and fails against yellow. Pin to ink-dark. */ [data-theme="dark"] .bw-chapter__title em { color: #0A0A0A; } /* hi-toc highlight in home TOC — yellow bg with --ink text that flips white. Lock to ink-dark. */ [data-theme="dark"] .hi-toc { color: #0A0A0A; } /* Inline-style chip with `background:var(--ink); color:var(--yellow)` (home-page "§ 01 — Haltung / Stance"). In dark mode ink flips to WHITE → yellow on white. Override the inline via attribute-selector. */ [data-theme="dark"] [style*="background:var(--ink)"] { background: #0A0A0A !important; } /* PHASE num chips — inside bw-phase where the bright-surface override pins --ink dark, but --paper still flips via the root rule, landing on the same dark value for both. Hard-code literal colours. */ [data-theme="dark"] .bw-phase__num { background: #0A0A0A; color: #FFF8E1; } /* MAST TITLE em on coloured masts — tomato is the default em colour (.bw-mast__title em). On yellow mast yellow+tomato fails; on lilac mast (about page "Domäne / Modell") tomato+lilac also fails. Pin to ink-dark for both. */ [data-theme="dark"] .bw-mast--yellow .bw-mast__title em, [data-theme="dark"] .bw-mast--lilac .bw-mast__title em, [data-theme="dark"] .bw-mast--accent .bw-mast__title em { color: #0A0A0A; } /* TIMELINE __year chip — yellow bg with border + parent-inherited white text (fg1 flips in dark). Pin text to ink-dark. */ [data-theme="dark"] .bw-time__year { color: #0A0A0A; } /* WORK TITLE em — ink bg (flips to white in dark) + yellow text. Yellow on white fails. Swap bg back to dark so intent holds. */ [data-theme="dark"] .bw-work__title em { background: #0A0A0A; color: #FFEF00; } /* CHAPTER NUM chip --yellow variant — text uses --ink which flips white. Lock to dark ink. */ [data-theme="dark"] .bw-chapter__num--yellow { color: #0A0A0A; } /* NAV current page + LANG current: bg is saturated (mint / yellow) but text inherits white, failing. Pin dark text. */ [data-theme="dark"] .bw-nav a[aria-current="page"] { color: #0A0A0A; } [data-theme="dark"] .bw-tools .lang a[aria-current="true"] { color: #0A0A0A; } /* GHOST button — background is paper-2 (dark gray in dark mode) and text is ink (white normally). But inside a bright-surface parent (yellow / mint / lilac mast), the bright-surface override pins --ink dark → dark-on-dark. Lock the ghost button to a LIGHT bg + dark text so it stays a readable "outlined" button regardless of which section it sits in. */ [data-theme="dark"] .bw-btn--ghost { background: #FFF8E1; color: #0A0A0A; } [data-theme="dark"] .bw-btn--royal { color: #FFF8E1; } [data-theme="dark"] .bw-btn--mint { color: #0A0A0A; } [data-theme="dark"] .bw-btn--yellow { color: #0A0A0A; } /* PULLQUOTE .mark chip — yellow bg needs dark text (currently inherits light in dark mode because --ink flips). */ [data-theme="dark"] .bw-pullquote blockquote .mark { color: #0A0A0A; } /* SKIP link — focus-only element. Lock dark bg + yellow text. */ [data-theme="dark"] .bw-skip { background: #0A0A0A; color: #FFEF00; } /* FOCUS/MOBNAV current-page: same treatment */ [data-theme="dark"] .bw-mobnav a[aria-current="page"] { color: #0A0A0A; } /* CARD__num (eyebrow) on saturated cards — inherits colour via card rules already covered. But on LILAC/MINT/YELLOW cards, the bright-surface override pins --ink dark, so --ink-based colours are fine. We've already handled tomato/royal/ink above. */ /* INK card eyebrow — the HTML inline `style="color:var(--mint)"` was designed for the BLACK ink card in light mode (mint on black = ~8). In dark mode the card flips to WHITE and mint / tomato both fail on white; lock to dark ink so the eyebrow stays legible. */ [data-theme="dark"] .bw-card--ink .bw-card__num { color: #0A0A0A !important; } /* THEME-TOGGLE "Nacht" indicator — royal bg + fg-invert dark text was 4.13 (just below 4.5). Bump to cornsilk for easier reading. */ [data-theme="dark"] .bw-tools .theme-toggle[data-edition="night"] .tt-night { color: #FFF8E1; } /* bw-step h4 inside mint sec — bright-surface override pins --fg1 dark which combines with the card's own dark paper-2 bg to produce dark-on-dark. Lock step cards to a light cornsilk bg in dark mode so they stand out from the mint section AND their dark text reads. */ [data-theme="dark"] .bw-step { background: #FFF8E1; color: #0A0A0A; } [data-theme="dark"] .bw-step:nth-child(3n+2) { background: #F2ECD4; } [data-theme="dark"] .bw-step h4, [data-theme="dark"] .bw-step p { color: #0A0A0A; } [data-theme="dark"] .bw-step:hover { background: #FFEF00; } [data-theme="dark"] .bw-step__num { color: #B83018; } /* deeper tomato for AA on cornsilk */ /* Inline-styled "Elsewhere" yellow card on contact page — text inside inherits white body colour, failing against the yellow inline bg. Attribute-selector targets the inline style so we don't have to refactor the HTML. */ [data-theme="dark"] [style*="background:var(--yellow)"] { color: #0A0A0A !important; } [data-theme="dark"] [style*="background:var(--yellow)"] a, [data-theme="dark"] [style*="background:var(--yellow)"] span { color: #0A0A0A; } /* MAST stub, when on a yellow mast — actually stub is only on home. */ /* ============================== LITTLE UTILITIES ============================== */ .bw-hide { display: none !important; } .bw-u-right { text-align: right; } .bw-u-center { text-align: center; } .bw-u-mt-lg { margin-top: 64px; } .bw-u-mt-xl { margin-top: 96px; } /* Contact form + aside grid (form left, hinweise.md window + Elsewhere card right). 2 columns on desktop, stacks on mobile. Replaces the previous inline-style grid that didn't collapse on narrow screens. */ .bw-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; } @media (max-width: 900px) { .bw-form-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } } /* badges-row ribbon for contact formats */ .bw-contacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; box-shadow: 8px 8px 0 var(--ink); } .bw-contact { display: flex; flex-direction: column; gap: 6px; padding: 28px; border-right: 3px solid var(--ink); background: var(--paper-2); color: var(--ink); transition: background .15s; } .bw-contact:last-child { border-right: 0; } .bw-contact::after { display: none; } .bw-contact:nth-child(1):hover { background: var(--yellow); } .bw-contact:nth-child(2):hover { background: var(--mint); } .bw-contact:nth-child(3):hover { background: var(--hot-pink); } .bw-contact__label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--tomato); } .bw-contact__value { font-family: var(--font-head); font-weight: 700; font-size: 22px; letter-spacing: -.01em; } .bw-contact__note { font-family: var(--font-body); font-size: 13px; color: var(--fg2); } @media (max-width: 900px) { .bw-contacts { grid-template-columns: minmax(0, 1fr); } .bw-contact { border-right: 0; border-bottom: 3px solid var(--ink); } .bw-contact:last-child { border-bottom: 0; } }